Problem z menu css3


(Dawid Jablonski86) #1

Cześć,

Projektuje sobie stronkę w htlm 5 i za pomocą css3, i utkołem na jednym małym problem, otóż stworzyłem menu za pomocą tuto riala i nie mogę pozbyć się jednej krawędzi.

Poniżej prezentuje zdjęcie menu oraz o którą krawędź mi chodzi oraz swój kod html oraz css3. Z góry dzięki za odpowiedź.

krawedz.jpg

HTML5

  • O sobie
  • Portfolio

    • Logo
    • Plakaty
    • Wizytówki
  • Referencje
  • Kontakt
  • Cennik
    [/code] Menu w css3

[code] } div.contener {width:1000px; margin-left:auto; margin-right:auto; color:white; } #menu, #menu ul { margin: 0; padding: 0; list-style: none; } #menu { width: 600px; margin: 60px auto; background-color: #111; background-image: -moz-linear-gradient(#444, #111); background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111)); background-image: -webkit-linear-gradient(#444, #111); background-image: -o-linear-gradient(#444, #111); background-image: -ms-linear-gradient(#444, #111); background-image: linear-gradient(#444, #111); -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; -moz-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset; -webkit-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset; box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset; border: 1px solid #222; background-repeat: no-repeat; } #menu:before, #menu:after { content: “”; display: table; } #menu:after { clear: both; } #menu { zoom:1; } #menu li { float: left; position:relative; border-right: 1px solid #222; box-shadow: 1px 0 0 #444; } #menu a { float: left; padding: 12px 30px; color: #999; text-transform: uppercase; font: bold 12px Arial, Helvetica; text-decoration: none; text-shadow: 0 1px 0 #000; } #menu li:hover a { color: #fafafa; } *html #menu li a:hover { /* IE6 only */ color: #fafafa; } #menu ul { margin: 20px 0 0 0; _margin: 0; /*IE6 only*/ opacity: 0; visibility: hidden; position: absolute; top: 38px; left: 0; z-index: 1; background: #444; background: -moz-linear-gradient(#444, #111); background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111)); background: -webkit-linear-gradient(#444, #111); background: -o-linear-gradient(#444, #111); background: -ms-linear-gradient(#444, #111); background: linear-gradient(#444, #111); -moz-box-shadow: 0 -1px rgba(255,255,255,.3); -webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3); box-shadow: 0 -1px 0 rgba(255,255,255,.3); -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } #menu li:hover ul { opacity: 1; visibility: visible; margin: 0; } #menu ul ul { top: 0; left: 150px; margin: 0 0 0 20px; _margin: 0; /*IE6 only*/ -moz-box-shadow: -1px 0 0 rgba(255,255,255,.3); -webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3); box-shadow: -1px 0 0 rgba(255,255,255,.3); } #menu ul li { float: none; display: block; border: 0; _line-height: 0; /*IE6 only*/ -moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666; -webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666; box-shadow: 0 1px 0 #111, 0 2px 0 #666; } #menu ul li:last-child { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } #menu ul a { padding: 10px; width: 130px; _height: 10px; /*IE6 only*/ display: block; white-space: nowrap; float: none; text-transform: none; } #menu ul a:hover { background-color: #0186ba; background-image: -moz-linear-gradient(#04acec, #0186ba); background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba)); background-image: -webkit-linear-gradient(#04acec, #0186ba); background-image: -o-linear-gradient(#04acec, #0186ba); background-image: -ms-linear-gradient(#04acec, #0186ba); background-image: linear-gradient(#04acec, #0186ba); } #menu ul li:first-child a { -moz-border-radius: 3px 3px 0 0; -webkit-border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0; } #menu ul li:first-child a:after { content: ‘’; position: absolute; left: 40px; top: -6px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid #444; } #menu ul ul li:first-child a:after { left: -6px; top: 50%; margin-top: -6px; border-left: 0; border-bottom: 6px solid transparent; border-top: 6px solid transparent; border-right: 6px solid #3b3b3b; } #menu ul li:first-child a:hover:after { border-bottom-color: #04acec; } #menu ul ul li:first-child a:hover:after { border-right-color: #0299d3; border-bottom-color: transparent; } #menu ul li:last-child a { -moz-border-radius: 0 0 3px 3px; -webkit-border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px; }


(Pablo_Wawa) #2

A czy to nie jest wina zbyt szerokiego paska menu:

#menu {

   width: 600px;

Zmniejsz wartość 600px do odpowiedniej wartości i powinno być dobrze.


(Dawid Jablonski86) #3

Niestety nic nie zadziałało, zmniejszyłem do 400 px i cennik mi poszedł na dół, a krawędź została dodatkowo zmniejszyłem czcionkę i też nic nie dało.


(Pablo_Wawa) #4

A u mnie przy 588px zadziałało (Firefox).


(Dawid Jablonski86) #5

Zmniejszyłem jak prosiłeś, i włączyłem ff i taki jest efekt ze normalnie prawie nic nie widać a powiększeniu widać ze ta krawędź nie znikła. Zdjęcie poniżej

KRAWĘDZIE1.jpg


(ziggurad) #6

Usuń prawe obramowanie dla ostatniego li w ul.

Przy okazji jak masz podmenu pokazywane przejedź nad nim myszką w dół, jak będziesz poniżej “Wizytówki” zaczyna mrugać i zmieniać pozycje - najnowszy stabilny FF.

Do tego firebug pokazuje jakieś puste

po ostatnim elemencie

.


(Dawid Jablonski86) #7

Dzięki za zugestei usunąłem

po ostatnim li, a z tym “Usuń prawe obramowanie dla ostatniego li w ul.” to nie wiem jak to wykonać, usuwałem pozycję

border-right: 1px solid #222; oraz box-shadow: 1px 0 0 #444

[*]na przemian te pozycje usuwałem z #menu li i nic się nie dzieje – Dodane 12.02.2013 (Wt) 11:05 – Dzięki Panowie za pomoc udało mi się usunąć tę krawędź obok cennika poniżej podaje rozwiązanie: Musiałem wstawić selektor, do html wstawiłem

Cennik[/code]

a do CSS3


(ziggurad) #8

Chodziło mi o:

http://www.w3schools.com/cssref/sel_last-child.asp

I możesz bez dodatkowego id, ale Twój sposób też będzie działał :wink: