Не работает div на сайте

ruslan100 · 12.09.2012

люди добрые решил на сайте заменить таблицы на div в редакторе htmlpad сделал шаблон -всё работает на компе, внедрил на сайте -сломал страницу,размещает содержимое не по блокам а как попало вот код <html>
<head><link rel="stylesheet" type="text/css" href="style.css">
<title>
3-10
</title>
</head>
<BODY text="#ffffcc" bgcolor="#0099ff"><div class="1">111111111111111111</div>
<div class="2">2222222222222222

...<a href="http://www.1rossia.r...d/9/">ПОДРОБНЕЕ НА САЙТЕ ПРОИЗВОДИТЕЛЯ</a>

</center> </div>
<div class="3">33333333333333333 </div>
<div class="4"> 44444444444444444444 </div>
<div class="5">5555555555555555555555 </div>
<div class="6">66666666666666666666666

<div class="7" align="right">

</div>
</div>
</body>
</html>
и css body {
background-color: #FF00FF;
color: #FFFFFF;
}

a {
color: #00FFFF;
text-decoration: none;
}

a:visited {
color: #008000;
}

a:hover {
color: #FFFFFF;
}div.1
{height:130px;width:500px; background-color:#0099FF;position:absolute;top: 10px;left: 125px;}
div.2
{height:130px;width:500px; background-color:#ff00FF;position:absolute;top: 10px;left: 525px;}
div.3
{height:130px;width:400px; background-color: #ff99FF;position:absolute;top: 10px;left: 1025px;}
div.4
{height:520px;width:300px; background-color: #0099FF;position:absolute;top: 140px;left: 125px;}
div.5
{height:520px;width:550px; background-color: #0000FF;position:absolute;top: 140px;left: 425px;}
div.6
{height:520px;width:450px; background-color: #0099FF;position:absolute;top: 140px;left: 975px;}
div.7
{height:70px;width:100px; background-color: #fffFF;}
добавлю работает только в IE

mrlasking · 12.09.2012

1. Код оформляйте с помощью тега [ CODE ][ /CODE ] (без пробелов)
2. Для выполнения вашей задачи, прочитайте про отображение дивов в один ряд с помощью обертки в родительский див (display: block у родителя и float: left у чайлдов).
выглядеть ваш код должен примерно следующим образом (передаю идею):

Код:

<div class="parent">
    <div class="content-block">Block #1</div>
    <div class="content-block">Block #2</div>
    <div class="content-block">Block #3</div>
    <div class="content-block">Block #4</div>
</div>
CSS:
.parent { display: block; width: 1000px; }
.content-block {float: left; width: 250px; height: 250px;}

получите 4 контейнера, расположенных в один ряд.

ruslan100 · 13.09.2012

спасибо,пойду осуществлять

Volter9 · 13.09.2012

ruslan100 сказал(а):
спасибо,пойду осуществлять

Absolute position не советуется использовать в верстке.

mrlasking сказал(а):
1. Код оформляйте с помощью тега [ CODE ][ /CODE ] (без пробелов)
2. Для выполнения вашей задачи, прочитайте про отображение дивов в один ряд с помощью обертки в родительский див (display: block у родителя и float: left у чайлдов).
выглядеть ваш код должен примерно следующим образом (передаю идею):

Код:

<div class="parent"> <div class="content-block">Block #1</div> <div class="content-block">Block #2</div> <div class="content-block">Block #3</div> <div class="content-block">Block #4</div> </div> CSS: .parent { display: block; width: 1000px; } .content-block {float: left; width: 250px; height: 250px;}

получите 4 контейнера, расположенных в один ряд.

Я думаю [member=mrlasking], вам стоит немного править код:

Код:

<div class="parent">
<div class="content-block">Block #1</div>
<div class="content-block">Block #2</div>
<div class="content-block">Block #3</div>
<div class="content-block">Block #4</div>
<br class="clear" />
</div>
CSS:
.clear {clear: both;}
.parent { display: block; width: 1000px; }
.content-block {float: left; width: 250px; height: 250px;}

mrlasking · 13.09.2012

[member=ruslan100], незачто, будут вопросы - пишите

[member=Volter9], Евгений, поясните необходимость в этом <br>, ибо сколько ни верстаю - пока с такой необходимостью не сталкивался

tigra60 · 13.09.2012

mrlasking сказал(а):
[member=Volter9], Евгений, поясните необходимость в этом <br>, ибо сколько ни верстаю - пока с такой необходимостью не сталкивался

А можно, я поясню?
Это ужасающего вида говнокод! Ужаснее может быть только

Код:

<br clear="all">

А очистку плавающих блоков нужно делать так:

Код:

.parent:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility:hidden;
}
/* для ИЕ6 */
*html.parent {height:1%;}
/* для ИЕ7 */
*:first-child+html.parent {min-height:1px;}

Как вы заметили, эти стили назначаются блоку - контейнеру, который содержит плавающих потомков.

Volter9 · 13.09.2012

Prostite rebyat(
Do etogo takogo voobshe ne znal.
(Prostite za oshibku, budu luchse uchitsya) Pishu tak potomushto i v shkole))

Volter9 · 14.09.2012

tigra60 сказал(а):
mrlasking сказал(а):

[member=Volter9], Евгений, поясните необходимость в этом <br>, ибо сколько ни верстаю - пока с такой необходимостью не сталкивался

Нажмите, чтобы раскрыть...

А можно, я поясню?
Это ужасающего вида говнокод! Ужаснее может быть только

Код:

<br clear="all">

А очистку плавающих блоков нужно делать так:

Код:

.parent:after{ content: "."; display: block; height: 0; clear: both; visibility:hidden; } /* для ИЕ6 */ *html.parent {height:1%;} /* для ИЕ7 */ *:first-child+html.parent {min-height:1px;}

Как вы заметили, эти стили назначаются блоку - контейнеру, который содержит плавающих потомков.

Ребят, мне очень стыдно :blush: Обещаю что исправлюсь :blush:

mrlasking · 14.09.2012

Что-то у меня затянулось празднование дня программиста... Я сообразить не могу - кто все-таки прав, и что за очистка чайлдов?... (

Volter9 · 14.09.2012

mrlasking сказал(а):
Что-то у меня затянулось празднование дня программиста... Я сообразить не могу - кто все-таки прав, и что за очистка чайлдов?... (

Прав [member=tigra60], и я этого не отрицаю

А очистка чайлдов, это когда плавающие блоки так сказать "выходят" за родителя и получается глитч, тут на помощь приходит очистка чайлдов, что б все нормально работало, щяс скину пример.

Первый без очистки блока, а второй с очисткой блока.
(P.S. 2 tigra, спасибо Тигра

)

Код:

<html>
<head>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
body {
padding: 0px;
margin: 0px;
background: grey;
}

#wrapper {
margin: 0 auto;
width: 1024px;
height: auto;
background: #999;
}

#header {
width: 100%;
height: 100px;
background: #fff;
}

#content_wrap {
width: 100%;
height: auto;
}

					 /* Первый снимок, без этого кода который внизу */
#content_wrap:after {
content: ".";
display: block;
height: 0;
clear:both;
visibility: hidden;
}

#content {
float: left;
width: 70%;
background: #333;
height: 300px;
}

#sidebar {
float: right;
width: 30%;
background: #777;
height: 200px;
}

#footer {
width: 100%;
background: #fff;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
Header
</div>
<div id="content_wrap">
<div id="content">
	 Content
</div>
<div id="sidebar">
	 Sidebar
</div>
</div>
<div id="footer">
Footer
</div>
</div>
</body>
</html>

mrlasking · 14.09.2012

Понял, мерси. Лови плюс за пояснение

eelijah · 14.09.2012

И от меня держи плюс! Встречался с этим но не вникал)
P.S. начинаю верить в будущее, все таки есть толковые школьники :biggrin:

Volter9 · 14.09.2012

Грациоз, Амигос)

Не работает div на сайте

ruslan100

Новичок

mrlasking

$_GET['rich'] or die('trying');

ruslan100

Новичок

Volter9

defined('SURRENDER') or die(); // StarWars

mrlasking

$_GET['rich'] or die('trying');

tigra60

Спасатель

Volter9

defined('SURRENDER') or die(); // StarWars

Volter9

defined('SURRENDER') or die(); // StarWars

mrlasking

$_GET['rich'] or die('trying');

Volter9

defined('SURRENDER') or die(); // StarWars

Вложения

mrlasking

$_GET['rich'] or die('trying');

eelijah

Well-Known Member

Volter9

defined('SURRENDER') or die(); // StarWars

Онлайн статистика

Статистика форума

Новые пользователи

Поделиться этой страницей