[CSS] Problem z 3 kolumnowym layuoutem.

[Gość]

Kod: Zaznacz cały

body {
   text-align: center;
  color: #ffa500;
  background: black url(images/tlo.gif) repeat scroll 0%;
   margin:20px;
   padding:0px;
   font:11px verdana, arial, helvetica, sans-serif;
   }
   
#zrodlo {text-align: left;
width: 700px;
margin: 0;
padding: 0;
background: black;
}

#logo {width: auto;
height: 120px;
background-color: red;
}

#lewemenu {width: 160px;
position: relative;
height: auto;
float: left;
background-color: green;
}

#tekst {float: left;
width: 360px;
background: aqua;}

#prawemenu {width: 180px;
float: right;
background-color: green;
}

#stopka {
height: auto;
clear: both;
background: red;
}

Napisałem bardzo prosty layout 3 kolumnowy, lecz chcę aby lewe menu dotykało krawędziami logo i stopke, a nie wiem jak to zrobić, szukałem w necie przykładów, ale nie znalazłem

[Gość]

Poradziłem sobie na około, innego sposobu nie znam. Dodałem element opakowujący inne divy i nadałem mu background color taki sam jak jest w obu menu, dzięki temu wydaje się internaucie że menu są rozciągnięte. Niestety miałem w planach żeby prawe menu miało taki sam kolor podłoża jak tekst, lecz nie wiem jak to zrobić, ponieważ opakowujący div nadaje wszystkim beż wyjątku background- color. Rozumie ktoś mój problem ?

[Gość]

Jest jeszcze jeden problem Firefox ignoruje background-color elementu opakowującego, i działa on tylko pod IE Jest inny sposób ?

[athantor]

Napisałem bardzo prosty layout 3 kolumnowy, lecz chcę aby lewe menu dotykało krawędziami logo i stopke, a nie wiem jak to zrobić, szukałem w necie przykładów, ale nie znalazłem

Co prawda nie 3 kolumny, ale może coś takiego?

Jest jeszcze jeden problem Firefox ignoruje background-color elementu opakowującego, i działa on tylko pod IE Jest inny sposób ?

Zapodaj może linkę do kodu?

[Zajec]

Jest jeszcze jeden problem Firefox ignoruje background-color elementu opakowującego, i działa on tylko pod IE Jest inny sposób ?

Nie ignoruje. Pewnie Ty zapomniałeś o standardach, które mówią, że elementy z nadanym float nie mają prawa wpł←wać na wysokość rodzica.

Kod: Zaznacz cały

#container:after {
display: block;
clear: both;
content: "";
}

[Gość]

Zajec, niestety ja tego nie zapomniałem, lecz ja tego nie wiem i nie rozumiem, ale myśle że wiesz o czym mówisz i wytłumaczysz to bardziej, nie wiem również co zrobić z kodem który mi podałeś.

[helios]

Widziałem 2 rozwiązania tego problemu.

1) Umieść pod kolumnami:

Kod: Zaznacz cały

<br style='clear: both' />


lub w arkuszu CSS to, co podał Zajec.

2) Obejmij wszystkie 3 kolumny blokiem <div> i nadaj mu overflow: hidden.

Tu jest taki temat: http://www.webmasterworld.com/forum83/7746.htm

[Gość]

DZIEKI ! Już działa, to ja zrobiłem błąd, ponieważ wcześniej wklejałem kod Zajeca w środek diva opakowującego, zamiast osobno i wtedy stronka mi się rozjeżdżała i myślałem że chodzi o coś innego. Dzięki wszystkim za pomoc !