help with css layouts

**oldblue** · 03-01-2008, 04:30 AM

1) Script Title: CSS Left and Top Frames Layout

2) Script URL (on DD): http://www.dynamicdrive.com/style/la...frames-layout/

3) Describe problem: i am using expression web and when ever i try to move the maincontent down, the changes dont appear when i preview them in IE but do in firefox. i so hope have explained myself as it seems a bit busy tonight

thank-you

oldblue

**rangana** · 03-01-2008, 04:40 AM

Could you provide a link to your site

**oldblue** · 03-01-2008, 06:15 AM

hi there

the link to the page is http://www.bluerovers.co.nz/test.htm

cheers

oldblue

**rangana** · 03-01-2008, 06:37 AM

What's basically the problem?..
--The dddddd not showing in FF?
--The text Dynamic Drive CSS Library not following when scrolling down
-- The header not showing in IE?

You have to note in the first place that you set the body element's overflow to hidden.

**oldblue** · 03-01-2008, 07:55 AM

you notice in FF the text "css dynamic library is the actual, although not permanent placement, yet now mater where i move it to it stays in the same place in IE

thank you for taking time out to help

oldblue

**rangana** · 03-01-2008, 09:00 AM

Honestly, I don't exactly know what you wanted to achieve.
I scanned through your codes and the positioning is a mess. They just got into the place where it seems they were placed there, where in fact it's just because of the absolute positioning.

If you would change your mindset and start building a web,, at least table-less, then things will flow out smoothly.

Give this code a try. See if it fits your heart's deisre:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
html,body
{
spacing:0;
padding:0;
text-align:center;
font-family:Tahoma;
font-size:10pt;
}
.style4 {
	color: #000000;
	text-align: center;
	border-bottom-color: #D71E19;
}
#banner
{
margin:0;
padding:0;
}
.style5
{
border: 1px solid #D71E19;
width:136px;
padding:0;
}
 #left
 {
 float:left;
 background:#fff;
 width:140px;
 color:#efefff;
 text-align:left;
 margin-left:30px;
 margin-top:50px;
 }
#right
 {
 background:#fff;
 color:#000;
 text-align:left;
 padding:50px;
 margin-left:150px;
 }
#static
{
position:fixed;
overflow:hidden;
width:500px;
border:1px solid black;
padding:10px;

}
#contents
{
border:1px solid #222;
}
</style>

</head>
<body>

	<div id="banner">
		<img src="images/logo2b.jpg"/><img src="images/myheader.jpg" width="800px"/>
	</div>
		<div id="left">
			<table class="style5" cellspacing="0" cellpadding="0">
				<tr>
					<td>
					<img src="images/links.gif"/>
					</td>
				</tr>
				
				<tr>
					<td class="style4" style="height: 36px">
					<img src="images/f3.gif" width="112" height="21" />
					</td>
				</tr>
				
				<tr>
					<td class="style4">
					<img src="images/smallwhites.jpg" width="102" height="100" />
					</td>
				</tr>
				
				<tr>
					<td class="style4" style="height: 100px">
					<img src="images/nzfc.jpg" width="89" height="87" />
					</td>
				</tr>
				
				<tr>
					<td class="style4" style="height: 114px">
					<img src="images/nzfootball.jpg" width="90" height="90" />
					</td>
				</tr>
				
				<tr>
					<td class="style4">
					<img src="images/TCU.jpg" width="90" height="90" />
					</td>
				</tr>
				
				<tr>
					<td class="style4">&nbsp;</td>
				</tr>
			</table>
		</div>
		
		<div id="right">
			<div id="static">
			<p>Dynamic Drive CSS Library</p>
 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur non quam vel magna lobortis ornare. Nunc varius sollicitudin orci. Ut orci elit, imperdiet in, mollis luctus, tempus at, nisi. Nulla gravida neque euismod lacus. In vel nisl. Sed commodo. Maecenas enim ligula, ullamcorper vitae, condimentum at, tempus ut, massa. Donec velit. Sed velit nisi, pretium sit amet, adipiscing sit amet, aliquet et, quam. Morbi luctus, tellus eu consectetuer placerat, leo neque sollicitudin orci, et egestas orci pede vitae velit. Suspendisse nisl. Sed et augue.
			</div>
			<div id="contents">
			<br/><br/><br/><br/><br/><br/><br/><br/>
			<br/><br/><br/><br/><br/><br/><br/><br/>
			Other contents Here
			<br/><br/><br/><br/><br/><br/><br/><br/>
			<br/><br/><br/><br/><br/><br/><br/><br/>
			<br/><br/><br/><br/><br/><br/><br/><br/>
			<br/><br/><br/><br/><br/><br/><br/><br/>
			<br/><br/><br/><br/><br/><br/><br/><br/>
			<br/><br/><br/><br/><br/><br/><br/><br/>
			<br/><br/><br/><br/><br/><br/><br/><br/>
			<br/><br/><br/><br/><br/><br/><br/><br/>
			<br/><br/><br/><br/><br/><br/><br/><br/>
			<br/><br/><br/><br/><br/><br/><br/><br/>
			</div>
		</div>
	</div>


</body>
</html>

See if it helps

Thread: help with css layouts

Thread Tools

Search Thread

help with css layouts

Bookmarks

Bookmarks

Posting Permissions