В?рстка слоями, поможите программеру

StupID · December 21, 2007

Я вот программер прикладной, заставили сайт написать собственно хотел попросить помощи, потому как столкнулся с некоторыми проблемами. Макет такой (всего 6 ло?в):

@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@

@@@@@@@@@@@@@@@@@@@@@@ @@@@@@@@

@@@@@@@@

@@@@@@@@@@@@@@@@@@@@@@ @@@@@@@@

@@@@@@@@

@@@@@@@@@@@@@@@@@@@@@@ @@@@@@@@

@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@

Не получается без position: absolute сообразить как правый слой между шапками сделать так, как на макете. Если использовать absolute то при изменении размеров браузера он уезжает, а не хотелось бы. Fixed не все понимают. Все остальные слои нормально получается расположить, с этим проблемы. Помогите. Выкладываю код css файла и самой страницы, заодно хотел бы попросить что бы вы посмотрели код в плане грамотного написания кода как такового, сам пока тока начинаю и правила правильного программирования web постигать тока тока начал. Float:left пробовал применят, не получилось нужного результата. Подскажите пожалуйста.

CSS:

/*- Меню————————— */

 #tabs6 {
 position: inherit;
 margin: 0 auto 0 0;
 float:left;
 width:600px;
 height:32px;
 background:url("head-menu.gif") no-repeat;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-size:14px;
 line-height:normal;
 }
 #tabs6 ul {
 margin:0;
 padding:0px 10px 30px 95px;
 list-style:none;
 }
 #tabs6 li {
 display:inline;
 margin:0;
 padding:0;
 }
 #tabs6 a {
 float:left;
 background:url("menu-left.gif") no-repeat left top;
 margin:0;
 padding:0 0 0 4px;
 text-decoration:none;
 }
 #tabs6 a span {
 float:left;
 display:block;
 background:url("menu-right.gif") no-repeat right top;
 padding:5px 15px 4px 6px;
 color:#000;
 }
 /* хак IE5-Mac */
 #tabs6 a span {float:none;}
 /* ————-*/
 #tabs6 a:hover span { color:#FFF; }
 #tabs6 a:hover { background-position:0% -42px; }
 #tabs6 a:hover span { background-position:100% -42px; }
 #tabs6 #current a { background-position:0% -42px; }
 #tabs6 #current a span { background-position:100% -42px; }
/*—————————————————————--*/
/*————-Стили для предупреждения об авторизации————-*/ 
#col3 {
 margin: 40px 0 0 45px; /*Отступы слоя (положение в окне)*/
 width:535px; /*Длинна слоя*/
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-size:10px;
}
#col3 P { padding-left:5px; text-align:left;}/*Отступ текста с лева, выравнивание по левому краю*/
#col3 th { vertical-align:middle;} /*Выравнивание содержимого по центру таблицы*/
/*——————————————————————*/
#col4 {
 width:535px;
 background-color:#808080;
 background-repeat:repeat-y;
 margin: 20px 0 0 45px; /*Отступы слоя (положение в окне)*/
}
#col4 th { border:0px;}
/*——————————————————————*/
#col5 {
 width:535px; /*Длинна слоя*/
 background-color:#00BF55;
 background-repeat:repeat-y;
 margin: 10px 0 0 45px; /*Отступы слоя (положение в окне)*/
 }
#col5 th { border:0px;}
/*——————————————————————*/
#rekl1 {
 position: inherit;
 top:100px;
 width:200px; /*Длинна слоя*/
 margin: 10px 0px 0 auto; /*Отступы слоя (положение в окне)*/
 float:right;
}

#rekl1 img{ border:0; margin:0;}

и сам .htm

<!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>
<link href="css666.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#headC {
width: 797px;
margin:0 auto 20px auto;
border:0;

}

</style>
</head>
<body>
<div id= "headC">
<div style="background-color:#FFBFFF"></div>
<!--Навигационная панель (меню)-->
<div id="tabs6">
<ul>
<li><a href="#"><span>Меню 1</span></a></li>
<li><a href="#"><span>Меню 2</span></a></li>
<li><a href="#"><span>Меню 3</span></a></li>
<li><a href="#"><span>Меню 4</span></a></li>
<li><a href="#"><span>Меню 5</span></a></li>
</ul>
</div>
<!--Поле между шапкой -->
<div id="col3">
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <th scope="col">Pic1</th>
 <th scope="col"><p>Текст сообщения </p></th>
 </tr>
</table>
</div>
<!-- Слой "Реклама"-->
<div id="rekl1"><img src="1.gif"/></div>
</div>
<!-- Слой "2"-->
<div id="col4">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <th colspan="2" scope="col">Pic0</th>
 </tr>
 <tr>
 <th scope="col"><p>Поле 1</p>
 <p>Поле 1</p>
 <p>Поле 1</p></th>
 <th scope="col"><p>Поле 1</p>
 <p>Поле 1</p>
 <p>Поле 1</p></th>
 </tr>
 <tr>
 <th colspan="2" scope="col">Pic2</th>
 </tr>
 </table>
</div>
<!-- Слой "3"-->
<div id="col5">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <th colspan="2" scope="col">Pic3</th>
 </tr>
 <tr>
 <th scope="col"><p>Поле 2</p>
 <p>Поле 1</p>
 <p>Поле 1</p></th>
 <th scope="col"><p>Поле 1</p>
 <p>Поле 1</p>
 <p>Поле 1</p></th>
 </tr>
 <tr>
 <th colspan="2" scope="col">Pic4</th>
 </tr>
 </table>
</div>

</body>
</html>

maddogrts · December 21, 2007

float используйте

http://xhtml.ru/2005/11/19/simple-layouts

StupID · December 22, 2007

спасибо, отличные примеры, с этим понятно. А как с правильным кодингом? Правильно ли я выбрал стиль программирования на html с css?, может чтото лишнее написал? или правильнее было бы использовать другой подход? Подскажите.

Marlik · December 22, 2007

спасибо, отличные примеры, с этим понятно. А как с правильным кодингом? Правильно ли я выбрал стиль программирования на html с css?, может чтото лишнее написал? или правильнее было бы использовать другой подход? Подскажите.

Все правильно Див внутри дива таблицы идеальный вариант лучше пока еще не придумали!

StupID · December 24, 2007

Там будут идти табличные данные, два списка и внешне в одной с кругл?нной рамке. Поэтому лучше способа чем в диве использовать таблицу я не наш?л, с выраниваниями никаких проблем и рамку в .gif нартсовать не проблема. Я вот с этой точки зрения вставил таблицу.

Это два блока в середине последних, будут выводить ввиде таблицы два списка.

Sign In

В?рстка слоями, поможите программеру

Question

StupID

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

maddogrts

Link to comment

Share on other sites

StupID

Link to comment

Share on other sites

Marlik

Link to comment

Share on other sites

StupID

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information