|
CSS - Align Content In Div To The Bottom
So I have a 3-column layout in CSS and I'd like to have the content in the right-most column to be align to the bottom, like so:
Code: | LEFT | MIDDLE | | | (top) | | | | | | | | | | | | | | | | | | | | | | RIGHT | | | | (bottom) | Any idea how to do it? Thx! Similar TutorialsHi there, I am having trouble aligning 2 divs to the bottom. I have a left and right side div for a header area, however the right side is taller than the left, so it is leaving a gap at the bottom of both sides. This is my CSS: PHP Code: #nav_wrapper{ } #nav_left{ width: 620px; padding-left: 20px; float:left; } #nav_right{ float:right; text-align: right; padding-right: 20px; } #member_login{ width: 180px; padding: 10px; font-family:Verdana, Arial, Helvetica, sans-serif; color: #373737; font-size: 11px; border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid #ffffff; background-color: #f6f6f6; line-height: 200%; } #member_login a{ font-family:Verdana, Arial, Helvetica, sans-serif; color: #373737; font-size: 11px; font-weight:bold; text-decoration:underline; } and this is my HTML: PHP Code: <div id="nav_wrapper"> <div id="nav_left"> left content <div id="nav_right"> <div id="member_login"> right content </div> </div> </div> Any ideas? I have three divs. The main div contains the background color and border. The second div has text, and The third has an img. What I want is for the image to sit at the bottom of the main div and stay there when the font-size is increased. I want the text to stick to the top of the main div. Can someone please help me. I have attached the code below it is all messed up cause I have been trying everything I can think of. ".abouttestcontainer { width : 100%; float : left; border-top : 1px solid #cccccc; border-bottom : 1px solid #cccccc; border-left : 1px solid #cccccc; color : #001F56; background-color : #DDEADE; border : 1px solid black; } .abouttest { float : left; width : 450px; height : 100%; padding : 10px 50px 0px 10px; text-align : left; font-size : 12px; border : 1px solid black; margin-right : 10px; } .aboutimage { border : 1px solid black; position : relative; display : inline; vertical-align : bottom; }" ok so i have a photo gallery and the images vary in height. and so instead of having them defaulted to top aligned, i'm try to figure out how to get them to bottom align. anyone have any ideas or articles i can check out? thx I have a div container that changes size depending on the information inside it... i also have a navi bar that is on everysingle page.... and i want it to always be 20px from the bottom.... i tried vertical-align:bottom and put a margin-bottom:20px on it... but the vertical-align didnt seem to work... i must be missing something How would I align a div to the true bottom (by this i mean below the viewport. at current i use: Code:
.footer
{
background-color:#FFFFFF;
width:100%;
height:20px;
color:#000000;
position:absolute;
bottom:0px;
}
but this just aligns my div to the bottom of my window, not the bottom of the page, if i then need to scroll down it is visible that its not at the bottom of the page. any ideas? Ok, I've taken many different approaches to this and I can't find a solution. I'm looking to make my footer align to the bottom of the browser window. For some reason I can't so I figured I'd post up my code here and get a different set of eyes to scan over it and help me out. Here's the code: 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" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<!--CSS-->
<link rel="stylesheet" href="structure.css" type="text/css" media="screen" />
<link rel="stylesheet" href="print.css" type="text/css" media="screen" />
<title> MY TITLE GOES HERE! </title>
</head>
<body>
<div id="container">
<div id="nav_container">
MY MENU STUFF GOES HERE!
</div>
<div id="content">
<div id="left_column">
BLAH BLAH all my content goes here!
</div>
<div id="right_column">
ALL OF MY RIGHT CONTENT HERE!
</div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
and this is the stylesheet driving the page: Code:
body {
background-image: url("gfx/bg.jpg");
background-repeat: repeat-y;
background-position: center;
background-color: #FFFFFF;
margin: 0px;
font-family: Tahoma;
font-size: 13px;
}
/*Page Structure --------------------------------------*/
#container {
background-color: #FFFFFF;
position: absolute;
left: 50%;
margin-left: -394px;
width: 790px;
height: 100%;
border: 1px solid Black;
border-top: 0px;
border-bottom: 0px;
}
#content {
background-color: #FFFFFF;
width: 790px;
float: left;
margin: 0px;
padding: 0px 0px 0px 0px;
}
#left_column {
width: 390px;
float: left;
display: inline;
margin: 15px 0 0 20px;
padding: 0px 0px 15% 4px;
border-right: 1px solid #DFDFDF;
}
#right_column {
width: 326px;
float: left;
margin: 15px 0 0 0px;
padding-bottom: 10%
}
/*Headers and Flash content -----------------------------*/
#header {
background-image: url("gfx/header.jpg");
width: 790px;
height: 101px;
float: left;
line-height: 1000px;
overflow: hidden;
}
#home_header {
background-image: url("gfx/home_header.jpg");
background-repeat: no-repeat;
background-color: #FFFFFF;
width: 380px;
height: 150px;
margin: 0px 0 10px 0px;
float: left;
line-height: 1000px;
overflow: hidden;
}
#recent_posts {
background-image: url("gfx/recent_posts.jpg");
background-repeat: no-repeat;
width: 368px;
height: 30px;
margin-left: 3px;
float: left;
text-indent: -1000px;
overflow: hidden;
}
#latest_threats {
background-image: url("gfx/latest_threats.jpg");
background-repeat: no-repeat;
width: 368px;
height: 30px;
margin: 25px 0 0 3px;
float: left;
text-indent: -1000px;
overflow: hidden;
}
#recommended_sites {
background-image: url("gfx/recommended_sites.jpg");
background-repeat: no-repeat;
width: 215px;
height: 30px;
margin: 25px 0 0 3px;
float: left;
text-indent: -1000px;
overflow: hidden;
}
#flash {
background-color: #000000;
width: 790px;
height: 120px;
float: left;
vertical-align: middle;
}
/*Navigation --------------------------*/
#nav_container {
background-image: url("gfx/nav_bg.jpg");
background-color: #FFFFFF;
width: 790px;
height: 24px;
float: left;
text-align: right;
}
/*News Structure --------------------------*/
#news_header {
background-color: #FFFFFF;
width: 390px;
height: auto;
float: left;
font-size: large;
font-weight: bold;
color: #009AFF;
margin: 3px 0 2px 0;
}
#news_post {
background-color: #FFFFFF;
width: auto;
height: auto;
float: left;
color: Gray;
margin: 0px;
}
#news_date {
background-color: #FFFFFF;
width: auto;
height: auto;
float: left;
font-size: 11px;
font-style: italic;
color: Gray;
margin-left: 5px;
}
#news_content {
background-color: #FFFFFF;
width: 390px;
float: left;
margin-top: 20px;
}
/*Lists----------------------------------*/
#post_list {
background-image: url("gfx/gradient.jpg");
width: 371px;
float: left;
margin: 2px 0 0 0px;
list-style-type: none;
padding: 0px 0px 10px 0px;
}
#post_list li {
background-color: transparent;
padding: 5px;
border-bottom: 1px solid #EDEEEE;
}
#threats_list {
background-image: url("gfx/gradient.jpg");
width: 371px;
float: left;
margin: 2px 0 0 0px;
list-style-type: none;
padding: 0px 0px 10px 0px;
}
#threats_list li {
background-color: transparent;
list-style-image: url("gfx/red_arrow2.jpg");
list-style-position: inside;
padding: 5px;
border-bottom: 1px solid #EDEEEE;
}
/*Footer--------------------------------------------------*/
#footer {
background-image: url("gfx/footer.jpg");
background-repeat: no-repeat;
background-color: #FFFFFF;
width: 790px;
height: 125px;
float: left;
margin-top: 40px;
}
Any help or insight is greatly appreciated. I just made the jump to complete CSS layouts about 3 days ago so I'm still really new to this Thanks in advance, AA. In the main page here, there look to be 2 columns. How can I align all the smaller images with the bottom of the big image? Sometimes there are 3 photos, sometimes there are 6. At the moment it looks like it is all in divs. Is there a way to do it in CSS with the current code. The HTML looks a bit messy: http://www.truly organic foods.com/cashew-cacao-cluster-275g.php Hi all! I try to create a website which of itself has no scrollbar. The website needs to be 100% height of the browser. The website contains a div (with overflow: auto which starts at a certain height and needs to end at the bottom of the browser. When there is a short text, the should be no scrollbar, when there is a large text, there should appear a scrollbar. I got quite far with this as you can see below. However this script works in Firefox, Opera & Safari for Windows, it doesn't in Internet Explorer. With a large text it just makes the page larger and there is no scrollbar. Does anyone know how to fix this for at least IE6 & IE7? Thanks! [PHPNET] <html> <head> <title>TEST</title> </head> <body style="width: 100%; height: 100%; padding: 0; margin: 0; overflow: auto;"> <div style="top: 200px; bottom: 0; background: #ff0000; display: block; position: absolute; width: 300px; overflow: auto; left: 50%; margin-left: -150px;"> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> </div> </body> </html>[/PHPNET] I have a container div that has a height of 500px. My page content only takes up about 300px and I want a copyright notice at the bottom of the page. So I am trying to get the copyright div to bottom align on the container div. In FF, position:absolute;bottom:0; works but that doesn't work in IE which for some reason places the div outside the container div. Any tips on how to do this? EDIT: hmm the embedded image isn't showing for me... here's a link: http://i34.tinypic.com/dh7qr6.jpg Referencing the attached image, any ideas about how to achieve this layout using floats (rather than tables)? The part that's giving me trouble is the bottom-left set of links, that should be aligned to the bottom of the container. Also, the width of the container is not fixed - it shouldn't have width specified at all, and expand to fit it's contents. I'm not worried at all about fonts, borders, padding, colors, etc, just trying to achieve the attached macro concept using CSS, best-practices and w/out tables. This layout is easily achieved using tables; the following markup (using tables) will render and behave as described - regardless of the size of the links, the size of the image, or the length of the description, but obviously I'd like to know how to do this with best practices of floating divs. 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" xmlns:v="urn:schemas-microsoft-com:vml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="noindex, nofollow" />
<title>Title</title>
<style type="text/css">
td {
vertical-align : top;
}
td.links {
text-align : right;
}
td.links.bottom {
vertical-align : bottom;
}
td.description {
width : 150px;
}
</style>
</head>
<body>
<table>
<tr>
<td class="links">
<a href="#">Link</a>
<br />
<a href="#">Another Link</a>
</td>
<td rowspan="2">
<img src="http://static.howstuffworks.com/gif/code-breakers-1.jpg" />
</td>
<td class="description" rowspan="2">
<h1>Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</td>
</tr>
<tr>
<td class="bottom links">
<a href="#">Link</a>
<br />
<a href="#">Another Link</a>
</td>
</tr>
</table>
</body>
</html>
TYIA for any suggestions. reflectionstour.com ^ Site I am working on. So I have these nice little gifs that are curving the corners. In FF3 they work fine and it is XHTML/CSS 2.1 valid. Which of course means that they are not working right in IE 7 (haven't bothered testing 8, as I run Linux and it is hard enough to locate an IE7 to test it on.) So I have tried a few different searches and don't really know what to even call it. And no webdev tool bar on IE to help tell me. "vertical-align: bottom IE7 ~padding" "bottom padding issues IE7" I would rather not do separate CSS sheets as it is a simple site, there shouldn't be an issue here. Thanks! Wil I have a css layout I'm working, that is all divs (my first time doing this without tables). My page consists of all divs, and then the body is a table for displaying date from a database. My problem is that I have the footer positioned absolutely at the bottom of the page, which is what I want, EXCEPT when the table extends longer and the user needs to scroll down. If the table does not extend the full height of the screen, then I want the footer at the bottom of the screen, but if the table extends past the bottom of the screen, I need to footer to be at the end of the table. I hope that makes sense. CSS Tags -- Just a portion of them: Code:
body {
margin: 0px 0px 0px 0px;
background-color: #E7F1FD;
font-family: Tahoma, Verdana, Arial, sans-serif;
height: 100%;
}
/*This is the main body of the page and contains the db data*/
#pwdb_body {
background-color: #E7F1FD;
border: 2px solid #FFF;
width: 100%;
height: 100%;
position: absolute;
top: 165px;
}
/*Footer */
#left_footer {
background-image:url(images/bar_header2.jpg);
width:100%;
height:36px;
position:absolute;
bottom: 0px;
}
My DIVS (partial): Code: <!-- START BODY --> <div id="pwdb_body"> <table width=100% border=1 name="main_body" bordercolor="#000000" style="border-collapse: collapse;" cellspacing=0 cellpadding=1> <tr> <td>...table data...</td> </tr> </table> </div> <div id="left_footer"><img src="images/index_02.gif"/></div> I have attached a screenshot of what I'm talking about. The footer bar is highlighted in a red box, and the table bottom is pointed out by a red arrow. Hello. I'm having an impossible time trying to get my page to behave properly. First, here's a link to the testing site: http://www.tromadance.com/hoffman_test/index.php The black left/right borders are supposed to go down to the bottom of the page (as long or short as that may be, depending on the content). Whichever is longer between the left side content or the right side content should be in charge of "stretching" the page. There is also a footer that should remain at the bottom, which is not even being shown... I added borders to some of the divs to try to see what was going on. It looks like a mess, but I'm not sure what i am doing wrong!... Here is the CSS, followed by the HTML... CSS: Code: /* CSS Document */
html, body {
background-color: #8A1410;
font-family: Geneva, Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
color: #000;
height: 100%;
}
p {
font-size: .8em;
}
#container {
background: #EC1D25;
width: 800px;
margin: auto;
padding: 0px;
text-align: left;
border-left: 2px solid #000;
border-right: 2px solid #000;
overflow: hidden;
height: 100%;
}
#header {
background-color: #EC1D25;
width: 800px;
height: 177px;
background: url(../images/header_top.jpg) top center no-repeat;
margin-bottom: 0px;
padding-bottom: 0px;
margin-top: 0px;
}
#nav {
background-color: #000;
color: #FFF;
text-align: center;
width: 100%;
height: 50px;
}
#nav p {
margin-top: 30px;
}
#sidebar {
background-color: #EC1D25;
width: 270px;
min-height: 86px;
float: left;
margin-top: 20px;
text-align: center;
margin-left: 10px;
border: 1px solid #999;
}
#donate {
background-color: #000;
width: 270px;
height: 500px;
}
#maincontent {
background-color: #7AD3F7;
margin-top: 20px;
margin-right: 10px;
height: 100%;
width: 500px;
float: right;
border: 1px solid #66F;
}
#spacer {
clear: both;
border: 1px solid #FF0;
}
#footer {
font-size: .7em;
text-align: center;
height: 20px;
margin-top: 10px;
}
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>TROMADANCE!</title>
<link href="includes/styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="nav"><?php include("includes/nav.php") ?></div>
<div id="sidebar">
<object width="270" height="215"><param name="movie" value="http://www.youtube.com/v/zQR7sDpGegw&hl=en&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/zQR7sDpGegw&hl=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="270" height="215"></embed>
</object>
Tromadance 10th Anniversary PSA
<p>
<div id="donate">
</div>
</p><br />
<p>asdsadsa</p>
</div>
<div id="maincontent">
<p>SAMPLE TEXT</p>
</div>
<div id="spacer"></div>
<div id="footer"><?php include("includes/footer.php") ?></div>
</div>
</body>
</html>
Thank you in advance for any help that can be offered!!!... I want a footer that's at the bottom of the page. If there isn't much content that means it should be at the bottom of the screen and there will be no scrollbars. If there is tons of content then it should show after the content and only be visible if the user scrolls to the bottom of the page. This code shows what I'm after and the problem I'm hitting. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>title</title>
<style type="text/css">
body, html {margin: 0; padding: 0; height: 100%}
#top {background: red; position: absolute; top: 0px; left: 0px; height: 50px; right: 0px;}
#content {background: orange; margin: 50px 200px;}
#leftNav {position: absolute; left: 0px; top: 50px; bottom: 50px; width: 200px; background: yellow}
#rightNav {position: absolute; right: 0px; top: 50px; bottom: 50px; width: 200px; background: cyan}
#bottom {background:green; position: absolute; bottom: 0px; left: 0px; height: 50px; right: 0px;}
</style>
</head>
<body>
<div id="content">
Content<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 id="leftNav">
LeftCol
</div>
<div id="rightNav">
rightNav
</div>
<div id="top">
I'm at the top.
</div>
<div id="bottom">
I'm at the bottom.
</div>
</body>
</html>
Appreciate your thoughts. I now am fixing it with tables.... thanks for the forum! [IMG]cater-express dot com/IE7.png[/IMG] An image of IE7 and IE6 of my newly relaunched website - I actively have: html,body { text-align: center } #content { width: 400px; margin: 0 auto; text-align: left } </style> __________ it does not work... please help bring content up to top in "content" ______ I wish I could just do all the cooking and not the coding! Thanks for any help! Hi there, I have 2 main divs.. one left for navigation and one to the right for the content. For some reason, the right hand side one is displaying content at the bottom where the left div's content ends, instead of at the top. This is my code. Any help on what I have done wrong would be great! PHP Code: #main_left{ width: 238px; float:left; background-color: #EBE1D1;} #main_left_inside{ padding: 10px;} #main_content{ margin-left: 248px; background-color: #ffffff;} #main_content_inside{ padding: 10px;} Greetings, I have a 3 column layout with a header, nav bar, content space and footer on the center column, making the center column have 4 rows. The content div's height is set to auto and it's overflow to auto so that when the browser is maximized on higher resolutions it will expand and contain the text without a scrollbar. alternatively it will give a scroll bar if the content div is shrunk below 300px. however the auto height on the content div is causing it to take up more room than necessary. if the window is shrunken down, the content text will leak out over the footer bar and beyond. Before i post code does anyone have any suggestions on what i should be looking for? If code is wanted lemme know. Hello - I'm having trouble with the layout of a site I'm working on. Here's the site in question: http://www.americanidiotsband.com/ If you look at it in anything up to 1024x768, it's fine. But if you go higher than that (say, 1280x1024 resolution), then the main (black) part of the page goes only as far down as the content that is filling it. What SHOULD happen is that the black background should span all the way to the bottom, no matter how much content is inside it... Here is a link to the stylesheet that I made up: http://www.americanidiotsband.com/styles.css I'm sure I'm doing something wrong, and I'm hoping that someone could help me correct this. Thanks in advance for any help that can be offered!... hi, I am fairly new to css and working on a website with a complete css layout for the first time, one I got from dreamweaver. I thought things were going great because I did all my testing in Firefox (like a good boy) but then I tried to test it in Internet Explorer 6 and alot if not all of my webpages have the text positioned at the bottom instead of the top of a page. Here is a link: http://www.jcstrategies.com/jeff/featured_listings.php CSS CODE ----------------------------------------------------------- /***********************************************/ /* emx_nav_left.css */ /* Use with template Halo_leftNav.html */ /***********************************************/ /***********************************************/ /* HTML tag styles */ /***********************************************/ body{ font-family: Arial,sans-serif; color: #333333; line-height: 1.166; margin: 0px; padding: 0px; background: #cccccc url(./images/bg_grad.jpg) fixed; } /******* hyperlink and anchor tag styles *******/ a:link, a:visited{ color: #005FA9; text-decoration: none; } a:hover{ text-decoration: underline; } /************** header tag styles **************/ h1{ font: bold 120% Arial,sans-serif; color: #334d55; margin: 0px; padding: 0px; } h2{ font: bold 114% Arial,sans-serif; color: #006699; margin: 0px; padding: 0px; } h3{ font: bold 100% Arial,sans-serif; color: #334d55; margin: 0px; padding: 0px; } h4{ font: 100% Arial,sans-serif; color: #333333; margin: 0px; padding: 0px; } h5{ font: 100% Arial,sans-serif; color: #334d55; margin: 0px; padding: 0px; } /*************** list tag styles ***************/ ul{ list-style-type: square; } ul ul{ list-style-type: disc; } ul ul ul{ list-style-type: none; } /********* form and related tag styles *********/ form { margin: 0; padding: 0; } label{ font: bold 1em Arial,sans-serif; color: #334d55; } input{ font-family: Arial,sans-serif; } /***********************************************/ /* Layout Divs */ /***********************************************/ #pagecell1{ position:absolute; top: 112px; left: 2%; right: 2%; width:95.6%; background-color: #ffffff; } #tl { position:absolute; top: -1px; left: -1px; margin: 0px; padding: 0px; z-index: 100; } #tr { position:absolute; top: -1px; right: -1px; margin: 0px; padding: 0px; z-index: 100; } #masthead{ position: absolute; top: 0px; left: 2%; right: 2%; width:95.6%; } #pageNav{ float: left; width:178px; padding: 0px; background-color: #F5f7f7; border-right: 1px solid #cccccc; border-bottom: 1px solid #cccccc; font: small Verdana,sans-serif; } #content{ padding: 5px 10px 5px 5px; margin:0px 0px 0px 179px; border-left: 1px solid #ccd2d2; } /***********************************************/ /* Component Divs */ /***********************************************/ #siteName{ margin: 0px; padding: 16px 0px 8px 0px; color: #ffffff; font-weight: normal; } /************** utility styles *****************/ #utility{ font: 75% Verdana,sans-serif; position: absolute; top: 16px; right: 0px; color: #919999; } #utility a{ color: #ffffff; } #utility a:hover{ text-decoration: underline; } /************** pageName styles ****************/ #pageName{ padding: 0px 0px 14px 10px; margin: 0px; border-bottom:1px solid #ccd2d2; } #pageName h2{ font: bold 175% Arial,sans-serif; color: #000000; margin:0px; padding: 0px; } #pageName img{ position: absolute; top: 0px; right: 6px; padding: 0px; margin: 0px; } /************* globalNav styles ****************/ #globalNav{ position: relative; width: 100%; min-width: 640px; height: 32px; color: #cccccc; padding: 0px; margin: 0px; background-image: url(./images/glbnav_background.gif); } #globalNav img{ margin-bottom: -4px; } #gnl { position: absolute; top: 0px; left:0px; } #gnr { position: absolute; top: 0px; right:0px; } #globalLink{ position: absolute; top: 6px; height: 22px; min-width: 640px; padding: 0px; margin: 0px; left: 10px; z-index: 100; } a.glink, a.glink:visited{ font-size: small; color: #000000; font-weight: bold; margin: 0px; padding: 2px 5px 4px 5px; border-right: 1px solid #8FB8BC; } a.glink:hover{ background-image: url(./images/glblnav_selected.gif); text-decoration: none; } .skipLinks {display: none;} /************ subglobalNav styles **************/ .subglobalNav{ position: absolute; top: 84px; left: 0px; /*width: 100%;*/ min-width: 640px; height: 20px; padding: 0px 0px 0px 10px; visibility: hidden; color: #ffffff; } .subglobalNav a:link, .subglobalNav a:visited { font-size: 80%; color: #ffffff; } .subglobalNav a:hover{ color: #cccccc; } /*************** search styles *****************/ #search{ position: absolute; top: 5px; right: 10px; z-index: 101; } #search input{ font-size: 70%; margin: 0px 0px 0px 10px; } #search a:link, #search a:visited { font-size: 80%; font-weight: bold; } #search a:hover{ margin: 0px; } /************* breadCrumb styles ***************/ #breadCrumb{ padding: 5px 0px 5px 10px; font: small Verdana,sans-serif; color: #AAAAAA; } #breadCrumb a{ color: #AAAAAA; } #breadCrumb a:hover{ color: #005FA9; text-decoration: underline; } /************** feature styles *****************/ .feature{ padding: 0px 0px 10px 10px; font-size: 80%; min-height: 200px; height: 200px; } html>body .feature {height: auto;} .feature h3{ font: bold 175% Arial,sans-serif; color: #000000; padding: 30px 0px 5px 0px; } .feature img{ float: left; padding: 0px 10px 0px 0px; } /*************** story styles ******************/ .story { padding: 10px 0px 0px 10px; font-size: 80%; } .story h3{ font: bold 125% Arial,sans-serif; color: #000000; } .story p { padding: 0px 0px 10px 0px; } .story a.capsule{ font: bold 1em Arial,sans-serif; color: #005FA9; display:block; padding-bottom: 5px; } .story a.capsule:hover{ text-decoration: underline; } td.storyLeft{ padding-right: 12px; } /************** siteInfo styles ****************/ #siteInfo{ clear: both; border-top: 1px solid #cccccc; font-size: small; color: #cccccc; padding: 10px 10px 10px 10px; margin-top: 0px; } #siteInfo img{ padding: 4px 4px 4px 0px; vertical-align: middle; } /************ sectionLinks styles **************/ #sectionLinks{ margin: 0px; padding: 0px; } #sectionLinks h3{ padding: 10px 0px 2px 10px; border-bottom: 1px solid #cccccc; } #sectionLinks a:link, #sectionLinks a:visited { display: block; border-top: 1px solid #ffffff; border-bottom: 1px solid #cccccc; background-image: url(./images/bg_nav.jpg); font-weight: bold; padding: 3px 0px 3px 10px; color: #21536A; } #sectionLinks a:hover{ border-top: 1px solid #cccccc; background-color: #DDEEFF; background-image: none; font-weight: bold; text-decoration: none; } /************* relatedLinks styles **************/ .relatedLinks{ margin: 0px; padding: 0px 0px 10px 10px; border-bottom: 1px solid #cccccc; } .relatedLinks h3{ padding: 10px 0px 2px 0px; } .relatedLinks a{ display: block; } /************* relatedLinks2 styles **************/ .relatedLinks2{ margin: 0px; padding: 10px 0px 10px 1px; border-bottom: 1px solid #cccccc; } .relatedLinks h3{ padding: 10px 0px 2px 0px; } .relatedLinks a{ display: block; } /**************** advert styles *****************/ #advert{ padding: 10px; } #advert img{ display: block; } /********************* end **********************/ ANY IDEAS???? |
|||||||