|
CSS - Problem... Cant Put A Middle Column...
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 Similar TutorialsHey, So I have a three column layout being implemented as such: html: Code:
<div class="content">
<div class="col1 column"></div>
<div class="col3 column"></div>
<div class="col2 column">
<div class="header">Header</div>
</div>
</div>
CSS: Code:
.column {
padding: 10px;
position:relative;
}
.header {
background:#cfe6f5;
color:#416383;
font-size:11px;
font-family:Arial;
font-weight:300;
padding-left:15px;
}
.col1 {
float: left;
width:250px;
}
.col2 {
margin-left: auto;
margin-right: auto;
}
.col3 {
float:right;
width:250px;
}
The problem is that the width of the header div extends all the way to the left and right of the page when it's in the middle column, but behaves the way I want it to (extends to the left and right of the column) when it's in the left or right column. Any ideas? Thanks. --Surgery Hello, 1st post on this forum. How can I create a three column layout with the left and right div-containers sticking to the left and right sides and then make the middle container stay centered? I would post links to the pages but this forum will not let me. Thanks for the help hello, well im try to make three columns, left,center,right. the left and the right have fixed width,but the center colums should be stretched, so if the left and right each is 200px the center should be the space left in the browser screen in the center. Is it possible to do this using CSS divs? Please this is urgent. Thanks in Adanved Samer It's not letting me post links since I am a new member, so copy paste the link below. (it's an image of what looks wrong in the website) img59.imageshack.us/i/52153657.jpg/ It loads correctly in Firefox and IE8, but the middle column breaks in ie7 and ie8 in compatibility mode. By break I mean the middle column gets shifted to the right side of the middle column and below the right column (while still in the middle column) I have also included the general layout and css below. I have tried changing doc types and a few small things but nothing has even effected the appearance. The website is in a layout like this: html4strict Code: Original - html4strict Code <div id="wrapper1"> <div id="wrapper2"> <div id="maincol"> <div id="leftcol"> </div> <div id="rightcol"> </div> <div id="centercol"> </div> </div> <div id="footer"> </div> </div> </div> <div id="wrapper1"> css Code: Original - css Code #centercol { position:relative; padding:0 200px; min-width: 520px; } #leftcol { position:relative; top:-10px; left:-10px; float:left; width:180px; margin:0 0 -10px 0; padding:10px; z-index:100; } #rightcol { position:relative; top:-10px; right:-10px; float:right; width:180px; margin:0 0 -10px 0; padding:10px; z-index:99; } #maincol { position:relative; margin:0; padding:10px; } #wrapper1 { position:relative; text-align:left; width:100%; min-width: 950px; background:#23415C url("images/side.gif") repeat-y top right; } #wrapper2 { position:relative; text-align:left; width:100%; background:url("images/side.gif") repeat-y top left; }
#centercol {
Any ideas on how to resolve this problem would be great. Hi everyone! i have this mockup in fireworks for my personal site.. problem is... i cant put it together the way i like it using CSS here is my mockup and the slices ive made... http://www[dot]phpugph[dot]com/talk/index.php?action=dlattach;topic=8005.0;attach=1720;image im sorry for the link... i cant seem to post a proper one do u guys know how i should go about it? the middle column should be fixed width but the right and left column should be fluid thanx I need a combination of this: http://bonrouge.com/3c-hf-fixed.php and this: http://bonrouge.com/3c-hf-fluid.php I need the middle column to be a fixed width and the outer two to be fluid. I also need to maintain the 100% with header and footer at top and bottom respectively. Any ideas how to do this? Thanks. Hello. I have no idea how to fix my problem, and I am hoping someone would be kind enough to help me. I have set up my template to have a wrapper div with a top, middle, and bottom div inside. What I need to do is have the footer (bottom div called (wrapper_bottom) move down when the content in the middle div (wrapper_middle) has more content added. Currently, when content is added to the middle div (wrapper_middle), it pushes the bottom div content out of the way. Maybe I have the divs set up wrong or maybe have them listed in the html file incorrectly? I have uploaded a zip file of my files he www (*) dpegues (*) com (slash) site_help (*) zip Also, I have posted a live version of it at: www (*) dpegues (*) com (slash) site_help It contains my site images, the template in the folder called Templates, and the css file. And one more thing if everyone doesn't mind - how do I keep the bottom buttons attached to the bottom of the footer bar? I am learning CSS right now, and unfortunately have to teach myself. I think I have learned a lot though in the few days I have been doing it!!! Thank you everyone. Hello! 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! Hi I am quite familiar with CSS but am stumped on how I could do the following. Basically I need a template with a header, body and footer, I know, sounds simple right, but I need to have the middle body section of the page stretching to the height of the browser, so that the space in between the header and footer is filled in with the middle container. The middle container that stretches to the required height needs to have a background image that cannot be covered over by the header or the footer. This is the problem, because if the middle container is set to 100% height, then a scroll bar is always present because of the header and footers height. I have been able to create what I am trying to do with a table, but obviously I want to avoid using a table for a layout. Is there any way to recreate this but via CSS? Take a look at the table layout and change the size of your browser to see the effect I am aiming for, but in CSS http://labwaves.com/temp/index3.php This is an attempt in CSS, but It requires me to set the headers and footers background image to the same as the bodys background image, with I can't have . http://labwaves.com/temp/index2.php Congratulations on making it to the end of this long, but hopefully un-confusing post Thanks and any reply's are really, really appreciated as I am so stuck on this one! 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 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 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 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 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 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 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? 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 ) 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. 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'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. |
|||||||