Ultrashock Forums > Creative Software > Web
• Need help with menu

You are currently viewing our website as a guest which gives you limited access to forums, files and other resources.

Click here to join now for free, and start interacting with our members, download files and much more!

Click here if you are looking for our Flash files and other professional assets.
  
Post Reply | View first unread | Rate Thread Search this Thread | Thread Tools | Display Modes

#1
Bookmark and Share!
Need help with menu
Old 2008-11-02

Hi all

I am building this up http://www.almennt.com/prufusida/test1/

can someone help me with this, so the menu fits together with background

html
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="hu" lang="hu">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Menu</title>

	<style media="all" type="text/css">@import "menu_style.css";</style>
	<!--[if lt IE 7]>
		<link rel="stylesheet" type="text/css" href="/include/ie6.css" media="screen"/>
	<![endif]-->
</head>
<body>
<div class="wrapper1">
	<div class="wrapper">
		<div class="nav-wrapper">
			<div class="nav-left"></div>
			<div class="nav">
				<ul id="navigation">
			   		<li class="active">
						<a href="#">
							<span class="menu-left"></span>
							<span class="menu-mid">Heim</span>
							<span class="menu-right"></span>
						</a>
					</li>
			   		<li class="">
						<a href="#">
							<span class="menu-left"></span>
							<span class="menu-mid">Test</span>
							<span class="menu-right"></span>
						</a>
			   			<div class="sub">
			   				<ul>
			   					<li>
									<a href="#">Test</a>
									</li>
			   					<li>
									<a href="#">Test</a>
								</li>
			   					<li>
									<a href="#">Test</a>
								</li>
			   				</ul>
			   				<div class="btm-bg"></div>
			   			</div>
			   		</li>
			   		<li class="">
						<a href="#">
							<span class="menu-left"></span>
							<span class="menu-mid">Kennsla</span>
							<span class="menu-right"></span>
						</a>
	            	   	<div class="sub">
			   				<ul>
			   					<li>
									<a href="#">Kennsla</a>
								</li>
			   					<li>
									<a href="#">Kennsla</a>
								</li>
			   					<li>
									<a href="#">Kennsla</a>
								</li>
								<li>
									<a href="#">Kennsla</a>
								</li>
			   				</ul>
			   				<div class="btm-bg"></div>
			   			</div>
					</li>
			   		<li class="">
						<a href="#">
							<span class="menu-left"></span>
							<span class="menu-mid">Gallery</span>
							<span class="menu-right"></span>
						</a>
	            	   	<div class="sub">
			   				<ul>
			   					<li>
									<a href="#">Myndir</a>
								</li>
			   					<li>
									<a href="#">Myndir</a>
								</li>
			   					<li>
									<a href="#">Myndir</a>
								</li>
			   				</ul>
			   				<div class="btm-bg"></div>
			   			</div>
					</li>
					<li class="">
						<a href="#">
							<span class="menu-left"></span>
							<span class="menu-mid">Gallery 2</span>
							<span class="menu-right"></span>
						</a>
	            	   	<div class="sub">
			   				<ul>
			   					<li>
									<a href="#">Myndir</a>
								</li>
			   					<li>
									<a href="#">Myndir</a>
								</li>
			   					<li>
									<a href="#">Myndir</a>
								</li>
			   				</ul>
			   				<div class="btm-bg"></div>
			   			</div>
					</li>
					<li class="">
						<a href="#">
							<span class="menu-left"></span>
							<span class="menu-mid">Test</span>
							<span class="menu-right"></span>
						</a>
	            	   	<div class="sub">
			   				<ul>
			   					<li>
									<a href="#">Test</a>
								</li>
			   					<li>
									<a href="#">Test</a>
								</li>
			   					<li>
									<a href="#">Test</a>
								</li>
			   				</ul>
			   				<div class="btm-bg"></div>
			   			</div>
					</li>
			   		<li class="">
						<a href="#">
							<span class="menu-left"></span>
							<span class="menu-mid">Um mig</span>
							<span class="menu-right"></span>
						</a>
	            	   	<div class="sub">
			   				<ul>
			   					<li>
									<a href="#">Vinna</a>
								</li>
			   				</ul>
			   				<div class="btm-bg"></div>
			   			</div>
					</li>
			   		<li class="last">
						<a href="">
							<span class="menu-left"></span>
							<span class="menu-mid">Samband</span>
							<span class="menu-right"></span>
						</a>
			   		</li>
                    <li class="last">
						<a href="">
							<span class="menu-left"></span>
							<span class="menu-mid">Samband</span>
							<span class="menu-right"></span>
						</a>
			   		</li>
			   	</ul>
			</div>
			<div class="nav-right"></div>
		</div>
		<div class="content">
			<p>&nbsp;</p>
			<p>&nbsp;</p>

		</div>
		<div class="content-bottom"></div>
	</div>
</div>
</body>
</html>
css
HTML Code:
.wrapper1{
	color: #44433f;	
	font: 14px "Futura Medium", "Myriad Pro", "Gill Sans", Helvetica, Verdana, Arial, sans-serif;
	margin: 0;
	padding: 4px 0 0;
	}
	.wrapper1 a{
		color: #E5F2FB;
		text-decoration: none;
	}
	.wrapper1 a:hover {
		color: #09548B;
	}
	.wrapper1 p {
		margin: 0 0 17px;
		padding: 0;
		line-height: 18px;
	}
.wrapper {
	/*width: 710px;*/
	margin: 20px auto;
}
.nav {
	background: #fff url(images/nav_bg.png) repeat-x;
	float: left;
}
.nev-wrapper {
	clear: both;
	float: left;
}
.nav-left {
	background: url(images/nav_left.png) no-repeat top left;
	float: left;
	width: 11px;
	height: 41px;
}
.nav-right {
	background: url(images/nav_right.png) no-repeat top right;
	float: left;
	width: 11px;
	height: 41px;
}
.nav ul {
	/*width: 648px;*/
	height: 38px;
	float: left;
	margin: 0;
	padding-top: 3px;
	list-style: none;
	font-size: 15px;
}
.nav li {
	float: left;
	padding: 0 7px;
	background: url(images/split.png) no-repeat right center;
	position: relative;
	z-index: 1;
}
.nav li.last {
	background:none;
}
.nav li:hover {
	z-index:2;
}
.nav li a {
	display: block;
	line-height: 38px;
	overflow: hidden;
	float: left;
}
a .menu-left {
	background: url(images/menu_left.gif) no-repeat left top;
	width: 8px;
	height: 32px;
	line-height: 35px;
	display: block;
	float: left;
}
a .menu-mid {
	background: url(images/menu_mid.gif) repeat-x top left;
	height: 32px;
	line-height: 35px;
	display: block;
	float: left;
}
a .menu-right {
	background: url(images/menu_right.gif) no-repeat top left;
	width: 8px;
	height: 32px;
	line-height: 35px;
	display: block;
	float: left;
}
.nav li a:hover .menu-left,
.nav li.active a .menu-left,
.nav li:hover a .menu-left,
.nav li a:hover .menu-mid,
.nav li.active a .menu-mid,
.nav li:hover a .menu-mid,
.nav li a:hover .menu-right,
.nav li.active a .menu-right,
.nav li:hover a .menu-right {
	background-position: 0 -37px;
	line-height: 35px;
}
.nav li a:hover,
.nav li.active a,
.nav li.hover a,
.nav li:hover a {
	color: #09548B;
}
.nav li:hover .sub,
.nav li.hover .sub {
	display:block;
}
.nav li .sub {
	display: none;
	position: absolute;
	top: 27px;
	left: 6px;
	background: url(images/submenu_top.png) no-repeat;
	width: 186px;
	padding-top: 9px;
}
.nav li ul {
	background: url(images/submenu_bg.png) repeat-y;
	width: 162px;
	height: auto;
	margin: 0;
	padding: 0 12px 10px;
	list-style: none;
	font-size: 14px;
}

.nav li:hover li,
.nav li.active li {
	width: 100%;
	padding: 1px 0 2px;
	border-bottom: 1px #C1D9F0 dashed;
	background: none !important;
}
.nav li:hover li a,
.nav li.active li a {
	color: #09548B;
	background: none !important;
	line-height: normal;
	width: 156px;
	padding: 8px 3px 3px;
	text-indent: 1px;
}
.nav li:hover li a:hover,
.nav li.active li a:hover {
	color: #fff;
	background: #165B9F !important;
	text-decoration: none;
	line-height: normal;
}
/*IE*/
.nav li li a:hover,
.nav li li a:hover {
	color: #fff;
	background: #165B9F !important;
	text-decoration: none;
	line-height: normal;
}
/**/
.nav .btm-bg {
	background: url(images/submenu_bottom.png) no-repeat;
	width: 205px;
	height: 9px;
	overflow: hidden;
	clear: both;
}
.content {
	width: 670px;
	background: transparent url(images/content_bg.png) repeat-y;
	float: left;
	padding: 10px 20px;
}
.content h1 {
	color: #333;
	font-weight: 400;
	text-transform: uppercase;
	font-size: 18px;
	border-bottom: 1px dashed #C1D9F0;
}
.content h2 {
	font-weight: 400;
	text-transform: uppercase;
	font-size: 14px;
	padding-left: 10px;
	margin-bottom: -5px;
}
.content p {
	padding: 0 15px;
	text-align: justify;	
}
.content-bottom {
	width: 710px;
	background: transparent url(images/content_bottom.png) no-repeat;
	height: 13px;
	float: left;
}
thx
postbit arrow 2 comments | 808 views postbit arrow Reply: with Quote   
ofi
Registered User
 ofi is offline
seperator
Posts: 2
2008-11-02
ofi lives in Iceland
 ofi's Avatar
seperator

Ultrashock Member Comments:
coldarif coldarif is offline 2008-11-08 #2 Old  
nice designnn.......
Reply With Quote  
theFlasher theFlasher is offline 2009-08-06 #3 Old  
Hi ofi! Great design so far...I'll see if I can help at all.

Not sure why you have so many wrappers..what I would do is 1 wrapper to put the whole site in (if you want it centered add margin: 0 auto, and maybe 1 wrapper for the content after the nav.

I don't have time to really break this down right now but here are some things I noticed:
1) Try taking off the float: left; on your content class.
2) in the HTML you call the class "nav-wrapper" but in the CSS its nev-wrapper...

I'll try and help you more later.
Reply With Quote  
Thread Tools
Display Modes Rate This Thread
Linear Mode Linear Mode
Rate This Thread: