...

View Full Version : CSS Layout issues based on Glish.com



DJBenLogan
02-10-2005, 04:59 PM
Hi Folks :cool:

I hope someone can help me here!

I have a layout that includes several divs based primarily on a layout that I found in http://www.glish.com/css (three columns centred)

I have adapted this layout to include other layers as well, and everything centres fine apart from some of the latest DIVS I have added: (featboxmycareer, featboxcalendar, featboxplan, featboxlinks)

The problem is when I resize the window they do not keep the central alignment as the other DIVS do

They are within another DIV called: contentbottom

Any suggestions would be great!

The full code is below (hope I havent pasted in too much)

Cheers

Ben








<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html><head><title>Home Lending Academy / Homepage</title>

<style type="text/css">

body {
text-align:center;
font-family: arial, helvetica, serif;
font-size: 76%;
background: #CCCC99
}


ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
text-align:center;

}

li { /* all list items */
float: left;
position: relative;
width: 7.5em;
background-color:#000000;
font-weight: bold;
color: #ffffff;
margin-top: 0px;
padding-left: 2px;
padding-right: 2px;
padding-top: 2px;
padding-bottom: 2px;
}

li ul { /* second-level lists */
display: none;
position: absolute;
top: 1.4em;
left: 0;
/* padding-top: 1; */

}

li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
top: auto;
left: auto;
}

li:hover ul, li.over ul { /* lists nested under hovered list items */
display: block;
}

/* Link styles for site */


a {
text-decoration: none;
}

a:link {
color: #4255AD;
}

a:visited {
color: #996699;
}

a:active {
color: #FF6666;
}

a:hover {
text-decoration: underline;
}


/* Link styles for Top Menu Navigation */




A.navigation {
COLOR: #FFFFFF; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; FONT-SIZE: 10px; FONT-WEIGHT: bold; TEXT-DECORATION: underline
}

A.navigation:active {
COLOR: #FFFFFF; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; FONT-SIZE: 10px; FONT-WEIGHT: bold; TEXT-DECORATION: underline
}

A.navigation:visited {
COLOR: #FFFFFF; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; FONT-SIZE: 10px; FONT-WEIGHT: bold
}
A.navigation:hover {
COLOR: #FFFFFF; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; FONT-SIZE: 10px; FONT-WEIGHT: bold; TEXT-DECORATION: underline
}


A.newslink {
COLOR: #999999; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; FONT-SIZE: 10px; FONT-WEIGHT: bold; TEXT-DECORATION: underline
}
A.newslink:visited {
COLOR: #999999; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; FONT-SIZE: 10px; FONT-WEIGHT: bold
}
A.newslink:hover {
COLOR: #999999; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; FONT-SIZE: 10px; FONT-WEIGHT: bold; TEXT-DECORATION: underline
}

p,h1,pre {
margin:0px 10px 10px 10px;
}

h1 {
font-size:14px;
padding-top:10px;
}


/* Layers for page Layout */

#frame {
width:771px;
margin-right:auto;
margin-left:auto;
margin-top:10px;
padding:0px;
text-align:left;
}

#contentleft {
width:450px;
height:264px;
padding:0px;
margin:0px;
float:left;
background:#fff;
}

#contentcenter {
width:321px;
padding:0px;
margin:0px;
float:left;
background:#eee;
}

#contentheader {
width:771px;
padding:0px;
margin:0px;
background:#000;
}

#navigation {
width:771px;
padding:0px;
margin:0px;
background:#000;
}

#cookietrail {
width:771px;
padding:0px;
margin:0px;
background:#E7E7CE;
text-align:right;
}

#cookietrail P {
font-size:12px;
margin:0px;
position: relative;
right: 25px;
}

#contentheader h1 {
font-size:14px;
padding:10px;
margin:0px;
}

#contentbottom {
width:771px;
height:136px;
padding:0px;
margin:0px;
background:#FFFFF7;
}

#footer {
width:771px;
padding:0px;
height:20px;
margin:0px;
margin-top: 0px;
background:#E7E7CE;
}


#footermain {
width:771px;
height:35px;
padding:0px;
margin:0px;
background:#4255AD;
}

#footermain P {
font-size:10px;
color: #ffffff;
padding:0px;
margin:0px;
text-align:center;
line-height:-20px;
}

#featboxmycareer {
width:193px;
height:114px;
position: absolute;
top: 401px;
left: 116px;
padding:0px;
margin:0px;
float:left;
background:#000000;
}

#featboxcalendar {
width:195px;
height:114px;
position: absolute;
top: 401px;
left: 309px;
padding:0px;
margin:0px;
float:left;
background:#4255AD;
}

#featboxplan {
width:193px;
height:114px;
position: absolute;
top: 401px;
left: 504px;
float:left;
padding:0px;
margin:0px;
background:#FFFFFF;
}

#featboxlinks {
width:193px;
height:114px;
position: absolute;
top: 401px;
left: 695px;
padding:0px;
margin:0px;
float:left;
background:#4255AD;
}
</style>


<script type="text/javascript"><!--//--><![CDATA[//><!--
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;

//--><!]]>
</script>



</head>

<body>

<div id="frame">

<div id="contentheader"> <img src="images/top_banner.gif" width="771" height="77"></div>

<div id="navigation">
<!-- menu tree -->
<ul id="nav">
<li><a href="L_D_team.htm" title="L & D Team" class="navigation">L&amp;D Team</a>
<ul>
<li><a href="central_team.htm" title="Central Team" class="navigation">Central
Team</a></li>
<li><a href="operation_training.htm" title"=Operation Training" class="navigation">Operation
Training</a></li>
</ul>
</li>
<li><a href="career_advice.htm" title="Career Advice" class="navigation">Career
Advice</a> </li>
<li><a href="professional_qual.htm" title="Professional Qual" class="navigation">Prof
Quals</a></li>
<li><a href="how_to_register" title="How to Register" class="navigation">Register</a>
<ul>
<li><a href="nominations_process.htm" title="Nominations Process" class="navigation">Nominations
Process</a></li>
<li><a href="training_calendar.htm" title="Training Calendar" class="navigation">Training
Calendar</a></li>
<li><a href="course_information.htm" title="Course Information" class="navigation">Course
Information</a></li>
</ul>
</li>
<li><a href="testimonials.htm" title="Testimonials" class="navigation">Testimonials</a></li>
<li><a href="L_D_policies.htm" title="L & D Policies" class="navigation">L &amp;
D Policies</a></li>
<ul>
<li><a href="HL_L_D_policies.htm" title="HL L & D Policy" class="navigation">HL L&D
Policy</a></li>
<li><a href="cancelation_policy.htm" title="Cancelation policy" class="navigation">Cancelation
policy</a></li>
<li><a href="pre_work.htm" title="Pre - Work" class="navigation">Pre - Work</a></li>
<li><a href="professional_qual.htm" title="Professional Qual" class="navigation">Professional
Qual</a></li>
</ul>
<li><a href="my_career.htm" title="My Career @ GE" class="navigation">My Career
@ GE</a></li>
<ul>
<li><a href="tools.htm" title="Tools" class="navigation">Tools</a></li>
<li><a href="tips.htm" title="Tips" class="navigation">Tips</a></li>
<li><a href="articles.htm" title="Articles" class="navigation">Articles</a></li>
<li><a href="professional_qual.htm" title="Professional Qual" class="navigation">Professional
Qual</a></li>
</ul>
<li><a href="my_learning.htm" title="My Learning" class="navigation">My Learning</a></li>
</ul>
</div>

<div id="cookietrail">
<SCRIPT language="JavaScript1.2">
<!-- Begin
var months=new Array(13);
font="ariel";
size="1";
months[1]="January";
months[2]="February";
months[3]="March";
months[4]="April";
months[5]="May";
months[6]="June";
months[7]="July";
months[8]="August";
months[9]="September";
months[10]="October";
months[11]="November";
months[12]="December";
var time=new Date();
var lmonth=months[time.getMonth() + 1];
var date=time.getDate();
var year=time.getYear();
if (year < 2000) // Y2K Fix, Isaac Powell
year = year + 1900; // http://onyx.idbsu.edu/~ipowell
document.write(lmonth);
document.write(" "+ date + ", " + year + " | ");

// End -->
</SCRIPT>
<a href="#" class="newslink" onClick='window.external.AddFavorite(location.href,document.title);'>Add To Favourites</a>
</div>

<div id="contentleft">
<!-- Flash Movie area start -->
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://active.macromedia.com/flash2/cabs/swflash.cab#version=4,0,0,0"
id=flash width=449 height=265>
<param name=movie value="images/image.swf">
<param name=quality value=high>
<param name=bgcolor value=#FFFFFF>
<param name=wmode value=transparent>
<embed src="images/image.swf" quality=high bgcolor=#FFFFFF width=449 height=265 type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">
</embed>

</object>
<!-- Flash Movie area end -->
</div>
<div id="contentcenter"><img src="images/colin_intro.gif" width="321" height="265"></div>

<div id="contentbottom">

<div id="featboxmycareer"></div>
<div id="featboxcalendar"></div>
<div id="featboxplan"></div>
<div id="featboxlinks"></div>

</div>

<div id="footer"></div>
<div id="footermain"><img src="images/footer_logo.gif" width="191" height="47"><p>1998-2005 General Electric Company. All Rights Reserved</p>
</div>


<br clear="all" />
<!-- without this little <br /> NS6 and IE5PC do not stretch the frame div down to encopass the content DIVs -->
</div>

</body>
</html>

nite1x
02-11-2005, 12:23 AM
Because you have each div positioned absolutely, they will remain where they are on the screen regardless of how you resize your screen. You are also using float:left for each division, which in this case should be sufficient. I have also noticed the total width of the div's in #contentbottom is 774, while div#contentbottom width is set to 774px. Clean these up and see how it looks, if you still have problems, post again.


Also use the code tags to post your code.

You do this by wrapping you code with the the tag [ CODE ] at the start and [ /CODE ] at the end. ( Note: remove the spaces between the braces and the tags.


HTH

Nite.

ronaldb66
02-11-2005, 10:36 AM
Better still: don't post miles of code, post a link to the page so we can visualise what you are trying to accomplish.
Everybody can get some server space for free from any of the providers like lycos, geocities, etc. It doesn't have to be pretty, as long as it works.


Please go back to your original post and edit it to place the pasted code inside CODE tags; having to scroll up and down for miles is incredibly annoying, and the code tags generate a scrolling box of their own, keeping the post itself nice and short.
For future use, the code tags can also be found in the edit window as a hash mark (octothorpe) icon ( # ) in the upper border for easy editing.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum