Forum PHP.pl > Divy vs. tabelki i problemy

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: Divy vs. tabelki i problemy

Forum PHP.pl > Forum > Po stronie przeglądarki > CSS

chyzio

5.02.2009, 16:24:43

Nie wiem jak wyświetlić czerwone elementy obok zielonych i nie wiem jak to zrobić. (po lewej zielony po prawej zielony w jednej lini)

[HTML] pobierz, plaintext 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
<head>
</head>
<body>
 
 
<div style="width:450px">
<div style="float:left;width:450px;height:50px;background-color: #666666;margin: 0 1px 0 0"></div>
<div style="float:left;width:150px;height:50px;background-color: green;margin: 0 1px 0 0"></div>
<div style="float:left;width:300px;height:50px;background-color: red"></div>
<div style="float:left;width:150px;height:50px;background-color: green;margin: 0px 1px 0 0"></div>
<div style="float:left;width:300px;height:50px;background-color: red; margin: 0px 1px 0 0"></div>
<div style="float:left;width:450px;height:50px;background-color: yellow;margin: 1px 0 0 0"></div>
</div>
 
</body>
</html>
[HTML] pobierz, plaintext

rozwiązanie mam ale pod IE się nie sprawdza :/

[HTML] pobierz, plaintext 
<div style="width:450px">
 
<div style="float:left;width:450px;       height:50px;background-color: #666666;  margin: 0 0px 1px 0"></div>
 
<div style="float:left;width:150px;       height:50px;background-color: green;    margin: 0px 0px 0px 0px"></div>
<div style="float:left;width:300px;       height:50px;background-color: red;      margin: -50px 0px 1px 150px"></div>
 
<div style="float:left;width:150px;       height:50px;background-color: green;    margin: 0px 0px 0px 0px"></div>
<div style="float:left;width:300px;       height:50px;background-color: red;      margin: -50px 0px 1px 150px"></div>
 
<div style="float:left;width:150px;       height:50px;background-color: green;    margin: 0px 0px 0px 0px"></div>
<div style="float:left;width:300px;       height:50px;background-color: red;      margin: -50px 0px 1px 150px"></div>
[HTML] pobierz, plaintext

kod działa poprawnie tylko w ff jak to poprawić ? Podejrzewam że chodzi o ujemny margines

JoShiMa

5.02.2009, 17:16:46

A po co Ci ujemny margines. To się robi dając float: left dla wszystkich a dla tych co sa po lewej czyli mają przechodzić do nowej linii daje się clear:both;

Możesz jeszcze zrobić tak, że czerwony z zielonym w parze są wewnątrz <li></li>

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.