Solved

how do I create my header CSS

Posted on 2010-11-10
1
218 Views
Last Modified: 2012-05-10
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
Comment
Question by:TonyReba
1 Comment
 
LVL 13

Accepted Solution

by:
AngryBinary earned 125 total points
ID: 34104319
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

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

785 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question