• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 233
  • Last Modified:

how do I create my header CSS

I have a page which I am trying to put a header with a logo and , slogan and a top menu.. I having difficulties with the css in terms on how to align menu same line that slogan (div)


<div id="header">
        	<div class="image_logo">
           	     &nbsp;
                 <br />
&nbsp;
           	     <img alt="logo" class="style3" src="Images/logo_rg.png" />

    <div class="company_slogan">
        <br />
        DHR Physician Issues Log
                        
        </div>
                 <div class="navigation">
            	<ul>
                	<li><span>Home</span></li>
                    <li class="color">|</li>
                    <li><a href="default.aspx" title="About US">Help</a></li>
                    <li class="color">|</li>
                    <li><a href="#" title="Contact">Contact</a></li>
                    <li class="color">|</li>
                   <li><a href="#">Exit</a></li>
                    
                </ul>
            </div>
                 
       </div>
    


</div>

<!-- Ends Header Section --> 


css

#header{  height: auto; width: 100%;}
#subHeader{ height: auto; width: 98%;}
.company_slogan{  font-family: Tahoma, Geneva, sans-serif; font-size: 12px; font-weight: bold; color: #423d3d; width: 161px; 
margin-left: 10px;
}

.navigation
{
    height: 20px;
    line-height: 20px;
     vertical-align: middle;
}

.navigation ul{ text-decoration: none; list-style-type: none; display: block;  margin: 3px 0px 0px 0px; font-family: Tahoma, Geneva, sans-serif; font-size: 12px;}
.navigation li{ float: left; width: 50px; text-align: center;}
.navigation li a{ text-decoration: none; color: #000;}
.navigation li a:hover{ color:#90b912;}
.navigation li span{ color:#90b912;}
.navigation ul .color{ color: #90b912;}

Open in new window

0
TonyReba
Asked:
TonyReba
1 Solution
 
AngryBinaryCommented:
First, change your HTML to what I've attached below. You shouldn't use "&nbsp;" and "<br/>" to position elements, since you can do the same more reliably using CSS attributes like "margin", "padding", and "position".

Then try this CSS out and let me know if it's what you're looking for:

#header{  height: auto; width: 100%;}
#subHeader{ height: auto; width: 98%;}
.company_slogan {
      font-family: Tahoma, Geneva, sans-serif;
      font-size: 12px;
      font-weight: bold;
      color: #423d3d;
      width: 161px;
      margin-left: 10px;
      line-height: 20px;
      float:left;
      position:relative;
      top:3px;
}

.navigation
{
      height: 20px;
      line-height: 20px;
      clear:right;
}

.navigation ul{ text-decoration: none; list-style-type: none; display: block;  margin: 3px 0px 0px 0px; font-family: Tahoma, Geneva, sans-serif; font-size: 12px;}
.navigation li{ float: left; width: 50px; text-align: center;}
.navigation li a{ text-decoration: none; color: #000;}
.navigation li a:hover{ color:#90b912;}
.navigation li span{ color:#90b912;}
.navigation ul .color{ color: #90b912;}
<div id="header">
	<div class="image_logo">
		<img alt="logo" class="style3" src="Images/logo_rg.png" />
	</div>
    <div class="company_slogan">
        DHR Physician Issues Log
	</div>
	<div class="navigation">
		<ul>
			<li><span>Home</span></li>
			<li class="color">|</li>
			<li><a href="default.aspx" title="About US">Help</a></li>
			<li class="color">|</li>
			<li><a href="#" title="Contact">Contact</a></li>
			<li class="color">|</li>
			<li><a href="#">Exit</a></li>
		</ul>
	</div>
</div>

Open in new window

0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now