I am currently designing a basic website however, after nearly completing my CSS I found that when I opened the webpage on a different computer it looked different and not only that it looked different in different ways depending on the web browser.
Therefore I am unsure whether or not it is a problem with browser or resolution compatibility so my question would be can anyone tell me in which field the problem lies (may be both) and maybe advice on the direction I can go to solve the problem.
The following is a link to an online album of screenshots of the webpage run on the four 'main' browsers on my laptop with a resolution of 1600x900 and the family computer with a resolution of 1440x900. Also if the page is resized or zoomed in then things start moving about.
Thank you in advance for any help or advice, if you want me to provide any further information please just say what you would like to see.
HTML
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso10646"/>
<meta http-equiv="content-language" content="en-GB"/>
<meta name="author" content="###########"/>
<meta name="designer" content="##########"/>
<meta name="description" content="The official website of ##########, promoting her humanist services."/>
<!--<meta name="keywords" content="##########, humanist"/>-->
<meta name="language" content="english"/>
<meta name="robots" content="index, follow"/>
<meta name="googlebot" content="index, follow"/>
<link type="text/css" rel="stylesheet" href="stylesheet lego.css"/>
<title>Home Page</title>
</head>
<body>
<div id="page">
<div class="toparea">
<img src="Client's Logo.png" id="logo"/>
<h1 id="title">Significant Ceremonies by ##########</h1>
<ul>
<li>Tel: ############</li>
<li>E-mail: #######################</li>
</ul>
</div>
<div class="sidearea">
<ul>
<li>Home</li>
<li>About Me</li>
<li>Humanism</li>
<li>Planning</li>
<li>Specialist Areas</li>
<li>Testimonials</li>
<li>Contact Me</li>
</ul>
</div>
<div class="mainarea">
<h2 id="subtitle">Home</h2>
<p>"I would rather live a life based on honesty, compassion and humanity through my own free will instead of it coming from the fear of
divine beings." - ###########</p>
<p>Welcome to my web site, here you can find information about the services I perform and about Humanism itself. Please feel free to
navigate around my site and if you have any questions you can either contact me directly or use the form on the 'Contact Me' page.</p>
</div>
<div class="bottomarea">
<ul>
<li>Tel: ############</li>
<li>E-mail: #######################</li>
</ul>
<img src="BHA logo.jpg" id="bhalogo"/>
</div>
</div>
</body>
</html>
CSS
body
{
background-color: #CCCCCC;
}
#page
{
position: absolute;
left: 25%;
height: 100%;
width: 800px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
background-color: #E6F5E6;
font-family: vijaya, sakkal majalla, narkisim, monotype corsiva, jasmineupc, gabriola, french script mt, footlight mt light, calisto mt, papyrus;
}
.toparea
{
float: left;
width: 800px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
#logo
{
float: left;
width: 200px;
height: 220px;
margin-top: 10px;
margin-right: auto;
margin-bottom: 0;
margin-left: 10px;
}
#title
{
float: left;
width: 250px;
height: 160px;
margin-top: 70px;
margin-right: auto;
margin-bottom: 0;
margin-left: 80px;
text-align: center;
font-size: 32px;
color: #002E00;
}
.toparea ul
{
float: left;
width: 180px;
height: 220px;
margin-top: 10px;
margin-right: auto;
margin-bottom: 0;
margin-left: 40px;
list-style: none;
}
.sidearea
{
clear: both;
float: left;
width: 200px;
margin-top: 60px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
}
.sidearea ul
{
list-style-type: none;
}
.sidearea ul li
{
margin-top: 0;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 0;
text-align: center;
border-style: solid;
border-radius: 5px 5px 5px 5px;
background-color: #4DB84D;
border-color: #002E00;
font-size: 25px;
}
.sidearea ul li a
{
text-decoration: none;
color: black;
}
#subtitle
{
color: #002E00;
}
.mainarea
{
float: left;
width: 560px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: 20px;
padding-right: 10px;
padding-left: 10px;
/*background-color: #EEF8EE;*/
}
.bottomarea
{
clear: both;
float: left;
width: 800px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
.bottomarea ul
{
position: fixed;
bottom: 0;
left: 360px;
width: 610px;
margin-top: 0;
margin-right: auto;
margin-bottom: 10px;
margin-left: 10px;
list-style-type: none;
}
#bhalogo
{
position: fixed;
right: 388px;
bottom: 0;
width: 150px;
height: 100px;
margin-top: 0;
margin-right: 10px;
margin-bottom: 10px;
margin-left: auto;
}
Related
This question has actually been asked a lot of times, but none of the responses that I found worked for me. Maybe I am doing it wrong.
Anyway, I made a site using CSS divs and foolishly used a browser window to make sure everything was aligned correctly. When I was done and I zoomed out, all of the images and other div elements shifted and moved around instead of being fixed like expected.
I vaguely know that the problem has to do with the lack of a wrapper div and/or the fact I used relative and absolute positioning a LOT, just to get it to work.
Any help is appreciated, I am new to CSS and this is my first site I've made with it.
Thanks!
-Zac
Here is a link the broken site as requested: http://wctadm.org/
Can't embed screenshot, here is a link: http://imgur.com/MmmGceb
Shows correct alignment as I saw it on one monitor, and the zoomed-out, messed up version.
HTML file:
<!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>
<link rel="stylesheet" href="style.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,700,800,300' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<style>
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Default Page</title>
</head>
<body>
<div id="container">
<div id="content" class="clearfix">
<!-- Content //--->
</div>
<div id="header">
<!-- NAVBAR <img src="DM-logo.png" alt="DM Logo" height="81" width="130"> //--->
<ul id="menu" style="position: relative; z-index: 100;">
<li>Gallery</li>
<li>Contact</li>
<li>FAQ</li>
<li>Teachers
<ul>
<li>Mrs. Rosarita Olvina</li>
<li>Mrs. Christine Pavesich</li>
<li>Mr. Francisco Virella</li>
</ul>
</li>
<li>Courses
<ul>
<li>Graphic Design</li>
<li>Photography</li>
<li>Video Production</li>
<li>Animation</li>
<li>Art</li>
</ul>
</li>
<li>About
<ul>
<li>What We Do</li>
<li>Where We Go</li>
</ul>
</li>
<li>Home</li>
</ul>
<ul id="logo">
<ul>
<li><img src="dm-button.png" style="position: absolute; top: 0px; left: -120px; z-index: 1;" height="120" width="120"/></li>
</ul>
<ul id="welcome">
<ul>
<li><p style="position: absolute; top: 140px; left: 75px; z-index: 2;">Welcome to Digital Media at WCTA</p></li>
</ul>
<ul id="banner">
<ul>
<li><img src="bannerbackgroundDMwithshadow.png" style="position: absolute; top: 81px; left: -120px; z-index: 0;" height="400" width="859"/></li>
</ul>
</div>
</div>
</div>
</div>
<div id="quicklinks">
<div id="links1">
<img src="courses-icon2.png" style="position: relative; top: 0px; left: 40px; z-index: 100;" height="97.75" width="139"/>
<p style="text-align: center; position: relative; top: -10px; left: 0px; z-index: 100; font-size: 22px; font-weight: bold;">Explore courses</p>
<p style="text-align: center; position: relative; top: -30px; left: 0px; z-index: 100; font-size: 12px;">Our courses teach advanced digital media in a wide range of subjects.</p>
<img src="more.png" style="position: relative; top: -24px; left: 60px; z-index: 101;" height="33.6" width="98.5"/>
</div>
<div id="links2">
<img src="gallery-icon.png" style="position: relative; top: 0px; left: 40px; z-index: 100;" height="97.75" width="139"/>
<p style="text-align: center; position: relative; top: -10px; left: 0px; z-index: 100; font-size: 22px; font-weight: bold;">View the gallery</p>
<p style="text-align: center; position: relative; top: -30px; left: 0px; z-index: 100; font-size: 12px;">Gallery of our student's finest work in a variety of mediums.</p>
<img src="more.png" style="position: relative; top: -24px; left: 60px; z-index: 101;" height="33.6" width="98.5"/>
</div>
<div id="links3">
<img src="contact-icon2.png" style="position: relative; top: 0px; left: 40px; z-index: 100;" height="97.75" width="139"/>
<p style="text-align: center; position: relative; top: -10px; left: 0px; z-index: 100; font-size: 22px; font-weight: bold;">Contact us</p>
<p style="text-align: center; position: relative; top: -30px; left: 0px; z-index: 100; font-size: 12px;">Drop us a line if you have any questions or concerns regarding our program.</p>
<img src="more.png" style="position: relative; top: -24px; left: 60px; z-index: 101;" height="33.6" width="98.5"/>
</div>
</div>
<!---------- BLURB //------------------->
<div id="blurb">
<div id="blurbpic">
<img src="placeholder.png" style="position: relative; top: 0px; left: 0px; z-index: 100;" height="250px" width="250px"/>
</div>
<div id="blurbtext">
<p style="text-align: left; position: relative; top: -10px; left: 0px; z-index: 100; font-size: 50px; color:white; font-family:'Open Sans Condensed', sans serif;">Dedicated to excellence</p>
<p style="text-align: left; position: relative; top: -50px; left: 10px; z-index: 99; font-size: 14px; color:white;">Members of WCTA's Digital Media program are expected to work hard, strive high, and have fun while doing it. With courses in areas ranging from Digital Media to Photography, joining the Digital media program is the best choice you could make to start the journey of your career in technology. Digital Media students not only get access to multiple computer labs and software, but they also get to go out in the field regularly to gain real life experience. </p>
</div>
</div>
<!---------- FOOTER //------------------->
<div id="footer">
<ul id="footerpic">
<ul>
<li><img src="footerbackground.png" style="position: relative; top: 0px; left: -194px; z-index: 150;" height="173px" width="859px"/></li>
</ul>
<ul id="footerlogo">
<ul>
<li><img src="DM-logowhite.png" style="position: relative; top: 80px; left: 270px; z-index: 151;" height="58.5" width="88.3"/></li>
</ul>
<ul id="footertext1">
<ul>
<li><p style="position: relative; top: 10px; left: 89px; z-index: 151; font-size: 12px; color:white;">©2013 Zac Clark - Digital Media</p></li>
</ul>
</div>
<ul id="footertext2">
<ul>
<li><p style="position: relative; top: -30px; left: 720px; z-index: 151; font-size: 12px; color:white;">About • Contact • FAQ • Find Us</p></li>
</ul>
</div>
</div> <!-- Wrapper Div //-->
</body>
</html>
CSS file:
#charset "utf-8";
/* Zac Clark - 2013 */
/* --- Primary Content boxes --*/
body {
background: #F7F7F7;
font-family: 'Open Sans', arial, sans-serif;
color: #000000;
font-size: 12px;
/* margin: 0px; */
}
div#container {
width: 859px;
margin: 0px auto;
background: #FFFFFF;
padding: 0px;
}
div#content {
width: 859px;
padding-top: 473px;
background: black;
float: left;
}
div#header {
margin-left:0px; /* 161px */
margin-right:0px;
width: 859px;
height: 481px;
background: #757575;
position: absolute;
top: 0px;
float: left;
}
#wrapper {
margin-left:auto;
margin-right:auto;
width:859px;
}
/* --- Quick Links --- */
div#quicklinks {
width: 859px;
margin: 0px auto;
background: white;
top: 286.3px;
height: 286.3px;
}
div#links1 {
width: 286.3px;
float: left;
margin: 0px auto;
background: #F5F5F5;
height: 286.3px;
padding: 30px;
box-sizing: border-box;
ms-box-sizing: border-box;
webkit-box-sizing: border-box;
moz-box-sizing: border-box;
width: 286.3px;
}
div#links2 {
width: 286.3px;
float: left;
margin: 0px auto;
background: white;
height: 286.3px;
padding: 30px;
box-sizing: border-box;
ms-box-sizing: border-box;
webkit-box-sizing: border-box;
moz-box-sizing: border-box;
width: 286.3px;
}
div#links3 {
width: 286.3px;
float: right;
margin: 0px auto;
background: #F5F5F5;
height: 286.3px;
padding: 30px;
box-sizing: border-box;
ms-box-sizing: border-box;
webkit-box-sizing: border-box;
moz-box-sizing: border-box;
width: 286.3px;
}
/* --- Blurb & Image --- */
div#blurb {
width: 859px;
margin: 0px auto;
background: #333333;
top: 300px;
height: 300px;
}
div#blurbpic {
width: 300px;
float: left;
margin: 0px auto;
background: #333333;
height: 300px;
padding: 30px;
box-sizing: border-box;
ms-box-sizing: border-box;
webkit-box-sizing: border-box;
moz-box-sizing: border-box;
width: 300px;
}
div#blurbtext {
width: 559px;
float: right;
margin: 0px auto;
background: #333333;
height: 300px;
padding: 10px;
box-sizing: border-box;
ms-box-sizing: border-box;
webkit-box-sizing: border-box;
moz-box-sizing: border-box;
width: 559px;
}
/* --- Clearfix (Ignore) --- */
.clearfix:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
.clearfix {display:inline-block;}
/* Hide from IE Mac \*/
.clearfix {display:block;}
/* --- General Elements --*/
#logo ul li { display: inline; }
#banner ul li { display: inline; }
#welcome ul li {
font-family: 'Open Sans Condensed', sans serif;
font-size: 40px;
display: inline;
display: block;
text-decoration: none;
color: #ffffff;
border-top: 0px;
padding: 0px 0px 0px 0px;
background: transparent;
margin-left: 0px;
white-space: nowrap;
}
#footerlogo ul li { display: inline; }
#footerpic ul li { display: inline; }
#footertext1 ul li { display: inline; }
#footertext2 ul li { display: inline; }
/* --- NAVBAR --- */
ul {
font-family: 'Open Sans', Times;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
position: relative;
float: right;
}
li ul { display: none; }
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 7px solid #CC4D4D;
padding: 25px 30px 30px 30px;
background: #333333;
margin-left: 0px;
white-space: nowrap;
}
ul li a:hover { background: #757575; }
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #757575; }
li:hover li a:hover { background: #757575; }
<!---------- FOOTER ------------//>
div#footer {
margin-left:0px; /* 161px */
margin-right:0px;
width: 859px;
height: 173px;
background: #757575;
position: absolute;
top: 0px;
}
Use:
style="position: relative;overflow:auto;"
Remove the absolute positioning on your footer.
div#footer {
width: 859px;
height: 173px;
background: #757575;
margin: 0 auto;
}
Looks like you've also got some inline styles on the <img> you're using as a background. I don't think it's pushing it where you want it. You need to allow the container to center your footer element.
<img src="footerbackground.png" height="173px" width="859px"/>
Remove the inline style on that tag and try to avoid them entirely.
Okay, so I waded through your code and got some stuff fixed, but there's a long way to go..
Some Stuff Fixed
First, of all, delete
<!---------- FOOTER ------------//>
div#footer {
margin-left:0px; /* 161px */
margin-right:0px;
width: 859px;
height: 173px;
background: #757575;
position: absolute;
top: 0px;
}
You're not using it, so no need to keep it around and that html comment does weird things to my syntax highlighting.
Next, find the closing </div> tag right before <div id="quicklinks">, then delete it.
Put a closing </div> tag right before the closing </body> tag..
Why?? Because that </div> closes your container div.. the one you want everything to be contained in..
Then find
<li><img height="173px" src="footerbackground.png" style="position: relative; top: 0px; left: -194px; z-index: 150;" width="859px"></li>
and delete position: relative; .
At this point, your main footer image should be in the proper place.
A long way to go..
The problem now is positioning the rest of the images and texts inside of this image. For starters, you'll want to get rid of the position: relative;s..
Here are my recommendations:
Don't use inline styles (e.g. style="as: df;"). It makes it way too hard to keep track of things and becomes super messy.
Don't unnecessarily use the <ul>s and <li>s. Just because you use them for your menu doesn't mean you should use them for everything. Your menu is actually a nested list if you think about it. These random images are not.
Instead of using an <img> element for the image, make it the background of a div; that way you can easily position things inside of it as you would any div.
Use something like photoshop to combine the DM-logowhite.png and footerbackground.png into a single image. It'll save you a lot of pain and pixel-pushing. And it'll make the next step the last step..
Put the paragraphs into divs inside the div with the footer image as a background. Float one left, and float the other right. Voila, you're done :)
Obviously I can't do all this for you, but try out my recommendations and let me know how it works out for you or if you have any questions :)
I need help in extending my div to the bottom of the page when there is not enough content to do so, when I add a height of 100% to the content and container nothing changes and when I add it to the body everything messes up. I am trying to give as much information as possible and so have provided the CSS and HTML below.
CSS:
(all of it, a lot of it is probably unnecessary in regards to this problem sorry)
body {
background-color: #111014;
background-image: url("images/bg.png");
background-repeat: repeat-x;
color: #dad8df;
font-family: tahoma;
overflow-y: scroll;
}
#container {
height: 100%;
width: 1000px;
margin-left: auto;
margin-right: auto;
}
img{
border-style: none;
}
#banner {
margin-top: 45px;
margin-bottom: 38px;
height: 68px;
width: 1000px;
background-image: url("images/bannerbg.png");
}
#navigation {
height: 36px;
width: 1000px;
margin-left: 49px;
}
#content {
background-image: url("images/contentbg.png");
background-repeat: repeat-y;
height: 100%;
width: 850px;
padding-left:80px;
padding-bottom: 20px;
margin-bottom: -8px;
padding-right: 50px;
overflow: hidden;
}
#title {
height: 90px;
width: 542px;
padding-left: 60px;
padding-top: 36px;
background-image: url("images/titlebg.png");
background-repeat:no-repeat;
font-family: tahoma;
font-size: 2.5em;
color: #dad8df;
margin-left: -80px;
}
#slideshow {
height: 285px;
width: 840px;
margin-left: auto;
margin-right: auto;
background-color: #2e2c35;
float: left;
margin-bottom: 20px;
}
#slideleft {
height: 38px;
width: 23px;
background-image: url("images/slideleft.png");
float: left;
margin-left: -60px;
margin-top: 104px;
}
#slideright {
height: 38px;
width: 23px;
background-image: url("images/slideright.png");
float: right;
margin-right: -50px;
margin-top: 104px;
}
#emailform {
color: #dad8df;
font-family: tahoma;
overflow: hidden;
}
.inputs {
float: right;
width: 200px;
font: .9em tahoma;
}
#largemessage {
float: right;
clear: both;
width: 700px;
height: 150px;
resize: none;
font: .9em tahoma;
}
#submit {
margin-top: 20px;
clear: both;
float: right;
}
hr {
border-width: 3px 0 0 0;
border-style: dotted;
}
.contacterror {
margin-right: 180px;
height: 20px;
width: 300px;
color: red;
float: right;
padding-left: 20px;
}
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" xml:lang="en" lang="en">
<head>
<title>About :: Lesley Robb Fine Art and Design</title>
<link rel="icon" type="image/png" href="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" href="design.css" type="text/css"/>
<script src="" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="banner">
</div>
<div id="navigation">
<img src="images/nav_home.png" alt="Home" /><img src="images/nav_portfolio.png" alt="Portfolio" /><img src="images/nav_about.png" alt="About" /><img src="images/nav_contact.png" alt="Contact" />
</div>
<div id="content">
<div id="title">
About
</div>
You can edit this section after you Log In to the Control Panel. :)</div>
</div>
</body>
</html>
The Page As it Currently Is
An image of it for future reference once I have fixed the problem
Thanks in advance for your time,
Callum
Try using a technique called Faux Columns.
Usually, if you add
body, html{
height:100%;
}
the container div will inherit from it.
Try setting the height on your #container div to auto.
#container {
height:auto;
That should do it!
As the doc said:
The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'
http://www.w3.org/TR/CSS2/visudet.html#the-height-property
If adding html,body { height:100%; } mess up, it's certainly because browsers set default margin/padding for these elements.
The simpler solution for your problem is to set for #container min-height the viewport height and set it a background which will fake #content reaches the bottom. Faux columns as Nathaniel said.
So my CSS layout was all fine until I wanted to add some into the content area of my web page.
What I'm trying to add into the content section is a wrapper box which contains a graph on the left and a bunch of little info boxes on the right, and potentially an info area underneath those two with 100% width of the content box.
But as soon as I add that in, it pushes my User Info div down below Content. =/ So I guess what's asking is how to create containers of divs within my content section that won't affect things like my sidebar?
Here's my code:
<div id="wrapper">
<div id="header"> </div><!-- #header-->
<div id="nav"> </div>
<div id="middle">
<div id="container">
<div id="content"><!-- content -->
<div id='containerGraph'>
<div id='sngAnimals'></div>
<div id='graph'><img src='./lib/pChart2.1.1/examples/chartAnimalKillsPerDay.php' width='x' height='y' id='graphImg'/></div>
<div id='bottomCont'></div></div>
</div><!-- #content-->
</div><!-- #container-->
<div class="sidebar" id="sideLeft">
User info
</div><!-- .sidebar#sideLeft -->
</div><!-- #middle-->
</div><!-- #wrapper -->
And the css:
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
font: 12px/18px Arial, Tahoma, Verdana, sans-serif;
width: 100%;
height: 100%;
background-image:url('/mcimages/bg.png');
}
#wrapper {
width: 1000px;
margin: 0 auto;
min-height: 100%;
height: auto !important;
height: 100%;
color: white;
}
/* Middle
-----------------------------------------------------------------------------*/
#middle {
width: 100%;
padding: 0 0 100px;
height: 1%;
position: relative;
}
#middle:after {
content: '.';
display: block;
clear: both;
visibility: hidden;
height: 0;
}
#container {
width: 100%;
float: left;
overflow: hidden;
margin-top: 10px;
margin-bottom: 10px;
}
#content {
padding: 10px 0 10px 195px;
background: #666666;
}
#containerGraph {
border-style:solid;
border-width:5px;
width: 75%;
position:relative;
}
#graph {
width: 249px;
height: 210px;
border-style:solid;
border-width:5px;
position: relative;
float:left;
}
#sngAnimals {
width:50%;
height: 210px;
border-style:solid;
border-width:5px;
position: relative;
float:right;
}
#bottomCont{
position: relative;
clear:both;
}
}
/* Sidebar Left
-----------------------------------------------------------------------------*/
#sideLeft {
float: left;
width: 175px;
margin-left: -100%;
position: relative;
margin-top: 10px;
padding-left: 5px;
padding-top: 10px;
border-right-style: solid;
border-right-color: black;
border-right-width: 1px;
}
#friend {
float: left;
background: #B5AAFF;
border:1px solid;
position: relative;
top:5px;
left:0px;
margin-left:10px;
width:175px;
height:175px;
}
You didn't close a div and your CSS had errors as well:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="A short description." />
<meta name="keywords" content="put, keywords, here" />
<title>CraftLink</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" />
</head>
<body>
<div id="wrapper">
<div id="header">HEADER CONTENT</div><!-- #header-->
<div id="nav">
Nav item 1
Nav item 2
Nav item 3
Nav item 4
</div>
<div id="middle">
<div id="container">
<div class="sidebar" id="sideLeft">USER INFO GOES HERE.</div><!-- .sidebar#sideLeft -->
<div id="content"><!-- content -->
<div id='containerGraph'>
<div id='sngAnimals'></div>
<div id='graph'><img src='./lib/pChart2.1.1/examples/chartAnimalKillsPerDay.php' width='x' height='y' id='graphImg'/></div>
<div id='bottomCont'></div>
</div>
</div><!-- #content-->
</div><!-- #container-->
</div><!-- #middle-->
</div><!-- #wrapper -->
<!-- #footer -->
<div id="footer">
<h1>Footer Stuff</h1>
</div>
</body>
</html>
The CSS:
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
font: 12px/18px Arial, Tahoma, Verdana, sans-serif;
width: 100%;
height: 100%;
background-image:url('/mcimages/bg.png');
}
a {
color: white;
outline: none;
text-decoration: underline;
}
a:hover {
text-decoration: none;
}
p {
margin: 0 0 18px
}
img {
border: none;
}
input {
vertical-align: middle;
}
#wrapper {
width: 1000px;
margin: 0 auto;
min-height: 100%;
height: auto !important;
height: 100%;
color: white;
}
/* Header
-----------------------------------------------------------------------------*/
#header {
height: 100px;
background: #999999;
text-align: center;
font-size: 200%;
}
#nav {
height: 25px;
background: #555555;
text-align: center;
}
/* Middle
-----------------------------------------------------------------------------*/
#middle {
width: 100%;
padding: 0 0 100px;
height: 1%;
position: relative;
}
#middle:after {
content: '.';
display: block;
clear: both;
visibility: hidden;
height: 0;
}
#container {
width: 100%;
float: left;
overflow: hidden;
margin-top: 10px;
margin-bottom: 10px;
}
#content {
padding: 10px 0 10px 195px;
background: #666666;
}
#containerGraph {
border-style:solid;
border-width:5px;
width: 75%;
position:relative;
}
#graph {
width: 249px;
height: 210px;
border-style:solid;
border-width:5px;
position: relative;
float:left;
}
#sngAnimals {
width:50%;
height: 210px;
border-style:solid;
border-width:5px;
position: relative;
float:right;
}
#bottomCont{
position: relative;
clear:both;
}
/* Sidebar Left
-----------------------------------------------------------------------------*/
#sideLeft {
float: left;
width: 175px;
position: relative;
margin-top: 10px;
padding-left: 5px;
padding-top: 10px;
border-right-style: solid;
border-right-color: black;
border-right-width: 1px;
}
#friend {
float: left;
background: #B5AAFF;
border:1px solid;
position: relative;
top:5px;
left:0px;
margin-left:10px;
width:175px;
height:175px;
}
/* Footer
-----------------------------------------------------------------------------*/
#footer {
width: 1000px;
margin: -100px auto 0;
height: 100px;
background: #BFF08E;
}
/* Progress bar
----------------------------------------------------------------------------*/
.meter-wrap{
position: relative;
}
.meter-wrap, .meter-value, .meter-text {
/* The width and height of your image */
width: 155px; height: 30px;
}
.meter-wrap, .meter-value {
background: #3D352A url(/path/to/your-image.png) top left no-repeat;
}
.meter-text {
position: absolute;
top:0; left:0;
padding-top: 5px;
color: #fff;
text-align: center;
width: 100%;
}
The main idea is to have a color-specific menu throughout the whole site. In order to do this I've made a different style for each of the 6 main pages. On every main page there is a submenu.
Here's what I want it to look like:
And here is what it looks like:
As you can see I'm having a hard time setting the submenu in place. It seems that there is some weird gap between that and the main menu. I placed the * margin/padding/border 0 rule at the beginning of the css so i'm still at a loss.
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>DDS / Om skolen</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<!--BODY-->
<body>
<!--WRAPPER-->
<div id="wrapper">
<!--HEADER-->
<div id="header">
<div id="headlogo">
<h1>Den Demokratiske Skole</h1>
</div>
</div>
<!--MENUER-->
<div id="menu">
<!--NAV ABC-->
<div id="navbara">
</div>
<!--NAV ZXY-->
<div id="navbary">
</div>
<ul id="nav">
<!--INBOUND-->
<li>OM SKOLEN</li>
<li>OPTAGELSE</li>
<li>KONTAKT</li>
<li>MERE INFO</li>
<!--OUTBOUND-->
<li>FOREDRAG</li>
<li>PRESSE</li>
</ul>
</div>
<div id="navmarka">
</div>
<div id="subnav">
<ul>
<li>SKOLEN</li>
<li>VÆRDIER</li>
<li>ANSATTE</li>
<li>BESTYRELSEN</li>
<li>VENNEKREDS</li>
<li>INTRANET</li>
</ul>
</div>
<!--CONTENT-->
<div id="content">
</div>
<div id="footer">
</div>
</div>
</body>
</html>
CSS:
#charset "UTF-8";
/*OVERALLS*/
* {
margin: 0px;
border: 0px;
padding: 0 px;
}
h1 {
font-size: 10px;
text-indent: -99999px;
}
/*SINGLES*/
#wrapper {
margin-right: auto;
margin-left: auto;
width: 780px;
margin-top: 20px;
height: auto;
}
#header {
width: 780px;
height: 84px;
float: left;
margin-bottom: 10px;
}
#headlogo {
background-image: url(../images/headerlogo.png);
height: 84px;
width: 215px;
float: left;
}
#menu {
height: 30px;
width: 780px;
float: left;
}
#bars {
float: left;
height: 10px;
}
/*navbarABC*/
#navbara {
height: 10px;
width: 381px;
float: left;
margin-right: 26px;
background-color: #3FA9F5;
}
#navbarb {
height: 10px;
width: 380px;
float: left;
margin-right: 26px;
background-color: #3CF;
}
#navbarc {
height: 10px;
width: 380px;
float: left;
margin-right: 26px;
background-color: #3CF;
}
#navbard {
height: 10px;
width: 380px;
float: left;
margin-right: 26px;
background-color: #3CF;
}
#navbare {
height: 10px;
width: 380px;
float: left;
margin-right: 26px;
background-color: #3CF;
}
/*navbarZXY*/
#navbarz {
height: 10px;
width: 154px;
float: left;
background-color: #3CF;
}
#navbarx {
height: 10px;
width: 154px;
float: left;
background-color: #3CF;
}
#navbary {
height: 10px;
width: 154px;
float: left;
background-color: #000;
}
#nav {
float:left;
padding: 0px;
width: 780px;
font-size: 14px;
font-weight: 100;
height: 10px;
margin-top: 5px;
}
#nav ul{
list-style-type:none;
}
#nav li{
display:inline;
margin-right: 21px;
}
#nav li a{
text-decoration: none;
font-family: Helvetica;
color: #000;
}
#navmarka {
height: 1px;
width: 83px;
background-color: #3FA9F5;
float: left;
margin-right: 697px;
}
/*subnav*/
#subnav {
float:left;
width: 200px;
font-size: 12px;
height: 100px;
margin-top: 20px;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #3CF;
}
#subnav ul{
list-style-type:none;
}
#subnav li a{
padding: 0px;
}
#subnav li a{
text-decoration: none;
font-family: Helvetica;
color: #000;
}
#footer {
clear: both;
height: 20px;
width: 780px;
}
Your <div id="subnav">...</div> has a margin-top: 20px; set
Remove that, the gap disappears.
EDIT;
Just noticed on your image you have a gap between the top line and the sub navigation too, you can achieve this by adding padding-top: 20px;
Remove the margin-top:20px in #subnav. It overrides the margin:0px.
It's because of your margin-top. Try margin-top:10px, or 5px to suit your need.
I'm currently coding my design portfolio and have encountered a problem with the layout.
Here is a link to my website so you can see the problem: http://www.mozazdesign.co.cc/
Basically, I want the contact me and the icons below to appear under the header and navigation. I have put them in separate containers but for some reason where ever I place the contact me div the header follows.
Here's the code:
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link href="styles.css" rel="stylesheet" type="text/css" />
<title>MozazDesign Portfolio</title>
</head>
<body>
<div id="container">
<div id="header">
<div id="logo">
</div><!--end logo-->
<div id="nav">
<ul id="main_nav">
<li>home</li>
<li>about me</li>
<li>gallery</li>
<li>blog</li>
<li>contact</li>
</ul><!--end main nav-->
</div><!--end nav-->
</div><!--end header-->
<div id="main_content">
<div id="contact">
</div><!--end contact"-->
</div><!--end main content-->
</div><!--end container-->
</body>
body {
padding: 0px;
margin: 0px;
background:url('images/Background.png');
font-family: century gothic;
}
#nav a {
text-decoration: none;
color: white;
}
#container {
margin: 0 auto;
width: 960px;
}
#header {
width: 960px;
}
#logo {
background:url('images/Logo.png') no-repeat;
height: 340px;
width: 524px;
float: left;
margin-left: 0px; <!--check-->
}
#nav {
background:url('images/Nav_Container.png') no-repeat;
width: 435px;
height: 33px;
float: right;
margin-top: 100px;
padding: 0px;}
#main_nav {
padding: 0px;
margin-left: 15px;
margin-top: 5px;
}
#main_nav li {
list-style: none;
display: inline;
font: 18px century gothic, sans-serif;
color: white;
margin-right: 18px;
}
#main_content {
width: 960px;
margin-top: 250px;
}
#contact {
background: url('images/contact.png');
height: 274px;
width: 295px;
}
I would really appreciate any help! Thanks in advance! :)
One of the problems you had was that your floated elements were not being contained inside the parent element (#header). You can use overflow:auto; on the parent element to contain floated elements inside. But, for a header like this, I usually opt to just position everything absolutely, since the content is not dynamic.
I am not sure if this is exactly what you are looking for, but this CSS will make it look like what you are looking for, I think.
body {
padding: 0px;
margin: 0px;
background:url('Images/background.png');
font-family: century gothic;
}
#nav a {
text-decoration: none;
color: white;
}
#container {
margin: 0 auto;
width: 960px;
}
#header {
height:200px;
position:relative;
}
#logo {
background:url('Images/Logo.png') no-repeat;
height: 340px;
width: 524px;
position:absolute;
}
#nav {
background:url('Images/Nav_Container.png') no-repeat;
width: 435px;
height: 33px;
position:absolute;
right:0;
top:100px;
padding: 0px;
}
#main_nav {
padding: 0px;
margin-left: 15px;
margin-top: 5px;
}
#main_nav li {
list-style: none;
display: inline;
font: 18px century gothic, sans-serif;
color: white;
margin-right: 18px;
}
#main_content {
}
#contact {
background:url('Images/Contact.png');
height: 274px;
width: 295px;
margin-left:125px;
}
Looks like you need clear: both on your main_content div.
I think an
#header {
overflow:hidden
}
or anything else that clears the floats of div#nav and div#logo should help.
It take 2 steps:
1) Move <div id="contact">...</div><!--end contact"--> into <div id="logo">...</div><!--end logo-->.
2) Change the #contact style to:
background: url("Images/Contact.png") repeat scroll 0 0 transparent;
height: 274px;
top: 200px;
width: 295px;
position: relative;
float: right;
top: 200px;
You need to set position: relative, otherwise it is not working.