...

View Full Version : Resolved Lower DIV overlapping top DIV.



jpw1984
02-14-2011, 10:13 PM
Hello, I have a problem that's driving me nuts. I have a lower div that seems to overlap the top div, but I can get it down if I use the margin-top css command. However, it shouldn't have to use that should I as it should be below the top div.


The lower div '"portfolio_landscape_slider_content' is going over the 'top_content' div.

I've used html validation, but nothing comes up that would have influence on div positioning.

CSS:


@charset "utf-8";
/* Start Misc*/
* {margin: 0; padding: 0;}
html, body {height: 100%;}
#wrap {min-height: 100%; background-color: #f8f8f8; width: 100%}
p {
font-size: 12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color: #3D2C00;
line-height: 18px;
padding-top: 10px
}
h1 {
font-size: 18px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color: #2E5E72;
margin-bottom: 10px;
font-weight: bold;
}
h2 {
font-size: 16px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #3184B6;
}
.clear {clear:both}
ul {list-style: none}
/* End Misc-------------------------------------------------------------------------------------------------------- */
/*Header Content*/
#header_container {width: 100%; background-color: #333333; height: 51px; background-image: url(../images/header_bg.jpg) ; background-repeat:repeat-x;}
img.header_image {width: 285px; height: 41px; display: block; margin-left: auto; margin-right: auto;}
/*End Header Content*/
#central {overflow: hidden; width: 100%; height: 364px; background-color: #66CCFF; background-image:url(../images/central_bg.jpg); background-repeat:repeat-x}
img.central_image {width: 503px; height: 343px; display: block; margin-left: auto; margin-right: auto;}
/*Start Main Nav*/
#nav_container {width: 100%; height: 35px; background-color: #0066FF; background-image:url(../images/main_nav_bg.jpg); background-repeat:repeat-x;}
#prinav {background: url(../images/main_nav_buttons.jpg);height: 35px; width: 520px; margin: 0 auto; position: relative;}
#prinav li {list-style-type: none; float: left;}
#prinav a {height: 35px; display: block;}
#home {width: 130px; }
#biography {width: 130px;}
#portfolio {width: 130px;}
#contact {width: 130px;}
#home a:hover {background: url(../images/main_nav_buttons.jpg) 0px -35px no-repeat;}
#biography a:hover {background: url(../images/main_nav_buttons.jpg) -130px -35px no-repeat;}
#portfolio a:hover {background: url(../images/main_nav_buttons.jpg) -260px -35px no-repeat;}
#contact a:hover {background: url(../images/main_nav_buttons.jpg) -390px -35px no-repeat;}
.home #prinav li#home a {background: url(../images/main_nav_buttons.jpg) 0px -70px no-repeat;}
.biography #prinav li#biography a {background: url(../images/main_nav_buttons.jpg) -130px -70px no-repeat;}
.portfolio #prinav li#portfolio a {background: url(../images/main_nav_buttons.jpg) -260px -70px no-repeat;}
.contact #prinav li#contact a {background: url(../images/main_nav_buttons.jpg) -390px -70px no-repeat;}
/*End Main Nav*/
/*Start Sec Nav*/
#sec_nav {width: 100%; height: 24px; background-color: #333333; background-image:url(../images/sec_nav_bg.jpg); background-repeat:repeat-x; padding-top: 9px;}
#sec_nav ul {margin: 0 auto; width: 700px; text-align: center; height: 27px; background-color: transparent;}
#sec_nav li {display:inline; padding-right: 20px; font-size:12px; font-family: Sans-serif, Arial, Verdana, Helvetica; font-weight: normal; font-weight:bold}
#sec_nav li a {text-decoration: none; color: white;}
#sec_nav li a:visited {color: grey;}
#sec_nav li a:hover {color: white; text-decoration:underline;}
#sec_nav li a:active {color: yellow;}
#sec_nav li a.selected {color: #0099FF}
/*End Sec Nav*/
#bar {height: 10px; background-color:#333333; background-image:url(../images/bar.jpg); background-repeat:repeat-x}
/*Start Main*/
#main {
overflow: auto;
margin: 0 auto;
width: 860px;
padding-bottom: 279px;
clear: both;
padding-top: 50px;
}
/*End Main*/
/*Top Content Box*/
#top_content {
background-color: #FFFFFF;
border:solid;
border-color: #E8E8E8;
border-width: 1px;
border-style:solid;
height: auto;
width: 828px;
float: left;
padding: 15px;
margin-left 3px;
-moz-border-radius-bottomright: 8px;
border-bottom-right-radius: 8px;
-moz-border-radius-bottomleft: 8px;
border-bottom-left-radius: 8px;
-moz-border-radius-topright: 15px;
border-top-right-radius: 15px;
-moz-border-radius-topleft: 15px;
border-top-left-radius: 15px;
}
/*End Top content box*/
/*Start Biography Content*/
#equipment {
background-color: #FFFFFF;
border:solid;
border-color: #E8E8E8;
border-width: 1px;
border-style:solid;
height: auto;
width: 820px;
float: left;
padding: 15px;
margin: left 3px;
-moz-border-radius-bottomright: 8px;
border-bottom-right-radius: 8px;
-moz-border-radius-bottomleft: 8px;
border-bottom-left-radius: 8px;
-moz-border-radius-topright: 15px;
border-top-right-radius: 15px;
-moz-border-radius-topleft: 15px;
border-top-left-radius: 15px;
margin-top: 50px;
clear: both;
}
#equipment li{
color:#3D2C00;
font-size:12px;
padding: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
/*End Biography Content*/
/*Portfolio index Content*/
#portfolio_blocks {
margin-top: 150px
}
#portfolio_blocks li {
list-style: none;
display: block;
float: left;
width: 398px;
height: 240px;
padding: 10px;
margin-right: 5px;
margin-left: 5px;
margin-bottom: 10px;
border:solid;
border-color: #E8E8E8;
border-width: 1px;
background-color: white;
-moz-border-radius-bottomright: 8px;
border-bottom-right-radius: 8px;
-moz-border-radius-bottomleft: 8px;
border-bottom-left-radius: 8px;
-moz-border-radius-topright: 15px;
border-top-right-radius: 15px;
-moz-border-radius-topleft: 15px;
border-top-left-radius: 15px;
}
#portfolio_blocks img {border:solid; border-color:#CCCCCC; border-width: 1px; height: 123; width: 252px; float: right; margin-left: 10px;; margin-bottom: 10px}
.portfolio_button {color:red; height: 45px; margin-top: 5px;}
#portfolio_landscape_slider_content{margin: 0 auto; width: 828px; background-color:#FFFFFF; border:solid; padding: 5px;
border-color: #E8E8E8;
border-width: 1px;
background-color: white;
-moz-border-radius-bottomright: 8px;
border-bottom-right-radius: 8px;
-moz-border-radius-bottomleft: 8px;
border-bottom-left-radius: 8px;
-moz-border-radius-topright: 15px;
border-top-right-radius: 15px;
-moz-border-radius-topleft: 15px;
border-top-left-radius: 15px;}
/*End Portfolio index Content*/
/*Start Contact Content*/
/*End Contact Content*/
/*Footer Content*/
#footer_container{
position: relative;
margin-top: -279px;
width: 100%;
height: 279px;
background-color: #3399CC;
background-image: url(../images/footer_wave.jpg);
background-repeat:repeat-x
clear: both;
}
#footer {
margin: 0 auto;
width: 400px;
height: 99px;
padding-top: 180px;

}
#footer p {
color: white;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
text-align:center;
}
/* End Footer Content*/
/*Opera Fix*/
body:before {content:""; height:100%; float:left; width:0; margin-top:-32767px;}
/*End Opera Fix*/



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jp - Biography</title>
<link rel="stylesheet" href="/css/nivo-slider.css" type="text/css" media="screen" />
<link href="/css/master.css" rel="stylesheet" type="text/css" />
<link type="text/css" href="/css/styles.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="/scripts/jquery.nivo.slider.js" type="text/javascript"></script>
<script type="text/javascript" src="/assets/js/jquery.pikachoose.js"></script>
<script language="javascript">
<!--
$(document).ready(function (){
$("#pikame").PikaChoose();
});

-->
</script>

<!--[if !IE 7]>

<style type="text/css">

#wrap {display:table;height:100%}

</style>

<![endif]-->
</head>
<body>
<div id="wrap">
<div id="header_container">
<img class="header_image" src="/images/header.jpg" alt="logo"/>
</div>
<div id="central">
<div id="slider_wrapper" >
<div id="slider" class="nivoSlider">
<img src="/images/slide1.jpg" alt=""/>

<img src="/images/slide2.jpg" alt=""/>
<img src="/images/slide3.jpg" alt=""/>
</div>
</div>
</div>
<div id="nav_container" class="portfolio">
<ul id="prinav">
<li id="home"><a href="/"></a></li>
<li id="biography"><a href="/biography"></a></li>

<li id="portfolio"><a href="/portfolio"></a></li>
<li id="contact"><a href="/contact"></a></li>
</ul>
</div>
<div id="sec_nav">
<ul>
<li><a href="/portfolio" class="selected">Landscapes</a></li>
<li><a href="/portfolio/architecture">Architecture</a></li>
</ul>

</div>
<div id="main">
<div id="top_content">
<h1> My Landscape Portfolio</h1>
<p>This is my landscape portfolio, and I hope you enjoy it. I love taking landscape photos and framing my creative vision on the subject. I have traveled all over the UK, and I enjoy this. I am experienced in all the locations in the UK from Cornwal, Lake District and all the way up to scotland. Please find below some examples of my landscape photography.</p>
</div>
<div id="portfolio_landscape_slider_content">

<div class="pikachoose">
<ul id="pikame">
<li><img src="/images/portfolio/landscapes/port_land_1.jpg"/><span>Thanks</span></li>
<li><img src="/images/portfolio/landscapes/port_land_2.jpg"/><span>jCarousel</span></li>
</ul>
</div>
</div>
<div class="clear"></div>
</div>
</div>

<div id="footer_container">
<div id="footer">
<p>Website designed and developed. <br> All rights reserved and copyright 2011</p>
</div>
</div>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
</body>
</html>

Excavator
02-14-2011, 10:59 PM
Hello jpw1984,
In FF4 #portfolio_landscape_slider_content slide up only a few pixels. Is that what you're seeing?
Stop it from doing that by not floating full width #top_content. We use float to put things beside each other and, being full width, there is no room for anything next to #top_content.

jpw1984
02-14-2011, 11:29 PM
Ah. Brilliant. Thank you. Not to sure why I had floats there, but that is now sorted. Thanks for your help :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum