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

Тема в разделе "Веб-дизайн", создана пользователем Izrael, 13 ноя 2009.

Статус темы:
Закрыта.
Модераторы: zek24
  1. Izrael

    Izrael

    Регистр.:
    12 фев 2008
    Сообщения:
    448
    Симпатии:
    57
    Привет есть проблема одна, есть шапка для сайта я прописал д лня нее стиль такой


    Код:
    #header {
    height: 172px;
    width:100%;
    
    background: #1b3374 url(images/header.png) top left repeat-x ;
    position: relative;
    }
    как сделать что когда открываешь на большом мониторе, чтоб она растягивалась??
     
  2. Eihwaz

    Eihwaz

    Регистр.:
    7 окт 2007
    Сообщения:
    156
    Симпатии:
    54
    Верстку тоже покажите, так нельзя разобраться - может, у вас #header в какой-нибудь родительский див засунут, у которого ширина фиксированная или что-то в этом духе.
    P.S.: Position: relative уберите, пускай будет значение по умолчанию: static.
    Вообще, я бы делал так, примерно (но не видя верстку это писями по воде виляно:(
    HTML:
    
    #header {
        float: left;
        height: 172px;
        width: 100%;
        background: #1b3374 url(images/header.png) top left repeat-x;
    }
    
     
  3. Гладио

    Гладио Создатель

    Регистр.:
    9 окт 2009
    Сообщения:
    32
    Симпатии:
    10
    действительно, по одному стилю сложно понять в чем суть проблемы, нужно смотреть на html еще)
     
  4. Izrael

    Izrael

    Регистр.:
    12 фев 2008
    Сообщения:
    448
    Симпатии:
    57
    вот 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;}
    а вот скрин
    [​IMG]
     
  5. Eihwaz

    Eihwaz

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

    Izrael

    Регистр.:
    12 фев 2008
    Сообщения:
    448
    Симпатии:
    57
    блин я что не пойму а его отдельно вынести ?
     
  7. Eihwaz

    Eihwaz

    Регистр.:
    7 окт 2007
    Сообщения:
    156
    Симпатии:
    54
    HTML:
    
    <body>
        <div id="header"></div>
        <table id="wrapper" border="0" cellpadding="0" cellspacing="0">
            <tr>
                <td>
                </td>
            </tr>
        </table>
    </body>
    
     
  8. rafic

    rafic

    Регистр.:
    14 май 2008
    Сообщения:
    477
    Симпатии:
    24
    Сверстайте всю структуру сайта. А потом сверху просто вставьте шапку и все.
    После чего можете делать с ней все что угодно.
     
  9. The Finn

    The Finn Постоялец

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

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

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

    troop3r Постоялец

    Регистр.:
    14 ноя 2009
    Сообщения:
    138
    Симпатии:
    22
    задайте фон для body:
    а про #header забудьте.
     
Статус темы:
Закрыта.