+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: [CSS] Menu - zablokowanie, bo teraz lata przy zmianie rozmiaru okna przeglądarki (/thread-css-menu-zablokowanie-bo-teraz-lata-przy-zmianie-rozmiaru-okna-przegladarki)
[CSS] Menu - zablokowanie, bo teraz lata przy zmianie rozmiaru okna przeglądarki - kgs - 14-06-2010
Witam serdecznie,
Problem dotyczy menu stworzonego z pociętej grafiki - jeden element graficzny to jeden przycisk. Przy otwartej przeglądarce w pełnym oknie strona wygląda w porządku, ale po zmniejszeniu jej do połowy szerokości, przyciski nie mieszczące się w oknie przeskakują do linii niżej. Chodzi mi o zablokowanie ich, aby zawsze były w jednej linii. Próbowałem z różnymi ustawieniami i ciągle to samo, największe nadzieje pokładałem w display in-line ale to również nie pomogło albo źle to zastosowałem. Poniżej kod z usuniętymi nieudanymi próbami aby nie wprowadzać zamieszania.
Kod menu ze strony:
Kod:
<div class="menu">
<ul>
<li><a href="#" ><img src="../../image/1.jpg" width="170" height="59" /></a>
<ul>
<li><a href="#">Historia</a></li>
<li><a href="#">Filozofia</a></li>
<li><a href="#">Dokumenty korporacyjne</a></li>
<li><a href="#">Struktura organizacyjna</a></li>
<li><a href="#">Działalność społeczna</a></li>
<li><a href="#">Nagrody i wyróżnienia</a></li>
<li><a href="#">Koncesje</a></li>
</ul>
</li>
<li><a href="#" id="current"><img src="../../image/2.jpg" width="190" height="59" /></a>
<ul>
<li><a href="#">Karta momo</a></li>
<li><a href="#">e-Faktura</a></li>
<li><a href="#">Wnioski</a></li>
<li><a href="#">Instrukcja momo</a></li>
</ul>
</li>
<li><a href="/faq.php"><img src="../../image/3.jpg" width="195" height="59" /></a>
<ul>
<li><a href="#">Stacje momo</a></li>
<li><a href="#">Stacje w budowie</a></li>
<li><a href="#">Poszukujemy nieruchomości</a></li>
</ul>
</li>
</li>
<li><a href="/faq.php"><img src="../../image/4.jpg" width="269" height="59" /></a>
<ul>
<li><a href="#">Władze spółki</a></li>
<li><a href="#">Dokumenty informacyjne</a></li>
<li><a href="#">Raporty bieżące</a></li>
<li><a href="#">Raporty okresowe</a></li>
<li><a href="#">Walne zgromadzenie</a></li>
<li><a href="#">Istotna informacja</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</li>
<li><a href="/contact/contact.php"><img src="../../image/5.jpg" width="164" height="59" /></a></li>Kod z pliku css:
Kod:
.menu {
border-bottom-style : none;
border-bottom-width : 0px;
border-left-style : none;
border-left-width : 0px;
border-right-style : none;
border-right-width : 0px;
border-top-style : none;
border-top-width : 0px;
display : inline-block;
font-family : "Lucida Sans Unicode","Bitstream Vera Sans","Trebuchet Unicode MS","Lucida Grande",Verdana,Helvetica,sans-serif;
font-size : 14px;
font-weight : bold;
margin-bottom : 0px;
margin-left : 0px;
margin-right : 0px;
margin-top : 0px;
padding-bottom : 0px;
padding-left : 0px;
padding-right : 0px;
padding-top : 0px;
position : fixed;
top: 233px;
}
.menu ul {
background:#FFFFFF;
height:10px;
list-style:none;
margin:0;
padding:0;
}
.menu li {
float:left;
padding:0px;
}
.menu li a {
background:#FFFFFF;
color:#000000;
display:block;
font-weight:normal;
line-height:20px;
margin:0px;
padding:0px 0px;
text-align:center;
text-decoration:none;
}
.menu li a:hover, .menu ul li:hover a {
background: #A31A1A url("images/hover.gif") bottom center no-repeat;
color:#000000;
text-decoration:none;
}
.menu li ul {
background:#FFFFFF;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:225px;
z-index:200;
/*top:1em;
/*left:0;
*/;
}
.menu li:hover ul {
display:block;
}
.menu li li {
background:url('images/sub_sep.gif') bottom left no-repeat;
display:block;
float:none;
margin:0px;
padding:0px;
width:225px;
}
.menu li:hover li a {
background:none;
}
.menu li ul a {
display:block;
height:35px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 0px 0px 0px;
text-align:left;
}
.menu li ul a:hover, .menu li ul li:hover a {
background:#EEEEDD;
border:0px;
color:#000000;
text-decoration:none;
}
.menu p {
clear:left;
}Nieudane próby:
- wpisanie całej strony w diva i ustalenie mu stałej szerokości.
Udane próby:
- wpisanie min-width dla całego kontenera, tylko pytanie czy to jest politycznie dobre rozwiązanie, czy przypadkowo uzyskany pozytywny efekt?
RE: [CSS] Menu - zablokowanie, bo teraz lata przy zmianie rozmiaru okna przeglądarki - Pedro84 - 14-06-2010
1. Matko Boska, gdzieś Ty się uczył CSS pisać? Można by to napisać skracając o jakieś 60-70 procent....
2. Jaki masz DOCTYPE?
3. Musisz stworzyć kontener.
PS Podaj URL.
RE: [CSS] Menu - zablokowanie, bo teraz lata przy zmianie rozmiaru okna przeglądarki - kgs - 14-06-2010
(14-06-2010, 21:01)Pedro84 napisał(a): 1. Matko Boska, gdzieś Ty się uczył CSS pisać? Można by to napisać skracając o jakieś 60-70 procent....
2. Jaki masz DOCTYPE?
3. Musisz stworzyć kontener.
PS Podaj URL.
Kontener utworzyłem, wpisałem do niego min-width i zadziałało - co już wyżej pisałem, tylko ciekawi mnie czy jest to poprawna metoda.
Nie uczyłem się CSS, to moje pierwsze podejście, i korzystam z przykładowego menu. Rozumiem ze nadmiarowość dotyczy tych rożnych parametrów do menu w css. W siec jeszcze nie wrzucone.
RE: [CSS] Menu - zablokowanie, bo teraz lata przy zmianie rozmiaru okna przeglądarki - aleksanderek - 16-06-2010
min-width nie działa w ie6, a to nadal ok. 5% użytkowników.
Zastosuj po prostu width.
Pozdrawiam