Дивове

[I_V_O]

Дайте ми един прост пример, как да направя нещо подобно , но с дивове а не с таблица

 

[ArchangelS]

Правиш си някакав див , след това в CSS правиш квадрат и го нагласяш каде да е , след това повтаряш функцията още 3 пати и си нагласяш квадратите и готово.

 

[downn]

И мисля че се ползва border 1px groove :?:

 

[emagi]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#main {
margin:0 auto;
width:450px;
height:450px;
}
#num1 {
position:absolute;
margin:0;
width:200px;
height:200px;
border:solid 1px blue;
}
#num2 {
position:absolute;
margin-left:250px;
margin-top:0;
width:200px;
height:200px;
border:solid 1px red;
}
#num3 {
position:absolute;
margin-left:0px;
margin-top:250px;
width:200px;
height:200px;
border:solid 1px green;
}
#num4 {
position:absolute;
margin-left:250px;
margin-top:250px;
width:200px;
height:200px;
border:solid 1px black;
}
</style>
</head>

<body>
<div id="main">
<div id="num1"></div>
<div id="num2"></div>
<div id="num3"></div>
<div id="num4"></div>
</div>
</body>
</html>

 

[miro91]

Правиш един див който ще е главен и му задаваш дължина после правиш другите 4 дива в този див да се получи така
<div id="glaven">
<div class="vatre6en"></div>
<div class="vatre6en"></div>
<div class="vatre6en"></div>
<div class="vatre6en"></div>
</div>
и на тоя клас вътрешен му задаваш width: 100px; float: left; border: 1px solid black; margin:2px;
на главния див му задаваш тия параметри width: 210px; border: 0; float: left;
и ще стане това което искаш.

 

[I_V_O]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>................

Много е бъгаво с тея абсолютни позиции...не ми въши работа

miro91 точно това искам но все ми прави бъгове с тоя float... драсни го на 2 реда да видя как става

 

[emagi]

Теб позициите са ти бъгави, свойството:

float

ти е бъгаво........

 

[I_V_O]

Не съм казал че float e бъгаво свойство, а че на мене ми прави бъг като се опитам да го използвам за тея квадратчета...

 

[Ins1de]

HTML

<div>
	<div class="top"> </div>
	<div class="top"> </div>
	<div id="top_clr"></div>
</div>
<div>
	<div class="bottom"> </div>
	<div class="bottom"> </div>
	<div id="bottom_clr"></div>
</div>

CSS

.top{width: 200px; height: 200px; margin: 0 0 0 5px; border: 2px solid red; float: left;}
#top_clr{clear: both;}
.bottom{width: 200px; height: 200px; margin: 5px 0 0 5px; border: 2px solid red; float: left;}
#bottom_clr{clear: both;}

 

[I_V_O]

Мерси Ins1de