I don't know what happened to my navigation bar and its links. They do not show (Safari 6.0.5). I have tried to adjust the height and position of my header and nav containers. I know the answer is righht there in front of me but I don't see it. I haven't found any ideas on my web searches. Thank you for your help.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MS Office Skills</title>
<link href="css/stylesheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
<img class="pctr" src="images/lily-pads.jpg" alt="Admin extraordinaire" />
<!-- another img class MAY GO HERE. but for now, nothing -->
</div><!--/#header-->
<div id="nav">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Our Services</li>
<li>Read Our Blog</li>
<li>Contact Us</li>
</ul>
</div><!--/#nav-->
</div><!--/#container-->
</body>
</html>
/* BODY AND CONTAINER
---------------------------------*/
body {
font-size: 76%;
<!-- background-image: url(../images/black.jpg); -->
<!-- background-image: url(../../CGT136as/week-07hw/website/images/bg-strip-body.jpg); -->
background-repeat: repeat-x;
padding: 0px;
margin: 0px;
}
#container {
overflow: hidden;
width: 100%;
margin: 0 auto 0 auto;
}
/* HEADER AREA
---------------------------------*/
#header {
position: absolute;
left:0;
width: 100%;
height: 190px;
padding: 0px;
margin: 0px;
background-color: #0d0d0d;
}
.pctr {
position: relative;
top: 0px; <!-- 30px; -->
left: 0px; <!-- 0px; -->
z-index: 20;
}
/* MAIN NAVIGATION
---------------------------------*/
#nav {
float: left;
width: 900px;
height: 53px;
padding: 0px;
margin: 0px;
}
#nav ul {
list-style: none;
padding: 0px;
margin: 0px;
}
#nav ul li {
float: left;
line-height: 53px;
padding: 0 50px 0 0;
}
#nav ul li a {
font-family: arial, helvetica, sans-serif;
font-size: 1.4em;
font-weight: bold;
color: #fff;
text-decoration: none;
}
#nav ul li a:hover {
color: #ff0;
border-bottom: 2px dotted #fff;
}
Your Header Div is ending up on top of the navigation div (You can see it by setting your header's background to be transparent). Either add a z-index: -1 rule to the header div.
Or apply the position: absolute; rule to the container div instead (Which is probably what you wanted).
Related
I have a new site I am putting together to learn web coding.
My current code for the section in question is as follows:
require_once 'includes/functions.php';
<?php
if(logged_in())
{
$data = $db->query('SELECT COUNT(id) AS num FROM mail WHERE userid = "'.$_SESSION['id'].'"');
$row = $data->fetch_assoc;
$mcount = $row['num'];
}
?>
<!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><?php echo SITENAME; ?></title>
<link rel="stylesheet" type="text/css" href="styles/main.css"
</head>
<body>
<div id="wrapper">
<div id="header">
<?php
if(logged_in())
{
echo 'Welcome, ' . $_SESSION['username'] . '! <img src="" alt="" width="32" height="32" /> ('.$mcount.')';
}
else
{
echo 'Welcome, Guest!';
}
?>
</div>
<div id="banner"><img src="" alt="" width="1000" height="250" /></div>
<div id="navbar">
<ul>
<li>Home</li>
<li>
<?php
if(logged_in())
{
?>
Logout
<?php
} else {
?>
Login/Register
<?php
}
?>
</li>
<li>Forums</li>
<li>Contact Us</li>
<li>Donate</li>
</ul>
</div>
<div id="content">
... Content to be added here ...
</div> <!-- end content -->
<div id="footer">Copyright 2018 <?php echo SITENAME; ?>. All Rights Reserved.<br />Webmaster Terms of Service</div>
</div> <!-- end wrapper -->
</body>
</html>
and my CSS for these sections are as such:
#navbar
{
float: left;
}
#navbar ul
{
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;;
background-color: #f1f1f1;
position: fixed;
overflow: auto;
}
#navbar li a
{
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
#navbar li a:hover
{
background-color: #555;
color: white;
}
#content
{
float:right;
width: 810px;
padding: 10px;
}
#footer
{
clear: both;
font-size: 9pt;
text-align: center;
}
My question is this: The Navbar and the Content lines up fine (navbar is fixed to the right so that it will scroll with the page content), but the footer is hidden behind the navbar if the content is shorter than the navbar height.
Is there a way to set the footer min-height to inherit the height of the navbar div so that it will always appear below the fixed navbar instead of behind it?
I researched this on the web, and nothing touched on how to do this specifically (they just said to create a element between the fixed element and the bottom element to create a buffer, which is not what I am trying to do).
Update
Updated code with the entire php file (index.php)
Website URL for preview to see issue live: Test Site
You could make the body the height of the browser window by doing the following
body
{
height: 100%;
}
I'm going blind on this, Is This the desired look ?
#navbar
{
float: left;
}
#navbar ul
{
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;;
background-color: #f1f1f1;
position: fixed;
overflow: auto;
}
#navbar li a
{
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
#navbar li a:hover
{
background-color: #555;
color: white;
}
#content
{
float:right;
width: 810px;
padding: 10px;
}
#footer
{
clear: both;
font-size: 9pt;
text-align: center;
position: fixed;
bottom: 0;
height: 100px;
width: 100%;
background: red;
}
<div id="navbar">
<ul>
<li>Home</li>
<li>
Logout
Login/Register
</li>
<li>Forums</li>
<li>Contact Us</li>
<li>Donate</li>
</ul>
</div>
<div id="content">
</div>
<div id="footer">
</div>
set the CSS file like this
#content
{
float:right;
width: 810px;
padding: 10px;
height: 100%;
}
#footer
{
clear:both;
font-size: 9pt;
width: 100%;
background-color: green;
color: white;
text-align: center;
}
I think your expecting answer is this. now the footer is on top of the nav bar
If you want to use a pure CSS without Javascript, you could apply a min-height to the .content element which will force the footer down; In the demo below I have specified the .content to have a min-height: 100vh; to make sure it is at least 100% of the height of the viewport.
Read to the comments in the code for reasons for some of my changes
#navbar {
position: fixed;
left: 0;
top: 0;
/*float: left; Float values do not control the position of fixed elements, the above offset values do*/
}
#navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
/*position: fixed; Placing your fixed position value on the #navbar element makes more structural sense*/
overflow: auto;
}
#navbar li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
#navbar li a:hover {
background-color: #555;
color: white;
}
#content {
float: right;
width: 810px;
padding: 10px;
min-height: 100vh; /*Change this to what you want*/
}
#footer {
clear: both;
font-size: 9pt;
text-align: center;
}
<div id="navbar">
<ul>
<li>Home</li>
<li>Forums</li>
<li>Contact Us</li>
<li>Donate</li>
</ul>
</div>
<div id="content">
</div>
<div id="footer">
FOOTER
</div>
Another solution would be to set a margin-bottom on the .content that is the same height as the #navbar element:
#navbar {
position: fixed;
left: 0;
top: 0;
/*float: left; Float values do not control the position of fixed elements, the above offset values do*/
}
#navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
/*position: fixed; Placing your fixed position value on the #navbar element makes more structural sense*/
overflow: auto;
}
#navbar li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
#navbar li a:hover {
background-color: #555;
color: white;
}
#content {
float: right;
width: 810px;
padding: 10px;
margin-bottom: 136px /*Current height of the #navbar*/;
}
#footer {
clear: both;
font-size: 9pt;
text-align: center;
}
<div id="navbar">
<ul>
<li>Home</li>
<li>Forums</li>
<li>Contact Us</li>
<li>Donate</li>
</ul>
</div>
<div id="content">
</div>
<div id="footer">
FOOTER
</div>
I'm trying to make my header banner stretch / fit to the website's dimensions, however, I am unsure how to make this happen on every browser.
HTML5:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Play - Learn - Grow</title>
<link rel="stylesheet" href="main.css">
</head>
<body class="body">
<span class="text_h">
Welcome to KUBE Toy Library!
</span>
<span class="banner_h">
<img src="Images\Top_Banner.jpg" alt="Banner" height="150" width ="1240"/>
</span>
<nav>
<ul class="nav">
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
<li>Become a Member</li>
<li>Borrow Toys</li>
<li>Our Policies</li>
<li>Site Map</li>
</ul>
</nav>
<span class="banner_l">
<img src="Images\Left_Banner.jpg" alt="Banner" />
</span>
<span class="banner_r">
<img src="Images\Left_Banner.jpg" alt="Banner" />
</span>
<h2 class="headers">Welcome to the Home Page!</h2>
<div class="container">
Our aim is to provide the children of the community with an ever-changing variety of educational and fun toys to enhance
their cognitive, social, emotional and physical development in the important first six years of their lives.
<br><br><span class="Links">Be sure to check out our Wikispace site with more information here!</span>
</div>
<div id="content"></div>
<div id="footer">
Copyright © 2013
</div>
</body>
</html>
CSS:
/* Entire Document CSS */
html{
height: 100%;
}
/* Header CSS */
.headers{
color: #FFD89A;
text-align: center;
padding: 10px;
}
/* Body CSS */
.body{
background-color: #61B329;
height: 50%;
color: #FFFFFF;
}
.container{
margin: 0 auto 0 auto;
width: 50em;
text-align: center;
padding-bottom: 500px;
height: 50%;
}
/* Navigation CSS */
.nav {
display: inline-block;
background-color: #00B2EE;
border: 1px solid #000000;
border-width: 1px 0px;
margin: 0;
padding: 0;
min-width: 1000px;
width: 100%;
}
.nav li {
list-style-type: none;
width: 14.28%;
float: left;
}
.nav a {
display: inline-block;
padding: 10px 0;
width: 100%;
text-align: center;
}
/* Banner / Picture CSS / Text in Images */
.banner_l{
float: left;
}
.banner_r{
float: right;
}
.banner_h{
positon: relative;
width: 100%;
}
.text_h{
position: absolute;
color: white;
text-align: center;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
}
/* Footer CSS */
#footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
}
#content {
padding-bottom: 3em;
}
/* Link CSS */
a:link{
color: #FFFFFF;
text-decoration: none;
}
a:visited{
color: #FFFFFF;
text-decoration: none;
}
a:hover{
background-color: #028482;
color: #FFFFFF;
text-decoration: underline;
}
a:active{
background-color: #FCDC3B;
color: #AA00FF;
text-decoration: overline;
}
.Links A:hover{
color: #028482;
background-color: transparent;
text-decoration: underline overline;
}
If your wondering why this is being created, this is for a school assessment task, and all content is fictious.
Try:
* {margin:0; padding: 0;}
.banner_h {display: block; width: 100%;}
.banner_h img {width:100%}
Check the result out in a fiddle.
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 :)
doing a project at uni and I've completely misread the brief, used HTML5 in my project and realised that I'm not allowed to do this. Oops!
My only problem is, I've tried to convert it to XHTML Strict 1.0 standards by using divs and it just isn't as easy as I thought.
I will only post up the nav section as that's what I need help with, no need for all the extra bits and bobs.
Before I post - just wanted to clarify the question:
This code is HTML5 compliant, I need it to be XHTML Strict 1.0 compliant but I can't get the CSS working with divs in place of the nav function.
Here is the code:
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="style\main.css" />
<title>Wessex Round Table of Investors</title>
</head>
<body>
<div id="whole">
<div id="header">
<img class="logo" src="images\wrtilogo.gif" alt="WRTI Logo" />
</div>
<div id="navbar">
<div id="container">
<nav id="menu">
<ul>
<li>Home</li>
<li>Link
<ul>
<li>Sublink</li>
<li>Sublink</li>
<li>Sublink</li>
<li>Sublink</li>
</ul>
</li>
<li>Link
<ul>
<li>Sublink</li>
</ul>
</li>
<li>Link
<ul>
<li>Sublink</li>
</ul>
</li>
<li>Link</li>
</ul>
</nav>
</div>
</div>
</div>
</body>
</html>
aaaand here is the CSS
div.whole {
margin-left: 15%;
margin-right: 15% }
div.header {
width: 100%; }
div.navbar {
position: absolute;
display: block;
width: 90%;
margin-left: auto;
margin-right: auto;
text-align: center }
img.logo {
display: block;
margin-left: auto;
margin-right: auto }
#content
#footer
#navigation {
width: 800px;
margin: 30px auto;
background: #fff;
box-shadow: 0 0 20px #8493A6;
overflow: auto;
}
nav#menu {
margin: 10px 30px 30px;
padding: 0;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
text-align: center; /*this is the first bit that centers the menu*/
font: 100%/40px Verdana, Geneva, sans-serif
}
nav#menu ul {margin: 0;}
nav#menu ul li {
margin: 0;
padding: 0;
display: inline-block; /*this is the second bit that centers the menu*/
position: relative;
list-style: none;
background: #fff;
}
nav#menu ul li a {
padding: 1px 20px;
display: block;
font-size: 17px;
font-weight: 300;
color: #cc0000;
text-decoration: none;
}
nav#menu ul li:hover {background: #fff;}
nav#menu ul ul {
width: 160px;
margin: 0;
padding: 0;
position: absolute;
top: 42px;
left: -999px;
border: 1px solid #ccc;
border-radius: 3px 3px 3px 3px;
box-shadow: 0 0 0 transparent;
}
nav#menu ul li:hover ul { /*this bit centers the dropped ul relative to the parent li*/
margin: 0 0 0 -80px;
left: 50%;
}
nav#menu a:hover {color: #540000;}
Often, you're using IDs in your HTML, but styling based on classes.
e.g. If you're going to say
div.navbar {
...
}
That will apply to:
<div class="navbar">...</div>
not
<div id="navbar">...</div>
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.