Помогите разобраться с DIV или почему 33%+33%+33%>>>100%

Сообщение сайта

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

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

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

SEO форум MaulTalk.com > Веб-строительство > Программная часть

Помогите разобраться с DIV или почему 33%+33%+33%>>>100%

Опции

Yuri_hb

Topic Starter сообщение

25.10.2010, 13:14; Ответить: Yuri_hb

Сообщение #1

Группа: User
Сообщений: 41
Регистрация: 25.10.2010
Поблагодарили: 0 раз
Репутация:

Добрый день, помогите разобраться начинающему в чем ошибка. Хочу сделать 3 колонки, идущие одна за другой.

вот css:

* {padding:0; margin:0; font-size:100.01%;}
body {min-width: 700px;}
div.header {
border: 2px dotted;
width: 100%;
height: 70px;
padding: 0;
background: blue;
float: left;
}
div.left {
text-align: justify;
border-color: black;
border-style: solid;
border-top-width: 2px;
border-left-width: 2px;
border-right-width: 1px;
border-bottom-width: 2px;
width: 33%;
float: left;
padding-top: 5px;
padding-left: 10px;
padding-right: 10px;
display: inline;
}
div.middle {
text-align: justify;
border-color: black;
border-style: solid;
border-top-width: 2px;
border-left-width: 0px;
border-right-width: 0px;
border-bottom-width: 2px;
width: 33%;
float: left;
padding-top: 5px;
padding-left: 10px;
padding-right: 10px;
display: inline;
}
div.right {
text-align: justify;
border-top-width: 2px;
border-color: black;
border-style: solid;
border-left-width: 1px;
border-right-width: 2px;
border-bottom-width: 2px;
width: 33%;
float: left;
padding-top: 5px;
padding-left: 10px;
padding-right: 10px;
display: inline;
}
p {text-indent:10px;}
p.cen {
text-align: center;
font-style: strong;
font-size: 18px;
}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Разбор оформления с использованием Div</title>
<meta http-equiv="Content-type" content="text/html" charset="windows-1251">
<meta name="keywords" content="тренеруемся">
<meta name="description" content="на данной странице я мучаюсь с CSS">
<link href="/style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="header">верхняя часть под изображение</div>
<div class="left">
<p class="cen">left</p>
<p>Боремся с дизайнерскими фантазиями — ищем простые способы верстки скругленных границ и произвольных многоугольников</p>

<p>Сложность элементов интерфейса увеличивается с каждым новым макетом, что доставляет немало хлопот верстальщикам. Развивающиеся технологии позволяют создавать в WEBе сложные приложения (Google не даст мне соврать), поэтому дизайнеры себя не сдерживают и рисуют всё более навороченные вещи. Как правило, это приводит к большому количеству графики на страницах.</p>

<p>В этой статье приводится пара полезных на взгляд автора рецептов. Возможны вы уже с ними знакомы, а возможно вынесите для себя что-то новое, решать вам.</p>
1. Скругленные границы

Сразу поясню о чем речь:
</div>
<div class="middle">
<p class="cen">middle</p>
<p>Боремся с дизайнерскими фантазиями — ищем простые способы верстки скругленных границ и произвольных многоугольников</p>

<p>Сложность элементов интерфейса увеличивается с каждым новым макетом, что доставляет немало хлопот верстальщикам. Развивающиеся технологии позволяют создавать в WEBе сложные приложения (Google не даст мне соврать), поэтому дизайнеры себя не сдерживают и рисуют всё более навороченные вещи. Как правило, это приводит к большому количеству графики на страницах.</p>

<p>В этой статье приводится пара полезных на взгляд автора рецептов. Возможны вы уже с ними знакомы, а возможно вынесите для себя что-то новое, решать вам.</p>
1. Скругленные границы

Сразу поясню о чем речь:
</div>
<div class="right">
<p class="cen">right</p>
<p>Боремся с дизайнерскими фантазиями — ищем простые способы верстки скругленных границ и произвольных многоугольников</p>

<p>Сложность элементов интерфейса увеличивается с каждым новым макетом, что доставляет немало хлопот верстальщикам. Развивающиеся технологии позволяют создавать в WEBе сложные приложения (Google не даст мне соврать), поэтому дизайнеры себя не сдерживают и рисуют всё более навороченные вещи. Как правило, это приводит к большому количеству графики на страницах.</p>

<p>В этой статье приводится пара полезных на взгляд автора рецептов. Возможны вы уже с ними знакомы, а возможно вынесите для себя что-то новое, решать вам.</p>
1. Скругленные границы

Сразу поясню о чем речь:
</div>
</body>
</html>

И как результат 3я колонка улетает в низ :unsure: если для колонки right поставить float: right; то видно, что колонка явно не 33%. Просьба объяснить что я делаю не так и почему 33%+33%+33% ну никак не хотят влезать в 100% экрана.
Заранне благодарен за советы.

Ответить с цитированием данного сообщения

locky-yotu locky-yotu 25.10.2010, 13:59; Сообщений: 0 Поблагодарили: 0 раз Репутация: 0 Просмотр профиля	25.10.2010, 13:59; Ответить: locky-yotu Сообщение #2
0 Группа: User Сообщений: 0 Регистрация: 13.6.2009 Поблагодарили: 0 раз Репутация: 0	Дело в padding'е. Он также суммируется к ширине. Ну и вот это: border-color: black; border-style: solid; border-top-width: 2px; border-left-width: 2px; border-right-width: 1px; border-bottom-width: 2px; конечно вы жестоко. Надо так: border:2px solid #000; border-width:2px 2px 2px 1px; Зачем писать на 6 строчек то, что можно написать в 2.

Yuri_hb

Topic Starter сообщение

25.10.2010, 15:03; Ответить: Yuri_hb

Сообщение #3

Группа: User
Сообщений: 41
Регистрация: 25.10.2010
Поблагодарили: 0 раз
Репутация:

Про правила сокращений читал и знаю, но пока только начинаю - пишу полностью чтобы запомнить :rolleyes:.

Тогда еще вопрос, т.е. всегда при начальной разметке страницы нужно учитывать все возможные отступы padding, margine? Просто хочу понять логику как оно работает, я например думал что при таких записях браузер сначала делит экран на 3 части, а отступы уже идут от 33%, а оказывается 10рх+33%+10рх+10рх+33%+10рх+10рх+33%+10рх я правильно понимаю? И если так, то как в таких случаях правильно (общепринято) делать разметку, если разрешение мониторов колеблется плюс-минус 50%?

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой

или обратитесь к любому из модераторов.

« Предыдущая тема · Программная часть · Следующая тема »

1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)

Пользователей: 0

Похожие темы

Тема	Ответов	Автор	Просмотров	Последний ответ
Dao.AD: пуши, попсы и не только! ТОП монетизация и арбитраж. \| Акция 100 % отчисления!	90	Daopush	27203	Сегодня, 18:27 автор: Daopush
Создать видеоканал лучше в ютуб или телеграм?	17	uahomka	3204	Сегодня, 11:58 автор: Omaxis
Англоязычный SEO-копирайтинг от $3/100 слов от NeedmyLink \| Первая статья бесплатно	4	Needmylink1	1326	12.4.2024, 23:43 автор: Needmylink1
Incogniton - управляйте множеством браузерных профилей. 100% антидетект!	103	Incogniton	33070	6.4.2024, 20:37 автор: Incogniton
Если статья не в индексе Google - она уникальна или нет?	5	uahomka	1434	3.4.2024, 23:56 автор: Liudmila

Режим отображения: Стандартный · Переключить на: Линейный · Переключить на: Древовидный

Подписка на тему · Сообщить другу · Версия для печати · Подписка на этот форум

Текстовая версия

Сейчас: 19.4.2024, 19:38

Дизайн