I've got problem that the navigation for tablet PC with picture I add should cover whole page. Because I gave it fixed position width : 100%, height : 100% . But somehow there is a gap as you can see.
I dont know where did I missed :( .....
gap1
gap2 (after I gave it left : -50px)
here is HTML
<body>
<header>
<div class="side_nav">
</div>
<div class="header_con">
<span></span>
<p><img src="images/logo.png" alt="logo"></p>
<nav>
<ul class="depth1">
<li>코로나-19
<ul class="depth2">
<li>손세정제</li>
<li>소독제</li>
</ul>
</li>
<li>컬렉션
<ul class="depth2">
<li><small>new</small>클레멘타인 앤 바질</li>
<li><small>new</small>베티버 앤 바이올렛</li>
<li>아로마테라피 시너지</li>
<li>허벌리스트</li>
<li>풋 리바이버</li>
<li>인블룸</li>
<li>크리스탈크러쉬</li>
<li>배스타임</li>
<li>선물세트/ 기프트세트</li>
</ul>
</li>
<li>오일
<ul class="depth2">
<li>페이셜오일</li>
<li>멀티오일</li>
</ul>
</li>
.
.
.
</ul>
</nav>
</div>
</header>
normal CSS
header .header_con {width: 100%; height: 100%; position: relative; height: 174px;}
header .header_con p img {width: 350px; height: auto;}
header .header_con>div{width: 100%;}
header nav { width: 750px;/* margin:0 auto;*/ position: absolute; left: 50%; margin-left: -360px;}
header ul.depth1>li{float: left; width: 70px; margin: 0 0.2%; font-size: 0.9em; font-weight: bold; text-align: center;}
header ul.depth2{display: none; position: absolute; z-index: 100; width: 200px; margin-top: 20px; background: #fff; text-align: left; padding: 20px; font-weight: normal; font-size: 0.8em;}
header ul.depth2>li {margin-bottom: 12px;}
and here is (max-width: 1050px) CSS
#media all and (max-width: 1050px) {
header div.header_con nav {/* display: none;*/ position: fixed; top:0; left: -50px; width: 100%; height: 100%; background: #0b223b; border:1px solid red; z-index: 110;}
header div.header_con nav a{ color: white;}
header div.header_con nav .depth1{display: block; color: white; height: 100%;}
header div.header_con nav .depth1 li {float: none ;width: 100%; height: 50px; line-height: 50px; border-bottom: 1px solid #999; }
header div.header_con span{position: absolute; top: 50%; margin-top: -13px; left: 30px; z-index:100; width: 30px; height: 25px; background: url(../images/navbar.png) no-repeat; background-size: 30px 25px;}
header div.header_con span a{width: 30px; height: 25px;}
}
Have you tried setting top: 0; right: 0; bottom: 0; left: 0; on the nav instead of the width andd height?
Related
I've got a drop down menu that won't appear over the rest of the content. I've set the position to absolute and the z-index to 99 and no luck. Any ideas how to get it to lay on top of the rest of the site?
<body>
<header>
<div class="container">
<h1 class="logo">Relaxr</h1>
<nav>
</span>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Blog</li>
</ul>
</nav>
</div>
</header>
<section id="main">
<div class="container">
nav {
position: relative;
}
nav ul {
display: none;
}
header {
margin-left: -20px;
margin-right: -20px;
}
body {
margin-left: 20px;
margin-right: 20px;
}
.container {
width: 100%;
margin: 0;
}
#main {
margin-top: 10px;
}
header nav ul li {
display: block;
margin-right: 20px;
margin: 0 20px 0 0;
}
.hamburger {
margin-top: 5px;
margin-right: 80px;
margin-bottom: 20px;
float:right;
position: relative;
display: inline-block;
width: 1.5em;
height: 0.74em;
border-top: 0.2em solid #fff;
border-bottom: 0.2em solid #fff;
}
.hamburger:before {
content: "";
position: absolute;
top: 0.9em;
left: 0px;
width: 100%;
border-top: 0.2em solid #fff;
}
nav ul {
position: absolute;
left: 0; top: 100%;
width: 100%;
background-color: black;
z-index: 99;
Codepen:
http://codepen.io/kiddigit/pen/wWvPJm
In your #media query change
nav {
position: relative;
}
to
nav {
position: absolute;
}
This will keep your menu on top.
I think You should use something like this to work
$(".hamburger").click(function(e){
$("nav > ul").toggle();
});
there is only one difference I've added a closing bracket in
$("nav > ul").toggle();
I'm trying to position a element absolute inside a parent which is set to position: relative, so far so good.
The issue is, that the parent is 100% width, and the absolute positioned element would then stick all the way to the right of the browser when right:0.
What I really want, is to position the element right, so it lines up with the wrapper of the page, which has width:1140px.
If I set the right to fx. 100px of the absolute element, it will of course have different outcomes on different resolutions.
A bit hard to explain, so I've made a jsFiddle:
https://jsfiddle.net/wxxezx0w/1/
.navigation {
width:500px;
background:#def;
margin:0 auto;
text-align:center;
padding:5px 0;
margin-bottom:10px;
}
.navigation ul {
list-style-type:none;
padding:0;
}
.navigation ul li {
display:inline;
padding-right:20px;
}
.grandParent {
position:relative;
width:100%;
}
.parent {
background: url('http://dummyimage.com/1800x1200/ccc/ccc') no-repeat 0 20%;
background-size:cover;
height:300px;
}
.child h1 {
position: absolute;
top: 25%;
left: 25%;
color: #fff;
font-size: 60px;
font-weight: bold;
width: 50%;
text-align: center;
}
.child .box {
position: absolute;
bottom: -10px;
right: 0;
background: #fed;
padding: 10px 25px;
color: #000;
font-size: 20px;
z-index: 10;
display: block;
}
<div class="navigation">
<ul>
<li>
Home
</li>
<li>
Page1
</li>
<li>
Page2
</li>
</ul>
</div>
<div class="grandParent">
<div class="parent">
<div class="child">
<h1>Hello world</h1>
<div class="box">Align me right, relative to navigation div</div>
</div>
</div>
</div>
Try this:
.navigation {
width:500px;
background:#def;
margin:0 auto;
text-align:center;
padding:5px 0;
margin-bottom:10px;
}
.navigation ul {
list-style-type:none;
padding:0;
}
.navigation ul li {
display:inline;
padding-right:20px;
}
.grandParent {
position:relative;
width:100%;
}
.parent {
background: url('http://dummyimage.com/1800x1200/ccc/ccc') no-repeat 0 20%;
background-size:cover;
height:300px;
}
.child h1 {
position: absolute;
top: 25%;
left: 25%;
color: #fff;
font-size: 60px;
font-weight: bold;
width: 50%;
text-align: center;
}
.child < .box {
position: absolute;
bottom: -10px;
right: 0;
background: #fed;
padding: 10px 25px;
color: #000;
font-size: 20px;
z-index: 10;
display: block;
}
Note that I've changed the parental relationship in your CSS adding > which means first child of, such as: .child < .box {}
If you set a whitespace between one tag and another in CSS means that the first one contains the second, and in this case is true, but also exist a parental relationship.
Here the jsfiddle: https://jsfiddle.net/wxxezx0w/2/
This fiddle shows what you want, even when resized it will stay in the correct position.
I modified .child .box and added a right: 50%; and margin-right: -250px;
.child .box {
position: absolute;
bottom: -10px;
right: 50%;
margin-right: -250px;
background: #fed;
padding: 10px 25px;
color: #000;
font-size: 20px;
z-index: 10;
display: block;
}
What this basically does is:
right: 50%; - makes sure the element is always positioned 50% from the right side of the screen.
margin-right: -250px; - this is half of the width of your navigation, since your nav is centered it will be aligned the same as right: calc(50% - (half-width-of-nav)); so the same calculation is made for positioning this element.
I hope this is understandable to you, if not let me know and I'll try to elaborate.
Also - if you can use CSS calc() (compatibility table) you could remove the negative margin and just use right: calc(50% - 250px);
Also note that if you change the width of your nav you'll also have to update this too so it comes at a price but when you visually change your design you'll see that this is no longer positioned correctly and all you'll have to do is modify the value.
Good luck!
u have set
.child .box {
bottom: -10px;
}
so it is outside the parent div.
The 'box' has to be inside the 'child' element?
Otherwise you could make a wrapper with the same dimensions of the navigation, put inside the box and then position it on the bottom-right.
.navigation {
width:500px;
background:#def;
margin:0 auto;
text-align:center;
padding:5px 0;
margin-bottom:10px;
}
.navigation ul {
list-style-type:none;
padding:0;
}
.navigation ul li {
display:inline;
padding-right:20px;
}
.grandParent {
position:relative;
width:100%;
}
.parent {
background: url('http://dummyimage.com/1800x1200/ccc/ccc') no-repeat 0 20%;
background-size:cover;
height:300px;
}
.child h1 {
position: absolute;
top: 25%;
left: 25%;
color: #fff;
font-size: 60px;
font-weight: bold;
width: 50%;
text-align: center;
}
#box_wrapper{
width: 500px;
margin: auto;
position: relative;
height: 100%;
}
.box {
float: right;
margin: auto;
background: #fed;
padding: 10px 25px;
color: #000;
font-size: 20px;
z-index: 10;
display: block;
position: absolute;
right: 0;
bottom: 0;
}
<div class="navigation">
<ul>
<li>
Home
</li>
<li>
Page1
</li>
<li>
Page2
</li>
</ul>
</div>
<div class="grandParent">
<div class="parent">
<div class="child">
<h1>Hello world</h1>
</div>
<div id="box_wrapper">
<div class="box">Align me right, relative to navigation div</div>
</div>
</div>
</div>
Use css calc and fixed width for absolute positioned element that will help.
.navigation {
width:500px;
background:#def;
margin:0 auto;
text-align:center;
padding:5px 0;
margin-bottom:10px;
}
.navigation ul {
list-style-type:none;
padding:0;
}
.navigation ul li {
display:inline;
padding-right:20px;
}
.grandParent {
position:relative;
width:100%;
}
.parent {
background: url('http://dummyimage.com/1800x1200/ccc/ccc') no-repeat 0 20%;
background-size:cover;
height:300px;
}
.child h1 {
position: absolute;
top: 25%;
left: 25%;
color: #fff;
font-size: 60px;
font-weight: bold;
width: 50%;
text-align: center;
}
.child .box {
position: absolute;
bottom: -10px;
right: calc(50% - 250px);
background: #fed;
padding: 10px 25px;
color: #000;
font-size: 20px;
z-index: 10;
width:450px;
text-align:center;
}
<div class="navigation">
<ul>
<li>
Home
</li>
<li>
Page1
</li>
<li>
Page2
</li>
</ul>
</div>
<div class="grandParent">
<div class="parent">
<div class="child">
<h1>Hello world</h1>
<div class="box">Align me right, relative to navigation div</div>
</div>
</div>
</div>
I'm creating a page that looks like this:
Here is the code
body { min-height: 50vh;
line-height: 1;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
}
#headlogo{
position: absolute;
top: 12px;
margin: 0 auto;
font-weight: bold;}
#header {
padding: 0;
background-color: #1565C0;
}
#header .section {
margin: 0 auto;
padding: 0;
width: 900px;
overflow: hidden;
}
#header .section ul {
display: inline-block;
float: right;
margin: 0;
overflow: hidden;
padding: 50px 0 10px;
}
#header .section ul li {
background: url(./images/headernav.gif) no-repeat top right;
display: inline-block;
float: left;
list-style: none;
margin: 0 10px;
padding: 0;
}
#header .section ul li a {
color: #fff;
display: inline-block;
font-size: 15px;
height: 30px;
line-height: 30px;
margin: 0;
padding: 0 8px;
text-align: center;
text-decoration: none;
font-weight: bold;
letter-spacing: 0.03em;
}
#header .section ul li a:hover {
background: url(./images/headernavselected.gif) no-repeat top right;
}
#header .section ul li.selected {
background: url(./images/headernavselected.gif) no-repeat top right;
}
#header .section ul li.selected a {
background: url(./images/headernavselected.gif) no-repeat top left;
color: #E3F2FD;
}
#body {
margin: 0 0;
background-color:#DEDEDE;
}
#body .section {
margin: 0 auto;
min-width: 800px;
width: 800px;
overflow: hidden;
background-color:#FFFFFF;
padding: 60px 100px 50px 100px;
min-height: 50vh
}
#footer {
background: #1565C0;
margin: 0;
padding: 0;
}
#footer .section {
margin: 0 auto ;
padding: 20px;
width: 800px;
overflow: hidden;
};
<div id="header">
<div class="section">
<img src="./images/headerlogo.png" width="340" height="110" alt="" title="">
<ul>
<li class="selected">
Home
</li>
<li>
Store
</li>
<li>
Products
</li>
<li>
Forum
</li>
<li>
Support
</li>
</ul>
</div>
</div>
<div id="body">
<div class="section">
Lorem ipsum
</div>
</div>
<div id="footer">
<div class="section">
© copyright 2023 | all rights reserved.
</div>
The CSS is available here:
http://jsfiddle.net/85L448ds/
But I don't know how to make the page more responsive to sizing inconsistency. I want the page to default to 800 pixels wide, except where there is wide content or the browser window is too small (it should have a gray background outside this area). Whereas the height should be such that the height should not be less than the browser height.
In other words, I'd like it to work something like:
Width = 800
If Width > Window_Width then
Width = Window_Width
If Content_Width > Width then
Width = Content_Width
Whereas height should be the greater of: Content_Height and Windows_Height.
Note: Content_Width/Height cannot be predicted because I have a forum where the table structure is sometimes oversize to accomodate large images.
I've tried setting the CSS min-width property to 800, but that makes the default width 100%.
I thought height would be easy, just need to set the body to 100% height or 100vh, but that seems to have no effect...
I believe CSS Media Queries will resolve your problem.
Of course it is possibly just one of the solutions, but it is purely CSS and really easy to manage.
For more information about media queries: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
Using media queries happens like in this following example, where your #headLogo is set to change its properties once the viewport width is less or equal to 768px:
#media (max-width: 768px)
{
#headLogo {
text-align: center;
max-width: 300px;
}
}
Run snippet in full page and then play with window size after reduce the size of window your menu will hide and one button you can see. now show menu on button click.
If you run snippet so at first time you can see button because your
window size is < 768px if you want see menu then see result in full page
for responsive site use width in % not in px.
and you can also use bootstrap for that.
body {
min-height: 50vh;
line-height: 1;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
}
.smallButton{
display:none
}
#headlogo {
position: absolute;
top: 12px;
margin: 0 auto;
font-weight: bold;
}
#header {
padding: 0;
background-color: #1565C0;
width:100%;
height: 90px;
}
#header .section {
margin: 0 auto;
padding: 0;
overflow: hidden;
}
#header .section ul {
display: inline-block;
float: right;
margin: 0;
overflow: hidden;
padding: 50px 0 10px;
}
#header .section ul li {
display: inline-block;
float: left;
list-style: none;
margin: 0 10px;
padding: 0;
}
#header .section ul li a {
color: #fff;
display: inline-block;
font-size: 15px;
height: 30px;
line-height: 30px;
margin: 0;
padding: 0 8px;
text-align: center;
text-decoration: none;
font-weight: bold;
letter-spacing: 0.03em;
}
#header .section ul li a:hover {
background: url(./images/headernavselected.gif) no-repeat top right;
}
#header .section ul li.selected {
background: url(./images/headernavselected.gif) no-repeat top right;
}
#header .section ul li.selected a {
background: url(./images/headernavselected.gif) no-repeat top left;
color: #E3F2FD;
}
#body {
margin: 0 0;
background-color: #DEDEDE;
width:100%
}
#footer {
background: #1565C0;
margin: 0;
padding: 0;
width:100%;
}
#footer .section {
margin: 0 auto;
padding: 20px;
overflow: hidden;
}
#media (max-width: 768px)
{
#header .section ul {
display:none
}
.smallButton{
display:block;
position: absolute;
right: 0;
top: 32px;
}
#body .section {
margin: 0 auto;
overflow: hidden;
background-color: #FFF;
width: 500px;
height: 700px;
position: relative;
}
}
#media (min-width: 768px){
#body .section {
margin: 0 auto;
overflow: hidden;
background-color: #FFF;
width: 800px;
height: 700px;
position: relative;
}
}
<div id="header">
<div class="section">
<a href="index.html" id="headlogo">
</a>
<button class="smallButton">---</button>
<ul>
<li class="selected">
Home
</li>
<li>
Store
</li>
<li>
Products
</li>
<li>
Forum
</li>
<li>
Support
</li>
</ul>
</div>
</div>
<div id="body">
<div class="section">
Lorem ipsum
</div>
</div>
<div id="footer">
<div class="section">
© copyright 2023 | all rights reserved.
</div>
updated fiddle
You don't actually need media queries for that
html,
body {
width: 100%;
height: 100%;
}
will make body occupy all available space in window. It will shrink and expand with window re-size.
I have a horizontalm line seperating my header from the body content and would like it to stay in place when scrolling. When i try to set it to 'fixed' position, it does something funny, can someone kindly help, thanks.
Here is the HTML
<div id="wrapperfull">
<div class="fitter">
<div id="head">
<div id="header">
<img src="../Images/Header2.png" width="379" height="99" alt="Just Joel Header">
</div><!-- end header div -->
<div class="navigation">
<div class="menu-holder">
<ul class="menu">
<li>HOME</li>
<li><a href='print.html'>WORK</a>
</li>
<li>PHOTOGRAPHY
</li>
<li>BLOG
</li>
<li>INSPIRED
</li>
</ul>
</div>
<!-- menu-holder end -->
</div><!-- end navigation div -->
</div>
</div>
<div class="bottom-color">
</div>
<div class="heading">
<h1>SHOWCASE</h1>
</div>
Here is the CSS
#wrapperfull {
min-height: 100%;
width: 1050px;
border: thin;
border-color: #00BDE5;
margin-top: 0px;
background-color: #FFF;
position: relative; /* for the absolute positioned footer */
margin: auto;
margin-bottom: auto;
padding-top: 0.1px;
padding-right: 40px;
padding-bottom: 0px;
padding-left: 30px;
}
.fitter {
height: 115px;
width: 1050px;
background-color: #FFF;
}
.bottom-color {
height: 15px;
color: #00BDE5;
border-style:solid;
border-bottom-width: 1px;
border-right-width: 0px;
border-left-width: 0px;
margin-bottom: 20px;
}
#head {
height: 100px;
width: 1070px;
border: none;
margin: auto;
background-color: #FFF;
position: fixed;
z-index: 1;
}
#header {
height: 125px;
width: 1050px;
font-family: Helvetica, sans-serif;
position: fixed;
background-color: #FFF;
margin-top: 0px;
}
.navigation {
height: 75px;
width: px;
float: left;
margin-top: 0px;
margin-left: auto;
padding-top: 20px;
font-family: "geogtq sb";
position: fixed;
background-color: #FFF;
}
I just tested your code and if i understand correctly what your saying then it seems to work for me. look at this code.
its also a good idea to add
* {
margin: 0;
padding: 0;
}
http://jsfiddle.net/4gHuT/2/
you should to improve it and leave a skyblue line fixed below your navigation, delete
<div class="bottom-color"> </div>
and replace it with a border bottom of #header or #head (I found that one of them is unnecessary).
you could refactor a little and simplify your use of divs.
Also maybe review your html and CSS looking for bugs like;
width: px;
on line 54
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 :)