|
CSS - Problem With Positioning Attributes
Okay, so I am having some issues in positioning items with CSS properly. I have this div first:
Code:
#main
{
position: relative;
width: 927px;
margin-right: auto;
margin-left: auto;
background-image: url(/planetscuba/images/main.png);
background-repeat: repeat-y;
padding-top: 10px;
padding-left: 35px;
padding-right: 35px;
padding-bottom: 10px;
}
Then inside that tag I have 4 more tags, which are just columns of data. Code:
#navside
{
position: relative;
top: 0px;
left: 0px;
width: 150px;
border-right: #FFFFFF medium dotted;
border-bottom: #FFFFFF medium dotted;
padding-bottom: 10px;
}
#column1
{
position: absolute;
top: 15px;
left: 160px;
width: 222px;
text-align: center;
}
#column2
{
position: absolute;
top: 15px;
left: 397px;
width: 222px;
text-align: center;
}
#column3
{
position: absolute;
top: 15px;
left: 634px;
width: 222px;
text-align: center;
}
Now how I have it right now is the elements are all positioned correctly, but #main does not resize dynamically, which is a problem as I am adding data from a server in these columns, and the amount could change from time to time. In addition the way I am doing is more then likely bloated, but it's the only way I know how to do this. I have a navigation menu on the side which is #navside, then I want to display 3 columns of data, essentially one image and a couple words underneath each image in each column. Now this is all coming from a database, so the easiest way would be just to have the navbar on the side and then content in the rest of the #main div but I don't know how to properly position everything apart from each other without using mass amounts of tags. So to summarize, first problem is to be able to position everything properly so that #main resizes dynamically and then second would be to find some better way to do this. If you can help me on both that would be awesome. Thanks for your help in advance. Similar TutorialsI have problem with footer DIV in this layout (the order of DIV's in code after <body> should be - content, left, right, right2, header, footer - positioned centraly with fixed values): It needs to be sticked to fit after content of 4 column DIV's like it is in example. http://www.split.info/dev/less-content/ http://www.split.info/dev/more-content/ 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>Title of website</title>
<style type="text/css">
<!--
body {margin: 0px 0px 0px 0px; background-image:url(images/bg.jpg); background-position:center; background-repeat:repeat-y;}
#wrapper {width: 1000px; margin: 0 auto; text-align: left; position: relative;}
#contentPane {width: 468px; float: left; position: absolute; margin-left: 3px; padding: 0px 0px 0px 0px; background-color:#0099FF; left: 126px; top: 150px;}
#leftPane {width: 125px; float: left; left: 0px; position: absolute; background-color: #99FFFF; top: 150px;}
#rightPane {width: 173px; float: right; right: 226px; background-color:#999966; position: absolute; top: 150px;}
#rightPane2 {width: 220px; float: right; right: 0px; background-color:#99FF00; top: 150px; position: absolute;}
#headwide {background-image: url(images/head_bg.jpg); background-position: center; background-repeat: no-repeat; width: 100%; height: 142px; position: absolute; top: 0px;}
#header {margin: 0pt auto; width: 1000px; background-color:#CC6600; height: 142px; }
#footer {position: absolute; width: 100%; top: auto; bottom: 0px; background-color: #CCFFCC; height: 50px;}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="contentPane">Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
</div>
<div id="leftPane">Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
</div>
<div id="rightPane">Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
</div>
<div id="rightPane2">Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
</div>
</div>
<div id="headwide">
<div id="header">Header area</div>
</div>
<div id="footer"><strong>Content from above 4 column div's need to push footer DIV below (after them)! </strong>Footer area that is on bottom of div with biggest height (content, left, right or right 2 pane)... foooter follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns). Current state like it is in this document happens that if you add more data f.i. in content area (outside one screen), it will go trough footer... So footer can be either moved in code after rightpane2 div after end of wrapper. Pls help. Thx!</div>
</body>
</html>
Content from above 4 column div's need to push footer DIV below (after them)! Foooter need to follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns). Current issue like it is in this layout happens that if you add more data f.i. in content area (outside one screen), it will go trough footer... So in your resolution footer can be also moved in code after rightpane2 DIV, after end of wrapper. Pls help. Thx! Echo Hi I have a positioning problem. The test page is here www .treehuggercards .co .uk/drop+pnktest .htm - ok so if you can't find the link here are the two css files and the html: this styles the site: /* CSS Document */ Code:
/* Main Styles that apply to body */
body {
font-size: 11px;
font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
margin: 0px;
padding-left: 50%;
background: #f4f4f4 center repeat-y;
position: absolute;
}
/* This is the page container built and centered using -ve margins */
#container {
width: 700px;
margin-left: -350px;
}
/* The topmost faded bar */
#topbar {
width:auto;
background: #EEE;
height: 20px;
padding: 10px 5px 5px 2px;
font: normal 115%/1.25em Arial, Helvetica, sans-serif;
color: #7C484A;
text-align: right;
text-transform: capitalize;
}
/* This holds the two heading blocks, the title and the login form */
#headerwrapper {
width: auto;
border-top: medium solid #FFFFFF;
border-right: none;
border-bottom: 1px solid #26240F;
border-left: none;
background-image: ;
background-color:#FF99CC;
background-repeat: no-repeat;
background-position: right bottom;
height: 110px;
}
h1.name {
font-family:"Edwardian Script ITC";
color: #FF6699;
font-size: 450%;
line-height: normal;
font-weight: normal;
padding-left: 25px;
}
h1.subname {
font-size:300%;
font-family: "Edwardian Script ITC";
font-weight: normal;
padding-bottom: 5px;
line-height: .25em;
padding-left: 50px;
padding-top: 10px;
}
/* class that styles the holder div of the forms */
.userform {
width: auto;
color: #DD7CB4;
padding: 5px 0px 5px 3px;
background: #fbfbfb;
border:1px solid #efefef;
border-top: none;
text-align: justify;
margin-bottom: 1px;
}
/* This will style the login and search */
.userform input {
border: 1px solid #DDD;
font-family: verdana;
font-size: 10px;
color: #BBB;
font-weight: bold;
}
h1 {
font: 75% verdana;
color: #EEE;
margin: 5px;
}
h6 {
font: 10px verdana;
font-weight: bold;
color: #DDD;
margin: 0px;
padding: 0px;
margin-left: 8px;
}
/* This holds the tabs */
#tabholder
{
width: auto;
}
/* Container for the article box, and the pic box */
.articleboxouter {
width: auto;
padding: 0px 6px 0px 5px;
clear: both;
}
/* Content holder for the articles */
.articleboxinner {
width: auto;
line-height: 20px;
color: #DD7CB4;
padding: 15px 6px 0px 6px;
background: #fbfbfb;
border:1px solid #efefef;
text-align: justify;
height: 220px;
}
/* The title style for the main article */
.articleheader
{
font-size: 18px;
font-weight: bold;
border-bottom: 1px solid #CCC;
}
/* This will style the read more thing at the bottom */
.readmore {
text-align: right;
display: block;
width: auto;
}
/* This controls the main pic in the main article box */
.mainpiccontrol
{
border: 1px #DBB7DB solid;
float: left;
margin-right: 10px;
}
/* Container for the pic thumbnails */
.picboxouter {
width: auto;
padding: 0px 6px 0px 5px;
clear: both;
}
/* Content holder for the pic box */
.picbox {
width: auto;
line-height: 22px;
color: #DD7CB4;
padding: 5px 6px 6px 6px;
border:1px solid #efefef;
border-top: none;
text-align: center;
}
/* This controls the thumbnails in the picbox div */
.pickboxcontrol
{
border: 1px #DDD solid;
vertical-align: middle;
}
/* Sometimes, I don't want borders around my hyperlink images */
.noborder {
border: none;
}
/* For taming those leeeeeeetle arrows */
img {
vertical-align: text-bottom;
}
/* Style-up those ugly default hyperlinks */
a {
text-decoration: none;
padding: 0;
margin: 0;
color: #663366;
}
/* And their ugly hover states too */
a:hover {
text-decoration: underline;
}
/* Why should the humble footer be left out? */
#footer {
background-color: #CCC;
color: #fff;
text-align: center;
vertical-align: middle;
height: 20px;
padding-top: 5px;
clear: both;
}
/* This will contain the three columns */
#newsContainer2
{
width:auto;
background-color: #E0E0E0;
}
/* First column of the three columns */
.c1
{
width: 227px;
background-color: #F7F4F7;
border: 1px solid #DDD;
border-top: none;
line-height: 22px;
color: #DD7CB4;
float: left;
}
/* Second column of the three columns */
.c2
{
width: 230px;
float: left;
border-bottom: 1px solid #DDD;
line-height: 22px;
color: #DD7CB4;
}
/* Third column of the three columns */
.c3
{
width: 228px;
background-color: #F7F4F7;
border: 1px solid #DDD;
border-top: none;
line-height: 22px;
color: #DD7CB4;
float: right;
}
/* This controls the titles for each column */
.noteheader
{
width:auto;
border-bottom: 1px solid #DDD;
border-top: none;
color: #DD7CB4;
height: 24px;
font-family: verdana;
font-size: 11px;
font-weight: bold;
background: repeat-x;
}
/* And this gives the column text some breathing space */
.spacy
{
padding: 5px;
}
/* CSS Tabs */
#tabs8 {
float:left;
width:100%;
background:#F1F1F1;
font-size:93%;
line-height:normal;
border-bottom:1px solid #CCC;
}
#tabs8 ul {
margin:0;
padding:10px 10px 0 5px;
list-style:none;
}
#tabs8 li {
display:inline;
margin:0;
padding:0;
}
#tabs8 a {
float:left;
background:no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabs8 a span {
float:left;
display:block;
background: no-repeat right top;
padding:5px 15px 4px 6px;
color:#eee;
font-weight: bold;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs8 a span {float:none;}
/* End IE5-Mac hack */
#tabs8 a:hover span {
color:#591333;
}
#tabs8 a:hover {
background-position:0% -42px;
}
#tabs8 a:hover span {
background-position:100% -42px;
color: #888;
}
#tabs8 #current a {
background-position:0% -42px;
}
#tabs8 #current a span {
background-position:100% -42px;
color: #888;
}
/* End of CSS Tabs */
this styles the menu: Code:
/* CSS Document for menu */
/* Add a margin - for this demo only - and a relative position with a high z-index to make it appear over any element below */
#menu_container {
/*margin:25px 0 100px 15px;
position:relative; */
width:700px;
height:25px;
z-index:100;
}
/* Get rid of the margin, padding and bullets in the unordered lists */
#pmenu, #pmenu ul {padding:0; margin:0; list-style-type: none;}
/* Set up the link size, color and borders */
#pmenu a, #pmenu a:visited {
display:block;width:85px; /*alters the width of blocks*/
font-size:11px;
color:#fff;
height:25px;
line-height:24px;
text-decoration:none;
text-indent:10px;
border:1px solid #000;
border-width:1px 0 1px 1px;}
/* Set up the sub level borders */
#pmenu li ul li a, #pmenu li ul li a:visited {border-width:0 1px 1px 1px;}
#pmenu li a.enclose, #pmenu li a.enclose:visited {border-width:1px;}
/* Set up the list items */
#pmenu li {float:left; background:#FF99CC;}
/* For Non-IE browsers and IE7 */
#pmenu li:hover {position:relative;}
/* Make the hovered list color persist */
#pmenu li:hover > a {
background:#FF8FC2;
color:#FF6699;
text-decoration: underline;
}
/* Set up the sublevel lists with a position absolute for flyouts and overrun padding. The transparent gif is for IE to work */
#pmenu li ul {display:none;}
/* For Non-IE and IE7 make the sublevels visible on list hover. This is all it needs */
#pmenu li:hover > ul {
display:block;
position:absolute;
top:-11px;
left:58px; /*this alters the position of the sub blocks*/
padding:10px 30px 30px 30px;
background:transparent ;
width:100px;}
/* Position the first sub level beneath the top level liinks */
#pmenu > li:hover > ul {left:-30px; top:16px;}
/* get rid of the table */
#pmenu table {position:absolute; border-collapse:collapse; top:0; left:0; z-index:100; font-size:1em;}
/* For IE5.5 and IE6 give the hovered links a position relative and a change of background and foreground color. This is needed to trigger IE to show the sub levels */
* html #pmenu li a:hover {position:relative; background:#dfd7ca; color:#c00;}
/* For accessibility of the top level menu when tabbing */
#pmenu li a:active, #pmenu li a:focus {background:#dfd7ca; color:#c00;}
/* Set up the pointers for the sub level indication */
#pmenu li.fly {background:#FF6699
no-repeat right center;}
#pmenu li.drop {background:#FF6699 no-repeat right center;}
/* This lot is for IE5.5 and IE6 ONLY and is necessary to make the sublevels appear */
/* change the drop down levels from display:none; to visibility:hidden; */
* html #pmenu li ul {
visibility:hidden;
display:block;
position:absolute;
top:-11px;
left:80px;
padding:10px 30px 30px 30px;
background:transparent url(transparent.gif);}
/* keep the third level+ hidden when you hover on first level link */
#pmenu li a:hover ul ul{
visibility:hidden;
}
/* keep the fourth level+ hidden when you hover on second level link */
#pmenu li a:hover ul a:hover ul ul{
visibility:hidden;
}
/* keep the fifth level hidden when you hover on third level link */
#pmenu li a:hover ul a:hover ul a:hover ul ul{
visibility:hidden;
}
/* keep the sixth level hidden when you hover on fourth level link */
#pmenu li a:hover ul a:hover ul a:hover ul a:hover ul ul {
visibility:hidden;
}
/* make the second level visible when hover on first level link and position it */
#pmenu li a:hover ul {
visibility:visible; left:-30px; top:14px; lef\t:-31px; to\p:15px;
}
/* make the third level visible when you hover over second level link and position it and all further levels */
#pmenu li a:hover ul a:hover ul{
visibility:visible; top:-11px; left:80px;
}
/* make the fourth level visible when you hover over third level link */
#pmenu li a:hover ul a:hover ul a:hover ul {
visibility:visible;
}
/* make the fifth level visible when you hover over fourth level link */
#pmenu li a:hover ul a:hover ul a:hover ul a:hover ul {
visibility:visible;
}
/* make the sixth level visible when you hover over fifth level link */
#pmenu li a:hover ul a:hover ul a:hover ul a:hover ul a:hover ul {
visibility:visible;
}
/* If you can see the pattern in the above IE5.5 and IE6 style then you can add as many sub levels as you like */
</style>
this is the html: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Treehugger Cards</title>
<!--[if gte IE 5]>
<style>
#container {
margin-left: -351px;
}
</style>
<![endif]-->
<link rel="shortcut icon" href="" >
<link href="treestyle.css" rel="stylesheet" type="text/css" media="screen" />
<link href="dropstyle.css" rel="stylesheet" type="text/css" media="screen">
</head>
<body>
<!-- Master Container: Centered and 700px wide -->
<div id="container">
<!-- The topmost bar -->
<div id="topbar">
to arrange an appointment please call - </div>
<!-- End of top bar -->
<!-- This holds the main header -->
<div id="headerwrapper">
<!-- This is the site title -->
<h1 class="name">Treehugger Cards </h1>
<h1 class="subname">Handcrafted Cards & Wedding Stationery</h1>
<div>
<!-- This is the site slogan -->
<br />
</div>
</div>
<!-- End of headerwrapper -->
<!-- This hold the navigation tabs -->
<ul id="pmenu">
<li><a href="#">Home</a></li>
<li class="drop"><a href="#">Weddings<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#" class="enclose">Classic</a></li>
<li><a href="#">Hearts</a></li>
<li><a href="#">Conntry<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#" class="enclose">Compact</a></li>
<li class="fly"><a href="#">Digital<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#" class="enclose">Canon</a></li>
<li class="fly"><a href="#">Nikon<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#" class="enclose">Lenses</a></li>
<li><a href="#">Speedlight</a></li>
<li class="fly"><a href="#">Coolpix<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#" class="enclose">Coolpix S10</a></li>
<li><a href="#">Coolpix L2</a></li>
<li><a href="#">Coolpix S500</a></li>
<li><a href="#">Coolpix P5000</a></li>
<li><a href="#">Coolpix 4600</a></li>
<li><a href="#">Coolpix S6 Silver</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">D200</a></li>
<li><a href="#">D80</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">Minolta</a></li>
<li><a href="#">Pentax</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">SLR</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">Flash</a></li>
<li><a href="#">Video</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="drop"><a href="#">Occasions<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#" class="enclose">Tripods</a></li>
<li><a href="#">Films</a></li>
<li class="fly"><a href="#">Cameras<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#" class="enclose">Compact</a></li>
<li class="fly"><a href="#">Digital<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#" class="enclose">Canon</a></li>
<li class="fly"><a href="#">Nikon<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#" class="enclose">Lenses</a></li>
<li><a href="#">Speedlight</a></li>
<li class="fly"><a href="#">Coolpix<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#" class="enclose">Coolpix S10</a></li>
<li><a href="#">Coolpix L2</a></li>
<li><a href="#">Coolpix S500</a></li>
<li><a href="#">Coolpix P5000</a></li>
<li><a href="#">Coolpix 4600</a></li>
<li><a href="#">Coolpix S6 Silver</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">D200</a></li>
<li><a href="#">D80</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">Minolta</a></li>
<li><a href="#">Pentax</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">SLR</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">Flash</a></li>
<li><a href="#">Video</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">Religious</a></li>
<li><a href="#">Invitations</a></li>
<li><a href="#"> Seasonal</a></li>
<li><a href="#" class="enclose">Contact us</a></li>
</ul>
</div>
<br class="clear"/>
</div>
<!-- End of the tabs holder -->
<!-- This is the search box and login controls holder -->
<!-- End of the login controls holder -->
<!-- Here's the box for the main article -->
<div class="articleboxouter">
<!-- Here's where you can place ur content -->
<div class="articleboxinner">
<!-- The flower image. 300px by 200px -->
<img src="images/help.jpg" alt="help" width="300" height="210" class="mainpiccontrol" />
<!-- The title for this article -->
<span class="articleheader">Welcome to Treehugger cards</span>
<br />
<!-- The preview content -->
<!-- Link to the full article, an arrow and a text link -->
<span class="readmore">
<a href="#">
<img src="images/arrow.png" alt="read more" width="12" height="12" class="noborder" />
</a>
<a href="#">Read More</a>
<br />
</span>
</div>
<!-- End of content holder -->
</div>
<!-- End of main article -->
<!-- Here's the box for some pics, remove if not a photo gallery -->
<div class="picboxouter">
<!-- All should be uniformly sized ;-) -->
<div class="picbox">
<!-- Arrow pointing backwards -->
<a href="#">
<img src="images/arrowrev.png" alt="backward" width="12" height="12" class="noborder" />
</a>
<img src="images/f1.jpg" alt="help" width="120" height="80" class="pickboxcontrol" />
<img src="images/f2.jpg" alt="help" width="120" height="80" class="pickboxcontrol" />
<img src="images/f3.jpg" alt="help" width="120" height="80" class="pickboxcontrol" />
<img src="images/f6.jpg" alt="help" width="120" height="80" class="pickboxcontrol" />
<img src="images/f7.jpg" alt="help" width="120" height="80" class="pickboxcontrol" />
<!-- Arrow pointing ahead -->
<a href="#">
<img src="images/arrow.png" alt="forward" width="12" height="12" class="noborder" />
</a>
</div>
</div>
<!-- End of photogallery -->
<!-- We love three columns, don't we? -->
<!-- Holder for three columns -->
<div class="articleboxouter">
<div id="newsContainer2">
<!-- Column 1 -->
<div class="c1">
<div class="noteheader"> About Us </div>
<div class="spacy">
</div>
</div>
<!-- Column 2 -->
<div class="c2">
<div class="noteheader"> Our Customers </div>
<div class="spacy">
</div>
</div>
<!-- Column 3 -->
<div class="c3">
<div class="noteheader"> Eco Friendly </div>
<div class="spacy">
<!-- The content for this attention grabbing block -->
<br />
</div>
</div>
</div>
</div>
<!-- End of the three columns holder -->
<!-- This little whitespace will separate the page from the footer -->
<!-- Finally, here's the humble footer, holding your copyright -->
<div id="footer">
(c) Copyright 2006-2007
XHTML 1.0 Strict | Pure CSS Layout
</div>
<!-- End of footer -->
</div>
<!-- End of master container -->
</body>
</html>
Ok thanks for the input, i have amended the location for you To be honest I had the menu sorted [see www .treehuggercards .co .uk/indexth .htm and i would rather put the drop downs onto this rather than implement a new menu but i haven't built a pure css drop menu before so its bound to mess up in some of the browsers. Any way thanks for your help so far i have this table: Code: <table width="200" cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="background-image: url('help_tl.gif'); background-repeat: no-repeat; background-position: bottom;" width="10" height="10"></td>
<td style="background-image: url('help_top.gif'); background-repeat: repeat-x; background-position: bottom;" width="180" height="25" colspan="3"><img src="./help_pointer_tl.gif" height="25" width="15" alt="..."/></td>
<td style="background-image: url('help_tr.gif'); background-repeat: no-repeat; background-position: bottom;" width="10" height="10"></td>
</tr>
<tr>
<td style="background-image: url('help_left.gif'); background-repeat: repeat-y;" width="10"></td>
<td style="vertical-align: top; background-color: #FFFFE1;" width="20"><img src="./help_icon.gif" height="20" width="20" alt="..."/></td>
<td style="background-color: #FFFFE1; font-weight: bold; font-family: arial; font-size: 12px; vertical-align: middle;"> Login Help</td>
<td style="vertical-align: top; background-color: transparent; text-align: center;" width="20"><img name="close" id="close" src="./close_norm.gif" height="18" width="18" alt="Close this Window"/></td>
<td style="background-image: url('help_right.gif'); background-repeat: repeat-y;" width="10"></td>
</tr>
<tr>
<td valign="bottom" style="background-image: url('help_bl.gif'); background-repeat: no-repeat;" width="10" height="10"></td>
<td valign="bottom" style="background-image: url('help_bottom.gif'); background-repeat: repeat-x; background-position: bottom;" height="10" colspan="3" width="180"></td>
<td valign="bottom" style="background-image: url('help_br.gif'); background-repeat: no-repeat;" width="10" height="10"></td>
</tr>
</table>
but the image called 'close' should be right aligned in the cell, but i cant seem to get it to do so. am i missing something simple? I am having trouble positioning two <div> elements on my page, I need them to sit in the bottom right and left corners of the page but they only seem to want to sit in the corners of the page when it is first loaded and the window is maximised. The page can be viewed at http://sirgdissertation.zzl.org and the css for the two divs is as follows: Code: #bottomBarLeft {
position:absolute;
bottom:0%;
left:0%;
right:50%;
width:50%;
height:auto;
text-align:left;
font-size:9px;
}
#bottomBarRight {
position:absolute;
bottom:0%;
left:50%;
right:0%;
width:50%;
height:auto;
text-align:right;
font-size:12px;
}
can someone suggest how I could alter the code to fix my problem? Ignore the red lines around the info in the middle at the moment, they are just there for position editing purposes. I have checked my page in Google Chrome, IE8 and Firefox 3.6 and still the same result. As a sidenote, IE8 also doesn't seem to want to display the home page properly, I don't know if it has something to do with the fact that it is a php page or something else - if someone could direct me to the appropriate board for this then I'll post this sidenote there!! I'm trying to get a box to position properly. If you go to this page in firefox, it looks fine, but in IE7 and IE6 the centered image is nudged to the left by one pixel. You can see the white space to the right of the banner. When resizing the IE6/7 window, it sometimes jumps back to the right and into its proper position. Are there any specific methods in CSS that I should use for positioning this? Right now I'm just using this: Code: <div align="center"> <img src="banner.jpg"> </div> The CSS is validated. -The problem only occurs in the 1280x1024 resolution and above. Not in 768 by 1024. I'm sorry but this bothers me! - Thank you. Hi guys, You've been very helpful so far so I am hoping you can help again! I am in the middle of building another website, and it displays perfectly in Chrome/Firefox/Opera but as usual, there are problems with the positioning in IE. Please can you take a look at the CSS and let me know what the problem is and how to fix it? www-dot-vwcampervanforsale-dot-co.uk Thanks very much for your time and consideration, much appreciated I have a page with a number of thumbnails, each displayed individually in a DIV. The thumbnails (DIVs) are grouped in a few sections. Please have a look at this page. Resize the browser width and see what happens to the last row of images in each section. Some do align left as they should, but some do align right. Can anybody explain to me why this is happening. Or better still, what I should do about it? Oh yes, I use this stylesheet: Code:
a : link, a : active, a : visited {
text-decoration : underline;
background : transparent;
}
a : hover {
text-decoration : underline overline;
background : transparent;
}
body {
background: #FFF url(Background.gif);
font: normal 13px/normal Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #000;
text-decoration: none;
text-align: left;
margin: 0px 0px 0px 0px;
}
div.programmers {
float : left;
width : 150px;
margin: 0px 8px 15px 8px;
text-align : center;
}
div.spacer {
clear : both;
}
h1 {
font: normal 16px/30px Trebuchet MS, Tahoma, Verdana, Arial;
color: #FFF;
text-decoration: none;
text-align: center;
vertical-align: middle;
}
h1.phw {
background-image : url(xp-phw.png);
}
.plaintekst {
background : transparent;
font : normal 13px/normal Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration : none;
color : #000;
}
.plaintekst p {
margin-bottom: 15px;
}
Hi all, I used CSS to set the elements position properly but I have a weird result... I have a simple textbox and a button, next to each other; I want them be between 2 lines in a specific position. If I dont use position property, the button is wrapped above the textbox and I dont want this happen. So, I decided to use: position:absolute; for the first textbox position:relative; and with left-top I aligned the textbox. This used to work (only for mozilla, with other browsers the position is different ) But some days a problem appears also in Mozilla!!! The first time that the page is loaded, the textbox and the button get slightly up than the position that I have ordered. And once I press the button, both textbox and button goes to the correct position. The problem seems to be minor, but it is irritating that when the page is loaded the elements are not in the correct position. Any ideas? Thank you! Sorry Pro's another Joe asking about positioning. I have my nav bar made out of a list. Oh that reminds me of another issue. But first I want the Nav bar to be under the picture. I have been tearing my hair out over it. website: argyllplotsforsale/com CSS: argyllplotsforsale/com/style.css Another problem I am having is with styling the links. It's with the a:visited. I want the link to be the same as it started. But when I try stile in the A:Visited it just stays black. Am damned if I can figure out. Help always appreciated. Cakeface I'm having a problem with the positioning of my navbar in IE, the problem page is http://www.mckr.ie/test.html In Opera the left navbar div and the main content div are positioned fine but in IE they go up on the page for some reason? Its strange because they are absolutely positioned. Please can you help? Here is the HTML code for the page: Code: <div id="bannerdiv"></div>
<div id="contentdiv"><!-- InstanceBeginEditable name="content" -->
<h1>Welcome to the McKeever Rowan Solicitors/Lawyers Website</h1>
<p>McKeever Rowan Solicitors is a long established Irish law firm located in the International Financial Services Centre in Dublin, Ireland. We also have an office in Paris and representation throughout the European Union through our membership of <a href="http://www.cyrus-ross.com/home.htm">Cyrus Ross International</a>.</p>
<p>The law firm has in depth knowledge of specific industry sectors, which it brings to bear in advising in these sectors and which will save clients time and resources in buying legal services. Our focus always is in providing clear legal advice of the highest quality based on a thorough understanding of the industry sector involved. </p>
<p></p>
Our areas of expertise include:
<ul>
<li> Corporate Law</li>
<li>Regulatory and Commercial Law</li>
<li>Communications and Utilities Law</li>
<li>Information Technology Law</li>
<li>Technology and Electronics Law</li>
<li>e-Commerce Law</li>
<li>Financial Services Law</li>
<li>Litigation</li>
<li>Banking Law</li>
<li>Insolvency, Bankruptcy and Corporate Law</li>
<li>Recovery </li>
<li>Commercial Litigation, Arbitration and ADR</li>
<li>General Personal Litigation</li>
<li>Property and Private Client</li>
<li>Residential Property/ Real Estate Law</li>
<li>Commercial Property/ Real Estate Law</li>
<li>Wills Trusts and Administration of Estates</li>
<li>Buying Property in France</li>
<li>Employment Law</li>
<li>Family Law </li>
</ul>
<p>Please click on the links opposite for more details on the specific areas and our link below for details of our disclaimer.</p>
<!-- InstanceEndEditable --></div>
<div id="leftnavdiv">
<div id="leftnavouterdiv">
<div id="leftnavinnerdiv">
<p><b>Practice Areas</b><br />
Corporate/Commercial<br />
<a href="pages/corporate.html">Corporate</a><br />
<a href="pages/regandcom.html">Regulatory and Commercial</a><br />
<a href="pages/communicationsandutilities.html">Communications and Utilities</a><br />
<a href="pages/informationtech.html">Information Technology</a><br />
<a href="pages/technology.html">Technology and Electronics</a><br />
<a href="pages/ecommerce.html">e-Commerce</a><br />
<a href="pages/financialservices.html">Financial Services</a></p>
<p>
<b>Litigation</b><br />
<a href="pages/banking.html">Banking</a><br />
<a href="pages/insolvency.html">Insolvency, Bankruptcy and Corporate<br />
Recovery</a><br />
<a href="pages/commerciallitigation.html">Commercial Litigation, Arbitration<br />
and ADR</a><br />
<a href="pages/personallitigation.html">General Personal Litigation</a></p>
<p><b>Property and Private Client</b><br />
<a href="pages/residentialproperty.html">Residential Property/ Real Estate</a><br />
<a href="pages/commercialproperty.html">Commercial Property/ Real Estate</a><br />
<a href="pages/willsandtrusts.html">Wills Trusts and Administration<br />
of Estates</a><br />
<a href="pages/frenchproperty.html">Buying Property in France</a></p>
<p> <a href="pages/employment.html">Employment Law</a></p>
<p><a href="pages/familylaw.html">Family Law</a> </p>
</div>
</div>
<div id="searchdiv"><div id="innersearchdiv"><p><b>Site Web en Francais</b></p>
<form action="http://search.atomz.com/search/" method="get" target="main">
<b>Search the Site<br />
</b>
<input name="sp-q" size="15" />
<input name="submit" type="submit" value="Go" />
<input name="sp-a" type="hidden" value="sp10023119" />
<input name="sp-f" type="hidden" value="ISO-8859-1" />
</form>
</div>
</div>
</div>
<div id="topnavdiv">
<ul>
<li><a href="/" id="buttonhome"><b>Home</b></a></li>
<li><a href="about.html" id="buttonabout"><b>About Us</b></a></li>
<li><a href="location.html" id="buttonlocation"><b>Location</b></a></li>
<li><a href="contact.html" id="buttoncontact"><b>Contact Us</b></a></li>
<li><a href="news.html" id="buttonnews"><b>News</b></a></li>
<li><a href="people.html" id="buttonpeople"><b>People</b></a></li>
<li><a href="recruitment.html" id="buttonrecruitment"><b>Recruitment</b></a></li>
</ul>
</div>
Here is my CSS code for the nav bar and the first 2 links: Code:
#topnavdiv { position:absolute; left:0px; top:120px; width:100%; z-index:3; background-color: #3366CC; border-top-width: 1px; border-right-width: 0px; border-bottom-width: 1px; border-left-width: 0px; border-top-color: #f8c015; border-bottom-color: #f8c015; border-right-color: #f8c015; border-left-color: #f8c015; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; }
#topnavdiv ul { margin: 0px; padding: 0px; list-style-type: none; }
#topnavdiv li { margin: 0px; padding: 0px; list-style-type: none; display: inline; }
#topnavdiv b { display: none; }
a#buttonhome { background-color: #3366CC; background-image: url(images/nav.home.gif); height: 24px; width: 65px; display: block; background-repeat: no-repeat; cursor: hand; }
a#buttonhome:hover { background-color: #3366CC; background-image: url(images/nav.home.on.gif); height: 24px; width: 65px; display: block; background-repeat: no-repeat; cursor: hand; }
a#buttonabout { background-color: #3366CC; background-image: url(images/nav.about.gif); height: 24px; width: 85px; display: block; background-repeat: no-repeat; cursor: hand; }
a#buttonabout:hover { background-color: #3366CC; background-image: url(images/nav.about.on.gif); height: 24px; width: 85px; display: block; background-repeat: no-repeat; cursor: hand; }
My page is valid xhtml 1.0 strict and valid css 2, however.. i'm still having a problem. for some people, who use IE 6, are having trouble viewing my page correctly. for my (also using IE 6 and firefox) it works perfect. the address is: http://invalidheart.org/about.php the problem that happens is the content overlaps the navigation menu.. any idea why? i have NO clue.. it's driving me nuts, I want to put my page up, but I can't until i figure this out. Thanks SO much for your time css: http://invalidheart.org/default.css I have a flashfile i am trying to put into mysite and have images as a navigation on the left. The problem i am having is that the falsh is not positioning to the top like it should be. Here is the css that i am using:- Code:
body {
text-transform: lowercase; font-family: "Trebuchet MS", Verdana, helvetica, arial, sans-serif; background-image: url(../../My Pictures/backgrounds/page-back.gif);
}
* {
padding: 0px 0px 0px 0px; MARGIN: 0px;
}
h1 {
FONT-SIZE: 200%;
}
h2 {
FONT-SIZE: 115%;
}
h3 {
FONT-SIZE: 130%;
}
h4 {
FONT-SIZE: 105%; COLOR: #cacaca;
}
h5 {
FONT-SIZE: 110%;
}
ul {
FONT-SIZE: 90%;
}
li {
LIST-STYLE-TYPE: none;
}
p {
FONT-SIZE: 80%;
}
a {
COLOR: black; TEXT-DECORATION: none;
}
#wrapper {
MARGIN: 0px auto; WIDTH: 768px; POSITION: relative; BACKGROUND-COLOR: white; margin-top:40px;
}
UL#topnav {
PADDING-TOP: 0.7em; BORDER-BOTTOM: black 1.5em solid; BACKGROUND-COLOR: black
}
#topnav A {
COLOR: white; TEXT-DECORATION: none
}
#topnav LI LI A {
PADDING-RIGHT: 0.25em; DISPLAY: block; PADDING-LEFT: 0.25em; PADDING-BOTTOM: 0.25em; PADDING-TOP: 0.25em
}
#topnav LI A:hover {
COLOR: yellow
}
#topnav LI {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px; LINE-HEIGHT: 1.25em; PADDING-TOP: 0px; POSITION: relative; BACKGROUND-COLOR: black; TEXT-ALIGN: center; font-weight: normal;
}
LI#home {
WIDTH: 100px
}
LI#about {
WIDTH: 100px
}
LI#faq {
WIDTH: 92px
}
LI#contact_us {
WIDTH: 127px
}
li#account {
WIDTH: 127px
}
li#basket {
WIDTH: 111px
}
li#search {
WIDTH: 111px;
}
#topnav li ul li {
Z-INDEX: 2; WIDTH: 11em; TEXT-ALIGN: left;
}
#topnav li ul {
DISPLAY: none; LEFT: 0px; PADDING-TOP: 0.4em; POSITION: absolute; TOP: 1em;
}
#topnav li:hover UL {
DISPLAY: block;
}
#topnav li.over UL {
DISPLAY: block;
}
h1#logo1 {
BACKGROUND-IMAGE: url(../../My Pictures/hp_ss07_email.gif); MARGIN: 1em auto; WIDTH: 256px; BACKGROUND-REPEAT: no-repeat; HEIGHT: 53px; float: left; padding-bottom: 20px;
}
h1 a {
DISPLAY: block;
}
UL#breadcrumb {
CLEAR: right; MARGIN-TOP: 0px; MARGIN-LEFT: 15px; COLOR: #cacaca; MARGIN-RIGHT: 15px;
}
UL#breadcrumb LI {
DISPLAY: inline; TEXT-TRANSFORM: capitalize;
}
#content {
CLEAR: both; PADDING-LEFT: 15px;
}
.box {
PADDING-RIGHT: 5px; BORDER-TOP: #cacaca 1px solid; PADDING-LEFT: 5px; FLOAT: left; MARGIN-BOTTOM: 0.7em; PADDING-BOTTOM: 3px; PADDING-TOP: 3px; BORDER-BOTTOM: #cacaca 1px solid; BACKGROUND-COLOR: #e4e4e4
}
.lowercase {
TEXT-TRANSFORM: lowercase;
}
#footer {
PADDING-RIGHT: 14px; PADDING-LEFT: 14px; PADDING-BOTTOM: 0px; MARGIN: 10px auto; WIDTH: 740px; padding-top: 0px; background-color: #000000; margin-bottom:0px;
}
#copyright {
CLEAR: both; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 0px; FLOAT: none; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 5px; WIDTH: 730px; PADDING-TOP: 0.5em; BORDER-RIGHT-WIDTH: 0px; color: #ffffff;
}
#copyright P {
FONT-SIZE: 70%; TEXT-ALIGN: center; color: #ffffff;
}
.right {
FLOAT: right;
}
.left {
FLOAT: left;
}
.clear {
CLEAR: both;
}
.clearleft {
CLEAR: left;
}
.clearright {
CLEAR: right;
}
.hidden {
DISPLAY: none;
}
.left-align {
TEXT-ALIGN: left;
}
.center-align {
TEXT-ALIGN: center;
}
.right-align {
TEXT-ALIGN: right;
}
.margin-bottom-1em {
MARGIN-BOTTOM: 1em;
}
.margin-top-1em {
MARGIN-TOP: 1em;
}
.clearfix {
DISPLAY: inline-block;
}
* HTML .clearfix {
HEIGHT: 1%
}
.clearfix {
DISPLAY: block
}
.home#leftmenu {
width:168px; padding-top: 30px; margin:0px; float: left;
}
.home#leftmenu img {
padding-bottom:5px; padding-left:1px; padding-top:30px; float: left; padding-top: 4px;
}
.home#content {
width:580px; float: right; padding-left:6px; padding-top:0px; margin-top: 0px; clear:both;
}
Can anyone please point me in the right direction. Many thanks in advance Hello, If you go to http://www.tickledpinkcookbook.com/webc.html and view it in Firefox you will see the bottom two images are floating too far to the right. In IE it's fine. Anyone know how to fix this? thanks On the bottom of the following page, there is a video player and playlist. It appears just fine when opened with Firefox but when I tested the page in IE 8, black box on the left positioned on the upper box. http://www.pangeaadvisors.org/default.asp Hello, I've been wracking my brain over this and can't seem to figure this out. I have 4 Flash buttons I created for the left-hand column of this website: http://www.heshimakenya.org/index.html I use them on every page, except one, throughout the site. On the home page, the space between each button is exactly how I want it to look. However, on the rest of the pages on the site there is extra space (or padding) between the GET INVOLVED button & READ OUR BLOG button. I cannot figure out why. Any help is much appreciated. Thanks. Hi, I have a navigation bar which is divided into 2 columns along the top of my page at http://www.smartglassinternational.com It looks fine in IE7 and Opera but on IE6 one of the columns gets moved down, probably because of the different way IE6 interprets CSS. Anyone know how to fix this please? Here's my HTML code: Code: <div id="navdiv"> <div id="navdivleft"><a href="/" id="buttonhome"><b>Homepage</b></a> <a href="../news.html" id="buttonnews"><b>Company News</b></a> <a href="../about.html" id="buttonabout"><b>About Us</b></a> <a href="../contact.html" id="buttoncontact"><b>Contact Us</b></a></div> <div id="navdivright"><a href="../projects.html" id="buttonprojects"><b>Completed Projects</b></a> <a href="../ec-smartglass.html" id="buttonec"><b>EC SmartGlass</b></a> <a href="../lc-smartglass.html" id="buttonlc"><b>LC SmartGlass</b></a> <a href="../faq.html" id="buttonfaq"><b>FAQ</b></a></div> </div> My CSS file is at http://www.smartglassinternational.com/style.css If anyone could point be in the right direction for fixing this problem I'd be very grateful Thanks in advance... Hello I have a page I am testing www.amalgam-models.co.uk/james/test2.htm It seems to work in all main browser accept IE5 mac. I have put a hack in which works but doesnt centralize the box: .container { background-color: transparent; position: absolute; top:100px; left:200px; } /* following rules are invisible to IE 5 \*/ .container { position:absolute; left:50%; top:50%; width:730px; height:404px; margin-left:-365px; margin-top:-202px; } /* styles for IE 5 Mac */ Is there any way of doing this to centralize an absolutly positioned box in Ie5 mac? Any help would be greatly apreciated Thanks I am currently puzzled about a weird problem I've been having with the positioning of my main content div, and all it contains. I don't seem to be having any issue regarding width, just height, which makes me wonder whether it is some sort of issue with the z index property or something. It's probably much simpler :P Here's a couple of screenshots of what I'm talking about: EDIT... Not allowed to post url's.. real helpful, thanks :P Originally the site displayed just fine in IE 7.0, but then I had to set the padding on the top of the content div to 12% (the content frame contains everything below the "navbar") so that the content div displayed the information in the correct place. EDIT... Not allowed to post url's.. real helpful, thanks :P Here you can see it all looking fine and dandy in FF 2.0, but previous to changing the padding for the content div to 12% the text in the content frame and the images were much higher up on the screen. It's like the content div was ignoring the fact that there are a few other divs above it in the flow of the document. Essentially the menubar div contains the little lightening image (in its own div), some text (in its own div) and the navbar div. So I can't figure out why FF seems to act as if they are not there Any idea's? If it will help I'll be happy to show my shockingly messy code (which I'll try and tidy up first). As I am not allowed to post url's, I'll try to pop in a link of the website I am talking about: irrevocableguild dot co dot uk Cheeky of me I know... but I can see no other way of properly describing what I mean Any help would be much appreciated. Thanks ~blueseay What I'm trying to do here is have an image as a background aligned to the very bottom. I have it in it's own div, and I could get the div to align to the bottom, that's no problem. However, my problem occurs on lower resolution, and the div that has the background "overlaps" the rest of the content. Not good. Is there anyway I can align a div to the BOTTOM without overlapping any content? There are no left or right floats, the layout is pretty much centered. Here's my footer code PHP Code: div.footer { margin: 0px auto; width: 100%; height: 400px; overflow: hidden; padding: 0px 0px 0px 0px; background-image: url("../images/golf_bottom.jpg"); background-position: center; background-repeat: no-repeat; position: absolute; bottom: 0; left: 0; } I seen on other webpages that they applied a background through the body tag and aligned it to the bottom, but I already have a background reserved for that. im building a simple catalogue for my website and in my content area im having problems getting the look i want: but im having the image section not go down to the bottom of the container div, making text go directly underneath the image. Code: <html> <head> </head> <body> <div> <div style='float:left;border:1px solid #000000;'> image </div> <div style='border:1px solid #000000;'> title<br/><br/> description </div> </div> </body> </html> this is very frustrating as i know i could do this easily with tables :/. There must be some property i can set to stop this from happening? |
|||||||