Помогите прописать правильный стиль

Izrael · 13 Ноя 2009

Привет есть проблема одна, есть шапка для сайта я прописал д лня нее стиль такой

Код:

#header {
height: 172px;
width:100%;

background: #1b3374 url(images/header.png) top left repeat-x ;
position: relative;
}

как сделать что когда открываешь на большом мониторе, чтоб она растягивалась??

Eihwaz · 13 Ноя 2009

Верстку тоже покажите, так нельзя разобраться - может, у вас #header в какой-нибудь родительский див засунут, у которого ширина фиксированная или что-то в этом духе.
P.S.: Position: relative уберите, пускай будет значение по умолчанию: static.
Вообще, я бы делал так, примерно (но не видя верстку это писями по воде виляно

HTML:

#header {
    float: left;
    height: 172px;
    width: 100%;
    background: #1b3374 url(images/header.png) top left repeat-x;
}

Гладио · 13 Ноя 2009

действительно, по одному стилю сложно понять в чем суть проблемы, нужно смотреть на html еще)

Izrael · 13 Ноя 2009

вот index.html

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="stuHover.js" type="text/javascript"></script>
{%HEAD%}
</head>
<script language="JavaScript" type="text/javascript">
<!--
function bookmark() {
	if (window.sidebar) {
		window.sidebar.addPanel("$sitename", "$homeurl","");
	} else if (document.all) {
		window.external.AddFavorite("$homeurl", "$sitename");
	}
}
// -->
</script>
<body id="page_bg">
<table id="wrapper" border="0" cellpadding="0" cellspacing="0">
  <tr valign="top">
    <td>
      <div id="header">
      </div>      <span class="preload1"></span>
<span class="preload2"></span>
<ul id="nav">
	<li class="top"><a href="#nogo1" class="top_link"><span>Home</span></a></li>
	<li class="top"><a href="#nogo2" id="products" class="top_link"><span class="down">Products</span></a>
		<ul class="sub">
			<li><a href="#nogo3" class="fly">Cameras</a>
					<ul>
						<li><a href="#nogo4">Nikon</a></li>
						<li><a href="#nogo5">Minolta</a></li>
						<li><a href="#nogo6">Pentax</a></li>
					</ul>
			</li>
			<li class="mid"><a href="#nogo7" class="fly">Lenses</a>
					<ul>
						<li><a href="#nogo8">Wide Angle</a></li>
						<li><a href="#nogo9">Standard</a></li>
						<li><a href="#nogo10">Telephoto</a></li>
						<li><a href="#nogo11" class="fly">Zoom</a>
							<ul>
								<li><a href="#nogo12">35mm to 125mm</a></li>
								<li><a href="#nogo13">50mm to 250mm</a></li>
								<li><a href="#nogo14">125mm to 500mm</a></li>
							</ul>
						</li>
						<li><a href="#nogo15">Mirror</a></li>
						<li><a href="#nogo16" class="fly">Non standard</a>
							<ul>
								<li><a href="#nogo17">Bayonet mount</a></li>
								<li><a href="#nogo18">Screw mount</a></li>
							</ul>
						</li>
					</ul>
			</li>
			<li><a href="#nogo19">Flash Guns</a></li>
			<li><a href="#nogo20">Tripods</a></li>
			<li><a href="#nogo21">Filters</a></li>
		</ul>
	</li>
	<li class="top"><a href="#nogo22" id="services" class="top_link"><span class="down">Services</span></a>
		<ul class="sub">
			<li><a href="#nogo23">Printing</a></li>
			<li><a href="#nogo24">Photo Framing</a></li>
			<li><a href="#nogo25">Retouching</a></li>
			<li><a href="#nogo26">Archiving</a></li>
		</ul>
	</li>
	<li class="top"><a href="#nogo27" id="contacts" class="top_link"><span class="down">Contacts</span></a>
		<ul class="sub">
			<li><a href="#nogo28">Support</a></li>
			<li><a href="#nogo29" class="fly">Sales</a>
				<ul>
					<li><a href="#nogo30">USA</a></li>
					<li><a href="#nogo31">Canadian</a></li>
					<li><a href="#nogo32">South American</a></li>
					<li><a href="#nogo33" class="fly">European</a>
						<ul>
							<li><a href="#nogo34" class="fly">British</a>
								<ul>
									<li><a href="#nogo35">London</a></li>
									<li><a href="#nogo36">Liverpool</a></li>
									<li><a href="#nogo37">Glasgow</a></li>
									<li><a href="#nogo38" class="fly">Bristol</a>
										<ul>
											<li><a href="#nogo39">Redland</a></li>
											<li><a href="#nogo40">Hanham</a></li>
											<li><a href="#nogo41">Eastville</a></li>
										</ul>
									</li>
									<li><a href="#nogo42">Cardiff</a></li>
									<li><a href="#nogo43">Belfast</a></li>
								</ul>
							</li>
							<li><a href="#nogo44">French</a></li>
							<li><a href="#nogo45">German</a></li>
							<li><a href="#nogo46">Spanish</a></li>
						</ul>
					</li>
					<li><a href="#nogo47">Australian</a></li>
					<li><a href="#nogo48">Asian</a></li>
				</ul>
			</li>
			<li><a href="#nogo49">Buying</a></li>
			<li><a href="#nogo50">Photographers</a></li>
			<li><a href="#nogo51">Stockist</a></li>
			<li><a href="#nogo52">General</a></li>
		</ul>
	</li>
	<li class="top"><a href="#nogo53" id="shop" class="top_link"><span class="down">Shop</span></a>
		<ul class="sub">
			<li><a href="#nogo54">Online</a></li>
			<li><a href="#nogo55">Catalogue</a></li>
			<li><a href="#nogo56">Mail Order</a></li>
		</ul>
	</li>
	<li class="top"><a href="#nogo57" id="privacy" class="top_link"><span>Privacy Policy</span></a></li>
</ul>
      <table border="0" width="100%" cellpadding="0" cellspacing="3">
        <tr valign="top">
          <td>{%BLOCKS left%}</td>
		  <td width="100%">
            {%BLOCKS message%}
		    {%BLOCKS center%}
		    {%MODULE%}
		    {%BLOCKS down%}
          </td>
          <td>{%BLOCKS right%}</td>
		</tr>
      </table>
    </td>
  </tr>
</table>
<table id="wrapper" border="0" cellpadding="0" cellspacing="0">
  <tr valign="top">
    <td><div id="footer">
        <div id="copyright"></div>
        <div id="footblock">{%BLOCKS foot%}</div>
      </div>
    </td>
  </tr>
</table>
{%BLOCKS variables%}
{%BLOCKS query%}
<div id="pix"></div>
</body>
</html>

а вот сам style

HTML:

a:link			{ color: #4d6a8b; font-family: Verdana, Tahoma, Helvetica, sans-serif; text-decoration: none; }
a:active		{ color: #4d6a8b; font-family: Verdana, Tahoma, Helvetica, sans-serif; text-decoration: none; }
a:visited		{ color: #4d6a8b; font-family: Verdana, Tahoma, Helvetica, sans-serif; text-decoration: none; }
a:hover			{ color: #c10000; font-family: Verdana, Tahoma, Helvetica, sans-serif; text-decoration: none; }
.bgcolor1		{ background: #FFF; }
.bgcolor1 table td form textarea { width: 200px !important; }
.bgcolor2		{ background: #FAFAFA; }
.bgcolor3		{ background: #F5F5F5; }
.bgcolor4		{ background: #EEE; }
.sort			{ background: #EEE; }
.bodyline		{ background: #FFF; border: 1px #ebebeb solid; }
.blockline		{ background: #FFF; border: 1px #ebebeb solid; border-top: none; }
.storytitle		{ background: none; color: #4d6a8b; font-size: 11px; font-family: Verdana, Tahoma, Helvetica, sans-serif; }
.titleline		{ border: 1px #FFF solid; }
.boxtitle		{ font-family: Verdana, Tahoma, Helvetica, sans-serif; font-size: 11px; color: #c10000; font-weight: bold; }
.content		{ background: none; color: #000000; font-size: 11px; font-family: Verdana, Tahoma, Helvetica, sans-serif; }
.block-title	{ background: none; color: #2b3360; font-size: 9px; font-weight: bold; font-family: Verdana, Tahoma, Helvetica, sans-serif; }
.storycat		{ background: none; color: #c10000; font-size: 11px; font-weight: bold; font-family: Verdana, Tahoma, Helvetica, sans-serif;}
.option 		{ font-family: Verdana, Tahoma, Helvetica, sans-serif; font-size: 11px; color: #c10000; font-weight: bold; }
.tiny			{ color: #000; font-size: 11px; font-weight: normal; font-family: Verdana, Tahoma, Helvetica, sans-serif;}
.small			{ color: #787878; font-size: 10px; font-weight: normal; font-family: Verdana, Tahoma, Helvetica, sans-serif;}
.code			{ color: #00B; font-size: 11px; font-family: Verdana, Tahoma, Helvetica, sans-serif; }
h1				{ margin: 0; text-align: left; color: #979797; font-size: 18px;font-weight: normal; font-family: Verdana, Tahoma, Helvetica, sans-serif; display: block; background: transparent url(images/title.png) top left repeat-y; padding: 8px; padding-left: 50px; }
h2				{ color: #c10000; font-size: 9px; font-weight: bold; font-family: Verdana, Tahoma, Helvetica, sans-serif; text-transform: uppercase; }
h3				{ color: #134dc1; font-size: 11px; font-weight: bold; font-family: Verdana, Tahoma, Helvetica, sans-serif; margin: 0; }
h4				{ font-size: 10px; font-weight: bold; font-family: Verdana, Tahoma, Helvetica, sans-serif; margin: 0; text-align: center;}
h5				{ font-size: 11px; font-weight: normal; font-family: Verdana, Tahoma, Helvetica, sans-serif; margin: 0; }
legend			{ font-family: Verdana, Tahoma, Helvetica, sans-serif; font-size: 11px; color:#F50; font-weight: bold; }
fieldset		{ border: solid #F5F5F5 1px; }
font, td, p		{ color: #666; font-size: 11px; font-family: Verdana, Tahoma, Helvetica, sans-serif; }
hr				{ height: 0px; border: 0px solid #ebebeb; border-top-width: 1px; }
code			{ background: none; color: #0000FF; font-size: 11px; font-family: Verdana, Tahoma, Helvetica, sans-serif; }
th {
	color: #2b3360;
	height: 25px;
	font-size: 9px;
	font-weight: bold;
	font-family: Verdana, Tahoma, Helvetica, sans-serif;
	background: #eee url(images/cellpic.gif) repeat-x;
	border: 1px #FFF solid;
	text-transform: uppercase;
}
body {
	margin: 0;
	padding: 0;
	line-height: 125%;
	font-family: Verdana, Tahoma, Helvetica, sans-serif;
	color: #444;
	font-size: 11px;
	text-align: center;
}
input, textarea, select {
	background: #FAFAFA;
	color: #777;
	border: 1px #EEE solid;
	font-size: 11px;
	font-family: Verdana, Tahoma, Helvetica, sans-serif;
}
.editor {
	clear: both;
	margin: 1px 0px 1px 0px;
	width: 398px;
	height: 23px;
	border: 1px solid #EEE;
	background: #FAFAFA;
}
.editorbutton {
	float: left;
	cursor: pointer;
	border: none;
	padding: 0;
	background: url(images/editor/editor_btn.png) left top no-repeat;
	width: 22px; height: 23px;
}
.editorbuttonover {
	float: left;
	cursor: pointer;
	border: none;
	padding: 0;
	background: url(images/editor/editor_btn.png) left -23px no-repeat;
	width: 22px; height: 23px;
}
.editorselect {
	float: left;
	padding: 2px 1px 0px 3px;
	height: 18px;
}
.editorselect select {
	font-size: 10px;
}
.smilies{
	margin: 0px 0px 1px 0px;
	width: 398px;
	border: 1px solid #D1D8EC;
	background-color: #FFF;
	text-align: center;
}
.rate {
	float: left;
	padding: 2px 1px 0px 5px;
}
.urating {
	list-style: none;
	margin: 0px;
	padding: 0px;
	width: 85px;
	height: 16px;
	position: relative;
	background: url(images/rating.gif) top left repeat-x;
}
.urating li {
	text-indent: -90000px;
	padding: 0px;
	margin: 0px;
	float: left;
}
.urating li div {
	outline: none;
	display: block;
	width: 17px;
	height: 16px;
	text-decoration: none;
	text-indent: -9000px;
	z-index: 20;
	position: absolute;
	padding: 0px;
}
.urating div.out1			{ left: 0px; }
.urating li div.over1	{ background: url(images/rating.gif) left center; z-index: 2; left: 0px; width: 17px; cursor: pointer; }
.urating div.out2			{ left: 17px; }
.urating li div.over2	{ background: url(images/rating.gif) left center; z-index: 2; left: 0px; width: 34px; cursor: pointer; }
.urating div.out3			{left: 34px; }
.urating li div.over3	{ background: url(images/rating.gif) left center; z-index: 2; left: 0px; width: 51px; cursor: pointer; }
.urating div.out4			{left: 51px; }
.urating li div.over4	{ background: url(images/rating.gif) left center; z-index: 2; left: 0px; width: 68px; cursor: pointer; }
.urating div.out5			{left: 68px; }
.urating li div.over5	{ background: url(images/rating.gif) left center; z-index: 2; left: 0px; width: 85px; cursor: pointer; }
.urating li.crating {
	background: url(images/rating.gif) left bottom;
	position: absolute;
	height: 16px;
	display: block;
	text-indent: -9000px;
	z-index: 1;
}
.pagelink {
	padding: 1px 2px 1px 2px;
	border: 1px solid #F1F1F1;
	background: #FFF url(images/cellpic.gif) repeat-x;
}
.left {
	clear: both;
	float: left;
	padding: 5px 5px 5px 5px;
	width: 25%;
}
.center {
	float: left;
	padding: 5px 5px 5px 5px;
	width: 70%;
	white-space: nowrap;
}
.right {
	float: left;
	padding: 5px 5px 5px 5px;
	width: 5%;
}
.button {
	clear: both;
	padding: 5px 5px 5px 5px;
	text-align: center;
}
#page_bg {
	height: 100%; 
	padding: 0;
	margin-bottom: 1px;
	background: #17181e url(images/bgbody.gif) repeat;
}
p {
	margin-top: 0;
	margin-bottom: 5px;
}
a img {
	border: 0;
}
html {
	height: 100%;
	margin-bottom: 1px;
}
#wrapper {
	margin: 0 auto;
	position: relative;
	background: #fafafa;
	width: 90%;
	text-align: left;
}
#header {
	height: 172px;
	width:100%;
	background:  #1b3374 url(images/header.png) top left repeat-x ;
	position: relative;
}
.register{
	position: absolute;
	left: 86px;
	top: 5px;
	display: block;
	width: 195px;
	line-height: 22px;
	height: 22px;
	color: #dfe2ef;
	font-size: 10px;
	font-family: Verdana, Tahoma, Helvetica, sans-serif;
	text-align: left;
}
.register img {display:none}
.register a:link, .register a:visited {font-family: Verdana, Tahoma, Helvetica, sans-serif; color: #dfe2ef;}
.register a:hover {font-family: Verdana, Tahoma, Helvetica, sans-serif; text-decoration: none; color: #FFF;}
.rss {
	position: absolute;
	top: 8px;
}
a.rss {
	background: transparent url(images/rssbtn.png) right top no-repeat;
	display: block;
	width: 40px;
	height: 18px;
}
a.rss:hover {
	background: transparent url(images/rssbtn.png) right bottom no-repeat;
}
.search {
	position: absolute;
	top: 7px;
	right: 7px;
	background: none;
}
.search .tarea {
	background: transparent url(images/search-area.gif) top repeat-x;
	height: 17px;
	width: 119px;
	padding: 1px;
	border: 1px solid #33353a;
	font-size: 10px;
	color: #dfe2ef;
	}
.search .btn {
	display:block; 
	width: 20px;
	height: 20px;
	border: none;
	background: transparent url(images/searchbtn.png) no-repeat;
	font-size: 10px;
	color: #399eff;
}
.search .btn:hover {
	text-decoration: underline;
	color: #399eff;
	cursor: pointer;
	background: transparent url(images/searchbtn.png) bottom no-repeat;
}
#logo{
	position: absolute;
	top: 17px;
	left: 49px;
	display: block;
	text-align: center;
	background: transparent url(images/logotype.png) no-repeat;
}
#banner {
	background: #FFF url(images/bannerbg.png) repeat-x;
	position: relative;
}
#bannerblock {
	width: 468px;
	height: 60px;
	padding: 6px;
}
#tool-l {
	height: 34px;
	background: url(images/lefttoolbar.png) left top no-repeat;
	position: relative;
	padding-left: 8px;
}
#tool-r {
	height: 34px;
	background: url(images/righttoolbar.png) right top no-repeat;
	position: relative;
	padding-right: 7px;
}
#tool {
	margin: 0;
	padding: 0;
	height: 34px;
	background: #2a2b30 url(images/bgtoolbar.png) 89px top repeat-x;
	position: relative;
	overflow: hidden;
	}
#footer {
	background: #353535 url(images/footer-bg.png) top repeat-x;
	position: relative;
	height: 60px;
	color: #FFF;
}
#copyright {
	position: absolute;
	top: 12px;
	left: 30px;
	display: block;
	width: 450px;
	height: 40px;
	color: #767676;
	font-size: 10px;
	line-height: 12px;
	font-size: 9px;
}
#copyright a:link, #copyright a:visited {
	font-family: Verdana, Tahoma, Helvetica, sans-serif;
	color: #767676;
	font-size: 9px;
}
#copyright a:hover{
	font-family: Verdana, Tahoma, Helvetica, sans-serif;
	color: #999;
	text-decoration: underline;
}
#footblock {
	position: absolute;
	right: 5px;
	top: 15px;
	text-align: right;
	height: 15px;
	width: 500px;
}
.clr {clear: both;}
div#block h3{
	margin: 1px;
	padding: 0 8px;
	padding-left: 30px;
	height: 34px;
	color: #fff;
	font-weight: bold;
	font-size: 9px;
	display: block;
	line-height: 25px;
	font-family: Verdana, Tahoma, Helvetica sans-serif;
	background: #282727 url(images/leftblocktop.png) left top repeat-x;
	text-transform: uppercase;
	}
div#block h3.rblock{
	margin: 1px;
	padding: 0 8px;
	padding-left: 30px;
	height: 34px;
	color: #fff;
	font-weight: bold;
	font-size: 9px;
	display: block;
	line-height: 25px;
	font-family: Verdana, Tahoma, Helvetica sans-serif;
	background: #7b0000 url(images/rightblocktop.png) left top repeat-x;
	text-transform: uppercase;
	}
div#block {
	position: relative;
	width: 186px;
	border: 1px solid #ebebeb;
	background: #fff url(images/leftblockbottom.png) bottom repeat-x;
	margin: 0 0 12px 0;
}
div#block div{
	width: 168px;
	padding-bottom: 8px;
	margin-left: 8px;
	margin-right: 8px;
	position: relative;
}
div#block div div{
	padding: 0;
	margin: 0;
}
ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
li {
	line-height: 15px;
	padding-left: 15px;
	padding-top: 0px;
	background-image: url(images/li.gif);
	background-repeat: no-repeat;
	background-position: 0px 2px;
}
#titlebasic {
	padding: 0 8px;
	height: 26px;
	padding-top: 4px;
	font-weight: bold;
	font-size: 9px;
	text-transform: uppercase;
	font-family: Tahoma, Verdana, Helvetica sans-serif;
	background: #eee url(images/basictopbg.png) left top repeat-x;
	color: #2b3360;
}
#titlebasic a:link, #titlebasic a:visited { font-size: 9px; font-weight: bold; color: #2b3360; text-transform: uppercase;}
#titlebasic a:hover { font-size: 9px; font-weight: bold; color: #c10000; text-transform: uppercase; }
#contentbasic {
	padding: 4px;
	background: #fff url(images/contenttopbasic.png) left top repeat-x;
}
.morelink {
	margin-top: 5px;
	color: #939dca;
	padding: 2px 4px;
	background: #FFF url(images/morelink.png) left bottom repeat-x;
}
.morelink a:link, .morelink a:visited, .morelink td {color: #939dca; font-size: 10px;}
.morelink a:hover {color: #334aaf; font-size: 10px;}
.titlecblk {
	text-align: left;
	color: #FFF;
	font-size: 9px;
	font-weight: bold;
	font-family: Verdana, Tahoma, Helvetica, sans-serif;
	display: block;
	background: #000 url(images/titlecbl.png) top left repeat-x;
	text-transform: uppercase;
	padding: 6px;
	padding-left: 30px;
	}
.title {
	text-align: left;
	color: #979797;
	font-size: 18px;
	font-weight: normal;
	font-family: Verdana, Tahoma, Helvetica, sans-serif;
	display: block;
	background: #fff url(images/title.png) center left no-repeat;
	padding: 8px;
	padding-left: 50px;
	}
.title b{
	font-weight: normal;
	}
.title2 {
	padding: 4px;
	margin: 2px;
	border: 1px solid #ebebeb;
	background: #fff;
	}
.title2 div{
	text-align: left;
	color: #979797;
	font-size: 18px;
	font-weight: normal;
	font-family: Verdana, Tahoma, Helvetica, sans-serif;
	display: block;
	background: transparent url(images/title.png) center left no-repeat;
	padding: 8px;
	padding-left: 50px;
	}
.title2 b{
	font-weight: normal;
	}
#albumhack .title {
	color: #979797;
	font-size: 12px;
	font-weight: bold;
	font-family: Verdana, Tahoma, Helvetica, sans-serif;
	text-decoration: none;
	background: none;
	padding: 2px;
}
#albumhack .title b{
	text-align: left;
	color: #979797;
	font-size: 18px;
	font-weight: normal;
	font-family: Verdana, Tahoma, Helvetica, sans-serif;
	display: block;
	background: transparent url(images/title.png) center left no-repeat;
	padding: 8px;
	padding-left: 50px;
}
#watext {
	color: #878787;
	text-align: center;
	vertical-align: middle;
	padding: 4px;
}
#info {
	height: 58px;
	width: 50px;
	background: #2251a3 url(images/info.png) center left no-repeat;
}
#warning {
	height: 58px;
	width: 50px;
	background: #be1300 url(images/warning.png) center left repeat-y;
}
.navi {
	clear: both;
	text-align: left;
	padding: 3px;
}
.commenttitle {
	background: #efefef url(images/commenttopbg.gif) top repeat-x;
	padding: 8px;
	height: 30px;
}
#pix {
	clear: both;
	height: 13px;
}
div#blockVMenu h3{
	margin: 1px;
	padding: 0 8px;
	padding-left: 30px;
	height: 34px;
	color: #fff;
	font-weight: bold;
	font-size: 9px;
	display: block;
	line-height: 25px;
	font-family: Verdana, Tahoma, Helvetica sans-serif;
	background: #282727 url(images/leftblocktop.png) left top repeat-x;
	text-transform: uppercase;
	}
div#blockVMenu {
	position: relative;
	width: 186px;
	border: 1px solid #ebebeb;
	background: #fff url(images/leftblockbottom.png) bottom repeat-x;
	margin: 0 0 12px 0;
}
div#blockVMenu div{
	width: auto;
	padding: 1px;
}
div#blockVMenu div div{
	padding: 0;
	margin: 0;
}
div#blockVMenu div ul.navs		{list-style: none;}
div#blockVMenu div ul.navs li		{background: none; padding: 0;}
div#blockVMenu div ul.navs li a	{
	background: #f8f8f8 url(images/blknavig.png) bottom left no-repeat;
	font-weight: bold;
	color: #4d6a8b;
	width: auto;
	margin: 0;
	padding-left: 20px;
	height: 34px;
	line-height: 32px;
	display: block;
	overflow: hidden;
	}
div#blockVMenu div ul.navs li a:hover	{
	background: #0d1d65 url(images/blknavig.png) top left no-repeat;
	color: #fff;
	}
.rek a:link, .rek a:visited, .rek {color: #FF0000; font-family: Verdana, Tahoma, Helvetica, sans-serif; text-decoration: none; }
.preload1 {background: url(images/three_1.gif);}
.preload2 {background: url(images/three_1a.gif);}
#nav {padding:0; margin:0; list-style:none; height:38px; background:#fff url(images/three_0.gif) repeat-x; position:relative; z-index:500; font-family:arial, verdana, sans-serif;}
#nav li.top {display:block; float:left; height:38px;}
#nav li a.top_link {display:block; float:left; height:35px; line-height:33px; color:#ccc; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;background: url(images/three_0.gif);}
#nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(images/three_0.gif) right top no-repeat;}
#nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(images/three_0a.gif) no-repeat right top;}
#nav li:hover a.top_link {color:#fff; background: url(images/three_1.gif) no-repeat;}
#nav li:hover a.top_link span {background:url(images/three_1.gif) no-repeat right top;}
#nav li:hover a.top_link span.down {background:url(images/three_1a.gif) no-repeat right top;}
#nav li:hover {position:relative; z-index:200;}
#nav li:hover ul.sub
{left:1px; top:38px; background: #bbd37e; padding:3px; border:1px solid #5c731e; white-space:nowrap; width:90px; height:auto; z-index:300;}
#nav li:hover ul.sub li
{display:block; height:20px; position:relative; float:left; width:90px; font-weight:normal;}
#nav li:hover ul.sub li a
{display:block; font-size:11px; height:18px; width:88px; line-height:18px; text-indent:5px; color:#000; text-decoration:none;border:1px solid #bbd37e;}
#nav li ul.sub li a.fly
{background:#bbd37e url(images/arrow.gif) 80px 6px no-repeat;}
#nav li:hover ul.sub li a:hover 
{background:#6a812c; color:#fff; border-color:#fff;}
#nav li:hover ul.sub li a.fly:hover
{background:#6a812c url(images/arrow_over.gif) 80px 6px no-repeat; color:#fff;}
#nav li:hover li:hover ul,
#nav li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover li:hover ul
{left:90px; top:-4px; background: #bbd37e; padding:3px; border:1px solid #5c731e; white-space:nowrap; width:90px; z-index:400; height:auto;}
#nav ul, 
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
#nav li:hover li:hover a.fly,
#nav li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover li:hover a.fly
{background:#6a812c url(images/arrow_over.gif) 80px 6px no-repeat; color:#fff; border-color:#fff;} 
#nav li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li:hover li a.fly
{background:#bbd37e url(images/arrow.gif) 80px 6px no-repeat; color:#000; border-color:#bbd37e;}

а вот скрин
Для просмотра ссылки Войди или Зарегистрируйся

Eihwaz · 13 Ноя 2009

У вас #header является дочерним div'ом таблицы #wrapper, которая имеет ширину 90%, в этом и проблема — вынесите его оттуда, чтобы он отдельно находился.
P.S.: На будущее лучше ограничиться минимумом:
вот каркас моей страницы, вот css стили тех четырех элементов, из которых она состоит. Зачем мне листать метровый листинг вашего шаблона и стилей, если мне нужно оттуда всего пару строк?

Izrael · 15 Ноя 2009

блин я что не пойму а его отдельно вынести ?

Eihwaz · 15 Ноя 2009

HTML:

<body>
    <div id="header"></div>
    <table id="wrapper" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td>
            </td>
        </tr>
    </table>
</body>

rafic · 15 Ноя 2009

Сверстайте всю структуру сайта. А потом сверху просто вставьте шапку и все.
После чего можете делать с ней все что угодно.

The Finn · 17 Ноя 2009

Я бы сначала обернул всё wrapper'ом, а внутри разделил бы всё на 3 части: шляпа, контент и ноги. А там уже разбить на части помельче - так гораздо лучше и проще для понимания.

Izrael, если уж на то пошло, чтоб не изобретать велосипедов и т.п., просто мягко затемните края шапки чёрным и тогда в стилях шапки

Код:
замените:

Код:

background: #1b3374 url(images/header.png) top left repeat-x ;

Код:
на:

Код:

background: #000 url(images/header.png) no-repeat top center;

Мороки гораздо меньше будет.

troop3r · 18 Ноя 2009

как сделать что когда открываешь на большом мониторе, чтоб она растягивалась??

задайте фон для body:

body { background: url(images/header.png) repeat-x; }

а про #header забудьте.

Помогите прописать правильный стиль

Izrael

Гуру форума

Eihwaz

Гуру форума

Гладио

Создатель

Izrael

Гуру форума

Eihwaz

Гуру форума

Izrael

Гуру форума

Eihwaz

Гуру форума

rafic

Местный житель

The Finn

Постоялец

troop3r

Постоялец