CSS вёрстка - HTML и CSS

Daniil94 · 07.03.2012, 16:54

Как сделать что бы это был единый блок. Т.Е. Что бы они не накладывались друг на друга, а как бы сливались.
Z-index не работает

TranceSmile · 07.03.2012, 23:20

Вообще надо было код выложить. Но я думаю нужно убрать border-top; и border-radius; двум верхним углам.

Виталий Желтяков · 08.03.2012, 23:27

Вложить внутренний блок во внешний, z-index не менять.

titan2012 · 09.03.2012, 10:25

Цитата:

Сообщение от TranceSmile

Вообще надо было код выложить. Но я думаю нужно убрать border-top; и border-radius; двум верхним углам.

согласен, надо код

Daniil94 · 11.03.2012, 18:02

PHP код:


			
<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, #search

{

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:5px;

padding:3px;

width:auto;

float:right;

}

#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>

titan2012 · 12.03.2012, 03:02

вот что смог сделать

Код 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>

Daniil94 · 13.03.2012, 14:45

Но почему то блок теперь прозрачный

titan2012 · 13.03.2012, 23:02

Цитата:

Сообщение от Daniil94

Но почему то блок теперь прозрачный

Код 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>

не знаю почему так, но вот попытался исправить и задать ему цвет

JTG · 14.03.2012, 17:38

Можно проще - убрать верхнюю границу, указать в box-shadow ещё одну тень - белую, с радиусом размытия 0 пикселей, сдвинуть её вверх на -5 пикселей.

Код:

#search { 
	margin-top:7px; 
	padding:3px; 
	width:auto; 
	float:right; 
	border-radius:0 0 5px 5px; 
	box-shadow:  0 -5px 0 #FFF, 0 0 5px #969696;    
	border-top: none;
}

http://jsfiddle.net/9R29A/

Daniil94 · 14.03.2012, 17:48

Всё прекрасно работает, осталось только добавить кроссбраузерности, а то в опере всё накось и по бокам обратное скругление. Я думал , по бокам два прозрачных блока сделать, поставить скругление и добавить прозрачности, только боюсь опыта не хватит

07.03.2012, 16:54	#1
Daniil94 Регистрация: 07.03.2012 Сообщений: 8	CSS вёрстка Как сделать что бы это был единый блок. Т.Е. Что бы они не накладывались друг на друга, а как бы сливались. Z-index не работает

07.03.2012, 23:20	#2
TranceSmile Смайлик :) Форумчанин Регистрация: 12.12.2010 Сообщений: 445	Вообще надо было код выложить. Но я думаю нужно убрать border-top; и border-radius; двум верхним углам. Самый перспективный framework Yii (c)

13.03.2012, 14:45	#7
Daniil94 Регистрация: 07.03.2012 Сообщений: 8	спасибо Но почему то блок теперь прозрачный

14.03.2012, 17:48	#10
Daniil94 Регистрация: 07.03.2012 Сообщений: 8	Отличный вариант Всё прекрасно работает, осталось только добавить кроссбраузерности, а то в опере всё накось и по бокам обратное скругление. Я думал , по бокам два прозрачных блока сделать, поставить скругление и добавить прозрачности, только боюсь опыта не хватит

Опции темы	Поиск в этой теме
Версия для печати Отправить по электронной почте	Поиск в этой теме: Расширенный поиск

08.03.2012, 23:27	#3
Виталий Желтяков Старожил Регистрация: 19.04.2010 Сообщений: 2,702	Вложить внутренний блок во внешний, z-index не менять.

11.03.2012, 18:02	#5
Daniil94 Регистрация: 07.03.2012 Сообщений: 8	PHP код: <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, #search { 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:5px; padding:3px; width:auto; float:right; } #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
JTG я получил эту роль Старожил Регистрация: 25.05.2007 Сообщений: 3,694	Можно проще - убрать верхнюю границу, указать в box-shadow ещё одну тень - белую, с радиусом размытия 0 пикселей, сдвинуть её вверх на -5 пикселей. Код: `#search { margin-top:7px; padding:3px; width:auto; float:right; border-radius:0 0 5px 5px; box-shadow: 0 -5px 0 #FFF, 0 0 5px #969696; border-top: none; }` http://jsfiddle.net/9R29A/ пыщь

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Вёрстка	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