9 марта 2012 в 21:05
Привет! Вот копирую эффект с полосками в шапке, только на всю ширину страницы со http://stezja.kiev.ua
HTML code:
|
||
результат можно посмотреть на http://stezun.kiev.ua
Я в СSS слабо понимаю и моя адаптация работает только в mozilla, что подскажете, можно ли добиться желаемого средствами Drupal?
Комментарии
вот пропавший html код
<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>
Какой эффект ?
С какими полосками ?
От 1 сайта глаза устают практически сразу.. текст очень мелкий.
Не только от дизайна воротит , но и от содержания .
Тренинги: «Харизма Лидера», «Семейные расстановки», Углехождение, «Воплощение энергии Женщины» .
У меня такие темы обычно вызывают жуткий хохот ))).
brutal, логотип в шапке это таблица, первый ряд которой состоит из трёх ячеек: две пустых по краям и с картинкой по центру
.
Второй ряд состоит из двух залитых красным цветом ячеек верхний уровень которых начинается над картинкой и из-за этого получается, что картинка как-бы сдвинута вниз и вперёд.
Нижний ряд вообще не понимаю зачем, возможно для выравнивания.
При этом она находится по-центру, размеры обрамляющих красных линий резиновые и адаптируются под разные разрешения и вся эта кухня работает под тремя браузерами: chrome, ff, ie.
Получается так
Вопрос не понятен! Мне казалось CSS самое простое что может быть)))
Оставляй так... - косая вёрстка как флаг выглядит
Если всё таки не нравится... попробуй поиграться с отступами margin, padding. И вообще я бы на div'ах делал.
сейчас попробую ещё раз, прошлый раз что-то с div'ами не сложилось.
Я бы сделал так...
1) Создаётся фоновая картинка - эт вот эта линия... размером высота=высота, ширина = 5px
2) Создаётся див во всю ширину, где эта картинка repeat-x пускается фоном.
3) Ну а в диве выравнивание по центру... и далее свою картинку намбер 2 выводить.
А вообще если с вёрсткой плохо... попробуй просто в ячейки картинки вставить одинаковой высоты.
картинка-линия--картинка_центр--картинка-линия.
Как-то типа так
div#a{background:url(red_squre.jpg) repeat-x; width:100%;}
<div id="a"><img src="logo.jpg"></div>?
а что идея, попробую, благодарю - сейчас делаю тремя div'ами, но видимо сделать так, что бы боковые интеллектуально занимали исключительно оставшееся после логотипа пространство не получится
А ты сайт для себя делаешь или за денежку?
да какое за деньги, так, балуюсь
почему ты по бокам то 2 дива используешь?
<div id='osnovnoi'><div id='centr-kartinka-poverh'></div></div>это пытался скопировать приём первого автора
сейчас пробовал
<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 из-за высоты, а если ёё увеличить, то получится, что за картинкой все будет красным залито. Пока, идея с фоновым изображением самая рабочая. Но ёё уже завтра проверю
все получилось чудесно, большое спасибо!ан, нет таки не ясно как побороть IE - 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;
}
Лучше сделай на 1 картинке 3 полосы - тёмно-синяя, красная, тёмно-синяя.
Для отладки - советую создать отдельный html-файлик, и в нём редактировать содержимое вот этой шапки.
Насчёт вёрстки в ie не скажу, надо делать, смотреть. Ну а если текст нужен - то можешь невидимый пробел вставить - чем не вариант.
Не, текст не помог,
оказывается проблема с абсолютной шириной width:100%, если задать ёё явно, то блок занимает всю указанную ширину. Вот, без проблем - http://jsfiddle.net/Xt76F/2/
Может попробую какой-нибудь JS хак.
<head></head>
<body>
<div style="background-color:#ff0000;width:100%; height:50px; text-align:center; padding:0px; margin:0px;">
<div>111</div>
</div>
</body>
</html>
Создал простой пример. Проверь его и дальше модернизируй под свои нужды.
Спасибо, все сработал! Отдельное спасибо K0r5hun
Перехожу к созданию меню))