|
|
Регистрация Восстановить пароль |
Регистрация | Задать вопрос |
Заплачу за решение |
Новые сообщения |
Сообщения за день |
Расширенный поиск |
Правила |
Всё прочитано |
|
|
Опции темы | Поиск в этой теме |
07.03.2012, 16:54 | #1 |
Регистрация: 07.03.2012
Сообщений: 8
|
CSS вёрстка
Как сделать что бы это был единый блок. Т.Е. Что бы они не накладывались друг на друга, а как бы сливались. Z-index не работает |
08.03.2012, 23:27 | #3 |
Старожил
Регистрация: 19.04.2010
Сообщений: 2,702
|
Вложить внутренний блок во внешний, z-index не менять.
|
09.03.2012, 10:25 | #4 |
Пользователь
Регистрация: 07.02.2012
Сообщений: 95
|
|
11.03.2012, 18:02 | #5 |
Регистрация: 07.03.2012
Сообщений: 8
|
PHP код:
|
12.03.2012, 03:02 | #6 |
Пользователь
Регистрация: 07.02.2012
Сообщений: 95
|
вот что смог сделать
Код HTML:
<html> <head> <title>Образование</title> <style> body { background-color:white; background-image:url(bg.png); font-family:Times New Roman, Verdana; font-size: 11pt; } #main { margin: 0px auto; width:1000px; height:auto; } .content, #head { margin-bottom:6px; background-color:white; width:100%; height:auto; border: 1px solid #969696; border-radius:5px; -moz-border-radius:5px; -khtml-border-radius:5px; -moz-box-shadow: 0 0 5px #969696; -webkit-box-shadow: 0 0 5px #969696; box-shadow: 0 0 5px #969696; padding:7px; } #head { margin-bottom:40px; } #genmenu { text-align:center; font-weight: bold; /* Жирное начертание */ font-size: 12pt; /* Размер шрифта */ } #search { margin-top:7px; padding:3px; width:auto; float:right; } #search { border-bottom: 1px solid #969696; border-left: 1px solid #969696; border-right: 1px solid #969696; border-radius:5px; -moz-border-radius:0 0 5px 5px; -khtml-border-bottom-radius:0 0 5px 5px; -moz-box-shadow: 3px 3px 3px #969696; -webkit-box-shadow: 0 0 5px #969696; box-shadow-bottom: 0 0 5px #969696; padding:7px; } #footer { background-color:transparent; margin-bottom:6px; width:100%; height:auto; padding:7px; } </style> </head> <body> <div id="main"> <div id="head"> <div id="genmenu"> <a href="index.html">Главная</a> <a href="/forum">Форум</a> </div> <div id="search"><input type="text" name="search"><input type="submit" value="Найти"></div> </div> <div class="content"> <h1>Главная</h1> Пьер все так же ездил в общество, так же много пил и вел ту же.... </div> <div id="footer">123456</div> </div> </body> </html> |
13.03.2012, 14:45 | #7 |
Регистрация: 07.03.2012
Сообщений: 8
|
спасибо
Но почему то блок теперь прозрачный
|
13.03.2012, 23:02 | #8 |
Пользователь
Регистрация: 07.02.2012
Сообщений: 95
|
Код HTML:
<html> <head> <title>Образование</title> <style> body { background-color:#000; background-image:url(bg.png); font-family:Times New Roman, Verdana; font-size: 11pt; } #main { margin: 0px auto; width:1000px; height:auto; } .content, #head { margin-bottom:6px; background-color:white; width:100%; height:auto; border: 1px solid #969696; border-radius:5px; -moz-border-radius:5px; -khtml-border-radius:5px; -moz-box-shadow: 0 0 5px #969696; -webkit-box-shadow: 0 0 5px #969696; box-shadow: 0 0 5px #969696; padding:7px; } #head { margin-bottom:40px; } #genmenu { text-align:center; font-weight: bold; /* Жирное начертание */ font-size: 12pt; /* Размер шрифта */ } #search { margin-top:7px; padding:3px; width:auto; float:right; } #search {background-color:#fff; border-bottom: 1px solid #969696; border-left: 1px solid #969696; border-right: 1px solid #969696; border-radius:5px; -moz-border-radius:0 0 5px 5px; -khtml-border-bottom-radius:0 0 5px 5px; -moz-box-shadow: 3px 3px 3px #969696; -webkit-box-shadow: 0 0 5px #969696; box-shadow-bottom: 0 0 5px #969696; padding:7px; } #footer { background-color:transparent; margin-bottom:6px; width:100%; height:auto; padding:7px; } </style> </head> <body> <div id="main"> <div id="head"> <div id="genmenu"> <a href="index.html">Главная</a> <a href="/forum">Форум</a> </div> <div id="search"><input type="text" name="search"><input type="submit" value="Найти"></div> </div> <div class="content"> <h1>Главная</h1> Пьер все так же ездил в общество, так же много пил и вел ту же.... </div> <div id="footer">123456</div> </div> </body> </html> |
14.03.2012, 17:38 | #9 |
я получил эту роль
Старожил
Регистрация: 25.05.2007
Сообщений: 3,694
|
Можно проще - убрать верхнюю границу, указать в box-shadow ещё одну тень - белую, с радиусом размытия 0 пикселей, сдвинуть её вверх на -5 пикселей.
Код:
пыщь
|
14.03.2012, 17:48 | #10 |
Регистрация: 07.03.2012
Сообщений: 8
|
Отличный вариант
Всё прекрасно работает, осталось только добавить кроссбраузерности, а то в опере всё накось и по бокам обратное скругление. Я думал , по бокам два прозрачных блока сделать, поставить скругление и добавить прозрачности, только боюсь опыта не хватит
|
|
Похожие темы | ||||
Тема | Автор | Раздел | Ответов | Последнее сообщение |
Вёрстка | mar4elo | HTML и CSS | 2 | 06.05.2011 00:01 |
Правильная вёрстка | STIGMATED | HTML и CSS | 0 | 17.09.2010 21:45 |
CSS вёрстка, вставка Google map поверх изображения, фона! | sting | HTML и CSS | 0 | 09.02.2010 22:27 |
Вёрстка | psywalker | HTML и CSS | 2 | 18.06.2008 15:01 |