header резиновый.

розмарин · December 28, 2007

В общем, мне нужна шапка такого типа и что бы все это чудо еще и растягивалось, с помощью таблиц я смогу ее сделать, но как осуществить это с помощью CSS? И возможно ли вообще это воплотить в реальность?

Помогите, пожалуйста... я уже замучалась...

Dimitry Wolotko · December 28, 2007

Таблицы с CSS или DIVы с CSS.

Чисто на CSS у вас не получится =))

Scrum · December 28, 2007

есть какие то наброски ?

розмарин · December 28, 2007

Scrum

Вот, тот кошмар, который у меня получается... я уже просто не знаю, что с этим делать (.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>шапка</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style type="text/css">
body {
	margin: 0px;
	padding: 0px;
	background-color: #532900;
}
.h {
	background-color: #f1d9b2;
	border: 5px solid #532900;
	padding: 5px;
	margin: 0px;
}
.hh {
	border: 5px solid #532900;
	background-color: #f1d9b2;
	margin: 0px;
	padding: 0px;
	height: 172px;
	background-image: url(images1.jpg);
	background-repeat: no-repeat;
	background-position: 100% 100%;
}
.b {
	background-image: url(images2.jpg);
	background-repeat: no-repeat;
	display: block;
	height: 172px;
	width: 162px;
	margin: 0px;
	padding: 0px;
	background-position: left top;
	float: left;
	overflow: hidden;
	position: static;
}
.bp {
	background-image: url(images3.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	display: block;
	height: 89px;
	width: 441px;
	float: left;
	clear: right;
	margin: 0px;
	padding: 0px;
}

.b2 {
	background-image: url(images4.jpg);
	height: 83px;
	width: 114px;
	padding: 0px;
	display: block;
	background-repeat: no-repeat;
	position: absolute;
	top: 104px;
	left: 177px;
}
.telephone {
	position:absolute;
	left:617px;
	top:104px;
	width:200px;
	height:83px;
	background-image: url(images5.png);
}
.adres {
	position: absolute;
	left: 292px;
	top: 104px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: medium;
	font-style: normal;
	color: #532900;
	text-align: center;
	font-weight: bold;
	height: 83px;
	vertical-align: text-bottom;
}
</style>

</head>


<body>

<div class="h">
<div class="hh">
 <div class="b"> </div>
 <div class="bp"> </div>
 <div class="b2"> </div>
 <div class="telephone"> </div>
 <div class="adres"> здесь находиться текст </div>
</div>
</div>
</div>
</body>
</html>

Scrum · December 29, 2007

стучи пож в асю, если не срочно то стучи после нг,а если срочно то стучи как стукнуться.

розмарин · December 29, 2007

Scrum

Аська: 26 26 10 394

розмарин · January 3, 2008

Не хотелось создавать тему, для такого пустякового вопроса, по этому решила написать здесь.

Может быть, кто-нибудь знает, как сделать так, что бы пользователь, просматривающий веб-страницу не смог сжимать размер окна браузера до какого-то определенного предела??? И возможно ли это вообще, а то я тут уже размечталась...

розмарин · January 4, 2008

Пожалуйста, только не игнорируйте мой вопрос. Мне очень нужна ваша помощь, может быть вам кажется, что все это смешно и решается элементарно, но я новичек в этом деле и не могу найти решения. Вот, изменила код, убрала ошибки, которые смогла найти, в IE 6, страница отображается именно так, как мне нужно, но в Opera и Mozilla Firefox все выглядит просто ужасно. Как это можно исправить? Где ошибка????? Пожалуйста, помогите.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>шапка</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style type="text/css">
body {
	margin: 0px;
	background-color: #532900;
}
.h {
	background-color: #f1d9b2;
	border: 5px solid #532900;
	padding: 5px;

}
.hh {
	border: 5px solid #532900;
	background-color: #f1d9b2;
	height: 172px;
	background-image: url(images/bambuk3.jpg);
	background-repeat: no-repeat;
	background-position: right;
}
.b {
	background-image: url(images/bambuk1.jpg);
	height: 172px;
	width: 162px;
	float: left;
}
.bp {
	background-image: url(images/bptour.jpg);
	height: 89px;
	width: 441px;
	margin-left: 162px;
}

.b2 {
	background-image: url(images/bambuk2.jpg);
	height: 83px;
	width: 114px;
	margin-left: 162px;
}
.telephone {
	position:absolute;
	left:617px;
	top:104px;
	width:200px;
	height:83px;
	background-image: url(images/telephone.png);
}
.adres {
	position: absolute;
	left: 292px;
	top: 104px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #532900;
	text-align: center;
	font-weight: bold;
	height: 83px;
}
.carrier {
	width: 889px;
	height: 172px;
}
</style>
</head>

<body>
 <div class="h">
 <div class="hh">
 <div class="carrier">
  <div class="b"> </div>
  <div class="bp"> </div>
  <div class="b2"> </div>
  <div class="adres"> здесь находиться текст </div>
  <div class="telephone"> </div>
 </div>
 </div>
 </div>
</body>
</html>

розмарин · January 4, 2008

Аа, спасибо огромное этому сайту!!! Я все-таки нашла решение!!!!

С помощью свойства min-width!!!!! :)

Sign In

header резиновый.

Question

розмарин

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

Dimitry Wolotko

Link to comment

Share on other sites

Scrum

Link to comment

Share on other sites

розмарин

Link to comment

Share on other sites

Scrum

Link to comment

Share on other sites

розмарин

Link to comment

Share on other sites

розмарин

Link to comment

Share on other sites

розмарин

Link to comment

Share on other sites

розмарин

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information