Rund sollst du sein ! ho ho ho..

Loon3y · 25 September 2008

Kurz und knapp, ein dummer Gedanke:

Meinereiner will ein rundes Menu machen. Leider ist es eckig XD *g* haha nein...also grafiken werden noch eingebunden ! Ist ja erstmal ein Versuch... Mein Problem ist, irgendwie habe ich ".oben" und ".unten" auf "margin: 0 auto;" gesetzt, aber es ist nicht zentriert, oder irre ich mich?

Könnte man das ganze einfacher lösen?

Anbei der Code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html> 
<head> 

    <title>test</title>

<style type="text/css"> 


    #over { height: 250px; width: 320; margin: 0px auto; border: 1px solid; list-style:none; }

     .oben { 
    width: 200px;
    height: 40px;
    margin: 0px auto;
    background-color: #FF0000;
      } 


     .oben_links { 
    width: 75px;
    height: 70px;
    float: left;    
    background-color: #FF0000;
      } 

     .oben_rechts { 
    width: 75px;
    height: 70px;
    float: right;    
    background-color: #FF0000;
      } 

     .unten_links { 
    width: 75px;
    height: 70px;
    float: left;        
    margin-top:70px;
    margin-left:-75px;    
    background-color: #FF0000;
      } 

     .unten_rechts { 
    width: 75px;
    height: 70px;
    float: right;
    margin-top:70px;
    margin-right:-75px;    
    background-color: #FF0000;
      } 

     .unten { 
    width: 200px;
    height: 40px;
    margin: 140px auto;
    background-color: #FF0000;
      } 

  </style> 
</head> 
<body> 



    <ul id="over">
        <li class="oben"> oben </li>

        <li class="oben_links"> links_oben </li> 
        <li class="oben_rechts"> rechts_oben </li> 
 
        <li class="unten_links"> links_unten </li> 
        <li class="unten_rechts"> rechts_unten </li> 

        <li class="unten"> unten </li> 
    </ul> 


</body>
</html>

Grüßli
Loon3y

crash · 25 September 2008

Mach's lieber mit DIV, damit hast du weniger Probleme und es wäre semantisch (da DIVs bedeutungslos sind).

neuroleptika · 25 September 2008

Oder schreibe erstmal etwas Inhalt in die Box.
Manchmal reichen deren Elemente schon aus.

Loon3y · 25 September 2008

Wie mussi ch das nun auffassen? Ein Menu wird doch mit <ul> und <li> dargestellt, wieso dann divs verwenden?

hätte jetzt einen ring via photoshop gemacht und ihn für die boxen zerschnippelt. Ist das keine gute idee?

prm · 25 September 2008

In diesem Fall würde ich ausnahmsweise mit absoluten Positionierungen arbeiten. Da kannst du die Abstände gut einstellen und musst auch nicht auf float und clear achten.
Hab mal was gebastelt:

Code:

<style type="text/css">
 #over {
position: relative;
height: 250px;
width: 320px;
margin: 0px auto;
border: 1px solid;
list-style:none; }

     .oben {
     position: absolute;
     left: 60px;
     text-align: center;
    width: 200px;
    height: 40px;
    background-color: #FF0000;
      }


     .oben_links {
    width: 75px;
    height: 70px;
    position: absolute;
    top: 50px;
    left: 20px;
    background-color: #FF0000;
      }

     .oben_rechts {
    width: 75px;
    height: 70px;
    position: absolute;
    top: 50px;
    right: 20px;
    background-color: #FF0000;
      }

     .unten_links {
    width: 75px;
    height: 70px;
    position: absolute;
    top: 130px;
    left: 20px;
    background-color: #FF0000;
      }

     .unten_rechts {
    width: 75px;
    height: 70px;
    position: absolute;
    top: 130px;
    right: 20px;
    background-color: #FF0000;
      }

     .unten {
    width: 200px;
    height: 40px;
    position: absolute;
    top: 210px;
    left: 60px;
    text-align: center;
    background-color: #FF0000;
      }

  </style>
</head>
<body>

    <ul id="over">
        <li class="oben"> oben </li>

        <li class="oben_links"> links_oben </lilv>
        <li class="oben_rechts"> rechts_oben</li>
        <li class="unten_links"> links_unten </li>
        <li class="unten_rechts"> rechts_unten </li>
        <li class="unten"> unten </li>
    </ul>

</body>
</html>

Loon3y · 25 September 2008

Bei mir sind die grafiken nicht so zentriert...hm... und das menu soll in den banner rein. also geplant / gedacht ist folgendes:

Links Header, mitte Menu, rechts geht der Header weiter

Wenn ich über einen button vom menu gehe, öffnet sich innerhalb des kreises das aufklappmenu und die auswahl (punkte natürlich dann nur begrenzt möglich...mal schauen) und wenn kein menu aufgeklappt ist, soll vllt ein flashfilm oder irgendwie bilder da durchlaufen in der mitte vom Ring....oder auch nicht.

darunter dann die Page ^^

Hm..ob das position:absolute sinnvoll ist? und ob ich es rund bekomme durch grafiken??

Edit: bei .unten und .oben muss "left: 75px;"

[ #over - (1/2 .unten width ) ] / 2
{ 250px - (200px / 2) ] / 2 = 75px

dann isses zentriert. :)

^^

Loon3y · 25 September 2008

endschuldigt den doppelpost, aber kann sonst keinen anhang machen ^^

das menu müsste dann so aufgebaut werden..die gefärbten felder werden dann später die buttons....hm....

prm · 25 September 2008

Das sollte grundsätzlich so funktionieren wie von mir vorgeschlagen.
Du musst natürlich die top, left und right-Werte individuell anpassen.
Am besten du bindest die Grafiken mal ein und verschiebst sie dann ggf. mit entsprechend geänderten Werten.

neuroleptika · 26 September 2008

Ich habe irgendwie überlesen, daß es ein Menü sein soll.
Deshalb habe ich den Sinn der Liste nicht begriffen.
Als Menü sollte es natürlich eine Liste sein.

Das hatten wir doch letztenz als Palme?!
Da habe ich das mit einem Beispiel als Blüte beschrieben.

Ich hatte zwei Grafiken verwendet und den Verweistext mit position:absolute aus dem Viewpoint geschoben.

Es geht aber auch besser. Diesmal habe ich nur eine (zweigeteilte) Grafik verwendet. Den Verweistext habe ich unter der Grafik versteckt. So ist es ist etwas Barrierearmer und schneller.

Dazu habe ich ein leeres <span> im <a> verwendet, welches den Text "übermalt":

Code:

  #men {
margin: 0 auto;
padding: 0;
list-style: none;
width: 259px;
height: 258px;
background-image: url(images/doppel-kreis.png);
position: relative;
}

#men li {
position: absolute;

}


  #men li a {
display: block;
height: 100%;
width: 100%;
}

  #men li a span {
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;

}

  #men li a span {
background:  url(images/doppel-kreis.png);
background-repeat: no-repeat;
}

  #men li a:hover span {
background:  url(images/doppel-kreis.png);

}

  #men #li1 {
top: 0;
top: 0;
height: 45px;
width: 259px;
}

  #men #li1 a:hover span {
background-position: 0px 259px;

}

  #men #li2 {
top: 45px;
left: 0;
height: 168px;
width: 125px;
}

  #men #li2 a span {
background-position: 0px -45px;

}

  #men #li2 a:hover span {
background-position: 0px 214px;
}

  #men #li3 {
top: 45px;
right: 0;
height: 168px;
width: 125px;
}

  #men #li3 a span {
background-position: -134px -45px;

}

  #men #li3 a:hover span {
background-position: -134px 214px;
}

  #men #li4 {
bottom: 0px;
left: 0;
height: 45px;
width: 259px;
}

  #men #li4 a span {
background-position: 0px -213px;

}

  #men #li4 a:hover span {
background-position: 0px -470px;
background-repeat: no-repeat;
}

/*für ie6 irgend ein (noch nicht vergebener) Wert für a:hover*/
* html a:hover {
color: #000000;
}

Hochgeladen:
Rund soll es sein
Gestestet ab IE6, ff2, Opera9 und neure Browser.

Wenn Dir das zu kompliziert erscheint, suche nach dem Beitrag mit der Palme.

Loon3y · 26 September 2008

Zu kompliziert ist es nicht, allerdings benötige ich links und rechts an der Seite jeweils 2 buttons, d.h. im gesamten 6 Buttons nicht 4. Aber vom prinzip her sollte das gehen..hoffe ich ;-)

jetzt ist nurnoch eine Sache zu erledigen...nämlich das menu welches sich öffnet wenn man über den Button geht..ich hatte mir gedacht das es sich in der mitte vom Kreis öffnet..mal schauen wie die idee sich realisieren lässt :-)

danke für die hilfe schonmals.

Edit: ok stellt sich doch schwerer als gedacht arus..vllt liegts auch dran das ich grad schule bin..ka...aber wi emache ich das dann wenn ich unterschiedliche buttons habe?

neuroleptika · 26 September 2008

Loon3y schrieb:
.....allerdings benötige ich links und rechts an der Seite jeweils 2 buttons, d.h. im gesamten 6 Buttons nicht 4. Aber vom prinzip her sollte das gehen..

Ja die seitlichen <li>s sind bisher riesig. Da passen noch welche zwischen
[/quote]
..ich hatte mir gedacht das es sich in der mitte vom Kreis öffnet..mal schauen wie die idee sich realisieren lässt.
[/quote]

Einen Mitwachsenden Kreis?
Das geht mit diesem Bespiel natürlich nicht.
Du könntest eine Mitwachsende Scrollbox in die Mitte setzen.

Loon3y · 26 September 2008

Einen Mitwachsenden Kreis?
Das geht mit diesem Bespiel natürlich nicht.
Du könntest eine Mitwachsende Scrollbox in die Mitte setzen.

nein nein, ich habe doch in der mitte leere und statt sich das menu dann nach außen öffnet (so mit "aufklappeffekt"), es sich eben nach inen zu öffnet das ich dann in der mitte die auswahlmöglichkeit habe.

Nochmal anbei, vllt hast du meinen edit noch nicht gesehen..wie binde ich nun die buttons ein? ich steige da nicht so richtig durch bei dem menu hier...doch n bissal komplizierter..

neuroleptika · 26 September 2008

Die Grafik ist zweigeteilt.
Der obere Teil mit den grünen Flecken ist der Normale Zustand.
Anstelle der grünen Flecken zeichnest du deine Buttons in die Grafik.

Der Untere Teil der Grafik mit den roten Flecken wird bei a:hover ausschnittweise über die Link-Texte geschoben.
Anstelle der roten Flecken zeichnst du die Button mit der hover-Optik ein.

Das mit dem Aufklappen habe ich nicht verstanden. Meinst du ein Ausklappmenü?
Mach mal ein Bild wie es am Ende aussehen soll.

Loon3y · 26 September 2008

ah ich verstehe ! das ist ja genial....muss ich nicht für jeden button eine grafik erstellen... :-)

hänge mal an wie ich es meine, also wenn man danna uf irgendeinen der 6 buttons (muss noch 2 hinzufügen irgendwie...mal rumfummeln.. :-( dann soll sich in der mitte die auswahl öffnen und nicht links / rechts / oben / unten davon..sofern das möglich ist !

Loon3y · 26 September 2008

shit, sry wegen doppelpost..kann nixmehr anhängen wenn ich schon geschickt habe.

rexini · 26 September 2008

Ich kenn jetzt im mom nur eine möglichkeit:

ein Hovereffekt mit position absolute.

Is aber nich so nett wenn das dann immer hin und herspringt ;ugl

neuroleptika · 29 September 2008

Boxen sind immer eckig.
Auch mit neusten Browsern (css3 border-radius) sind die Außenmaße nie rund.
Das Beipiel aus meinem letzen Post lässt sich aber bis zur Praxisuntauglichkeit erweitern (Irgendwann wird die anklickbare Fläche zu klein).
Ein Beispiel mit sechs Menüeinträgen im Kreis:
Rund soll es sein
Die Grafik ist aus dem Letzten Beispiel.
Die Border habe ich zur Orientierung eingefügt.

Genauso lässt sich ein Untermenü innerhalb des Kreises Einfügen.

Solche Menüs sind nicht für skalierbaren Text geeignet. Grafiken müssen den anchor-Text ersetzen.

Die Elternelemente sollten für IE6 Layout haben damit sich die Kinderelemente korrekt ausrichten lassen.

Loon3y · 30 September 2008

Das sieht echt genial aus !

Jetzt ist nurnoch die eine Frage offen, wie ich das Dropdownmenu in die Mitte des Kreies bekomme. Mal schauen wie weit ich komme..

neuroleptika · 1 Oktober 2008

Loon3y schrieb:
Jetzt ist nurnoch die eine Frage offen, wie ich das Dropdownmenu in die Mitte des Kreies bekomme.

Wenn der Kreis nicht viel größer wie in den Beispielen werden soll,
würde ich Das Untermenü nicht mit :hover einblenden.
Die <a>-Elemente liegen zu dicht aneinander. Besucher mit etwas unruhiger Hand würden nur ein unbrauchbares Geflacker bei jeder unkontrollierten Mausbewegung verursachen.
Vielleicht währe hier onclick und Javascript benutzerfreundlicher.
(nur zum einblenden des Untermenüs).

Eine Alternativ-Navigation würde ich ebenfalls anbieten.

Loon3y · 1 Oktober 2008

neuroleptika schrieb:
Wenn der Kreis nicht viel größer wie in den Beispielen werden soll,
würde ich Das Untermenü nicht mit :hover einblenden.
Die <a>-Elemente liegen zu dicht aneinander. Besucher mit etwas unruhiger Hand würden nur ein unbrauchbares Geflacker bei jeder unkontrollierten Mausbewegung verursachen.
Vielleicht währe hier onclick und Javascript benutzerfreundlicher.
(nur zum einblenden des Untermenüs).

Eine Alternativ-Navigation würde ich ebenfalls anbieten.

das ist immer schwer zu verwirklichen, zumal JS wenn es abgeschaltet ist garnichts bringt, leider.

Alternativ wäre wohlmöglich, dass man per klick auf den Button im Mainfenster darunter die Auswahlmöglichkeiten nochmals aufgezeigt bekommt.

Wobei wir es jetzt von den bereichen her, relativ gut gelöst haben jetzt und du in der mitte doch eine recht große fläche hast.

Interessant ist dann wohl nur die umsetzung, denn das dropdownmenu muss ich in verschiedene richtungen öffnen...

Rund sollst du sein ! ho ho ho..

Neues Mitglied

Neues Mitglied

Aktives Mitglied

Neues Mitglied

Aktives Mitglied

Neues Mitglied

Neues Mitglied

Anhänge

Aktives Mitglied

Aktives Mitglied

Neues Mitglied

Aktives Mitglied

Neues Mitglied

Aktives Mitglied

Neues Mitglied

Neues Mitglied

Anhänge

Mitglied

Aktives Mitglied

Neues Mitglied

Aktives Mitglied

Neues Mitglied