|
CSS - Full Height Page Layout.
I am looking for some examples on making this layout:
----------HEADER---------- nav content - - - - - - - - - - - - ----------FOOTER0--------- The page needs to be 100% the height of the browser window with header at top, footer at bottom and the content/nav being a minimum height of enough to fill the screen vertically and should be expandable. Anyone got any pointers? Similar TutorialsHello Just recently I had an idea for a page I wanted to make, the design is basically a 3-column layout with no traditional header or footer, the height of all three columns should run the length of the window/page height the left and rightmost column would have a fixed width or a width in em, the center column width should fill the space in between. If the content is short all columns should extend to the height of the page window, but if the content in any of the columns is longer than the window height they should all extend to reach the bottom of the page and accommodate the content length In my first attempt things didn't go so well, results varied wildly across browsers so I decided to start from scratch bit by bit Bellow is the point at which I reach consistent but undesired behaviour, I have validated and tested the code in Firefox 3/Pale Moon, Internet Explorer 8, Chromium 9, and Opera 11 I would like the end result to work in the above browsers as well as IE7 if possible I should point out now that im not interested in using faux-columns, the layout should not require images, I also wish to have absolute-positioned elements in the columns some time later Code:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Three Columns</title>
<style type="text/css">
*, html, body {
margin: 0;
padding: 0;
font-size: 100%;
}
html, body {
width: 100%;
height: 100%;
}
#maincontainer {
position: relative;
height: 100%;
background: #eee;
}
#left {
position: absolute;
top: 0px;
left: 0px;
width: 200px;
background: #fbb;
height: 100%;
}
#mid {
position: relative;
margin: 0 200px 0 200px;
background: #efe;
height: 100%;
}
#right {
position: absolute;
top: 0px;
right: 0px;
width: 200px;
background: #bbf;
height: 100%;
}
</style>
</head>
<body>
<div id="maincontainer">
<div id="left">
left start<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left end<br />
</div>
<div id="mid">
mid start<br />
mid<br />
mid<br />
mid<br />
mid<br />
mid<br />
mid end<br />
</div>
<div id="right">
right start<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right end<br />
</div>
</div>
</body>
</html>
In the above example it works as long as the content within the columns is shorter than the window height, but if you re-size the window so that the text in the right or left column goes beyond the page, and then scroll to the bottom, the columns do not extend to the bottom of the page so there is a large gap where the content overflows beyond the column What I would like to do from this point is make the columns extend to the bottom of the page when this happens, but I'm not sure how best to proceed I also have a version of the above code which uses floated left and right columns instead of absolute positioned ones, would it be better to work from that? or does it not really matter Thanks in advance This seems like it should be very easy to do but something is preventing it from working. I was following the guide at http://www.alistapart.com/articles/negativemargins but with my navigation column on the left. A summary of my layout right now is: <div id="wrapper"> <div id="container"> <div id="content"> </div> </div> <div id="navigation" <div id="navlist"> </div> </div> <div id="clearing"> </div> </div> my css: #container { float: right; margin-left: -16.8em; width: 100%; background-color: #2586d7; } #navigation { float: left; width: 14em; background: #90bade url(navimage.jpg) repeat-y: right; } #wrapper { background: #90bade url(navimage.jpg) repeat-y: right; } #navlist is a div containing a styled ul for navigation. #clearing { clear: both; height: 0; } So basically the navigation div is supposed to extend to the bottom as far as the container div goes. According to the guide at AListApart it should be working but is something else in my code interfereing? If everything above should work fine, I can post a link to the test file so you can see the rest of the code. Thanks for any help! I have 2 div columns on a web page, they are positioned using css... the right column is taller than the left column, but the left column does not expand to the full height of the right column... I require this, because the left column has a background color that I want to go right to the bottom of the page. I have height: 100%; in the css style for the left column, but that only makes it 1 screen high... does anyone know of a way to make it the full height of the other column, ie stretch? I have tried height: auto; but that doesnt work either. Hello, In CSS is there a way to tell an object to extend the full height and width of its parameters without specifying height and using absolute positioning? Thanks, Andy Hey I am developing a site for our band, and I'm having trouble getting the nav bar to look right. The page is http://www.mattbray.curvedspaces.co..._beta/index.php and I don't want the left hand section to stop halfway down the page. The stylesheet is called style.css in the same directory. Code: /* page defaults */
body {
margin: 0px;
padding: 0px;
text-align:center;
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #EAEAEA;
}
/* Layout divs */
#container {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #666666;
position: static;
left: 40px;
top: 12px;
padding: 0px;
width: 800px;
border-right: #003366 1px solid;
border-left: #003366 1px solid;
margin-right: auto;
margin-left: auto;
height: auto;
text-align:left;
background-color: #FFFFFF;
}
#title {
background-image: url(images/saved_title.gif);
margin-top: 10px;
background-repeat: no-repeat;
height: 150px;
border-top-color: #000000;
border-top-style: solid;
border-top-width: 1px;
border-bottom-color: #000000;
border-bottom-style: solid;
border-bottom-width: 1px;
border-color: #000000;
}
#navbar {
background-image: url(images/navbar.gif);
background-repeat: no-repeat;
border-bottom-color: #000000;
border-bottom-style: solid;
border-bottom-width: 1px;
padding: 5px;
height: 20px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#navwin {
font-family: Verdana, Arial, Helvetica, sans-serif;
border-right: 1px solid black;
padding: 5px;
background-color: #CCCFFF;
width: 230px;
height: 100%;
margin: 0;
float: left;
font-size: medium;
}
#content {
float: left;
font-family: Verdana, Arial, Helvetica, sans-serif;
padding: 10px;
padding-top: 40px;
background-image: url(images/content.gif);
background-repeat: no-repeat;
background-position: -239px 0px;
background-color: #FFFFFF;
height: auto;
width: 539px;
}
#footer {
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #CCCCCC;
margin-bottom: 10px;
padding: 10px;
border-top: solid 1px black;
border-bottom: solid 1px black;
width: 780px;
height: 25px;
text-align: center;
}
/* Links */
a:link {
color: #006699;
}
a:visited {
color: #006699;
}
a:hover {
color: #006699;
text-decoration: none;
}
a:active {
color: #006699;
}
/* elements */
#navwin h2 {
font-size: large;
display: block;
}
#navwin ul {}
thanks Matt Hi all! After trying more then a few things I'm about to give up, so I hope someone here has the answer. The problem is the following: * A website contains 3 DIV columns and an header at the top, this is all inside a single wrapper DIV which centers the webpage. * All three columns should have the same length as the longest column. * When the content in the 3 DIV columns is shorter then the height of your browser window, the DIV elements should fill-out until the bottom of the screen. Point 2 is doable. Point 3 is doable. But the combination of point 2 and 3 seems quite hard. Hope someone has an idea . Thanks! Hi, I am trying to better understand how column heights are displayed, and how to create full height columns. On this page http://tapmeister.com/layout_test/index.html, the column which drives the height of the page is <div id="main">, and the left and right columns do not span the entire column height, and the red <div id="content"> shows at the bottom of both side columns. On this page http://tapmeister.com/layout_test/index2.html, I put less stuff in the center <div id="main"> so it wouldn't drive the height of the page. The green <div id="main">, however, did cover the entire column unlike the left and right column on the earlier page. Can anyone help me understand what is going on, and why one column has full height color yet not the other one? Also, what is the best way to make the left and right column have full height color? I know I can apply a repeating background graphic to <div id="content"> which mimics the appearance of the left and right column, however, it would be nice to do differently if possible. My code is listed below (sorry about the ugly colors!) Thanks Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Layout Test</title>
<style type="text/css">
* {margin: 0; padding: 0;}
body {background-color: olive;}
#wrapper
{
width: 100%;
background-color: blue;
margin: auto;
}
#main
{
margin: 0 180px;
background-color: green;
}
#content {background-color: red;}
#side1
{
width:180px;
float:left;
background-color:yellow;
}
#side2
{
width: 180px;
float:right;
background-color:yellow;}
#footer
{
clear:both;
background-color:lime;
border-top: 10px solid black;
}
#header {background-color: purple;}
.clear
{
clear:both;
}
</style>
</head>
<body id="page_bg">
<div id="wrapper">
<div id="header">My Header</div>
<div id="content">
<div id="side2">
<p>Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here.</p>
</div>
<div id="side1">
<p>Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here.</p>
</div>
<div id="main">
<p>Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff.</p>
<p><img style="margin: 5px; float: left; width: 250px;" src="lady.jpg" alt="" width="250"></p>
<p>Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff.</p>
<div class="clear"></div>
</div>
</div>
</div>
<div id="footer">My Footer</div>
</body>
</html>
Hi, I have a border around the content of my page which is limited in width but not height. Some of the pages have more content then others so the height adjusts. I also have a left column and a black background with and image in this column but I have 2 problems 1. In IE I can't seem to get this black column(div) to extend to the full height of the column so that it reaches the border. 2. In Firefox this left column extends all the way down the page and the border doesn't surround the text it sort of collapses The column is left floated and in a div and the content is right floated and in a div as well which is all surrounded by a div with a border. I would appreciate any help that you might offer. Thanks Ok I've got this... Code:
<html>
<head>
<style type="text/css">
body {
height: 100%;
background-color: blue;
margin: 0px;
padding: 0px;
}
.container {
height: 100%;
width: 300px;
margin: 90px auto 50px auto;
background-color: green;
}
.footer {
position: absolute;
bottom: 0%;
width: 100%;
background-color: yellow;
height: 50px;
}
.menubar {
position: absolute;
top: 0px;
width: 100%;
background-color: red;
height: 95px;
}
</style>
</head>
<body>
<div class="menubar">
MENUBAR
</div>
<div class="container">
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
a<br>a<br>a<br>a<br>a<br>a<br>z<br>
<!-- footer -->
<div class="footer">
FOOTER
</div>
</div>
</body>
</html>
Which works beautifully in opera, the green part is the full size of the document with all those a<br> in there (or without), and the footer is perfectly placed at the bottom. But both IE (testing on version 6) & NS (testing on version 7.1) display the footer at the bottom of the window when it loads, not after the container div is finished... Also in NS the container divs background colour finishes once you scroll down a little. Now I've tried many different ways around this. I know what its like when I spend too long looking at one thing, I end up missing the obvious - so I thought I'd throw it out to a wider group for observations... I thank you in advance. -D I'd like to make a 2-column layout where each column fills the height of the container div, and the container div's height is determined by the longest div within it... this is getting a bit confusing, because I can't have one being determined by the other one with that one being determined by the first, if that makes sense? Any help would be greatly appreciated, thanks hello all, i recently tried to implement a layout which fills the available screenspace, with the main content area as scrolling box. I thought i succeeded, because firefox shown no problem, but when looked in IE, IE is very slow to render it, making it just unusable. I've been looking for a way around ,but i'm out of luck so far, so i thought i'd seek advise on this forum. Maybe you can tip me in the right direction ! An image is worth a thousand words, so please have a look at the attached image, it summarizes the screen structure. As you can see, the only scrollable area is the center orange zone : "viewport". thank you for your time and help ! Alexandre Hello everybody! I have been having a big problem with my webpage for a long time now and hope I can find an answer to my problem with your help. I want a div that contains the content of my pages (which varies in length depending on the individual page) to stretch the length of my page, but it only stretches the length of the window. Here's the HTML and CSS: HTML (I only included the very basic structure): <html> <body> <div class="container"> <div id="content"> <div id="..."></div> <div id="..."></div> <div id="..."></div> <div id="..."></div> </div> </div> </body> </html>` CSS: html, body { height: 100%; font-family: Arial; font-size: 10px; color: #000000; background: #FFF url(../../images/body.png) no-repeat center 40px; margin: 0; position: relative;} .container { height: 100%; width: 960px; margin-right: auto; margin-left: auto; position: relative;} #content { width: 939px; min-height: 100%; position: relative; top: 210px; left: 6px; box-shadow: 0px 0px 8px #666; -moz-box-shadow: 0px 0px 8px #666; -webkit-box-shadow: 0px 0px 8px #666; background-color: #FFF;} I tried to set the content div to overflow: auto, but that includes a scroll bar for the content div that I do not want. It does, however, create the desired effect of the shadow and background of the #content div all the way to the end of the page. Am I missing anything? I thought min-height would work, but it doesn't! It only stretches the content div to page height and everything else is overflow, but without the content div's background color and shadow. Does anybody maybe see where the problem lies? Thank you so much in advance for your help. I'm wanting to extend a div all the way to the bottom of the page to give the effect of a white column. How can I make it extend all the way to the bottom if the content is too short to make it do this? The example is at http://www.wattersisere.co.uk/devshed. Thanks, Watters I'm learning CSS and creating a blog at annieagarwal.com/blog (again, work in progress!) I want to recreate the shadow on the sides of the main container of this blog the url is blocked just google robin cornett and then find the style sheets How do I do that? The blog has two style sheets My style sheet is at annieagarwal.com/blog/wp-content/themes/tofurious/style.css I created a png of the shadow that is 1000px wide at annieagarwal.com/blog/wp-content/themes/tofurious/images/shadow.png But I can't seem to get the code right. I want to use a background image/color along with the container having a drop shadow. I'm trying to get a table inside another table which completely fills the parent table, but I cannot get it to work. The simple piece of code illustrates my problem. The red table is inside the blue table but does not cover the entire cell from top to bottom, but only the centre. I want this table to be streched. Obviously height: 100% doesn't work. Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<body>
<table>
<tbody>
<tr>
<td>
1<br>2<br>3<br>4<br>5<br>
</td>
<td style="background: blue;">
<table style="height: 100%; background: red;">
<tbody>
<tr>
<td style="vertical-align: bottom">
Test
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
If you look at the bottom of the page at www.res-technologies_DOT_com/index.php?jos_change_template=restech2 in both IE and FF, you will see that it looks fine in IE, but in FF the page length is extended by exactly the height of the header image at the top of the page. Trying to figure out what's causing this is driving me nuts! Can anyone help? thx dh Please take a look at the following page. its a simple two column layout http://www.aptlogix.com/testcss.html I need to have both divs side by side of same height independent of the contents in them. how can i stretch the right yellow backgroudn to the full length of the page ?. the yellow color is displayed till the height of the page when i scroll the page the rest of the bottom is white. i have tried that min-height thing with it but no luck. Please advice Regards, DQ I have spent the last two hours trying to fix this problem and it's driving me crazy. I've searched all over google and found all kinds of other height problems but none that are mine. Please help, before I go crazy. The problem: I have a 3 column layout that is set to 100% height with background images for each of the columns that stretches to fill the browser window vertically. It does this beautifully so long as the content that actually fills the columns is smaller than the height of the browser window. The moment you make the browser window smaller than the content in any of the columns and scroll down, the background only stretches in the column with the content. The other two are left shorter and the background stops at literally the height of the browser window only. I'm sure this is most likely a common problem and there's something I just am missing. I'm primarily a designer and I'm still learning CSS so please excuse the fact that my grasp of CSS is still very limited. I don't have the site up yet because I'm still building the code, so I can't provide a link but this is what my code looks like: The HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "(URL address blocked)"> <html xmlns="(URL address blocked)"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>TC</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="container"> <ul id="menu"> <li><img src="img/menu_top.png" /></li> <li><a class="menuhome" href="index.html"></a></li> <li><a class="menushowcase" href="showcase.html"></a></li> <li><a class="menuaboutus" href="aboutus.html"></a></li> <li><a class="menuservices" href="services.html"></a></li> <li><a class="menucontactus" href="contactus.html"></a></li> <li><img src="img/menu_bottom.png" /></li> </ul> <div id="main"> <img src="img/top.png" /><br /><br /> </div> <div id="right_strip"></div> </div> </body> </html> The CSS: Code: body {
margin: 0;
padding: 0;
font-size: small;
font-family: Verdana;
background: #3d352f url("img/right_bg.png") repeat;
}
* html body {
font-size: x-small;
f\ont-size: small;
}
#container {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
#menu {
position: absolute;
margin: 0;
padding: 0;
width: 214px;
min-height: 100%;
background: url("img/left_woodbg.png") repeat-y;
list-style: none;
}
#menu li {
float: left;
display: inline;
margin: 0;
padding: 0;
}
a.menuhome {
display: block;
width: 214px;
height: 57px;
background: url("img/menu_home.png") 0 0 no-repeat;
text-decoration: none;
}
a:hover.menuhome {
background-position: -214px 0;
}
a.menushowcase {
display: block;
width: 214px;
height: 57px;
background: url("img/menu_showcase.png") 0 0 no-repeat;
text-decoration: none;
}
a:hover.menushowcase {
background-position: -214px 0;
}
a.menuaboutus {
display: block;
width: 214px;
height: 57px;
background: url("img/menu_aboutus.png") 0 0 no-repeat;
text-decoration: none;
}
a:hover.menuaboutus {
background-position: -214px 0;
}
a.menuservices {
display: block;
width: 214px;
height: 57px;
background: url("img/menu_services.png") 0 0 no-repeat;
text-decoration: none;
}
a:hover.menuservices {
background-position: -214px 0;
}
a.menucontactus {
display: block;
width: 214px;
height: 57px;
background: url("img/menu_contactus.png") 0 0 no-repeat;
text-decoration: none;
}
a:hover.menucontactus {
background-position: -214px 0;
}
#right_strip {
position: absolute;
margin: 0 0 0 844px;
background: url("img/right_woodbg.png") repeat-y;
width: 17px;
min-height: 100%;
}
#main {
position: absolute;
margin: 0 0 0 214px;
background: #f0deb6 url("img/center_bg.png") repeat;
width: 630px;
min-height: 100%;
text-align: left;
}
Fixed. Having coded using tables for the past 5 years, I'm coding my first site using pure CSS (hold back the laughter) ... I'm new to change. In any case ... I'm attempting to setup a homepage that has a fixed width and height. So far I've got a one-column header working fine. Beneath the one-column header I wish to have three columns with--dare I say it Web 2.0ish rounded corner cells--However the caveat is that these three cells need to all be a fixed height to go along with the page design. After two days of research, coffee, banging my head against my desk, I haven't been able to figure this one out. I am using an image at the top of each cell and an image at the bottom of each cell, but cannot get the cells to maintain a specific height. Any help would be appreciated: CSS: Code: /*<agl.folder "general">*/
body {
color: #000;
font 76%/1.5em "Lucida Grande", Verdana, Geneva, Helvetica, sans-serif;
margin: 0;
padding: 0;
}
.footer { color: #7f7f7f; font-size: 12px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; text-decoration: none; text-align: center; }
.footer a:link { color: #7f7f7f; font-size: 12px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; text-decoration: none; text-align: center; }
.footer a:visited { color: #7f7f7f; font-size: 12px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; text-decoration: none; text-align: center; }
.footer a:hover { color: #8da7fb; font-size: 12px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; text-decoration: none; text-align: center; }
.user_links a:link { color: #7f7f7f; font-size: 14px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; text-decoration: none; }
.user_links a:visited { color: #7f7f7f; font-size: 14px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; text-decoration: none; }
.user_links a:hover { color: #8da7fb; font-size: 14px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; text-decoration: none; }
.text { color: #000; font-size: 12px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; text-decoration: none; }
.text a:link { color: #7f7f7f; font-size: 12px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; text-decoration: none; }
.text a:visited { color: #7f7f7f; font-size: 12px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; text-decoration: none; }
.text a:hover { color: #8da7fb; font-size: 12px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; text-decoration: none; }
a:link { color: #7f7f7f; text-decoration: none; }
a:visited { color: #7f7f7f; }
a:hover { color: #8da7fb; text-decoration: none; }
/*</agl.folder>*/
#frame {
width: 965px;
margin: 0 auto;
}
#header {
background-color: #fff;
max-width: 965px;
margin-top: 10px;
}
#content {
position: relative;
max-width: 965px;
height: 200px;
}
#footer {
background-color: #fff;
position: absolute;
top: 265px;
width: 965px;
}
/*<agl.folder "box">*/
#portfolio {
position: absolute;
left: 0px;
top: 0px;
width: 475px;
height: 200px;
}
.portbox {
background-color: #ffffff;
border: solid 1px #b6b6b6;
padding: 4px;
}
.portbox:before {
content: url(../images/homepage/portfolio.png);
display: block;
line-height: 0.1;
margin: -5px -5px -5px;
}
.portbox:after{
content: url(../images/homepage/portfolio_bottom.png);
display: block;
line-height: 0.1;
margin: -5px -5px -5px;
}
/*</agl.folder>*/
/*<agl.folder "methodologies">*/
#methodology { position: absolute; left: 482px; top: 0; width: 237px; height: 200px; }
.methbox { background-color: #ffffff; max-height: 200px; border: solid 1px #b6b6b6; padding: 4px; }
.methbox:before {
content: url(../images/homepage/methodology.png);
display: block;
line-height: 0.1;
margin: -5px -5px -5px;
}
.methbox:after{ height: 200px; content: url(../images/homepage/meth_bottom.png); display: table-row; margin: -5px; }
/*</agl.folder>*/
/*<agl.folder "design">*/
#design {
position: absolute;
left: 726px;
top: 0px;
width: 235px;
height: 125px;
}
.designbox {
background-color: #ffffff;
border: 1px solid #b6b6b6;
padding: 4px;
}
.designbox:before {
content: url(../images/homepage/design.png);
display: block;
line-height: 0.1;
margin: -5px -5px -5px;
}
.designbox:after{
content: url(../images/homepage/design_bottom.png);
display: block;
line-height: 0.1;
margin: -5px -5px -5px;
}
/*</agl.folder>*/
/*<agl.folder "solutions">*/
#solutions {
position: absolute;
left: 726px;
top: 135px;
width: 235px;
height: 125px;
}
.solutionsbox {
background-color: #ffffff;
border: 1px solid #b6b6b6;
padding: 4px;
}
.solutionsbox:before {
content: url(../images/homepage/solutions.png);
display: block;
line-height: 0.1;
margin: -5px -5px -5px;
}
.solutionsbox:after{
content: url(../images/homepage/design_bottom.png);
display: block;
line-height: 0.1;
margin: -5px -5px -5px;
}
/*</agl.folder>*/
h2 { font-size: 1.5em; font-weight: bold; }
HTML: Code: <!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"> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <title>Test CSS</title> <link href="css/home_layout.css" rel="stylesheet" type="text/css" media="all" /> </head> <body> <div id="frame"> <div id="header"> <p align="right"><span class="user_links"><a href="(EmptyReference!)">Login</a> | <a href="(EmptyReference!)">Register</a> | <a href="(EmptyReference!)">Contact</a></span></p> <img src="images/tabs.jpg" alt="" height="43" width="965" border="0" vspace="3" livesrc="images/tabs.psd" /><img src="images/homepage/flash_header.jpg" alt="" height="275" width="965" border="0" vspace="5"/><br /> </div> <div id="content"> <div id="portfolio"> <div class="portbox"> <p align="center"><img src="images/homepage/screenshots.jpg" usemap="#screenshotsc1fd8d76" livesrc="images/homepage/screenshots.psd" alt="" height="137" width="426" / border="0"><map name="screenshotsc1fd8d76"><area shape="rect" coords="290,9,418,129" href="http://www.pilatesmovementnyc.com" alt="Fitness Center Pilates New York City" target="_blank" /><area shape="rect" coords="146,9,281,129" href="http://www.emmestyle.com" alt="Emme Super Model" target="_blank" /><area title="Healthy Living NYC" shape="rect" coords="3,11,130,132" href="http://www.healthylivingnyc.com" alt="Healty Lliving NYC" target="_blank" /></map></p> </div> </div> <div id="methodology"> <div class="methbox"> <p><img src="(EmptyReference!)" alt="" height="36" width="36" align="left" border="0" csnew="csnew" cssot="ps" livesrc="(EmptyReference!)" /><span class="text">Step one is the first step in this whole thing ok. so don't start yet until you know what the first step is</span><br /> <img src="(EmptyReference!)" alt="" height="36" width="36" align="left" border="0" csnew="csnew" cssot="ps" livesrc="(EmptyReference!)" /><span class="text">Step one is the first step in this whole thing ok. so don't start yet until you know what the first step is</span><br /> <img src="(EmptyReference!)" alt="" height="36" width="36" align="left" border="0" csnew="csnew" cssot="ps" livesrc="(EmptyReference!)" /><span class="text">Step one is the first step in this whole thing ok. so don't start yet until you know what the first step i</span>s<br /> <img src="(EmptyReference!)" alt="" height="36" width="36" align="left" border="0" csnew="csnew" cssot="ps" livesrc="(EmptyReference!)" /><span class="text">Step one is the first step in this whole thing ok. so don't start yet until you know what the first step is</span></p> </div> </div> <div id="design"> <div class="designbox"> <p></p> </div> </div> <div id="solutions"> <div class="solutionsbox"> <p></p> </div> </div> <div id="footer"> <div class="footer"> <a href="(EmptyReference!)">Home</a> | <a href="(EmptyReference!)">Portfolio</a> | <a href="(EmptyReference!)">Web</a> | <a href="(EmptyReference!)">Marketing</a> | <a href="(EmptyReference!)">Advertising</a> | <a href="(EmptyReference!)">Identity</a> | <a href="(EmptyReference!)">Hosting</a> | <a href="(EmptyReference!)">Profile</a><br> <a href="(EmptyReference!)">Design</a> | <a href="(EmptyReference!)">Technology</a> | <a href="(EmptyReference!)">Business Solutions</a><br> <a href="(EmptyReference!)">Contact Us</a> | L<a href="(EmptyReference!)">ogin to Your Account</a><br> Copyright 2007 Website Development Enterprises, LLc </div> </div> </div> </div> </body> </html> |
|||||||