В коде от Aykroyd присутствует
margin: 0px auto;
overflow:hidden;
опишите, зачем они используются
Вид для печати
В коде от Aykroyd присутствует
margin: 0px auto;
overflow:hidden;
опишите, зачем они используются
margin: 0px auto; используется для горизонтального центрирования блочного элемента внутри родительского элемента (контейнера)...
Свойство overflow со значением hidden предназначено для устранения проваливания элементов с float через низ содержащего их контейнера в нормальных браузерах...
Уважаемый Aykroyd, видимо я столкнулся с этой проваливанием в самом начале своего знакомства с версткой дивами.
Взгляните [Only registered and activated users can see links. Click Here To Register...]
Есть ли другой вариант кроме overwrite?
Отдельная тема для этого мной уже создана designforum.ru/topic27003.html
Подскажите.
Если у меня стоит
#div1 {
width:100%;
margin-right:-200px;
}
Как сделать, чтобы вложенный див был внутри этих размеров? если 100% ставлю, то он закрывает правую ячейку..
Задача: сделать внутри div1 две ячейки по 50% от его размера, а не от общего)
<div id="div1">
<div>50%</div> <div>50%</div>
</div>
Я не знаю что Вы понимаете под "общим" размером, но по Вашим словам получается "масло маслянное"... Размеры дочерних элементов и так (по умолчанию) всегда считаются от размеров своих родительских элементов...
И еще... Забудьте Вы про ячейки... Нет в блочной модели никаких ячеек...Цитата:
закрывает правую ячейку..
а скрипт где
Цитата:
script src="js/minmax.js" type="text/JavaScript
[Only registered and activated users can see links. Click Here To Register...]
И все-таки, раз есть тема давайте выведем основные шаблоны 3-колоночных сайтов с масштабируемым центральным блоком.
Честно признаюсь, для меня большая проблема - проваливания из-за превышающего размеры центрального поля в неправильных броузерах.
[/quote]Цитата:
Originally posted by Грин@Oct 21 2007, 00:38
И все-таки, раз есть тема давайте выведем основные шаблоны 3-колоночных сайтов с масштабируемым центральным блоком.
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
Один такой "основной" шаблон как раз и выведен в этой теме. Немного выше. Причем смею Вас заверить, что там ничего никуда не проваливается... Ни при каких обстоятельствах, ни в правильных браузерах, ни в неправильных...
Как сделать что бы левая и правая колонка была одинакового размера по длине? До самого футера.
У меня правая колонка длиннее левой и в результате левая не дотягивается до футера..
Верстал по шаблону Aykroyd
Вон оно в чем дело... ) Ну так, это уже совсем другая история... Вышеописанный шаблон демонстрирует решение несколько иных задач – в частности, вынос основного контента в коде на самый верх (меняем колонки местами) и поддержку max-width.
Никак. [Only registered and activated users can see links. Click Here To Register...] Потому что в CSS нет средств сказать «высота как вот у того другого элемента».Цитата:
Как сделать что бы левая и правая колонка была одинакового размера по длине?
Но выход есть. Причем весьма известный. И писал я о нем довольно много, правда, в других темах...
Воспользуйтесь техникой Faux Columns... Не задавайте фоновый цвет или изображения для самих колонок... Для левой колонки задайте фоновое изображение в элементе html, а для правой – в элементе body...
И будет Вам счастье...
P.S. Правда, от max-width в данном конкретном случае скорее всего придется отказаться...
Прошу извинить меня, но честно говоря не понял...
Код:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Центр - Левая - Правая</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
* {margin: 0px; padding: 0px;}
html {background: url(img/bgleft.gif) #CCFFFF repeat-y; height: 100%;}
body {background: url(img/bgright.gif) repeat-y right top; min-width: 776px; min-height: 100%; position: relative;}
* html body {height: 100%;}
#header {background: #FFFF99; height: 100px;}
#content {width: 100%; padding-bottom: 70px; overflow: hidden;}
#outer1 {width: 100%; margin-right: -200px; float: left;}
#outer2 {margin-right: 200px;}
#outer3 {width: 100%; margin-left: -150px; float: right;}
#main {margin-left: 150px;}
#news {width: 150px; float: left;}
#present {width: 200px; float: right;}
#footer {background: #66FFCC; width: 100%; height: 70px; position: absolute; bottom: 0px;}
* html #footer {bottom: -1px;}
</style>
<script src="js/minmax.js" type="text/JavaScript"></script>
</head>
<body>
<div id="header">Заголовок</div>
<div id="content">
****<div id="outer1">
*<div id="outer2">
*****<div id="outer3">
* *<div id="main">Контент</div>
*****</div>
*****<div id="news">Новости</div>
*</div>
****</div>
****<div id="present">Презентация</div>
</div>
<div id="footer">Футер</div>
</body>
</html>
Спасибо, за пример, но у меня немножко посложнее ситуация..
у меня в левую колонку(div) вписана таблица, в таблице только левому столбцу надо сделать bgcolor, Т.е. у левой колонки нет бэка..
[/quote]Цитата:
Originally posted by barmalei@Oct 21 2007, 18:26
у меня в левую колонку(div) вписана таблица
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
А Вы уверены, что ей там самое место? )
[/quote]Цитата:
Originally posted by barmalei@Oct 21 2007, 18:26
в таблице только левому столбцу надо сделать bgcolor
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
Ну так и сделайте ему фоновый цвет. В чем проблема? Только не атрибутом bgcolor, а при помощи стилевых спецификаций. Если же необходимо, чтобы этот столбец тянулся до самого футера – НЕ делайте ему фоновый цвет. Подложите вместо этого фонового цвета соответствующее фоновое изображение (с необходимым цветом) в элемент html. Хрен редьки не слаще...
[/quote]Цитата:
Originally posted by barmalei@Oct 21 2007, 18:26
Т.е. у левой колонки нет бэка..
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
По Вашему бэк – это обязательно во всю ширину колонки?
Я верстал сайт по этому шаблону
<div id="container">Цитата:
<!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=windows-1251" />
<title>Шаблон DIV: 3 колонки, центральная резиновая</title>
<script type="text/javascript" src="minmax.js"></script>
<link rel="stylesheet" type="text/css" href="index.css" media="all" />
</head>
<body>
<div id="header">Заголовок
<div id="container-content">
*
</div>
</div>
</body>
</html>[/quote]
У Вас же теперь совершенно другая структура... придеться передалыватЬ?
Подскажите как бек не на всю ширину сделать?
[/quote]Цитата:
Originally posted by barmalei@Oct 21 2007, 18:46
Я верстал сайт по этому шаблону
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
А где Вы его взяли? :crazy:
В этой теме таких шаблонов (с такой структурой и такими идентификаторами) даже близко не встречалось.
[/quote]Цитата:
Originally posted by barmalei@Oct 21 2007, 18:46
Подскажите как бек не на всю ширину сделать?
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
Вы издеваетесь? )
У Вас проблема сделать в Фотошопе картинку меньшей ширины?
Сдурил так сдурил.. гляжу тема обновилась, думал файл приатаченый автором - теперь эталонный шаблон, его и взял за основу.. Опять верстать :fie: :fie: :fie: :suicide2: :suicide2: :suicide2:
Я так понимаю в левой и правой колонке - вообще нельзя будет вставлять рисунки?
Или к примеру, у меня в DIV(правая колонка) вписана таблица, в одной из ячеек таблицы вставлена картинка.
Это так и останется:
Цитата:
<table style='MARGIN-LEFT: 0px; WIDTH: 100%' cellspacing='0'* * * * cellpadding='0' border='0'><tbody>* * * * <tr>* * * * * <td><img src='images/3r3.jpg' alt='' width='200' height='48' /></td>
[/quote]Цитата:
Originally posted by barmalei@Oct 21 2007, 19:33
вписана таблица, в одной из ячеек таблицы вставлена картинка
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
Так я и думал... :crazy:
Вы наивно полагаете, что если основной каркас сделать блоками, то внутрь можно спокойно продолжать пихать говнотаблицы? )) Боюсь, что дальше я Вам уже не советчик)
[Only registered and activated users can see links. Click Here To Register...]
Я пытаюсь самый первый приведенный тут Айвкодом шаблон применить, и приходится при широком контентном поле деать большой min-width.
spbhouse.ru/photogallery.html на ослах совсем плохо работает.