|
CSS - Nesting 2 Columns Within An Existing 2 Column Template
I am having problems trying to set up a 2 columns inside an existing 2 column layout. The reason why I am doing it that way is because the 2 col layout is part of a template and most pages will be 2 col, but for some there is actually 3 columns, so I need to split the mainColumn into 2 columns.
The problem is they are not showing up side by side. If I do display: inline; everything within the id displays that way and that is a problem. So here is what I am trying to accomplish Here is the css: Code: /*Main Section two columns under top section*/
#wrapper{
padding: 10px 10px 10px 0px;
width: 100%;
height: 100%;
}
#sideColumn {
float:left;
width:155px;
height: 78%;
background-color: #5094F9;
padding-top: 50px;
padding-left:10px;
padding-bottom:10px;
pading-right: 10px;
margin-right: 10px;
text-align: left;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-weight: bold;
line-height: 20px;
}
.category {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 16px;
font-weight: bold;
letter-spacing: 5px;
}
#sideColumn a:link, #sideColumn a:visited {
background-color: transparent;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
#sideColumn a:hover, #sideColumn a:active {
background-color: #FFFFFF;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #5094F9;
font-size: 12px;
font-weight: bold;
}
#sideColumn ul {
list-style: none;
padding: 15px 0px 15px 10px;
margin: 0px;
}
#mainColumn {
padding: 0px;
}
/*customer support*/
#csupportWrapper {
padding: 90px 20px auto 185px;
text-align: left;
}
#csupportWrapper span {
color: #000099;
font-weight: bold;
}
#csupportWrapper .large {
margins: 40px auto 20px auto;
}
#csupportWrapper ul {
list-style: none;
padding: 10px 0px 0px 10px;
margin: 0px;
}
#csupportWrapper a:link, #csupportWrapper a:visited {
background-color: transparent;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #5094F9;
font-size: 12px;
font-weight: bold;
}
#csupportWrapper a:hover, #csupportWrapper a:active {
background-color: transparent;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #990099;
font-size: 12px;
font-weight: bold;
}
#column1 {
padding: 40px 10px 0px 185px;
clear: none;
}
#column2 {
padding: 40px 0px 0px 382px;
clear: none;
}
Thanks! Here is the xhtml starting after the heading part (I can add it too if needed): Code: <!--begin wrapper-->
<div id="wrapper">
<!--begin side column -->
<div id="sideColumn">
<span class="category">Products</span>
<ul>
<li><a href="../products/spirometers.html">Spirometers</a></li>
<li><a href="../products/clinical_trials.html">Clinical Trials</a></li>
<li><a href="../products/asthma_copd.html">Asthma & COPD</a></li>
<li><a href="../products/smoking_cessation.html">Smoking Cessation</a></li>
<li><a href="../products/resuscitaion.html">Resuscitation</a></li>
</ul>
<span class="category">Resources</span>
<ul>
<li><a href="customer_support.html">Customer Support</a></li>
<li><a href="training_services.html">Training & Services</a></li>
<li><a href="exhibitions.html">Exhibitions</a></li>
<li><a href="newsletters.html">Newsletters</a></li>
<li><a href="downloads.html">Downloads</a></li>
<li><a href="useful_links.html">Useful Links</a></li>
<li><a href="industry_information.html">Industry Information</a></li>
<li><a href="industry_information.html">Sitemap</a></li>
</ul>
</div>
<!--end of side column -->
<!--begin main column -->
<div id="mainColumn">
<!-- InstanceBeginEditable name="Main_Section" -->
<div id="csupportWrapper">
<div id="column1">
<span class="large">Customer Support</span>
<ul>
<li>Vitalograph Ltd</li>
<li>Maids Morton, Buckingham</li>
<li>MK18 1SW</li>
<li>England</li>
</ul>
<ul>
<li><span>Phone:</span> +44(0) 1280 827110</li>
<li><span>Fax</span>: +44(0) 1280 823302</li>
</ul>
<ul>
<li><span>Email: </span> <a href="mailto:sales@vitalograph.co.uk">sales@vitalograph.co.uk </a></li>
<li><a href="/enquiry_forms/customer_support_form.htm">On-Line Enquiry Form</a></li>
</ul>
</div>
<div id="column2">
<span class="large">Technical Support</span>
<ul>
<li>Vitalograph Ltd</li>
<li>Maids Morton, Buckingham</li>
<li>MK18 1SW</li>
<li>England</li>
</ul>
<ul>
<li><span>Phone:</span> +44(0) 1280 827110</li>
<li><span>Fax</span>: +44(0) 1280 823302</li>
</ul>
<ul>
<li><span>Email: </span> <a href="mailto:techsupport@vitalograph.co.uk">techsupport@vitalograph.co.uk </a></li>
<li><a href="/enquiry_forms/technical_support_form.htm">On-Line Enquiry Form</a></li>
</ul>
</div>
</div>
<!-- InstanceEndEditable -->
</div>
<!--end of main column -->
</div>
<!--end of wrapper-->
Similar TutorialsHi, there. I've created a simple tableless 3-column fixed-width layout within a 'wrapper' div#. The column displays exactly how I want it and where I want it in Firefox, Safari, Chrome... but not in IE7 - for some reason, IE7 repeats part of the content of the third column. courses.algarve-golf.co.uk/problem.htm courses.algarve-golf.co.uk/scripts/default.css (The site isn't yet finished, so while the CSS validates, the HTML is not completely validated as I have more content, nav-bars and so on to add.) I was told that the problem with IE is that I have a comment (necessary for the Dreamweaver Template to function) before the Doctype, which renders the page in 'quirks mode'. Removing that comment made the page display correctly, but the problem is that I need the pages to work on Dreamweaver Templates - so, fixing one problem presents another! Is there a work-around for the first issue that allows me to maintain the Template markup so that this (and many future pages) can be built on same Template? Any further help or advice that anyone can offer greatfully appreciated! hello community... i would like to humble ask for anyone's help on this one... i need to add a right column to this template to make it a 3 column joomla template. but since i dont know css, i really dont know what to do. please help me. i have privided the code below. Here is the index.php Code:
<?php
/**
* @copyright Copyright (C) 2005 - 2008 Open Source Matters. All rights reserved.
* @license GNU/GPL, see LICENSE.php
* Joomla! is free software. This version may have been modified pursuant
* to the GNU General Public License, and as distributed it includes or
* is derivative of works licensed under the GNU General Public License or
* other free or open source software licenses.
* See COPYRIGHT.php for copyright notices and details.
*/
defined('_JEXEC') or die('Restricted access');
?>
<?php echo '<?xml version="1.0" encoding="utf-8"?'.'>'; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/getirshelp/css/layout.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/getirshelp/css/template.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/getirshelp/css/joomla.css" type="text/css" />
<!--[if lte IE 6]>
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/getirshelp/css/template_ie6.css" type="text/css" />
<![endif]-->
<!-- Flow Player Start -->
<script type="text/javascript" src="flowplayer/flowplayer-3.0.6.min.js"></script>
<!-- Flow Player End -->
<meta name="verify-v1" content="18/oD5mtAqJSklIsjK/k6NWXMxJ6ZNJMyoGRkIl3Md8=" />
</head>
<body id="template-body">
<div id="header">
<div id="top"><jdoc:include type="modules" name="top" /></div>
<div id="contact"><jdoc:include type="modules" name="user6" /></div>
</div>
<div id="mainnav">
<div id="blog">
<a href="irsblog/index.php">Blog</a>
</div>
<jdoc:include type="modules" name="user3" />
</div>
<div class="clear"></div>
<div id="mainbody">
<div id="mainbody2">
<div id="sidebar">
<div class="inside">
<jdoc:include type="modules" name="left" style="xhtml" />
</div>
</div>
<div id="sidebar2">
<div class="inside">
<jdoc:include type="modules" name="right" style="xhtml" />
</div>
<div id="maincontent">
<div class="inside">
<?php if ($this->getBuffer('message')) : ?>
<?php endif; ?>
<jdoc:include type="component" />
</div>
</div>
</div>
<div class="clear"></div>
<div id="mainbottom-wrapper">
<div id="mainbottom">
<?php if( $this->countModules('user1') ): ?>
<div class="mainbottom-box" id="box-1">
<jdoc:include type="modules" name="user1" style="xhtml" />
</div>
<?php endif; ?>
<?php if( $this->countModules('user2') ): ?>
<div class="mainbottom-box" id="box-2" >
<jdoc:include type="modules" name="user2" style="xhtml" />
</div>
<?php endif; ?>
<?php if( $this->countModules('user4') ): ?>
<div class="mainbottom-box" id="box-3">
<jdoc:include type="modules" name="user4" style="xhtml" />
</div>
<?php endif; ?>
<?php if( $this->countModules('user5') ): ?>
<div class="mainbottom-box" id="box-4">
<jdoc:include type="modules" name="user5" style="xhtml" />
</div>
<?php endif; ?>
<div class="clear"></div>
</div>
</div>
<div id="footer">
<jdoc:include type="modules" name="footer" />
</div>
</div>
</div>
<div id="bottom">
<div class="left">
<?php echo JText::_("100 S. EDISON AVE., STE. A TAMPA, FL 33606"); ?><br />
<?php echo JText::_("PHONE: (813) 229-7100 TOLL FREE: (888) 438-6474 FAX: (813) 251-9605"); ?>
</div>
<div class="right">
<?php echo JText::_("© 2000-2009 Law Offices of Darrin T. Mish, P.A"); ?>
</div>
<div class="clear"></div>
</div>
<script src="http://24520.hittail.com/mlt.js"; type="text/javascript"></script>
</body>
</html>
here is the layout.css Code:
#header {
background: transparent url('../images/bg-header.jpg') no-repeat scroll 0 0;
height: 149px;
width: 990px;
margin: 0 auto;
}
#mainnav {
height: 46px;
width: 990px;
margin: 0 auto;
}
#mainbody {
background: url('../images/bg-mainbody.png') repeat-y scroll 0 0;
width: 1010px;
margin: 0 auto;
}
#mainbody2 {
background: url('../images/bg-mainbody2.png') no-repeat scroll 0 0;
}
#sidebar {
background: #FFFFFF url('../images/bg-sidebar.png') repeat-x scroll 0 0;
color: #000000;
width: 223px;
min-height: 700px;
margin-left: 15px;
float: left;
}
#sidebar2 {
background: #FFFFFF url('../images/bg-sidebar.png') repeat-x scroll 0 0;
color: #000000;
width: 250px;
min-height: 700px;
margin-right: 15px;
float: right;
}
#maincontent {
width: 500px;
float: right;
margin-right: 15px;
}
#mainbottom-wrapper {
border-top: 0px dotted #000;
margin-top: 50px;
margin: 0 15px;
}
#mainbottom {
background: none #EFEFEF no-repeat scroll 0 0;
min-height: 192px;
margin: 10px 0;
padding: 0 10px;
clear: both;
color: #000000;
}
#footer {
background: #0B60B7 url('../images/bg-footer.png') no-repeat scroll 0 0;
text-align: center;
color: #FFFFFF;
padding: 10px 0;
margin: 0 11px;
}
#bottom {
background: #FFFFFF url('../images/bg-bottom.png') no-repeat scroll 0 0;
margin: 10px 0 20px 0;
width: 1010px;
margin: 0 auto;
padding: 10px 0;
}
and here is the template.css Code:
/* @important */
* { margin:0; padding:0; }
body {
background: #FFFFFF url('../images/bg.png') repeat-x scroll center top;
font: 78% Arial,Tahoma,Verdana;
color: #000000;
}
h1,h2,h3 {
margin: 0 0 10px 0;
}
h1, .componentheading { font-size: 1.5em; }
h2, .contentheading { font-size: 1.2em; text-align:center; }
h3 { font-size: 1.167em; }
ul {
margin: 10px 0 10px 0;
padding: 0 0 0 35px;
}
li{}
a {
text-decoration: underline;
color: #666666;
}
p {
margin: 0 0 15px 0;
line-height: 20px;
}
img {
border: none;
}
fieldset {
border: none;
}
.clear{
clear: both;
}
.inside {
padding: 5px;
}
.left {
float: left;
}
.right {
float: right;
}
/* Header Style */
#top {
height: 35px;
text-align: right;
color: #FFFFFF;
}
#contact {
float: right;
width: 300px;
min-height: 80px;
padding-right: 5px;
color: #000000;
}
/* Mainnav Style*/
#mainnav ul {
float: right;
list-style-type: none;
padding: 0;
margin: 0 auto;
}
#mainnav ul li {
background: url('../images/bg-menu.png') no-repeat scroll right center;
display: inline;
float: left;
height: 46px;
padding: 0 10px;
}
#mainnav ul li a {
color: #FFFFFF;
display: block;
float: left;
font-family: times new roman;
font-size: 1.2em;
font-weight: bold;
line-height: normal;
margin-top: 12px;
text-decoration: none;
text-transform: uppercase;
}
/* Blog Button */
#blog {
float: right;
margin: 10px 15px 0 120px;
padding: 0;
width: 60px;
}
#blog a {
background: #F2A31E;
color: #FFFFFF;
display: block;
font-family: times new roman;
font-size: 1.2em;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
text-align: center;
padding: 3px 0;
}
/* Advert Style */
#advert-wrapper {
border-bottom: 0px dotted #000;
padding: 0 0 10px 0;
}
.advert-box {
min-height: 239px;
width: 367px;
}
/* Sidebar Style */
#sidebar ul {
list-style-position: inside;
margin: 0;
padding: 0;
}
#sidebar ul li {
padding: 5px;
border-bottom: 1px dotted #B9B9B9;
list-style-image: url('../images/bullet.png');
}
#sidebar ul li a {
color: #000000;
text-decoration: none;
}
#sidebar .moduletable, #sidebar .moduletable_menu{
margin: 0 0 15px 0;
}
/* Sidebar-c Style */
#sidebar-c ul {
list-style-position: inside;
margin: 0;
padding: 0;
}
#sidebar-c ul li {
padding: 5px;
border-bottom: 1px dotted #B9B9B9;
list-style-image: url('../images/bullet.png');
}
#sidebar-c ul li a {
color: #000000;
text-decoration: none;
}
#sidebar-c .moduletable, #sidebar .moduletable_menu{
margin: 0 0 15px 0;
}
/* Main Content Style */
#maincontent img {
padding: 5px;
}
/* Main Bottom Style */
.mainbottom-box {
float: left;
width: 228px;
min-height: 166px;
padding: 10px 5px;
margin: 10px 0;
}
.mainbottom-box ul {
list-style-image: url('../images/bullet.png');
}
.mainbottom-box ul li {}
.mainbottom-box ul li a {
text-decoration: none;
color: #000000;
}
#box-2,#box-3,#box-4 {
border-left: 1px dotted #B9B9B9;
}
/*Footer Style */
#footer a {
color: #FFFFFF;
}
/* Bottom Style */
#bottom .right, #bottom .left {
font-size: 0.833em;
}
#bottom .right {
width: 157px;
}
#bottom .left {
padding-left: 15px;
}
i would really appreciate it if anyone can help... thankks a whole lot!! Hi I need these 3 columns http://dmumford.bizhat.com/equalheights.htm to be of equal height regardless of what column has the most text in. Could somone please help me with this, I have looked at Paul OB's 2 col example but I am at a puzzle how to do it with my requirements!! Your help is much appreciated! hello, ive been following a tute designed for a two column template and trying to follow this logic to make a 3 column template but i cant make it work unfortunately. any help would be really appreciated, thank you! apologies for a 'here is the code' post, but here is the code basically i want a 3 column template with 7 rows and only the 3rd row from the top really being divided into 3 columns -standard header, main content, footer, kind of design. whole 'table' is 587 wide and column sizes are 202 for left and right and 183 for center column. (no live link sorry) index page: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <link href="css/template_css.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <div id="tag">Tag</div> <div id="header">Header</div> <div id="left">Left</div> <div id="main_content">Main Content</div> <div id="right">Right</div> <div id="login">Login</div> <div id="menu1">Menu1</div> <div id="menu2">Menu2</div> <div id="footer">Footer</div> </div> </body> </html> css file: Code: body {
background-image: url(../images/bg.jpg);
background-repeat: repeat-x;
margin: 0 auto;
text-align: center;}
#container {
border: 4px #99968F solid;
width:587px;
height: 724px;
margin: 20px auto;}
#tag {
text-align: left;
color: #64F81B;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
background-color: #000000;}
#header {
width: 587px;
height: 135px;
background-image: url(../images/header.jpg);
background-repeat: no-repeat;}
#left {
text-align: left;
width: 202px;
height: 287px;
margin: 0 auto;
float: left;
padding-top: 39px;
background-image: url(../images/left_bg.jpg);
background-repeat: no-repeat;}
#main_content {
margin-left: 202px;
padding-top: 25px;
width: 183px;
height: 287px;
background-image: url(../images/main_content_bg.jpg);
margin: 0 auto;}
#right {
float: right;
height: 287px;
margin: 0 auto;
margin-left: 385px;
padding-top: 39px;
width: 202px;
background-image: url(../images/right_bg.jpg);}
#login {
clear: both;
width: 587px;}
#menu1 {
clear: both;
width: 587px;}
#menu2 {
clear: both;
width: 587px;}
#footer {
clear: both;
width: 587px;}
Hello, I have created a three column html layout with header and footer using liquid CSS format. The problem is, if either any one of the columns (left , middle or right column) increases in length, the others don't grow accordingly. Please let me know how to do it. I didn't post the actual code as it is long. However I could post it if needed. Thanks Hi, I have a multi-column layout where I want every column to always be the same height. Any one of the columns may be the longest on any given page, so the other columns have to automatically adjust to match that height. Usually I'd just use the faux column technique where you repeat a background image, but that won't work because of two elements on this page: 1. each column has a border all the way around it. 2. one column resizes with the page. I've read the articles on liquid layouts with faux columns, but as far as I can tell those techniques won't work if your columns have borders. Does anyone know any technique that would work here? Thanks. Hi all, I'm trying to achieve the following: <div id="left">This column is of blue background, and stretches all the way to the left.</div> <div id="center"> THIS COLUMN IS FIXED WIDTH, 760px </div> <div id="right">This column is of red background, and stretches all the way to the right.</div> Hope that is self explanatory.. I've Googled all this but can only find solutions for fluid "center" columns with fixed width right/left columns. I'm trying to do the opposite. Could anyone let me know how I can do this? I've got some messy CSS that definitely needs to be corrected, I'm trying out different things so here's my 'trial& error' code: Code:
#left {
background-color: blue;
float: left;
margin: auto;
position: absolute;
}
#center {
background: #DFDFEB url(../images/body/top.jpg) no-repeat;
width: 760px;
margin: 0 auto;
}
#right {
background-color: red;
}
Thanks in advance! Hello, I'm working now on div layout that contains 3 sections (header, body, footer) in one centered wrapper with border (divs with background imgs). My problem is: - divs that are in fact borders (id="l_outerborder_b" and id="r_outerborder_b") don't stretch when main container (id="body_content_text") grows. Here is a html code: Code: <!--BEGIN TEMPLATE HEADER -->
<!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 href="template.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="template.js" />
</head>
<body onload="onloadprocedures()">
<div id="main_container">
<div id="template_header">
<div id="tl_outerborder"></div>
<div id="t_outerborder"></div>
<div id="tr_outerborder"></div>
<div id="l_outerborder_h"></div>
<div id="header_content">
<div id="logo"><img src="img/logo.png" alt="" /></div>
<div id="slogan"><img src="img/slogan.png" alt="Centrum zdrowia" /></div>
</div>
<div id="r_outerborder_h"></div>
</div>
<!-- END TEMPLATE HEADER -->
<!-- BEGIN TEMPLATE BODY -->
<div id="template_body">
<div id="l_outerborder_b"></div>
<div id="body_content">
<div id="body_content_text">
<p>TEST</p>
</div>
</div>
<div id="r_outerborder_b"></div>
</div>
<!-- END TEMPLATE BODY -->
<!-- BEGIN TEMPLATE FOOTER -->
<div id="template_footer">
<div style="clear:both"></div>
<div id="l_outerborder_f"></div>
<div id="footer_content"></div>
<div id="l_outerborder_f"></div>
<div id="bl_outerborder"></div>
<div id="b_outerborder"></div>
<div id="br_outerborder"></div>
</div>
</div>
</body>
</html>
<!-- END TEMPLATE FOOTER -->
and CSS: Code: @charset "utf-8";
/* CSS Document */
body {
background-color:#FFFFFF;
font-family:Tahoma, Verdana, "Times New Roman", Arial;
font-size:12px;
}
a:link {text-decoration: none} /* unvisited link */
a:visited {text-decoration: none} /* visited link */
a:hover {text-decoration: none} /* mouse over link */
a:active {text-decoration: none} /* selected link */
#main_container {
position:relative;
margin:auto;
width:960px;
height:auto;
}
#template_header {
float:left;
position:relative;
width:960px;
height:300px;
}
#header_content {
float:left;
position:relative;
width:900px;
height:270px;
}
#logo {
width:310px;
height:130px;
position:relative;
float:left;
top:0px;
left:0px;
}
#slogan {
width:580px;
height:100px;
position:relative;
float:left;
top:0px;
left:0px;
}
#tl_outerborder {
float:left;
position:relative;
background-image:url(img/tl_outerborder.png);
width:30px;
height:30px;
}
#t_outerborder {
float:left;
position:relative;
background-image:url(img/t_outerborder.png);
width:900px;
height:30px;
}
#tr_outerborder {
float:left;
position:relative;
background-image:url(img/tr_outerborder.png);
width:30px;
height:30px;
}
#l_outerborder_h {
float:left;
position:relative;
background-image:url(img/l_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:270px;
}
#r_outerborder_h {
float:right;
position:relative;
background-image:url(img/r_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:270px;
}
#body_content {
float:left;
position:relative;
width:900px;
overflow:hidden;
}
#body_content_text {
float:left;
position:relative;
width:600px;
margin: auto;
overflow:hidden;
}
#l_outerborder_b {
float:left;
position:relative;
background-image:url(img/l_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:inherit;
}
#r_outerborder_b {
float:right;
position:relative;
background-image:url(img/r_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:inherit;
}
#l_outerborder_f {
float:left;
position:relative;
background-image:url(img/l_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:inherit;
}
#r_outerborder_f {
float:right;
position:relative;
background-image:url(img/r_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:inherit;
}
#template_body {
float:left;
position:relative;
width:960px;
overflow:hidden;
}
#bl_outerborder {
float:left;
position:relative;
background-image:url(img/bl_outerborder.png);
width:30px;
height:30px;
}
#b_outerborder {
float:left;
position:relative;
background-image:url(img/b_outerborder.png);
width:900px;
height:30px;
}
#br_outerborder {
float:left;
position:relative;
background-image:url(img/br_outerborder.png);
width:30px;
height:30px;
}
Thanks in advance for info how to stretch those doomed divs EDIT: Here is layout concept. URL hTTp://qsrc.pl/layout.jpg Hey. While I know some basics of css and html, I generally get bored after the design process lol, so have very little experience actual coding. Basically this is what the end product im looking is forl img266.imageshack.us/img266/8638/helpjj1.jpg The only problem is, I have no idea how to nest (?) that in there, with the text in there as well. I'm also looking for it to stay in the middle on the right there, with the box going larger or smaller. Heh... I would appreciate it soooo much is someone could point me in the right direction. Thanks for your time Tom hey! I am having trouble putting a footer on a website because for some reason 2 of my divs are not sticking in the larger 'content' box. I think it has to do with the float definition but cant seem to figure it out. Here is the basic structure i have. is this wrong? Code: <div wrapper>
<div header>
<div logo></div>
<div menu></div>
</div>
<div content>
<div splash></div>
<div float left> </div>
<div float right></div>
</div>
</div>
The issue is that <float left> and <float right> are not staying inside the <content> div and my footer ends up in the middle of the page. I wish i could post the webpage but im a new user. Thanks for your help hi! please can some one help me with followin... i would like to have 2 blocks in line (like one row, 2 colums). First one (left one) have background which is 285px wide. i tried with 2 divs like this: <div style="display:inline; width:285px ; background-image: url(bg.gif);">left content</div> <div style="text-align:right; display:inline; width:200px>right content</div> and IE renders it ok (for me) but firefox ignores "width" of divs and outputs "right content" right after "left content" text. thanks in advance!! Tomislav Basically, what i'm trying to work out is if the following is possible. Code:
.mainBodyColor {
background-color : #FFFFFF ;
color: #000000;
}
.mainBodyFont10pt {
font-size: 10pt;
<mainBodyColor>
}
.mainBodyFont14pt {
font-size: 14pt;
<mainBodyColor>
}
where <mainBodyColor> is a nested call to the style in some way.
etc etc etc
How do i go about nesting/including the mainBodyColor styling within the mainBodyFont10pt style? I know that the following doesn't work Code: <font class="mainBodyFont10pt" class="mainBodyColor "> Some text to go in here</font> What I'm trying to do is have in one place the colour and include it into many styles, so if i want to change the colour scheme of the site i just have to change it in one spot and i know that the whole site will change. Thanks in advance. Hi all I'm learning how to do things in DIVs rather than tables. One thing I'm slowly realising is that DIVs don't naturally nest like tables do. Please see he http://www.mitya.co.uk/csstest As you can see the master DIV (grey border) doesn't surround the inner DIVs naturally as a table would. Presumably this isn't the nature of DIVs and I just have to set heights instead? Thanks in advance This is driving me crazy and I can't figure it out. I have a "content" div that is a container for 2 other div's (a sidebar and a main content area). For some reason it isn't rendering in the proper place; it's rendering at the top of the page instead of under the navigation (if I don't assign a height to it it doesn't render at all). It also isn't extending past the end of the other 2 div's to reach the footer. I have tried adding overflow hidden to it but it just makes the other 2 divs not render at all. Any help is greatly appreciated. Here is the HTML and the CSS is below it. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS Portal - Layout Generator</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<p>This is the Header</p>
</div><!-- /#header -->
<div id="navigation">
<ul>
<li><a href="#" >Home</a></li>
<li><a href="#" >About</a></li>
<li><a href="#" >Contact</a></li>
<li><a href="#" >Links</a></li>
</ul>
</div><!-- /#navigation -->
<div id="content">
<div id="leftcolumn">
<div class="box_blue">
<div class="box_header_blue">Hello, World!</div><!-- /.box_header_blue -->
<div class="box_content_blue">
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Aliquam scelerisque eros at est lobortis eget adipiscing felis sodales.</li>
<li>Sed faucibus hendrerit ante, vitae volutpat tellus suscipit sit amet.</li>
<li>Quisque rutrum arcu non ipsum fringilla dapibus.</li>
<li>Aliquam aliquam arcu sit amet nisi viverra facilisis.</li>
</ul>
</div><!-- /.box_content_blue -->
</div><!-- /.box_blue -->
</div><!-- /#leftcolumn -->
<div id="main">
<p>This is the main content</p><br /><br />
<p><a href="layouts/121836.htm">
<img border="0" src="layouts/html.png" width="16" height="16"> HTML File</a></p>
<p><a href="layouts/121836.css">
<img border="0" src="layouts/css.png" width="16" height="16"> CSS File</a></p>
<p>To download, right click and choose 'Save Target as...'</p>
<p> </p>
<p>If you use one of these layouts, please consider linking to CSS Portal.<br />
http://www.cssportal.com</p>
</div><!-- /#main -->
</div><!-- /#content -->
<div id="footer">
<p>This is the Footer</p>
</div><!-- /#footer -->
</div><!-- /#wrapper -->
</body>
</html>
Code:
* { padding: 0; margin: 0; }
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
a{
text-decoration: none;
color: inherit;
}
ul {
list-style: none;
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
background: url('images/bg.png') fixed;
}
p {
padding: 10px;
}
#wrapper {
margin: 0 auto;
width: 1000px;
}
#header {
color: #333;
height: 200px;
background: url('images/header.png') fixed;
}
#footer {
height: 100px;
clear: both;
color: #333;
background: #6B6659;
}
#navigation {
float: left;
width: 1000px;
height: 35px;
color: #333;
background: #6B6659;
background: #b5bdc8; /* old browsers */
background: -moz-linear-gradient(top, #b5bdc8 0%, #828c95 36%, #28343b 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b5bdc8), color-stop(36%,#828c95), color-stop(100%,#28343b)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5bdc8', endColorstr='#28343b',GradientType=0 ); /* ie */
line-height: 35px;
}
#navigation li {
display: inline;
float: left;
padding: 0 10px;
color: #dddddd;
}
#content {
background: #f6f9fa repeat;
color: #545454;
margin: 0 auto;
box-shadow: 2px 0px 3px rgba(0,0,0,.8), -2px 0px 3px rgba(0,0,0,.8);
-moz-box-shadow: 2px 0px 5px rgba(0,0,0,.8), -2px 0px 5px rgba(0,0,0,.8);
-webkit-box-shadow: 2px 0px 3px rgba(0,0,0,.8), -2px 0px 3px rgba(0,0,0,.8);
position: relative;
}
#leftcolumn {
color: #333;
background: #EBE3CD;
width: 200px;
float: left;
padding: .5em;
}
#main {
color: #333;
background: #fff;
width: 770px;
float: right;
padding: 8px;
}
.box_blue {
-moz-border-radius: 1.2em 1.2em 1.2em 1.2em;
-moz-box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.6);
margin: 1.6em 0;
}
.box_header_blue {
background-color: rgb(23, 71, 115);
color: rgb(255, 255, 255);
font-weight: bold;
line-height: 3em;
text-align: center;
font-size: 1.2em;
-moz-border-radius-topleft: 1.2em;
-moz-border-radius-topright: 1.2em;
border-right: 1px solid rgb(0, 0, 50);
border-width: 1px; border-style: solid;
border-color: #86B1E3 rgb(0, 0, 50) rgb(0, 0, 50);
text-shadow: 1px 1px 1px rgb(16, 16, 16);
background-image: -moz-linear-gradient(center top , rgb(45, 90, 141), rgb(71, 93, 167) 50%, rgb(43, 75, 128) 51%, rgb(45, 93, 138));
}
.box_content_blue {
padding: .5em;
background: -moz-linear-gradient(top, #f1f1f1, #fff 75%) #fff;
display: inline-block;
border-right: 1px solid rgb(0, 0, 50);
border-width: 1px;
border-style: solid;
border-color: rgb(152, 208, 237) rgb(0, 0, 50) rgb(0, 0, 50);
-moz-border-radius-bottomleft: 1.2em;
-moz-border-radius-bottomright: 1.2em;
}
.box_content_blue li {
padding: 10px 0;
border-bottom: 1px dotted #cccccc;
}
Hey guys. Does anyone know how to trigger haslayout when nesting floats inside other floats? I've been using a span parent with zoom:1 but there's probably a more robust way of doing so. Any thoughts? Hi all - This is a continuted discussion from this thread. I won't bother re-explaining, but I'm restarting this thread in the hopes to simplify the situation. I have to write out data from Coldfusion in columns rather than rows. This is a schedule with Time down the left side and Days across the top. In order to get this to display correctly, I'm using a nested tables method I found on goolge. Each Row is actually a Table within a table, where the nested table acts as a data cell, and the cells in the outer table are columns. In all my fiddling, I've ended up stumped with the following. I need this to display correctly in at least IE 5.5 and up, Netscape 7, and Firefox. A condensed version of the output is included below. Note that the tables do not end lined up. I need to be able to scale everything up or down and have it all line up (thus, everything is EMs). I originally tried to work with css borders, but found that it was even worse with that - i.e. each top or bottom border was adding pixels to the height of the cells, so where one row would have five items, it would appear "shorter" than another row with 10 items. I also tried using pixels throughout the script. I CAN get it to work when I do this, where everything lines up correctly, but I can't get it to scale! I have since moved to using an image at the top of each data output. Its closer, but still doesn't line up. The image is nothing more than a 1 pixel high gif - Just like this one. As you move down, they get further and further out of sync of the left most column. How can I get this working? I really don't understand CSS well enough, especially across browsers, in order to finish this. Again, here is the 1pixel high gif I used for the following code. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
<!--
TABLE {
padding: 0em;
font-size: .9em;
width: 9em;
}
TABLE.time-header {
table-layout: fixed;
}
TABLE.time {
table-layout: fixed;
}
TABLE.data {
table-layout: fixed;
}
TD {
vertical-align: top;
}
DIV {
overflow: hidden;
}
-->
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0">
<tr>
<td>
<table class="time-header" style="border-top:1px solid black; border-left:1px solid black; border-right:1px solid black;" cellpadding="0" cellspacing="0">
<tr>
<td>
<div style="height: 1em;">
</div>
</td>
</tr>
</table>
</td>
<td>
<table class="time-header" style="border-top:1px solid black; border-left:1px solid black; border-right:1px solid black;" cellpadding="0" cellspacing="0">
<tr>
<td>
<div style="height: 1em;">Monday 6/27
</div>
</td>
</tr>
</table>
</td>
<td>
<table class="time-header" style="border-top:1px solid black; border-left:1px solid black; border-right:1px solid black;" cellpadding="0" cellspacing="0">
<tr>
<td>
<div style="height: 1em;">Tuesday 6/28
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table class="time" style="border-left:1px solid black; border-right:1px solid black;" cellpadding="0" cellspacing="0">
<tr><td>
<div style="height: 2em;">
<div style="height: .1em;">
<img src="table-horiz.gif"><br>
</div>
09:00 AM
</div>
<div style="height: 2em; "></div>
<div style="height: 2em;">
<div style="height: .1em;">
<img src="table-horiz.gif"><br>
</div>
09:30 AM
</div>
<div style="height: 2em; "></div>
<div style="height: 2em;">
<div style="height: .1em;">
<img src="table-horiz.gif"><br>
</div>
10:00 AM
</div>
<div style="height: 2em; "></div>
<div style="height: 2em;">
<div style="height: .1em;">
<img src="table-horiz.gif"><br>
</div>
10:30 AM
</div>
<div style="height: 2em; "></div>
<div style="height: 2em; border-bottom: 1px solid black;">
<div style="height: .1em;">
<img src="table-horiz.gif"><br>
</div>
End
</div>
</td></tr>
</table>
</td>
<td>
<table class="data" style="border-left:1px solid black; border-right:1px solid black;" cellpadding="0" cellspacing="0">
<tr><td>
<div style="height: 8em;">
<div style="height: .1em;">
<img src="table-horiz.gif"><br>
</div>
1 hour
</div>
<div style="height: 2em;">
<div style="height: .1em;">
<img src="table-horiz.gif"><br>
</div>
15 min - topborder
</div>
<div style="height: 2em;">
15 min - notopborder
</div>
<div style="height: 4em;">
<div style="height: .1em;">
<img src="table-horiz.gif"><br>
</div>
30 minutes
</div>
<div style="height: 2em; border-bottom: 1px solid black;">
<div style="height: .1em;">
<img src="table-horiz.gif"><br>
</div>
End
</div>
</td></tr>
</table>
</td>
<td>
<table class="data" style="border-left:1px solid black; border-right:1px solid black;" cellpadding="0" cellspacing="0">
<tr><td>
<div style="height: 4em;">
<div style="height: .1em;">
<img src="table-horiz.gif"><br>
</div>
30 minutes
</div>
<div style="height: 4em;">
<div style="height: .1em;">
<img src="table-horiz.gif"><br>
</div>
30 minutes
</div>
<div style="height: 4em;">
<div style="height: .1em;">
<img src="table-horiz.gif"><br>
</div>
30 minutes
</div>
<div style="height: 4em;">
<div style="height: .1em;">
<img src="table-horiz.gif"><br>
</div>
30 minutes
</div>
<div style="height: 2em; border-bottom: 1px solid black;">
<div style="height: .1em;">
<img src="table-horiz.gif"><br>
</div>
End
</div>
</td></tr>
</table>
</td>
</tr>
</table>
</body>
</html>
I'm having a problem with the way my div tags are behaving in a page I am trying to build. I have all the div's nested properly (I think) but the problem is is that the footer is appearing right below the top banner. The footer is not nested in the div that contains the rest of the pages content it appears behind everything else actually. I have been messing with my style sheet and moving everything around to no avail. For some reason the div that contains all the content has a height of zero when it shouldn't. I have used similar page structure before on other pages but this is the first time im using two columns of free floating boxes as opposed to one solid column divided in two. I'm leaving the style sheet and the mark up below if you can figure it out that would be great. There is only one image and it shouldn't have anything to do with this problem. I will be eternally grateful to whoever can help me as this has made me seriously consider hitting my computer with a brick. Code:
// here's the stylesheet
body{
background: url('../images/mainbackground.jpg/') repeat fixed;
font-family: calibri, helvetica, 'sans serif';
line-height: 130%;
margin: 0px;
padding: 0px;
}
#banner{
background: #b34150 repeat-x 50% 100%;
border-bottom: 3px solid white;
padding: 0px 0px 0px 0px;
margin: 0px 0px 27px 0px;
height: 100px;
}
#nav{
float: right;
height: 100px
width: 90px;
margin: 0 auto;
padding:0;
}
#nav ul{
list-style: none;
display: inline;
line-height: normal;
}
#nav li{
background: #b34150;
float: left;
margin: 65px 10px 0px;
padding: 5px 20px 0px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
width: 50px;
height: 30px;
text-align: center;
font-size: 14pt;
}
#nav li a{
text-decoration: none;
color: white;
font-weight: bold;
text-shadow: 0px 3px 3px #000;
}
#nav li:hover{
background: #ec9aa5;
-moz-border-radius:0px;
border: 0px solid #eccdcd;
-moz-box-shadow: 0px 0px 35px #fff;
}
#content{
width: 900px;
margin: 0 auto;
background: none no-repeat;
}
#left_column {
float: left;
width: 700px;
margin: 0 auto;
}
#main{
background: url('../images/banner-back-top.jpg/') repeat-x top center #fff;
-moz-border-radius:0px;
-webkit-border-radius:0px;
-moz-box-shadow: 3px 3px 3px #888;
-webkit-box-shadow: 3px 3px 3px #888;
width: 650px;
padding: 8px 5px;
float: left;
}
#right_column {
float: right;
width: 175px;
margin: 0 auto;
}
#sidebar{
background: #fff;
-moz-border-radius:0px;
-webkit-border-radius:0px;
-moz-box-shadow: 3px 3px 3px #fff;
-webkit-box-shadow: 3px 3px 3px #fff;
width: 175px;
margin: 0 auto;
padding: 8px;
float: left;
}
#footer{
background: #b34150 repeat-x 50% 100%;
border-bottom: 3px solid white;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
height: 100px;
}
#footer_info {
background: #91323f;
text-align: left;
font: normal normal normal 75%/normal calibri, helvetica, sans-serif;
color: white;
float: left;
}
//And here is the mark up
<html>
<head>
<title>SL | Clothing</title>
<meta name="description" content="description" >
<link rel="stylesheet" type="text/css" href="resources/style.css">
<script type="text/javascript" src="resources/dropdown.js" ></script>
<link rel="canonical" href="">
</head>
<body>
<div id="banner"><img src="images/top.jpg" alt="" >
<div id="nav">
<ul>
<li style="background: #ec9aa5;"><a href="">Home</a></li>
<li><a href="" >Shirts</a></li>
<li><a href="" >Hats</a></li>
<li><a href="" >About</a></li>
<li><a href="" >Contact</a></li>
</ul>
</div>
</div>
<div id="content">
<div id="left_column">
<div id="main">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec urna nunc. Etiam eleifend massa sed orci bibendum iaculis. Donec pharetra mauris vitae odio porta pretium. Sed cursus lorem quis risus laoreet posuere vitae a turpis. Etiam porttitor venenatis velit, a interdum quam mattis vel. Donec in tortor sed felis commodo blandit. Integer vel mauris odio, tincidunt dapibus magna. Sed orci libero, dapibus ac bibendum vel, fermentum a augue. Cras lobortis viverra massa ac placerat. Praesent id lectus ante, sed volutpat felis. Fusce eget dolor a est pellentesque pharetra. Praesent malesuada, ligula at interdum consequat, nunc magna sagittis risus, id pellentesque libero ante id nisl. Fusce pretium, turpis sit amet ornare congue, metus nunc mollis dui, quis cursus tortor est eu lorem. Duis id erat erat. Aliquam eu nunc vel sem scelerisque venenatis in nec diam. Praesent tincidunt, mauris ut sollicitudin tincidunt, augue nunc condimentum tortor, sed tincidunt velit risus vel nisl. Vestibulum tincidunt consectetur libero, aliquet consectetur nulla hendrerit a.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec urna nunc. Etiam eleifend massa sed orci bibendum iaculis. Donec pharetra mauris vitae odio porta pretium. Sed cursus lorem quis risus laoreet posuere vitae a turpis. Etiam porttitor venenatis velit, a interdum quam mattis vel. Donec in tortor sed felis commodo blandit. Integer vel mauris odio, tincidunt dapibus magna. Sed orci libero, dapibus ac bibendum vel, fermentum a augue. Cras lobortis viverra massa ac placerat. Praesent id lectus ante, sed volutpat felis. Fusce eget dolor a est pellentesque pharetra. Praesent malesuada, ligula at interdum consequat, nunc magna sagittis risus, id pellentesque libero ante id nisl. Fusce pretium, turpis sit amet ornare congue, metus nunc mollis dui, quis cursus tortor est eu lorem. Duis id erat erat. Aliquam eu nunc vel sem scelerisque venenatis in nec diam. Praesent tincidunt, mauris ut sollicitudin tincidunt, augue nunc condimentum tortor, sed tincidunt velit risus vel nisl. Vestibulum tincidunt consectetur libero, aliquet consectetur nulla hendrerit a.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec urna nunc. Etiam eleifend massa sed orci bibendum iaculis. Donec pharetra mauris vitae odio porta pretium. Sed cursus lorem quis risus laoreet posuere vitae a turpis. Etiam porttitor venenatis velit, a interdum quam mattis vel. Donec in tortor sed felis commodo blandit. Integer vel mauris odio, tincidunt dapibus magna. Sed orci libero, dapibus ac bibendum vel, fermentum a augue. Cras lobortis viverra massa ac placerat. Praesent id lectus ante, sed volutpat felis. Fusce eget dolor a est pellentesque pharetra. Praesent malesuada, ligula at interdum consequat, nunc magna sagittis risus, id pellentesque libero ante id nisl. Fusce pretium, turpis sit amet ornare congue, metus nunc mollis dui, quis cursus tortor est eu lorem. Duis id erat erat. Aliquam eu nunc vel sem scelerisque venenatis in nec diam. Praesent tincidunt, mauris ut sollicitudin tincidunt, augue nunc condimentum tortor, sed tincidunt velit risus vel nisl. Vestibulum tincidunt consectetur libero, aliquet consectetur nulla hendrerit a.</p>
</div>
</div>
<div id="right_column">
<div id="sidebar">
Content Goes Here!
</div>
</div>
</div>
<div id="footer">
<div id="footer_info">Copyright 2010 SL CLothing LLC. Web Design and Layout by : Ian Auld</div>
</div>
</body>
</html>
Okay, so here's the issue... I've designed a site using css, and to get the flow I was looking for I had to use "absolute positioning" on some of the page elements. Every thing looks fine except I can't get the page to center in the browser window. I created a div that I used as a wrapper, centered the wrapper... and most everything works fine... the exceptions are the elements that are absolutely positioned... they won't nest within my wrapper div. If I change the type of positioning of ALL the elements on the page to relative then they nest... but I don't want to have to use relative positioning for all my elements. Any words of wisdom? Hi, I'm trying to create a full CSS layout. It's basically a three column design: http://www.definitedigital.com/bookfair/ http://www.definitedigital.com/bookfair/style.css However, on Mozilla the blue border around the main content area with the Copyright disclaimer at the bottom of the page doesn't show correctly. On IE it shows just fine. I'd be really thankful if someone could take a look at my CSS. I'm quite new at designing completely with CSS and don't really know if the approach I just took is the best for what I'm trying to achieve. Thanks, Ralph Hi all, I've tried searching around for this issue, but I've not found any help so far and it's driving me nuts. I hope someone here can advise. This is an abridged version of the site's code for example: Code: <style type="text/css">
<!--
#main1 {
padding: 0px;
margin: 0px;
}
#left {
width:260px;
margin:0;
padding:0;
float: left;
}
#left-top {
background-image: url(../images/panel-top-left.gif);
background-repeat: no-repeat;
background-position: center top;
height: 16px;
margin: 0px;
padding: 0px;
}
#left-middle {
background-image: url(../images/panel-middle-left.gif);
background-repeat: repeat-y;
padding-right: 20px;
padding-left: 20px;
padding-bottom: 2px;
}
#left-bottom {
background-image: url(../images/panel-bottom-left.gif);
background-position: center;
height: 18px;
}
#logo {
background-image: url(../images/swalingslogo.gif);
background-position: center top;
width: 260px;
height: 120px;
background-repeat: no-repeat;
}
/* Navigation List */
#navlist
{
padding-left: 0;
margin-bottom:10px;
width: 217px;
}
#navlist li
{
list-style: none;
margin-bottom:4px;
padding: 0;
font-size:1.2em;
line-height:1.8em;
width:217px;
height:32px;
background-image:url(../images/nav2.gif);
background-repeat:no-repeat;
margin-top: 0;
margin-right: 0;
margin-left: 0;
}
#navlist li a:link, #navlist li a:visited {
display:block;
text-decoration: none;
color:#039;
width:207px;
height:32px;
font-weight:bold;
padding-top: 2px;
padding-right: 5px;
padding-bottom: 2px;
padding-left: 5px;
}
#navlist li a:hover {
text-decoration: none;
color:#FF6600;
}
/* Testimonials */
div#fscroller {
width:200px;
height:200px;
background-image:url(../images/bg-testimonials.gif);
background-repeat:no-repeat;
margin-left:8px;
}
div#fscroller p {
margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
margin-bottom: 5px;
}
/* Middle Column */
#middle {
margin-top: 0;
margin-right: 0px;
margin-bottom: 0;
padding-right: 0px;
padding-left: 0px;
padding-top: 0px;
text-align: justify;
margin-left: 260px;
}
#middle #top-left {
background-image: url(../images/panel-top-rightleft.gif);
height: 16px;
font-size: 2px;
background-repeat: no-repeat;
}
#middle #top-right {
float: right;
margin-top: -16px;
background-image: url(../images/panel-top-rightright.gif);
height: 16px;
width: 20px;
font-size: 2px;
}
#middle a {
color: #003399;
}
#middle a:hover {
text-decoration: none;
}
/** Country Titles **/
#middle h2#unitedkingdom {
background-image: url(../images/title-unitedkingdom.gif);
background-repeat: no-repeat;
height: 26px;
width: 201px;
margin-bottom: 6px;
}
#middle h2#antigua {
background-image: url(../images/title-antigua.gif);
background-repeat: no-repeat;
height: 26px;
width: 128px;
margin-top: 16px;
margin-bottom: 6px;
}
/* Minisite Links */
div.minisite {
float: left;
}
div.minisite span {
display: none;
}
div.minisite a {
background-position: top;
background-repeat: no-repeat;
height: 168px;
width: 190px;
display: block;
}
div.minisite a:hover {
background-position: bottom;
}
a#minisite-swimminglessons {
background-image: url(../images/swimming-lessons-uk.jpg);
}
.clear {
clear:both;
}
.hidden {
display: none;
}
.notopgap {
margin-top: 0;
}
.nobottomgap {
margin-bottom: 0;
}
.inside {
background: #EFEFEF;
padding-left: 10px;
padding-right: 10px;
}
-->
</style>
<div id="main1">
<div id="left">
<!-- Logo -->
<div id="logo"></div>
<div id="left-top"></div>
<div id="left-middle">
<!-- Navigation -->
<!--#include file="../inc/nav2.asp" -->
<!-- Testimonials -->
<!--#include file="../inc/testimonials.asp" -->
<!--#include file="../inc/special-offers.asp" -->
</div>
<div id="left-bottom"></div>
</div>
<!-- Middle Column -->
<a name="skipnav" class="hidden"></a>
<div id="middle">
<div class="top-left"></div><div class="top-right"></div>
<div class="insideleft"><div class="insideright"><div class="inside"><div class="gap-saver"></div>
<!-- UK Sites -->
<h2 id="unitedkingdom"><span class="hidden">United Kingdom</span></h2>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swimming Lessons</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Training</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Residential Courses</span></a></div>
<div class="clear"></div>
<!-- Antigua Sites -->
<h2 id="antigua"><span class="hidden">Antigua</span></h2>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Soccer</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Parties and Events</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings International School of Swimming</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Babysitting and Nanny Agency</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings School of Rugby</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings School of Volleyball</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Training</span></a></div>
<div class="clear"></div>
<div class="gap-saver"></div>
</div></div></div>
<div class="bottom-left"></div><div class="bottom-right"></div>
</div>
<!-- End Middle Column -->
</div>
I've placed the Country Title in an H2 tag, then beneath that, each anchor is enclosed in a DIV, and is set as a left-floated block. Then I placed a spacer DIV (clear: both) to create a new line, then repeated with H2 and links. This all works fine in Firefox, IE7 and Opera, but of course IE6 is being a pig as usual. The spacer DIV is pushed to sit alongside the bottom of the left column, and I can't figure out how to (or if I can) stop this. I can't add in links properly, so I hope this is acceptable under the rules -- The site in question is: www.swalings .com/swalings/index4.asp and here's a screenshot of IE6 behaviour: www.swalings .com/images/swalings-ie6-troubleshoot.jpg Hopefully that's enough information to go on, please let me know if there's something I missed out. Thanks a lot! Rob |
|||||||