VPF::выстраивание div -ов в нужном порядке

Курсант

Дата 18.11.2010, 04:42 (ссылка)

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

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 338
Регистрация: 21.2.2009
Где: Балашиха или Воро неж

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

Написал такую вот страничку

Код


   <html>

<head>

<link rel="stylesheet" title="default" href="style.css" type="text/css">

</head>

<body>

<div class="page">

<div class="horBar">

<div class="leftcustomBar">
<b><p>Иван Иванович</p><p>Иванов</p></b>
</div>

<div class="rightBar">
<img src="up.png">
</div>
</div>


<div class="horBar">
<div class="leftBar">
<img src="favicon.ico">
</div>
<div class="rightcustomBar">
<a href="http://www.mobilelib.ru/index.php"><p>какая-то бестолковая</p><p>мобильная библиотека</p></a>
</div>
</div>

</div>

</body>

</html>

Элементам назначил следующие стили

Код


   /* устанавливаем по умолчанию все рамки, отступы и поля в нуль, чтобы не мешались*/
* {
   padding : 0;
   margin : 0;
   border : 0;
}

/* правила для всего документа - ничего особенного, кроме серого фона*/
body {
   background-color : #888888;
   font-family : Microsoft Sans Serif;
   font-size : medium;
}

/*это типа белый лист бумаги на сером фоне, почему-то в IE не работает max-width...*/ 
.page {
   background-color : #FFFFFF;
   margin : auto;
   max-width : 800;
   height : 300;
   align : center;
}

/*это горизонтальная панель, в ней будут две подпанели - левая и правая*/ 
.horBar { 
   line-height : 100 %;
   clear : none;
}

/*левая подпанель в составе горизонтальной панели*/
.leftcustomBar {
   background-color : #AAFFAA;
   text-align = center;
   float : left;
}

/* правая подпанель в составе горизонтальной панели*/
.rightBar {
   
   background-color : #AAFFFF;
   float : left;
   width : 32;
}

/*левая подпанель в составе горизонтальной панели для другого случая*/
.leftBar {
   background-color : #AAFFAA;
   float : left;
   width : 32;
}

/*правая подпанель в составе горизонтальной панели для другого случая*/
.rightcustomBar {
   background-color : #AAFFFF;
   float : left;
}

И в итоге получилась какая-то жуть... А именно такая:

Сверстанная страница

Хотелось бы узнать, как получить примерно такой вариант рисунок с желаемым результатом

Спасибо за внимание...

Это сообщение отредактировал(а) Курсант - 18.11.2010, 04:43

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

Мобильная библиотека - онлайн книги для мобильного

Rayled

Дата 18.11.2010, 07:05 (ссылка)

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

Загрузка ...

Шустрый

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

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

Курсант, да все у вас в общем-то работает. Просто ошибок много в CSS. Например:
Написано max-width : 800;, а надо max-width : 800px; или max-width : 800ex;. В общем единицы измерения надо проставлять
align : center; - нет такого свойства в CSS.
text-align = center; - это не CSS, а уже HTML какой-то.
line-height : 100 %;, а надо line-height : 100%;, без пробела.

В HTML тоже есть ошибки, если Доктайп будет Strict. Например элемент <b> не может содержать блоки, типа параграфов.
В общем пользуйтесь валидаторами: http://validator.w3.org/ - HTML, http://jigsaw.w3.org/css-validator/ - CSS.

ps И Доктайп какой-нибудь лучше сразу указывать, чтобы более предсказуемое поведение верстки было.

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