Верстка блоками

stars · August 30, 2008

В общем, не так давно я занялся сайтами, и в чем-то уже преуспел. Вот решил освоить верстку блоками, и столкнулся с такой проблемой, у меня есть картинка (сам сотворил),ее я разбил на 5 частей и их надо собрать вместе:

вот план сборки http://s42.radikal.ru/i098/0808/41/4defafb3dd62.jpg

В табличной верстки это я делал так http://stars124.narod.ru/1.html (работает во всех браузерах)

А как это сделать в блочной я пока не знаю ((( вот сделал пробно http://stars124.narod.ru/2.html (В опере вроде нормально, в остальных браузерах все расплывается как черт знает что)

Еще интересует как мне вот эту блочную сборку, выровнять по центру экрана.

Собственно блоки начал изучать вот только сегодня так что если кто-то может подсказать толковую книжку(с примерами, чтобы наглядно все было) то буду признателен.

Victor Ananiev · August 30, 2008

Еще интересует как мне вот эту блочную сборку, выровнять по центру экрана. - margin:0 auto;

на счет сбора картинки потерпи, сейчас попробую сделать и выложу план с обьяснением)

klierik · August 30, 2008

css

div.image-case {width: 200px; margin: 0 auto; overflow: hidden; _zoom:1;}
div.image-case img {float: left;}
ширина = суме ширины рисунков

html

<div class="image-case">
<img src="1.jpg" alt="" />
<img src="2.jpg" alt="" />
<img src="3.jpg" alt="" />
<img src="4.jpg" alt="" />
<img src="5.jpg" alt="" />
</div>

Victor Ananiev · August 30, 2008

У мну так:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Картинка</title>
<style>
#main
{
height:400px;
width:500px;
background-color:#FFFF00;
position:relative;
}
#a1
{
width:100px;
height:400px;
background-color:#9966FF;
float:left;
}
#a2
{
float:left;
width:300px;
height:400px;
background-color:#99CCFF;
}
#a21
{
width:300px;
height:50px;
background-color:#FFFFCC;
}
#a22
{
width:300px;
height:300px;
background-color:#FF9999;
}
#a23
{
width:300px;
height:50px;
background-color:#33FF00;
}
#a3
{
width:100px;
height:400px;
background-color:#660000;
float:left;
}
</style>
</head>
<body>
<div id="main">
 <div id="a1"> </div>
	<div id="a2">
	 <div id="a21"> </div>
		<div id="a22"> </div>
		<div id="a23"> </div>
	</div>
	<div id="a3"> </div>
</div>
</body>

</html>

Вместо картинка, а картинке размеры 100%;

И так создаем макет по слоям, у нас есть основной слой, в нем три столбца, и в одном из столбцов 3 строки.

Им всем(блокам) дем свой id

Дальше пользуем float для расположения, и вставляем картинки с размерами, все)

вот скрин(Да простит меня Emm):

Edited August 30, 2008 by Vindex10

stars · August 30, 2008

2klierik: ммм кусок отваливается http://stars124.narod.ru/3.html (в IE еще пустота появилась какая-то)

klierik · August 30, 2008

для начала начните с установкой doctype

image-case {font-size: 0;}

stars · August 30, 2008

2Vindex10: получилось только почемуто #a21 сехала чуть в низ.

2klierik: что-то все одно и тоже (( если не трудно выложи код готовой страницы.

поеду домой, по дороге пива возьму.

Victor Ananiev · August 30, 2008

Не знаю, у меня все так как на скрине, а в каком браузере?

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Картинка</title>
<style>
#main
{
height:210px;
width:1005px;
position:relative;
margin:0 auto;
}
#main IMG
{
display:block;
height:100%;
width:100%;
}
#a1
{
width:33px;
height:210px;
float:left;
}
#a2
{
float:left;
width:955px;
height:210px;
}
#a21
{
width:955px;
height:10px;
}
#a22
{
width:955px;
height:183px;
}
#a23
{
width:955px;
height:17px;
}
#a3
{
width:15px;
height:210px;
float:left;
}
</style>
</head>
<body>
<div id="main">
 <div id="a1"><img src="http://stars124.narod.ru/1/h1.png" /></div>
	<div id="a2">
	 <div id="a21"><img src="http://stars124.narod.ru/1/h1_2.png" /></div>
		<div id="a22"><img src="http://stars124.narod.ru/1/h2_2.jpg" /></div>
		<div id="a23"><img src="http://stars124.narod.ru/1/h3_2.png" /></div>
	</div>
	<div id="a3"><img src="http://stars124.narod.ru/1/h3.png" /></div>
</div>
</body>
</html>

Все подставил, не пашет центральная картинка(в лисе и осле, а в опере все ок), причины не знаю...

Edited August 30, 2008 by Vindex10

klierik · August 30, 2008

автор. выкладывайте архив с рисунками.. и версткой Вашей.. чтото придумаем.

stars · August 30, 2008

автор. выкладывайте архив с рисунками.. и версткой Вашей.. чтото придумаем.

http://files.filefront.com/1rar/;11650272;/fileinfo.html

У меня не какой верстки как таковой нету, мне какраз и было интересно как это делается правельно.

2Vindex10: да работает.

Victor Ananiev · August 30, 2008

Везде?

stars · August 30, 2008

Везде?

ff 2,3(Windows 2000,xp) IE 6,7,8(Windows 2000,xp) opera 9.52(Windows 2000,xp) safari-3.1(Мак ос) seamonkey-1(FreeBSD 7) galeon-2(Ubuntu 8) flock-2(Ubuntu 8) navigator-9(Windows 2000,xp) в этих отображается правельно.

Edited August 30, 2008 by stars

Victor Ananiev · August 31, 2008

Отлично)

Sign In

Верстка блоками

Question

Link to comment

Share on other sites

12 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information