Заголовок сообщения: помогите, плз, с горизонтальным выравниванием внутри блока Добавлено: 25 Август 2006, 16:25:29
Прошу помощи в решении следующей проблемы.
Есть документ с плавающим позиционированием элементов.
В нем родительский блок main имеет следующие параметры
Код:
#main { height: auto; width: 1004px; }
Далее в него заключены контентные блоки с параметрами
В него необходимо вставить абзацы <p>, каждый с заголовком <h2>, причем, заголовки должны бать выровнены по правому краю, т.е. быть прижаты к левому краю абзаца. Каким образом добиться этого? Менять в коде местами абзацы и заголовки и применять к ним float: right неприемлемо, т.к. это нарушает семантику при просмотре с отключенным CSS. Давно бьюсь над решением проблемы, но никак не могу найти решение. Заранее благодарен.
На рисунке изображено схематическое расположение блоков (header на самом деле состоит из 2х идущих подряд блоков header и menu, но здесь это не важно, потому menu я опустил.).
на макете текст и заголовки выглядят так
Отмечу, что абзац <p> должен быть по ширине ровно 706px, т.е. заголовок должен прижиматься к левому краю абзаца...
заодно хотелось бы услышать замечания по поводу верстки в целом. Отмечу, что меню пока недоделано. Есть еще проблема ссылка english отображается как мне нужно только при прописанном локальном правиле, при его выносе во внешний файл оно не работает, почему?? И почему при валидации выскакивает ошибка <header>, как я понимаю, валидатор ругается на вложенность, но почему??
ну да ладно. Смотрите код. Если я правильно поняла вопрос. С заголовком 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>
[quote="Кира"]Zigzag, корежит шапку в мозилле
если нетрудно, отпишитесь, плз, какая версия мозиллы, ОС и разрешение и скриншот, если уж совсем нетрудно =)
спасибо, за представленный код, я просто впал в творческий ступор играясь с layout'ами, а т.к. опыта CSS-верстки мало, то вот и застрял, совсем забыв про text-align, однако я уже успел реализовать следующим образом:
Код:
<div id="content"> <dl> <dt><span id="title">Заголовок</span><span id="img"> </span></dt> <dd>Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст </dd> </dl> <dl> <dt><span id="title">Большой заголовок</span><span id="img"> </span></dt> <dd>Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст </dd> </dl> </div>
и соответственно применил к нему css, ввел <span> дополнительный т.к. хотел прикрепить картинку вне заголовка, чтобы бордер левый задавал заголовок, а картинка была чисто цветным боксом...
обновленный вариант здесь http://makets.lovata.com/superplomba.com/content.html
я еще с "тянучестью" сайта побалуюсь, только вот если вы мне подскажите, как задать растягиваемость в блоке новостей так, чтобы дата всегда находилась по вертикали ровно по центру новости, буду премного благодарен...
Если вы применяете дивную верстку для семантического кодирования, то для заголовков лучше h1 … h6 применять
У одной задачи всегда несколько решений. Это правильно, что вы сами ищете.
Блок с новостями я не увидела. Если покажете, то можно подумать.
Если высота блока с датой будет совпадать с высотой блока с текстом, то можно выровнять дату. Наверное нужно решать задачу - как выровнять по высоте два блока которые находятся рядом, и один из них не имеет стабильной высоты. Есть: display: table-cell; vertical-align: middle; line-height: … и другое. Есть готовые статьи по выравниванию текста по вертикали в блоках.
хм, интересная ситуация, я ведь принудительно задал блоку main размеры 1004px, соответственно насколько я понимаю, перенос блока на след строка с overflow:hidden происходит, когда он не помещается в том самом родительском блоке, а не на экране, в чем же тогда загвоздка?
Цитата:
Если вы применяете дивную верстку для семантического кодирования, то для заголовков лучше h1 … h6 применять Smile
исользовав список определений я не нарушил семантику как таковую, т.к. данные заголовки можно назватьв описываемым в абзаце определением в целом
з.ы. вот главная страница с новостями http://makets.lovata.com/superplomba.com/ я в данный момент зная высоту <dd>, указываю идентичный по размеру line-height внутри него, но если выставить auto, то это не работает...
Zigzag, h1 имеет бОльший вес чем span в определении плотности ключевых слов.
По поводу выравнивания... в своей любимой поисковой системе поищите по ключевым ловам "css вертикальное выравнивание в блоке" . Целая куча статей по этому поводу. Зачем повторяться?
Уровень доступа: Вы не можете начинать темы. Вы не можете отвечать на сообщения. Вы не можете редактировать свои сообщения. Вы не можете удалять свои сообщения. Вы не можете добавлять вложения.