how to add multiple images to a css header?


Tags: css,image,html,header

Problem :

I am trying to add 2 images side by side in my header, following that I want my website title GARY MANN LLC and below that Residential Contractor, and then over on the right side of the header I want space to add social buttons/links. How can I divide the space up in the cleanest manner using just css and html heres what ive got to work with:

HTML:

<!DOCTYPE HTML>
<html lang="eng">
<head>
    <meta charset="UTF-8" />
    <title>GARY MANN LLC</title>
    <link rel="stylesheet" href="styles/gmann.css" type="text/css" />
</head>

<body>

<header>
<center>GARY MANN LLC</center>
<center>Residential Contractor</center>
</header>

<nav>
<ul>
  <li><a href="/">Home</a></li>
  <li><a href="/about">About Us</a>
    <ul>
        <li><a href="/crew">Our Crew</a></li>
        <li><a href="/history">History</a></li>
        <li><a href="/vision">Vision</a></li>
    </ul>
  </li>
  <li><a href="/products">Services</a>
    <ul>
        <li><a href="/carpentry">Carpentry</a></li>
        <li><a href="/waterproof">Waterproofing</a></li>
        <li><a href="/concrete">Concrete</a></li>
        <li><a href="/masonry">Masonry</a></li>
        <li><a href="/prop">Property Maintenance</a></li>
        <li><a href="/metal">Metal Construction</a></li>
        <li><a href="/design">Interior Design</a></li>
        <li><a href="/demo">Demo & Salvage</a></li>
    </ul>
  </li>
  <li><a href="/services">Portfolio</a>
  </li>          
  <li><a href="/contact">Contact</a>
    <ul>
        <li><a href="/email">Via Email</a></li>
        <li><a href="/contact_form">Web Form</a></li>
        <li><a href="/pigeon">Carrier Pigeon</a></li>
    </ul>
  </li>
</ul>
</nav>

<div id="wrapper">

    <section id="content">
        <!-- all the content in here -->
    </section>

    <section id="left_side">

    </section>

</div> <!-- end wrapper -->

<footer>
    <div id="footer_center">
        <section id="social_links">
            <h3>Connect With Us</h3>
        </section>

        <section id="site_map">
            <h3>Site Map</h3>
        </section>
    </div>
    <div id="copy">
        <p>Copywright</p>
    </div>
</footer>

</body>
</html>

CSS:

/* HEADER */
*  {
margin:0;
padding:0;
}

header {
width:100%;
height:110px;
background-color:#FF6600;
border-bottom:2px solid black;
}
/* END OF HEADER */

/* START NAV MENU */
nav {
background-color:#333333;
height:40px;
width:100%;
float:left;
position: relative;
}


nav ul {
font-family: Sonoma, Arial;
font-size: 20px;
margin: 0;
padding: 0;
list-style: none;
text-align:center;
position: relative;
float: left;
clear: left;
left: 50%;
}

nav ul li {
float: left;
position: relative;
display: block;
right:50%;

}

nav li ul { 
display: none; 
}

nav ul li a {
display: block;
text-decoration: none;
background: #666666;
color: #ffffff;  
padding: 5px 20px 3px 15px;
margin-left: 1px;
white-space: nowrap;
height:30px; /* Width and height of top-level nav items */
width:90px;
text-align:center;
border-right: 3px solid black;
border-left: 3px solid black;
border-top: 1px solid black;

}

nav ul li a:hover { 
background: #999999; 
}

nav li:hover ul {
display: block;
position: absolute;
height:30px;
}

nav li:hover li {
float: none;
font-size: 11px;

}

nav li:hover a { 
background: #534635; 
height:30px; /* Height of lower-level nav items is shorter than main level */
}

nav li:hover li a:hover { 
background: #999999; 
}

nav ul li ul li a {
text-align:left;
}

/* END NAV MENU */

/* WRAPPER */
#wrapper {
    width:100%;
    height:600px;
    background-color:#CCCCCC;
    margin-left:auto;
    margin-right:auto;
    border-left:1px solid black;
    border-right:1px solid black;
}
#content {
width:85%;
height:100%;
float:right;
background-color:#999999;
}
#left_side {
width:15%;
height:100%;
float:left;
background-color:#333333
}

/* END WRAPPER */

/* FOOTER */
footer {
width:100%;
height:170px;
background-color:#e7e7e7;
border-top:1px solid black;
}
#footer_center {
width:900px;
height:145px;
margin-left:auto;
margin-right:auto;
border-bottom:1px dotted #333;
}
#social_links {
width:435px;
height:100%;
float:left;
border-right:1px dotted #333;

}
#site_map {
width:435px;
height:100%;
float:right;
border-left:1px dotted #333;
}
/* END FOOTER */


Solution :

You can achieve this by making classes.

.header{
   width:100%;
   height:20%;
   float:left;
   text-align:center
}
.logo{
   width:80%;
   height:100%;
}
   .upperlogo{
   background:url('path of the upper logo') 0 0 no-repeat;
   height:10%;
   width:100%;
}
.lowerlogo{
   background:url('path of the lower logo') 0 0 no-repeat;
   height:10%;
   width:100%;
}
.social-icons{
   width:20%;
   height:100%;
   float:right;
}

In your HTML:

<header class="header">
   <div class="logo">
      <div class="upperlogo"></div>
      <div class="lowerlogo"></div>
   </div>
   <div class="social-icon">
   ....
   </div>
</div>

Adjust the height & width to suit your images. Loading images through CSS is always the better-elegant way.


    CSS Howto..

    How to add inset box-shadow to mapbox-div?

    How can I make a div 100% of the browser window height, but with a top and bottom margin?

    How to make equal space between boxes in one row via CSS

    How to make the float left and float right on the same line?

    How can I hide a button when scrolled to the top of a page?

    How to programmatically apply CSS definitions to the whole page?

    How to use regex to match css elements

    How to achieve navigation mouseover effect like in screenshot [closed]

    How to set z-index in css background

    How do I use CSS to add a non-rectangular border around an image?

    How to change the css of a div using the click function on jQuery, but however twice instead of once?

    How to reverse this CSS spin animation

    How to adjust height based on content css

    How Do I Make Large Quotation Marks Wrap Properly Around Quotations?

    how to solve IE6 box model problem without adding extra div and using Valid CSS?

    How to eliminate an annoying blue line in a border area of a hyperlink / h2 class with CSS

    CSS class is missed after jQuery replaceWith. How to fix?

    How to represent a Grid with vertical header text in HTML?

    How can I make this section of my webpage responsive? [closed]

    How can I change this CSS for desktop browsers only?

    How to add checkmarks and x's when validating in angularjs?

    How to vertically center a child element of arbitrary size inside a floated parent element (of known size)?

    How to override a templates default option with javascript and css

    How can I make this little javascript work with 2 textarea elements without killing the CSS?

    how to add a different text box in input text type

    How to to change CSS double class properties through script

    How to overlap images in the header section?

    How i can display the output of a rss feed in HTML format in a TWebBrowser?

    How to write a fallback for css files not loaded, loading too long and blocked? [duplicate]

    How to set the RadioButton icon style to nothing in CSS (in Flex 3)?