|
CSS - Issue With 3 Column Liquid Css Based Template
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 Similar TutorialsHello on this page, the author shows a 3 Column Liquid Layout based on CSS percentage use. http://matthewjamestaylor.com/blog/perfect-3-column.htm The column layout is 2,1,3 (center page comes first in the html code). He states "The columns can also be configured to any other order if required." How to do the column configured as 1,2,3? (left, middle, right)? 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 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!! 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-->
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;}
say you have a page with 2 main columns inside a container. the right column is a sidebar. both are supplied content dynamically. i'd like the container (inclusive) to be the height of the content column (as determined by its children), and the sidebar should scroll (vertically) its content based on that size. there's a (non-functional) example attached. if you run it you can see the container takes the height of the sidebar - it (the bordered container) should end at the bottom of the content div, and the sidebar should scroll. it's laid out using floating divs, but tables would be fine; javascript is not (per client). any ideas would be welcome. tyia. Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.container {
border : 1px solid #F90; /* just to show container height */
}
.content {
float : left;
width : 400px;
height : 100%;
}
.sidebar {
float : left;
width : 400px;
height : 100%;
}
.scroller {
overflow : scroll;
height : 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<p>Random content</p><p>Random content</p><p>Random content</p><p>Random content</p>
<p>Random content</p><p>Random content</p><p>Random content</p><p>Random content</p>
<p>Random content</p><p>Random content</p><p>Random content</p><p>Random content</p>
</div>
<div class="sidebar">
<div>Sidebar</div>
<div class="scroller">
<p>This content should scroll.</p><p>This content should scroll.</p><p>This content should scroll.</p>
<p>This content should scroll.</p><p>This content should scroll.</p><p>This content should scroll.</p>
<p>This content should scroll.</p><p>This content should scroll.</p><p>This content should scroll.</p>
<p>This content should scroll.</p><p>This content should scroll.</p><p>This content should scroll.</p>
<p>This content should scroll.</p><p>This content should scroll.</p><p>This content should scroll.</p>
<p>This content should scroll.</p><p>This content should scroll.</p><p>This content should scroll.</p>
<p>This content should scroll.</p><p>This content should scroll.</p><p>This content should scroll.</p>
<p>This content should scroll.</p><p>This content should scroll.</p><p>This content should scroll.</p>
<p>This content should scroll.</p><p>This content should scroll.</p><p>This content should scroll.</p>
</div>
</div>
<div style="clear:both"></div>
</div>
</body>
</html>
Hi, 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! Hi there, I have run out of ways to figure out this problem. I have incorporated a Blog into my website: http://www.kohlrbaby.com/blog/ It works fine in IE but not in FF. For some reason the the #contentHolder is not reading the #leftcontent and is not extending. If I try adding height: 100%; this corrects the problem for the blog page, but messes up the look of the rest of my site. Any suggestions? Help greatly appreciated!!! Here is the applicable css code: #contentHolder{ PADDING-TOP: 0px; PADDING-bottom: 30px; PADDING-left: 0px; PADDING-right: 0px; BORDER-RIGHT: #000000 1px solid; BORDER-Bottom: #000000 1px solid; BORDER-LEFT: #000000 1px solid; MARGIN-LEFT: auto; MARGIN-RIGHT: auto; WIDTH: 650px; POSITION: relative; BACKGROUND-COLOR: #ffffff; text-align: center; } #leftcontent p { padding: 10px 30px 0px 30px; line-height: 1.75em; text-align: left; } #rightcontent p { padding: 10px 30px 0px 30px; font-size:10px; text-align: left; line-height: 1.75em; } #leftcontent { float:left; width: 65%; background:#fff; margin-right:15px; padding-bottom:20px; BORDER-right:#000000 1px solid; POSITION: relative; } #rightcontent, #leftcontent { padding: 10px 30px 0px 30px; line-height: 1.75em; text-align: left; } h3{ line-height: 1em;} #rightcontent { line-height: 1em; } #rightcontent ul{ list-style: none; text-align: left; font-size:10px; } #rightcontent ul li { margin-bottom: 5px; } .post { border-bottom: 1px solid #000; padding-bottom: 3px; } I have a two column layout (inside a DIV/container, not full page) that works fine in Firefox but the right column is veering/starting about 50ish pixels left into the left column. Below is the CSS syntax used. Any ideas on a fix or how to properly write a two column layout that works for most/all browsers? TIA Code:
#content_left {
float:left;
width:345px;
padding:0px;
}
#content_right {
float:right;
width:315px;
padding:0px;
}
I have a two column page and need to get the green background of the side column to meet the footer. I have looked at some solutions but to no avail. Can anyone look at the page here? I would prefer to have the bottom picture stick to the bottom of the column leaving the logon below the menu so I can add further items in between. Hello - I'm new to CSS and am attempting to design a simple 3-colum page with a banner and a footer. Everything is working fine except the rightmost column content does not begin until the line after the bottom of the middle column. Left column is working fine. Everything is very simplistic at this point so I'm not sure what could be the problem. Here is the CSS: #wrapper { width: 960px; background: url(images/right_nav_color.gif) repeat-y right top; } #leftcolumn { float: left; width: 200px; margin-top: 10px; } #rightcolumn { float: right; width: 200px; background-color: #e3e3e3; } #main { margin-left: 220px; margin-right: 220px; margin-top: 10px; } Any help is appreciated. I'm having two issues with IE on my site. 1. IE is displaying the body background image (bg.jpg) throughout the entire page. 2. IE is pushing the sidebar way down. Neither of these issues exist in Firefox. I think the second issue may have something to do with the first issue. Here is the relevant code. Code: html,body * {
padding:0px;
margin:0px;
}
body {
background-image:url(images/bg.jpg);
background-repeat:repeat-x;
background-color:#fb7d21;
margin:0 auto;
height:100%;
}
div#container {
width:792px;
margin:0 auto;
background-image:url(images/filler.jpg);
background-repeat:repeat-y;
}
div#header {
width:792px;
height:109px;
background-image:url(images/header.jpg);
background-repeat:no-repeat;
margin-top:20px;
}
div#content {
float:left;
width:570px;
padding:0 0 0 10px;
margin-top:-40px;
}
div#sidebar {
float:right;
width:212px;
margin-top:-95px;
}
div#footer {
clear:both;
width:792px;
height:84px;
background-image:url(images/footer.jpg);
background-repeat:no-repeat;
}
You can see the issues on my site here. Any idea what is causing this? Thanks in advance. Hi Folks, Newbie here, first post. I need to figure out a way for the left border on the right column, its a DIV floated to the right (contains an image of a brain which has a certain irony!) to expand all the way down the page when you set the text to "largest" with your browser. Example: http://www.cre8webdesign.co.uk/services.html Can anyone help? Thanks Darren. Hi, Basically, this is one of my site pages: http://www.zombiemod.com/rm/nina2/about.html I want the white box in the middle to auto expand its height so it fills the vertical height of the page. Ive tried setting its height to 100% but that doesnt seem to work. This is my CSS for the white space: Code: #frame {
position: relative;
padding: 2px 15px 20px;
/* background-color: #000;*/
color: #000000;
height: 410px;
}
Can anyone help me with this? Im not great with this stuff, so I just want the easiest way possible, whether it is javascript or css. Running into some issues with a design. I have provided a link to show what is happening. at the end, with some code, css, etc The design calls for using up as much space width wise as possible, so that if the resolution gets bigger, the content in the main content section will expand. There is a left side nav, which is a fixed width, and then the main content section, which I do not know the width. both are floated left. The problem is, when the content in the main section expands to get bigger, in Firefox, will expand the size of the main section div to 100% of the screen before the text will flow to the next line, and thus, throws the div (which is floated) down to the next line. Without setting a width of the main content div, and wanting to keep the left side nav a specific width, I am not sure how to avoid this problem. I just happened check in IE7, and it seems to do what I want (I haven't checked IE6). I have posted a screenshot of what happens. On the left side, is IE7, at a bigger resolution also (1280) right side of screenshot is firefox, at a smaller resolution (1024) http://ricebox.whiteazn.com/liquid.png here is some code. Also, the CSS will seem to be declared more than once, but that is because they are split up between structure.css, text.css, and theme.css. I also only put in the CSS for the main body part. Any help would be appreciated. ======================= html4strict Code: Original - html4strict 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" lang="en"> <head> <title>Control Panel: Company Name</title> <meta http-equiv="Content-Language" content="en-us" /> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" /> <link href="css/global.css" rel="stylesheet" type="text/css" /> <link href="scripts/p3p.xml" rel="P3Pv1" /> </head> <body> <div id="header"> <div class="logo"> <img src="images/header/logo.jpg" width="197" height="67" alt="alt" title="title" /> </div> <div class="nav"> <div class="parent-drill"> </div> <div class="manage-nav"> <ul id="main-nav"> <li><a href="?ebxid=221" class="inventory">Inventory</a></li> <li class="selected"><a href="?ebxid=700" class="leads">Leads</a></li> <li><a href="?ebxid=500" class="analytics">Analytics</a></li> </ul> </div> </div> <div class="details"> <div class="account-info"> Company Name <span class="rep">First Name</span> </div> <div class="account-details"> <ul id="account-nav"> <li><a href="?ebxid=725">Settings</a></li> <li><a href="?ebxid=244">Account</a></li> <li class="logout"><a href="?logout">Logout</a></li> </ul> </div> </div> </div> <div id="header-seperator"> </div> <div id="main-body"> <div class="top"></div> <div class="bot"></div> <div id="section-nav-narrow"> <div class="title-hdr"><h3>Leads</h3></div> </div> <div id="body-content">main page<br />main page<br />main page<br />main page<br />main page<br />main page<br /> main page<br />main page<br />main page<br />main page<br />main page<br />main page<br /> main page<br />main page<br />main page<br />main page<br />main page<br />main page<br /> main page<br />main page<br />main page<br />main page<br />main page<br />main page<br /> main page main page main page main page main page main page main page main page main page main page main page main page main page main page main page main page main page main page main page main page main page main page main page main page </div> </div> </body> </html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> CSS Code: Original - CSS Code #main-body { overflow: hidden; margin-left: 10px; position: relative; } #main-body #section-nav-narrow { float: left; width: 133px; } #main-body .title-hdr { margin: 6px 3px 0 3px; padding: 0 0 6px 9px; } #main-body #section-nav-narrow .title-hdr { width: 118px; } #main-body .top { position: absolute; top: 0; left: 0; width: 133px; height: 8px; } #main-body .bot { position: absolute; bottom: 0; left: 0; width: 133px; height: 1px; } #main-body #body-content { float: left; min-width: 860px; } #main-body { background: #fff url(../images/cp_template/left_nav.gif) left top repeat-y; } #main-body #section-nav-narrow { } #main-body .top { background: #fff url(../images/cp_template/left_nav_top.jpg) left top no-repeat; } #main-body .bot { background: #fff url(../images/cp_template/left_nav_bot.gif) left top no-repeat; } #main-body .title-hdr { background-color: #fff; color: #1b5094; } #main-body #section-nav-narrow h3 { } #main-body .title-hdr h3 { font-weight: bold; font-family: Arial, Helvetica, sans-serif; font-size: 11px; }
I'm getting ready to tackle a new project, it will be a hard one indeed. There will be two phases to the design. First a full css layout, I'm most likely going with a three column, header and footer layout. The left column will give the appearance it is outside the main design but it will be inside. I'll be using it to hold an events schedule on all the pages. The second phase I will do my best to attempt to integrate the layout as a WP theme so that it has all the WP back end control for a CMS but it will look nothing like a blog. I'm curious before I get started though should I go with a liquid design using % and ems measurements or a fixed width design? I know that there are advantages and disadvantages to both but which one is more widely used in website design these days I don't want it looking small on a high res monitor but I also don't want 800x600 users to be scrolling the width either. One more thing, The look I want is for the header and footer to stretch the entire width of the browser window and I know that is accomplished with liquid design but can it be with fixed width too? LB I would like to create a 2-column layout with a content area on the left and a "sidebar" area on the right. Pretty standard, right? Now the trick: on some pages, the sidebar will be absent, and I want the content area to then overflow the whole page width. I tried the following: Code: <div style="background-color: red; float: left;">content area text</div> <div style="background-color: blue; width: 200px; float: right;">sidebar text</div> When div #2 is excluded, div #1 of course expands to take up the whole page width. So that works. The problem is that when they're both present, and div #1 has a lot of text, it just pushes div #2 down a line. Note: The reason div #2 will sometimes not be present is that Drupal is generating the page, and plain leaves out div #2 if there's no content in it. It's not just empty -- it's not even included in the page. Can anyone help me accomplish this? I've looked at a lot of liquid layouts, but none seem to do quite this. Hello css gurus. I'm trying to fit a flash movie with 100% height in a liquid layout but i cant get rid of scroll bars. i have tied to explain the problem in this image: http://i(dot)imgur(dot)com/PhvSZ.gif (sorry new members are not allowed to post with links) in that image you can see its fine in case (1) but in case (2) when i add a header div on top, flash movie doesnt fill available space. Can anyone tell me how can i fix it with a heading div on top? Thanks. I am redesigning a web application . I want to introduce color themes in it. When i click on a particular theme i want a new look to appear including buttons. For this i m using the below css code which uses only 3 button images(single image sliced in 3)wherin only the background color is to be changed thru css and new button gets created. Code: body {
margin: 0;
padding: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
}
.btn {
float: left;
clear: both;
background: url(images/btn_left.png) no-repeat;
padding: 0 0 0 10px;
margin: 5px 0;
}
.btn a{
float: left;
height: 40px;
background: url(images/btn_stretch.png) repeat-x left top;
line-height: 40px;
padding: 0 10px;
color: #fff;
font-size: 1em;
text-decoration: none;
}
.btn span {
background: url(images/btn_right.png) no-repeat;
float: left;
width: 10px;
height: 40px;
}
.btn_addtocart { background-color: green; }
HTML code:
<div class="btn btn_addtocart"><a href="#>Submit</a><span></span></div>
<div class="clear"></div>
Background Color: Red
For eg in a login screen The earlier web application used: <input type="image" onclick="javascript:return validate()> wherin the validate function includes Code: function validate()
{
var user = document.login.loginid.value;
var pwd = document.login.loginid.value;
if(document.login.loginid.value.length==0)
{
alert("Enter user name");
return false;
}
if(document.login.password.value.length==0)
{
alert("Enter password");
document.login.password.focus();
return false;
}
return true;
}
I am not able to use javascript:return validate() with this new html code i.e. <div class="btn btn_addtocart"> <a href="#>Submit</a><span></span></div> <div class="clear"></div> Background Color: Red Please help me with a similar css to run the above javascript or an alternative javascript to run the above css code. i'm trying to write a liquit layout based in layers and css and have the next code: Code:
<style type='text/css'>
<!--
body{font-family:Verdana, Arial, Helvetica, sans-serif; margin:5px 5px 5px 5px; position:relative;}
#header{border:1px solid #000000; width:100%; height:60px; position:absolute; top:0px; left:0px; min-width:600px;}
#menu{border:1px solid #000000; position:absolute; top:60px; left:0px; width:15%; min-width:150px;}
#content{border:1px solid #000000; position:absolute; top:60px; left:15%; width:85%; min-width:450px;}
-->
</style>
and in the body: Code: <body> <div id='header'>header</div> <div id='menu'>menu links</div> <div id='content'>contents</div> the little problem here is thata due to the percentages used to determine the left position of the contents layer it overlaps with the menu layer when i resize the window but i've seen a lot of pages that do not behave this way... what am i missing???? |
|||||||