X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Блочное верстка
tvidoz
tvidoz
Topic Starter сообщение 18.2.2010, 17:01; Ответить: tvidoz
Сообщение #1


Вот такой вот ламерский вопросик : :rolleyes:

Как сделать в div вот такую вот штуку как на картинке посередине...?
Т.е. чтобы 3 блока шли в подряд.

Поиск юзал, подходящего ничего не нашел по бл.верстке
И если кто знает какой-нибудь нормально-понятный учебник по Div-верстке, поделитесь PLZ :)
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Lark_hb
Lark_hb
сообщение 18.2.2010, 18:27; Ответить: Lark_hb
Сообщение #2


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Трехколоночный макет страницы с помощью CSS</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>

<body>

<div id="wrapper">

<div id="header"></div>

<div id="container">

<div id="content">
<div id="text">
<p>Lorem ipsum dolor sit amet consectetuer pede aliquet sed laoreet nulla. Elit et Nam adipiscing Cum et odio congue hendrerit cursus augue. Sapien elit eget morbi Nullam dictumst metus sem Vestibulum dapibus feugiat. Pellentesque Nam et feugiat nibh Vestibulum In ligula Cras est justo. Malesuada sed feugiat risus tincidunt sem nibh Nulla ipsum sed congue. Lorem felis Nullam.</p>
<p>Nibh felis sapien feugiat Nam justo elit elit Suspendisse neque lobortis. Sem lorem congue Vestibulum massa id dolor pede mauris Vestibulum tellus. Dictumst justo at ipsum massa at ac diam vitae nibh interdum. Magnis vitae Nulla convallis consequat ac vitae Fusce dolor pharetra feugiat. Nunc pretium sed nulla pede Ut natoque rutrum eu eu id. Dui suscipit vitae ornare faucibus Praesent dui Donec felis montes eget. </p>
<p>Aliquet egestas tempus nec lorem nisl felis tincidunt Donec Aenean id. Commodo sapien quis libero eleifend ridiculus Praesent a sapien elit lorem. Ac libero facilisi congue id et Aenean Sed justo eget a. Ut dui vel nibh consectetuer eget in nibh Aenean tellus leo. Non nec tempus Praesent eget et semper et Curabitur.</p>
<p>Semper adipiscing mauris justo neque Quisque id dui leo semper rutrum. Tempor pede sem elit Quisque Pellentesque purus quis Phasellus ut purus. Ligula sed lorem malesuada augue nibh est Donec tellus turpis id. Faucibus ac et metus mi laoreet eros est porttitor auctor Vestibulum. Mattis fames commodo wisi vitae Quisque Sed Vivamus senectus ac non. Quis platea.</p>
</div>
</div>

<div id="left">
<p>Lorem ipsum dolor sit amet consectetuer pede aliquet sed laoreet nulla. Elit et Nam adipiscing Cum et odio congue hendrerit cursus augue. Sapien elit eget morbi Nullam dictumst metus sem Vestibulum dapibus feugiat. Pellentesque Nam et feugiat nibh Vestibulum In ligula Cras est justo. Malesuada sed feugiat risus tincidunt sem nibh Nulla ipsum sed congue. Lorem felis Nullam.</p>
</div>

<div id="right">
<p>Lorem ipsum dolor sit amet consectetuer pede aliquet sed laoreet nulla. Elit et Nam adipiscing Cum et odio congue hendrerit cursus augue. Sapien elit eget morbi Nullam dictumst metus sem Vestibulum dapibus feugiat. Pellentesque Nam et feugiat nibh Vestibulum In ligula Cras est justo. Malesuada sed feugiat risus tincidunt sem nibh Nulla ipsum sed congue. Lorem felis Nullam.</p>
</div>

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

<div id="footer"></div>

</div>

</body>
</html>



код CSS:

<style>
* {margin: 0;padding: 0; font: 14px/17px "Trebuchet MS", Tahoma, Arial}
p {padding: 10px;}
#header {height: 100px; background: #DFDFDF; text-align: center;}
#text {background: #D5FFD5;}
#left {background: #FFF2BF;}
#right {background: #BFF2FF;}
#footer {height: 100px; background: #FFCACA;}
.clear {clear: both;}


/* код для разметки 3-х колонок */
#wrapper {
width: 100%;
width: expression((documentElement.clientWidth||document.body.clientWidth)<995?'1000px':'');
min-width: 1000px;
}
#container {width: 100%;}
#content {
width: 100%;
float: left;
}
#text {margin: 0 250px;}
#left {
float: left;
width: 250px;
margin-left: -100%;
}
#right {
float: left;
width: 250px;
margin-left: -250px;
}
</style>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Nitrex
Nitrex
сообщение 18.2.2010, 18:50; Ответить: Nitrex
Сообщение #3


http://depositfiles.com/files/0mxj9c5b2
вот пособие по блочной верстке
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
tvidoz
tvidoz
Topic Starter сообщение 18.2.2010, 19:57; Ответить: tvidoz
Сообщение #4


Спасибо всем :) Разобрался :):evrika:

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыКачественный современный дизайн сайтов, логотипов, печатной продукции. Верстка.
27 zaiko 17572 2.4.2024, 14:00
автор: zaiko
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыВерстка/Натяжка/Оптимизация/Увеличение функционала шаблонов на WP
Разработка на профессиональном уровне
144 Gerga 92127 11.3.2024, 19:59
автор: anchous
Открытая тема (нет новых ответов) Верстка шаблона Битрикс
0 bat 1420 26.9.2023, 6:22
автор: bat
Открытая тема (нет новых ответов) Верстка электронных писем бесплатно
0 Gidemopassan 1529 23.6.2023, 10:12
автор: Gidemopassan
Горячая тема (нет новых ответов) Сайт "под ключ" (дизайн, верстка, CMS)
32 Brans 16538 19.5.2023, 22:01
автор: Brans


 



RSS Текстовая версия Сейчас: 23.4.2024, 13:24
Дизайн