Меню CSS позициониране.

S

shashma88

Registered
Здравейте. Не знам дали помоща трябва да е за html, или css, но проблема ми е, че искам да направя дубликат на едно меню в сайта ми. Вижте снимка:
http://fridaycode.net/forum/user_images/1.png
Както виждате, искам оранжевото меню да се дублира (синьо) и да отиде долу където съм указал със син цвят.
Ето ви CSS:
Код: 
#innerheader {
			height:150px;
			background:#FFFFFF url('images/header_image.png') no-repeat top left;
			width:998px;
			padding-top:58px;
		}
			#innerheader h1 {
				text-indent:-9999em;
				height:1px;
				overflow:hidden;
				font-size:1px;
				margin:0;
				padding:0;
			}
				
			#innerheader ul {
				list-style:none;
				margin:0;
				padding:0;
			}
			#innerheader li {
				background:#000000 url('images/nav_bg.gif') repeat-x top center;
				border:1px solid #495e6e;
				border-top:none;
				border-bottom:none;
				display:block;
				float:left;
				height:25px;
				margin:0 2px;
				padding:15px 10px 0 10px;
				color:#FFFFFF;
				font-weight:bold;
				font-size:10px;
				text-transform:uppercase;
			}
Ето ви HTML:
<div id="wrap">
<div id="header">
<div id="innerheader">

<ul>
<li><a href="index.php">Home</a></li>
<li><a href="/forum/">Forums</a></li>
<li><a href="gather.php">Gather</a></li>
<li><a href="movies.php">Movies</a></li>
<li><a href="maps.php">Maps</a></li>
<li><a href="roster.php">Roster</a></li>
<li><a href="/forum/viewforum.php?f=38">Join Us</a></li>
<li><a href="servers.php">Servers</a></li>
</ul>
</div>

</div>
Ако ви трябват CSS-ите на warp и header, заповядайте:

Код: 
#header {
		margin:0 auto;
		height:208px;
		background:#000000 url('images/header_repeat.gif') repeat-x top center;
	}
Код: 
#wrap {
	margin:0 auto;
	background:#e1f1ff url('images/bg_repeat.jpg') repeat-y top center;
	width:998px;
	padding:0;

}

Хиляди благодарности, на този, който го направи.
 
Значи слагаш менюто в един див пишеш му position: relative; top: xx px; left: xx px :)
 
Karcho каза:
Значи слагаш менюто в един див пишеш му position: relative; top: xx px; left: xx px :)
Увеличете...
мисля че и ще трябва да добавиш z-index 1 за да вижда

ето ти направо кода


#innerheader {
height:150px;
background:#FFFFFF url('images/header_image.png') no-repeat;
width:998px;
padding-top:58px;
position: relative;
top: xx px;
left: xx px;
}

edit:махам z-index от кода :P
 
<div id="wrap">
<div id="header">
<div style="padding-top: ?px; padding-left: ?px;">
<div id="innerheader">

<ul>
<li><a href="index.php">Home</a></li>
<li><a href="/forum/">Forums</a></li>
<li><a href="gather.php">Gather</a></li>
<li><a href="movies.php">Movies</a></li>
<li><a href="maps.php">Maps</a></li>
<li><a href="roster.php">Roster</a></li>
<li><a href="/forum/viewforum.php?f=38">Join Us</a></li>
<li><a href="servers.php">Servers</a></li>
</ul>
</div>
</div>

</div>
Увеличете...
 
slideR каза:
<div id="wrap">
<div id="header">
<div style="padding-top: ?px; padding-left: ?px;">
<div id="innerheader">

<ul>
<li><a href="index.php">Home</a></li>
<li><a href="/forum/">Forums</a></li>
<li><a href="gather.php">Gather</a></li>
<li><a href="movies.php">Movies</a></li>
<li><a href="maps.php">Maps</a></li>
<li><a href="roster.php">Roster</a></li>
<li><a href="/forum/viewforum.php?f=38">Join Us</a></li>
<li><a href="servers.php">Servers</a></li>
</ul>
</div>
</div>

</div>
Увеличете...
Увеличете...
и по каква причина да вкарва css при html??? напиши ги в css-са

ето кода
Код: 
#innerheader {
height:150px;
background:#FFFFFF url('images/header_image.png') no-repeat;
width:998px;
padding-top:?px; 
padding-left: ?px
}

не знам защо не мръдна с position:relative ама така ще стане

не го пиши това div style в html-ла
 
Момче виж първия му пост. Виж, че там е задал padding-top и ти казва, че не мърда. Аз изкарвам тоя padding извън дивът така че ...
 
slideR каза:
Момче виж първия му пост. Виж, че там е задал padding-top и ти казва, че не мърда. Аз изкарвам тоя padding извън дивът така че ...
Увеличете...

аз копирах кодовете и стана при мене... и никъде е казал че не помръдва...

едит:кат копирах кода менюто си беше надолу ... padding-top в css-са е действал ...
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Back
Горе