VPF::Макет - Форум программистов

maxnoskov

Дата 26.2.2010, 14:07 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 112
Регистрация: 21.6.2006
Где: Мурманск

Репутация: нет
Всего: нет

Подскажите, в каком направлении верстать такой макет

Присоединённый файл ( Кол-во скачиваний: 24 )

___________________.gif 22,76 Kb

bars80080

Дата 26.2.2010, 15:11 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315

на рисунке вижу таблицу -> предлагаю верстать таблицей

кстати, очень простой макет:

Код


<style>
#maket { width: 900px; border-collapse: collapse; }
.leftcol { width: 200px; }
.rightcol { width: 200px;; }
#block { height: 250px; }
.cold { width: 245px; float: left; }
.clear { clear: both; }
</style>
<table id="maket">
<tr><td colspan="3">HEADER</td></tr>
<tr><td class="leftcol">LEFT</td><td>
<div id="block">BLOCK</div>
<div class="cold">COL2</div><div class="cold">COL3</div>
<div class="clear"></div>
</td><td class="rightcol">RIGHT</td></tr>
<tr><td colspan="3">FOOTER</td></tr>
</table>

maxnoskov

Дата 27.2.2010, 14:36 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 112
Регистрация: 21.6.2006
Где: Мурманск

Репутация: нет
Всего: нет

Согласен, таблицами все просто. Имелась ввиду блочная верстка, извините, что не отметил это. Спасибо за вариант. Вроде наше вариант блоками:

Код


body {
margin:10px;
padding:0;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:16px;
line-height:18px;
color:#000;
background-color:#fff;
}

p {
margin:4px 0 6px 0;
}

strong {
font-weight:bold;
}

em {
font-style:italic;
}

h1, h2, h3, h4 {
font-weight:bold;
margin:10px 0 0 0;
}

h1 {
font-size:26px;
}

h2 {
font-size:23px;
}

h3 {
font-size:20px;
}

h4 {
font-size:17px;
}

a:link, a:visited {
color:#cc0000;
text-decoration:underline;
}

a:hover, a:active {
color:#999999;
text-decoration:none;
}

ul {
margin:5px 0 5px 20px;
padding:0;
list-style-type:disc;
}

ol {
margin:5px 0 5px 30px;
padding:0;
list-style-type:decimal;
}

ul li, ol li {
margin:0 0 4px 0;
padding:0;
}

/* << ----------------// Outer container that holds all the columns //---------------->> */
#mainContainer {
margin:0 auto;
padding:0;
width:1000px;
border:1px dashed #454545;
}

/* << ----------------// Header //---------------->> */
#header {
margin:0;
padding:5px;
width:990px;
height:90px;
color:#ffffff;
background-color:#000000;
}

/* << ----------------// Left column //---------------->> */
#columnOne {
float:left;
margin:0;
padding:0 5px 0 5px;
width:230px; 
background-color:#cccccc;
display:inline;
}

#columnOneIn {
float:left;
margin:0 -5px;
padding:5px;
width:250px !important;
width:240px;
height:250px;
background-color:#ffffee;
display:inline;
}

#columnOne p, #columnThree p, #columnOne ul li, #columnOne ol li, #columnThree ul li, #columnThree ol li {
font-size:13px;
}

#columnOne h2, #columnThree h2 {
font-size:16px;
}


/* << ----------------// Middle column //---------------->> */
#columnTwo {
float:left;
margin:0;
padding:0 5px 10px 5px;
width:490px;
background-color:#fff;
display:inline;
}
#columnTwoIn {
float:left;
margin:0 0 0 -5px;
padding:5px;
width:500px !important;
width:490px;
height:250px;
background-color:#eeeeee;
display:inline;
}
#columnTwoIn2 {
float:left;
margin:0 0 0 -5px;
padding:5px;
width:240px;
background-color:#eeffee;
display:inline;
}
#columnTwoIn3 {
float:left;
margin:0 -5px 0 0;
padding:5px;
width:240px;
background-color:#ffeeee;
display:inline;
}
/* << ----------------// Right column //---------------->> */
#columnThree {
float:left;
margin:0;
padding:0 5px 10px 5px;
width:250px !important;
width:240px;
background-color:#cccccc;
display:inline;
}

/* << ----------------// Footer //---------------->> */
#footer {
margin:0;
padding:5px 5px 5px 10px;
width:985px;
height:20px;
font-size:10px;
color:#cccccc;
background-color:#000000;
clear:both;
}

#footer a:link, #footer a:visited {
color:#999999;
text-decoration:none;
}

#footer a:hover, #footer a:active {
color:#ffffff;
text-decoration:underline;
}

/* << ----------------// Fix so that the outer DIV will wrap around all floated DIVs within //---------------->> */
.clearfix:after {
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden;
}

.clearfix {display: inline-table;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

Код


<!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=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="style.css" media="screen,print" />
<title>the css tinderbox: fixed 3-column layout</title>
</head>
<body>

<div id="mainContainer" class="clearfix">

<div id="header">
<h1>site title</h1>
<p>fixed 3-column layout</p>
</div><!--// end #header //-->

<div id="columnOne">
<div id="columnOneIn">
<h2>column 1</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>

<p>Pellentesque hendrerit tellus mollis dolor. Cras urna. Sed tellus. Aenean in nisi nec dui pretium bibendum.</p>
<h3>heading h3</h3>
<p>Lorem ipsum dolor sit amet, <a href="#">consectetuer adipiscing elit</a>. Pellentesque hendrerit tellus mollis dolor. Cras urna. Sed tellus. Aenean in nisi nec dui pretium bibendum. Praesent a sapien at dolor feugiat volutpat.</p>
<p>Lorem ipsum dolor sit amet, <a href="#">consectetuer adipiscing elit</a>. Pellentesque hendrerit tellus mollis dolor. Cras urna. Sed tellus.</p>
</div><!--// end #columnOne //-->


<div id="columnTwo">
<div id="columnTwoIn">

<h1>column 2</h1>
<p>Lorem ipsum dolor sit amet, <strong>consectetuer adipiscing elit</strong>. Pellentesque hendrerit tellus mollis dolor. Cras urna. Sed tellus. Aenean in nisi nec dui pretium bibendum. Praesent a sapien at dolor feugiat volutpat.</p>
</div>
<div id="columnTwoIn2">
<h1>column 2</h1>
<p>Lorem ipsum dolor sit amet, <strong>consectetuer adipiscing elit</strong>. Pellentesque hendrerit tellus mollis dolor. Cras urna. Sed tellus. Aenean in nisi nec dui pretium bibendum. Praesent a sapien at dolor feugiat volutpat.</p>
<h4>heading h4</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque hendrerit tellus mollis dolor. Cras urna. Sed tellus. Aenean in nisi nec dui pretium bibendum. Praesent a sapien at dolor feugiat volutpat.</p>

<ul>
<li>Bullet List Item</li>
<li>Bullet List Item</li>
<li>Bullet List Item
    <ul>
    <li>Bullet List Item</li>
    <li>Bullet List Item</li>
    </ul>
</li>
</ul>
</div>
<div id="columnTwoIn3">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque hendrerit tellus mollis dolor. Cras urna. Sed tellus. Aenean in nisi nec dui pretium bibendum. Praesent a sapien at dolor feugiat volutpat.</p>

<h2>heading h2</h2>
<p>Lorem ipsum dolor sit amet, <em>consectetuer adipiscing elit</em>. Pellentesque hendrerit tellus mollis dolor. Cras urna. Sed tellus. Aenean in nisi nec dui pretium bibendum. Praesent a sapien at dolor feugiat volutpat.</p>

<h3>heading h3</h3>
<p>Lorem ipsum dolor sit amet, <a href="#">consectetuer adipiscing elit</a>. Pellentesque hendrerit tellus mollis dolor. Cras urna. Sed tellus. Aenean in nisi nec dui pretium bibendum. Praesent a sapien at dolor feugiat volutpat.</p>


</div><!--// end #columnTwo //-->
</div>
<div id="columnThree">
<h2>column 3</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

<ul>
<li>Bullet List Item</li>
<li>Bullet List Item</li>
<li>Bullet List Item
    <ul>
    <li>Bullet List Item</li>
    <li>Bullet List Item</li>
    </ul>
</li>
</ul>
<ol>
<li>Numbered List Item</li>
<li>Numbered List Item</li>
<li>Numbered List Item
    <ol>
    <li>Numbered List Item</li>
    <li>Numbered List Item</li>
    </ol>
</li>
</ol>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

<ul>
<li>Bullet List Item</li>
<li>Bullet List Item</li>
<li>Bullet List Item
    <ul>
    <li>Bullet List Item</li>
    <li>Bullet List Item</li>
    </ul>
</li>
</ul>
<ol>
<li>Numbered List Item</li>
<li>Numbered List Item</li>
<li>Numbered List Item
    <ol>
    <li>Numbered List Item</li>
    <li>Numbered List Item</li>
    </ol>
</li>
</ol>
<p>Lorem ipsum dolor sit amet, <a href="#">consectetuer adipiscing elit</a>. Pellentesque hendrerit tellus mollis dolor. Cras urna. Sed tellus. Aenean in nisi nec dui pretium bibendum. Praesent a sapien at dolor feugiat volutpat.</p>
</div><!--// end #columnThree //-->

<div id="footer">
<p><a href="#" title="footer link">Copyright</a>&nbsp;|&nbsp;<a href="#" title="footer link">Privacy Policy</a>&nbsp;|&nbsp;<a href="#" title="footer link">Contact Us</a></p>
</div><!--// end #footer //-->

</div><!--// end #mainContainer //-->

</body>
</html>

bars80080

Дата 27.2.2010, 14:54 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315

наше - это удобно, качественно и эффективно.

а вот делать через одно место - это не наше

maxnoskov

Дата 27.2.2010, 16:11 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 112
Регистрация: 21.6.2006
Где: Мурманск

Репутация: нет
Всего: нет

Цитата

наше - это удобно, качественно и эффективно.

а вот делать через одно место - это не наше

Не совсем понял

MaXL

Дата 28.2.2010, 09:14 (ссылка)

(нет голосов)

Загрузка ...

Developer

Профиль
Группа: Участник
Сообщений: 380
Регистрация: 24.10.2005
Где: Владивосток

Репутация: нет
Всего: 2

maxnoskov, У колонок1-4 указано, что может быть плавающая высота.
В средней колонке, т.е. в #columnTwo у вас указан нижний padding. Так вот, если высоты
колонок 1 и 4 будут больше высот колонок 2 и 3(к каждой из которых плюс высоту БЛОКа)
то у вас не будет расстояние между центром этим, и футером.
Решить можно так, #columnOne, #columnTwo и #columnThree взять ещё в один div, и ему прописать padding снизу.
Ну и соотв. у #columnTwo этот padding убрать.
Не забыть после всех этих колонок вставить что-то, что обнулит float'а, например:

Код


<div class="clear"><!-- --></div>

где

Код


.clear { clear: both; width: 100%; }

--------------------

MaXL

maxnoskov

Дата 1.3.2010, 13:22 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 112
Регистрация: 21.6.2006
Где: Мурманск

Репутация: нет
Всего: нет

MaXL, не совсем понял фразу

Цитата

то у вас не будет расстояние между центром этим, и футером.

Буду блогадарен за пояснения или рисунок

HARDMID

Дата 1.3.2010, 17:26 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 47
Регистрация: 10.12.2007

Репутация: нет
Всего: нет

Такое можно сделать тут: http://xhtml.ru/instr/3col_creator/index.html

MaXL

Дата 1.3.2010, 17:29 (ссылка)

(нет голосов)

Загрузка ...

Developer

Профиль
Группа: Участник
Сообщений: 380
Регистрация: 24.10.2005
Где: Владивосток

Репутация: нет
Всего: 2

Ну вот заскринил. Слева -- тот эффект, о котором я говорю.
Надеюсь по рисунку всё станет ясно, и никаких пояснений не нужно будет smile

Присоединённый файл ( Кол-во скачиваний: 9 )

s.JPG 97,60 Kb

--------------------

MaXL

Дата 1.3.2010, 17:38 (ссылка)

(нет голосов)

Загрузка ...

Developer

Профиль
Группа: Участник
Сообщений: 380
Регистрация: 24.10.2005
Где: Владивосток

Репутация: нет
Всего: 2

HARDMID, спасибо за ссылку smile

Попробовал сгенрировать простой трёх колоночный макет. Все колонки он взял в container,
которому прописал след. стили, брррр:

Код


#container {
    position:relative; 
    display:block; 
        background:#ffec97;
    border-left:solid 300px #305C9F;
    border-right:solid 150px #5de797;
}

А вообще ничо так smile

Надо будет взять на заметку ;-)

P.S. хм, думал что новый пост пойдёт добавлением к старому :(
Если кто может, объедините мои два поста.

Это сообщение отредактировал(а) MaXL - 1.3.2010, 17:39

--------------------

MaXL

maxnoskov

Дата 3.3.2010, 10:02 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 112
Регистрация: 21.6.2006
Где: Мурманск

Репутация: нет
Всего: нет

Цитата

Если имеется ввиду расстояние между средними колонками и футером, то мне так и надо, прошу прощения, что не пояснил.

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »