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



 

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

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

Открыть тему
Тема закрыта
> Блочная верстка с границами
Corvin
Corvin
Topic Starter сообщение 29.11.2009, 16:02; Ответить: Corvin
Сообщение #1


Всем доброго!

Верстаю страницу, на которой информация располагается в прямоугольных блоках одинакового размера, вроде такого:

[IMG]http://www.picamatic.com/show/2009/11/29/03/23/6117919_bigthumb.jpg[/IMG]

Блоки должны занимать все отведенное им место, в том числе и при изменении размера страницы пользователем. Это легко достигается при помощи установки float:left у блоков (которые есть дивы с фиксированным размером). Но есть у меня 2 проблемы.

1. Как видно на картинке, крайние границы должны отсутствовать. Т.е. должен отсутствовать левый бордер у всех блоков, которые слева, правый - у всех, которые справа, верхний у всех, которые сверху и т.п.

Вариант установки border-left и border-bottom для блоков приводит к тому, что справа и сверху все выглядит как надо, а снизу и слева - есть границы. Что можно сделать, чтобы их не было?

2. Как можно расположить блок фиксированного размера в фиксированном месте (или в центре) страницы так, чтобы остальные блоки естественным образом располагались вокруг него?

Спасибо.
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
alexdrob
alexdrob
сообщение 29.11.2009, 16:17; Ответить: alexdrob
Сообщение #2


(Corvin @ 29.11.2009, 18:02) *
. Как видно на картинке, крайние границы должны отсутствовать.


ну вот чтото подобное
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
</head>
<style>

#cont{
position:relative;
overflow:hidden;
}
.block{
width:100px;
height:100px;
background-color:#ffffcc;
border-left: 1px solid black;
border-top: 1px solid black;
float:left;
margin:-1px;
}

</style>
<body>

<div id="cont">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>

</body>
</html>


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


Свернуть

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

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


 



RSS Текстовая версия Сейчас: 24.4.2024, 3:15
Дизайн