Ocena wątku:
  • 0 głosów - średnia: 0
  • 1
  • 2
  • 3
  • 4
  • 5
[HTML] [CSS] Problem z menu ("rozsypuje się")
#1
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 Big Grin):

[Obrazek: 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]

Mógłby ktoś wskazać mi błąd, który popełniam?Smile
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;
}
Odpowiedz
#2
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
Odpowiedz
#3
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
Odpowiedz
#4
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? Smile Mam ustawione dla każdego guzika ustawioną szerokość, oraz wysokość, więc co jest źle? Smile
@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ć Big Grin
Odpowiedz
#5
nie zawsze metoda prób i błędów jest dobra Wink, 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
Odpowiedz


Podobne wątki…
Wątek: Autor Odpowiedzi: Wyświetleń: Ostatni post
  Jak zrobć POP-UP w html/php i proste pytanko html? MrOMGWTF 7 5,567 01-05-2021, 10:56
Ostatni post: wozniak
  Strona HTML na zaliczenie - dodaj, usuń, edytuj Kurana 1 2,091 01-07-2019, 03:31
Ostatni post: mpire
  [HTML] Filmik zamiast obrazka wyróżniającego kuklaale 1 2,759 02-11-2016, 18:36
Ostatni post: martt4dg
  Problem zm osadzeniem skryptu lighbox w kodzie html gajowy873 2 3,712 24-09-2016, 02:22
Ostatni post: Anatol64
  [CSS][HTML] Ustawienie obrazka z boku strony Witek7777 8 8,476 22-09-2016, 01:05
Ostatni post: pocahontas

Skocz do:


Użytkownicy przeglądający ten wątek: 1 gości
Sponsorzy i przyjaciele
SeoHost.pl