homepage Welcome to WebmasterWorld Guest from 54.205.105.23
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
CSS Alignment on CSS Menu
Saboi

5+ Year Member



 
Msg#: 4673740 posted 3:20 am on May 23, 2014 (gmt 0)

Hello friends,

I need help and a pointer to where I can learn more about alignments in CSS. My focus here is on CSS menus.

Below is my code. I need assistance with correct alignment so to say. What I would like to achieve is not to have an overflow when hovering over the link. That the hover background color for a link equally covers the black background. Some one please assist with this based on he code.



<html>
<head>
<title>Learn CSS Menus</title>

<style>

body
{
margin: 0px;
padding: 0px;
background: 85B4F7;
}

*{
margin: 0 auto 0 auto;
text-align: left;
}

#container
{
width: 100%;

}

#header
{
width: 100%;
background: blue;
color: white;
height: 5%;
padding: 10px 0px 10px 10px;
font-weight: bold;

}



#subMenu
{
height: 45px;
background-color: black;
}

#subMenu ul li
{
list-style: none;
float: left;
display: block;
width: 140px;
padding-top: 10px;
height: 45px;

}

#subMenu a
{
text-decoration: none;
display: block;
color: white;
text-align: center;


}

#subMenu li a:hover
{
background-color: green;
display: block;
height: 40px;

}


</style>

</head>

<body bgcolor="85B4F7">

<div id="container">

<div id="header">

<p><h2>Header</h2></p>

</div>

<div id="subMenu">

<ul>
<li><a href="#">First Link</a></li>
<li><a href="#">Second Link</a></li>
<li><a href="#">Third Link</a></li>

</ul>

</div><!--end of subMenu-->

</div>


</body>
</html>


 

rainborick

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4673740 posted 4:11 am on May 23, 2014 (gmt 0)

Try:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Learn CSS Menus</title>
<style>

html { margin:0; padding:0; }

body {
margin: 0px;
padding: 0px;
background: #85B4F7;
font-size:100%;
}

h2 { margin:0; }

#container {
}

#header {
margin:0;
width: 100%;
background: blue;
color: white;
height: 5%;
padding: 10px 0px 10px 10px;
font-weight: bold;
}


#subMenu {
height:45px;
background-color: black;
font-size:16px;
}

#subMenu ul {
margin:0;
line-height: 100%;
width:100%;
}

#subMenu ul li {
list-style: none;
float: left;
margin:0;
position:relative;
width: 140px;
height: 45px;
line-height:inherit;
}

#subMenu a {
display:inline-block;
padding:14px 0 4px 0;
width:100%;
height:27px; /* 45 - 14 - 4 = 27px */
text-align: center;
text-decoration: none;
color: white;
}

#subMenu li a:hover {
background-color: green;
}

</style>
</head>
<body>
<div id="container">
<div id="header">
<h2>Header</h2>
</div>
<div id="subMenu">
<ul>
<li><a href="#">First Link</a></li>
<li><a href="#">Second Link</a></li>
<li><a href="#">Third Link</a></li>
</ul>
</div><!--end of subMenu-->
</div><!-- end of container -->
</body>
</html>

Saboi

5+ Year Member



 
Msg#: 4673740 posted 3:25 pm on May 24, 2014 (gmt 0)

Hello rainboric,

Thank you so much. It worked.

Where did I go wrong?

rainborick

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4673740 posted 5:38 pm on May 24, 2014 (gmt 0)

I don't remember everything I changed. There were just a bunch of errors and extraneous CSS rules that needed to be cleaned up, and I can see a few things I could have done better, but...

If you compare your version to mine side-by-side, it should give you some insights. My advice would be to go through some basic CSS tutorials so you have a better grasp of the fundamentals. Good luck!

Saboi

5+ Year Member



 
Msg#: 4673740 posted 5:21 am on Jun 1, 2014 (gmt 0)

Thank you rainborick.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved