CODEWITHSUNDEEP
htmlcss
Ofir
Ofir

Reputation: 141

CSS - Making a menu

I built a CSS menu using ul li. I want the li's together to cover the whole length/width of the div. Right now it looks like this: https://i.sstatic.net/uKbzs.png So.. I want the green to basicly touch the borders.

Here's the CSS code:

#menu {
    width: 100%;
    height: 1%;
    font-size: 16px;
    font-family: Tahoma, Geneva, sans-serif;
    font-weight: bold;
    text-align: center;    
}
#menu ul {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}
#menu li { 
    display: inline;
    margin: 0;
    padding: 0; 
}
#menu a {
    text-decoration: none;
    height: 100%;
    width: 100%;
    margin: 1px;
    padding-top: 1%;
    padding-bottom: 1%;
    padding-right: 6%;
    padding-left: 6%;
    background-color:#04B45F;
    color: #F0F0F0;
}
#menu a:hover {
    color: #04B45F;
    background-color: #FFF;
}

Upvotes: 1

Views: 96

Answers (3)

Ofir
Ofir

Reputation: 141

Thank you everyone for trying to help I really appreciate it. I guess I didn't make myself clear on the question.

body{background-color:#04B45F; text-align: center;}
div{width: auto; height: auto;}
#body{border-style: ridge; border-color: grey; border-width: 2px; background-color: white; padding: 0; margin: 1%;}
#logo{margin: 2px;}
#menu {
    font-size: 16px;
    font-family: Tahoma, Geneva, sans-serif;
    font-weight: bold;
    text-align: center; 
    background-color:#04B45F;
    overflow: hidden;
}
#menu ul {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}
#menu li { 
    display: inline;
    margin: 0;
    padding: 0; 
}
#menu a {
    text-decoration: none;
    height: 100%;
    width: 100%;
    padding-top: 1%;
    padding-bottom: 1%;
    padding-right: 6%;
    padding-left: 6%;
    background-color:#04B45F;
    color: #F0F0F0;
}
#menu a:hover {
    color: #04B45F;
    background-color: #FFF;
}
#contents{text-align: left; margin: 2px; padding: 5px;}
#login{float:right; border: solid 1px; border-right: 0; margin: 0; padding: 5%;}
#info{overflow: hidden;}
hr{margin: 0px;}

http://jsfiddle.net/4h0Lvhsd/3/

I figured out that I could simply make the whole div's background in the color of the bottom, then do overflow: hidden - to make it look all perfectly lined.

Upvotes: 0

Dmitriy
Dmitriy

Reputation: 4501

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body{background-color:#04B45F; text-align: center;}
div{width: auto; height: auto;}
#body{border-style: ridge; border-color: grey; border-width: 2px; background-color: white; padding: 0; margin: 1%;}
#logo{margin: 2px;}
#menu {
 	width: 100%;
    height: 1%;
    font-size: 16px;
    font-family: Tahoma, Geneva, sans-serif;
    font-weight: bold;
    text-align: center;    
}
#menu ul {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    text-align: center;
}
#menu li { 
	display: inline-block;
	margin: 0 1%;
	padding: 0; 
    width: 18%;
    
}
#menu a {
	text-decoration: none;
	height: 100%;
    width: 100%;
    display: block;
    padding: 10px 5%;
    
    background-color:#04B45F;
    color: #F0F0F0;
}
#menu a:hover {
    color: #04B45F;
    background-color: #FFF;
}
#contents{text-align: left; margin: 2px; padding: 5px;}
#login{float:right; border: solid 1px; border-right: 0; margin: 0; padding: 5%;}
#info{overflow: hidden;}
hr{margin: 0px;}
<body>
		<div id="body">
			<div id="logo"><img id="logo_im" width="100%" height="250px" src="http://upload.wikimedia.org/wikipedia/commons/3/32/Easyjet.ezyi.b737.750pix.jpg"/></div>
			<br />
			<div id="menu">
				<ul>
					<li>
						<a href="index.jsp" id="menus">Main Page</a>
					</li><li>
						<a href="#" id="menus">Learn More</a>
					</li><li>
						<a href="#" id="menus">Discuss</a>
					</li><li>
						<a href="#" id="menus">Gallery</a>
					</li><li>
						<a href="#" id="menus">Contact Us</a>
					</li>
				</ul>
			</div>
			<div style="float:right;">
				<br /><br /><br /><br />
				<div id="login">
					Log into our website!
					<form method="post">
						Username: <br />
						<input type="text" name="username" />
						<br />
						Password: <br />
						<input type="password" name="pass" />
						<br />
						<input type="submit" value="Login">
						<br />
						<i>You didn't sign up yet?<br /><a href="register.jsp">No problemo!</a></i>
					</form>
				</div>
			</div>
			<div id="contents">
			<br />
				Welcome to "On The Air" a website that's dedicated for you! <br />
				Did you ever wondered or had any questions about aviation, commercial jets and more?<br />
				We're hoping that you'll find your anwsers here, and if not you can ask questions in our chat.<br />
				<br /><br />
				Did you signed up yet? <a href="register.jsp">Join</a> our community now! Currently registered: <%=application.getAttribute("X") %><br />
				<br />
				<img src="https://c1.staticflickr.com/9/8432/7811765360_e51f479602_z.jpg" width="200px" height="200px" />
				
			</div>
		</div>
	</body>

Upvotes: 1

Nitekurs
Nitekurs

Reputation: 451

Try this

You just add display: block; in a tag (#menu a)

check this http://jsfiddle.net/dykgsc0L/

Upvotes: 0

Related Questions