+- 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ł: Początkujący webmaster (https://www.webmastertalk.pl/forum-poczatkujacy-webmaster)
+--- Wątek: [HTML] [CSS] Problem z menu ("rozsypuje się") (/thread-html-css-problem-z-menu-rozsypuje-sie)
[HTML] [CSS] Problem z menu ("rozsypuje się") - CineX - 09-11-2011
Witam. Ostatnio uczę się kodowania layou'tów, oraz "walkę" z CSS. Jedak, gdy próbuje zakodować taki layout (wiem, grafikiem nie zostanę, ale na czymś ćwiczyć trzeba
):![[Obrazek: sdadasdt.png]](http://img535.imageshack.us/img535/9205/sdadasdt.png)
Jednak, na razie mam tyle(screen poniżej), a menu mi się nie chce ułożyć, i nie wiem czemu:
![[Obrazek: sssssssssssq.png]](http://img853.imageshack.us/img853/4095/sssssssssssq.png)
Mógłby ktoś wskazać mi błąd, który popełniam?
Oto kod HTML
Kod:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-2">
<meta name="Description" content=" [wstaw tu opis strony] ">
<meta name="Keywords" content=" [wstaw tu slowa kluczowe] ">
<meta name="Author" content=" [dane autora] ">
<meta name="Generator" content="kED2">
<title> [tytuł strony] </title>
<link rel="stylesheet" href=" style.css " type="text/css">
</head>
<body>
<div id= "calosc">
<div id="banner">
Tutaj będzie banner
</div>
<ul id="menu_glowne">
<li id="menu_okienko">
<li id="strona_glowna"> Strona Główna</li>
<li id="nasz_sklad"> Nasz skład </li>
<li id="ostatnie_mecze"> Ostatnie mecze </li>
<li id="kontakt_z_nami"> Kontakt z Nami </li>
<div id="pusto">
</div>
<div id="tresc">
Tutaj będzie treść
</div>
<div id="stopka">
Stopka
</div>
</div>
</body>
</html>Oraz kod CSS
Kod:
html, body
{background: #ffffff;
text-align: center;
font-size: 1em;
font-family: verdana, tahoma, arial, helvetica, sans-serif;
width: 720px;
margin: 0;
padding: 0;
}
#calosc{
margin: 0px;
padding: 0px;
}
#banner {
width: 720px;
height: 265px;
background-image: url('images/haxteam_01.jpg');
}
ul#menu_glowne {
float: left;
}
li#menu_okienko{
display: block;
list-style: none: margin: 0;
padding: 0;
background-image: url('images/haxteam_02.jpg');
width: 233px;
height: 83px;
float: none;
}
li#strona_glowna{
display: block;
list-style: none:
margin: 0;
padding: 0;
background-image: url('images/haxteam_04.jpg');
width: 233px;
height: 61px;
float: left;
}
li#nasz_sklad{
display: block;
list-style: none:
margin: 0;
padding: 0;
background-image: url('images/haxteam_04.jpg');
width: 233px;
height: 61px;
float: left;
}
li#ostatnie_mecze{
display: block;
list-style: none:
margin: 0;
padding: 0;
background-image: url('images/haxteam_04.jpg');
width: 233px;
height: 61px;
float: left;
}
li#kontakt_z_nami{
display: block;
list-style: none:
margin: 0;
padding: 0;
background-image: url('images/haxteam_04.jpg');
width: 233px;
height: 61px;
float: left;
}
#tresc{
background-image: url('images/haxteam_03.jpg');
width: 487px;
height: 473px;
float: right;
}RE: [HTML] [CSS] Problem z menu ("rozsypuje się") - hieroshima - 09-11-2011
ciężko wskazać coś dobrego... nie obraź się, ale to po 1 jest idiotycznie pocięte po 2 tu nawet w zasadzie nie ma co ciąć. Wszystko można zrobić samym html i css bez żadnych obrazków(no może poza tymi plamami? w tle boxów).
A błąd to prawdopodobnie nie zamknięty tag <ul>
i zapoznaj się z poleceniem css "clear" np. tu http://www.signs.pl/html/s/clear.php
RE: [HTML] [CSS] Problem z menu ("rozsypuje się") - Kartofelek - 09-11-2011
1) Masz źle pozamykany kod.
2) nie nadużywaj id. używaj klas. Wszystkie LI są takie same, nie musisz każdej z osobna dawać klasy ani ID
3) Lista ma domyślnie szerkość na 100%. Samo float nie zmienia tej szerokości. Popatrz wiec na wymiary ul#menu_glowne
itp itd
RE: [HTML] [CSS] Problem z menu ("rozsypuje się") - CineX - 10-11-2011
Niestety, nawet po pozamykaniu wszystkich znaczników dobrze, dalej nie działa.
Czemu lepiej używać klas zamiast ID, myślałem, że to na jedno wychodzi?
Mam ustawione dla każdego guzika ustawioną szerokość, oraz wysokość, więc co jest źle? @hieroshima - wiem, że zapewne jest tutaj wszystko źle, ale człowiek się uczy na zasadzie prób i błędów, więc trzeba próbować
RE: [HTML] [CSS] Problem z menu ("rozsypuje się") - hieroshima - 10-11-2011
nie zawsze metoda prób i błędów jest dobra
, a dlaczego lepiej klas? Bo nadasz każdemu linkowi tą samą klase i w cssie napiszesz jedną klase i zadziała do wszystkich obiektów, które będą miały przypisane daną klase, a z ID trzeba osobno zawsze pisać bo ID powtarzać się nie może