I am targeting the 320x480 and 320x568. The issue i am facing in 320x568 Portrait view. Everything is working fine on 320x480 but in 320x568 portrait view, the size of the container is very large. I tried everything to adjust the height but it is not showing the same as 320*480 portrait view. I can't find the way to solve this issue. You can check the screenshot below:
You can check the site here through your mobile - bit.ly/1bD6EhX
I have to move the text to top position but when i do this, this will also affect the 320*480 portrait view. Here is my code below:
.container3 {
margin:0;
height:750px;
overflow:hidden;
}
.fullwidth3 {
width:100%;
}
.mobtxt {
margin:0 0 0 25px;
font-size:22px;
font-weight:600;
font-family:'Open Sans', arial, helvetica;
letter-spacing:0;
text-align:center;
width:80%;
border-bottom:2px solid #e0e0e0;
}
.mobdes {
margin:15px 0 0 10px;
font-size:16px;
font-weight:normal;
font-family:arial;
letter-spacing:0;
text-align:left;
width:95%;
}
.mobdes2 {
position:absolute;
top:320%;
width:95%;
margin:15px 0 0 10px;
font-size:arial;
font-size:15px;
color:#adadad;
padding:0;
}
.mobimg {
width:100%;
clear:both;
float:none;
margin-left:0;
margin-right:0;
right:10px;
margin-top:30px;
}
HTML File
<div class="container3">
<div class="fullwidth3">
<p class="mobtxt">We have an experience of 10 Years</p>
<p class="mobdes">Mandaremus veniam dolor ita sunt, duis praesentibus vidisse velit ingeniis qui
sed est dolore fore eram a do aute incurreret transferrem ab se qui culpa
eiusmod, quem iis pariatur, an culpa magna legam occaecat o in qui quorum legam
quem. Singulis exquisitaque ut quamquam, ita ea tractavissent, nam sint de quis
est quo a tractavissent. </p>
<img src="img/mobimg.png" alt="mob image" class="mobimg" >
<hr class="hr"/>
<p class="mobdes2">Laborum duis malis in duis, duis ingeniis nam transferrem, nam quis commodo, de
nisi varias illum nescius si probant ipsum in laborum exercitation, ut a
comprehenderit, iis aliqua praesentibus, e nisi litteris expetendis.</p>
</div>
</div>
I dont understand, why you are doing top:320%; in .mobdes2. I think you want to do it top:320px. However, it would be better if you'd have provided the HTML as well.
But, I would recomend you to use vh unit of css 3. This just mean the viewport height as unit.
Example: http://snook.ca/archives/html_and_css/vm-vh-units
Browser support: http://caniuse.com/#feat=viewport-units
Good luck!!
Related
I have 3 div's, 200px,300px and 200px how can I align them side by side, all the examples I have seen only include 2. I have Div1,Div2 working correctly but Div3 for some reason slides under Div1 lie this picture
This is my code
<div style=" border-right:1px solid black; width:200px; float:left; position:relative; ">
//div1
</div>
<div style=" border-right:1px solid black; width:300px; padding:10px;float:left; position:relative;">
//div2
</div>
<div style=" float: left; width: 200px;position:relative">
//div3
</div>
The Div1 has the shorter content on it, how can I make the border to the right as long as the border in Div2?
All the elements in one line
Wrap the div elements in a wrapper:
<div id="wrapper">
<div id="first">first</div>
<div id="second">second</div>
<div id="third">third</div>
</div>
Then set the width of the wrapper, and float all three divs:
#wrapper {
width:700px;
clear:both;
}
#first {
background-color:red;
width:200px;
float:left;
}
#second {
background-color:blue;
width:300px;
float:left;
}
#third {
background-color:#bada55;
width:200px;
float:left;
}
Also, use IDs and/or classes, and keep the CSS separate from the HTML. This makes the code easier to read and maintain.
The fiddle.
All elements in one line, same height
To accomplish the "same height" part, you can use display:table, display:table-row, and display:table-cell to get matching heights. It uses an extra div, so the HTML looks like:
<div id="wrapper">
<div id="row">
<div id="first">first</div>
<div id="second">second<br><br></div>
<div id="third">third</div>
</div>
</div>
The floats can then be removed, so the CSS looks like:
#wrapper {
display:table;
width:700px;
}
#row {
display:table-row;
}
#first {
display:table-cell;
background-color:red;
width:200px;
}
#second {
display:table-cell;
background-color:blue;
width:300px;
}
#third {
display:table-cell;
background-color:#bada55;
width:200px;
}
The fiddle.
The Flexbox Way
If you're only supporting newer browsers (IE 10 and up), Flexbox is another good choice. Make sure to prefix for better support. More on the prefixes can be found here.
The HTML
<div class="container">
<div class="first">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
<div class="second">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil ratione rerum deserunt reiciendis numquam fugit dolor eligendi fuga sit. Hic, tempore. Error, temporibus possimus deserunt quisquam rerum dolor quam natus.Fugiat nam recusandae doloribus culpa obcaecati facere eligendi consectetur cum eveniet quod et, eum, libero esse voluptates. Ut commodi consequuntur eligendi doloremque deserunt modi animi explicabo aperiam, non, quas qui!</div>
<div class="third">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet obcaecati, rem. Ullam quia quae, ad, unde saepe velit incidunt, aliquid eum facere obcaecati molestiae? Repellendus tempore magnam facere, sint similique!</div>
</div>
The CSS
.container {
display:flex;
justify-content:center;
}
.container > div {
margin:10px;
background-color:#bada55;
}
.first, .third {
width:200px;
}
.second {
width:300px;
}
The Codepen.
The Grid Way
You can accomplish this with grid now, too, though browser support might be an issue if you're supporting older browsers. It's the same HTML as with the flexbox example, with just different CSS:
The CSS
.container {
display:grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 1fr;
grid-column-gap: 10px;
width:700px;
}
.container > div {
background-color:#bada55;
}
.first, .third {
width:200px;
}
.second {
width:300px;
}
The codepen.
The HTML code is
<div id="wrapper">
<div id="first">first</div>
<div id="second">second</div>
<div id="third">third</div>
</div>
The CSS will be
#wrapper {
display:table;
width:100%;
}
#row {
display:table-row;
}
#first {
display:table-cell;
background-color:red;
width:33%;
}
#second {
display:table-cell;
background-color:blue;
width:33%;
}
#third {
display:table-cell;
background-color:#bada55;
width:34%;
}
This code will workup towards responsive layout as it will resize the
<div>
according to device width.
Even one can silent anyone
<div>
as
<!--<div id="third">third</div> -->
and can use rest two for two
<div>
side by side.
I have an issue with the white background on my mainbody div. I have had to specify a fixed px and this is 750px. I dont want to have to do this I want to just be able to use auto. This is because I need to use the same CSS file for other pages and they will be different heights. Also when using the value of height: auto on the manibody div it dosent cover all the content in that div.
Here is a link to see what its like http://jsfiddle.net/#&togetherjs=KksjUfFlxS
Please can you help me to be able to fix this.
Here is my HTML code:
<!doctype html>
<head>
<meta charset="UTF-8">
<title>Home || Web Design Coursework</title>
<meta name="description" content="">
<meta name="author" content="Elliott Davidson">
<meta name="language" content="english">
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="stylesheet" type="text/css" media="screen" href="css/main.css">
</head>
<body>
<div id="container">
<!-- start of header -->
<div id="header">
<img src="images/header-image.png" width="980" height="170" alt="kayaking header logo" /> </div>
</div><!-- end of header -->
<!-- start of navigation bar -->
<div id="navmenu">
<ul id="list-nav">
<li id="topnavleft">Home</li>
<li>Design</li>
<li>About</li>
<li>Kayaking Disciplines</li>
<li id="topnavright">Useful links</li>
</ul><!-- ul end list-nav -->
</div><!-- div end navmenu -->
<div id="mainbody">
<div id="homepagevideo">
<iframe width="560" height="315" src="http://www.youtube.com/embed/3WabVsBugGQ?rel=0" frameborder="0" allowfullscreen></iframe>
</div><!-- end div homepagevideo -->
<div id="homepagekayakingdisciplines">
<h1 id="homepageh1kayakingdiscipline">Kayaking Disciplines</h1>
<p>Aliquid delicatissimi et vix. Ut cum tation ridens. Mea ei impetus gubergren, sit natum doming quodsi et. Usu cu sonet debitis. Mea nullam tamquam ea. Ex vis vocibus splendide, ut eum ullum assum impedit.</p>
<p>Decore facete mei ei. Eam ea maluisset dissentias, graece labore ocurreret has eu. Cu usu quem officiis maiestatis, cu quis assueverit mea. Primis deserunt consectetuer quo et, vim numquam aliquam eruditi ut.</p>
<p>Sint erroribus imperdiet ex quo, et sit habeo dolorum molestiae, commodo dissentiet no duo. Mucius essent repudiare te pri, te tale accumsan reprimique pro. Mel cu ignota argumentum. Vis dolor efficiantur ex, ei mei reque oporteat percipitur. Sea corrumpit voluptaria referrentur ea, ei sensibus definitionem vel. No verterem elaboraret sit, velit apeirian vim ea.</p>
</div><!-- end div homepagekayakingdisciplines -->
<div id="homepagedesign">
<h2>Design</h2>
<p>Dicat adversarium nam at, ei saepe dictas pri. Ad aliquid meliore fastidii pro, duo appareat apeirian ea, vix ei maiorum luptatum quaerendum. Est ut vivendum oportere efficiendi, vim et brute nusquam, justo accumsan inimicus ex vis. Eum dicant mollis denique cu, an fastidii ocurreret instructior sit. His discere mediocrem no, an sit recteque tincidunt.</p>
<p>Mea ea animal inciderint, cum nulla saepe libris an. Modo meliore argumentum vel ei, mei cu option facilisis. Et enim detraxit vix. In clita mollis feugiat quo. Nobis soluta pri te, cum brute latine cotidieque ei.</p>
</div><!-- end div homepagedesign -->
<div id="homepageaboutme">
<h3>About</h3>
<p>Dicat adversarium nam at, ei saepe dictas pri. Ad aliquid meliore fastidii pro, duo appareat apeirian ea, vix ei maiorum luptatum quaerendum. Est ut vivendum oportere efficiendi, vim et brute nusquam, justo accumsan inimicus ex vis.</p>
</div><!-- end div homepageaboutme -->
<div id="homepagelinks">
<h3>Links</h3>
<p>Dicat adversarium nam at, ei saepe dictas pri. Ad aliquid meliore fastidii pro, duo appareat apeirian ea, vix ei maiorum luptatum quaerendum. Est ut vivendum oportere efficiendi, vim et brute nusquam, justo accumsan inimicus ex vis.</p>
</div><!-- end div homepagelinks -->
</div><!-- end div mainbody -->
<div id="footer">
<div id="footerimage">
<img src="images/footer-waves.jpg" width="980" height="140" alt="waves" />
<div id="footertext">
<div id="footernavmenu">
<ul id="list-footer-nav">
<li>Home</li>
<li>Design</li>
<li>About</li>
<li>kayaking Disciplines</li>
<li>Useful links</li>
</ul><!-- ul end list-footer-nav -->
</div><!-- div end footernavmenu -->
<div id="copyright">
<div class="copyrigttext">
Copyright © 2013 Elliott Davidson, All Rights Reserved.
</div><!-- end div copyrighttext -->
</div><!-- end div copyright -->
</div><!-- end div footertext -->
</div><!-- footer image -->
</div><!-- end of footer -->
</div><!-- end of container -->
</body>
</html>
Here is my CSS code:
#charset "UTF-8";
/* CSS Document */
#html, body{
background-color : #32B7FF;
font-family: Tahoma;
}
#container {
margin-left : auto;
margin-right : auto;
width:980px;
height:auto;
}
/********************************** header **********************************/
/********************************** nav bar **********************************/
#navmenu {
width : 980px;
margin-left : auto;
margin-right : auto;
height: 33px;
}
ul#list-nav {
list-style : none;
padding : 0;
background-color : #32B7FF;
font-family:Tahoma, Geneva, sans-serif;
border-radius:10px 10px 0 0;
overflow:hidden;
}
ul#list-nav li {
display : inline;
width : 980px;
height : 33px;
}
ul#list-nav li a {
text-decoration : none;
padding : 8px 0;
width : 196px;
background : #1173A8;
color : #fff;
float : left;
text-align : center;
}
ul#list-nav li a:hover {
background : #4B98C1;
}
ul#list-nav li a:active {
background : #4B98C1;
}
ul#list-nav li:first-child, ul#list-nav li:last-child {
border-radius:10px;
}
/********************************** mainbody **********************************/
#mainbody {
background-color:#FFF;
width:980px;
height:750px;
margin-left:auto;
margin-right:auto;
margin-top:-19px;
}
#homepagevideo {
padding:10px;
width:auto;
height:auto;
float:left;
}
#homepageh1kayakingdiscipline {
padding-top:5px;
}
#homepagekayakingdisciplines {
text-align:justify;
padding-left:10px;
padding-right:10px;
}
#homepagedesign {
width:470px;
padding-left:10px;
padding-bottom:10px;
padding-right:10px;
float:left;
height:auto;
}
#homepageaboutme {
width:470px;
padding-left:10px;
padding-top:10px;
padding-right:10px;
float:right;
height:auto;
}
#homepagelinks {
width:470px;
padding-left:10px;
padding-bottom:10px;
padding-right:10px;
float:right;
height:auto;
}
/********************************** footer **********************************/
#footer {
margin-left:auto;
margin-right:auto;
height:175px;
width:980;
}
#footertext {
position:absolute;
width:980px;
height:auto;
bottom: 0
}
#footerimage {
margin-left:auto;
margin-right:auto;
width:980px;
height:140px;
position: relative;
}
#footernavmenu {
width : 540px;
right:0px;
margin-right:0px;
float:left;
color:#FFF;
}
ul#list-footer-nav li {
display : inline;
padding-right: 8px;
}
ul#list-footer-nav li a {
text-decoration : none;
width:auto;
float : left;
color:#FFF;
padding:6px;
}
ul#list-footer-nav li a:hover {
color:#4B98C1;
}
ul#list-footer-nav li a:active {
color:#4B98C1;
}
#copyright {
width:440px;
height:auto;
right:0;
position: absolute;
bottom: 0;
margin: 1em;
text-align: right;
color:#FFF;
}
.copyrighttext {
}
You just need to add an overflow:auto; to your #mainbody. Thats it.
#mainbody {
background-color:#FFF;
width:980px;
margin-left:auto;
margin-right:auto;
margin-top:-19px;
overflow:auto; /* Use THIS one */
}
WORKING DEMO
You can get this done by adding a clear like this before closing of mainbody div, like this
HTML
<div class="clear"></div>
CSS:
.clear {
clear:both;
}
Good Day
I want to align text in the center of a div. Now that is easy with text-align: center on parent div.
But If I want to left align the text inside the div to the left of the centered div, how do I do that?
See my fiddle: http://jsfiddle.net/DvXzB/5/
HTML:
<div id="aboutContent" class="row-fluid">
<div id="aboutHeaderText" class="span12"><span title="">About Us</span></div>
<div id="aboutHeaderBody" class="span12">
<p><a title="">asdasd</a> is a free mobile application available for <a href="#"
title="">iOS</a>, Androidand the Blackberry operating
systems.</p>
<p>sdefsadfsdfldflkjlj lkjlkjdlfsldfjlkj ljlsdjflj lkj ljklj lk; ;l;l; ;k;k
l;kgjh jhg gjjh jhgjhgjh jhgjh gjg jgjhgjg</p>
<div id="cities"><a title="">asdasdasd</a> currently only displays events and
specials in <strong>asdasd</strong> (our hometown), but the following locations
will be available before you know it:
<ul>
<li><span>asdg</span>
</li>
<li><span>asdwn</span>
</li>
<li><span>Pasdasdroom</span>
</li>
<li><span>Dasdaf</span>
</li>
<li><span>Bergrin</span>
</li>
<li><span>Sersch</span>
</li>
<li><span>Graergwn</span>
</li>
</ul>
</div>
<p>Visit our Facebook page for more
up to date information, and feel free to contact us with
any queries.</p>
<br />
</div>
</div>
CSS:
#aboutContent {
color: #222;
margin-top: 50px;
margin: 0 auto;
text-align: center;
}
#aboutHeaderText span {
font-family:"Kozuka Gothic Pr6N", sans-serif !important;
color: #eeeeee;
font-size: 26px;
font-weight: bold;
}
#aboutHeaderText img {
margin-top: -18px;
margin-left: 8px;
}
#aboutHeaderBody {
position: relative;
padding: 0px;
font-size: 16px;
}
#cities ul {
list-style: none;
margin-top: 10px;
}
#cities ul li {
font-family:'Open Sans', sand-serif;
padding: 3px 0px;
font-size: 20px;
color: #222;
}
I want the text in the middle of the page to be justified, but when I justify or left align it, it aligns it to the absolute left again. How do I do this without using fixed paddings or margins? Basically what I want is what they have on this page here(see the 'about us' section): http://www.villagebicycle.co.za/
Note: I am using a fluid layout, so fixed paddings etc won't work
Thank you
You need to center align the container with margin:0 auto after setting its width to a specific size like width:400px. Then align each element separately using text-align.
See this demo: http://jsfiddle.net/DvXzB/16/
If you want your container to have 100% width then do not use text-align:center to your parent div. Instead, use width:100% (optional) and again text-align each block as desired.
You've to use a wraper div to envolve all content. I've done a JsFiddle, I think is what you're looking for :)
.wraper {
position: relative;
width: 500px;
margin:0 auto;
}
Afther that you can align a <p> to the left, right, justify, etc. as you can see:
p.left{text-align:left;}
p.justify{text-align:justify;}
And the HTML for testing:
<div class="wraper">
<p class="left">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
<p class="justify">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
I am having allot of trouble with layering, My current issue is that vistors can not click on links inside div layers for some reason. They can't highlight text, click on the images in the sidebar which are linked up. I don't know what is wrong. Any help would be much appreciated.
Site:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Arakion - Homepage</title>
<html>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<link href="js/video-js/video-js.css" rel="stylesheet" type="text/css">
<script src="js/video-js/video.js"></script>
<script>
_V_.options.flash.swf = "video-js.swf";
</script>
<style type = "text/css">
body {background-color:#FFFFFF; background-size:contain;}
</style>
<script type="text/javascript">
function chgbg() {
var d = new Date();
var h = d.getHours();
if ((h >= 6) && (h < 9)) {document.body.style.backgroundColor = "#FFFFFF"; document.body.style.backgroundImage="url(images/Backgrounds/Night.png)"}
if ((h >= 9) && (h < 20)) {document.body.style.backgroundColor = "#FFFFFF"; document.body.style.backgroundImage="url(images/Backgrounds/Night.png)"}
if ((h >= 20) && (h < 22)) {document.body.style.backgroundColor = "#FFFFFF"; document.body.style.backgroundImage="url(images/Backgrounds/Night.png)"}
if ((h >= 22) || (h<6)) {document.body.style.backgroundColor = "#FFFFFF"; document.body.style.backgroundImage="url(images/Backgrounds/Night.png)"}
}
</script>
</head>
<body onload="chgbg()">
<div id="Wrapper">
<div id="navbar" style="display: inline-block;">
<ul id="nav">
<li id="top">
HOME
</li>
<li id="top">
GUIDE
<ul>
<li id="submenu">CLASSES</li>
<li id="submenu">DUNGEONS</li>
<li id="submenu">MONSTERS</li>
<li id="submenu">PETS</li>
<li id="submenu">RACES</li>
<li id="submenu">TOWN BUILDINGS</li>
<li id="submenu">UNIVERSE</li>
<li id="submenu">WIKI</li>
</ul>
</li>
<li id="top">
BLOG
<ul>
<li id="submenu">ARAKION</li>
<li id="submenu">CHRIS TAYLOR</li>
</ul>
</li>
<li id="top">
MEDIA
<ul>
<li id="submenu">CONCEPT ART</li>
<li id="submenu">SCREENSHOTS</li>
<li id="submenu">VIDEOS</li>
</ul>
</li>
<li id="top">
FORUM</li>
</ul>
</div>
<div style="display: inline-block;" id="sidebar_header"><div id="Kickstarter_progressbar"></div></div>
<div style="display: inline-block;" id="sidebar_banner"><div id="Kickstarter_donationcount"><a>$20,000</a></div>
<div id="Sidebar_content">
<p> </p>
<p class="title">Social Media</p>
<p><img src="images/Side Banner_Line.png" width="100%" height="10" class="title" /></p>
<p><img src="images/IndieDBIcon.png" width="35" height="35" />
<img src="images/FacebookIcon.png" width="35" height="35" /> <a href="http://twitter.com/arakiongame" target="_new">
<img src="images/TwitterICon.png" width="35" height="35" /> </a> <img src="images/YoutubeICon.png" width="35" height="35" /> </p>
<p> </p>
<p>Random Media</p>
<p><img src="images/Side Banner_Line.png" width="100%" height="10" /></p>
<p> </p>
<p> </p>
<p> </p>
<p>Something</p>
<p><img src="images/Side Banner_Line.png" width="100%" height="10" /></p>
<p> </p>
</div></div>
<div style="display: inline-block;" id="main_background">
<div id="main_content"><div id="main_img"><img src="images/MainImages/Main_Placeholder_img.jpg"/></div>
<table width="600" height="106" border="0" id="main_section_img" style="margin:0 auto; vertical-align:top; margin-top: 0;">
<tr>
<td width="140"><img src="images/MainImages/Placeholder1.jpg" height="100%" width="100%"/></td>
<td width="140"><img src="images/MainImages/Placeholder2.jpg" height="100%" width="100%"/></td>
<td width="140"><img src="images/MainImages/Placeholder3.jpg" height="100%" width="100%"/></td>
<td width="140"><img src="images/MainImages/Placeholder4.jpg" height="100%" width="100%"/></td>
</tr>
<tr>
<td width="140">How Housing Works and why we have it <p> </p></td>
<td width="140">An In depth look at the Satyr race <p> </p></td>
<td width="140">We take a look at the role the alchemist plays in a group <p> </p></td>
<td width="140">Our doors are offically open to new employees apply today <p> </p></td>
</tr>
</table>
<p> </p>
</div></div>
<div style="display: inline-block;" id="sub_background_1"><div id="sub_content">
<div id="Sub_title">Kickstarter has just opened!</div>
<div id="Sub_subtitle">by Chris Taylor 7-24-2012</div>
<div id="Sub_image" style="display: inline-block;">
<img src="images/MainImages/Sub_Placeholder.jpg" height="100%" width="100%"/></div>
<div id="Sub_text"> sUt enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborumLorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, Read More.</div></div></div>
<div style="display: inline-block;" id="sub_background_2"><div id="sub_content">
<div id="Sub_title">Kickstarter has just opened!</div>
<div id="Sub_subtitle">by Chris Taylor 7-24-2012</div>
<div id="Sub_image" style="display: inline-block;">
<img src="images/MainImages/Sub_Placeholder.jpg" height="100%" width="100%"/></div>
<div id="Sub_text"> sUt enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborumLorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, Read More.</div></div></div>
<div style="display: inline-block;" id="sub_background_3"><div id="sub_content">
<div id="Sub_title">Kickstarter has just opened!</div>
<div id="Sub_subtitle">by Chris Taylor 7-24-2012</div>
<div id="Sub_image" style="display: inline-block;">
<img src="images/MainImages/Sub_Placeholder.jpg" height="100%" width="100%"/></div>
<div id="Sub_text" style="z-index:9;">
<video id="" class="video-js vjs-default-skin" controls preload="none" width="640" height="264"
poster="js/video-js/Posters/Test.png"
data-setup="{}">
<source src="js/video-js/Videos/Test.mp4" type='video/mp4' />
<track kind="captions" src="captions.vtt" srclang="en" label="English" />
</video>
Read More.</div></div></div>
<div style="display: inline-block;" id="sub_background_4"><div id="sub_content">
<div id="Sub_title">Kickstarter has just opened!</div>
<div id="Sub_subtitle">by Chris Taylor 7-24-2012</div>
<div id="Sub_image" style="display: inline-block;">
<img src="images/MainImages/Sub_Placeholder.jpg" height="100%" width="100%"/></div>
<div id="Sub_text"> sUt enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborumLorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, Read More.</div></div></div>
<div id="footer_background" style=" text-align: center; ">
<img src="images/Footer_Divider.png" height="10px" width="600px"/>
<p> </p>
COPYRIGHT 2012 CHRIS TAYLOR ALL RIGHTS RESERVED | CODED BY SEAN HALL</a></div>
<div id="left"><img src="images/Backgrounds/Left.png" width="320" height="802" /></div>
<div id="right"><img src="images/Backgrounds/Right.png" width="333" height="833" /></div>
</div>
CSS Code:
#font-face {
font-family: 'KingthingsExeterRegular';
src: url('font/kingthings_exeter-webfont.eot');
src: url('font/kingthings_exeter-webfont.eot?#iefix') format('embedded-opentype'),
url('font/kingthings_exeter-webfont.woff') format('woff'),
url('font/kingthings_exeter-webfont.ttf') format('truetype'),
url('font/kingthings_exeter-webfont.svg#KingthingsExeterRegular') format('svg');
font-weight: normal;
font-style: normal;
}
body {
font-family: 'KingthingsExeterRegular';
overflow-y: auto;
}
body,td,th {
font-family: KingthingsExeterRegular;
background-size: cover;
background-repeat:no-repeat;
text-align: center;
font-size: 15px;
zoom: 110%
}
a:link {
color: #FFF;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #FFF;
}
a:hover {
color: #FFF;
}
a:active {
text-decoration: none;
}
/*Body Css */
#header{
z-index: -999;
width:900px ;
height:800px ;
position: relative;
top:0;
left:0;
}
#left{
z-index:-9;
width:239px;
height:600px ;
float: left;
clear: both;
position: absolute;
left:-215px;
top:150px;
}
#right{
z-index:-2;
width:239px;
height:600px ;
float:right;
clear: both;
position: absolute;
left:960px;
top:120px;
}
#Wrapper {
width:1040px;
margin:auto;
margin-top:-40px;
height:2000px;
position: relative;
z-index:0;
}
/*------------------------------------*\
NAV
\*------------------------------------*/
#navbar{
position: relative;
top:91px;
float:left;
margin-top:50px;
margin-left:5px;
width:649px;
height: 50px;
z-index:4;
margin-bottom:10px;
clear:both;
}
#nav{
list-style:none;
font-weight:bold;
width:600;
height:50;
margin-bottom:5px;
}
#top{
float:left;
position:relative;
background-image:url("images/Button_NavBar_Unselected.png");
height:55px;
width:119px;
font-size:15px;
}
#top:hover{
background-image:url("images/Button_NavBar_Hover.png")
}
#submenu{
float:left;
position:relative;
height:18px;
width:110px;
font-size: 12px;
text-align:center;
}
#submenu_bottem{
float:left;
position:relative;
height:18px;
width:110px;
font-size: 12px;
text-align:center;
}
#nav a{
display:block;
padding-top:20px;
z-index:-1;
font-family:"Arial";
}
/*--- DROPDOWN ---*/
#nav ul{
list-style:none;
position:absolute;
left:-9999px;
text-align:center;
width:100px;
height:18px;
}
#nav ul li{
padding-top:1px;
float:none;
}
#nav ul a{
white-space:nowrap;
}
#nav li:hover ul{
left:-30px;
top:40px;
}
#nav li:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
}
#nav li:hover ul li a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */
}
/* Main Block */
#main_background{
width:680px;
height:519px;
float:left;
background-image:url(images/MainSection.png);
}
#main_content{
width:590px;
height:430px;
text-align:left;
margin-top:20px;
margin-left:45px;
}
#main_img{
margin:0 auto;
margin-top:5px;
background-image:url(images/MainSection_BigImageHighlight.png);
width:520px;
height:300px;
text-align:center;
padding-top:4px;
}
#main_section_img{
margin-top:10px;
background-image:url(mages/MainSection_SmallImageInsett.png);
width:560px;
height:95px;
text-align:center;
vertical-align:top;
margin-top:0;
}
#main_section_img td{
vertical-align:top;
margin-top:0;
}
/* Sub Block */
/* Sub Background Hierarchy */
#sub_background_1{
position:relative;
width:610px;
height:270px;
float:left;
background-image: url(images/SubSection_Base.png);
z-index:-1;
margin-left:30px;
top:-38px;
background-repeat:no-repeat;
}
#sub_background_2{
position:relative;
width:610px;
height:270px;
float:left;
background-image: url(images/SubSection_Base.png);
z-index:-2;
margin-left:30px;
top:-52px;
background-repeat:no-repeat;
}
#sub_background_3{
position:relative;
width:610px;
height:270px;
float:left;
background-image: url(images/SubSection_Base.png);
z-index:-3;
margin-left:30px;
top:-65px;
background-repeat:no-repeat;
}
#sub_background_4{
position:relative;
width:610px;
height:270px;
float:left;
background-image: url(images/SubSection_Base.png);
z-index:-4;
margin-left:30px;
top:-77px;
background-repeat:no-repeat;
}
#sub_background_5{
position:relative;
width:610px;
height:270px;
float:left;
background-image: url(images/SubSection_Base.png);
z-index:-5;
margin-left:30px;
top:-83px;
background-repeat:no-repeat;
}
#sub_background_6{
position:relative;
width:610px;
height:270px;
float:left;
background-image: url(images/SubSection_Base.png);
z-index:-6;
margin-left:30px;
top:-81px;
background-repeat:no-repeat;
}
#sub_background_7{
position:relative;
width:610px;
height:270px;
float:left;
background-image: url(images/SubSection_Base.png);
z-index:-7;
margin-left:30px;
top:-81px;
background-repeat:no-repeat;
}
#sub_background_8{
position:relative;
width:610px;
height:270px;
float:left;
background-image: url(images/SubSection_Base.png);
z-index:-8;
margin-left:30px;
top:-85px;
background-repeat:no-repeat;
}
/* Hierarchy End */
#sub_content{
width:580px;
height:220px;
margin:0 auto;
margin-top:10px;
clear: both;
}
#Sub_title{
height:35px;
width:400px;
margin-top:30px;
margin-left:10px;
font-size:30px;
text-align: left;
}
#Sub_subtitle{
height:20px;
width:200px;
margin-left:10px;
margin-top:65;
font-size:15px;
text-align: left;
}
#Sub_image{
height:100px;
width:100px;
margin-top:10px;
margin-left:15px;
float:left;
}
#Sub_text{
height:180px;
width:400px;
float:right;
margin-top:5px;
text-align: left;
z-index:9;
position: relative;
}
/* SideBar Block */
#sidebar_header{
position:relative;
height:80px;
width:350px;
float:right;
background-image:url(images/Kickstarter.png);
margin-right:5px;
left:-20px;
margin-top:10px;
z-index:1;
clear: both;
top:1px;
}
#sidebar_banner{
position:relative;
height:729px;
width:360px;
float:right;
background-image: url(images/Side%20Banner.png);
left:-20px;
z-index:-1;
clear: both;
}
#Sidebar_content{
margin:0 auto;
margin-top:20px;
text-align:center;
font-size: 20px;
width:300px;
height:700px;
line-height: 3px;
}
#Kickstarter_donationcount{
width: 119px;
height: 26px;
text-align:center;
top:8px;
left:230px;
background-image:url("images/Progress/GoalNumber.png");
position: absolute;
padding-top:6px;
}
#Kickstarter_progressbar{
position:relative;
top:62px;
margin:0 auto;
width: 310px;
height: 18px;
background-image:url("images/Progress/KickstarterGoalBar_100.png")
}
#Kickstarter_donationcount a {
color: #000;
font:"arial";
font-size: 18px;
}
#Sidebar_content .title{
line-break: 1px;
}
/* Footer */
#footer_background{
position:relative;
background-image:url(images/Footer.png);
width:605px;
height:75px;
float:left;
margin-left:35px;
top:-89px;
z-index:-9;
line-height:1px;
font-family:"Arial";
font-size:12px;
}
#footer_background a:link{
color: #000;
text-decoration: underline;
}
#footer_background img {
margin-top:100px;
}
Wrapper is covering other stuff so you want to just push it to the bottom. Add z-index: 0; to #wrapper.
Or you can remove the z-index: -1 from the divs inside #wrapper
In the future, post only relevant code inside the post. Nobody will bother going through your site to figure out the issue for you. If you can't narrow the problem down to something specific, then you need to troubleshoot better.
While sachleen's answer did provide a workaround for your imminent problem, your page is facing several critical issues that will become problems very soon.
Give me the code!
Here's the link to your page fully working and without any validation issues. Images are not optimized, but I had to adapt one of them to prevent the usage of z-index all the time:
View it online
Download the files
Compare the files with your own and see what has been done to improve and make the document valid.
Here's a list of the most significant issues:
Element ID
Elements can have an ID, but the ID must be unique on the page, this because the ID purpose is to identify a specific element. If you need to provide a style to multiple elements, the proper way is to use classes.
From MDN :: id
A unique identifier so that you can identify the element with. You can use this as a parameter to getElementById() and other DOM functions and to reference the element in style sheets.
Images
While this is more related with performance, I'm sure that visitors of this webpage will not be please to have to wait a considerable amount of time while 4Mb of images that you currently use get downloaded.
You can use Google Pagespeed Tools, that provides you with a tool to analyze the webpage for errors, and also if images aren't optimized, a link is presented on the analyse report to download an optimized version.
Document Stack
This is the reason as to why you've placed your question. You are messing around with your document stack to overcome issues that should be solved with images usage or a proper markup. While you're free to move elements up and down within the document stack, your page will be facing issues when it comes to cross-browser compatibilities.
The document stack should be used to overcome small details or provide a way to interact with the user without forcing a page refresh, among others. Shouldn't be used for the majority of the elements present as a way to solve layout issues.
Document Type
The document type is used to tell the browser how we should interpreter the document, and what rules should be respected to present it the way you intended.
When authoring document is HTML or XHTML, it is important to Add a Doctype declaration. The doctype declaration must be exact (both in spelling and in case) to have the desired effect, which makes it sometimes difficult.
You can read about it at W3c - Doctype Declarations
HTML Markup
Your page lacks a proper markup, that in turn will prevent the browser from presenting elements the way they are supposed to be presented.
You can read about it at W3C - HTML: The Markup Language
Additionally, you can use the W3C validation service to validate and identify issues with your HTML Markup. Keep in mind that recent features aren't properly validated, mainly with CSS. But that's just a small portion.
Last night, I experienced a strange behavior in IE8 as I saw two noticeably different layouts of a page that's being hosted on separate servers. On my local web server, the header markup looked as expected with its left aligned logo and right aligned and stacked utility links, all of which displayed on a centered page. On a staging web server and a production web server, the header markup was completely invisible on the page, as it was positioned 152px higher than the page.
I understand that the ".header .hog" selector CSS code below is a hack. It was a quick fix for changes that needed to get deployed immediately. Rather than analyzing how to improve this code, I'm more interested in knowing the cause(s) of these presentation differences in IE8. A few question that I have are:
Could the markup have different encoding? If so, what is the best way in determining this possibility? And, which setting, if any, in IIS7 is responsible for encoding output?
Could permissions be the cause of this problem?
Is there a feature in IIS7 that determines whether or not the markup is strictly interpreted?
Is there a difference between the Layout Engines of IE8 on Vista and IE8 on XP?
My markup code is as follows:
<body>
<div class="content">
<div class="header">
<h1 id="logo"><img src="/img/logo.jpg" /></h1>
<div class="hog">
<a class="see">Text</a>
<div class="more">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<div class="utility-links">
<a>link1</a>|
<a>link2</a>|
<a>link3</a>|
<a>link4</a>
</div>
<div class="clear"></div>
</div>
</div>
</body>
My CSS code is as follows:
* {
border:none;
line-height:normal;
margin:0;
outline:none;
padding:0;
text-decoration:none;
}
body{
background:#70133F;
color:#000000;
font-family:Arial, Verdana, Helvetica, sans-serif;
font-size:12px;
margin:0 auto;
}
.clear{
clear:both;
font-size:0;
height:0;
line-height:0;
margin:0;
padding:0;
}
.content{
background:#FFFFFF;
margin:0 auto;
width:970px;
}
.header{
height:160px;
}
.header #logo{
float:left;
font-size:0;
height:124px;
margin:25px 0 0 18px;
width:204px;
}
.header .util-links {
color:#E83F00;
font:bold 12px;
float:right;
margin:135px 15px 0 0;
text-align:right;
text-transform:uppercase;
}
.header .util-links a {
padding:0 10px;
}
.header .hog {
height:3px;
position:relative;
margin-top:-152px;
text-align:right;
width:945px;
}
.header .hog a.see-holiday {
color:#E83F00;
font:bold 12px;
text-transform:uppercase;
height:40px;
width:254px;
}
.header .hog .guidelines {
display:none;
margin-left:524px;
text-align:left;
width:428px;
}
Thanks for the help. Happy Thanksgiving, everyone!
John
Is there a difference between the
Layout Engines of IE8 on Vista and IE8
on XP?
If I understood it right, it appears that you are not only having 2 servers but you are also accessing the site from 2 different computers, one running XP and another Vista. Open the IE developer tools in both computers and observe the browser mode and document mode. Perhaps one of the browsers has been set permanently to IE7 compatibility mode? Or one of the servers is sending the <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> tag forcing a compatible mode?
There is a slight difference between IE on XP and Vista because IE uses OS controls to render certain controls such as buttons, textboxes, select boxes and scrollbars. However, the difference in layout caused by that should not be that drastic.
For finding differences in headers, you can install a tool such as fiddler or httpwatch and inspect them in both machines.