I'm new to web dev and need some help figuring out this simple issue. The menu items move below the name when resized, can some tell me where I messed up?
I've been reading some other solutions and get the idea but just can't find my error.
>
<!doctype html>
<html>
<head>
<title>About</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
* {
font-family: Lucida Sans Unicode, Lucida Grande, sans-serif;
}
body {
background-color: #FAFAFA;
color: #2E2E2E;
}
#topmenu {
float: right;
padding-top: 10px;
position: relative;
}
#topmenu ul {
list-style:none;
width: auto;
}
#topmenu li {
float:left;
padding: 5px 10px 0px 20px;
margin-right: 20px;
border-right: 1px solid #47008F;
text-decoration: underline;
}
a:hover {
font-size: 20px;
}
a:link {
color: #47008F;
}
#name {
margin-bottom: 10px;
padding-left: 20px;
color: #47008F;
display:inline-block;
}
#topcontainer {
width: 100%;
background-color: #A4A4A4;
height: 60px;
margin-bottom: 5px;
font-family: Lucida Grande;
margin-right: 50px;
border-radius: 25px;
float: left;
}
#break {
background-color:#47008F;
height: 1px;
margin-bottom:5px;
clear: both;
}
#midcontainer {
clear:both
padding-left: 50px
}
#midcontainer img {
position: relative;
height:300px;
padding: 20px 200px 50px 200px;
float: left;
padding-right:50px;
}
#bio {
padding-top: 75px;
position: relative;
}
</style>
</head>
<body>
<div id="topcontainer">
<h1 id="name">Robert</h1>
<div id="topmenu">
<ul>
<li>About</li>
<li>Resume</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
<div id="break"></div>
</div>
<div id="midcontainer">
<img src="images/me.jpg"/>
<div id="bio">
<p>
<h3> Text goes here.............</h3>
<p>
something
</p>
</p>
</div>
</div>
</body>
</html>
I have commented the "height" of top container, and removed an unwanted closing div tag. It works in Chrome.
<!doctype html>
<html>
<head>
<title>About</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
* {
font-family: Lucida Sans Unicode, Lucida Grande, sans-serif;
}
body {
background-color: #FAFAFA;
color: #2E2E2E;
}
#topmenu {
float: right;
padding-top: 10px;
position: relative;
}
#topmenu ul {
list-style:none;
width: auto;
}
#topmenu li {
float:left;
padding: 5px 10px 0px 20px;
margin-right: 20px;
border-right: 1px solid #47008F;
text-decoration: underline;
}
a:hover {
font-size: 20px;
}
a:link {
color: #47008F;
}
#name {
margin-bottom: 10px;
padding-left: 20px;
color: #47008F;
display:inline-block;
}
#topcontainer {
width: 100%;
background-color: #A4A4A4;
/*height: 60px;*/
margin-bottom: 5px;
font-family: Lucida Grande;
margin-right: 50px;
border-radius: 25px;
float: left;
}
#break {
background-color:#47008F;
height: 1px;
margin-bottom:5px;
clear: both;
}
#midcontainer {
clear:both
padding-left: 50px
}
#midcontainer img {
position: relative;
height:300px;
padding: 20px 200px 50px 200px;
float: left;
padding-right:50px;
}
#bio {
padding-top: 75px;
position: relative;
}
</style>
</head>
<body>
<div id="topcontainer">
<h1 id="name">Robert</h1>
<div id="topmenu">
<ul>
<li>About</li>
<li>Resume</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
<div id="break"></div>
</div>
<div id="midcontainer">
<img src="images/me.jpg" />
<div id="bio">
<p>
<h3>Text goes here.............</h3>
<p>
something
</p>
</p>
</div>
</div>
</body>
</html>
I needed to add another div wrapping all my html and set the margins to auto and a width of 960px. Solved!
Related
I want to create a homepage where you see an image at first with the actual navigation bar on the bottom of the browser. When you scroll down the navigation should stick to the top when it reaches the top of the browser.
I got 1 Logo on the left of the screen and the navigation on the right. The navigation should have a background as a bar across the screen and the logo should overlap this. When I scroll down i first want the logo (which is for example 250px high) to stick to the top and then when i further scroll down i want the navigation + background (about 100px) also to stick to the top. I don't know why the white space is generated either. Between the first and the second picture there should only be about 100px (the height of the grey bar(navigation bar). With this code everything except the background bar works..
#charset "utf-8";
*{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
.top-container{
position: absolute;
width: 100%;
}
.stopleft{
padding-top: 34%;
width: 50%;
margin: 0px 0px 0px 0px;
border: solid 0px #000;
float: left;
}
.stopright{
padding-top: 44.2%;
width: 50%;
margin: 0px 0px 0px 0px;
border: solid 0px #000;
float: right;
}
.whiteBarSmall{
width: 100%;
padding-top: 5%;
background-color: #fff;
position: absolute;
}
.logo{
position: sticky;
top: 0;
width: 50%;
float: left;
}
.navigation{
margin: 0px 0px 0px 0px;
border: solid 0px #000;
position: sticky;
top: 0;
width: 50%;
float: right;
}
.navigation ul{
height: 100px;
}
.button{
list-style: none;
margin: 25px 20px 25px 20px;
float: right;
}
.navBackground{
border: solid 0px #000;
position: sticky;
top: 0;
width: 100%;
padding-top: 5%;
background-color: #a7a7a7;
float: right;
z-index: -1;
}
.whiteBarLarge{
width: 100%;
padding-top: 10%;
background-color: #fff;
}
.indexImage{
width: 100%;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky + .content {
padding-top: 102px;
}
footer{
width: 100%;
padding-top: 2.5%;
background-color: #a7a7a7;
}
.navigation a:link {
color: #000;
display: block;
text-align: center;
text-decoration: none;
font-family: 'Volkhov', sans-serif;
font-size: 30px;
}
.navigation a:visited {
color: #000;
display: block;
text-align: center;
text-decoration: none;
font-family: 'Volkhov', sans-serif;
font-size: 30px;
}
.navigation a:focus {
color: #000;
display: block;
text-align: center;
text-decoration: none;
font-family: 'Volkhov', sans-serif;
font-size: 30px;
}
.navigation a:hover {
color: #000;
display: block;
text-align: center;
text-decoration: none;
font-family: 'Volkhov', sans-serif;
font-size: 30px;
}
.navigation a:active {
color: #000;
display: block;
text-align: center;
text-decoration: none;
font-family: 'Volkhov', sans-serif;
font-size: 30px;
}
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<title>Test</title>
<meta name="description" content="…." />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="icon" href="pics/favicon.ico" />
<link rel="stylesheet" href="styles/basics.css" type="text/css" />
<link rel="stylesheet" href="styles/index.css" type="text/css" />
<link rel="stylesheet" href="styles/links.css" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Volkhov" rel="stylesheet">
</head>
<body>
<div class="top-container">
<img src="https://pre00.deviantart.net/e893/th/pre/i/2006/132/b/4/widescreen_dreamy_world_6th_by_grafixeye.jpg" alt="Test header" width="100%" />
</div>
<div class="stopleft"></div>
<div class="stopright"></div>
<div class="logo"><img src="https://png.icons8.com/ios/1600/external-link-squared-filled.png" alt="Logo" width="50%" /></div>
<div class="navigation">
<ul>
<li class="button">Über uns</li>
<li class="button">Kontakt</li>
<li class="button">Preise</li>
<li class="button">Blog</li>
<li class="button">Galerie</li>
</ul>
</div>
<div class="navBackground"></div>
<div class="indexImage">
<img src="http://www.hdwallpapery.com/static/images/dual-monitor-wallpapers-hd_dJyDicr.jpg" alt="" width="100%" />
</div>
<div class="whiteBarLarge">
</div>
<div class="indexImage">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRUPqqyzvnT6JVdDUeUgzDvX9tUpwjKv59spOBgVdYtf-2EaLhD" alt="" width="100%" />
</div>
<div class="whiteBarLarge"></div>
<footer></footer>
</body>
</html>
I am having a lot of trouble with this bar...
Hope someone can help me. Thanks!
Is that what you want?
#charset "utf-8";
body {margin:0;}
.navbar {
overflow: hidden;
background-color: #808080;
position: fixed;
top: 0;
width: 100%;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background: #ddd;
color: black;
}
.main {
padding: 16px;
margin-top: 30px;
/* height: 1500px; */ /* Used in this example to enable scrolling */
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
</style>
</head>
<body>
<div class="navbar">
<img src="https://png.icons8.com/ios/1600/external-link-squared-filled.png" alt="Logo" class-="logo" height=50 width=50 style="float: left">
Galerie
Blog
Preise
Contact
Über uns
</div>
<div class="main">
<div class="top-container">
<img src="https://pre00.deviantart.net/e893/th/pre/i/2006/132/b/4/widescreen_dreamy_world_6th_by_grafixeye.jpg" alt="Test header" width="100%" />
</div>
<div class="indexImage">
<img src="http://www.hdwallpapery.com/static/images/dual-monitor-wallpapers-hd_dJyDicr.jpg" alt="" width="100%" />
</div>
<div class="whiteBarLarge">
</div>
<div class="indexImage">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRUPqqyzvnT6JVdDUeUgzDvX9tUpwjKv59spOBgVdYtf-2EaLhD" alt="" width="100%" />
</div>
<div class="whiteBarLarge"></div>
<footer></footer>
</div>
</body>
</html>
This question already has answers here:
How do you keep parents of floated elements from collapsing? [duplicate]
(15 answers)
Closed 5 years ago.
Trying to apply a background color to my header but why isn't the #header background color visible? I tried
header { background: grey; width: 100%; margin: 0 auto }
I also tried diffrent colors but it doesn't seem to be working. I'm new to this field so any help will be appreciated. I attached the html and css codes.
* {
margin: 0 auto
}
#slogan {
background: #063540;
color: white;
padding: 20px;
font-family: 'Open Sans', sans-serif;
font-size: small;
width: 100%;
padding-left: 8%;
}
#header {
background: grey;
width: 100%;
margin: 0 auto
}
a {
text-decoration: none;
}
#logo a {
color: #063540;
}
#logo {
float: left;
padding-left: 8%;
color: #063540;
margin-top: 20px;
}
.navbar {
float: right;
top: 0px;
padding-right: 20%;
margin-top: 20px;
}
.navbar a {
padding-left: 25px;
color: #063540;
font-size: 14pt;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<title>MyWebsite</title>
</head>
<body>
<p id="slogan">We are creative agency</p>
<div id="header">
<div id="logo">
<a href="/">
<h1>MyWebsite</h1>
</a>
</div>
<div class="navbar">
Home
About
Services
Projects
Pages
Blog
Contact
</div>
</div>
</body>
</html>
It because you have floating element in your header so you need to clear the float element.
The problem happens when a floated element is within a container box, that element does not automatically force the container’s height adjust to the floated element. When an element is floated, its parent no longer contains it because the float is removed from the flow.
Please refer this link for more understanding.
#header:before, #header:after {
content: "";
clear: both;
display: table;
}
*{
margin: 0 auto
}
#slogan {
background: #063540;
color: white;
padding: 20px;
font-family: 'Open Sans', sans-serif;
font-size: small;
width: 100%;
padding-left: 8%;
}
#header {
background: grey;
width: 100%;
margin: 0 auto
}
#header:before, #header:after {
content: "";
clear: both;
display: table;
}
a {
text-decoration: none;
}
#logo a {
color: #063540;
}
#logo {
float: left;
padding-left: 8%;
color: #063540;
margin-top: 20px;
}
.navbar {
float: right;
top: 0px;
padding-right: 20%;
margin-top: 20px;
}
.navbar a {
padding-left: 25px;
color: #063540;
font-size: 14pt;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<title>MyWebsite</title>
</head>
<body>
<p id="slogan">We are creative agency</p>
<div id="header">
<div id="logo"><h1>MyWebsite</h1></div>
<div class="navbar">
Home
About
Services
Projects
Pages
Blog
Contact
</div>
</div>
</body>
</html>
All elements inside #header are float, so #header get out of normal flow of document.
Method 1)
#header:after {
content: '';
display: block;
clear: both;
}
* {
margin: 0 auto
}
#slogan {
background: #063540;
color: white;
padding: 20px;
font-family: 'Open Sans', sans-serif;
font-size: small;
width: 100%;
padding-left: 8%;
}
#header {
background: grey;
width: 100%;
margin: 0 auto;
}
#header:after {
content: '';
display: block;
clear: both;
}
a {
text-decoration: none;
}
#logo a {
color: #063540;
}
#logo {
float: left;
padding-left: 8%;
color: #063540;
margin-top: 20px;
}
.navbar {
float: right;
top: 0px;
padding-right: 20%;
margin-top: 20px;
}
.navbar a {
padding-left: 25px;
color: #063540;
font-size: 14pt;
}
<p id="slogan">We are creative agency</p>
<div id="header">
<div id="logo"><h1>MyWebsite</h1></div>
<div class="navbar">
Home
About
Services
Projects
Pages
Blog
Contact
</div>
</div>
Method 2)
Insert <br style="clear: both"> to html code:
* {
margin: 0 auto
}
#slogan {
background: #063540;
color: white;
padding: 20px;
font-family: 'Open Sans', sans-serif;
font-size: small;
width: 100%;
padding-left: 8%;
}
#header {
background: grey;
width: 100%;
margin: 0 auto;
}
a {
text-decoration: none;
}
#logo a {
color: #063540;
}
#logo {
float: left;
padding-left: 8%;
color: #063540;
margin-top: 20px;
}
.navbar {
float: right;
top: 0px;
padding-right: 20%;
margin-top: 20px;
}
.navbar a {
padding-left: 25px;
color: #063540;
font-size: 14pt;
}
<p id="slogan">We are creative agency</p>
<div id="header">
<div id="logo"><h1>MyWebsite</h1></div>
<div class="navbar">
Home
About
Services
Projects
Pages
Blog
Contact
</div>
<br style="clear: both">
</div>
That is happening because the children from the header have float property, when an element has float property, they are actually not rendered as a block element
https://stackoverflow.com/a/16568504/2894798
That's why by default your header has height 0, so to fix it I would add a clear fix property,
* {
margin: 0 auto;
}
#slogan {
background: #063540;
color: white;
padding: 20px;
font-family: 'Open Sans', sans-serif;
font-size: small;
width: 100%;
padding-left: 8%;
}
#header {
background: grey;
width: 100%;
margin: 0 auto;
}
a {
text-decoration: none;
}
#logo a {
color: #063540;
}
#logo {
float: left;
padding-left: 8%;
color: #063540;
margin-top: 20px;
}
.navbar {
float: right;
top: 0px;
padding-right: 20%;
margin-top: 20px;
}
.navbar a {
padding-left: 25px;
color: #063540;
font-size: 14pt;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<title>MyWebsite</title>
</head>
<body>
<p id="slogan">We are creative agency</p>
<div id="header">
<div id="logo"><h1>MyWebsite</h1></div>
<div class="navbar">
Home
About
Services
Projects
Pages
Blog
Contact
</div>
<div style="clear:both;">
</div>
</body>
</html>
html/css newbie here.
I have done some courses on html/css and now I'm testing my knowledge by attempting to copy some websites I like. Right now I'm trying my best to make Khan Academy's front page (https://www.khanacademy.org), but I've been struggling with something.
I have an <ul> that represents the top navigation bar of the page, and now I'm trying to center their logo (<div id="ka"> that is inside the navbar as a list item) to the page but using text-align: center and margin-left: auto; & margin-right: auto doesn't seem to do anything.
Here's my code:
body {
margin: 0;
padding: 0;
background-image: url("https://cdn.kastatic.org/images/homepage/mountains-simple.svg");
background-repeat: no-repeat;
background-size: 157.75%;
background-position-x: 50.825%;
}
li {
display: inline-block;
}
.navbar {
overflow: hidden;
width: 100%;
height: 60px;
border-bottom-color: #68e2de;
border-bottom-width: 1px;
border-bottom-style: solid;
}
.navbar {
list-style: none;
}
.navbar-text {
color: white;
float: left;
font-weight: 400;
font-family: 'Montserrat', sans-serif;
font-weight: 500;
font-size: 17px;
padding: 13px 38px 0px 4px;
margin-left: -8px;
}
#ka {
display: inline-block;
}
#ka-logo {
float: left;
width: 24px;
margin-left: auto;
margin-right: auto;
}
#search-icon {
width: 32px;
margin-left: -44px;
margin-top: 8px;
}
#search-bar {
background-color: #47dcd6;
border-radius: 4px;
margin-left: 8px;
border: 1px solid #47dcd6;
padding: 12px 175px 14px 12px;
}
#expand-triangle {
font-size: 13px;
margin-left: 7px;
color: #85e8e3;
}
.bold-signika {
display: inline;
font-family: 'Signika', sans-serif;
font-size: 23px;
color: white;
font-weight: 600;
}
.signika {
display: inline;
font-family: 'Signika', sans-serif;
color: white;
font-size: 23px;
}
#sign {
float: right;
margin-right: 44px;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,500" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Signika:400,600" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<ul class="navbar">
<li class="navbar-text">Subjects<span id="expand-triangle">▼</span></li>
<li id="search-bar" class="navbar-text">Search</li>
<li><img id="search-icon" src="search.png"></li>
<li>
<div id="ka">
<img id="ka-logo" src="leaf-green.svg">
<div class="bold-signika">KHAN</div>
<div class="signika">ACADEMY</div>
</div>
</li>
<li id="sign" class="navbar-text">New user / Sign up</li>
</ul>
</body>
</html>
I have seem this question but what was suggested didn't work for me.
My question is: how do I center the logo div?
A side note: since I'm fairly new to html there could be a lot of bad practices in the code above. Tips on how to do the things I did more efficiently would be highly appreciated.
here a solution for your problem.
In CSS, flex is very usefull, take a look at:
Flex guide https://css-tricks.com/snippets/css/a-guide-to-flexbox/
My CSS
I have used flexbox for centered verically divs and set the right div.
For the logo, I used a first div with the height and width of the taskbar (non-clickable) and a second with the logo centered (clickable) with position absolute.
Enjoy
body {
margin: 0;
padding: 0;
background-image: url("https://cdn.kastatic.org/images/homepage/mountains-simple.svg");
background-repeat: no-repeat;
background-size: 157.75%;
background-position-x: 50.825%;
}
li {
display: inline-block;
}
.navbar {
overflow: hidden;
width: 100%;
height: 60px;
border-bottom-color: #68e2de;
border-bottom-width: 1px;
border-bottom-style: solid;
display: flex;
align-items:center;
position:absolute;
}
.navbar {
list-style: none;
}
.navbar-text {
color: white;
float: left;
font-family: 'Montserrat', sans-serif;
font-weight: 500;
font-size: 17px;
/**padding: 0 38px 0px 4px;**/
}
.logo {
position:absolute;
height:100%;
top:0;
left:0;
width:100%;
display:flex;
justify-content:center;
align-items:center;
pointer-events:none;
}
.logo-container {
display:flex;
align-items:center;
pointer-events:all;
}
.logo-container .ka-logo {
width: 24px;
}
.left, .right {
display:flex;
align-items:center;
}
.left {
margin:0 10px;
}
.right {
justify-content:right;
margin:0 10px 0 auto;
}
#search-icon {
width: 32px;
margin-left: -44px;
margin-top: 8px;
}
#search-bar {
background-color: #47dcd6;
border-radius: 4px;
margin-left: 8px;
border: 1px solid #47dcd6;
padding: 12px 175px 14px 12px;
}
#expand-triangle {
font-size: 13px;
margin-left: 7px;
color: #85e8e3;
}
.bold-signika {
display: inline;
font-family: 'Signika', sans-serif;
font-size: 23px;
color: white;
font-weight: 600;
}
.signika {
display: inline;
font-family: 'Signika', sans-serif;
color: white;
font-size: 23px;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,500" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Signika:400,600" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="navbar">
<div class="left">
<li class="navbar-text">Subjects<span id="expand-triangle">▼</span></li>
<li id="search-bar" class="navbar-text">Search</li>
<li><img id="search-icon" src="search.png"></li>
</div>
<div class="logo">
<div class="logo-container">
<img class="ka-logo" src="leaf-green.svg">
<div class="bold-signika">KHAN</div>
<div class="signika">ACADEMY</div>
</div>
</div>
<div class="right">
<li class="navbar-text">New user / Sign up</li>
</div>
</div>
<!--<ul class="navbar">
<div class="left">
<li class="navbar-text">Subjects<span id="expand-triangle">▼</span></li>
<li id="search-bar" class="navbar-text">Search</li>
<li><img id="search-icon" src="search.png"></li>
</div>
<div class="center">
<li>
<div id="ka">
<img id="ka-logo" src="leaf-green.svg">
<div class="bold-signika">KHAN</div>
<div class="signika">ACADEMY</div>
</div>
</li>
</div>
<div class="right">
<li id="sign" class="navbar-text">New user / Sign up</li>
</div>
</ul>-->
</body>
</html>
Previously I asked How do I position buttons so they align horizontally with another element?. I need just a little more help with my CSS and HTML until I've completed it to where I like it.
I have everything but the buttons correctly positioned, so, any help is great! Thanks in advance.
Current Output:
Current HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Aspen Development | Home</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="navMenu">
<div id="header">
<div id="brand">Aspen Development</div>
<ul>
<li class="navButton">Home</li>
<li class="navButton">Pricing</li>
<li class="navButton">Contact Us</li>
</ul>
</div>
</div>
<div id="content">
<div id="contentContainer">
<p><b>4.21.14</b> Welcome to Aspen Development.</p>
<p><b>4.19.14</b> The website has been created!</p>
</div>
</div>
<div id="footer">
<center><p style="margin-top: 17px; margin-bottom: 20px; font-size: 0.75em; ">Copyright © 2014 Aspen Development | All Rights Reserved</p></center>
</div>
</div>
</body>
</html>
Current CSS:
#charset "utf-8";
body, h1, h2, h3, h4, h5, h6, p, div {
margin: 0;
padding: 0;
}
#header ul {
list-style-type: None;
padding: 0;
margin: 0;
}
#header ul li {
display: inline;
cursor: pointer;
}
body {
font-family: Arial, Helvetica, sans-serif;
background-color: #FFF;
}
#navMenu, #footer {
width: 100%;
height: 50px;
background-color: #F8F8F8;
border: 2px solid #E6E6E6;
margin: 0 auto;
}
#header {
width: 1104px;
height: 50px;
margin: 0 auto;
text-align: right;
}
#menu {
float: right;
padding: 12px 14px 16px;
padding-top: 12px;
}
#brand {
float: left;
}
#brand a {
display: block;
padding-top: 12px;
padding-bottom: 16px;
padding-right: 14px;
color: black;
font-size: 1.25em;
text-align: justify;
text-decoration: none;
}
.navButton {
padding: 0 14px;
margin-top: 50px;
color: black;
font-size: 0.75em;
}
#content {
width: 100%;
}
#contentContainer {
width: 1140px;
margin: 0 auto;
}
#contentContainer p {
margin: 20px;
}
Once again, thanks for all the help! :)
I'd like to have the white background cover content of the page but for some reason it only ends at the navigation menu/#main_content_top. How can I fix this?
HTML Look/Image:
http://img687.imageshack.us/img687/8461/croppercapture12.th.jpg
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#Text1
{
width: 77px;
}
#Text2
{
width: 78px;
}
body {
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="container">
<div id="header"><h1>
<img alt="" src="images/tempBanner.jpg" style="width: 747px; height: 75px" /></h1></div>
<div id="sub_header">Facility Booking Registration</div>
<div id="main_content_top">Home | Book a Facility | <a href ="FindBooking.htm" >Find/Delete a
booking</a></div>
<div id="main_content">
<div class="content">
<p class="title">Public Service Announcements</p>
<h2>Vesak Day</h2>
<p>Vesak Day, a public holiday, will fall on 1/5/2011, please note the school will
be closed and no bookings will be allowed on this day.</p>
<h2>Labour Day</h2>
<p>Labour Day, a public holiday, will fall on 1/5/2011, please note the school will
be closed and no bookings will be allowed on this day.</p>
</div>
<div class="menu">
<div class="menu_title">Login</div>
<div>Username:
<input id="Text1" type="text" />
<br />
Password:
<input id="Text2" type="text" />
<br />
<br />
<input id="Button1" type="button" value="Sign In" />
</div>
</div>
</div>
<div id="clear"></div>
</div>
</body>
CSS style sheet:
body {
background: #CACACA url(images/background.png) repeat-x;
font-family: "Trebuchet MS", Verdana, serif, Arial
}
#container {
margin: 0 auto;
width: 750px
}
#header {
width: 100%;
height: 33px;
}
#sub_header {
text-align: right;
font-weight: bold;
font-size: 20px;
color: #FFFFFF;
padding-right: 20px;
padding-bottom: 20px;
}
#main_content {
margin: 0 auto;
width: 100%;
background: #FFFFFF url('images/background_content.gif');
background-repeat: repeat-y;
}
#main_content_top {
height: 30px;
background: #FFFFFF url('images/background_top.gif');
}
#main_content_bottom {
height: 30px;
background: #FFFFFF url('images/background_bottom.gif');
}
.content {
float: left;
width: 510px;
text-align: justify;
padding: 0 30px 0 30px;
font-size: 14px
}
.menu {
width: 139px;
float: right;
padding: 0 20px 0 20px;
border-left: #8C8484 1px solid;
font-size: 12px
}
.menu ul {
margin: 0;
padding: 10px 0 10px 15px
}
.menu il {
list-style-type: disc
}
#header h1 {
margin-bottom: 0px;
font-size: 28px;
font-weight: bold;
color: #A40008
}
.content h2 {
margin-top: 0px;
font-size: 20px;
font-weight: bold;
color: #A40008
}
.menu_title {
font-size: 18px;
font-weight: bold
}
#clear {
display: block;
clear: both;
width: 100%;
height:1px;
overflow:hidden;
}
a {
color: #A40008;
font-weight: bold;
text-decoration: none
}
a:hover {
color: #A40008;
font-weight: bold;
text-decoration: underline
}
.title {
margin: 20px;
text-align: center;
font-weight: bold;
font-style: italic;
height: 18px;
}
.highlight
{
font-weight:bold
}
.update
{
font-weight:bold;
color:Green
}
.confirm
{
font-weight:bold;
color:Red
}
table
{
border-style : dashed
}
Try adding overflow:auto to #main_content.
If i understand correctly, you want to set the background of the body white? If that is your requirement, within the body CSS, remove or comment out the background style.
You have to make it overflow hidden or float left and width..........