I am making a webpage using CSS when I encountered a problem. My menu bar doesn't center the links vertically in the bar. It should be really simple, but I need help. Sorry for making it so long, I just didn't want to leave anything out.
HTML:
<html>
<head>
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
<title>noobyDev</title>
<style>
body {
background-color: CCFFFF;
text-align: center;
}
div.background
{
width: 90%;
height: 200px;
background color: #00FF66;
border: 2px solid black;
margin: 0 auto;
text-align: left;
}
div.background h3
{
margin: 0px 40px;
}
div.logo
{
width: 350px;
height: 75px;
background: url(logo.png);
margin: 30px 40px;
}
div.nav
{
background-color: #00CC66;
border: 2px solid black;
width: 90%;
margin: 0 auto;
text-align: left;
height: 30px;
border-top: 0px solid black;
}
.menu
{
margin: 5px 10px;
background: #00CC66;
color: black;
-webkit-transition: color;
}
.menu:hover
{
color: red;
}
div.center
{
width: 90%;
height: 700px;
background color: white;
border: 2px solid black;
border-top: 0px solid black;
margin: 0 auto;
text-align: left;
}
div.column1 h1
{
margin: 30px 40px;
}
div.column1 p
{
margin: 30px 40px;
}
div.column1
{
width: 70%;
height: 100%;
float: left;
display: block;
border-right: 2px solid black;
}
div.column2
{
width: 30%
height: 100%;
float: left;
display: block;
text-align: left;
}
div.column2 a
{
margin: 30px 40px;
display: block;
text-decoration: none;
font-size: 30px;
font-color: black;
}
div.legal
{
width:90%;
height: 50px;
background color: white;
border: 2px solid black;
border-top: 0px solid black;
margin: 0 auto;
text-align: center;
}
</style>
</head>
<body>
<div class="background">
<div class="logo">
</div>
<h3>Have you failed today?</h3>
</div>
<div class="nav">
<a style=text-decoration="none" href="index.html" class="menu">Home</a>
<a style=text-decoration="none" href="html.html" class="menu">HTML</a>
<a style=text-decoration="none" href="javascript.html" class="menu">Javascript</a>
<a style=text-decoration="none" href="css.html" class="menu">CSS</a>
<a style=text-decoration="none" href="java.html" class="menu">Java</a>
<a style=text-decoration="none" href="news.html" class="menu">News</a>
<a style=text-decoration="none" href="games.html" class="menu">Games</a>
<a style=text-decoration="none" href="other.html" class="menu">Other</a>
</font>
</div>
<div class="center">
<div class="column1">
<h1>Home</h1>
<br>
<p>Welcome to noobyDev.com! This is my site where I document all of my fails and successes worth sharing. Feel free to use them unless otherwise instructed to do so. Check back often and admire my awesomeness!</p>
</div>
<div class="column2">
Video?
</div>
</div>
<div class="legal">
<p>This site is heavily protected with a gargantuan army of mutant cotton balls; I would recommend not stirring trouble up. Just so you know, this site looks the best in Internet Explorer.</p>
</div>
</body>
</html>
Just add a line-height to div.nav:
div.nav
{
background-color: #00CC66;
border: 2px solid black;
width: 90%;
margin: 0 auto;
text-align: left;
height: 30px;
line-height: 30px;
}
Here's the JS Bin to test: http://jsbin.com/oliwit/1/
There are generally a lot of misconceptions on how to utilize the vertical-align within CSS, I found this post very helpful on how to get a full understanding of it... http://phrogz.net/css/vertical-align/
Related
I have built this header using custom CSS and bootstrap class names. I have tried z-index, float: initial properties already. Thanks in advance
.branding-preview {
height: 75px;
margin-left: 15px;
margin-right: 15px;
background-color: #0071bb;
}
.branding-logo {
float: left;
height: 50px;
font-size: 18px;
padding: 15px 15px;
}
.branding-logo img {
width: 300px;
height: 50px;
}
.branding-powered-by-logo {
float: right;
height: 50px;
color: white;
font-size: 15px;
padding: 2px 10px;
}
.preview-menu {
margin: 30px 0 0 0;
}
.preview-menu > li > a {
margin: 0 3px;
color: white;
text-transform: uppercase;
border-bottom: solid 1px transparent;
background-color: transparent !important;
}
<div class="branding-preview">
<div class="branding-logo">
<img id="branding-logo" src="/path/to/logo">
</div>
<div class="branding-powered-by-logo">
<span>Powered By</span>
<img id="branding-powered-by-logo" src="/path/to/logo" height="30">
</div>
<ul class="navbar-nav navbar-right nav preview-menu">
<li><a>Start</a></li>
<li><a>Plan</a></li>
<li><a>Manage</a></li>
<li><a>Learn</a></li>
<li><a>Admin</a></li>
</ul>
</div>
This is the result that I am getting with the current code,
actual result:
This is what I'm hoping it will look like, expected result:
Isn't simple without all the css rules, but the concept is: Create a wrapper floated to right and inside create 2 lines, one for the branding-powered-by-logo and display:block the second line is depend from actual CSS but probably works without modify anything.
If you can post the real page we can help you with more precision.
Hope this help you.
.branding-preview {
display:block;
height: 75px;
margin-left: 15px;
margin-right: 15px;
background-color: #0071bb;
}
.branding-logo {
float: left;
height: 50px;
font-size: 18px;
padding: 15px 15px;
}
.branding-logo img {
width: 300px;
height: 50px;
}
.branding-powered-by-logo {
/* ADDED */
display:block;
text-align:right;
height: 50px;
color: white;
font-size: 15px;
padding: 2px 10px;
}
.preview-menu {
margin: 0px 0 0 0;
}
.preview-menu > li > a {
margin: 0 3px;
color: white;
text-transform: uppercase;
border-bottom: solid 1px transparent;
background-color: transparent !important;
}
/* ADDED */
.wrapper-logo-navbar {
float: right;
}
.preview-menu > li {
display: inline-block;
}
<div class="branding-preview">
<div class="branding-logo">
<img id="branding-logo" src="/path/to/logo">
</div>
<div class="wrapper-logo-navbar">
<div class="branding-powered-by-logo">
<span>Powered By</span>
<img id="branding-powered-by-logo" src="https://cdn.pixabay.com/photo/2012/05/02/19/27/head-46086_960_720.png" height="30">
</div>
<ul class="navbar-nav navbar-right nav preview-menu">
<li><a>Start</a></li>
<li><a>Plan</a></li>
<li><a>Manage</a></li>
<!-- removed some elements for the rendering on StackOverflow -->
</ul>
</div>
</div>
I think you just need add
position:absolute; right:0px;
to your .preview-menu class.
I'm coding my first website as a favor and there's some unwanted white space at the bottom that won't go away.
I've checked all the usual solutions like giving the body & footer heights, and setting bottom margins & padding to 0 but they don't seem to be working.
Could somebody please take a look at the code (linked below) and let me know what I'm doing wrong?
https://jsfiddle.net/cshotter/s9k1w6z7/
CSS
<!DOCTYPE html>
<html>
<head>
<title>Quality Precast Concepts</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">
body {
margin: 0 auto;
padding: 0;
font-family: Helvetica, Arial, sans-serif;
background-color: #EEEEEE;
}
a:link {
color: #111111;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.break {
clear: both;
}
#container {
width: auto;
}
#header {
width: 100%;
height: 163px;
color: #FFFFFF;
background-color: #DDDDDD;
}
.fixedwidthheader {
width: 1000px;
background-color: #D2691E;
margin: 0 auto;
border-top: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
box-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
height: auto;
}
.fixedwidthbody {
width: 1000px;
background-color: #EEEEEE;
margin: 0 auto;
border-left: 1px solid black;
border-right: 1px solid black;
box-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
height: auto;
}
.fixedwidthfooter {
width: 1000px;
background-color: #D2691E;
margin: 0 auto;
border-left: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
box-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
height: auto;
}
#toplogodiv {
float: left;
padding-top: 10px;
padding-left: 10px;
margin: 0 auto;
}
#toplogodiv img {
height: 120px;
}
#headercontactinfo {
width: 300px;
text-align: right;
float: right;
position: relative;
top: 46px;
margin: 0 auto;
font-size: 1.1em;
}
#headercontactinfo p {
padding-right: 10px;
}
#headermenudiv {
position: relative;
top: 9px;
left: -1px;
}
#headermenudiv ul {
background-color: #333333;
padding: 0;
margin: 0;
height: 20px
}
#headermenudiv li {
list-style: none;
font-size: 0.8em;
float: left;
padding: 0px 10px 0 10px;
border-right: 1px solid #D2691E;
background-color: none;
margin-top: 3px;
}
#midsection {
color: #333333;
width: auto;
background-color: #DDDDDD;
}
#midsection img {
width: 1000px;
height: 360px;
box-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 1px black;
}
#maincontent {
padding: 10px 0 20px 10px;
background-color: #EEEEEE;
position: relative;
top: -24px;
}
.list {
padding-left: 10px;
}
#frontpagemap {
padding: 0;
margin: 0;
float: right;
position: relative;
top: -310px;
left: -50px;
}
#base {
background-color: #DDDDDD;
width: 100%;
height: 160px;
color: white;
}
#footer {
height: 65px;
}
#footer img {
position: relative;
top: -30px;
left: 10px;
width: 140px;
}
#footercontact {
float: right;
position: relative;
top: -8px;
left: -10px;
}
#designtag {
float: left;
height: 20px;
}
</style>
</head>
HTML
<body >
<div id="container">
<div id="header">
<div class="fixedwidthheader" id="border">
<div id="toplogodiv">
<img src="images/logo.png">
</div>
<div id="headercontactinfo">
<p>03 347 4768</p>
<p>sales#qualityprecast.co.nz</p>
</div>
<div class="break"></div>
<div id="headermenudiv">
<div class="fixedwidthheader">
<ul>
<li>Home</li>
<li>Products</li>
<li>Projects</li>
<li>About Us</li>
<li>The Team</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</div>
</div>
<div class="break"></div>
<div id="midsection">
<div class="fixedwidthbody">
<img src="images/header.jpg">
<div id="maincontent">
<h1>Welcome to Quality Precast Concepts</h1>
<h3>Quality Precast & Prestressed Concrete made in Christchurch</h3>
<p>We are a Canterbury born and bred company located on Christchurch’s doorstep – Rolleston. Our aim is to be the supplier of choice for high quality precast & prestressed products. Because of our locastion and adaptable set-up, we are able offer an extensive and complete range of manufacturing and product options to meet your precast concrete needs.</p>
<p>Our areas of expertise include:</p>
<p class="list"><strong>Prestressed</strong></p>
<ul>
<li>Unispan</li>
<li>Flat Slab</li>
<li>Interspan (rib & infill system)</li>
<li>Double Tees</li>
<li>Hollow Core</li>
</ul>
<p class="list"><strong>Precast</strong></p>
<ul>
<li>Tilt Slab Panels</li>
<li>Beams</li>
<li>Columns</li>
<li>Spandrels</li>
<li>Bleachers</li>
<li>Stairs & Landings</li>
</ul>
<div id="frontpagemap">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2889.8448452950684!2d172.3751009160351!3d-43.58894799364694!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6d32033a1f3d6193%3A0xa416fb59f65b7fab!2s889+Jones+Rd%2C+Rolleston+7675!5e0!3m2!1sen!2snz!4v1450467163060" width="400" height="300" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
<div id="base">
<div class="fixedwidthfooter">
<div id="footer">
<img src="images/logo.png">
<div id="footercontact">
<p>Contact us today | 03 347 4768 | sales#qualityprecast.co.nz</p>
<p>889 Jones Road, Rolleston, Christchurch</p>
</div>
<div id="designtag">
Website by CSWeb-Design
</div>
</div>
</div>
</div>
</div>
</body>
</html>
It has to do with the map styles that you've included. You're doing some positioning on frontpagemap that is causing the extra whitespace.
#frontpagemap {
padding: 0;
margin: 0;
float: right;
position: relative;
top: -310px;
left: -50px;
}
Basically, when you do position: relative; the element takes the space that it would normally take up, but you just kind of made it look like it was up higher with top: -310px. It still, technically, takes up the space that it normally took up.
A quick fix would be to use margin-top instead. Which will actually move the element and the space it is taking up, as opposed to just making it appear as though it was positioned up higher.
Your footer is smaller than the footer's container. That's why there's empty space.
Either remove the height:160px from #base or add a position:relative to it, then position:absolute; bottom:0px to .fixedwidthfooter (both have slightly different results).
You're setting the 'base' height to 160px. No need, try getting rid of that.
You need to remove height from the base class
#base {
background-color: #DDDDDD;
width: 100%;
/*height: 160px;*/
color: white;
}
I have updated jsfiddle to show a way to remove the whitespace from the bottom.
I made two changes to the css. I changed the #base height to auto and I changed the height of the .footer img to 20px. You will of course want to use a height for the image that is appropriate. The point I wanted to illustrate is that part of the issue is that the image height is pushing things down.
Please mark this as the accepted answer if it fixes your issue.
I've been trying for hours to center a table div on a website I'm creating, and I can't figure it out. I've tried using margin: 0 auto with a defined width, and that doesn't work. I've also 'margin-right: auto; margin-left: auto;", but that didn't work either. I'm really not sure what else to try.
Also, I'm trying to fix my footer to stay on the bottom of the page. It'll look great on one page, coming after all the content, but on another page it will be right on top of the content. Should I make another topic for that, or can someone help me out with that in this one?
HTML for the page with the table:
#body {
background-color: #8AD4E6;
font-color: #3E3E3E;
font-family: "Akzidenz Grotesk" sans-serif;
}
#content {
margin-left: auto;
margin-right: auto;
width: 500px;
text-align: center;
vertical-align: middle;
position: relative;
}
#header {
background-color: #6cf;
margin: 10px;
height: 120px;
font-family: "Akzidenz Grotesk" sans-serif;
text-align: center;
color: #4D8B4D;
border: 2px solid black;
}
#headerimg {
border: 2px solid;
float: left;
margin: 10px 5px 5px 5px;
margin-left: 20px;
}
#sidebar{
position: relative;
float: right;
margin: 10px;
padding: 25px;
background-color: #6cf;
border: 2px solid black;
}
.sideheading {
text-align: center;
color: #4D8B4D;
font-family: "Akzidenz Grotesk" sans-serif;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
text-align: center;
padding: 5px;
margin-left: 35%;
position: relative;
text-align: center;
vertical-align: middle;
}
table th {
font-style: bold;
}
.female {
background-color: #FFE6FF;
}
.male {
background-color: #D6EBFF;
}
.uni{
background-color: #D4FFD4;
}
#name{
margin-left: 35%;
text-align: center;
vertical-align: middle;
position: relative;
}
#navigation {
list-style-type: none;
margin: 0;
padding: 0;
display: inline;
width: 20px;
background-color: #6EC66E;
margin-left: 44%;
margin-top: 30px;
text-align: center;
}
#navigation li {
display: inline-block;
}
a:link, a:visited {
width: 120px;
font-weight: bold;
color: #FFFFFF;
background-color: #CC6699;
text-align: center;
padding: 4px;
text-decoration: none;
}
a:hover, a:active {
background-color: #4D8B4D;
}
#footer {
position: relative;
margin: 5px;
padding: 5px;
height: 60px;
background-color: #6cf;
border: 2px solid black;
}
`<!DOCTYPE html>
<html>
<head>
<title>Writer's Toolbox</title>
<link rel="stylesheet" type="text/css" href="writerstoolbox.css" />
</head>
<body>
<div id="headerimg">
<img src="logo.jpg" alt="Writer's Toolbox header image" />
</div>
<div id="header"> <h1> Writer's Toolbox</h1><h3>All of your writing needs in one place </h3></div>
<div id="sidebar">
<h3 class="sideheading">
<!-- <img src="" alt="" /> -->
<br />
What are you looking for?
</h3>
<p>Names<br>Settings<br>Character Traits<br>Mary Sue Test<br>Plot ideas<br>Title ideas<br>Writing Tips<br>Resources</p>
</div>
<div id="content">
<h3 id="name">'A' Names</h3><br>
<table id="tablename">
<tr>
<th>Names</th>
<th>Alternate Spelling</th>
<th>Gender </th>
<th>Origin</th>
<th>Meaning</th>
</tr>
<tr class="male">
<td>Aaron</td>
<td>Arron, Aaren</td>
<td>m</td>
<td>Hebrew</td>
<td>Exalted, strong</td>
</tr>
<tr class="male">
<td>Abbott</td>
<td>Abbot</td>
<td>m</td>
<td>English</td>
<td>Head of a monastery</td>
</table>
</div>
<footer id="footer">
<ul id="navigation">
<li>Homepage</li>
<li> | </li>
<li>Back to Names</li>
</ul>
</footer>`
u have some problems with the globe styling like u style the table and it's element together
Any way here's the solution in js fiddle
http://jsfiddle.net/phonexdoda/ze6dddoh/
i changed the #content style to
#content {
width: 1020px;
text-align: center;
vertical-align: middle;
position: relative;
}
add $tablename style
#tablename{
margin: auto;
}
and last the table styling
table, th, td {
border: 1px solid black;
border-collapse: collapse;
text-align: center;
padding: 5px;
position: relative;
text-align: center;
vertical-align: middle;
}
and for the #name
#name {
text-align: center;
vertical-align: middle;
position: relative;
}
And the footer need this
#footer {
position: relative;
clear: both;
margin: 5px;
padding: 5px;
height: 60px;
background-color: #6cf;
border: 2px solid black;
}
If you use text-align: center; and vertical-align: middle; in the content class it will try and format the contents of the div to those attributes. These don't apply to the actual div itself.
Create a new div around the content div, like content_container and apply text-align: center; and vertical-align: middle; to the class.
This will center and vertically align your content div.
I have been trying to add three icons for like 6 hours and nothing works can someone please help :(
Want the icon to show up above "Performance", "Technology", and "Design".
In addition I wanted to add quote icons to the <p> tags inside the three div's.
Also wanted to change the color of the icons to match the hr tag with the same hue of red.
Here is my HTML
<html>
<header>
<title>NavBar</title>
<link type="text/css" rel="Stylesheet" href="NavBar Example.css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
</header>
<body>
<div id="menu wrapper" class="red">
<div class="left"></div>
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Products</li>
<li>Contact</li>
<li class="login"><a class="login" href="#">Log In</a></li>
</ul>
</div>
<div class="header">
<img class="head-image" src="banner2.jpg">
</div>
<div class="hr">
<hr />
</div>
<div class="content">
<div class="container">
<div class="icon1">
<i class="fa fa-rocket fa-5x"></i>
<h2>Performance</h2>
<hr class="ptd" />
<p>Best in class when it comes to raw power!</p>
</div>
<div class="icon2">
<i class="fa fa-power-off fa-5x"></i>
<h2>Technology</h2>
<hr class="ptd" />
<p>Oringinal Innovations pushing the boundaries of modern technology</p>
</div>
<div class="icon3">
<i class="fa fa-laptop fa-5x"></i></a>
<h2>Design</h2>
<hr class="ptd" />
<p>Designed with you in mind</p>
</div>
</div>
</div>
<div class="footer">
</div>
</body>
</html>
Here is my CSS
body {
background-image: url(black-Linen.png);
}
/* NavBar */
#menu {
font-family: Arial, sans-serif;
font-weight: bold;
text-transform: uppercase;
margin: 50px 0;
padding: 0;
list-style-type: none;
background-color: #800000;
font-size: 13px;
height: 40px;
border-bottom: 2px solid #5A0000;
}
#menu li {
float: left;
margin: 0;
}
#menu li a {
text-decoration: none;
display: block;
padding: 0 20px;
line-height: 40px;
color: #FFF;
}
#menu li a:hover {
background-color: #CC0000;
border-bottom: 2px solid #DDD;
color: #000;
}
#menu_wrapper ul {
margin-left: 12px;
}
#menu_wrapper {
padding: 0 16px 0 0;
background-color: #666666;
}
#menu_wrapper div {
float: left;
height: 44px;
width: 12px;
background-color: #666666;
}
.header {
height: 720px;
width: 1600px;
margin: 0 auto 0 auto;
padding: 10px 10px 20px 10px;
overflow: hidden;
}
.head-image {
height: 720px;
width: 1600px;
box-shadow: 5px 5px 3px #000;
}
div.hr {
height: 32px;
background: url(fire.png) no-repeat scroll center;
}
div.hr hr {
display: none;
}
.content {
width:1600px;
height: 250px;
margin: 25px auto 15px auto;
padding: 10px;
}
/*Performance*/
.icon1 {
border: 2px solid #FFF;
background-image: url(tactile_noise.png);
height: 240px;
width: 500px;
float: left;
margin-right: auto;
margin-left: auto;
}
.container i {
display: block;
margin: 10px auto 0 auto;
width: 32px;
color: #800000;
border-radius:50%;
}
/*Technology*/
.icon2 {
border: 2px solid #FFF;
background-image: url(tactile_noise.png);
height: 240px;
width: 500px;
float: left;
margin-right: 42px;
margin-left: 42px;
}
/*Design*/
.icon3 {
border: 2px solid #FFF;
background-image: url(tactile_noise.png);
height: 240px;
width: 500px;
float: left;
margin-right: auto;
margin-left: auto;
}
h2 {
text-align: center;
font-weight: bold;
font-family: roboto, sans-serif;
margin-top: 2px;
}
h2 a {
text-decoration: none;
color: #FFF;
}
h2 a:hover, a:active {
color: #9f1111;
}
.ptd {
width: 40%;
}
p {
text-align: center;
font-style: italic;
font-family: roboto, sans-serif;
color: #FFF;
}
I think it's actually working fine, I can see icons in my JS Fiddle.
Could the problem be your link to your CSS file? Should there be a space within the href?
<link type="text/css" rel="Stylesheet" href="NavBar Example.css">
http://jsfiddle.net/Delorian/1x6u553h/
Start by double checking your markup. You have two IDs "menu" + "wrapper" and one selector "#menu_wrapper". I think you should keep IDs just for actions and add classes to add style.
Your markup:
<div id="menu wrapper" class="red">
...
</div>
Correct markup:
<div id="menu" class="wrapper red">
...
</div>
You are missing the protocol http:// on your link to the bootstrap CDN.
Try to add it to the link and see if it works:
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
Problem:
https://postimg.cc/image/tunhwh8qj/
The trouble I am currently having is that the border around my body is not outlining everything. As I have recently learned I'm guessing this means an element is out of the flow due to floating? However I am not certain how to fix it in this case.
My html is:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="swaggersstyle.css">
<title>Oamaru Backpackers Hostel, Swaggers Backpackers - Home</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
});
</script>
</head>
<body>
<img src="final.jpg" id="banner">
<ul id="nav">
<li class="links">Home</li>
<li class="links">Location</li>
<li class="links">Facilities</li>
<li class="links">Attractions</li>
<li id = "endlink">Bookings</li>
</ul>
<div id="leftcolumn">
<p>hghadgadgadg</p>
<p>easfasf</p>
<p>safSFS</p>
<p>afafafadf</p>
<p>safasf</p>
<p>saasfasf</p>
<p>fasfsaf</p>
</div>
<div id="mainc">
<p>Make Yourself at Home</p>
<p>Swaggers Backpackers is a converted old house located within walking distance of all the best parts of Oamaru. Explore the old victorian era buildings and shops of the city centre, or see the penguin colonies down the street. Swaggers is owned and operated by camp mum Agra, who makes all guests feel welcome, informed, and perhaps a bit mothered. </p>
<div class="slideshow">
<img src="1.jpg" width="600" height="450" />
<img src="2.jpg" width="600" height="450" />
<img src="3.jpg" width="600" height="450" />
</div>
</div>
<div id ="footer">
<p> fsafasfasf </p>
</div>
</body>
</html>
and my CSS is:
html{
font-family: sans-serif;
background-color:#464E54;
height: 100%;
}
body{
width: 960px;
margin: auto;
background-color: white;
border: 3px solid black;
padding: 0;
height: 100%;
}
#banner{
padding: 0px;
margin: 0;
display: block;
}
#nav {
list-style-type: none;
padding: 0px;
margin: 0px;
overflow: hidden;
border-bottom: 1px solid #7f7f7f;
border-top: 1px solid #7f7f7f;
}
#mainc {
float: left;
width: 654px;
background-color: white;
margin: 0;
padding-left: 8px;
padding-right: 4px;
height: 100%;
}
#leftcolumn {
padding-left: 3px;
float: left;
background-color: #dad8bf;
width: 290px;
border-right: 1px solid #7f7f7f;
height: 100%;
}
#footer {
clear: both;
position: relative;
bottom: 0.5px;
margin: 0;
background-color: #dad8bf;
border-top: 1px solid #7f7f7f;
}
#footer p{
margin: 0;
}
.links {
float: left;
margin: 0px;
border-right: 1px solid #7f7f7f;
}
#endlink {
float: left;
margin: 0px;
border-right: none;
}
#lastlink{
display: block;
width: 184px;
font-weight: bold;
color: #444444;
background-color: #dad8bf;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
margin-top: 0px;
}
#lastlink:hover{
background-color: #999999;
}
a:link {
display: block;
width: 183px;
font-weight: bold;
color: #444444;
background-color: #dad8bf;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
margin-top: 0px;
}
a:visited {
display: block;
width: 183px;
font-weight: bold;
color: #444444;
background-color: #dad8bf;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
margin-top: 0px;
}
a:hover {
background-color: #999999;
}
a:active{
background-color: #999999;
}
.slideshow {
height: 483px;
width: 632px;
margin: auto;
padding: 0px;
}
.slideshow img {
padding: 0px;
border: 1px solid #ccc;
background-color: #eee;
}
thanks in advance guys!!
This is happening because your body has fix height of 100%.Change body tag css as:
height:auto;
min-height: 100%
if this doesn't work then add following with this:
overflow:auto;
Probably better NOT to use the body element for your container. Instead, just add
<div class="container"></div>
around your code and in your CSS changehtml to body and body to div.container.
body{
font-family: sans-serif;
background-color:#464E54;
height: 100%;
}
div.container{
width: 960px;
margin: auto;
background-color: white;
border: 3px solid black;
padding: 0;
}
Edit: I completely missed the 100%, that's gotta be it.
Add overflow: hidden to your body element. When elements are floated it will not push the parent container height past it unless there is a clearer