Solved

how do I create my header CSS

Posted on 2010-11-10
1
216 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

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
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.
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 …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)

744 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now