I am currently using ASP.NET to create a web form using HTML5 and CSS to style it. The code that I am using on the site.master for the navigation bar is as follows.
<body>
<header>
<div class="container">
<img src="TGASlogo.png" alt="logo" class="logo">
<nav>
<ul>
<li>Home Page</li>
<li>About</li>
<li>Contact</li>
<li>List1</li>
<li>List2</li>
<li>List3</li>
<li>List4</li>
<li>List5</li>
<li>Sign Up</li>
<li>Login</li>
</ul>
</nav>
</div>
</header>
<div>
</div>
</body>
and the style sheet is as follows.
body {
padding-left: 500px;
padding-right: 500px;
margin: 0;
background: #F0EFE8;
font-family: 'Work Sans', sans-serif;
font-weight: 300;
}
.container {
width:80%;
margin:0 auto;
}
header {
background: #FFD63C;
}
header::after {
content: '';
display:table;
clear:both;
}
.logo {
float:left;
padding:5px 0;
}
nav {
float:right;
}
nav ul {
margin:0;
padding:0;
list-style:none;
}
nav li {
display:inline-block;
margin-left:35px;
padding-top:35px;
position:relative;
}
nav a {
color:#444;
text-decoration:none;
text-transform:uppercase;
font-size:15px;
font-weight:500;
}
nav a:hover {
color:#FFF;
}
nav a::before {
content: '';
display: block;
height: 5px;
background-color: #FFF;
position: absolute;
top: 0;
width: 0%;
transition:all ease-in-out 250ms;
}
nav a:hover::before{
width:100%;
}
I am unsure as to why my navigation bar has randomly been squished as shown in the screenshot provided. is there any way that I can make the navigation bar re-adjust in size as people change their browser window size?
This is a screenshot of how the nav bar looks
Related
I've just started out with the basics of CSS and HTML, there's this problem that I am facing, In my Navbar , when I click on the Hamburger button , The properties that I had added to my text get reverted back to the default one , like the text-decoration changes to underline , How Do I Fix this?
HTML code
<html lang="en">
<head>
<title>My CSS Website</title>
<link href="styles.css" rel="stylesheet">
</head>
<body>
<nav>
<ul class="top-nav" id="dropdownMenu">
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li class="right-nav">Sign Up</li>
<li class="right-nav">Sign in</li>
<li class="dropdownIcon"><a href="javascript:void(0)" onclick="Hamburger()">☰</li>
</ul>
</nav>
<script>
function Hamburger(){
var x=document.getElementById("dropdownMenu");
if(x.className==="top-nav"){
x.className+="responsive";
}
else{
x.className="top-nav";
}
}
</script>
</body>
</html>
CSS
*{
margin:0;
padding:0;
}
nav,header,footer{
display: block;
}
body{
line-height: 1.5;
}
/* Navbar */
nav{
width:100%;
}
nav ul{
background-color: #eee;
overflow:hidden;
}
ul.top-nav li{
list-style:none;
float: left;
}
ul.top-nav li.right-nav{
min-height: 16px;
float: right;
}
ul.top-nav li a{
text-decoration: none;
padding: 1.25rem;
min-height:16px;
text-align: center;
text-transform: uppercase;
color:rgb(54, 49, 49);
display:block;
}
ul.top-nav li a:hover{
background-color: #0080ff;
color: #fff;
}
ul.top-nav li.dropdownIcon{
display: none;
}
/* Mobile Version */
#media screen and (max-width:680px){
ul.top-nav li:not(:nth-child(1)){
display:none;
}
ul.top-nav li.dropdownIcon{
display: block;
float:right;
}
ul.top-nav.responsive{
position:relative;
}
ul.top-nav.responsive li{
display: inline;
float:none;
}
ul.top-nav.responsive li a {
display:block;
text-align:left;
text-decoration: none;
}
} ```
Because you don't add class in the right way also change onclick, don't wrap function into the string "Hamburger()" use this Hamburger()
<li class="dropdownIcon"><a href="javascript:void(0)" onclick=Hamburger()>☰</li>
</ul>
*{
margin:0;
padding:0;
}
nav,header,footer{
display: block;
}
body{
line-height: 1.5;
}
/* Navbar */
nav{
width:100%;
}
nav ul{
background-color: #eee;
overflow:hidden;
}
ul.top-nav li{
list-style:none;
float: left;
}
ul.top-nav li.right-nav{
min-height: 16px;
float: right;
}
ul.top-nav li a{
text-decoration: none;
padding: 1.25rem;
min-height:16px;
text-align: center;
text-transform: uppercase;
color:rgb(54, 49, 49);
display:block;
}
ul.top-nav li a:hover{
background-color: #0080ff;
color: #fff;
}
ul.top-nav li.dropdownIcon{
display: none;
}
/* Mobile Version */
#media screen and (max-width:680px){
ul.top-nav li:not(:nth-child(1)){
display:none;
}
ul.top-nav li.dropdownIcon{
display: block;
float:right;
}
ul.top-nav.responsive{
position:relative;
}
ul.top-nav.responsive li{
display: inline;
float:none;
}
ul.top-nav.responsive li a {
display:block;
text-align:left !important;
text-decoration: none !important;
}
}
<nav>
<ul class="top-nav" id="dropdownMenu">
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li class="right-nav">Sign Up</li>
<li class="right-nav">Sign in</li>
<li class="dropdownIcon"><a href="javascript:void(0)" onclick={Hamburger()}>☰</li>
</ul>
</nav>
<script>
function Hamburger(){
var x=document.getElementById("dropdownMenu");
if(x.className==="top-nav"){
x.classList.add("responsive")
// x.className+=" "+"responsive";
}
else{
x.className="top-nav";
}
}
</script>
function Hamburger(){
var x=document.getElementById("dropdownMenu");
if(x.className==="top-nav"){
//add class like this
x.className+=" "+"responsive";
or
x.classList.add("responsive");
}
else{
x.className="top-nav";
}
}
JavaScript Class
if you want get class list then use classList and classList return list
const list = element.classList
if you want to add class then.
element.classList.add("class_name");
if you want to remove class then.
element.classList.remove("class_name");
if you want to toggle class then. (toggle check if class exist then remove class and else add class).
element.classList.toggle("class_name");
*{
margin:0;
padding:0;
}
nav,header,footer{
display: block;
}
body{
line-height: 1.5;
}
/* Navbar */
nav{
width:100%;
}
nav ul{
background-color: #eee;
overflow:hidden;
}
ul.top-nav li{
list-style:none;
float: left;
}
ul.top-nav li.right-nav{
min-height: 16px;
float: right;
}
ul.top-nav li a{
text-decoration: none;
padding: 1.25rem;
min-height:16px;
text-align: center;
text-transform: uppercase;
color:rgb(54, 49, 49);
display:block;
}
ul.top-nav li a:hover{
background-color: #0080ff;
color: #fff;
}
ul.top-nav li a:active{
background-color: #0080ff;
color: #fff;
}
ul.top-nav li.dropdownIcon{
display: none;
}
/* Mobile Version */
#media screen and (max-width:680px){
ul.top-nav li:not(:nth-child(1)){
display:none;
}
ul.top-nav li.dropdownIcon{
display: block;
float:right;
}
ul.top-nav.responsive{
position:relative;
}
ul.top-nav.responsive li{
display: inline;
float:none;
}
ul.top-nav.responsive li a {
display:block;
text-align:left;
text-decoration: none;
}
}
<head>
<title>My CSS Website</title>
<link href="styles.css" rel="stylesheet">
</head>
<body>
<nav>
<ul class="top-nav" id="dropdownMenu">
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li class="right-nav">Sign Up</li>
<li class="right-nav">Sign in</li>
<li class="dropdownIcon"><a href="javascript:void(0)" onclick="Hamburger()">☰</li>
</ul>
</nav>
<script>
function Hamburger(){
var x=document.getElementById("dropdownMenu");
x.classList.toggle("responsive");
}
</script>
</body>
I think this code is help you! thank you!
I want to get my nav bar to stick at the top when scrolling on the web page.
I have tried searching on here for a solution but am struggling as it is causing more errors.
When using position:fixed, I find that it causes issues with the original postion which I want to be below my banner logo.
My code for HTML and CSS is below.
Thank you
/* ******************* */
/* Navigiation */
/* ******************* */
#sitenav a {
text-decoration: none;
color: white;
padding: inherit;
}
#sitenav ul {
background: black;
padding: 15px;
}
#sitenav ul li {
padding: 15px;
background: black;
display: block;
text-align: center;
font-family: 'Montserrat', sans-serif;
display: inline;
}
#sitenav ul li:hover {
background: rgb(43, 78, 89);
color:white;
cursor:pointer;
}
<header class="clearfix">
<div id="banner" class="middlecontent">
<img src="images/logobanner.png">
</div>
<nav>
<div id="sitenav">
<ul >
<li>Home</li>
<li>Events</li>
<li>Curriculum</li>
<li>About</li>
<li>Student</li>
<li>Staff</li>
</ul>
</div>
</nav>
</header>
If you don't need to support older browsers, you can use position: sticky
https://developer.mozilla.org/pl/docs/Web/CSS/position#Sticky_positioning
Please try this I have added some code.
JQuery:
$(window).scroll(function () {
var scroll = $(window).scrollTop();
if (scroll >= ($("header").height())) {
$("#sitenav").addClass("fix-header");
} else {
$("#sitenav").removeClass("fix-header");
}
});
Css:
body{
margin:0;
}
section{
background:#ccc;
height:800px;
}
#sitenav.fix-header {
position: fixed;
width: 100%;
left: 0;
right: 0;
top: 0;
margin:0;
}
#sitenav.fix-header ul{
margin:0;
}
$(window).scroll(function () {
var scroll = $(window).scrollTop();
if (scroll >= ($("header").height())) {
$("#sitenav").addClass("fix-header");
} else {
$("#sitenav").removeClass("fix-header");
}
});
/* ******************* */
/* Navigiation */
/* ******************* */
#sitenav a {
text-decoration: none;
color: white;
padding: inherit;
}
#sitenav ul {
background: black;
padding: 15px;
}
#sitenav ul li {
padding: 15px;
background: black;
display: block;
text-align: center;
font-family: 'Montserrat', sans-serif;
display: inline;
}
#sitenav ul li:hover {
background: rgb(43, 78, 89);
color:white;
cursor:pointer;
}
body{
margin:0;
}
section{
background:#ccc;
height:1000px;
}
#sitenav.fix-header {
position: fixed;
width: 100%;
left: 0;
right: 0;
top: 0;
margin:0;
}
#sitenav.fix-header ul{
margin:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="clearfix">
<div id="banner" class="middlecontent">
<img src="images/logobanner.png">
</div>
<nav>
<div id="sitenav">
<ul>
<li>Home</li>
<li>Events</li>
<li>Curriculum</li>
<li>About</li>
<li>Student</li>
<li>Staff</li>
</ul>
</div>
</nav>
</header>
<!--this for demo for checking scroll-->
<section>
</section>
You should try this code.
$(window).ready(function() {
var header = $('nav').innerHeight();
var window_scroll = $(window).scrollTop();
if (window_scroll >= header) $("nav").addClass("sticky");
else $("header").removeClass("nav");
})
$(window).on("scroll", function() {
var header = $('nav').innerHeight();
var scroll = $(window).scrollTop();
if (scroll >= header) $("nav").addClass("sticky");
else $("nav").removeClass("sticky");
});
nav{
position:absolute;
width:100%;
height:50px;
top:0;
left:0;
}
nav.sticky{
position:fixed;
width:100%;
z-index:99;
top:0;
left:0;
}
#sitenav a {
text-decoration: none;
color: white;
padding: inherit;
}
#sitenav ul {
background: black;
padding: 15px;
}
#sitenav ul li {
padding: 15px;
background: black;
display: block;
text-align: center;
font-family: 'Montserrat', sans-serif;
display: inline;
}
#sitenav ul li:hover {
background: rgb(43, 78, 89);
color:white;
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<header class="clearfix">
<div id="banner" class="middlecontent">
<img src="images/logobanner.png">
</div>
<nav>
<div id="sitenav">
<ul >
<li>Home</li>
<li>Events</li>
<li>Curriculum</li>
<li>About</li>
<li>Student</li>
<li>Staff</li>
</ul>
</div>
</nav>
</header>
</body>
</html>
I need some help. I am working on this navigation bra that has a list of menu in it, and one of them is Award. Award has submenu that is hidden, and if I hover it, it submenu should be visible to the user. However, when I hover over the Award, it submenu not being visible to the user. I don't what I am doing wrong. I was hopping that someone could help me here, Please.
Here is my code
function openNav() {
document.getElementById("nav_sidebar").style.width = "142px";
document.getElementById("main").style.height = "142px";
}
function closeNav() {
document.getElementById("nav_sidebar").style.width = "0";
document.getElementById("main").style.height= "0";
}
.sidebar {
width: 0;
list-style: none;
position: absolute;
height: 100%;
z-index: 0;
left: 2px;
background: #38424f;
overflow-x: hidden;
transition: 0.5s;
padding-top: 10px;
}
.sidebar ul
{
list-style:none;
position:relative;
float:left;
margin:0;
padding:0
}
.sidebar ul li:hover {
background:#f6f6f6
}
.sidebar ul {
display:none;
position: absolute;
left: 5%;
background: #fff;
padding:0
}
.sidebar ul li {
float:none;
width:200px
}
.sidebar li ul:hover
{
display: block;
}
.sidebar li a {
padding: 5px 8px 8px 15px;
text-decoration: none;
font-size: 22px;
color: #4ba6c1;
display: block;
transition: 0.3s
}
.sidebar a:hover, .offcanvas a:focus{
color: #ffffff;
}
.sidebar .close {
position: absolute;
top: 0;
right: 10px;
font-size: 20px;
margin-left: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Admin</title>
<meta charset="utf-8">
<script src="../src//jquery/jquery.min.js"></script>
<link href="../css/Main.css" rel="stylesheet">
<script src="../javascript/Scritp.js"></script>
</head>
<body>
<div class ="side_nave">
<label class = "nav" onclick="openNav()">☰ Menu</label>
<div class="main_panel" id = "main">
<div class="sidebar" id = "nav_sidebar">
<li><a href="javascript:void(0)" class="close" onclick=
"closeNav()">×</a></li>
<li><a class ="active" href="#">Employee</a></li>
<li>Awards
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
</ul>
</li>
<li>Certificate</li>
<li>Update</li>
<li>Sent Email</li>
<li>Settings</li>
<li>Logout</li>
</div>
</div>
</div>
</body>
</html>
You're targeting .sidebar li ul:hover to show the hidden ul. That won't work because the ul you want to hover is hidden - you can't hover the element if it's hidden. Instead, you need to target .sidebar li:hover > ul which means that when you hover a li it will show any direct child ul's
function openNav() {
document.getElementById("nav_sidebar").style.width = "142px";
document.getElementById("main").style.height = "142px";
}
function closeNav() {
document.getElementById("nav_sidebar").style.width = "0";
document.getElementById("main").style.height= "0";
}
.sidebar {
width: 0;
list-style: none;
position: absolute;
height: 100%;
z-index: 0;
left: 2px;
background: #38424f;
overflow-x: hidden;
transition: 0.5s;
padding-top: 10px;
}
.sidebar ul
{
list-style:none;
position:relative;
float:left;
margin:0;
padding:0
}
.sidebar ul li:hover {
background:#f6f6f6
}
.sidebar ul {
display:none;
position: absolute;
left: 5%;
background: #fff;
padding:0
}
.sidebar ul li {
float:none;
width:200px
}
.sidebar li:hover > ul
{
display: block;
}
.sidebar li a {
padding: 5px 8px 8px 15px;
text-decoration: none;
font-size: 22px;
color: #4ba6c1;
display: block;
transition: 0.3s
}
.sidebar a:hover, .offcanvas a:focus{
color: #ffffff;
}
.sidebar .close {
position: absolute;
top: 0;
right: 10px;
font-size: 20px;
margin-left: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Admin</title>
<meta charset="utf-8">
<script src="../src//jquery/jquery.min.js"></script>
<link href="../css/Main.css" rel="stylesheet">
<script src="../javascript/Scritp.js"></script>
</head>
<body>
<div class ="side_nave">
<label class = "nav" onclick="openNav()">☰ Menu</label>
<div class="main_panel" id = "main">
<div class="sidebar" id = "nav_sidebar">
<li><a href="javascript:void(0)" class="close" onclick=
"closeNav()">×</a></li>
<li><a class ="active" href="#">Employee</a></li>
<li>Awards
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
</ul>
</li>
<li>Certificate</li>
<li>Update</li>
<li>Sent Email</li>
<li>Settings</li>
<li>Logout</li>
</div>
</div>
</div>
</body>
</html>
You can even solve this without JavaScript:
<li>Awards
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
</ul>
</li>
#awards ul{
display:none;
}
#awards:hover ul{
display:block;
}
I have an existing website with the menu code below and I want to add more stuff to my site but users need to nevigate to those pages please help me to add a sub menu to the code I have. Please help?
HTML
<div id="menu">
<ul>
<li>Home</li>
<li>Services</li>
<li>FAQ</li>
<li class="active">About</li>
<li>Contact Us</li>
</ul>
</div>
CSS
/** HEADER */
#header-wrapper
{
overflow: none;
height: 100px;
margin-bottom: 20px;
background: rgba(0,0,0,0.70);
}
#header {
overflow: none;
}
/** LOGO */
#logo {
float: left;
width: 10px;
height: 100px;
}
#logo h1, #logo p {
margin: 0px;
line-height: normal;
}
#logo h1 a {
padding-left: 1px;
text-decoration: none;
font-size: 1.50em;
font-weight: 600;
font-family: 'Archivo Narrow', sans-serif;
color: #FFFFFF
}
/** MENU */
#menu {
float: right;
height: 110px;
}
#menu ul {
margin: 0px;
padding: 0px;
list-style: none;
line-height: normal;
}
#menu li {
float: left;
margin-right: 1px;
}
#menu a {
display: block;
height: 100px;
padding: 0px 30px;
line-height: 100px;
text-decoration: none;
text-transform: uppercase;
color: #FFFFFF;
}
#menu a:hover {
text-decoration: none;
background: rgba(0,0,0,0.70);
}
#menu .active
{
background: rgba(0,0,0,0.70);
}
Working menu:
a quick fiddle for you
//HTML
<div id="menu">
<ul>
<li>Home
</li>
<li>Services
<ul>
<li>Something You do
</li>
<li>TODO
</li>
</ul>
</li>
<li>FAQ
</li>
<li class="active">About
</li>
<li>Contact Us
</li>
</ul>
</div>
//CSS
/** MENU */
#menu {
position:relative;
height: 110px;
}
#menu ul {
margin: 0px;
padding: 0px;
float:left;
line-height: 110px;
}
#menu li {
list-style:none;
}
#menu>ul>li {
float: left;
margin-right: 1px;
position:relative;
}
#menu>ul>li ul {
height:100%;
position:absolute;
bottom:-100%
}
#menu>ul>li ul>li {
bottom:0px;
display:none;
width:15em;
float:left;
}
#menu>ul>li:hover ul>li {
display:block
}
#menu a {
display:block;
padding: 0px 30px;
text-decoration: none;
text-transform: uppercase;
color: #FFFFFF;
background:rgba(200, 200, 200, 0.5);
}
#menu a:hover {
text-decoration: none;
cursor:pointer;
background:rgba(200, 200, 200, 1);
}
#menu .active {
}
Better to use jQuery plugin like Superfish
http://users.tpg.com.au/j_birch/plugins/superfish/
//link to the CSS files for this menu type
<link rel="stylesheet" media="screen" href="superfish.css">
// link to the JavaScript files (hoverIntent is optional)
// if you use hoverIntent, use the updated r7 version (see FAQ)
<script src="hoverIntent.js"></script>
<script src="superfish.js"></script>
// initialise Superfish
<script>
jQuery(document).ready(function(){
jQuery('#menu ul').superfish();
});
</script>
Well, first add your submenu in the markup, for example:
<li>Services
<ul>
<li> sub menu item 1 </li>
<li> sub menu item 2 </li>
</ul>
</li>
....
Position your list items:
#menu li{
position: relative;
}
Style your sub menu:
#menu ul ul{
position:absolute;
left: 0;
top: 100px; /* height of the parent list item */
display: none; /* hide it */
}
#menu li:hover > ul{ /* show it when mouse is over the parent list item */
display:block;
}
Try http://jsfiddle.net/9LcfX/
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>Home</li>
<li>About Us
<ul>
<li>Our Crew</li>
<li>History</li>
<li>Vision</li>
</ul>
</li>
<li>Services
<ul>
<li>Carpentry</li>
<li>Waterproofing</li>
<li>Concrete</li>
<li>Masonry</li>
<li>Property Maintenance</li>
<li>Metal Construction</li>
<li>Interior Design</li>
<li>Demo & Salvage</li>
</ul>
</li>
<li>Portfolio
</li>
<li>Contact
<ul>
<li>Via Email</li>
<li>Web Form</li>
<li>Carrier Pigeon</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 */
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.
You need to add 2 images, some texts, and social networking buttons.
<header>
<img id="img1" src="" />
<img id="img2" src="" />
<div id="text">
<span id="title">GARY MANN LLC</span>
<span id="description">Residential Contractor</span>
</div>
<div id="social">
</div>
</header>
CSS:
header {
width:100%;
height:110px;
background-color:#FF6600;
border-bottom:2px solid black;
}
#img1
{
float:left;
width:100px;
height:100px;
}
#img2
{
float:left;
width:100px;
height:100px;
margin-left:5px; //If you want some space between them
}
#text
{
float:left;
margin-left:10px;
}
#title
{
font-weight:20px;
float:left;
}
#description
{
font-weight:10px;
float:left;
clear:both;
}
#social
{
float:right;
}
Check this http://jsfiddle.net/5KRbh/
There are several ways. If you cannot change the html, try the :before selector.
header {
position:relative;
background: url(image.gif) no-repeat top left;
padding-left:200px;
}
header:before {
content:url(image.gif);
top: 0;
left: 100px;
position: absolute;
z-index: -1;
}