DIV и/или Table

Kish · 2 января 2008

Прив всем!

Решил начать тренится с созданием шаблонов под DLE. Решил делать так : сверху слой, снизу слой, между слоями таблица. Все это находится по центру страницы.

В CSS слоя шапки у меня так :

 #header

 {

	background: #ffffff;

	width: 750px;

	left : 240px;

	position: relative;

 }

В слое для "подвала" следующее :

#cellar

 {

	width: 750px;

	height: 15px;

	left : 240px;

	position: relative;

	padding: 10px;

	color: 205E71;

 }

1). Вот понять не могу, первое : Почему при одинаковой ширине шапки и подвала, шапка на несколько пикселей короче?

2). Если в Firefox при таких данных слой расположен ровно над таблицей, то в IE и в Opera он сдвинут намного вправо. Как быть тут?

3). Когда я под таблицей уже делаю "подвал" :

<DIV id="cellar" class="text" background="images/19.jpg" align="center">ТЕКСТ</DIV>

то фона нет. Что не так?

Надеюсь на вашу помощь!

lifestar · 2 января 2008

Если в Firefox при таких данных слой расположен ровно над таблицей, то в IE и в Opera он сдвинут намного вправо. Как быть

о, это головная боль многих верстальщиков. Точнее всех) Так устроены эти браузеры, что по разному понимают css

<DIV id="cellar" class="text" background="images/19.jpg" align="center">ТЕКСТ</DIV>

если уж ты решил изучать CSS то от конструкций вида background="images/19.jpg" советую избавляться.

А вообще держи: http://www.dynamicdrive.com/style/layouts/

Это тебе для примера css шаблоны разных конструкций

Kish · 2 января 2008

Т.е. получается что слоями верстать шапку и подвал не хорошо?

А если сделать общую оконтовку в виде таблицы и в нее потом уже запихать слои? Так можно?

lifestar · 2 января 2008

Т.е. получается что слоями верстать шапку и подвал не хорошо?

я такого не говорил. Смотри ссылку

Kish · 2 января 2008

Да, посмотрел, спасибо. Буду пробовать сделать слоями и адаптировать под DLE.

VFK · 3 января 2008

О хоть кто-то пытается верстать по-человечески, на свалки таблиц уже смотреть не могу...

1) Ширина элемента формируется путем сложения значений width, padding... В твоем случае "подвал" содержит отступ 10px с двух сторон, 750px + 10px + 10px = ширина "подвала"

2) Не понял ситуацию...

3) У тега div нет параметра background, указывать только через css.

Изменено 3 января 2008 пользователем VFK

Kish · 3 января 2008

Привет! Снова я!

Начал верстать по этому принципу : http://www.dynamicdrive.com/style/layouts/...21-fixed-fixed/

В CSS прописал так :

 #maincontainer

 {

	width: 780px; /*Width of main container*/

	margin: 0 auto; /*Center container on page*/

 }


 #header

 {

	background: #ffffff;

	height: 124px;

 }


 #contentwrapper

 {

	float: left;

	width: 100%;

 }


 #contentcolumn

 {

	margin-left: 200px; /*Set left margin to LeftColumnWidth*/

	height: 80%;

	background: #ffffff;

 }


 #leftcolumn

 {

	float: left;

	width: 200px; /*Width of left column*/

	height: 80%;

	margin-left: -780px; /*Set left margin to -(MainContainerWidth)*/

	background: #ffffff;

 }


 #cellar

 {

	clear: left;

	width: 100%;

	color: 205E71;

	text-align: center;

	padding: 4px 0;

	background-image: url(images/19.jpg);

 }

Потом в теле написал так :

<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0 background="images/bg.jpg">

<div id="maincontainer">

	<div id="header">

		<img src="images/1.jpg" width=236 height=124>

	</div>

</div>


<div id="contentwrapper">

	<div id="contentcolumn">

		<b>Content Column: <em>Fixed</em></b>

	</div>

</div>


<div id="leftcolumn">

	<b>Left Column: <em>200px</em></b>

</div>


<div id="cellar" class="text">

	<b>ТЕКСТ</b>

</div>

</BODY>[/html]

Видимо, что-то не так в CSS сделал. Получилось, что maincontainer выставился правильно. Но "подвал" почему-то растянулся на всю ширину страницы. А слои [b]contentcolumn[/b] и [b]leftcolumn[/b] наложились друг на друга, причем [b]leftcolumn[/b] находится по центру...

Подскажите, пожалуйста. СПАСИБО!

lifestar · 3 января 2008

Kish,

<div id="maincontainer">

<div id="header">

<img src="images/1.jpg" width=236 height=124>

</div>

</div>[/html]

зачем ты здесь закрываешь блок с id="maincontainer"?

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

Kish · 3 января 2008

Ой, действительно. Пасиба большое с расположением этих слоев.

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

И такой вопрос : дело в том, что фоны слоев и фон страницы светлые. Я хочу разделить это. Для этого я хочу по краям maincontainer'а пустить заливку шириной в 1px. Как мне это реализовать?

БОЛЬШОЕ спасибо за помощь!

lifestar · 3 января 2008

хочу, чтобы "подвал" как бы прилипал к низу страницы

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

хочу по краям maincontainer'а пустить заливку шириной в 1px

рамку? видимо так

border:1px solid #000

Kish · 3 января 2008

Ну не совсем рамку. border обносит по периметру слой, а я бы все-таки хотел, чтобы заливка была по левой границе и по правой. Сверху и снизу мне не надо. Вот как такое реализовать?

Greeze · 3 января 2008

по левой границе и по правой

border-left:1px solid #000;

border-right:1px solid #000;

или

border:1px solid #000;

border-top-width:0;

border-bottom-width:0;

Kish · 3 января 2008

Спасибо, большое. Заработало.

Теперь буду непостредственно натягивать на DLE и там тоже будет куча вопросов!

Kish · 3 января 2008

Хых... Добавил в файл main.tpl этот код, который я писал выше.... Остальные файлы шаблона взял из стандартных. Получилось следующее : Контент выводится, но там где контент попадает на слои текст выделить или нажать ссылку не получается. Получилось у меня так, что слои зафиксированы. И дальше чем указаны их значения они не идут. А контент продолжается на чистом фоне. Это бы тоже надо как-то исправить.

Надеюсь на ваше помощь! СПАСИБО!

Greeze · 4 января 2008

Kish,

учебник html и css тебе в помощь.

Kish · 4 января 2008

·• Greeze •·, и что именно мне там надо вычитать?

lifestar · 4 января 2008

Kish, ты решил тренироваться или смотреть, как это делаем мы за тебя?

и что именно мне там надо вычитать?

чтобы верстать дизайны, надо знать CSS от и до и основы html

Kish · 4 января 2008

lifestar, вовсе нет. Вам я благодарен! Блок я сделал резиновым, но я совсем не могу понять, почему текст в пределах этого блока и ссылки нельзя выделить курсором, а ссылки не кликабельны?

lifestar · 4 января 2008

Kish, выгрузи своё творение куда-нибудь - залезу посмотрю

Kish · 4 января 2008

lifestar, слушай, я уже ничего не понимаю. В лисе и в опере ссылки не кликабельны. В IE все кликается, но шапка и подвал сдвинуты ))) Я ща с ума сойду. А чего его куда-то выгружать. Вот что у меня в main.tpl :

<HTML>

<HEAD>

<TITLE>6</TITLE>

 <style type="text/css"><!--

   .header {font-family:Tahoma, sans-serif; font-size: 12px; COLOR:#2FFFFF; padding-left:10; padding-right:5; font-weight:900 }

   .text {font-family:Tahoma,sans-serif; font-size: 11px; color:#000000; padding-left:25; padding-right:10 }

      .text2 {font-family:Tahoma,sans-serif; font-size: 11px; color:#000000; padding-left:20; padding-right:10; font-weight:100; }

    .news {font-family:Arial, sans-serif; font-size: 9px; color:#ffffff; padding-left:10; padding-right:5; font-weight:900; }

   a:link{text-decoration: none; color:#0099CC}

  a:visited{text-decoration: none; color: #0099CC}

  a:hover{text-decoration: underline; color: #0099CC}

  a:active{text-decoration: none; color: #0099CC}

-->


 #maincontainer

 {

	width: 780px; /*Width of main container*/

	margin: 0 auto; /*Center container on page*/

	border-left:1px solid #000;

	border-right:1px solid #000;

 }


 #header

 {

	background: #ffffff;

	height: 124px;

 }


 #contentwrapper

 {

	float: left;

	width: 100%;

 }


 #contentcolumn

 {

	margin-left: 200px; /*Set left margin to LeftColumnWidth*/

	background: #EAEAEA/*#ffffff*/;

 }


 #leftcolumn

 {

	float: left;

	width: 200px; /*Width of left column*/

	margin-left: -780px; /*Set left margin to -(MainContainerWidth)*/

	background: #ffffff;

 }


 #cellar

 {

	clear: left;

	width: 100%;

	color: 205E71;

	text-align: center;

	padding: 4px 0;

	background-image: url({theme}/images/19.jpg);

	position: absolute;

	bottom: 0;

 }


 html, body 

 {

	height: 100%;

	margin: 0;

	padding: 0;

 }


 #all 

 {

	position: relative;

	height: 100%;

 }


 html>body #all

 {

	height: auto;

	min-height: 100%;

 }


 #empty, #footer

 {

 height: _foo_;

 }

 /* или

	#footer {height: _foo_;}

	#empty {height: _foo_ + _bar_;}

 */


</style>

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251">

</HEAD>

<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0 background="images/bg.jpg">

{AJAX}


<div id="maincontainer">

	<div id="header">

		<img src="{theme}/images/1.jpg" width=236 height=124>

	</div>


	<div id="contentwrapper">

		<div id="contentcolumn">

			{content}

		</div>

	</div>


	<div id="leftcolumn">

		{topnews}

	</div>


	<div id="all">

	<div id="empty">&nbsp;</div>

	<div id="cellar" class="text">

		<b>Текст</b>

	</div>

	</div>

</div>

</BODY>

</HTML>[/html]

Вот все творение...

EzS · 4 января 2008

Уважаемый! В кроссброузерной ной верстке очень много нюансов. lifestar правильно указал ссылку: http://www.dynamicdrive.com/. От себя могу добавить еще полезную: http://developer.yahoo.com/yui/

Изменено 4 января 2008 пользователем EzS

Greeze · 5 января 2008

#empty, #footer
{
height: _foo_;
}
/* или
#footer {height: _foo_;}
#empty {height: _foo_ + _bar_;}
*/

wtf? :blink:

Kish · 5 января 2008

·• Greeze •·, ну это из примера взято как делать "прилепающий" подвал.

Greeze · 5 января 2008

кинь в меня ссылкой на тот пример

Изменено 5 января 2008 пользователем ·• Greeze •·

Kish · 5 января 2008

·• Greeze •·, вот http://www.imfo.ru/computers/footer-absolute

Ты думаешь в этом могут быть причины того, что в Лисе контент не кликабелен?

DIV и/или Table

Рекомендованные сообщения

Kish 0

Ссылка на сообщение

Поделиться на других сайтах

lifestar 18

Ссылка на сообщение

Поделиться на других сайтах

Kish 0

Ссылка на сообщение

Поделиться на других сайтах

lifestar 18

Ссылка на сообщение

Поделиться на других сайтах

Kish 0

Ссылка на сообщение

Поделиться на других сайтах

VFK 0

Ссылка на сообщение

Поделиться на других сайтах

Kish 0

Ссылка на сообщение

Поделиться на других сайтах

lifestar 18

Ссылка на сообщение

Поделиться на других сайтах

Kish 0

Ссылка на сообщение

Поделиться на других сайтах

lifestar 18

Ссылка на сообщение

Поделиться на других сайтах

Kish 0

Ссылка на сообщение

Поделиться на других сайтах

Greeze 0

Ссылка на сообщение

Поделиться на других сайтах

Kish 0

Ссылка на сообщение

Поделиться на других сайтах

Kish 0

Ссылка на сообщение

Поделиться на других сайтах

Greeze 0

Ссылка на сообщение

Поделиться на других сайтах

Kish 0

Ссылка на сообщение

Поделиться на других сайтах

lifestar 18

Ссылка на сообщение

Поделиться на других сайтах

Kish 0

Ссылка на сообщение

Поделиться на других сайтах

lifestar 18

Ссылка на сообщение

Поделиться на других сайтах

Kish 0

Ссылка на сообщение

Поделиться на других сайтах

EzS 2

Ссылка на сообщение

Поделиться на других сайтах

Greeze 0

Ссылка на сообщение

Поделиться на других сайтах

Kish 0

Ссылка на сообщение

Поделиться на других сайтах

Greeze 0

Ссылка на сообщение

Поделиться на других сайтах

Kish 0

Ссылка на сообщение

Поделиться на других сайтах

Присоединяйтесь к обсуждению