hello, Please see image, i have to make red box text aligned with "my heading", right now i have fixed this manually but when i resize the window it's going outside.
I know i can make it align if i do not use position absolute but its necessary to use position absolute because i have to call this section dynamically on each page.
so what should i do for this ??
this is my code
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body{
margin:0px;
}
.name-list{
position: absolute;
right: 167px;
}
.name-list ul{
list-style: none; padding-left: 0px;
}
.name-list ul li{
float: left; padding-right: 10px;
background:red; color: white;
}
.box{
background:#38383d; padding: 10px; float: right; color: white; width:20%;
}
</style>
</head>
<body>
<div class="name-list">
<ul>
<li >Name</li>
<li>Surname</li>
</ul>
</div>
<div class="box">
<br>
<h2>My Heading</h2>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body{
margin:0px;
}
.name-list{
position: absolute;
}
.name-list ul{
list-style: none; padding-left: 0px;
}
.name-list ul li{
float: left; padding-right: 10px;
background:red; color: white;
}
.box{
background:#38383d; padding: 10px; float: right; color: white; width:20%;
}
</style>
</head>
<body>
<div class="box">
<div class="name-list">
<ul>
<li >Name</li>
<li>Surname</li>
</ul>
</div>
<br>
<h2>My Heading</h2>
</div>
</body>
<style type="text/css">
body{
margin:0px;
}
.name-list{
position: absolute;
}
.name-list ul{
list-style: none; padding-left: 0px;
}
.name-list ul li{
float: left; padding-right: 10px;
background:red; color: white;
}
.box{
background:#38383d; padding: 10px; float: right; color: white;
}
</style>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="box">
<div class="name-list">
<ul>
<li >Name</li>
<li>Surname</li>
</ul>
</div>
<br>
<h2>My Heading</h2>
</div>
</body>
I think this will help you..
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body{
margin:0px;
}
.name-list{
position: absolute;
left: 10px;
}
.name-list ul{
list-style: none; padding-left: 0px;
}
.name-list ul li{
float: left; padding-right: 10px;
background:red; color: white;
}
.box{
padding: 10px; float: right; color: white; width:250px;
}
.custom {background:#38383d;display: inline-flex;float: right;position: relative; }
</style>
</head>
<body>
<div class='custom'>
<div class="name-list">
<ul>
<li >Name</li>
<li>Surname</li>
</ul>
</div>
<div class="box">
<br>
<h2>My Heading</h2>
</div>
</div>
</body>
</html>
Since you can't change your html the best route would be to use percentages to place and size your .name-list
I've got the best results with this code:
.name-list{
position: absolute;
right: 3%;
width:18%
}
Code snippet:
body{
margin:0px;
}
.name-list{
position: absolute;
right: 3%;
width:18%
}
.name-list ul{
list-style: none;
padding-left: 0px;
}
.name-list ul li{
float: left;
padding-right: 10px;
background:red;
color: white;
}
.box{
background:#38383d;
padding: 10px;
float: right;
color: white;
width:20%;
}
<div class="name-list">
<ul>
<li >Name</li>
<li>Surname</li>
</ul>
</div>
<div class="box">
<br>
<h2>My Heading</h2>
</div>
Unfortunately that's the best I can do without tinkering with your html.
use these css to get your result, hope this will helpful to you.
body {
margin: 0px;
}
.name-list {
position: absolute;
left: 10px;
}
.name-list ul {
list-style: none;
padding-left: 0px;
}
.name-list ul li {
float: left;
padding-right: 10px;
background: red;
color: white;
}
.box {
background: #38383d;
padding: 10px;
float: right;
color: white;
width: 20%;
position:relative;
}
<html>
<body>
<div class="box">
<div class="name-list">
<ul>
<li >Name</li>
<li>Surname</li>
</ul>
</div>
<br>
<h2>My Heading</h2>
</div>
</body>
</html>
Related
I am having some problems with floated nav. As can be seen in the first image below, I use position in my code and the result is that the nav is floated above the logo when I scaled the browser.
But I want the nav and the logo to be separated (like the second image) whenever I scale the browser. What should I do?
Are there any other ways to do that without using float?
This my my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css">
<style>
.wrapper{
max-width: 1600px;
margin: 0 auto;
}
header{
background-color: lightgray;
overflow: hidden;
padding: 20px;
position: relative;
}
header .logo{
float: left;
}
header nav{
float: right;
position: absolute;
}
header li{
float: left;
margin: 0px 5px 0px 5px;
}
header a{
text-decoration: none;
font-weight: bold;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<div class="wrapper">
<header>
<div class="logo">
<img src="images\logo.png" alt="logo">
</div>
<nav>
<ul>
<li>HOMEPAGE</li>
<li>INTRODUCTION</li>
<li>PRODUCTS</li>
<li>PRICING</li>
<li>CONTACT</li>
</ul>
</nav>
</header>
</div>
</body>
</html>
There are many ways to do that. Here's one:
Add this to your style:
nav {margin-left: 50px;}
Here is one version where nav floats right: jsfiddle
CSS:
.wrapper{
max-width: 1600px;
margin: 0 auto;
}
header{
background-color: lightgray;
overflow: hidden;
padding: 20px;
position: relative;
}
header .logo{
float: left;
margin-left: 50px;
}
/* width is set to 80% and nav floats right, no pos absolute */
header nav{
float: right;
width: 80%;
}
header li{
float: left;
margin: 0px 5px 0px 5px;
}
header a{
text-decoration: none;
font-weight: bold;
color: white;
padding: 10px;
}
This is other method using display:flex.
.wrapper{
max-width: 1600px;
margin: 0 auto;
}
header{
background-color: lightgray;
overflow: hidden;
padding: 20px;
position: relative;
}
header {
display: flex !important;
justify-content: space-between;
}
.logo img {
height: auto;
max-height: 100%;
max-width: 100%;
width: auto;
}
header li{
float: left;
margin: 0px 5px 0px 5px;
}
header a{
text-decoration: none;
font-weight: bold;
color: white;
padding: 10px;
}
#media screen and (max-width:1024px){
.logo {
width: 20%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css">
</head>
<body>
<div class="wrapper">
<header>
<div class="logo">
<img src="https://dummyimage.com/250x150/000/fff&text=logo" alt="logo">
</div>
<nav>
<ul>
<li>HOMEPAGE</li>
<li>INTRODUCTION</li>
<li>PRODUCTS</li>
<li>PRICING</li>
<li>CONTACT</li>
</ul>
</nav>
</header>
</div>
</body>
</html>
You might need to adjust the widths a little bit. You can add max-width and min-with to both your logo and nav too.
.wrapper{
max-width: 1600px;
margin: 0 auto;
}
header{
background-color: lightgray;
overflow: hidden;
padding: 20px;
position: relative;
}
/* add the width and margin to your logo class*/
header .logo{
float: left;
margin-right:2%;
width:26%;
}
/* make sure your image has a width */
header .logo img{
width:100%;
}
/* add the width to your nav class */
header nav{
float: right;
width:70%;
padding-top:5%;
}
header li{
float: left;
margin: 0px 5px 0px 5px;
}
header a{
text-decoration: none;
font-weight: bold;
color: white;
padding: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css">
</head>
<body>
<div class="wrapper">
<header>
<div class="logo">
<img src="https://dummyimage.com/350x183/000/fff&text=logo" alt="logo">
</div>
<nav>
<ul>
<li>HOMEPAGE</li>
<li>INTRODUCTION</li>
<li>PRODUCTS</li>
<li>PRICING</li>
<li>CONTACT</li>
</ul>
</nav>
</header>
</div>
</body>
</html>
This is one method using float:
.wrapper{
max-width: 1600px;
margin: 0 auto;
}
header{
background-color: lightgray;
overflow: hidden;
padding: 20px;
position: relative;
}
header .logo{
float: left;
}
header nav {
float: right;
position: relative;
margin-top: 35px;
}
header li{
float: left;
margin: 0px 5px 0px 5px;
}
header a{
text-decoration: none;
font-weight: bold;
color: white;
padding: 10px;
}
img {
height: auto;
max-height: 100%;
max-width: 100%;
width: auto;
}
#media screen and (max-width:1169px){
header .logo {
width: 19%;
}
}
#media screen and (max-width:767px){
header .logo {
width: 15%;
}
header a {
padding: 5px;
font-size: 14px;
}
header nav {
margin-top: 15px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css">
</head>
<body>
<div class="wrapper">
<header>
<div class="logo">
<img src="https://dummyimage.com/350x183/000/fff&text=logo" alt="logo">
</div>
<nav>
<ul>
<li>HOMEPAGE</li>
<li>INTRODUCTION</li>
<li>PRODUCTS</li>
<li>PRICING</li>
<li>CONTACT</li>
</ul>
</nav>
</header>
</div>
</body>
</html>
I am new here and I am facing a very annoying problem which you would think could easily be fixed. But I have been trying to figure this out for the past hour.
Here is my problem, I have drawn a red box around it to indicate the problem -
See below
Here is the html code -
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="Darian Steyn">
<title>BMW</title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="container">
<div id="menu">
<img class="logo" src="img/logo.png"/>
<ul>
<nav>
<li><span>HOME</span></li>
<li><span>VEHICLES</span></li>
<li><span>MY BMW</span></li>
<h1>REGION</h1>
</nav>
</ul>
<div class="fix"></div>
</div>
<div id="slider">
<img src="img/bmwConcept2.jpg">
<div><img src="img/specials.png"></div>
<div class="fix"></div>
</div>
</div>
</body>
</html>
Here is the css -
/* my official site styles */
#menu
{
width: 100%;
height: 60px;
background-color: #232323;
float: right; /*Why when I added this here, did it push it to the top*/
font-family: 'Montserrat', sans-serif;
}
.logo
{
width: auto;
height: 80%;
float: left;
padding: 0.3% 0 0 0.3%;
}
ul
{
padding: 0.3%;
text-align: center;
list-style-type: none;
}
nav li
{
display: inline;
padding-right: 2%;
}
li a
{
text-decoration: none;
color: white;
}
li a:hover
{
color: #1F68A5;
}
nav h1
{
font-family: 'Montserrat', sans-serif;
float: right;
font-size: 100%;
color: white;
margin-top: -0.2em;
margin-right: 1em;
border-style: solid;
border-width: 0.15em;
border-color: white;
}
nav h1:hover
{
color: #1F68A5;
border-color: #1F68A5;
}
#slider
{
width: 100%;
float: left;
}
#slider img:first-child
{
height: 550px;
width:70%;
float: left;
}
#slider div
{
width:30%;
float: left;
margin-right: -2em;
}
.fix
{
clear: both;
}
I Appreciate the help!
Try this one...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="Darian Steyn">
<title>BMW</title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<style>
#menu
{
width: 100%;
height: 60px;
background-color: #232323;
float: right; /*Why when I added this here, did it push it to the top*/
font-family: 'Montserrat', sans-serif;
}
.logo
{
width: auto;
height: 80%;
float: left;
padding: 0.3% 0 0 0.3%;
}
ul
{
padding: 0.3%;
text-align: center;
list-style-type: none;
}
nav li
{
display: inline;
padding-right: 2%;
}
li a
{
text-decoration: none;
color: white;
}
li a:hover
{
color: #1F68A5;
}
nav h1
{
font-family: 'Montserrat', sans-serif;
float: right;
font-size: 100%;
color: white;
margin-top: -0.2em;
margin-right: 1em;
border-style: solid;
border-width: 0.15em;
border-color: white;
}
nav h1:hover
{
color: #1F68A5;
border-color: #1F68A5;
}
#slider
{
width: 100%;
float: left;
}
#slider img:first-child
{
width:70%;
}
#slider div
{
width:30%;
float: left;
margin-right: -2em;
}
.fix
{
clear: both;
}
</style>
</head>
<body>
<div class="container">
<div id="menu">
<img class="logo" src="img/logo.png"/>
<ul>
<nav>
<li><span>HOME</span></li>
<li><span>VEHICLES</span></li>
<li><span>MY BMW</span></li>
<h1>REGION</h1>
</nav>
</ul>
<div class="fix"></div>
</div>
<div id="slider">
<img src="img/bmwConcept2.jpg" style="width:70%">
<img src="img/specials.png" style="width:30%;float:right;">
<div class="fix"></div>
</div>
</div>
</body>
</html>
This is badly formatted, dunno if it is the fix to your problem, but needs to be changed.
<ul>
<nav>
<li><span>HOME</span></li>
<li><span>VEHICLES</span></li>
<li><span>MY BMW</span></li>
<h1>REGION</h1>
</nav>
</ul>
should be at least this:
<nav>
<ul>
<li><span>HOME</span></li>
<li><span>VEHICLES</span></li>
<li><span>MY BMW</span></li>
</ul>
<h1>REGION</h1>
</nav>
Without linking to the site and seeing the size of the images, I think your problem is with the CSS that deals with the slider.
#slider img:first-child
{
height: 550px;
width:70%;
float: left;
}
#slider div
{
width:30%;
float: left;
margin-right: -2em;
}
I would start with removing the width and margin settings as I expect that is causing the problem and remove the first child part. First focus on getting the slider working as per the maker of the sliders css, then add your own.
I just started learning HTML and decided I wanted to try to build a simple blog. I decided I wanted a navigation bar with links to other HTML files. I thought I had done this perfectly until I ran it and discovered that only the "Home" link works (which is the HTML file that I had put the href tags in) the other 4 links showed up as links but weren't clickable. All the files are located in the same folder.
<head>
<title>Music Project</title>
<link href="MusicProject.css" rel="stylesheet" />
<div id="header">
<h1 align="center" style="margin-top: -155px"><img src="logo.png" alt="logo" id="logo" height="500" width="700" /></h1>
</div>
<div id="nav">
<ul>
<li>Home</li>
<li>Artists</li>
<li>Mixtapes/Albums</li>
<li>Suggestions</li>
<li>About</li>
</ul>
</div>
</head>
#header {
background-color: #888888;
height:380px;
margin:0px;
padding:0px;
}
body {
background-color: #C0C0C0;
margin:0px;
padding:0px;
}
#main {
overflow: auto;
}
#content {
float:left;
}
#side {
float:left;
}
#nav {
height: 42px;
background-color: #888888;
}
#nav ul {
list-style-type:none;
height:30px;
padding:0px;
margin:0px;
}
#nav ul li {
float:left;
margin:10px;
width:246px;
text-align:center;
font-family:"Arial";
font-size: 23px;
color: #00004B;
}
#nav ul li a {
display: inline;
width: 246px;
}
As said you need to place your <header>, and <content> in the <body> tags.
This should help you out:
<html lang="en">
<head>
<meta charset="utf-8">
<title>Music Project</title>
<link href="MusicProject.css" rel="stylesheet">
<style>
#header {
background-color: #888888;
height: 380px;
margin: 0px;
padding: 0px;
}
body {
background-color: #C0C0C0;
margin: 0px;
padding: 0px;
}
#main {
overflow: auto;
}
#content {
float: left;
}
#side {
float: left;
}
#nav {
height: 42px;
background-color: #888888;
}
#nav ul {
list-style-type: none;
height: 30px;
padding: 0px;
margin: 0px;
}
#nav ul li {
float: left;
margin: 10px;
width: 246px;
text-align: center;
font-family: "Arial";
font-size: 23px;
color: #00004B;
}
#nav ul li a {
display: inline;
width: 246px;
}
</style>
</head>
<body>
<header>
<div id="header">
<h1 style="margin-top: -155px; text-align:center;"><img src="logo.png" alt="logo" id="logo" height="500" width="700" /></h1>
</div>
<div id="nav">
<ul>
<li>Home</li>
<li>Artists</li>
<li>Mixtapes/Albums</li>
<li>Suggestions</li>
<li>About</li>
</ul>
</div>
</header>
<content>
<!-- Page content here -->
</content>
</body>
</html>
Fiddle
Here is a link to help you learn the basics. Link
#google1 {
width: 30%;
height: 30%;
}
#google {
text-align: center;
margin: 200px auto;
position: relative;
}
#gsearch {
height: 30px;
width: 50%;
}
#form {
text-align: center;
top: -30px;
position: relative;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
display: inline;
}
li {
float: left;
}
a {
display: block;
width: 60px;
color: #7e7070;
}
a:link {
text-decoration: none
}
a:visited {
text-decoration: none
}
#topbar {
position: relative;
right: 0;
top: 0;
margin-right: 200px;
}
#grid,
#bell {
opacity: 0.4;
}
<html>
<head>
<meta charset="utf-8"/>
<title>GOOGLE</title>
<link rel="stylesheet" href="styleg.css"/>
</head>
<body>
<div id="wrapper">
<div id="google">
<img src="google1.jpg" img id="google1" alt="google1"/>
<div id="form">
<form action="" method="post" name="gsearch"></form>
<input type="text" input id="gsearch" name="gsearch">
</div>
</div>
</div>
<div id="topbar">
<ul>
<li>Shan</li>
<li>Gmail</li>
<li>Images</li>
<li><img src="grid.png" alt="grid" img id="grid"></li>
<li><img src="bell.png" alt="bell" img id="bell"></li>
</ul>
</div>
</body>
What I want to do is align the bell.png and grid.png with the other text links to the top right of how google home page would look like.
Right now it displays at the bottom left inline. I have tried absolute positioning, but then I would have to fine tune it with top and left adjustments to get it right.
Q: Is there a simpler way of moving the entire block to the top right and align it?
HTML
<html>
<head>
<meta charset="utf-8"/>
<title>GOOGLE</title>
<link rel="stylesheet" href="styleg.css"/>
</head>
<body>
<div id="wrapper">
<div id="google">
<img src="google1.jpg" img id="google1" alt="google1"/>
<div id="form">
<form action="" method="post" name="gsearch"></form>
<input type="text" input id="gsearch" name="gsearch">
</div>
</div>
</div>
<div id="topbar">
<ul>
<li>Shan</li>
<li>Gmail</li>
<li>Images</li>
<li><img src="grid.png" alt="grid" img id="grid"></li>
<li><img src="bell.png" alt="bell" img id="bell"></li>
</ul>
</div>
</body>
CSS code is as follows:
#google1{
width:30%;
height:30%;
}
#google{
text-align: center;
margin:200px auto;
position: relative;
}
#gsearch{
height:30px;
width:50%;
}
#form{
text-align: center;
top:-30px; position:relative;
}
ul{
list-style-type:none;
margin:0;
padding:0;
display:inline;
}
li{
float:left;
}
a{
display:block;
width:60px;
color:#7e7070;
}
a:link{text-decoration: none}
a:visited{text-decoration: none}
#topbar{
position:relative; right:0; top:0; margin-right: 200px;
}
#grid, #bell{opacity:0.4;}
In your code, position: absolute is the way to go.
#google1 {
width: 30%;
height: 30%;
}
#google {
text-align: center;
margin: 200px auto;
position: relative;
}
#gsearch {
height: 30px;
width: 50%;
}
#form {
text-align: center;
top: -30px;
position: relative;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
display: inline;
}
li {
float: left;
}
a {
display: block;
width: 60px;
color: #7e7070;
}
a:link {
text-decoration: none
}
a:visited {
text-decoration: none
}
#topbar {
position: absolute;
right: 0;
top: 0;
}
#grid,
#bell {
opacity: 0.4;
}
<html>
<head>
<meta charset="utf-8"/>
<title>GOOGLE</title>
<link rel="stylesheet" href="styleg.css"/>
</head>
<body>
<div id="topbar">
<ul>
<li>Shan</li>
<li>Gmail</li>
<li>Images</li>
<li><img src="grid.png" alt="grid" img id="grid"></li>
<li><img src="bell.png" alt="bell" img id="bell"></li>
</ul>
</div>
<div id="wrapper">
<div id="google">
<img src="google1.jpg" img id="google1" alt="google1"/>
<div id="form">
<form action="" method="post" name="gsearch"></form>
<input type="text" input id="gsearch" name="gsearch">
</div>
</div>
</div>
</body>
I restructured your HTML and modified your CSS to place the nav elements at the top right. I set text-align:right on #topbar so that the items will be aligned to the right side. I also set the <li> elements to display:inline-block so that they will all appear on the same line but still accept some margin.
#google1 {
width: 30%;
height: 30%;
}
#google {
text-align: center;
margin: 200px auto;
position: relative;
}
#gsearch {
height: 30px;
width: 50%;
}
form#search_form {
text-align: center;
top: -30px;
position: relative;
}
#topbar {
text-align:right;
}
#topbar ul {
list-style:none;
margin: 0;
padding: 0;
}
#topbar ul li {
display:inline-block;
vertical-align:middle;
margin:0 0 0 1em;
}
#topbar ul li a {
color: #7e7070;
text-decoration: none
}
#topbar ul li a #grid,
#topbar ul li a #bell {
opacity: 0.4;
}
<div id="topbar">
<ul>
<li>Shan</li>
<li>Gmail</li>
<li>Images</li>
<li><img src="grid.png" alt="grid" img id="grid"></li>
<li><img src="bell.png" alt="bell" img id="bell"></li>
</ul>
</div>
<div id="wrapper">
<div id="google">
<img src="google1.jpg" id="google1" alt="google1" />
<form action="" method="post" name="gsearch" id="search_form">
<input type="text" input id="gsearch" name="gsearch">
</form>
</div>
</div>
Can anyone plese explain to me why my image in the footer css doesn't appear as the background? I have both a small unordered list that serves as a navigational menu and the footers main content floated to the left and right respectively, I feel like they are obstructing, however I figured their default value would be transparent.... Any hints please? I am new to this.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>title</title>
<style type="text/css" media="screen, print, projection">
body{
background: #DAA520;
}
#wrap {
width:1000px;
margin:0 auto;
background: white;
}
#alldivs{
}
#header{
background: blue;
height: 150px;
}
#nav{
background: yellow;
padding: 0px;
margin: 0px;
background:white repeat-x;
width:100%;
float:left;
border: 1px solid #42432d;
border-width:1px 0;
}
#nav li{
display: inline;
padding: 0px;
margin: 0px;
}
#nav a:link,
#nav a:visited {
color:#000;
background:#FFFFF0;
float:center;
width:auto;
border-right:1px solid #42432d;
text-decoration:none;
font:bold 1em/1em Arial, Helvetica, sans-serif;
text-transform:uppercase;
}
#nav a:hover,
#nav a:focus {
color:#fff;
background:blue;
}
#main{
background: white;
float: left;
width: 780px;
padding: 10px;
}
#sidebar{
background: gray;
float: right;
padding: 10px;
width: 180px;
}
#footer{
width: 1000px;
height: 150px;
clear: both;
background-image:url(linktopicture.jpg);
}
#footernav li{
display: inline;
}
#footernav a:link,
#footernav a:visited {
color:gray;
text-decoration:none;
text-transform:uppercase;
padding-left: 15px;
}
#footer ul{
float: left;
width: 500px;
margin: 0px;
padding-top: 35px;
padding-bottom: 3px
text-align: left;
}
#footercontent {
width: 490px:
float: right;
text-align: right;
padding-right: 10px;
padding-top: 5px;
padding-bottom: 0px;
}
</style>
</head>
<body>
<br>
<div id="alldivs">
<div id ="wrap">
<div id="header"><img src="linktopicture" alt="text"/> </div>
<ul id="nav">
<li id="home">HOME</li>
<li id="services">SERVICES</li>
<li id="contact">CONTACT</li>
</ul>
<div id="main"><p>
main content
</p></div>
<div id="sidebar">sidebar space</div>
<div id="footer">
<ul id="footernav">
<li id="footernavhome">HOME</li>
<li id="footernavservices">SERVICES</li>
<li id="footernavcontact">CONTACT</li>
</ul>
<div id="footercontent">
<p>
blahh
</br>
blahhh
</p>
</div>
</div>
</div>
</div>
</body>
</html>
You need to contain and clear your floats in the footer, which will allow the background to appear.
Here's an overly-simplified example from your original markup:
<div id="footer">
<ul id="footernav">
...
</ul>
<div id="footercontent">
...
</div>
<!-- Here's the Magic -->
<br style="clear: both; display: block;" />
</div>
There are many ways to clear floated elements, but arguably the most common and easiest to implement is the clearfix approach — or the updated and highly-recommended micro clearfix method.
An example of using a "clearfix" would become:
<div id="footer" class="clearfix">
<ul id="footernav">
...
</ul>
<div id="footercontent">
...
</div>
</div>
if you do not want a full break, add:
<span class="cleaAll"></span>
To your html where RJB said, add:
.clearAll {
display:block;
height:1px;
}
To your css,
Hope it helps.