CSS Vertical overlap

3 replies [Last post]

Sun, 2011-05-08 21:25

StevenTNorris

Offline

newbie

Timezone: GMT-4

Joined: 2011-05-08

Posts: 3

Points: 4

I have a vertical overlap issue with my divs. I have three main container divs set up (header, footer, and middleContent) with absolute positioning. All other divs are positioned within these containers with relative positioning. When the window is resized horizontally, the min-widths work fine. However, vertically, the divs overlap when the window is resized. I cannot provide a link, because I'm using a localhost. However, the html and css are below. I use a short javascript segment in a separate file to center the middleContent (not below). Any help on preventing this vertical overlap would be very helpful.

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" xml:lang="en" lang="en-US">
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="css/main.css"/>
<link type="text/css" rel="stylesheet" href="css/profile.css"/>
<script type="text/javascript" src="jsFiles/middleContentPos.js"></script>
<title>Home</title>
</head>
<body>
<div id="main">
	<?php
	if($_SESSION['userType'] == 'admin' or $_SESSION['userType'] == 'superAdmin'){
	?>
		<div id="middleContent">
			<div id="welcomeText"> Welcome <?php echo($_SESSION['firstName']) ?></div>
			<div id="horizontalBorder"> <img src = "images/welcomeBorderHorizontal.png"/></div>
			<div id="linkImages"> <img src ="images/silhouette.png"/> <a href="ManageUsers.php"><img src="images/groupSilhouette.png"/></a></div>
		</div>
	<?php
	}else{
	?>
		<div id="middleContent">
			<div id="welcomeText"> Welcome <?php echo($_SESSION['firstName']) ?></div>
			<div id="horizontalBorder"> <img src = "images/welcomeBorderHorizontal.png"/></div>
			<div id="linkImages"> <img src ="images/silhouette.png"/> <a href="ManageUsers.php"><img src="images/briefcase.png"/></a></div>
		</div>
	<?php
	}
	?>
 
	<?php
	require($_SERVER['DOCUMENT_ROOT']."/phpFiles/header.php");
	?>
 
	<?php
	require($_SERVER['DOCUMENT_ROOT']."/phpFiles/footer.php");
	?>
</div>
</body>
 
</html>

CSS

/*Site Wide*/
body {
margin: 0;
padding: 0;
color: #ffffff;
font-family: Gill Sans, sans-serif;
background-color: #F1F1F1;
}
html{
overflow:scroll;
}
a:link {
text-decoration: none;
color: white;
}
a:visited {
color: white;
text-decoration: none
}
a:active {
color: white;
text-decoration: none
}
a:hover {
text-decoration: underline; 
color: white;
}
 
/*Middle Content*/
#middleContent{
z-index:-1;
position:absolute;
width:100%;
min-width:900px;
text-align:center;
z-index:-1;
}
 
/*header.php*/
#header{
background-image: url("../images/backgroundOrange.jpg");
position: absolute;  
height: 100px;
width: 100%;
min-width:900px;
top: 0px; 
left: 0px;
z-index: -1;
}
#navigationBar {
height:1em;
font-family: sans-serif;
position: absolute; 
font-size: 18px;
top:40px;
right:0%;
}
#topLogo {
position: absolute; 
top: 18px;
}
 
/*footer.php*/
#titleText{
font-size:large;
font-weight:2;
}
#footer{
position: absolute;
bottom:0px;
left:0px;
z-index:-1;
background-color:#1F1F1F;
color:#ffffff;
min-width:900px;
height: 170px;
width:100%;
}
#bottomCopyright{
position:relative;
top:150px;
color: #BBBBBB;
font: sans-serif;
width:100%;
text-align:center;
font-size:small;
}
#infoImageContainer{
position:relative;
float:left; 
margin-top:50px;
left: 20px;
}
#infoImage{
position:relative;
height:40px;
}
#infoTextContainer{
position:relative;
float:left; 
height:50%; 
margin-top:1.5em;
left: 40px;
}
#infoText{
font-size:small;
position:relative;
height:3em;
}
#contactImageContainer{
position:relative;
float:right; 
height:50%; 
margin-top:50px;
right: 170px;
}
#contactImage{
position: relative;
height:35px;
}
#contactTextContainer{
position:relative;
float:right; 
height:50%; 
margin-top:1.5em;
left: 40px;
}
#contactText{
font-size:small;
position:relative;
height:3em;
right:20px;
}
#networkLinksContainer{
position:relative;
float:center; 
height:50%; 
margin-top:40px;
width:100%;
text-align:center;
}
#networkLinks{
position: relative;
height:54px;
}

Tags:

Wed, 2011-06-01 23:58

StevenTNorris

Offline

newbie

Timezone: GMT-4

Joined: 2011-05-08

Posts: 3

Points: 4

bump

bump bump bump

Thu, 2011-06-02 00:26

NickCSS

Offline

newbie

Timezone: GMT+12

Joined: 2006-10-04

Posts: 8

Points: 7

Steven, Can you open the page

Steven,

Can you open the page locally and copy the code from View > Source?

Thanks.

Mon, 2011-06-13 17:52

StevenTNorris

Offline

newbie

Timezone: GMT-4

Joined: 2011-05-08

Posts: 3

Points: 4

Sorry the response took so

Sorry the response took so long. I wasn't aware someone had responded, and it has been a while since I've picked this project back up. Here is the code from the viewsource off a local run.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" xml:lang="en" lang="en-US"> 
 
 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<link type="text/css" rel="stylesheet" href="css/main.css"/> 
<link type="text/css" rel="stylesheet" href="css/profile.css"/> 
<script type="text/javascript" src="jsFiles/main.js"></script> 
<title>Home</title> 
</head> 
<body> 
 
 
	<!-- Administrator profile --> 
			<div id="middleContent"> 
			<div id="welcomeText"> Welcome Steven</div> 
			<div id="horizontalBorder"> <img src = "images/welcomeBorderHorizontal.png"/></div> 
			<div id="linkImages"> 
				<a href="javascript:void(0)" onclick="openLightBox('accountBoxContent');"> 
					<img id="leftLinkImage" src ="images/silhouette.png"/> 
				</a> 
				<img id="verticalBorder" src="images/welcomeBorderVertical.png"/> 
				<a href="" id="rightLinkImage"><img src="images/groupSilhouette.png"/></a> 
			</div> 
			<div id="linkText"> 
				<div id="leftLinkText">My Account</div> 
				<div id="rightLinkText">Manage Users</div> 
			</div> 
		</div> 
 
	<!-- Basic user profile --> 
 
	<!-- Header and Footer Includes --> 
 
 
<!-- Header -->
 
<div id="header">
 
	<div id="topLogo"> <img src='../images/dts_logo.png' alt='DigitechStudio Logo'/> </div>
 
	<div id="navigationBar"> <a href="../home.php">
 
								HOME
 
							</a>
 
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 
	                         <a href="javascript:void(0)" onclick="openLightBox('accountBoxContent');">
 
								MY ACCOUNT
 
							</a>
 
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 
							 <a href="../home.php">
 
								APPS
 
							</a>
 
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 
							 <a href="../home.php?logout='true'">
 
								LOGOUT
 
							</a>
 
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 
							 <a href="../home.php">
 
								HELP
 
							</a>
 
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 
	</div>
 
</div>
 
 
 
<!-- Edit Account Box -->
 
<div id="fade"></div>
 
<div id="boxWrapper">
 
	<div id="accountBoxContent">
 
			<div id="editTitle">
 
				<img src="images/editIconAccount.png"/>&nbsp;&nbsp;&nbsp;Edit Account
 
				<hr id="editAccountLine"/>
 
			</div>
 
			<div id="editAccountForm">
 
				<form>
 
					<table>
 
						<tr>
 
							<td>
 
								First Name:
 
							</td>
 
							<td>
 
								<input type="text" name="firstName" value="Steven"/>
 
							</td>
 
						</tr>
 
						<tr>
 
							<td>
 
								Middle Name:
 
							</td>
 
							<td>
 
								<input type="text" name="middleName" value="Thomas"/>
 
							</td>
 
						</tr>
 
						<tr>
 
							<td>
 
								Last Name:
 
							</td>
 
							<td>
 
								<input type="text" name="lastName" value="Norris"/>
 
							</td>
 
						</tr>
 
						<tr>
 
							<td>
 
								Agency:
 
							</td>
 
							<td>
 
								<input type="text" name="agency" value="Digi tech studios"/>
 
							</td>
 
						</tr>
 
						<tr>
 
							<td>
 
								Username:
 
							</td>
 
							<td>
 
								sNorris							</td>
 
						</tr>
 
						<tr>
 
							<td>
 
								Password:
 
							</td>
 
							<td>
 
								<input type="password" name="password" disabled="True" value="1232"/><br />
 
								<a id="changeLinks" href="">Change</a>
 
							</td>
 
						</tr>
 
						<tr>
 
							<td>
 
								Email:
 
							</td>
 
							<td>
 
								<input type="text" name="email" disabled="True" value="steventnorris@gmail.com"/><br />
 
								<a id="changeLinks" href="">Change</a>
 
							</td>
 
						</tr>
 
						<tr>
 
							<td>
 
								User Type:
 
							</td>
 
							<td>
 
								admin							</td>
 
						</tr>
 
						<tr>
 
							<td>
 
								Administrator:
 
							</td>
 
							<td>
 
								Ryan Vet<br />
 
								<a id="changeLinks" href="">Contact</a>
 
							</td>
 
						</tr>
 
					</table>
 
				</form>
 
				<div id="editAccountLinks">
 
					<a href="">SAVE</a>
 
					&nbsp;&nbsp;&nbsp;
 
					<a href="">CLOSE</a>
 
				</div>
 
			</div>
 
	</div>
 
</div> 
 
 
<div id="footer">
 
	<div id="bottomCopyright">&copy; 2001, Digitech Studio</div>
 
	<div id="infoImageContainer"> 
 
		<div id="infoImage"><img src="../images/light.png" /> </div>
 
	</div>
 
	<div id="infoTextContainer">
 
		<div id="infoText"><span id="titleText">Have an Idea?</span><br /><br />Tell us ways to improve<br /><br />or ideas for new apps!</div>
 
	</div>
 
	<div id="contactImageContainer">
 
		<div id="contactImage"> <img src="../images/phone.png"/></div>
 
	</div>
 
	<div id="contactTextContainer">
 
		<div id="contactText"><span id="titleText">Contact Us</span><br /><br />1.866.433.1396<br /><br />info@dtechstudio.com</div>
 
	</div>
 
		<div id="networkLinks">
 
			<a href=""><img src="../images/facebook.png" /></a>
 
			<a href=""><img src="../images/twitter.png" /></a>
 
			<a href=""><img src="../images/flickr.png" /></a>
 
			<a href=""><img src="../images/linkedin.png" /></a>
 
		</div>
 
</div>	
 
</body> 
 
</html>

bump

Steven, Can you open the page

Sorry the response took so

New forum topics

User login

Navigation