Jump to content
  • 0

Прошу помочь с версткой.....

Avalon.

Asked by Avalon.,

 Share

Question

Avalon. Explorer

Avalon.

Posted
Posted

Добрый день, имеется в основной части (контенте) 2 DIV колонки, в css стилях выставлен мин высота в 100% так вот

1. В опере вроде на первый взгялд все нрм, без наполнения колонки растянуты во всю страницу, ну как тока добавишь в одну или другую текст , так к примеру если в перой обавили текст, то она увеличивается в размере , а ВТОРАЯ так и е растягивается до размеров первой

2. В эксплорере 8, вообще бэкграунд не заполняет страницу, как к примеру в опере

КОД страницы:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Стили</title>
  <link rel="stylesheet" type="text/css" href="style.css">
 </head>
<body>
<div id='wrapper'>



	<div id='header'>
		<!-- Содержимое хэдэра -->
<table cellpadding="0" cellspacing="0" border="0" width="780px" >
<tr>
<td ><a href=""><img src="img/t01.jpg" ></a></td>
<td ><a href=""><img src="img/t02.jpg" ></a></td>
<td ><a href=""><img src="img/t03.jpg" ></a></td>
<td ><a href=""><img src="img/t04.jpg" ></a></td>
<td ><a href=""><img src="img/t05.jpg" ></a></td>
<td ><a href=""><img src="img/t06.jpg" ></a></td>
</tr>
</table>

<table cellpadding="0" cellspacing="0" border="0" width="780px" style="background:url(img/t01.jpg) repeat:y width:1220px;">
<tr width="780px" style="margin:0; padding:0;">
<td><img src="img/name.jpg"></td>
</tr>
</table>

<table cellpadding="0" cellspacing="0" border="0" width="780px">
<tr>
<td><img src="img/r00.jpg" ></td>
<td><a href=""><img src="img/r01.jpg" ></a></td>
<td><a href=""><img src="img/r02.jpg" ></a></td>
<td><a href=""><img src="img/r03.jpg" ></a></td>
<td><img src="img/r04.jpg" ></td>
</tr>
</table>

<table cellpadding="0" cellspacing="0" border="0" width="780px">
<tr>
<td><img src="img/top.jpg" ></td>
</tr>
</table>
	</div>


<div id='container'>
		<div id='left'>
		<!-- Содержимое левой колонки -->
		<table cellpadding="0" cellspacing="0" border="0">
		<tr><td><img src="img/m00.jpg"></td></tr>
		<tr><td><a href=""><img src="img/m01.jpg"></a></td></tr>
		<tr><td><a href=""><img src="img/m02.jpg"></a></td></tr>
		<tr><td><a href=""><img src="img/m03.jpg"></a></td></tr>
		<tr><td><a href=""><img src="img/m04.jpg"></a></td></tr>
		<tr><td><a href=""><img src="img/m05.jpg"></a></td></tr>
		</table>
		</div>

		<div id='right'>	
		<!-- Содержимое правой колонки -->
		</div>

	<div class='clear'>
<table cellpadding="0" cellspacing="0" border="0" width="780px" >
<tr>
<td ><a href=""><img src="img/f01.jpg" ></a></td>
<td ><a href=""><img src="img/f02.jpg" ></a></td>
<td ><a href=""><img src="img/f03.jpg" ></a></td>
<td ><a href=""><img src="img/f04.jpg" ></a></td>
<td ><a href=""><img src="img/f05.jpg" ></a></td>
<td ><a href=""><img src="img/f06.jpg" ></a></td>
</tr>
</table>
	 </div>

</div>

<div id='footer'>
<!-- Содержимое футера -->
</div>
</div>
</body>
</html>

Код CSS:

html, body {margin:0;height:100%;}
#wrapper {height:auto !important;height:100%;min-height:100%;width:780px;margin:auto;}
#header {height:217px; margin-top:0px;}
#left {float:left;width:245px;margin-top:0px;background-image:url(img/bgleft.jpg);min-height:100%; }
#right {margin-left:245px; background-image:url(img/bg01.jpg); min-height:100%;}
#footer {height:66px;margin-top:-66px;background-image:url(img/footer.jpg);width:780px;margin:auto;}
.clear {clear:both;}
#container{margin-top:0px; min-height:100%;}
img { display: block; border: none }

Скрин Оперы без наполнения:

1f89992195e5.jpg

Скрин Оперы с наполнением:

ee0f11af3e1a.jpg

Скрин IE:

73e267bd1880.jpg

Заранее спасибо

Link to comment
Share on other sites

14 answers to this question

Recommended Posts

  • 0
Avalon. Explorer

Avalon.

Posted
  • Author
Posted (edited)

Ну в CSS я слою warp задаю width 780 px

Ну у меня, вроде :(, все так получилось, кроме того , если 1 колонка растягивается вместе с ней параллельно должна растягиваться правая - с заполнением бэкграунда....

Edited by Avalon.
Link to comment
Share on other sites
  • 0
Scrum Explorer

Scrum

Posted
Posted

ага

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Стили</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <style type="text/css">
  <!--
  html, body
  {
	margin:0;
	height:100%;
	}
#wrapper {
	height:100%;
	min-height: 100%;
	width:780px;
	margin:0 auto;
	height:auto !important;
  }
#left {
	float:left;
	width:245px;
	height: 100%;
	background: red;
	min-height: 100%;
  }
#right {
	margin-left:245px;
	height:100%;
	}
#container{
	height: 100%;
	overflow: hidden;
	background: green;
	}
  -->
  </style>
</head>
<body>
<div id='wrapper'>

<div id='container'>
	<div id='left'>
Nullam quam dolor, dapibus vel sodales nec, tempus eu massa. Etiam vehicula ligula ut ante pulvinar pharetra. Ut sed convallis sapien. Donec in pharetra magna. In dapibus odio vitae eros pretium quis tempus purus tincidunt. Duis magna enim, varius nec rutrum eu, sollicitudin vel sapien. Phasellus ipsum sem; tincidunt in vestibulum non, porta eget magna. Donec varius, lectus eu dapibus adipiscing, odio mi semper ligula, ut rutrum ligula lorem nec dui. Nulla facilisi. Sed vel enim eu sem ullamcorper auctor in a lorem. Curabitur luctus nibh a erat mattis gravida.

Etiam nibh tortor, feugiat ac scelerisque non, tristique non sapien. Proin lacinia dui in nunc adipiscing ullamcorper. Aliquam ac purus in dui porttitor posuere a eget felis. Suspendisse pellentesque fermentum elit quis sollicitudin. Nullam commodo malesuada dolor et bibendum? Proin non purus sit amet orci sagittis malesuada. Maecenas urna elit, mollis ut malesuada et, vehicula non augue. Integer in risus urna? Suspendisse feugiat, massa interdum semper suscipit, metus urna convallis dui, in pharetra felis justo ut risus. Nunc scelerisque, dolor convallis viverra congue, nulla dui blandit lectus, non sagittis ante nibh ac libero. Nam porta; sem non adipiscing vestibulum, enim est facilisis magna, vitae ultricies risus neque eget arcu.

Nunc id felis diam, vitae fringilla lorem. Nullam dapibus mi quis tortor hendrerit sit amet tempor arcu gravida? Pellentesque dignissim tempor fringilla. Nam eu est dolor. Nunc elementum tempus ultricies. In interdum varius tellus non consectetur. Donec varius dui sed lectus auctor malesuada. Suspendisse potenti. Morbi et odio purus, nec sagittis justo. Quisque elit leo, ultrices eget malesuada et, euismod sit amet purus.

Nunc id felis diam, vitae fringilla lorem. Nullam dapibus mi quis tortor hendrerit sit amet tempor arcu gravida? Pellentesque dignissim tempor fringilla. Nam eu est dolor. Nunc elementum tempus ultricies. In interdum varius tellus non consectetur. Donec varius dui sed lectus auctor malesuada. Suspendisse potenti. Morbi et odio purus, nec sagittis justo. Quisque elit leo, ultrices eget malesuada et, euismod sit amet purus.

	</div>

	<div id='right'>
		<!-- Содержимое правой колонки -->
		Right
	</div>
</div>

</div>
</body>
</html>

Link to comment
Share on other sites
  • 0
Avalon. Explorer

Avalon.

Posted
  • Author
Posted

Scrum, мммм если честно я не доконца понял смысл приведенного вами примера кода.....

Вы имеете ввиду что по вашему коду, лучше решить мою проблему - это указав одину и ту жу фоновую картинку для слоя RIGHT и слоя Container???

Дело в том что даже в вашем примере, если в правой колонке больше текста чем в левой, то соответственно левая колонка не растянется до уровня правой.

А у меня задумка сделать так, чтобы в не зависимости в какой из колонок больше\меньше текста, по высоте они были на одном уровне..... тока к сожалению именно это у меня и не получается :(

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted

Не понимаю, зачем столько сложностей?

<!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=utf-8" />
<title>Документ без названия</title>
	<style type="text/css">
		*{ margin: 0; padding: 0;}
		html,body { background:/* Фон Контента */; height: 100%;}

		.wrap { min-height: 100%; background: /* Фон левой колонки 200px*/}
			.left{ width: 200px; float: left;}
			.content { overflow: hidden;}
	</style>
</head>

<body>

	<div class="wrap">
		<div class="left">Left</div>
		<div class="content">Content</div>
	</div>

</body>
</html>

Вот собственно и всё.

Link to comment
Share on other sites
  • 0
Avalon. Explorer

Avalon.

Posted
  • Author
Posted

Фоновый цвет warp -а перекрывает все, ладно всем спасибо за помощь, видимо я както не так объяснил, и мы друг друга не поняли :()

Просто посмотрите на 2 скрин , в самом начале темы (скрин Оперы с наполнением),

2 КОЛОНКИ (DIV), у каждой свой фоновый рисунок

Если в первой колонке больше текста или наоборот, то Между первой и второй колонками (Которая больше и которая меньше по ширине), возникает "просвет", а я хочу добиться чтобы и первая и вторая колонки , БЫЛИ ОДИНАКОВЫМИ ПО ВЫСОТЕ. (равнялись на ту , которая боьшего размера)

Link to comment
Share on other sites
  • 0
Avalon. Explorer

Avalon.

Posted
  • Author
Posted
Тогда уж проще сделать одну фоновую картинку (фон контента + фон левой колонки) и пустить ее на wrap

А то есть , насколько я вас понял, если я задам одну фоновую картинку для всего слоя warp, то сайт должен быть с резиновой версткой (растягиваться на все 100% по всей ширине страницы)?

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept