|
CSS - Multiple-column Problem
Yep, there's another multiple column problem!
I'v created this website to give an example of my problem. As you can see, the #left and #content seem to ignore the border of the #navigator and slip right over it. This problem appears only in IE, in Mozilla there's no problem at all! What is happening? Here's the CSS stylesheet I'm using: body { text-align: center; } a { font-size:12px; text-decoration:none; font-weight:600; font-family:verdana; } a:link {color:#FF0741;} a:visited {color:BDD131;} a:hover {color:white;} #container { margin-left: auto; margin-right: auto; text-align: left; width: 90%; margin: 10px auto; font-family:verdana; font-size:12px; background-color: #EEF3C9; color: #FF0741; line-height: 130%; } #Header { padding: 0; background-color: #EEF3C9; border-style:solid; border-color:#BDD131; border-width:1px 0px; } #navigation { border-style:solid; border-color:#FFFFFF; border-width:3px 0px; text-align:right; font-size:20px; background-color:#BDD131; margin:0; padding:0; } #navigation li { display:inline; padding:20px; margin:0; } #navigation li a:hover { color:white; } #Left { float: left; width: 200px; height: 400px; margin:0px; background-color:#BDD131; } #Content { width: 550px; background-color:#EEF3C9; margin-left: 210px; margin-top:10px; padding: 40px 0px 0px 40px; } #End { clear: left; margin: 0; padding: .5em; color: #FF0741; border-style:solid; border-color:#FFFFFF; border-width:3px 0px; background-color: #BDD131; } Similar TutorialsHello! I'm new to CSS, so any help would be greatly appreciated! I'm working on this page: sugarhooker[dot]com/testing/index2.html *The CSS is included in the head The right column is suppose to start where it says 'Are you hooked...' It should be right underneath the navigation bar. Anyone know what I'm doing wrong? Thanks in advance! I have a content area that looks like the following Whe Blah blah blah Blah blah blahBlah blah blah Blah blah blahBlah blah blahBlah blah blah When: Blah blah blah Blah blah blahBlah blah blah Blah blah blahBlah blah blahBlah blah blah I have it working as follows which works great in IE but doesnt work in Firefox/netscape Code:
...
.homeLabelLeft{
vertical-align:top;
text-align:left;
display:inline;
width:15%;
font-weight:bold;
margin-bottom:10px;
}
.homeLabelRight{
display:inline;
width:85%;
margin-bottom:10px;
}
...
<div class="homelabelleft">
Whe
</div>
<div class="homelabelright">
blahblahlbhablahblahblah<br>blahblahlbhablahblahblah
</div>
<div class="homelabelleft">
When:
</div>
<div class="homelabelright">
blahblahlbhablahblahblah<br>blahblahlbhablahblahblah
</div>
... there are about 10 or so of these sections on the page.
In IE this works great but in FF/Netscape the homelabelright div is Under the homelabelleft instead of beside it as is in IE. Any thoughts? I posted this query over at webdeveloper.com but nobody has offered any working suggestions for a solution, apologies to those who read it there as well. Basically I have a 2 column layout with a header div containing a floated tabbed navigation bar. The page. The css. As you can see the big red background on my right hand column goes all the way to the top of the page rather than staying below the tab bar. How can I get it to stay beneath the header and not start after the content ie. not clear it to the bottom? I have this problem on 2 sites I'm working on. I can't seem to nest 2 divs in a content div to create a 2 column layout. In FF it seems to work fine but IE is pushing the left column content down below the right column content. I've tried many things and I'm stuck. Am I going about the whole concept the wrong way or is there some small hack I'm missing somewhere? Any help would be great. link Thanks, Brad Hi, I have a 4 column layout, all the columns have percentage widths at the moment but I want the 3rd column to be fixed width. I can't seem to figure out how I can have columns 1,2 and 4 fluid and fit the page, whilst having column 3 fixed width. Code: ________________________________________________ | expand | expand | fixed | expand | | | | width | | | | | | | | | | | | | | | | | | | | | | atm i've created this by just using position:absolute; and then a % width and % from left side. For example the 2nd column atm is width:20%; left:40%; (because 1st column is 40% width) I'm sure you can help, thx! (if I didn't explain too well, ask all questions ) I have a css site which is structured as following: <head> <body> <div id="container"> <div id="header"></div> <div id="navigation"></div> <div id="leftmenu"></div> <div id="rightmenu"></div> <div id="content"></div> <div id="footer"></div> </div> </body> </html> #container{width:100%;height:100%;} #header{height:105px;width:100%;} #navigation {width:100%;} #LeftMenu { position: absolute; width: 150px; top: 145px; left: 2px; height: 553px;} #RightMenu{ position: absolute; width: 220px; top: 145px; right: 2px; height: 553px; } #content{ margin: 20px 225px 5px 155px; height: 550px; } My main problem is that when the left menu or right menu content increases it overflows the container and goes above footer. how can i make leftmenu, content and right menu when one is increasing all to increase together? Cheers I'm working on site with some main containers and a 3-column content area inside the containers. The middle column on IE win is getting bumped down below the left column when it should be aligned to top. I'm kind of a novice so I have no idea what's going on. Can anybody help? Here are my files: http://www.artesiandesigngroup.com/westcoastpipe/grid.html http://www.artesiandesigngroup.com/westcoastpipe/includes/main.css Code: body {
font-family: Arial, Helvetica, sans-serif;
background-color: #fff;
text-align: center;
margin: 0; padding: 0; }
/*** outside wrapper including fading background ***/
#container {
position: relative;
margin: auto;
text-align: center;
width: 840px;
background: url(../images/layout/bg_page.gif) repeat-y center top; }
/*** actual container ***/
#pagesize {
margin: auto;
text-align: center;
width: 800px;
background-color: #9B9EA0;
border: 1px solid #fff;
border-bottom: none; }
/*** row 1 - top ***/
#header {
background-image: url(../images/layout/header.jpg);
background-repeat: no-repeat;
background-position: center top;
margin: 0;
padding: 0;
width: 800px;
height: 252px;
border-bottom: 1px solid #fff; }
/*** Nav inside header ***/
#topnav {
position: relative;
top: 150px;
width: 800px;
height: 102px;
margin: 0; padding: 0;
background-color: #005195;
color: #fff;
font-size: .7em;
}
#topnav ul {
margin: 0; padding: 0; }
#topnav li {
text-transform: uppercase;
display: inline;
list-style-type: none;
margin: 0; padding: 2px 4px;
vertical-align: middle;
border-right: 1px solid #fff; }
/*** row 2 - middle ***/
#content {
background: url(../images/layout/bg_content.gif) repeat-y center top;
background:color: #fff;
border: 1px solid #fff;
border-bottom: none;
margin: 30px 30px 0 30px;
padding: 0;
text-align: left; }
/*** column 1 - left ***/
#sidebarphotos {
float: left;
margin: 0; padding: 0;
width: 161px;
font-size: .8em; }
/*** column 3 - right ***/
#sidenav {
margin: 0; padding: 0;
float: right;
width: 170px;
background-color: #555;
font-size: .8em;
color: #ddd; }
/*** column 2 - center ***/
#textarea {
width: 395px;
margin: 0; padding: 0;
margin-right: 170px;
margin-left: 169px;
background-color: #fff;
font-size: .9em;
vertical-align: top; }
/*** header for textarea ***/
#contentheader {
margin: 0;
padding: 4px 8px;
vertical-align: middle;
background: #dff url(../images/layout/bg_contentheader.jpg) repeat-y left top;
font-size: 1em;
font-style: normal;
font-weight: normal;
text-transform: uppercase;
color: #005195;
line-height: 1em;
border-bottom: 1px solid #555;
}
/*** row 3 - bottom ***/
#footer {
width: 800px;
margin: 0;
padding: 2px 0;
background-color: #005195;
font-size: .6em;
color: #fff;
border-top: 1px solid #fff;
border-bottom: none;
letter-spacing: .1em;
}
Thanks in advance! I am working on a simple css design for my site. It has a header, footer, and I am trying to divide the content into two columns. the attempt is he http://www.jimpix.co.uk/rejig/008.htm I have the two content columns defined as: #leftcol { width:70%; float:left; border:1px solid black; } #rightcol { width:25%; float:right; border:1px solid black; } The above divs sit within a main 'content' div: #content { padding:10px; border-top:2px solid #999999; border-bottom:10px solid black; } But when I view the site in either IE6 or Firefox, the rightcol and leftcol divs do not sit within the content div, or at least, they don't appear to on the screen. Instead of the 'content' div expanding to contain the leftcol and rightcol divs, it just sits at the top, hence why there is a big black line at the top, instead of at the bottom, underneath the columns. Can anyone see what I am doing wrong please? Thanks Jim I would like a column to span the entire page vertically. When I browse my website on firefox, the page spans twice as long as the page. (www.skysupplyusa.com/a.php) Any advice? Code: #sidebar {
float: left;
background-color:#000;
width: 20%;
height: 100%;
}
#content{
background-color:#FFF;
width: 80%;
min-height: 100%;
height:auto;
float: right;
text-align:left;
}
/* Hack for IE */
* html #Content {
height: 100%;
}
/* End IE Hack */
body {
top:0;
height: 100%;
width: 100%;
margin: 0;
padding:0;
text-align:left;
font-family: Arial, Helvetica, sans-serif;
font-size:14px;
line-height:1.5em;
background-color: #DDD6CC;
}
i want 2 columns side by side:css is as below. it seems the 2nd column is displayed below the first column.wat can be done to avoid this. div#column1 { margin-left: 150px; width: 70px; height: 500px; background: #CCCCFF; color: blue;} div#column2 { margin-left: 250px; color: black; background: blue; } I'm having problems with my CSS. I have three columns. 1) Left for navigation 2) Middle for content 3) Right for sidebar I am using this format for a template. The right sidebar column sometimes will be longer in height than the middle column depending on content of the page. The Middle column has a 1px solid line on the left and right (using it as a visual divider). So I really want the Middle column to extend and follow the height of the Right sidebar. I can't add the border to the Right sidebar column because it has it's own border already. What code should I use for the middle column? I currently have this: Code: #middle {
float: left;
width: 375px;
background: #fff;
margin: 0 auto;
padding-top: 0px;
padding-left: 15px;
padding-right: 15px;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}
Thanks in advance. Ive tried to put stuff to the left of the news room in the blank spot and cannot seem to do so.. here is css: Code:
#header {
position: relative;
margin: 0 auto;
background: transparent url(img/bg/header-v2.gif) no-repeat bottom left;
height: 235px;
width: 760px;
text-align: left;
z-index: 10;
}
'#content {
position: relative;
background-color: #FFFFFF;
height:inherit;
width: 760px;
margin: 0 auto 0 auto;
text-align: left;
border: 1px double rgb(72,183,239);
overflow: hidden;
font-size: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#leftpanel{
position: inherit;
float: left;
background-color: #f5f5f5;
height: inherit;
width: 170px;
margin-left: 3px;
}
#leftpanel-head{
width: 158px;
height: 26px;
background-image: url(img/bg/leftpanel-head.png);
padding-left: 12px;
color: #FFFFFF;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
padding-top: 4px;
}
#content-right {
width: 585px;
height: inherit;
float: right;
}
#newsroom {
float: right;
width: 300px;
height: 30px;
margin-left: 2px;
}
#newsroom-header {
width: 300px;
height: inherit;
background-image:url(img/bg/video-player-head.png);
color: #FFFFFF;
font-weight: bold;
padding-left: 3px;
padding-top: 4px;
}
#welcome{
float: left;
height: 27px;
width: 279px;
color: #FFFFFF;
font-weight: bold;
padding-left: 3px;
padding-top: 4px;
}
#welcome-text {
float: left;
height: 27px;
width: 279px;
color: #FFFFFF;
font-weight: bold;
padding-left: 3px;
padding-top: 4px;
}
#primary-nav {
position: absolute;
background: transparent url(img/bg/primary-nav-v2.gif) no-repeat;
list-style: none;
width: 760px;
height: 26px;
top: 203px;
left: 1px;
z-index: 10;
padding-left: 5px;
}
#primary-nav li {
float: left;
background-position: 0 -26px;
}
#primary-nav li ul {
position: absolute;
background: transparent url(img/primary-nav-top.png) no-repeat;
list-style: none;
width: 159px;
left: -9999px;
margin-left: -9px;
padding-top: 5px;
}
#primary-nav a {
display: block;
height: 0px !important;
text-decoration: none;
overflow: hidden;
}
#primary-nav li a {
background-position: 0 0;
}
#primary-nav li#nav-1 {
background: transparent url(img/bg/nav-1.png) no-repeat;
margin-right: 1px;
}
#primary-nav li#nav-2 {
background: transparent url(img/bg/nav-2-shopping.png) no-repeat;
margin-right: 1px;
}
#primary-nav li#nav-3 {
background: transparent url(img/bg/nav-3-restaurants.png) no-repeat;
margin-right: 1px;
}
#primary-nav li#nav-4 {
background: transparent url(img/bg/nav-4-hotels.png) no-repeat;
}
#primary-nav li#nav-5 {
background: transparent url(img/bg/nav-5-history.png) no-repeat;
}
#primary-nav li#nav-6 {
background: transparent url(img/bg/nav-6-links.png) no-repeat;
}
#primary-nav li#nav-7 {
background: transparent url(img/bg/nav-7-about.png) no-repeat;
}
#primary-nav li#nav-1:hover,
#primary-nav li#nav-1.sfhover,
#primary-nav li#nav-2:hover,
#primary-nav li#nav-2.sfhover,
#primary-nav li#nav-3.hover,
#primary-nav li#nav-3.sfhover,
#primary-nav li#nav-4:hover,
#primary-nav li#nav-4.sfhover,
#primary-nav li#nav-5:hover,
#primary-nav li#nav-5.sfhover,
#primary-nav li#nav-6:hover,
#primary-nav li#nav-6.sfhover,
#primary-nav li#nav-7:hover,
#primary-nav li#nav-7.sfhover{
background-position: 0 -26px;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
#primary-nav li#nav-1 a,
#primary-nav li#nav-2 a,
#primary-nav li#nav-3 a,
#primary-nav li#nav-4 a,
#primary-nav li#nav-5 a,
#primary-nav li#nav-6 a,
#primary-nav li#nav-7 a {
width: 107px;
height /**/: 26px;
padding: 26px 0 0 0;
}
#primary-nav li#nav-1 ul li,
#primary-nav li#nav-2 ul li,
#primary-nav li#nav-3 ul li,
#primary-nav li#nav-4 ul li,
#primary-nav li#nav-5 ul li,
#primary-nav li#nav-6 ul li,
#primary-nav li#nav-7 ul li{
background: transparent url(img/bg/primary-nav-link-up.png) no-repeat;
height: 21px;
}
#primary-nav li#nav-1 ul li.bottom,
#primary-nav li#nav-2 ul li.bottom,
#primary-nav li#nav-3 ul li.bottom,
#primary-nav li#nav-4 ul li.bottom,
#primary-nav li#nav-5 ul li.bottom,
#primary-nav li#nav-6 ul li.bottom,
#primary-nav li#nav-7 ul li.bottom{
background: transparent url(img/bg/primary-nav-bottom.png) no-repeat;
height: 14px;
width: 159px;
}
#primary-nav li#nav-1 ul li a,
#primary-nav li#nav-2 ul li a,
#primary-nav li#nav-3 ul li a,
#primary-nav li#nav-4 ul li a,
#primary-nav li#nav-5 ul li a,
#primary-nav li#nav-6 ul li a,
#primary-nav li#nav-7 ul li a {
overflow: hidden !important;
overflow: visible;
font-size: 10px;
color: #FFF;
height: 19px !important;
height: 19px;
width: 107px;
padding: 1px 3px 2px 19px;
}
#primary-nav li#nav-1 ul li a:hover,
#primary-nav li#nav-2 ul li a:hover,
#primary-nav li#nav-3 ul li a:hover,
#primary-nav li#nav-4 ul li a:hover,
#primary-nav li#nav-5 ul li a:hover,
#primary-nav li#nav-6 ul li a:hover,
#primary-nav li#nav-7 ul li a:hover {
background: transparent url(img/bg/primary-nav-link-over.png) no-repeat 0 0;
}
#primary-nav li:hover ul,
#primary-nav li.sfhover ul {
left: auto;
}
html: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html class="sIFR-active" id="home" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"><head style="background-color: rgb(255, 0, 0);">
<title>TysonsCorner.com™</title>
<link rel="shortcut icon" href="#">
<link href="home.css" rel="stylesheet" type="text/css">
<link href="global.css" rel="stylesheet" type="text/css">
<link href="nav1.css" rel="stylesheet" type="text/css">
</head><body>
<div id="container">
<!-- HEADER AREA STARTS HERE -->
<div id="content">
<div id="header">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="760" height="200" id="Banner(FLASH) - Beta" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="false" />
<param name="movie" value="Banner(FLASH) - Beta.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" /> <embed src="Banner(FLASH) - Beta.swf" quality="high" bgcolor="#ffffff" width="760" height="200" name="Banner(FLASH) - Beta" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
<ul id="primary-nav">
<!-- PRIMARY NAVIGATION (CATEGORIES) STARTS HERE -->
<li id="nav-1"><a href="#" title="Tysons Corner Homepage">Tysons Homepage</a>
<ul>
<li><a href="#" title="Tysons 1 Stores">News</a></li>
<li><a href="#" title="Tysons 2 Stores">Events</a></li>
<li><a href="#" title="More Tysons Shopping">Contact Us</a></li>
<li class="bottom"></li>
</ul>
</li>
<!-- PRIMARY NAVIGATION (BRANDS) STARTS HERE -->
<li id="nav-2"><a href="#" title="Tysons Corner Shopping">Tysons Shopping</a>
<ul>
<li><a href="#" title="Tysons 1 Stores">Tysons I</a></li>
<li><a href="#" title="Tysons 2 Stores">Tysons II</a></li>
<li><a href="#" title="More Tysons Shopping">More Shopping</a></li>
<li class="bottom"></li>
</ul>
</li>
<!-- PRIMARY NAVIGATION (PRODUCTS) STARTS HERE -->
<li id="nav-3"><a href="#" title="Tysons Corner Restaurants">Tysons Restaurants</a>
<ul>
<li><a href="#" title="Cajun Food">Cajun</a></li>
<li><a href="#" title="Grilled Food">Grilled</a></li>
<li><a href="#" title="Foreign Food">Foreign</a></li>
<li><a href="#" title=" Full List Restaurants">Complete List</a></li>
<li class="bottom"></li>
</ul>
<li id="nav-4"><a href="#" title="Tysons Corner Restaurants">Tysons Restaurants</a>
<li id="nav-5"><a href="#" title="Tysons Corner Restaurants">Tysons Restaurants</a>
<li id="nav-6"><a href="#" title="Tysons Corner Restaurants">Tysons Restaurants</a>
<li id="nav-7"><a href="#" title="Tysons Corner Restaurants">Tysons Restaurants</a>
</li>
</ul>
</div>
<div id="leftpanel">
<div id="leftpanel-head">
Search
</div>
<form id="form1" method="post" action="">
<p>
<label>
<input type="text" name="IDsearch" id="IDsearch" width="150"/>
</label>
</p>
</form>
<div id="leftpanel-head">
Events Calendar
</div>
<div id="leftpanel-head">
Sponsored Ads
</div>
<script type="text/javascript"><!--
google_ad_client = "pub-8246327012745782";
/* 120x600, created 10/23/08 */
google_ad_slot = "1782998545";
google_ad_width = 120;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<div id="newsroom">
<div id="newsroom-header">News Room</div>
</div>
<div id="welcome">Test</div>
<div id="newsroom">
<script language="javascript" src="http://www.thenewsroom.com//mash/swf/voxant_player.js?a=V3126802&m=669243&w=300&h=290&v=2"></script>
</div>
</div>
</body></html>
Demo: http://www.reston.com/Tysons Corner COM I have a two column, three row layout for my website. I'm having problems where my left column is longer than the middle "main" content, and when that happends it overlaps my footer instead of pushing it down. Would someone mind looking at my html/css and tell me how I can fix this issue? Link: http://mividdesigns.com/csshelp.html By the way, it works/looks fine in FF, but I have problems in IE. Thank You! ok this is taking to long i go think of something else So I'm trying to setup a column on the right side of my content for advertisements. I've gotten the two columns lined up next to each other, but the problem is that the background doesn't flow down to compensate for the length of the advertisement. It only seems to pay attention to the content in the content column on the left. Does anyone know how to get that background to extend down to compensate for the length of the advertisement, depending up on whether or not it's displayed? If anyone's better with CSS than I am, and could help, I'm open to suggestions and fixes for how to accomplish this. Test Page: cvoproweb.com/testpage.html Test CSS: cvoproweb.com/teststyle.css Thanks for the help, hopefully the problem isn't too complicated. -Chris Edit: This problem seems to be occurring in Firefox and Opera, (it works in IE7) does anyone know how to fix this in Firefox and Opera? Im trying the faux column technique but somehow it wont work. I use: Code: body{
background-image: url('themes/default/faux_bg.gif');
background-position: 20% 0%;
background-repeat: repeat-y;
margin: 0%;
padding: 0%;
}
.. in my css file. However it doesnt do anything. I am sure the css file is loaded because when i remove the <link> line the rest of the elements lose their style. When i place the code directly into the body tag like this: <body style="background-ima... etc. it does do something. What am i doing wrong? Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="themes/default/basic_sheet.css">
</head>
<body>
<?php require('includes/structure.php'); ?>
<div class="contentsDiv">
blabla blab,ala<br><Br>
dsjkdasdas<br>djsadhjksad<br>djsuiohashd
</div>
<div class="panelDiv">
contact 1<br>
contact 2<br>
contact 3<br>
</div>
</body>
</html>
(PS the image is a 10px line with the first 20% filled with blue and the other 80% filled with white. thanks in advance. [/CODE]I have a 2 column css layout. I am having a problem with getting the vertical line that separates the left and right column to go the length of the page. It grows with the content in the right column. Here is an example: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "(URL address blocked: See forum rules)"> <html xmlns="(URL address blocked: See forum rules)"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>xyzTrader.com</title> <link rel="stylesheet" type="text/css" href="css/main.css" media="screen" /> </head> <body id="type-b"><!----> <div id="wrap"> <div id="header"> <div id="site-name">xyzTrader.com</div> <div id="search"> <form action=""> <label for="searchsite">Site Search:</label> <input id="searchsite" name="searchsite" type="text" /> <input type="submit" value="Go" class="f-submit" /> </form> </div> </div> <div id="content-wrap"> <div id="login"> <form method="post" action="/test/header.php"> Username <br /> <input name="uname" type="text" id="uname"> <br /> Password<br /> <input name="pword" type="password" id="pword"> <br /> <input name="Login" type="submit" id="Login" value="Login"> </form> </div> <div id="utility"> <ul id="nav-secondary"> <li class="first"><b>Catagories</b></li> <li><a href="#">Books</a></li> <li><a href="#">Books</a></li> <li><a href="#">Books</a></li> <li><a href="#">Books</a></li> <li><a href="#">Books</a></li> <li><a href="#">Books</a></li> <li><a href="#">Books</a></li> <li><a href="#">Books</a></li> <li><a href="#">Books</a></li> <li><a href="#">Books</a></li> <li><a href="#">Books</a></li> </div> <div id="content"> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> <p>hello<br>sfafssf</P> and here is the css file: Code:
/* THE BIG GUYS */
* {margin:0;padding:0}
html {min-height: 100%; min-width: 100%;}
body {padding: 0 0 20px;background: #fff url("images/body_bg.gif") repeat-x 0 100%;color:#333;font:83%/1.5 arial,tahoma,verdana,sans-serif}
/* LINKS */
a,a:link,a:link,a:link,a:hover {background:transparent;text-decoration:underline;cursor:pointer}
a:link {color:#c00}
a:visited {color:#999}
a:hover,a:active {color:#069}
/* FORMS */
input {font-family: arial,tahoma,verdana,sans-serif;margin: 2px 0}
/* FORMS - general classes */
input.f-submit {padding: 1px 3px;background:#666;color:#fff;font-weight:bold;font-size:96%}
/* TYPOGRAPHY */
p, ul, ol {margin: 0 0 1.5em}
h1, h2, h3, h4, h5, h6 {letter-spacing: -1px;font-family: arial,verdana,sans-serif;margin: 1.2em 0 .3em;color:#000;border-bottom: 1px solid #eee;padding-bottom: .1em}
h1 {font-size: 196%;margin-top:.6em}
h2 {font-size: 136%}
h3 {font-size: 126%}
h4 {font-size: 116%}
h5 {font-size: 106%}
h6 {font-size: 96%}
.highlight {color:#E17000}
.subdued {color:#999}
.error {color:#c00;font-weight:bold}
.success {color:#390;font-weight:bold}
.caption {color:#999;font-size:11px}
.date {font: bold 82% arial;color:#bbb;display:block;letter-spacing: 1px}
small {font-size:11px}
/* LISTS */
ul {margin: .3em 0 1.5em 0;list-style-type:none}
ul.related {margin-top: -1em}
ol {margin: .5em .5em 1.5em}
ol li {margin-left: 1.4em;padding-left: 0;background: none; list-style-type: decimal}
li {line-height: 1.4em;padding-left: 25px;background: transparent url("images/sprites.gif") no-repeat 0 0}
li.doc {background-position: 3px -500px}
ul.nomarker li {background:none;padding-left:0}
dl {margin: 0 0 1em 0}
dt {font-weight:bold;margin-top: 1.3em}
dl dl {margin: 0 0 1.5em 30px}
/* GENERAL */
img {border:none}
hr {margin: 1em 0;background:#f2f2f2;height:1px;color:#f2f2f2;border:none;clear:both}
.clear {clear:both;position:relative;font-size:0px;height:0px;line-height:0px}
/* LAYOUT - HEADER */
#header {background: #666 url("images/sprites.gif") repeat-x 0 100%;margin: 0 0 25px;padding: 0 0 8px}
#header #site-name {font: 265% arial;letter-spacing: -.05em;margin:0 0 0 40px;padding:3px 0;color:#ccc;border:none}
/* SEARCH */
#search {color:#fff;font-weight:bold;position:absolute;top:10px;right:50px;left:auto;width:18em}
#search form {margin:0}
#search input {width:8em;margin: 0 0 -1px;height:1.2em}
#search label {padding:5px 0 0;display:inline}
#search input.f-submit {width:auto;font-size:81%;margin:0 0 -.15em;height:1.95em}
/* LAYOUT - main body of page */
#wrap {min-width:770px;max-width:100%;margin:0 auto;position:relative; }
#content-wrap {position:relative;width:100%;}
#login {position:absolute;top:0;left:25px;width:165px;border-top: 5px solid #999;padding-bottom: 40px}
#utility {position:absolute; top:125px;left:25px;width:165px;border-top: 5px solid #999;padding-bottom: 40px}
#sidebar {position:absolute;top:0;right:25px;width:20%;border-top: 5px solid #999;padding-top: 1px;padding-bottom: 40px}
#content {margin: 0 50px}
#content #breadcrumb {margin-top:-5px;font-size:93%;font-weight:bold}
#content #breadcrumb a:link, #content #breadcrumb a:visited {text-decoration:none}
#content #breadcrumb a:hover, #content #breadcrumb a:active {text-decoration:underline}
/* LAYOUT TYPE B */
#type-b #content-wrap {background: url("images/content_wrap_bg.gif") repeat-y 30px 0;min-height:98%;}
#type-b #content {margin: 0 23px 0 235px}
/* SECONDARY NAVIGATION - vertical navigation */
#nav-secondary, #nav-secondary ul {position:static}
#nav-secondary, #nav-secondary li {list-style: none;margin:0;padding:0;background:#fff}
#nav-secondary {padding-top:0;border-top: 1px solid #ccc;margin-top: 1px}
#nav-secondary a {line-height:1.8;padding: 5px 0 5px 23px;background: #fff url("images/sprites.gif") no-repeat 10px -695px;font: bold 86% arial;display:block}
#nav-secondary a, #nav-secondary a:link, #nav-secondary a:visited, #nav-secondary a:hover, #nav-secondary a:active {text-decoration:none;cursor:pointer}
#nav-secondary a:link {color:#000}
#nav-secondary a:visited {color:#000}
#nav-secondary a:hover {color:#c00;background: #fee url("images/sprites.gif") no-repeat 10px -695px}
#nav-secondary li.active a:link, #nav-secondary li.active a:visited, #nav-secondary li.active a:hover, #nav-secondary li.active a:active {color:#c00}
#nav-secondary li {border-top: 1px solid #fff;border-bottom: 1px solid #ccc}
/* SECONDARY NAVIGATION - 2nd TIER */
#nav-secondary ul {margin: 0 0 1em 23px;padding:0}
#nav-secondary li.active li a, #nav-secondary li.active li a:link, #nav-secondary li.active li a:visited {line-height:1.5;background: #fff url("images/sprites.gif") no-repeat 0 -798px;padding:0 0 0 12px;font-weight:normal;width:auto;color:#000;width:130px;display:block}
#nav-secondary li.active li a:hover, #nav-secondary li.active li a:active {color: #c00}
#nav-secondary li.active li {border: none;margin:0}
#nav-secondary li.active li.active a:link,
#nav-secondary li.active li.active a:visited,
#nav-secondary li.active li.active a:hover,
#nav-secondary li.active li.active a:active {font-weight:bold}
/* SECONDARY NAVIGATION - 3rd TIER */
#nav-secondary ul ul {margin: 0 0 1em 13px;padding:0}
#nav-secondary li.active li.active li a, #nav-secondary li.active li.active li a:link, #nav-secondary li.active li.active li a:visited {width:117px}
#nav-secondary li.active li.active li a:link,
#nav-secondary li.active li.active li a:visited,
#nav-secondary li.active li.active li a:hover,
#nav-secondary li.active li.active li a:active {font-weight:normal}
#nav-secondary li.active li.active li.active a:link,
#nav-secondary li.active li.active li.active a:visited,
#nav-secondary li.active li.active li.active a:hover,
#nav-secondary li.active li.active li.active a:active {font-weight:bold}
/* SECONDARY NAVIGATION - 4th TIER */
#nav-secondary ul ul ul {margin: 0 0 1em 13px;padding:0}
#nav-secondary li.active li.active li.active li a, #nav-secondary li.active li.active li.active li a:link, #nav-secondary li.active li.active li.active li a:visited {width:104px}
#nav-secondary li.active li.active li.active li a:link,
#nav-secondary li.active li.active li.active li a:visited,
#nav-secondary li.active li.active li.active li a:hover,
#nav-secondary li.active li.active li.active li a:active {font-weight:normal}
#nav-secondary li.active li.active li.active li.active a:link,
#nav-secondary li.active li.active li.active li.active a:visited,
#nav-secondary li.active li.active li.active li.active a:hover,
#nav-secondary li.active li.active li.active li.active a:active {font-weight:bold}
/* LAYOUT - FOOTER */
#footer {clear:both;border-top: 1px solid #E3E8EE;padding: 10px 0 30px;font-size:86%;color:#999}
#footer p {margin:0}
#footer a:link {color:#999}
Can anyone give me some advice or what to do to make this line go the length of the page?? Thanks in advance, Mike Hello I would be really grateful if anyone can help me - I'm struggling with a 3 column layout using css. It seems to work well in all except IE6 (I'm looking at it on a Mac using Safari and Firefox, I've got different browser screen shots from a website and all seem OK except IE6, which puts the center column under the other two, instead of at the same height. If anyone has any ideas, they'd be much appreciated - I don't really know what I'm doing with css, and I have tried several different 3 col layouts that I've found on the web: this is the only one that has worked in almost all browsers for me. This is the style sheet: body {background: #003366; } a { font-family: Verdana, Arial, sans-serif; text-decoration:none; font-size: medium; color: #de8600;} h1 { font-family: Verdana, Arial, sans-serif; font-size: x-large; font-weight: bold; background: #FFFFFF; color: #DE8600} h2 { font-family: Verdana, Arial, sans-serif; font-size: large; font-weight: bold; color: #003366} h3 { font-family: Verdana, Arial, sans-serif; font-size: medium; font-weight: bold; color: #003366} h4 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: medium; font-weight: bold; background: #003366; color: #DE8600} h5 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: medium; font-weight: normal; background: #FFFFCC; color: #000033} p { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: medium; color: #003366;} a:visited {font-family: Verdana, Arial, sans-serif; font-size: medium; color: #de8600;} a:hover { font-family: Verdana, Arial, sans-serif; text-decoration:underline; font-size: medium; color: #DE8600;} body { padding: 0px; border:0; background: #003366; } div#wrapper { width: 780px; margin: 0 auto; } div#header { background-image: url("header.jpg"); background-repeat: no-repeat; color: #FFFFFF; margin-left:auto; margin-right:auto; margin-top: 0; width:780px; height: 200px } #header .slogan { text-align: left; padding-left: 20px; padding-right: 20px; color: #003366; font-size: 0.8em; } p.slogan { text-align: left; padding-left: 20px; padding-right: 20px; color: #003366; } div#navcontainer { background: #003366; margin: 0px 0px 0px 0px; padding: 1em 0 0 0; font-size: 0.8em; text-align: center text-transform: lowercase; border-top: 2px solid #de8600; } /* to stretch the container div to contain floated list */ #navcontainer:after { content: "."; display: block; line-height: 1px; font-size: 1px; clear: both; } ul#navlist { list-style: none; padding: 0; margin: 0 auto; display: inline; width: 100%; font-size: 0.8em; } ul#navlist li { display: block; float: left; width: 20%; text-align: center margin: 0; padding: 0; } ul#navlist li a { display: block; width: 100%; padding: 0.5em; border-width: 1px; border-color: #ffe #aaab9c #ccc #fff; border-style: solid; color: #666666; text-decoration: none; background: #cccccc url(nav.gif); } #navcontainer>ul#navlist li a { width: auto; } ul#navlist li#active a { background: #cccccc url(nav.gif); color: #996600; } ul#navlist li a:hover, ul#navlist li#active a:hover { color: #996600; background: transparent; border-color: #aaab9c #fff #fff #ccc; } #container { position: relative; display:block; background:#0ac; border-left:200px solid #003366; border-right:200px solid #003366; } #inner { display:block; margin-left:-200px; margin-right:-200px; padding:5px; } #left { float:left; position: relative; width:200px; left:0px; } #right { float:right; position: relative; width:200px; right:0px; } #center { margin-left:200px; margin-right:200px; position:relative; display:block; height:1%;} .clear {clear:both;} /* Just to extend each column */ #inner a:visited, a {text-decoration:none; cursor:default;} #inner a span {display:none;} #inner a:active, #inner a:focus {color:#fff; text-decoration:none; background:transparent; cursor:default;} #inner a:active span, #inner a:focus span {display:block;} .menu { width:150px; height:150px; position:relative; margin:0; font-size:11px; margin:0px 0; z-index:100; } .menu ul li a, .menu ul li a:visited { display:block; text-decoration:none; color:#003366; width:150px; height:25px; text-align:center; border:1px solid #fff; border-width:1px 1px 0 0; background:#003366 url(nav.gif); line-height:19px; font-size:11px; } .menu ul { padding:0; margin:0; list-style-type: none; } .menu ul li { float:left; margin-right:1px; position:relative; } .menu ul li ul { display:none; } /* specific to non IE browsers */ .menu ul li:hover a { color:#996600; background:#cccccc; } .menu ul li:hover ul { display:block; position:absolute; top:0; left:150px; width:150px; } .menu ul li:hover ul li a.hide { background:#ffffff; color:#003366; } .menu ul li:hover ul li:hover a.hide { width:150px; } .menu ul li:hover ul li ul { display: none; } .menu ul li:hover ul li a { display:block; background:#cccccc; color:#996600; width:200px; } .menu ul li:hover ul li a:hover { background:#dfc184; color:#666666; } .menu ul li:hover ul li:hover ul { display:block; position:absolute; left:151px; top:0; color:#003366; } .menu ul li:hover ul li:hover ul li a { display:block; width:200px; background:#dfc184; color:#003366; } .menu ul li:hover ul li:hover ul li a:hover { background:#bd8d5e; color:#fff; } div#fla { position:relative; text-align: center; font-size: 10px; margin: 20px 0 20px 0; } p.fla { text-align: center; font-size: 10px; color: #ffffff; margin: 0; } p.date { text-align: right; font-size: 0.8em; color: #ffffff; margin: 0; } div#guardian { height:60px; margin: 10px 0 10px 0; align: right; } div#banner { width:200px; margin:20px 0 20px 0; background:#ffffff; padding:10; color:#003366; font-size:10px; text-align: center; border:1px solid #de8600; } #banner a:hover { color:#996600; font-size:10px; text-align: center; background:#cccccc; } p.banner { color:#003366; font-size:10px; text-align: center; } div#google { width:180px; height:120px; margin:10px 0 0 0; background:#003366; padding:5px; color:#ffffff; } div#search { width:180px; margin:20px 0 20px 0; background:#ffffff url("search.gif"); background-repeat: no-repeat; padding:10px; color:#003366; border:1px solid #de8600; } p.search { color:#003366; font-size:11px; text-align: center; } a.search { color:#003366; font-size:11px; text-align: center; } #search a:hover { color:#996600; font-size:11px; text-align: center; } div#edit { width:250px; margin:20px 0 0 0; background:#ffffff url("edit-box.jpg"); background-repeat: no-repeat; padding:20px; color:#003366; border:1px solid #de8600; } p.edit { color:#003366; font-size:11px; text-align: center; } a.edit { color:#003366; font-size:11px; text-align: left; } #edit a:hover { color:#996600; font-size:11px; text-align: left; } .gallerycontent{ width: 250px; border: 1px solid #de8600 background-color: #fffFFF; text-align: center; display: block; } div#footer { clear:both; position:relative; align:center; color: #FFFFFF; margin-left:auto; margin-right:auto; margin-top: 20px; width:780px; height: 160px } p.footer { color:#ffffff; font-size:10px; text-align: left; } I am apparently not allowed to post the URL of the page, but I hope that someone may be able to make some suggestions anyway. Thanks for your time! Frances I took the faux column idea, and from it created a left and right border image for my site. The following CSS from Dan Cederholm's faux column article on ALA is what I used, which is below.. Code:
/* image width is 760px, with one px on each end leaving 758px for the content area */
body {
background-image: url(images/bgborder.gif);
background-repeat: repeat-y;
background-position: 50% 0;
text-align: center;
margin: 0 0;
padding: 0 0;
}
To test to make sure it worked well, I placed a content div on the site, which is centered and has a background color, to test to make sure the border image worked as it should. This is below... Code:
#allcontent {
width: 758px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding: 0 0;
background-color: #ccc;
}
In FF this works great, but I found a bug in IE (as usual ) that I can't figure out. In IE 6.0, when the window is resized, the background from the content that should be inbetween the border image actually overlaps the image on the left hand side. I can't think of anything that would trigger this, has anyone ever run into it? If not, does anyone have any idea why it happens? -B I have a page that has a header, footer, left content box, and right sidebar. I'm using a negative margin on the content container to get the right sidebar to fill the space so I can keep a sensible order within the html code. The right sidebar isn't taking up the negative margin space like it should. It floats right but takes up residence under the content box. It works without negative margins if I put the right sidebar first in the order (before the content) but I shouldn't have to do that. It also works using absolute positioning on the right sidebar but this is going to be a problem for pages that will have content that takes up less space than the sidebar (because of the footer). I have uploaded the page on one of my servers:test page page so you can see it in action. Here's the CSS/HTML code: 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>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style media="screen">
body {
margin: 0;
padding: 0;
text-align: center;
}
div#pageframe {
border: solid 1px black;
margin: 0px auto 0px auto;
width: 741px; /* total pagewidth */
}
div#headerbox {
border: solid 1px gray;
width: 741px;
height: 95px;
}
div#whiteboxes {
border: solid 1px red;
width: 741px;
float: left;
margin-right: -210px;
}
#middlecontent {
border: solid 1px purple;
margin-right: 210px;
text-align: left;
}
div#rightside {
border: solid 1px yellow;
width: 185px;
float: right;
}
div#footer {
border: solid 1px olive;
float: none;
width:741px;
height:55px;
clear: both;
}
</style></head>
<body>
<div id="pageframe">
<div id="headerbox">
<h1>This is the Header.</h1>
</div>
<div id="whiteboxes">
<div id="middlecontent">
<h1>middle content</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus varius
eleifend tellus. Suspendisse potenti. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos hymenaeos. Nulla
facilisi. Sed wisi lectus, placerat nec, mollis quis, posuere eget,
arcu. Donec euismod. Praesent mauris mi, adipiscing non, mollis eget,
adipiscing ac, erat. Integer nonummy mauris sit amet metus. In
adipiscing, ligula ultrices dictum vehicula, eros turpis lacinia
libero, sed aliquet urna diam sed tellus. Etiam semper sapien eget
metus.</p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Vivamus imperdiet mattis risus. In hac
habitasse platea dictumst. Curabitur aliquam rhoncus nunc. Suspendisse
sit amet purus in wisi egestas placerat. Nunc varius suscipit magna.
Fusce commodo dolor vel felis. Nunc auctor elit vitae justo. Donec
lorem. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Vivamus diam wisi, tincidunt et, sollicitudin a, ultricies quis, est.
Sed ut velit.</p>
<p>Aliquam sit amet mi. Pellentesque imperdiet
metus vitae wisi hendrerit imperdiet. Donec molestie tortor quis odio
rutrum mattis. Donec nec sem. Proin tempus tempor risus. Suspendisse
odio. Donec id mi. Maecenas est orci, porttitor eget, vehicula at,
rhoncus a, magna. Duis eu tellus. Donec blandit, orci quis commodo
tincidunt, mi leo tempor enim, in hendrerit eros lacus blandit urna.
Donec sed mi nec dui varius fringilla.</p>
<p>Quisque pretium, augue
non blandit ultrices, ipsum augue varius velit, a adipiscing nulla nunc
consectetuer diam. Maecenas eu ante non dui euismod euismod. Proin est
tortor, bibendum in, imperdiet quis, porta vel, purus. Quisque
tincidunt tincidunt elit. Suspendisse a mi. Nam faucibus. Aliquam
imperdiet pulvinar turpis. Vivamus sit amet elit a leo tincidunt
varius. Cras et orci. Aenean non velit vitae risus posuere iaculis.
Quisque porta nibh sed massa. Aliquam non ante. Proin semper ipsum nec
enim. Maecenas vestibulum nisl non magna. Aenean auctor. Nulla
tincidunt augue ac quam. Etiam ultricies purus et metus. Aliquam tempus
dignissim felis.</p>
<p>Curabitur euismod odio. Suspendisse potenti.
Aliquam est augue, feugiat non, sodales nec, aliquet et, massa. Nulla
eu tellus sed mi mollis aliquam. Fusce sed sem. Etiam tempus augue non
nulla. Nunc pede ligula, fringilla in, lobortis et, dictum a, est. Sed
accumsan, nisl vel suscipit scelerisque, arcu turpis dictum augue, ut
sagittis metus pede non felis. Donec mollis ipsum eu sapien. Sed eget
nisl. Nunc sem eros, dapibus consectetuer, molestie non, elementum sit
amet, felis. Donec eu diam eu nibh tincidunt malesuada. Mauris
fringilla volutpat odio.</p>
</div><!-- end middlecontent -->
<div id="rightside">
<h1>right frame</h1>
<p>Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Phasellus varius eleifend tellus.
Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent
per conubia nostra, per inceptos hymenaeos. Nulla facilisi. Sed wisi
lectus, placerat nec, mollis quis, posuere eget, arcu. Donec euismod.
Praesent mauris mi, adipiscing non, mollis eget, adipiscing ac, erat.
Integer nonummy mauris sit amet metus. In adipiscing, ligula ultrices
dictum vehicula, eros turpis lacinia libero, sed aliquet urna diam sed
tellus. Etiam semper sapien eget metus.</p>
</div>
</div><!-- end whiteboxes -->
<div id="footer">
<p>FOOTER<br />Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Phasellus varius eleifend tellus. Suspendisse potenti.</p>
</div>
</div><!-- end pageFrame -->
</body></html>
Any help is greatly appreciated. |
|||||||