Modifying Dynamic drive css [Archive]

View Full Version : Modifying Dynamic drive css

Bikermanirl

09-24-2008, 10:40 AM

I'm trying to modify the css frame style layout at http://www.dynamicdrive.com/style/layouts/item/css-left-top-and-bottom-frames-layout/

I want the top frame to go completely across the top and to reduce the size of the bottom frame.

I've pasted the code I've modified below and it works fine in Firefox but in IE the top frame width does not go all the way across and the main content does not resize to meet the bottom frame.

Any ideas?

Thanks


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dynamic Drive: CSS Left, Top and Bottom Frames Layout</title>
<style type="text/css">

body{
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%;
max-height: 100%;
}

#framecontentLeft{
position: absolute;
top: 110;
left: 0;
width: 200px; /*Width of left frame div*/
height: 100%;
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: red;
color: white;
}

#framecontentTop{
width: 100%; /* CHANGED THIS TO INCREASE WIDTH */
position: absolute;
top: 0;
left: 0; /*Set left value to WidthOfLeftFrameDiv*/
right: 0;
height: 110px; /*Height of top frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: navy;
color: white;
}

#framecontentBottom{
position: absolute;
top: auto;
left: 200px; /*Set left value to WidthOfLeftFrameDiv*/
bottom: 0;
right: 0;
height: 20px; /*Height of bottom frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: navy;
color: white;
}

#maincontent{
position: fixed;
top: 110px; /*Set top value to HeightOfTopFrameDiv*/
left: 200px; /*Set left value to WidthOfLeftFrameDiv*/
right: 0;
bottom: 20px; /*Set bottom value to HeightOfBottomFrameDiv*/
overflow: auto;
background: #fff;
}

.innertube{
margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}

* html body{ /*IE6 hack*/
padding: 110px 0 120px 200px; /*Set value to (HeightOfTopFrameDiv 0 HeightOfBottomFrameDiv WidthOfLeftFrameDiv)*/
}

* html #maincontent{ /*IE6 hack*/
height: 100%;
width: 100%;
}

* html #framecontentTop, * html #framecontentBottom{ /*IE6 hack*/
width: 100%;
}

</style>

<script type="text/javascript">
/*** Temporary text filler function. Remove when deploying template. ***/
var gibberish=["This is just some filler text", "Welcome to Dynamic Drive CSS Library", "Demo content nothing to read here"]
function filltext(words){
for (var i=0; i<words; i++)
document.write(gibberish[Math.floor(Math.random()*3)]+" ")
}
</script>

</head>

<body>

<div id="framecontentLeft">
<div class="innertube">

<h3>Sample text here</h3>

</div>
</div>

<div id="framecontentTop">
<div class="innertube">

<h1>CSS Left, Top and Bottom Frames Layout</h1>
<h3>Sample text here</h3>

</div>
</div>

<div id="framecontentBottom">
<div class="innertube">

<h3>Sample text here</h3>

</div>
</div>

<div id="maincontent">
<div class="innertube">

<h1>Dynamic Drive CSS Library</h1>
<p><script type="text/javascript">filltext(255)</script></p>
<p style="text-align: center">Credits: <a href="http://www.dynamicdrive.com/style/">Dynamic Drive CSS Library</a></p>

</div>
</div>

</body>
</html>

Medyman

09-24-2008, 03:59 PM

You might be better off starting off with this one (http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-21-fixed-fluid/).

Bikermanirl

09-25-2008, 07:43 AM

Thanks but I actually need the top, left and bottom rows/ columns to remain static with the content section scrolling.

I'm redesigning a frames site and want to keep the existing look and feel but using css instead of frames.

Bikermanirl

09-29-2008, 02:29 PM

Any ideas anyone? my brain is melting trying to figure it :)

Medyman

09-29-2008, 11:06 PM

Only guaranteed to work in modern browsers.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Frame</title>
<style type="text/css">
html,body {
margin:0;
padding:0;
width:100%;
}
div#container {
margin:0 auto;
width:100%;
}
div#header {
background:red;
height:50px; /* Height of Header */
position:fixed;
top:0;
width:100%;
}
div#sidebar {
height:100%;
width:200px; /* Width of Sidebar */
float:left;
position:fixed;
}
div#content {
margin-top:50px; /* Top Margin = Height of Header */
border-left:200px solid green; /* Border Width = Width of Sidebar */
padding-left:5px;
height:1000px;
}
div#footer {
background:red;
width:100%;
height:50px; /* Height of Footer */
position:fixed;
bottom:0;
}
</style>
</head>
<body>
<div id="container">
<div id="header">This is my fixedheader.</div>
<div id="content_container">
<div id="sidebar">This is my sidebar</div>
<div id="content">This is my content</div>
</div>
<div id="footer">This is my fixed footer.</div>
</div>

</body>
</html>

All the highlighted and commented styles and the background colors are the ones you'll need to change.

Bikermanirl

10-01-2008, 07:07 AM

THanks for that