MozillaPL.org - polskie centrum Mozilli

Główne menu:

Błąd wyświetlania tła dla menu poziomego w CSS

Dyskusje na temat standardów WWW i zgłoszenia stron niedziałających poprawnie w przeglądarkach z rodziny Mozilli (w tym Mozilla Firefox)

Moderator: Pomocy?!

Błąd wyświetlania tła dla menu poziomego w CSS

Postautor: szakal666 » 07 maja 2010, 15:40

Przeglądarka: Opera/9.80 (Windows NT 5.1; U; pl) Presto/2.2.15 Version/10.00

Mam następujący problem:
Po stworzeniu strony na DIVach, wczytaniu tła dla DIVa MENU i utworzeniu w nim menu poziomego na css wczytanie tło nie jest wyświetlane.
Kod Strony HTML:
Kod: Zaznacz cały
<html>
<head>
<title>Czyzew-net Internet Radiowy na terenie Czyżewa i okolic </title>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<style type="text/css">


ul, ul li {
   display: block;
   list-style: none;
   margin: 0;
   padding: 0;
}

ul li {
   float: left;
}

ul a:link, ul a:visited {
   font-size: 13px;
   text-decoration: none;
   display: block;
   text-align: center;
   font-family: Arial;
   color: #fff;
   border: 0px outset #ccc;
   font-weight: 600;
   margin-left: 24px;
   margin-bottom: 14px;
   margin-top: 24px;
   background:  transparent;
}

ul a:hover {
   border-bottom: 3.5px outset #f00;
   margin-bottom: 10px;
}

ul {
   margin-left: 20px;
}
 
iframe {
      margin-left:5px;
      margin-top:5px;
   }

         

</style>
</head>
<body bgcolor=#EEEEEE>
<div id="TOP" >
   <div id="NAGLOWEK">
   <img src="grafiki/Napis.gif">
   </div>
   <div id="MENU">
   jakis tekst<br>
   jakis tekst
      <ul>
         <li><a target="ramka" href="Onas.html">O Nas</a></li>
         <li><a target="ramka" href="Kontakt.html">Kontakt</a></li>
         <li><a target="ramka" href="Internet.html">Internet</a></li>
         <li><a target="ramka" href="Hosting.html">Hosting</a></li>
         <li><a target="ramka" href="Pobierz.html">Pobierz</a></li>
         <li><a target="ramka" href="Komunikaty.html">Komunikaty</a></li>
      </ul>
      </div>
      <div id="TRESC">
      <iframe name="ramka" width="940" height="490" src="Onas.html" frameborder="0"></iframe>
      </div>
   <div id="STOPKA">Stopka serwisu</div>
</div>
</body>
</html>

Kod arkusza CSS:
Kod: Zaznacz cały
#TOP{
   width: 950px;
}
 
#MENU {
      width: 949px;
      background-image: url("grafiki/tlo.gif");
      clear: both;
}

#TRESC {
   clear: both;
   width: 948px;
   height: 500px;
   background-image: url("grafiki/tlo2.gif");
}


Po usunięciu:
Kod: Zaznacz cały
ul li {
   float: left;
}

Tło jest wyświetlane ale menu przechodzi w pionowe.
Pozdrawiam.
szakal666
 
Posty: 1
Z nami od: 07 maja 2010, 15:33

Odp: Błąd wyświetlania tła dla menu poziomego w CSS

Postautor: Tomek » 07 maja 2010, 17:34

Przeglądarka: Mozilla/5.0 (X11; U; Linux i686; pl-PL; rv:1.9.2.3) Gecko/20100402 Firefox/3.6.3

Jesteś kolejną osobą która stosuje float, nie rozumiejąc jak to dokładnie działa. Nie przejmuj się - to często spotykane - średnio raz w miesiącu
http://kurs.browsehappy.pl/CSS/Float
Najprostsze rozwiązanie to umieszczenie za pływającymi obiektami elementu z ustawionym clear:both -zamyka to obszar pływania przez co tło rozciągnie się samoczynnie do nowo utworzonego elementu.
Inną metodą jest zastosowanie overflow:auto - jednak tu czasem spotyka się problemy z IE.
ps. na przyszłość podawaj cały kod - wraz z doctype.
ps2. Strona na divach a tu nagle ramka... br.... odrzuca...
"Mym sojusznikiem jest Moc, i potężnym sojusznikiem ona jest." -- Mistrz Yoda
Tomek
Moderator
 
Posty: 9049
Z nami od: 19 sierpnia 2004, 06:52


Wróć do Standardy WWW i źle działające strony

Kto jest online

Zarejestrowani użytkownicy: dexter, Google [Bot]

Przejdź do powiązanej strony

Nawigacja:

Stopka: