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..........
Related
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>
Here is my HTML
<!DOCTYPE html>
<html>
<head>
<title>
Oaki Softworks
</title>
<link href='style.css' rel='stylesheet' type='text/css'>
<link rel="icon" href="favicon.png">
</head>
<body>
<div id="navigation">
<div style="height:20px;width=15%;float:right;">
<img src="facebook_icon.png" class="social_media_icon">
<img src="instagram_icon.png" class="social_media_icon">
<img src="twitter_icon.png" class="social_media_icon">
<img src="youtube_icon.png" class="social_media_icon">
</div>
<div class="navigation_tile">Contact Us</div>
<div class="navigation_tile">Careers</div>
<div class="navigation_tile">Products</div>
<div class="navigation_tile">About Us</div>
</div>
<div id="content">
<div id="blurb">
<img src="Logo%20(inverted,%20transparent).png" style="width:90%;height:auto;align-self:center;">
<h2>Video games as art.</h2>
<p>Even before the conception of our company, we have always embraced video games as the newest, emerging art form. Video games engage an audience like no other medium: allowing them to digest the material at their own pace, to identify themselves within their avatar as they see fit, and to interact with the world around them. Oaki Software aims to underline these elements of art even further with our own game design.</p>
</div>
<div id="main_pic">
<img src="art.jpg">
</div>
</div>
<div id="footer">
<p>
Oaki Softworks™
<br>Fort Collins, CO 80521
<br>benkulka#oakisoftworks.com
</p>
</div>
</body>
</html>
Here is my CSS
body {
background-color: #021034;
padding: 0px;
margin: 0px;
}
#navigation {
position: fixed;
background-color: black;
height: 40px;
width: 100%;
color: white;
color: #adb7bd;
font-family: 'Lucida Sans', Arial, sans-serif;
font-size: 16px;
line-height: 26px;
}
div.navigation_tile {
height: 30px;
width: 15%;
align-content: center;
text-align: center;
float: right;
margin: 5px;
}
div.navigation_tile:hover {
background-color: #092466;
}
div.navigation_tile:active {
background-color: white;
color: black;
}
#content {
margin-top: 30px;
display: inline-block;
text-align: justify;
}
#blurb{
padding: 40px 0 0 25px;
width: 28%;
height: 250px;
}
#main_pic {
float: right;
width: 66%;
height: 250px;
border: 10px #092466 solid;
overflow: hidden;
}
h1{
color: #A5B7E3;
font-family: 'Lato', sans-serif;
font-size: 54px;
font-weight: 300;
line-height: 58px;
margin: 0 0 20px;
}
h2 {
color: #6681C4;
font-family: 'Lato', sans-serif;
font-size: 34px;
margin: 0 0 10px;
}
p{
text-indent: 20px;
color: white;
font-size: 12px;
font-weight: 100;
font-family: 'Lucida Sans', Arial, serif;
line-height: 20px;
}
img.social_media_icon{
height: 15px;
width: 15px;
padding: 5px;
}
#footer {
height: auto;
width: 100%;
background-color: black;
text-align: center;
padding: 5px;
}
I'm trying to get my #blurb div to line up with my #main_pic div within my parent #content div, but I'm having trouble doing so. Can someone point me in the right direction?
#blurb {
[...]
float: left;
}
#content {
[..]
overflow: hidden;
}
Also consider removing height: 250px; from #blurb ... hard to say is it required for some reason.
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!
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 cannot figure out how to remove the scrollbar from this website. It is clearly not necessary. I have the page loaded on a 21" monitor and still see it..
http://akrush95.freeoda.com/clash/
Here is the html from my index.php
<!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>Untitled Document</title>
<style type="text/css">
body,html{
height:100%;
margin: 0px;
padding: 0px;
}
#title {
padding-top: 20px;
font-size: 36px;
}
#title #RHS {
font-size: 40px;
font-weight: bold;
}
.scoreboard {
text-align: center;
}
.scores {
font-size: 36px;
}
.score-title {
font-size: 18px;
text-decoration: underline;
}
#content {
text-align: center;
min-width: 250px;
}
#eventcontainer {
padding: 10px;
float: right;
background-color: #999;
width: 200px;
min-height: 100%;
}
#eventboard #eventcontainer h1 {
text-align: center;
text-decoration: underline;
}
.sb {
display: inline-block;
width: 135px;
border: thin double #000;
margin: 10px;
}
.sb #title {
font-size: 22px;
text-decoration: underline;
font-weight: bold;
padding-top: 5px;
}
.sb #score {
font-size: 40px;
font-family: "Lucida Console", Monaco, monospace;
padding: 5px;
}
#add {
cursor: pointer;
font-size: 18px;
}
#sub {
cursor: pointer;
font-size: 18px;
}
</style>
</head>
<body>
<div id="eventcontainer">
<h1>Event Board</h1>
<p>25 January 2013<br />
-Event 1<br />
-Event 2
</p>
<p>26 January 2013<br />
-Event 3<br />
-Event 9</p>
<p>31 January 2013<br />
-Event
</p>
</div>
<div id="content">
<div id="title">
<div id="RHS">Roslyn High School</div>
<div id="CotC">Clash of the Classes</div>
<div id="year">2013</div>
</div>
<br/>
<div id="scores">Loading...</div>
</div>
</body>
</html>
Is there anything in there making it extend past 100%? I tried making the height 100% but that doesn't seem to work..
If I don't make the body height 100%, my right column won't extend all the way down.
You have a height of 100%, and a padding of 10px at the top and 10px at the bottom. Padding is added to height, not included in it. So the total height of #eventcontainer is 100%+10px+10px, i.e. 20px more height than its container.
You have three options:
Take the vertical padding off the #eventcontainer element.
Add overflow: hidden to the body element. However this is not recommended because on a smaller screen, the user will not have any way to scroll to see all the content.
As mentioned in the comment below with link, you can change the box sizing model you are using.