Верстка простенького макета. Помогите.

f0rym4anin · July 14, 2009

Здравствйте, всю жизнь верстал таблицами и не знал бед. Но тут решился освоить верстку дивами Уже буквально закипаю

Помогите с простеньким макетиком.

<!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>Untitled Document</title>
</head>

<body bgcolor="#99CCFF" leftmargin="0" rightmargin="0" topmargin="0" bottommargin="0">
  <!-- black white frame -->
  <div id="frame" style="margin:0 auto; width:980px; margin-top:15px; margin-bottom:15px; padding: 3px; background: #fff; border:solid 1px #999999;">
	<!-- header -->
	<div id="header" style="width:980px; height:100px; background-color:#FF0000; margin-bottom:3px; text-align:center; color:#FFFFFF; position:relative;">HEADER</div>
	<!-- wraper -->
	<div id="wraper" style="overflow:hidden;">
	  <!-- left -->
	  <div id="left" style="width:200px; float:left; display:inline;">
		<!-- left wraper -->
		<div id="left-wraper" style="padding:10px;">
		  <ul>
			<li style="margin:0px;">Item 1</li>  
			<li>Item 2</li>  
			<li>Item 3</li>  
			<li>Item 4</li>  
			<li>Item 5</li>												  
			<li>Item 6</li>  
			<li>Item 7</li>  
			<li>Item 8</li>  
			<li>Item 9</li> 
			<li>Item 10</li>  
		  </ul>
		</div>
	  </div>
	  <!-- Right -->
	  <div id="right" style="width:780px; float:left; display:inline;">
		<!-- Right wraper -->
		<div id="right-wraper" style="padding:10px;">
		  <!-- Pages navigator -->
		  <div style="border:solid 1px #000; width:100%">
			<div style="overflow:hidden;">
			  <div style="float:left; display:inline; width:30%">Navigation</div>
			  <div style="float:left; display:inline; width:70%; text-align:right;">1 | 2 | 3</div>
			</div>
		  </div>
		  <!-- Table -->
		  <div id="table" style="margin-top:10px;">
			<table border="1" width="760">
			  <tr>
				<th>Title 1</th>
				<th>Title 2</th>
				<th>Title 3</th>
			  </tr>
			  <tr>
				<td>1.1</td>
				<td>1.2</td>
				<td>1.3</td>
			  </tr>
			  <tr>
				<td>2.1</td>
				<td>2.2</td>
				<td>2.3</td>
			  </tr>
			  <tr>
				<td>3.1</td>
				<td>3.2</td>
				<td>3.3</td>
			  </tr>
			</table>
		  </div>
		  <!-- Pages navigator -->
		  <div style="border:solid 1px #000; width:100%; margin-top:10px;">
			<div style="overflow:hidden;">
			  <div style="float:left; display:inline; width:30%">Navigation</div>
			  <div style="float:left; display:inline; width:70%; text-align:right;">1 | 2 | 3</div>
			</div>
		  </div>		  
		</div>
	  </div>
	</div>	
	<!-- footer -->	
	<div id="footer" style="width:980px; height:100px; background-color:#FF0000; margin-top:3px; text-align:center; color:#FFFFFF; position:relative;">FOOTER</div>	
  </div>
</body>
</html>

Или по ссылке тыць!!!!

В данном случае не могу решить следующие проблемы

1. В IE слой header имеет справа отсутп больший чем положенные 3пкс. Во всех остальный браузерах нормально

2. В IE слой footer вылазит на голобой фон. Во всех остальных браузерах нормально

Где и какие ошибки допущены что получается такой результат. Как их исправить?

Буду благодарен, если в принципе выскажете замечания по поводу самой верстки. Может что-то принципиально неправильно?

ЗЫ умышленно все оформление вносил в style, чтоб не нужно было бегать по листингу.

Edited July 14, 2009 by f0rym4anin

Searcher · July 14, 2009

Вобщем проще можно сделать, сейчас нет времени переделывать этот макет, но в любом случае, уберите padding у блока frame и задавайте margin внутренним блокам, а ширину для header и footer не надо задавать, они по умолчанию растянутся по всей ширине за вычетом маргинов которые будут для них указаны.

rus · July 14, 2009

А в какой версии ИЕ был баг? Я смотрел в 7-ой и ничего подобного нет.

f0rym4anin · July 14, 2009

Вобщем проще можно сделать, сейчас нет времени переделывать этот макет, но в любом случае, уберите padding у блока frame и задавайте margin внутренним блокам, а ширину для header и footer не надо задавать, они по умолчанию растянутся по всей ширине за вычетом маргинов которые будут для них указаны.

Чего-то вообще все развалилось

Игорь Ермаков · July 14, 2009

Учись локализировать проблему, лень искать ошибку в сотнях строк кода.

Вот почитай: http://absolvo.ru/uchastnikam-foruma-htmlbookru/

daer · July 20, 2009

уберите padding у блока frame и задавайте margin внутренним блокам, а ширину для header и footer не надо задавать, они по умолчанию растянутся по всей ширине за вычетом маргинов которые будут для них указаны.

делаешь то что выше и + у футера clear:both;, у div id="right" width:774px;, у таблицы width="756"

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

Sign In

Верстка простенького макета. Помогите.

Question

f0rym4anin

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

Searcher

Link to comment

Share on other sites

rus

Link to comment

Share on other sites

f0rym4anin

Link to comment

Share on other sites

Игорь Ермаков

Link to comment

Share on other sites

daer

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information