помогите, плз, с горизонтальным выравниванием внутри блока @ DeForum.ru

Прошу помощи в решении следующей проблемы.
Есть документ с плавающим позиционированием элементов.
В нем родительский блок main имеет следующие параметры

Код:

#main {
   height: auto;
   width: 1004px;
}

Далее в него заключены контентные блоки с параметрами

Код:

   display: inline-block;
   float: left;
   overflow: hidden;   

и фиксированными размерами.

Проблема в следующем. Ровно посередине есть блок content с параметрами

Код:

#content {
   min-height: 290px;
   width: 1004px;
   display: inline-block;
   float: right;
   overflow: hidden;  
}

В него необходимо вставить абзацы <p>, каждый с заголовком <h2>, причем, заголовки должны бать выровнены по правому краю, т.е. быть прижаты к левому краю абзаца. Каким образом добиться этого? Менять в коде местами абзацы и заголовки и применять к ним float: right неприемлемо, т.к. это нарушает семантику при просмотре с отключенным CSS. Давно бьюсь над решением проблемы, но никак не могу найти решение. Заранее благодарен.

На рисунке изображено схематическое расположение блоков (header на самом деле состоит из 2х идущих подряд блоков header и menu, но здесь это не важно, потому menu я опустил.).

на макете текст и заголовки выглядят так

Отмечу, что абзац <p> должен быть по ширине ровно 706px, т.е. заголовок должен прижиматься к левому краю абзаца...

Саму страницу можно посмотреть здесь

http://makets.lovata.com/superplomba.com/content.html

а главную страницу сайта здесь

http://makets.lovata.com/superplomba.com/

заодно хотелось бы услышать замечания по поводу верстки в целом. Отмечу, что меню пока недоделано. Есть еще проблема ссылка english отображается как мне нужно только при прописанном локальном правиле, при его выносе во внешний файл оно не работает, почему?? И почему при валидации выскакивает ошибка <header>, как я понимаю, валидатор ругается на вложенность, но почему??

4 Сообщения: 143 Зарегистрирован: 20.06.06

а вы кроме IE в каких браузерах свой пример http://makets.lovata.com/superplomba.com/content.html смотрели?

простите, но при верстке я всегда тестирую в Opera 8.5-9.1, IE 6.0. А в FF 1.5.0.6 я собственно постоянно и просматриваю. а к чему этот вопрос?

4 Сообщения: 143 Зарегистрирован: 20.06.06

Zigzag, корежит шапку в мозилле

ну да ладно. Смотрите код. Если я правильно поняла вопрос. С заголовком xhtml сами разбиретесь. Возьмите спецификацию и все получится.

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style>
body {
   margin: 0px;
}
#header, #footer {
   width: 100%;
   height: 100px;
   background-color: #FFD98F;
   text-align: center;
   border: 1px solid #333;
}
#content {
   background-color: #70C8F1;
   border: 1px solid #333;
   margin-top: 5px;
   margin-bottom: 5px;
}
#content h1 {
   background-color: #EF6570;
   width: 30%;
   text-align: right;
   margin-top: 0px;
   float: left;
}
#content p {
   display: block;
   background-color: #00AF8A;
   margin-top: 0px;
   margin-bottom: 0px;
   margin-left: 30%;
}
</style>
</head>
<body>
<div id="header">header</div>
   <div id="content" align="center">
      <h1>заголовок</h1>   
      <p>текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст </p>

   </div>

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

[quote="Кира"]Zigzag, корежит шапку в мозилле
если нетрудно, отпишитесь, плз, какая версия мозиллы, ОС и разрешение и скриншот, если уж совсем нетрудно =)

спасибо, за представленный код, я просто впал в творческий ступор играясь с layout'ами, а т.к. опыта CSS-верстки мало, то вот и застрял, совсем забыв про text-align, однако я уже успел реализовать следующим образом:

Код:

   <div id="content">
      <dl>
         <dt><span id="title">Заголовок</span><span id="img">&nbsp;</span></dt>
         <dd>Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст </dd>
      </dl>
      <dl>
         <dt><span id="title">Большой заголовок</span><span id="img">&nbsp;</span></dt>
         <dd>Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст </dd>
      </dl>      
   </div>

и соответственно применил к нему css, ввел <span> дополнительный т.к. хотел прикрепить картинку вне заголовка, чтобы бордер левый задавал заголовок, а картинка была чисто цветным боксом...
обновленный вариант здесь http://makets.lovata.com/superplomba.com/content.html

я еще с "тянучестью" сайта побалуюсь, только вот если вы мне подскажите, как задать растягиваемость в блоке новостей так, чтобы дата всегда находилась по вертикали ровно по центру новости, буду премного благодарен...

4 Сообщения: 143 Зарегистрирован: 20.06.06

Zigzag писал(а):

<span id="title">Большой заголовок</span>

Если вы применяете дивную верстку для семантического кодирования, то для заголовков лучше h1 … h6 применять :-)

У одной задачи всегда несколько решений. Это правильно, что вы сами ищете.

Блок с новостями я не увидела. Если покажете, то можно подумать.
Если высота блока с датой будет совпадать с высотой блока с текстом, то можно выровнять дату. Наверное нужно решать задачу - как выровнять по высоте два блока которые находятся рядом, и один из них не имеет стабильной высоты. Есть: display: table-cell; vertical-align: middle; line-height: … и другое. Есть готовые статьи по выравниванию текста по вертикали в блоках.

4 Сообщения: 143 Зарегистрирован: 20.06.06

* {
margin: 0; - для Мозиллы вы однозначно сказали: для всех элементов отступы равны нулю, если не указано иного, т.о. и от левого края не отрывать.
padding: 0;
}
#main {
height: auto;
width: 1004px;
}
#menu {
height: 275px;
width: 211px;
display: inline-block;
float: left;
overflow: hidden;
}
#nav {
display: block;
float: left;
width: auto;
margin-top: 30px;
padding: 0;
}

Код:

<!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>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
</head>
<body>
<div id="main">
   <div id="menu">
      <ul id="nav">
         <li><a href="#">ГЛАВНАЯ</a></li>
         <li><a href="#">КОМПАНИЯ</a></li>

         <li><a href="#">ПЛОМБЫ</a></li>
         <li><a href="#">SUPER SCUT</a></li>
         <li><a href="#">GRANDA-N</a></li>
         <li><a href="#">INNERFORCE</a></li>
         <li><a href="#">КАЧЕСТВО</a></li>
         <li><a href="#">КОНТАКТ</a></li>

      </ul>
   </div>

</div>
</body>
</html>

хм, интересная ситуация, я ведь принудительно задал блоку main размеры 1004px, соответственно насколько я понимаю, перенос блока на след строка с overflow:hidden происходит, когда он не помещается в том самом родительском блоке, а не на экране, в чем же тогда загвоздка? :chih:

Цитата:

Если вы применяете дивную верстку для семантического кодирования, то для заголовков лучше h1 … h6 применять Smile

исользовав список определений я не нарушил семантику как таковую, т.к. данные заголовки можно назватьв описываемым в абзаце определением в целом :glasses:

з.ы. вот главная страница с новостями http://makets.lovata.com/superplomba.com/
я в данный момент зная высоту <dd>, указываю идентичный по размеру line-height внутри него, но если выставить auto, то это не работает... :cry:

4 Сообщения: 143 Зарегистрирован: 20.06.06

Zigzag, h1 имеет бОльший вес чем span в определении плотности ключевых слов.
По поводу выравнивания... в своей любимой поисковой системе поищите по ключевым ловам "css вертикальное выравнивание в блоке" . Целая куча статей по этому поводу. Зачем повторяться?

DeДверь
Логин:
Пароль:
	Автологин