Designing a navigation bar with CSS

Question

Designing a navigation bar with CSS

I created a CSS menu using ul li elements with the goal of making them cover the entire width of the div when placed next to each other. Currently, it appears like this: https://i.sstatic.net/uKbzs.png My aim is to have the green area touch the borders.

Below is the CSS code I used:

#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;
}

html css

Answer 1

Answer №1

*{
    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 answers 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>

Answer 2

*{
    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 answers 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>

Answer 3

Answer №2

Give this a shot

To make it work, simply insert display: block; in the appropriate tag (#menu a)

Take a look at this demo here: http://jsfiddle.net/dykgsc0L/

Answer 4

Give this a shot

To make it work, simply insert display: block; in the appropriate tag (#menu a)

Take a look at this demo here: http://jsfiddle.net/dykgsc0L/

Answer 5

Answer №3

Gratitude to all for the assistance, it is truly appreciated. Seems like I failed to articulate my question clearly.

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/

Realized that setting the whole div's background in the same color as the bottom and using overflow: hidden created a neatly aligned look.

Answer 6

Gratitude to all for the assistance, it is truly appreciated. Seems like I failed to articulate my question clearly.

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/

Realized that setting the whole div's background in the same color as the bottom and using overflow: hidden created a neatly aligned look.

Designing a navigation bar with CSS

Answer №1

Answer №2

Answer №3

Similar questions

Solving the enigma of CSS positioning: mastering floats, margin-left/right, and auto

A guide to implementing toggle functionality on child elements

Pause the counter based on the data attribute containing multiple values

Scrolling through menus horizontally

What is the best method for adjusting the size of a button on a video as needed?

Issues arise with tabbed content as default content fails to display and classes are not added upon clicking

Transmit information to a different JavaScript framework using Vue

What could be causing the p tag to be displacing the parent div downwards?

Having trouble getting a resizable DIV inside a 100% height DIV with margin to work properly. Any tips or assistance would be greatly

Struggling to understand why the PHP/HTML form with a file upload field is not successfully uploading

What could be causing angular-datatable to not properly fill columns in Bootstrap 4?

Utilizing Java's IE/Chrome HTML-Renderer or managing file storage with JavaScript

What is the best way to insert a Bootstrap Glyphicon into an asp:Button in ASP.Net?

Using Javascript to prevent css from changing the display

Python form submission error code 405 encountered

Using the combination of Chrome browser, Lucida Grande font, and word-wrap

employing the display flex property triggers the emergence of a lavender border

Tips for preventing menu flickering caused by overflow during CSS animations

Linking HTML files across different directories

AngularJS's support for html5mode on GitHub pages is now available