|
CSS - Centering Absolute Positioned Wrappers
It seems strange to me if I begin a page with: body{text-align: center} and a following div with a wrapper: #wrapper{position: absolute; top: 0px} that this would push everything to the left or the right depending on the browser.
It seems the logical thing to occur would be that the body tag would shift everything to the center and the wrapper would simply press up to the top of the screen. My problem is fixed simply by changing the position to relative for the wrapper, but I'm curious why that's the case. Thanks. Similar Tutorialshey guys JonnoWalmsley.com is giving me grief. I have a nav bar which is position:absolute; bottom:0px (so stuk to the bottom of the screen at all times, with the appropriate z-index etc). It works fine on FF, but IE seems to be starting from the center of the page, which effectively pushes the nav bar over to the right, and partially off the screen on smaller screens. Code: <div style="position:fixed; bottom:0px; background-color:#0a2a1a; width:899px;">...nav links...</div> I need IE to render the same as FF, and start the nav panel from the left. Any ideas? IE Screenshot FF Screenshot I'm using a relative-positioned div as a container for an image, which is absolute-positioned. I'm doing this so that the image will automatically scale down to fit inside the containing div (nothing else I've tried has done this for me- so if there is another way to achieve this, please fill me in). This part works fine, but the image isn't as wide as the containing div, so I would like to center the image inside the div- but I can't seem to get it to work. I tried the obvious text-align:center in the div. That actually worked... kinda. The image's left-side was in the center of the div, but obviously isn't the 'centering' that I'm looking for. I then tried setting margin-left and margin-right on the image to auto, and that did nothing. I suspect that the fact that I have my image absolute-positioned is the culprit here, but I don't know how to get around it- or IF I can get around it without drastically changing my approach. Admittedly, the container div resides inside a table cell. I know that isn't the best practice, but I spent so much time trying a div-only approach only to waste time and become frustrated that I went back to what I know works- at least for now. I tried removing the container div from the table and inserting the image directly to the table cell- but encountered more issues with the sizing of the image. Essentially, my code is something like this: CSS: Code:
td#CONTENTDISPLAY
{
width: 100%;
height: 100%;
text-align: left;
vertical-align: top;
padding: 0 0 0 0;
margin: 0 0 0 0;
}
div#CONTENTBANNER
{
position: relative;
height: 100%;
padding: 0 0 0 0;
}
img.CONTENTIMG
{
position: absolute;
height: 100%;
}
HTML: Code:
...
<td id="CONTENTDISPLAY">
<div id="CONTENTBANNER">
<img class="CONTENTIMG" />
</div>
</td>
...
Nothing flashy, I know. One thing I should mention, however, is that the image is ALWAYS placed inside the container div using a Javascript function (it's a dynamic image). I doubt that makes a difference, but I figure it's worth mentioning. Can anyone help point me in the right direction? Thanks! - skubik We don't use position absolute for anything else on our site, but it seems that our drop down still goes under some content. Here is the css: Code:
#nav {
background-image: url('../images/nav-full-bg.jpg');
background-repeat: repeat-x;
width: 967px;
height: 69px;
padding: 0;
margin: 0;
overflow: hidden;
}
#nav, #nav ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
line-height: 1;
}
#nav a {
display:block;
padding: 11px 12px 13px 12px;
font-weight:bold;
font-size: 13px;
font-family: "Trebuchet MS", Bitstream Vera Sans, Verdana;
color: #626262;
margin: 0;
text-decoration: none;
}
#nav li { /* all list items */
float: left;
}
#nav li ul { /* second-level lists */
position:absolute;
width: 200px;
left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
border-bottom: 2px solid #808080;
background-image: url(../images/davidpng2.png);
z-index: 900;
}
#nav ul li {
float: left;
width: 10em; /* width needed or else Opera goes nuts */
}
#nav li ul li a{
padding:5px;
display: block;
width: 190px;
color: #000;
font-weight:normal;
font-family:verdana;
font-size:11px;
}
#nav li ul li a:hover{
background-color:#a2c9f4;
}
#nav li ul ul { /* third-and-above-level lists */
margin: -23px 0 0 200px;
;
}
#nav li ul li ul li a{
display: block;
}
#nav li:hover ul ul, #nav li.sfhover ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}
I'm trying to place an absolutely positioned layer over other layers. It works in everything but Windows IE (surprise). If you remove the 'main' <DIV> it works fine (unfortunately, that is not an option). http://www.tuttobellotrouve.com/newsite/tuttobello/testpage.html CSS is internal. You SHOULD be able to see a small frame with a gift package in it, floating over a narrow horizontal box. Ideas? Thanks, Brad Hi. I have a page with 3 absolutely positioned columns. I want the footer to set right underneath the main content. Currently I have a container for the main content and a footer <div> that sits outside of this container. However, certain browsers (NN7 & IE6) are pushing the footer down too far. Anyone know how I can control this? Here's my css: #container{ position:relative; height:100%; width:780px; } #footer { position: relative; top: 0px; left: 0px; clear:both; } Hi all, I want to place a piece of text directly below an item that has a 'position: absolute' style on it, but when I put a div in there for the new text, it just places the text at the top of that absolute positioned item. Is there any way to get past this apart from floating the item? Cheers. I have created a 2-column liquid layout that works perfectly in Safari, FF(Win & Mac), Netscape(Win & Mac), IE5(Mac) and IE6(Win). In IE5 and 5.5 (Win) I don't get any images. the images are all position:absolute, with their containers set to position: relative. I tried them at first as simple image tags with a class assigned. I then tried to wrap them in Divs with ids. I also messed a little with the z-indexes. Nothing has worked so far. The 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=iso-8859-1" /> <style type="text/css" media="screen"><!-- @import url(css/base.css); --></style> <style type="text/css" media="print"><!-- @import url(css/print.css); --></style> </head> <body> <div id="container"> <div id="head"> <div id="headerTitle"><img src="images/headerTitle.gif" alt="Ken Dalton" height="100" width="325" border="0"/></div> <div id="headerGraphic"><img src="images/headerGraphic_Home.gif" alt="Header Graphic" height="100" width="400" border="0"/></div> </div> <div id="leftColumn"> <img src="images/typewriter_Home.gif" alt="typewriter" height="220" width="120" border="0"/> <p class="linkSelectedTop1">Welcome</p> <p class="link1"><a href="bio.php">Biography</a></p> <p class="link1"><a href="blog.php?category=">Musings</a></p> <p class="link1"><a href="guestBook.php">Guest Book</a></p> <p class="link1"><a href="links.php">Links</a></p> <p class="link1"><a href="mailto:ken@kendalton.com">Contact</a></p> </div> <div id="rightColumn"> <div id="rightPages48"><img src="images/rightPages48.gif" alt="graphic" height="600" width="48" border="0"/></div> <div id="krdPortrait"><img src="images/krdPortrait.gif" alt="Portrait of Ken Dalton" height="200" width="175" border="0"/></div> <h1>Welcome</h1> <p class="clear"> </p> </div> <div id="footer"><p> </p></div> </div> </body> </html> The CSS... html { height: 100%; margin: 0 auto; padding: 0; text-align: left; background-color: #000000; } body { height: 100%; margin: 0; padding: 0; font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif; font-weight: normal; font-size: 80%; background-color: #000000; } a { text-decoration: none; color: #A50023; } #container { position: relative; margin: 0; padding: 0; min-height: 100%; } * html #container { height: 100%; } #head { position: relative; background-image: url("../images/headerBlend.gif"); background-repeat: repeat-x; background-position: 0 0; text-align: left; margin: 0; padding: 0; height: 100px; } #headerTitle { position: absolute; top: 0; left: 0; z-index: 10; } #headerGraphic { position: absolute; top: 0; right: 0; z-index: 9; } #rightPages48 { position: absolute; top: 0px; right: 0; z-index: 10; } #krdPortrait { position: absolute; top: 0px; right: 64px; z-index: 10; } #leftColumn { float: left; top: 100px; left: 0; z-index: 10; width: 120px; margin: 0; padding: 0; background-color: #000000; text-align: right; } #leftColumn p { font-weight: bold; margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 0px; padding-right: 9px; padding-top: 3px; padding-bottom: 3px; } #leftColumn a { color: #BFA673; } #leftColumn a:hover { color: #A50023; } .link1 { border-top: 1px solid #606880; margin-top: 0px; margin-bottom: 0px; padding-right: 9px; padding-top: 3px; padding-bottom: 3px; } .linkSelected1 { color: #A50023; border-top: 1px solid #606880; margin-top: 0px; margin-bottom: 0px; padding-right: 9px; padding-top: 3px; padding-bottom: 3px; } .linkSelectedTop1 { color: #A50023; margin-top: 0px; margin-bottom: 0px; padding-right: 9px; padding-top: 3px; padding-bottom: 3px; } #rightColumn { position: relative; min-height: 100%; margin: 0; margin-left: 120px; padding: 0; background-image: url("../images/rightColumnFill48.gif"); background-repeat: repeat-y; background-position: 100% 0%; background-color: #FFFFFF; text-align: left; } * html #rightColumn { height: 100%; } #rightColumn h1, h2, h3, h4, h5, h6, p { margin-left: 36px; margin-right: 320px; margin-top: 0px; margin-bottom: 0px; } #rightColumn h1 { font-size: 200%; color: #606880; padding-top: 36px; } #rightColumn p { color: #333333; margin-top: 9px; } #clear { width: auto; height: 500px; margin-right:48px; margin: 0; padding: 0; margin-right:48px; background-color: Transparent; } #footer { width: auto; height: 72px; margin: 0; padding: 0; background-color: #000000; } #footer p { margin-top: 36px; } I'm make a simple display:hidden , display:visiable "pop up" div box. The popup works wonderful in FF but IE, the button does not display. Here is my full page (short and simple) 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" xml:lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function DIVshow(div_id)
{
var popUp = document.getElementById(div_id);
popUp.style.visibility = "visible";
}
function DIVhide(div_id)
{
var popUp = document.getElementById(div_id);
popUp.style.visibility = "hidden";
}
</script>
<style type="text/css">
#popupcontent {
position: absolute; top: 50%; left: 50%;
width: 300px;
height: 200px;
margin-left: -150px;
margin-top: -100px;
visibility: hidden;
overflow: hidden;
background-color: #F6F6BB;
border: 1px solid #333;
padding: 5px;
}
</style>
</head>
<body>
<p><a href="#" onClick="DIVshow('popupcontent');">Click here</a> to open the popup.</p>
<div id="popupcontent">
<p>This is a popup window!</p>
<input type="button" value="close" onClick="DIVhide('popupcontent');" />
</div>
</body>
</html>
Working sample can be seen he Click Here It works in both IE and FF if I write my hidden div tag like this: Code: <div id="popupcontent">
<div>
<p>This is a popup window!</p>
<input type="button" value="close"
onClick="DIVhide('popupcontent');" />
</div>
</div>
Obviously I want to avoid the extra div tags if possible. Anybody know what happening here and how to fix it? Thanks! I cannot get the footer to sit at the bottom of the page when I use absolute positioning. I need the #main to stretch to whatever the content height and the footer to sit underneath. I know its fairly easy to achieve with relative positioning but I need absolute positioning for for other elements. Can anyone help? html, body {height:100%;} #container { width: 900px; position: absolute; top: 0px; left: 50%; margin-left: -450px; } #header { width: 900px; height: 105px; position: absolute; left:0; top: 0; } #main { position: absolute; left:0; top: 105px; } #footer { position:absolute; bottom:0; border: 1px solid yellow; } hello, i have a centered element and i would like to create an absolutely positioned div that attaches to the left side of the centered div. ive been following this resource which states: Quote: #wrapper {position: relative; width: 760px; margin: 0 auto; text-align: left; } This will make an inner element that you absolutely position at, for example, top: 0; left: 0; appear at the top left corner of the wrapper, and not of the the top left of the entire window. and so my css is: Code:
body {
background-image: url(../images/bg.jpg);
background-repeat: repeat-x;
margin: 0 auto;
text-align: center;}
#container {
position:relative;
border: 4px #99968F solid;
width:587px;
margin: 20px auto;}
#left_block {
position:absolute ; top: 0px; left: 0px;
width: 299px;
height: 209px;
background-image: url(../images/mediaplayer_bg.png);}
what is happening though is that the left block is in the top left of the window and not the top left of the centred div. does anyone know how i can get this in the top left of the centred div and then ultimately to the left of the centred div (is a negative value possible?) thank you! Code: <div class="container"> <div>Booya</div> </div> Code:
.container {
position: relative;
}
.container div {
position: absolute;
bottom: 0;
right: 0;
}
Is there any way to position the nested div relative to its grandparent vs. its parent without losing the relative positioning, or is JS the only option? Hi everyone. I have a header section to my website, and to line up the navigation to the top of the bottom most element, I used absolute positioning to acheive this inside a relative positioned element. The strange thing is is that when first loaded, the absolutely positioned navigation is pulled completely from the parent relative div and shoved to the top of the screen. However, on refresh it jumps to where it should be per the css. Here's the CSS... Code:
#hd {
position: relative;
float: left;
width: 780px;
margin: 30px 0 0 0;
padding: 0;
background-color: #0099CC;
}
#hdlogo {
float: left;
margin: 0 0 18px 0;
padding: 0;
text-align: left;
}
#hdnav {
margin: 0;
padding: 0;
}
#hdnav ul {
position: absolute;
bottom: 16px;
right: 0;
height: 22px;
margin: 0;
padding: 0;
}
#hdnav ul li {
float: left;
margin: 0;
padding: 0;
list-style-type: none;
}
#hdnav ul li a:link img, #hdnav ul li a:visited img {
border: 0;
}
#hdbar {
clear: right;
width: 780px;
margin: 0;
padding: 0;
}
And the HTML... Code: <div id="hd"> <div id="hdlogo"> <img src="images/logo.gif" alt="Home" title="Home"/> </div> <div id="hdnav"> <ul> <li><a href="index.htm"><img src="images/home.gif" alt="Home" title="Home" /></a></li> <li><a href="aboutus.htm"><img src="images/aboutus.gif" alt="About us" title="About us" /></a></li> <li><a href="performance.htm"><img src="images/performance.gif" alt="Performance" title="Performance" /></a></li> <li><a href="aesthetics.htm"><img src="images/aesthetics.gif" alt="Aesthetics" title="Aesthetics" /></a></li> <li><a href="sustainability.htm"><img src="images/sustainability.gif" alt="Sustainability" title="Sustainability" /></a></li> </ul> </div> <div id="hdbar"> <img src="images/hd-bar.gif" alt="" title="" /> <!-- hd-bar is 780px wide by 16px high --> </div> </div> Just for further knowledge, here's the body tag, and the two container wraps for the rest of the site... Code:
body {
margin: 0;
padding: 0;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #555759;
}
body a:link, body a:visited {
text-decoration: underline;
color: #555759;
}
body a:hover {
text-decoration: underline;
color: #555759;
}
#content {
width: 780px;
margin: 0 auto;
padding: 0;
}
#allwrap {
float: left;
width: 780px;
margin: 0;
padding: 0;
}
#content centers everything and #allwrap is a container for all it's child elements. I've also had a colleague that said in IE 6.0 that the navigation stacks, rather than displays inline. Does anyone have any ideas? Thanks a bunch.. -Brian Below is a simple test page that fails to load properly on the Mozilla browser. It appears to work properly in IE. Any suggestions to getting the span width to set properly, based upon the content of the span would be a great help. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Span test</title> <style TYPE="text/css"> .submenu { background-color: #FFFFFF; color: #D4BA6B; border-top: 0px solid #000000; border-left: 0px solid #000000; border-right: 0px solid #000000; border-bottom: 0px solid #000000; position: absolute; margin: 0px; padding: 0px; min-width: 100px; visibility: visible; z-index: 1; } .submenuItem { background-color: #FFFFFF; color: #000000; border-left: 2px solid #ff0000; border-right: 2px solid #ff0000; border-bottom: 2px solid #ff0000; border-top: 2px solid #ff0000; font-family: "arial narrow", arial, verdana, sans-serif; font-weight: normal; font-size: 12pt; padding-top: 2px; padding-bottom: 2px; padding-right: 5px; padding-left: 5px; position: absolute; z-index: 1; cursor: pointer; cursor: hand; } </style> <SCRIPT LANGUAGE="javascript"> function getWidth() { oSpan = document.getElementById("testSpan"); iWidth1 = oSpan.offsetWidth; alert ("Width1 = " + iWidth1); } </SCRIPT> </head> <body onload="getWidth()"> <div class="submenu"> <span class="submenuItem" id="testSpan">This is the item that I am testing today.</span> </div> </body> </html> I'm working on a pet project on the off chance that I could be hired by a small business referral organization in the city where I live, so this isn't super urgent. I'm also not a web developer by trade, more IT, so if I make any obvious mistakes, feel free to point them out. I've got a simple absolute-positioned two-column layout and a two-color background that I want to tile vertically behind it. The problem seems to be that the browsers ( IE and FF, haven't tried chrome/safari/opera) seem to think that the body ends at the bottom of the logo I set on top, and won't tile it beyond the bottom of the image. 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> <link rel="stylesheet" type="text/css" href="css/stylesheet.css" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Hub City Business Network | Word-Of-Mouth Business Referrals in Hattiesburg, Mississippi | Home</title> </head> <body> <div id="content"> <div id="logo"><a href="index.htm"><img src="images/hcbnlogo1transparency.png" alt="Hub City Business Network" /></a></div> <div class="left"> <div id="navigation"> <ul> <li><a href="index.htm">Home</a></li> <li><a href="members/index.htm">Members</a></li> <li><a href="contact.htm">Contact Us</a></li> </ul> </div> <div id="leftinfo"> <p>We meet for breakfast every Tuesday,<br /> 7 - 8:30 AM. <br /> at the Neal House at<br /> 1311 East Hardy St.</p> </div> </div> <div class="right"> <p>Hub City Business Network (HCBN), is a Hattiesburg-based business networking group that meets every Tuesday for breakfast at 7:00 till 8:30 A.M. Our membership is composed of some of the finest and best-respected business men and women in Hattiesburg. Our networking model is predicated on the idea that people do business with people they know, trust, and like. Our members know that they can confidently refer business to a member and the referral will be handled in a timely, professional manner. In addition, we encourage members to meet outside of the weekly meetings for one-on-one Strategic Marketing Sessions (SMS). An SMS usually takes the form of a lunch or coffee, and gives members time to discover in a more relaxed environment things about other members that don't surface at the regular weekly meetings. </p> </div> <div id="footer"> <p>Site built by Robert Greenstreet</p> </div> </div> </body> </html> CSS: Code: html
{
width:100%;
}
#logo img
{
margin:10px 0px 0px 20px;
width:400px;
height:100px;
}
img
{
border:0px;
}
a:link
{
color:#29497f;
}
a:visited{
color:#5dd0c0;
}
body
{
width:650px;
margin-left:auto;
margin-right:auto;
background-color:#29497f;
}
#content
{
/*height:500px;*/
width:650px;
background-image:url('../images/bg1.png');
background-repeat:repeat-y;
background-attachment:fixed;
background-position:center;
margin-top:-10px;
}
.left
{
position:absolute;
left:auto;
top:120px;
width:15em;
margin-left:12px;
padding-left:0px;
}
.left ul
{
list-style-type:none;
margin-left:-33px;
font-family:sans-serif;
}
#leftinfo
{
margin-left:10px;
width:9em;
}
.right
{
position:absolute;
left:auto;
top:120px;
width:27em;
margin-left:12em;
font-family:sans-serif;
}
.right p
{
color:#000000;
}
#memberlist ul
{
margin-left:-40px;
}
#memberlist a:visited{
color:#6a92d4;
text-decoration:none;
}
#footer
{
position:absolute;
top:400px;
width:650px;
margin:0 auto;
}
Also, I'm working on getting that footer centered about 30px from the bottom of the page, without running up into whatever content may be above it. I think I might be able to figure that one out on my own, though. Like I said, no rush. This isn't a paid gig Hi all, I am having trouble getting an image to go where I want it to, which is flush up against the top of the page and horizontally centered. I originally accomplished this a few years ago on my website, but now I am trying to do a new build, and this time around the code I used last time is not working! The working image can be seen here, it is the banner logo displayed at the top of the page. It's currently perfectly set, and all I want is to have that again on a new page. However, when I simply copy/paste the old code onto that new page, it doesn't look anything like the original. Here is the original code. In retrospect I have no idea how I got it to work, since it looks messy as heck: Code: <table align="center" style="position:relative; top:-15; z-index:5" border="0" width="983" height="198"> <tr><td><img style="position:absolute; top:0;" src="http://www.thesunderedguard.com/images/banner.jpg"></td></tr> </table> All my tinkering around with the new page has not been successful at all. Any help would be much appreciated! Cheers I am trying to center a 760x580 DIV box in the center of the browser window (horizontally AND vertically) regardless of the user's screen size. Horizontal centering hasn't been a problem, but I can't figure out how to get the thing to center vertically. Here is my code at the moment: Code:
<html>
<head>
<title>Center a DIV</title>
<style type='text/css'>
html {height:100%;}
body {height:100%; margin:0; padding:0;}
#content {
position: absolute;
right: 0;
left: 0;
width: 760px;
height: 580px;
margin: 0 auto;
overflow-x: hidden;
overflow-y: hidden;
background-image: url(grunge_paper.jpg);
}
img {display: block;}
</style>
</head>
<body bgcolor='black'>
<div id='content'>
</div>
</body>
</html>
i have a webpage that the layout looks perfectly fine when looking on a monitor larger than 1024x768. when i look at it on that screen size everything inside of a div that is absolutly positioned gets put over it as if it is smaller than it is on the larger screen size. has anyone else come across this problem and know how to resolve it. please ask for more info if needed. many thanks in advance. i have attached an image with the problem showing RESOLVED: i redid my javascript Hey guys, I'm going to try an explain my problem as brief as possible. Okay, so, my wrappers/containers aren't showing up with my desired background color properly using Firefox 3. Could you guys look at the code below and possibly help me out? Thanks! index.php: Code: <div id="wrapper" class="content"> <div class="col1"> <h2 class="title">Top Stories</h2> <div class="inner"> <img src="images/featured_image.gif" class="featured" width="256" height="146" alt="" /> <h1><a href="#">Non Feugiat Egestas</a></h1> <p>Urpis in nec eleifend duis orci id, per felis libero, mattis nec qui eu porta ipsum. Felis amet porta ac convallis nostra aliquam, sed faucibus, fringilla ut donec lacus et. Felis nec, nullam eleifend porttitor dignissim. Rutrum fermentum vitae. In enim arcu velit neque, venenatis netus, donec leo facilisis, odio gravida sed scelerisque.</p> <ul><li><a href="#">Full story</a></li></ul> </div><!--/inner--> <img src="images/add-account-button.gif" class="button" /> <img src="images/its-price-button.gif" class="button" /> </div><!--/col1--> <div class="col2"> <h2 class="title">Section Title</h2> <div class="news"> <h3>Vim saperet dolores ea</h3> <p>Nusquam alienum accusamus nec te, vel ei velit tibique vituperata, nec id soleat recusabo deterruisset. Vim no scripta iuvaret principes, nam vocent expetenda sadipscing ei, detraxit takimata indoctum ne ius. Et vitae maior um appareat eos, sed an etiam voluptua pertinax. Sit puto iusto fabellas ea, admodum deseruisse vel ne. Mei ei mazim mandamus percipitur, ius ad numquam delenit gloriatur, ea esse consul timeam duo.</p> <p>Sea nullam saperet adipisci ad, noster mentitum recusabo his eu. Soleat incorrupte ex sea, kasd dicit atomorum eu mei. Cu mutat blandit ius, nec ex brute etiam falli. Sit an homero salutatus, cu usu dicant volutpat splendide. In qui legimus veritus pericula, nusquam abhorreant te vel, vivendo fierent instructior ei eum.</p> <p>Eu lorem dictas adversarium qui, soleat verear philosophia an vix. Vis adhuc paulo gubergren no, pri ex voluptua invenire forensibus. Eum te laoreet suavitate abhorreant, eu sit mutat iudicabit voluptaria. Pri falli utamur electram an, in periculis forensibus comprehensam qui. Ius omnis tibique cu, te sint dicant pri, viderer indoctum torquatos ad quo.</p> <h3>No tota tempor persius</h3> <p>Prima deseruisse necessitatibus nec an. Nec eius labores copiosae ad, posse nihil voluptua at sea, altera aperiam alienum has ex. Tantas putant nec et, per ea semper mediocrem. Ex eripuit imperdiet, pri ex quem eros epicuri, ius sonet meliore ei. Decore graeco maiorum at vel, ex mediocrem quaerendum sed, cum sonet detraxit convenire in. Eu quando soluta indoctum vim, vim zzril numquam vivendo et.</p> <p>Sea alterum antiopam te, minim postea his te. Has utinam dissentias in, enim aperiam sententiae eum cu, eu iusto iuvaret senserit his. Saepe suavitate efficiantur ea pri, sea ne elit ullum, vix in saperet oporteat. Laudem salutatus vis eu. No tota tempor persius has, ne erat altera maluisset quo. Fuisset iudicabit dissentiet te cum, te dignissim democritum signiferumque vix, in vix fierent oportere imperdiet.</p> </div> </div><!--/col2--> <div class="col3"> <h2 class="title">Quick Links</h2> </div><!--/col3--> </div> style.css: Code: #wrapper {
margin: 0px auto;
padding: 0px;
width: 1024px;
text-align: left;
background: #fff;
display: block;
}
#header {
margin: 0 auto;
width: 1024px;
text-align: right;
padding: 20px 0 20px;
}
.content {
background: #fff;
display: block;
}
.col1 {
float: left;
width: 282px;
padding: 15px 10px 25px 10px;
}
.col1 img.button {
padding: 10px 0 0 0;
}
.col2 {
float: left;
width: 400px;
padding: 15px 10px 25px 10px;
}
.col3 {
float: left;
width: 282px;
padding: 15px 10px 25px 10px;
background: #eeeee8;
}
.col1 .inner {
position: relative;
padding: 9px 6px 0 6px;
border-top: solid 1px #666;
float: left;
display: inline;
background-color: #eeeee8;
text-align: center;
}
.col1 .inner a {
margin: 0;
padding: 0;
text-align: left;
}
.col1 .inner a img {
margin: 0;
padding: 0;
text-align: center;
margin: 0 auto;
background-color: #eeeee8;
border: 1px solid #eeeee8;
}
/* border is a hack to remove white shadow at bottom of image QB #3851 */
.col1 .inner h1 {
margin: 0;
padding: 7px 0 4px 0;
text-align: left;
}
.col1 .inner h2 {
margin-top: 0;
margin-bottom: 0;
background-color: #eeeee8;
text-align: left;
}
.col1 .inner p {
margin-bottom: 5px;
text-align: left;
}
.col1 .inner ul {
padding-bottom: 0 6px 5px;
}
.col1 .inner ul li {
}
.col1 h2.title {
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
color: #666;
}
.col1 .inner h1 {
font-size: 18px;
font-weight: bold;
color: #003bb0;
padding: 0 6px 0 6px;
}
.col1 .inner h2 {
font-size: 11px;
font-weight: bold;
color: #000;
}
.col1 .inner p {
font-size: 12px;
line-height: 1.5em;
color: #333;
padding: 0 6px 0 6px;
}
.col1 .inner ul,
.col1 .inner ul li {
font-size: 12px;
font-weight: bold;
color: #003bb0;
list-style-image: url(../images/more_arrow.gif);
text-align: right;
}
.col1 img.featured {
border: 1px solid #000;
}
/*========= COLUMN 2 =========*/
.col2 h2.title {
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
color: #666;
padding: 0 0 10px;
border-bottom: solid 1px #666;
}
.col2 .news {
}
.col2 p {
font-size: 12px;
font-weight: normal;
}
/*========= COLUMN 3 =========*/
.col3 h2.title {
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
color: #666;
padding: 0 0 10px;
border-bottom: solid 1px #666;
}
|
|||||||