[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: Что делать с div'ами что бы не плыли
Форум PHP программистов > Дизайн и верстка
Fredrich
27.09.2011 - 13:43
Ребят есть такая структура главного шаблона


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<?php define ('ASF_ACCSES','TRUE');   //Установка ключа доступа ?>
<?php include '/includes/define.php' ;//Подключение файла констант ?> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title><?php echo ASF_TITLE; ?></title>

<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div  id="cont"> <!--основная область-->
	<div id="header"><!--область  шапки-->
		<div id="search"></div><!--область  поиска-->
	</div>
    
	<div id="banner1"><?php include '/modules/mod_aut/tpl/defualt.php' ?></div><!--область  банера первого-->
	<div id="banner2"></div>												   <!--область  банера второго-->
    
	<div id="user1">USER1</div>  <!--область  пользователя 1-->
	<div id="user2">USER2</div>  <!--область  пользователя 2-->
	<div id="user3">USER3</div>  <!--область  пользователя 3-->
   
	<div id="left"><?php include '/modules/mod_menu/tpl/default.php' ?></div>   <!--левая область-->
	<div id="content"></div><!--область вывода информации-->
	<div id="right"></div>  <!--правая область-->
    
	<div id="sindicat"></div><!--синдикат область-->
	<div id="sindicat"></div><!--синдикат область-->
	<div id="footer"></div>  <!--область footerа-->
</div>
</body>
</html>


и вот файл css


@charset "utf-8";
/* CSS Document */


#cont						 /*стиль основной области*/
{
	background-image:url(/images/brushed_metal3.jpg);
	width:1000px;
	height:700px;
	margin: 0 auto;
}

	
#header						 /*стиль шапки*/
{
    background-color: #006;
	width:980px;
	height:100px;
	margin-left:10px;
	margin-top:10px;
	}
	
#search 
{
	width: 200px;
	height:50px;
	position: relative; left: 765px; top:15px;
	background-color: #333;
}
#banner1					 /*стиль баннера*/
{
	background-color: #001;
	width:485px;
	height:50px;
	float:left;
	margin-left:10px;
	}
#banner2					 /*стиль баннера 2*/
{
	background-color: #001;
	width:485px;
	height:50px;
	margin-left:10px;
	float:left;
	}
#user1						 /*стиль user*/
{
	background-color: #801;
	width:320px;
	height:15px;
	margin-left:10px;
	float:left;
	
	}
#user2						 /*стиль user*/
{
	background-color: #801;
	width:320px;
	height:15px;
	margin-left:10px;
	float:left;
	}
#user3 						 /*стиль user*/
{
	background-color: #801;
	width:320px;
	height:15px;
	margin-left:10px;
	float:left;
	
	}
#left 						 /*стиль left*/
{
    background-color: #301;
	width:200px;
	height:400px;
	margin-left:10px;
	float:left;	
	}
#right						 /*стиль right*/
{
	background-color: #301;
	width:200px;
	height:400px;
	margin-left:5px;
	float:left;
	}
#content					 /*стиль контента*/
{
	background-color: #401;
	width:570px;
	height:400px;
	margin-left:5px;
	float:left;
	
	}
#sindicat					 /*стиль синдиката*/
{
    background-color: #461;
	width:485px;
	height:30px;
	margin-left:10px;
	float:left;	
	}
#footer  					 /*стиль footer*/
{
	background: #666; /* цвет фона подвала (для наглядности) */
	width:980px;
	height: 40px;/* высота подвала */
	float:left;
	margin-left:10px;
	margin-bottom:-40px;
	}


Но как только какой то блок становиться больше всё начинает плыть кто поможет понять в чем проблема

вот ссылка на сайт



Спустя 11 минут, 41 секунда (27.09.2011 - 12:55) EvilDev написал(а):
Если блок растягивается полностью, не прописывай у него width (это касается div'ов) т.к. это блочный элемент (есть строчные a, span, p...). Так же выставляй min-width и max-width.
Далее... У тебя идет 3 блока в ряд. У крайних делаешь float:left\right, а у центрального padding-left и padding-right.
Блин... Хороший вопрос задал. Почитай про верстку. Пару советов я дал.
И еще, если не получается div'ами, верстай таблицами

Спустя 4 минуты, 19 секунд (27.09.2011 - 12:59) Fredrich написал(а):
так таблицы это уже прошлое я как посмотрел в основном все верстают div' ами, так как быстрее браузеры работают.

Вот смотри в чем проблема есть 2 блока под хедером как сделать так что бы к примеру один блок тот что левый будет занимать 80% по воле пользователя а остальное будет занимать второй блок пока его тоже чем то не заполнит пользователь до оставшихся 20% места

Спустя 6 минут, 45 секунд (27.09.2011 - 13:06) Aleks-prog написал(а):
Кстати хороший вопрос действительно... smile.gif

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

Спустя 2 минуты, 57 секунд (27.09.2011 - 13:09) Fredrich написал(а):
Но кажется нам никто не поможет, а вопрос то не очень сложный... Ну кто нибудь помогите

Спустя 7 минут, 34 секунды (27.09.2011 - 13:16) Aleks-prog написал(а):
я вот ща пробую position: fixed для div, попробуй тоже smile.gif

Спустя 5 минут, 40 секунд (27.09.2011 - 13:22) EvilDev написал(а):
Aleks-prog
Не, не подойдет fixed. Вообще position лучше юзать только тогда, когда вообще вариантов больше нет.

Fredrich
Тут 2 конца одной палки. Зато лучше понимают старые браузеры

В общем делается так. Допустим 2 блока .left и .right
.left {
float:left;
width:200px;
}
.right {
padding-left:200px;
}
И ничего съезжать не будет. аналогично с 3-мя блоками

Спустя 4 минуты, 3 секунды (27.09.2011 - 13:26) Fredrich написал(а):
А что бы текст не уползал ниже блока как сделать

Спустя 43 секунды (27.09.2011 - 13:27) EvilDev написал(а):
Fredrich
Тавай подробнее, голова уже не варит

Спустя 4 минуты, 46 секунд (27.09.2011 - 13:32) Aleks-prog написал(а):
EvilDev

Подействовало, убрал один див из родительского дива со стилем float-left, все равно нижний див не сместился ОГРОМНОЕ СПАСИБО!!!!!!!!! biggrin.gif

Спустя 28 минут, 41 секунда (27.09.2011 - 14:00) m4a1fox написал(а):
По мне таблицами проще верстать!

Спустя 35 минут, 7 секунд (27.09.2011 - 14:35) Aleks-prog написал(а):
Таблицы это уже старо... мое мнение
Кто знает как сделать перекрывание так чтобы дочерний блок div перекрывался родительским блоком, ОЧЕНЬ НУЖНО, есть такая структура:
Нужно чтобы класс akcii_right(дочерний блок по отношению к классу site) был справа и на половину перекрывался родительским блоком(class="site")

<div class="site"> <!-- начало сайта --!>
 
<div class="top_menu">

<?php
include("top_menu.php");
?>
</div>

<div class="akcii_left">
<?php
include("akcii.php");
?>

</div>

<div class="akcii_right">
	<?php
include("akcii_right.php");
?>
</div>

<div class="footer">
<?php
include("footer_menu.php");
?>
</div>
</div>
<!-- конец сайта --!>

Спустя 47 минут, 41 секунда (27.09.2011 - 15:23) sebastjan написал(а):
m4a1fox
Это уже война идеологий, чем типа правильней и чем кросброузерней.
Напишу небольшую статейку,как будет время по поводу дивов и таблиц с практическими примерами.
Коротко скажу, что прмитивная вёёрстка трёх клонок с шапкой и подвалом ,фиксированной ширины на дивах весит не менее 5-6 кб при полной оптимизации , отсутствии пробелов и отступов.
Когда на табличной это дело весит максимум до 3Кб.

Спустя 34 минуты, 35 секунд (27.09.2011 - 15:58) m4a1fox написал(а):
Aleks-prog
Цитата
Таблицы это уже старо... мое мнение

тогда мучаться придется! ИМХО!

Спустя 4 минуты, 52 секунды (27.09.2011 - 16:03) Zerstoren написал(а):
display: inline-block;
Для трех колонок самое оно
Или можно использовать список

Спустя 6 часов, 53 минуты, 52 секунды (27.09.2011 - 22:56) Fredrich написал(а):
Цитата (m4a1fox @ 27.09.2011 - 12:58)
Aleks-prog
Цитата
Таблицы это уже старо... мое мнение

тогда мучаться придется! ИМХО!

то есть хочешь сказать что таблицами на много проще и ресурсоэкономичнее

Спустя 15 минут, 32 секунды (27.09.2011 - 23:12) Winston написал(а):
Цитата (Fredrich @ 27.09.2011 - 22:56)
то есть хочешь сказать что таблицами на много проще и ресурсоэкономичнее

Таблицы - прошлый век smile.gif Могут тебе сказать, придя ты на работу smile.gif

Спустя 8 часов, 45 минут, 36 секунд (28.09.2011 - 07:58) Fredrich написал(а):
кто еще ребят скажет об этом?

Спустя 22 минуты, 56 секунд (28.09.2011 - 08:21) Aleks-prog написал(а):
Лучше всего использовать и таблицы и дивы, более универсальное решение так сказать, например, таблицу можно применять для вывода контента

Спустя 16 минут, 33 секунды (28.09.2011 - 08:37) Fredrich написал(а):
А дивы для дизайна?

Спустя 53 минуты, 59 секунд (28.09.2011 - 09:31) Aleks-prog написал(а):
Ну да, например, дивы для дизайна и рекламы(банеров), а таблицы для меню и контента

Спустя 22 минуты, 2 секунды (28.09.2011 - 09:53) Fredrich написал(а):
надо будет попробывать

Спустя 6 часов, 11 минут, 15 секунд (28.09.2011 - 16:04) sebastjan написал(а):
Я лично исхожу из поставленной задачи.
Сам дизайн может тоже представлять из себя таблицу.
В таком случаи я не вижу смысла верстать дивами.
Ну это если уж очень хочеться заказчику, так пожалуйста.
Правда заказчик от этого завсегда вдалеке. smile.gif
Как бы там не говорили о валидности, но при дизайне дивами сложного макета, зачастую применяют хаки, что само по себе тоже не валидно.
Палка о двух концах.
Цель то одна, быстрая загрузка на первом месте.
Див вёрстка на самом деле зачастую проигрывает таблице, из за огромного количества стилей и вложений дивов.
Но это я расмамтриваю в случаях серьёзного див дизайна, к примеру резина по вертикали и по горизотали в три колонки, подвал и шапка, возможность применения фона для колонок,
колонки всегда на 100% по вертикали, отображение в 99% броузерах начиная как минимум с ИЕ6.
Подготавливаю отчёт о сравнении с примерами и тестами.
Включая тесты скорости загрузки, отображение в различных броузерах.

Спустя 19 часов, 57 минут, 50 секунд (29.09.2011 - 12:02) Fredrich написал(а):
спасибо за подробное описание и толкование сути проблемы очень помогло!
Быстрый ответ:
Powered by dgreen

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2024 Invision Power Services, Inc.