abgerundete ecken als hintergrund in css menü

gollib · #1 (**permalink**) 16.07.2006, 12:14

hallo,

ich bin gerade dabei eine seite zu erstellen und habe mir ein horizontales css menü erstellt. auf meiner seite hat alles abgerundete ecken. jetzt hätte ich gerne, dass der hintergrund der 2ten ebene des menüs auch runde ecken bekommt. und das bekomm ich einfach nicht hin.
das menü kann unter http://www.travel-junkie.com/aboutme.php
mal angeschaut werden.

das css für das menü ist

Code:

/*begin menu*/
ul.postnav,ul.postnav li{
   margin:0;
   padding:0;
   list-style-type:none
   }
   
ul.postnav li{
   float:left;
   position: relative;
   width: 200px;
   font-size:140%;
   margin-right: 5px
   }

ul.postnav li.nomargin{
   margin-right:0;
   }

li ul {
   display: none;
   position: absolute; 
   top: 100%;
   left: 0;
   margin-left: 0;
   padding:0;
   font: bold 50% Verdana,Arial,sans-serif;
   background-color: #FFF;
   margin-right:0;
   }

li > ul {
   top: auto;
   left: auto;
	}

li:hover ul, li.over ul{ 
   display: block; 
   }

ul.postnav a{
   display:block;
   width:200px;
   padding:5px 0;
   margin: 3px 0;
   font: bold 100% Verdana,Arial,sans-serif;
   text-transform:uppercase;
   background: #C7FF5A;
   color: #666;
   text-decoration:none;
   text-align:center
   }
   
ul.postnav a:hover{
   background: #A8E52F;
   color:#FFF
   }

ich bin ein ziemlicher anfänger und wahrscheinlich ist der code ziemlich durcheinander, aber vielleicht wist ihr ja trotzdem, was ich meine.
danke, boris

heiko_rs · #2 (**permalink**) 16.07.2006, 12:28

Du löst das alles per JS (nicht nur das Menü, sondern alle abgerundeten Ecken auf der Seite), was nicht die beste Idee ist. Per CSS wäre es so, daß die Listen der zweiten Ebene (oder alternativ deren jeweils "unterstes" li oder a etc.) eine teilweise transparente Grafik mit background-position: bottom; brauchen und dort natürlich keine Hintergrundfarbe haben dürfen. Momentan haben z.B. die Listen der zweiten Ebene noch Weiß als Hintergrund, das mußt Du dann natürlich ändern.

Aber das nützt Dir natürlich nichts, solange das Menü komplett auf JS basiert, aber ich hätte an Deiner Stelle ja den Ehrgeiz, das Design der Seite ausschließlich per Grafiken und CSS umzusetzen

gollib · #3 (**permalink**) 18.07.2006, 00:08

erst mal danke für die antwort. hab mir selber schon überlegt, das layout möglichst ohne js zu machen. abgesehen von den rundungen und ein bisschen js für den ie ist das menü allerdings komplett css. mittlerweile hab ich auch hinbekommen, dass das menü im ie so angezeigt wird, wie ich es will, ausser, dass die 2te ebene sich direkt unterhalb der 1sten befindet (dazu könnte ich auch ne antwort gebrauchen). im ff schaut das menu allerdings bescheiden aus und ich weiss nicht woran es liegt. was hab ich falsch gemacht? danke sehr, b

hier nochmal das neue css für das menü

Code:

/*begin menu*/
ul.postnav,ul.postnav li{
   margin:0;
   padding:0;
   list-style-type:none
   }
   
ul.postnav li{
   float:left;
   position: relative;
   width: 200px;
   font-size:140%;
   margin-right: 5px
   }

ul.postnav li.nomargin{
   margin-right:0;
   }

li ul {
   display: none;
   position: absolute; 
   top: 100%;
   left: 0;
   margin-left:0;
   margin-right:0;   
   padding:0;
   font: bold 50% Verdana,Arial,sans-serif;
   }

li > ul {
   top: auto;
   left: auto;
   }

li:hover ul, li.over ul{ 
   display: block; 
   }

ul.postnav a{
   display:block;
   width:200px;
   padding:5px 0;
   margin: 3px 0;
   font: bold 100% Verdana,Arial,sans-serif;
   text-transform:uppercase;
   background: #C7FF5A;
   color: #666;
   text-decoration:none;
   text-align:center
   }
   
ul.postnav a:hover{
   background: #A8E52F;
   color:#FFF
   }

li.bg a{ 
   width:200px;
   margin-left:5px;
   margin-right:5px;
   }
   
li.bgpic a {
   width: 200px;
   margin-left:5px;
   margin-right:5px;
   margin-bottom:5px;
   }
   
li.bg{
   background-image: url(http://www.travel-junkie.com/images/menu_stretch.gif);
   background-position: center;
   background-repeat: repeat;
   }
   
li.bgpic{
   background-image: url(http://www.travel-junkie.com/images/menu_bottom.gif);
   background-position: bottom;
   background-repeat: no-repeat;
   }

heiko_rs · #4 (**permalink**) 18.07.2006, 00:44

Bevor Du an Deinem jetzigen Markup weiterarbeitest: Es gibt eine komplett JS-freie (und valide) Lösung, die auch im IE funktioniert; die würde ich mir mal anschauen, denn damit könntest Du letztlich gänzlich auf JS verzichten: http://www.cssplay.co.uk/menus/dd_valid.html

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
CSS Menü verändern	Severa	CSS	1	12.09.2012 01:57
dynamisches CSS menü funktioniert in IE nicht!	riseup	CSS	8	11.08.2011 18:17
Redesign für Steiner Cycling Team	pkipper	Site- und Layoutcheck	11	09.02.2011 12:25
Runde Ecken mit CSS	DiHo	CSS	5	09.01.2011 22:00
CSS Menü zickt rum /IE6/IE7/FF	GizmotroniX	CSS	3	11.07.2007 08:14