Solved

how do I create my header CSS

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
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…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

911 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

21 Experts available now in Live!

Get 1:1 Help Now