?
Solved

how do I create my header CSS

Posted on 2010-11-10
1
Medium Priority
?
228 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
1 Comment
 
LVL 13

Accepted Solution

by:
AngryBinary earned 500 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

Video: Liquid Web Managed WordPress Comparisons

If you run run a WordPress, you understand the potential headaches you may face when updating your plugins and themes. Do you choose to update on the fly and risk taking down your site; or do you set up a staging, keep it in sync with your live site and use that to test updates?

Question has a verified solution.

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

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
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.
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Suggested Courses

764 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