Помогите создать разметку

Главные вкладки

Аватар пользователя mahabhuta mahabhuta 9 марта 2012 в 21:05

Привет! Вот копирую эффект с полосками в шапке, только на всю ширину страницы со http://stezja.kiev.ua
HTML code:

результат можно посмотреть на http://stezun.kiev.ua
Я в СSS слабо понимаю и моя адаптация работает только в mozilla, что подскажете, можно ли добиться желаемого средствами Drupal?

Комментарии

Аватар пользователя mahabhuta mahabhuta 9 марта 2012 в 21:09

вот пропавший html код

    <table width="90%" border="0" cellspacing="0" align="center" cellpadding="0">
            <tr>
                <td colspan="3" style="height: 5;"></td>
            </tr>
            <tr>
                <td style="height: 15px;"></td>
                <td rowspan="3" style="width: 10%; vertical-align: top;"><a href="index.php?_query=Pages./pages/init"><img height="80" width="477" src="img/gm22.gif" border="0"></img></a>
                </td>
                <td style="height: 15px;"></td>
            </tr>
            <tr>
                <td style="height: 29px; width: 40%;background-color: #A50000;"></td>
                <td style="height: 29px; width: 40%;background-color: #A50000;"></td>
            </tr>
            <tr>
                <td style="height: 36px;"></td>
                <td style="height: 36px;"></td>
            </tr>
            </table>
Аватар пользователя brutal brutal 9 марта 2012 в 22:10

Не только от дизайна воротит , но и от содержания .

Тренинги: «Харизма Лидера», «Семейные расстановки», Углехождение, «Воплощение энергии Женщины» .

У меня такие темы обычно вызывают жуткий хохот ))).

Аватар пользователя mahabhuta mahabhuta 9 марта 2012 в 22:28

brutal, логотип в шапке это таблица, первый ряд которой состоит из трёх ячеек: две пустых по краям и с картинкой по центру .
Второй ряд состоит из двух залитых красным цветом ячеек верхний уровень которых начинается над картинкой и из-за этого получается, что картинка как-бы сдвинута вниз и вперёд.
Нижний ряд вообще не понимаю зачем, возможно для выравнивания.
При этом она находится по-центру, размеры обрамляющих красных линий резиновые и адаптируются под разные разрешения и вся эта кухня работает под тремя браузерами: chrome, ff, ie.

Получается так

Аватар пользователя K0r5hun K0r5hun 9 марта 2012 в 22:28

Оставляй так... - косая вёрстка как флаг выглядит Smile

Если всё таки не нравится... попробуй поиграться с отступами margin, padding. И вообще я бы на div'ах делал.

Аватар пользователя K0r5hun K0r5hun 9 марта 2012 в 22:40

Я бы сделал так...
1) Создаётся фоновая картинка - эт вот эта линия... размером высота=высота, ширина = 5px
2) Создаётся див во всю ширину, где эта картинка repeat-x пускается фоном.
3) Ну а в диве выравнивание по центру... и далее свою картинку намбер 2 выводить.

А вообще если с вёрсткой плохо... попробуй просто в ячейки картинки вставить одинаковой высоты.
картинка-линия--картинка_центр--картинка-линия.

Аватар пользователя mahabhuta mahabhuta 9 марта 2012 в 22:59

Как-то типа так

div#a{background:url(red_squre.jpg) repeat-x; width:100%;}
<div id="a"><img src="logo.jpg"></div>
?

а что идея, попробую, благодарю - сейчас делаю тремя div'ами, но видимо сделать так, что бы боковые интеллектуально занимали исключительно оставшееся после логотипа пространство не получится Smile

Аватар пользователя mahabhuta mahabhuta 10 марта 2012 в 0:57

это пытался скопировать приём первого автора Smile

сейчас пробовал
<div class="top-strip"><span id="gm-logo"><?php print $linked_site_logo; ?></span></div>

div.top-strip {
height: 29px;
width: 100%;
background-color: #A50000;
}
span#gm-logo {
padding-right:0;
width :477px;
height: 80px;
}

не влазит span из-за высоты, а если ёё увеличить, то получится, что за картинкой все будет красным залито. Пока, идея с фоновым изображением самая рабочая. Но ёё уже завтра проверю Smile

Аватар пользователя mahabhuta mahabhuta 10 марта 2012 в 22:22

все получилось чудесно, большое спасибо!
ан, нет таки не ясно как побороть IE - div без текста не имеет ширины! Sad

<div id="logo-strip"><?php print $linked_site_logo; ?></div>

div#logo-strip {
height: 80px;
width: 100%;
background: #000020 url("../images/gm22_bg.gif") 100% 100% repeat-x;
text-align:center;
}

div#logo-strip img {
margin-top:3px;
}

Аватар пользователя K0r5hun K0r5hun 11 марта 2012 в 2:53

Лучше сделай на 1 картинке 3 полосы - тёмно-синяя, красная, тёмно-синяя.

Для отладки - советую создать отдельный html-файлик, и в нём редактировать содержимое вот этой шапки.

Насчёт вёрстки в ie не скажу, надо делать, смотреть. Ну а если текст нужен - то можешь невидимый пробел вставить - чем не вариант.
&nbsp;

Аватар пользователя mahabhuta mahabhuta 11 марта 2012 в 18:14

Не, текст не помог,
оказывается проблема с абсолютной шириной width:100%, если задать ёё явно, то блок занимает всю указанную ширину. Вот, без проблем - http://jsfiddle.net/Xt76F/2/

Может попробую какой-нибудь JS хак.