|
CSS - Divs In Overflows
Hi this is the problem:
I have a header div which has a transparent background. This is a set image of lets say 200px Under that i have a solid color div which needs to stretch vertically under that i have the footer which is under all of it. Above the header and the solid color (but not the footer) is the content. I need the solid color div to expand vertically as the content get bigger. In turn i need this to push the footer down. The issue is that the content which is above the solid color div and the header one cannot push the solid color divs height down. Heres what im working on... PHP Code: <style> #outer{ border:1px solid #000; width:600px; height:100%; left:0px; position:absolute; } .trans{ position:absolute; top:0px; height:200px; width:600px; left:0px; background-color:#eff; border:1px solid #000; z-index:50; } #content{ position:absolute; top:0px; height:100%; width:100%; } .stuffcontent{ position:absolute; top: 0px; z-index:100; width:600px; z-index:100000; border:1px dashed #000; } .solid{ position:absolute; bottom:0px; height:100%; width:600px; background-color:#bed; z-index:10; } .footer{ position:absolute; bottom:-200px; height:200px; width:600px; left:0px; background-color:#eff; border:1px solid #000; } </style> <div id="outer"> <div id="content"> <div class="stuffcontent"> <div style="z-index:99999999; position:relative; width:600px; height:100%; display:block;"> TEST---- TEST ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^TEST<br/> <div class="solid"> <!-- THIS SHOULD BE THE SOLID COLOR UNDER THE CONTENT--> </div> <div class="footer">Footer is after the content overflow</div> <div class="trans">Header : Transparent</div> </div> </div> </div> </div> I have been able to bodge a fix where the content is duplicated in a php ob buffer and then spat out again into another div. While setting the original div to hidden but keeping its height and using it as a container. This is well over drawn and i need a simpler fix. (This is not the above code please not) This is the site i have created. The content is over the transparent div and pushes the solid green div down untill it reaches the footer. The footer has a large height to cover any gaps. This was created using the ob buffer method but i need to do this in a simpler fashion. the site Similar TutorialsHeya Im having issues trying to keep text inside a div. At the moment the text just runs out of the div instead of starting a new line! html: Code: <body onLoad="goforit()" > <div id="myslidemenu" class="jqueryslidemenu"> <ul> <li><a href="http://www.dynamicdrive.com">Web Design</a></li> <li><a href="#">Gallery</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Links</a> <ul> <li><a href="http://www.finalonline.co.uk/" target="_blank">Link 1</a></li> </ul> </li> </ul> <br style="clear: left" /> </div> <div id="content"> <div id="header">Web Design</div> <div id="container1"> <div id="containermainleft"><img src="img/blue_gradient.jpg" /></div><div id="containermainright"><p>textooooooooooooooooooooooooooooooooooooooooooooooo<p></div> </div> </div> <div id="copyright">Designed and Maintained by Final Online</div> </body> css: Code:
/* Final Online CSS */
body {
margin:0; auto;
background-color: #A4D3EE;
}
#content {
background-color: #A9A9A9;
height: 100%;
width: 710px;
margin-left: auto;
margin-right: auto;
min-height: 500px;
border: 1px solid white;
clear: both;
}
#copyright {
background-color: #414141;
width: 710px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
#header {
background-color: white;
width: 99%;
text-align: right;
padding-right: 1%;
padding-bottom: 0.2%;
margin-left: auto;
margin-right: auto;
font: normal 13px Arial;
}
#container1 {
background-color: red;
width: 85%;
height: 120px;
text-align: ;
margin-left: auto;
margin-right: auto;
margin-top: 5%;
margin-bottom: 5%;
clear: both;
border-bottom: 1px solid white;
}
#containermainleft {
background-color: yellow;
width: 50%;
height: 110px;
text-align: ;
margin-top: 2px;
float: left;
border-right: 1px solid white;
}
#containermainright {
background-color: yellow;
width: 49%;
height: 110px;
text-align: ;
margin-top: 2px;
float: right;
}
img {
width: 200px;
height: 100px;
border: 1px solid white;
margin-top: 3px;
margin-left: 10px;
vertical-align: center;
}
p {
text-align: justify;
margin: 0px;
}
thanks in advance for any help link Notice the right menu, the text goes outside the box. It works fine on the left, but I can't figure out why the right side does that. Hi, I'm running into a bit of a problem making the entire page fit into a DIV. I can't see any reason why it won't, because as far as I know my div's are in the right place, and in the right file (because the effect is half-there. Here's my code: CSS Code:
html {
scrollbar-face-color: #ADDFE7;
scrollbar-highlight-color: #ADDFE7;
scrollbar-3dlight-color: #ADDFE7;
scrollbar-darkshadow-color: #ADDFE7;
scrollbar-shadow-color: #ADDFE7;
scrollbar-arrow-color: #000000;
scrollbar-track-color: #ADDFE7;
overflow:hidden;
}
body {
background: #FEFFED;
font-family: 'Verdana', 'Arial', sans-serif;
font-size: 10px;
color: #000000;
cursor:default;
margin: 0; padding: 0;
overflow:hidden;
}
div.center {
/* Make element float in the center */
position: absolute;
left: 50%;
top: 50%;
/* Set the width and height */
width: 750px;
height: 410px;
/* Set margin to half the values of width/height */
margin-left: -375px;
margin-top: -205px;
}
div.rect {
background: #ADDFE7;
padding: 0px;
width: 750px;
height: 410px;
overflow:auto;
border: 1px solid #000000;
z-index: 1;
}
Now what we're concerned about there (the ones I added) are the 'center' div , and 'rect' div. They're near the top. and this is a 'View source' to show where I put the code: 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" dir="ltr" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>form one : shop</title>
<meta name="keywords" content="form one, merchandise, t-shirts, cds Congratulations! You have successfully installed your Zen Cart™ E-Commerce Solution." />
<meta name="description" content="form one : shop : Congratulations! You have successfully installed your Zen Cart™ E-Commerce Solution. - form one, merchandise, t-shirts, cds" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="authors" content="The Zen Cart™ Team and others" />
<meta name="generator" content="shopping cart program by Zen Cart™, http://www.zen-cart.com" />
<base href="http://formone.net/shop/" />
<link rel="stylesheet" type="text/css" href="includes/templates/perry/css/stylesheet.css" /></head><body id="index">
<div class="center">
<div class="rect">
<table class="centershop" border="0" cellspacing="0" cellpadding="0">
<tr><td>
<table border="0" cellspacing="0" cellpadding="0" class="headerNavigation" align="center">
<tr class="headerNavigation">
<td align="left" valign="top" width="33%" class="headerNavigation">
<a href="http://formone.net/shop/index.php?main_page=index">Home</a> |
<a href="http://formone.net/shop/index.php?main_page=login">Log In</a>
</td>
<td align="center" width="25%"></td>
<td class="headerNavigation" align="right" valign="top" width="33%">
</td>
</tr>
</table>
<table border="0" width="100%" cellspacing="0" cellpadding="0" class="header">
<tr><!-- All HEADER_ definitions in the columns below are defined in includes/languages/english.php //-->
<td valign="middle" height="23px" width="200px">
<a href="http://formone.net/shop/index.php?main_page=index"><img src="includes/templates/perry/images/logo.gif" border="0" alt="Powered by Zen Cart :: The Art of E-Commerce" title=" Powered by Zen Cart :: The Art of E-Commerce " width="192" height="64" /></a> </td>
<td align="center" valign="top">
</td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" class="main_page">
<tr>
<td valign="top" class="column_left"><table border="0" width="150px" cellspacing="0" cellpadding="0" class="column_left"><tr><td>
<!--// bof: categories //-->
<table width="150px" border="0" cellspacing="0" cellpadding="0" class="leftbox" id="categories-table">
<tr class="leftboxheading" id="categories-heading-tr">
<!-- Sidebox Header -->
<td colspan="3" width="100%" class="leftboxheading" id="categories-heading-td">Categories</td>
</tr>
<tr>
<!-- Sidebox Contents -->
<td colspan="3" class="leftboxcontent" id="categories-content">
<br /><img src="includes/templates/perry/images/pixel_silver.gif" border="0" alt="" width="100%" height="1" /><br /><a class="category-links" href="http://formone.net/shop/index.php?main_page=products_all">All Products ...</a> </td>
</tr>
<tr>
<!-- Sidebox Footer -->
<td colspan="3" height="5px" class="leftboxfooter" id="categories-footer">
</td>
</tr>
</table>
<!--// eof: categories //-->
</td></tr></table></td>
<td valign="top" class="center_column" width="100%"> <table border="0" width="100%" cellspacing="2" cellpadding="2">
<tr>
<td class="pageHeading"><h1>Congratulations! You have successfully installed your Zen Cart™ E-Commerce Solution.</h1></td>
</tr>
<tr>
<td class="greetUser">Welcome <span class="greetUser">Guest!</span> Would you like to <a href="http://formone.net/shop/index.php?main_page=login">log yourself in</a>?</td>
</tr>
<tr>
<td class="main">This is the main define statement for the page for english when no template defined file exists. It is located in: <strong>/includes/languages/english/index.php</strong></td>
</tr>
<tr>
<td class="plainBox">Define your main Index page copy here.</td>
</tr>
<tr>
<td class="plainBox"><p><strong><font face="verdana,arial,helvetica,sans-serif" color="#006600">Main Page Sample Text ...</font></strong></p><p>This section of text is from the Define Pages Editor located under Tools in the Admin.</p><p>It is different from the /includes/languages/english/xxxxxx.php definitions.</p><p>You can use one or the other seperately for this page or, you can use both together.</p><p>To remove the language file definition, do not delete the define statement, set it to be blank. Example: define('TEXT_INFORMATION', '');</p><p>To remove this section of the text, delete it from the Define Pages Editor located under Tools in the Admin.</p><br /></td>
</tr>
</table><br />
</td>
<td valign="top" class="column_right"><table border="0" width="150px" cellspacing="0" cellpadding="0" class="column_right"><tr><td>
</td></tr></table></td>
</tr>
</table>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr class="footertop">
<td class="footertop" align="center"> | <a href="http://formone.net/shop/index.php?main_page=index">Home</a> | </td>
</tr>
</table>
<table border="0" width="100%" cellspacing="0" cellpadding="0" class="footer">
<tr>
<td class="footerbottom">Your IP Address is: 69.159.1.195</td>
</tr>
<tr>
<td class="footerbottom"></td>
</tr>
</table>
</td></tr>
<tr>
<td align="center"><div>Parse Time: 0.150 - Number of Queries: 43 - Query Time: 0.012168360336304</div></td>
</tr>
</table></div>
</div>
</body></html>
They're right after the <body> and right before the </body> tag, so I don't know why the whole page isn't fitting in my box. It sort of is working, because it's centered vertically and horizontally, and positioned where it's supposed to be. But it overflows out under the box it's supposed to be in. Does anyone know why this is happening? If you want to see what it is doing right now, it's http://www.formone.net/shop . Hi I'm new to CSS and this site, so please excuse any stupidity in the code and presentation of this query! The following CSS (error.css): Code: body {background-color: white;}
title {font-style: italic}
thead {font-weight: bold; border-bottom: thick double}
td {width: 5em; border-bottom: thin solid black; border-top: thin solid black; background-color: green}
table {border: hidden}
.Xaddress {border-left: thin solid black; font: 1em bold; color: yellow; text-align: left}
.title {border-left: thin solid black; text-align: center; border-bottom: thick double; border-top: hidden}
caption {font: 2em bold}
#intro {position: static; color: black; height: 20%; backXground: #cccccc;}
#addresses { position: relative; left: 5em; height: 60%; color: black; height: 10em;}
#table1 {position: absolute; top: 4em; left: 1em; z-index: 10; color: black; background: #cccccc;}
#table2 {position: absolute; top: 5em; left: 6em; z-index: 9; color: black; background: #ff00ff;}
#footer {position: static; z-index: 10; color: black; height: 20%; backXground: #00ff00;}
and xhtml (error.html): 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" lang="en" xml:lang="en">
<html>
<head>
<link rel="stylesheet" type="text/css" href="error.css" />
<script type="text/javascript">
//Bring a span element and descendents to the front and send its span siblings and their descendents to the back
function bringToFront(id)
{
if (id != null) {
if (document.getElementById(id)) {
//Send all parent's descendents in spans to the back
var span=document.getElementById(id).parentNode.getElementsByTagName("SPAN");
var s=0;
var c=0;
while (span[s]) {
setzIndexOfBranch(span[s],9);
s++;
}
//bring id and descendants to the front
setzIndexOfBranch(document.getElementById(id),10);
}
}
}
//Set the zIndex of a node and all of its descendants
function setzIndexOfBranch(node,value)
{
if (node.style != undefined) {
node.style.zIndex = value;
}
var c=0;
while (node.childNodes[c]) {
setzIndexOfBranch(node.childNodes[c],value);
c++;
}
}
function parseXML()
{
text="<root>";
text=text+"<heading>XML CSS HTML test</heading>";
text=text+"<table1data>"+"<table>"+
"<caption>"+
"First table"+
"</caption>"+
"<thead>"+
"<td class="title">Column1</td>"+
"</thead>"+
"<tr>"+
"<td>row1</td>"+
"</tr>"+
"<tr>"+
"<td>row2</td>"+
"</tr>"+
"<tr>"+
"<td>row3</td>"+
"</tr>"+
"</table><br/>Some text after table 1<br/>"+
"</table1data>"+
"<table2data>"+"<table>"+
"<caption>"+
"Second table"+
"</caption>"+
"<thead>"+
"<td class="title">Column1</td>"+
"</thead>"+
"<tr>"+
"<td>row1</td>"+
"</tr>"+
"<tr>"+
"<td>row2</td>"+
"</tr>"+
"<tr>"+
"<td>row3</td>"+
"</tr>"+
"<tr>"+
"<td>row4</td>"+
"</tr>"+
"</table><br/>How can I make these 2 tables appear inside the addresses fieldset ?<br/>"+
"<br/>How can I make the addresses fieldset always fill @60% of the height ?<br/>"+
"<br/>Note the size of each table will vary but can assume to be less than 6 rows.<br/>"+
"</table2data>";
text=text+"</root>";
try //Internet Explorer
{
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async="false";
xmlDoc.loadXML(text);
}
catch(e)
{
try // Firefox, Mozilla, Opera, etc.
{
parser=new DOMParser();
xmlDoc=parser.parseFromString(text,"text/xml");
}
catch(e)
{
alert(e.message);
return;
}
}
document.getElementById("table1").innerHTML=
xmlDoc.getElementsByTagName("table1data")[0].childNodes[0].nodeValue;
document.getElementById("table2").innerHTML=
xmlDoc.getElementsByTagName("table2data")[0].childNodes[0].nodeValue;
document.title=
xmlDoc.getElementsByTagName("heading")[0].childNodes[0].nodeValue;
}
</script>
</head>
<body onload="parseXML()">
<h1>Positioning test script</h1>
<span>
<fieldset id="intro">
<legend>header</legend>
<span id="to"></span><br/>
Header text
</fieldset>
<br/><br/>
<fieldset id="addresses">
<legend>addresses</legend>
<br>This is in the addresses fieldset</br>
<span id="table1" onclick="bringToFront('table1')"></span>
<span id="table2" onclick="bringToFront('table2')"></span>
<br>This is in the addresses fieldset...................................................................................and I would hope for it to appear beneath the tables above. Table 2 may not exist.</br>
</fieldset>
<br/><br/>
<fieldset id="footer">
<legend>footer</legend>
This is all
<br/><br/><br/><br/><br/><br/><br/><br/>
footer text<br/>
<br/>Down to here.
</fieldset>
</span>
</body>
</html>
produces overflow in the middle fieldset. I would like the tables in this fieldset to be contained by the fieldset. It's prettier. That would also make the footer fieldset visible, so it's essential ! Can anybody help please ? Also the text which should appear below these tables. Any idea why it isn't positioned inline after the tables end ? Thanks. How do I position a fluidly nested div inside a fluid container div but have the nested div 100px from each side? At the moment the nested div is fluid by applying 100% width, but that makes the nested div the same size as the container (instead of 100px smaller on each side) and ends up overflowing the container. Without using overflow:hidden how am I supposed to nest it so it nests at the correct size? Code:
.container { position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%; }
.nest { position: absolute;
top: 0px;
left: 0px;
margin: 100px;
width: 100%;
height: 100%; }
hi everyone, My css code: table.test{ font-family: Arial, sans-serif; font-size: 11px; width: 100%; CURSOR: default; border: 1px solid silver; border-collapse: collapse; padding: 3px; } table.aside{ font-family: Arial, sans-serif; font-size: 11px; width: 100%; CURSOR: default; border: none; padding: 3px; } th.aside, tr.aside, td.aside{ font-family: Arial, sans-serif; font-size: 11px; CURSOR: default; border: none; padding: 3px; } my nested tables, which overflows the width of the screen in ie 6 , but works on ie 7 and firefox. echo "<table class='aside' cellpadding='0px' cellspacing='0px' border='0'><tr><td width='80%' >$table1</td><td width='20%'>$table2</td></tr></table>"; Hi All, Developed a weird issue in FF and IE8 and am not sure what to do with it. I have some tables that will just not display correct, the table is rendering a little too small and making the text overflow the cells. Its really odd and not sure what to do about it? I took a screen shot in IE, but the have happens in FF. Anyone any ides? Ok, so I've learned to stay away from tables when you don't need them, and I have an instance where this is the case. I have a container div that has a header, content and a footer. On my home page, I have to divs next to each other with the same height and a div below them towards the right. To simplify my problem, look at this example. Code:
<html>
<body>
<div style="float:right">
Hello there!
</div>
<hr>
</body>
</html>
If there's a "float:right" on that div, the hr tag below doesn't get pushed down. But if I use relative positioning and don't use the floats, I can't put the two top divs next to each other. The other option is to use absolute positioning, but again content below doesn't get pushed down correctly. It seems that using "clear:both" works, but it seems weird that this has to be done. For example if I have floating divs in a container, I can get them to stretch out the container like so: Code:
<html>
<body>
<div style="border: 1px solid #000; ">
<div style="float:right">
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
</div>
<div style="clear: both"></div>
</div>
<hr>
</body>
</html>
Am I missing something fundamental here? Is there a better solution? Thanks in advance. Here's the site in Question: http://www.winchps.vic.edu.au It's a standard fixed width floated DIV columns with a wrapper. One thing it does have is a second DIV inside both columns to display the Gradient background over the top of the repeated background. It works perfect in Firefox & IE7 (with a tweak) but IE6 mkes the sidebar nested div drop below the original sidebar DIV click here for a screenshot for those lucky enough not to have IE6. Here's the CSS code for the basic layout: Code:
body {
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
font-size: 12px;
text-align: center;
margin: 0px 0px 60px 0px;
padding:0px;
border: 0;
line-height: 2;
}
#header {
width: 802px;
}
#wrapper {
width: 802px;
margin:0px;
padding: 0px;
text-align: left;
margin: 0 auto;
background: url(images/bodybg.jpg) center repeat-y;
}
#content {
padding: 0px;
margin: 0px;
}
#maingrad {
background: url(images/winchcontentgrad.jpg) top left repeat-x;
padding: 10px;
}
#main {
width: 589px;
float: right;
background: url(images/winchcontentbg.jpg) repeat;
border-left: solid 1px #000;
border-right: solid 1px #000;
}
#mainstop {
width: 589px;
float: right;
background: url(images/winchcontentbg.jpg) repeat;
border-left: solid 1px #000;
border-right: solid 1px #000;
border-bottom: solid 1px #000;
font-size: 10px;
}
#sidebargrad {
background: url(images/winchsidebargrad.jpg) top left repeat-x;
padding: 10px 5px 0px 10px;
}
#sidebar {
width: 200px;
float: left;
background: url(images/winchsidebg.jpg) repeat;
line-height: 2;
font-size: 14px;
border-left: solid 1px #000;
border-right: solid 1px #000;
}
I obviously need to put a conditional comment in there, same for what I did for the minor IE7 tweak, but I'm struggling to suss out what's causing it, I haven't found the specific issue on any of the regular sites (PIE etc). Anyone got any ideas? Centering DIVs inside other DIVs in Firefox? Can it be done in a straight forward way? Setting the inner DIVs float to none seemed to work for IE but not FF. The Example I've read a bunch about how div's won't stretch to accomidate div's inside of them if they overrun the height/min-height set for the container div. How do I get around this? You can see the skeleton of the site above. It's fine unless you resize the window smaller than the content. Alright, I've been working on my own custom border box for a while and I've almost got it, but it has a few problems still. How I do it is I have one div that contains it all (.box) that defines the height and width of the whole box. Then I have three boxRows to lay out the images, and then I define how three cells in each of those rows should behave, very much like how custom borders used to be done with tables. Here are the problems: In both firefox and internet explorer, the bottom row and the far right column actually appear OUTSIDE the .box containing box. There are two additional problems in internet explorer. First, the middle row handles the auto height differently and only expands about 10px instead of the height of the containing box. The second is that the whole middle row for some reason appears to be pushed to the right by about 16px. Any help would be appreciated. Here's the code: HTML: Code: <html> <head> <link rel="stylesheet" type="text/css" href="reset.css" /> <link rel="stylesheet" type="text/css" href="testBox.css"> </head> <body> <div class="box"> <div class="boxRowTop"> <div class="boxCellLeft"></div> <div class="boxCellMiddle"></div> <div class="boxCellRight"></div> </div> <div class="boxRowMiddle"> <div class="boxCellLeft"></div> <div class="boxCellMiddle"></div> <div class="boxCellRight"></div> </div> <div class="boxRowBottom"> <div class="boxCellLeft"></div> <div class="boxCellMiddle"></div> <div class="boxCellRight"></div> </div> </body> </html> And here is the layout css file: Code: /* Box classes */
.box {
background: rgb(120,120,120);
height: 200px;
width: 500px;
}
.boxRowTop {
height: 16px;
position: relative;
width:%100;
}
.boxRowMiddle {
height: auto;
width:%100;
position: relative;
}
.boxRowBottom {
height: 16px;
width:%100;
position: relative;
}
.boxCellLeft {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 16px;
}
.boxCellMiddle {
height: 100%;
margin-left: 16px;
margin-right: 16px;
width: auto;
}
.boxCellRight {
height: 100%;
left: 100%;
position: absolute;
top: 0;
width: 16px;
}
/* Define Cell Backgrounds/Images */
.boxRowTop .boxCellLeft {
background: url(../LandingImages/topleft_circ_corner.png) no-repeat;
}
.boxRowTop .boxCellMiddle {
background: url(../LandingImages/top_border.png) repeat-x;
}
.boxRowTop .boxCellRight {
background: url(../LandingImages/topright_circ_corner.png) no-repeat;
}
.boxRowMiddle .boxCellLeft {
background: url(../LandingImages/left_border.png) repeat-y;
}
.boxRowMiddle .boxCellMiddle {
background: rgb(255,255,255);
}
.boxRowMiddle .boxCellRight {
background: url(../LandingImages/right_border.png) repeat-y;
}
.boxRowBottom .boxCellLeft {
background: url(../LandingImages/bottomleft_circ_corner.png) no-repeat;
}
.boxRowBottom .boxCellMiddle {
background: url(../LandingImages/bottom_border.png) repeat-x;
}
.boxRowBottom .boxCellRight {
background: url(../LandingImages/bottomright_circ_corner.png) no-repeat;
}
And last, the reset CSS, which I don't think has anything to do with the problems because if I take it out it still has them. Code: 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, img, ins, kbd, q, s, samp,
small, strike, strong, tt, var, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, caption
{
margin:0;
padding:0;
border:0;
vertical-align:baseline;
}
* {font-size:1em; font-family: inherit;}
:focus {outline:none;}
body { font-size: 62.5%; line-height:normal; font-family: Arial, Sans-Serif; color:Black; } /* 62.5% (10px), 75% (12px), 87.5% (14px), 100% (16px) */
p { margin: 0 0 1.2em 0; }
a { color:#ff0000; text-decoration:none; }
a:link { color:#ff0000; text-decoration:nonee; }
a:visited { color:#ff0000; text-decoration:none; }
a:active { color:#ff0000; text-decoration:none; }
a:hover { color:#ff0000; text-decoration:none; }
a.h1,a.h2,a.h3,a.h4,a.h5,a.h6,h1,h2,h3,h4,h5,h6
{
font-weight:bold;
display:block;
text-decoration:none;
color:Black;
}
h1, a.h1, a:link.h1, a:visited.h1, a:active.h1, a:hover.h1 { color:Black; text-decoration:none; font-size: 2.00em; }
h2, a.h2, a:link.h2, a:visited.h2, a:active.h2, a:hover.h2 { color:Black; text-decoration:none; font-size: 1.75em; } /* this is normally skipped? 1.50em */
h3, a.h3, a:link.h3, a:visited.h3, a:active.h3, a:hover.h3 { color:Black; text-decoration:none; font-size: 1.50em; } /* 1.25em */
h4, a.h4, a:link.h4, a:visited.h4, a:active.h4, a:hover.h4 { color:Black; text-decoration:none; font-size: 1.25em; } /* 1.00em */
h5, a.h5, a:link.h5, a:visited.h5, a:active.h5, a:hover.h5 { color:Black; text-decoration:none; font-size: 1.00em; } /* 0.75em */
h6, a.h6, a:link.h6, a:visited.h6, a:active.h6, a:hover.h6 { color:Black; text-decoration:none; font-size: 0.75em; } /* 0.66em WTF? */
fieldset { border:solid 1px; padding:0.25em 0.5em 0.75em; margin: 0 0 1.5em; }
legend { margin:0 0 0 2em; padding:0 1em; }
textarea, input, select { border:solid 1px #ccc; margin:0; padding:0; }
textarea, input { padding:0 .2em; }
input:focus,textarea:focus,select:focus { border:solid 1px black; }
small { font-size:.9em; }
ul, ol, dl { position: relative; padding:0 0 0 1.5em; margin:1.5em 0; }
dir, menu { margin:1.5em 0; }
/* nested lists have no top/bottom margins */
ul ul, ul ol, ul dir, ul menu, ul dl,
ol ul, ol ol, ol dir, ol menu, ol dl,
dl ul, dl ol, dl dir, dl menu, dl dl,
dir ul, dir ol, dir dir, dir menu, dir dl,
menu ul, menu ol, menu dir, menu menu, menu dl
{
margin:0;
padding: 0 0 0 1.5em;
}
hr { margin:0.75em 0; padding:0; }
Any help would be GREATLY appreciated, as I've been working on this for a while! Thanks! In IE my center div is even with the rest of the columns. in ff it is not. why? My style sheet does not specify a top-margin to be anything other than default ... http://www.nevertap.com/event.php Hello I was wondering if any one could help me with a problem with some divs, I would like to create a web page using just css and html which looks like this:- Whay I would like to know is how would I get the divs to keep aliened as in the picture?? Any help would be very appreciated. Hi all, I've got a section of my site with three tabs at the top of it, and I want to change the content in the section depending on which tab is chosen, with a set of divs. I've been told that you can turn divs on and off with a button click. Can anybody tell me how to do this? Cheers hi all i am trying to have a container that contains two divs....one sidecase and one main content problem i am having is getting them to aign across the page - that is the main content page is starting where the sidebar ends......any ideas?? Hi All, I am trying to get to grips with css positioning and am hitting problems. The code below is my complete page (inc css). I am trying to get the 3 divs - leftbox, middlebox and rightbox to sit alongside each other with 5px gaps and all 3 being vertically aligned 5px below the frontsplash div. 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" lang="en" xml:lang="en">
<head>
<title></title>
<style type="text/css">
#header {
background-color: #80724d;
height: 70px;
width: 790px;
border-bottom: 1px solid #fff;
}
#navbar {
background-color: #d5c8a4;
height: 25px;
width: 790px;
top: 70px;
border-bottom: 1px solid #fff;
}
#frontsplash {
background-color: #fbf8ef;
width: 500px;
margin: 5px;
padding-left: 10px;
padding-bottom: 10px;
}
#frontboxcontainer {
}
#threeboxes {
display: block;
}
#leftbox {
float: left;
background-color: #d5c8a4;
width: 200px;
padding-left: 5px;
}
#middlebox {
top: 0px;
background-color: #d5c8a4;
margin: 210px;
width: 100px;
padding-left: 5px;
}
#rightbox {
top 0px;
background: #d5c8a4;
width: 100px;
margin: 310px;
}
h1 {
font-family: "Times New Roman", serif;
font-size: 24px;
color: #80724d;
padding: 0px;
}
h2 {
font-family: "Times New Roman", serif;
font-size: 14px;
color: #80724d;
padding: 0px;
}
p {
font-family: "Times New Roman", serif;
font-size: 14px;
color: #323232;
}
#navbar ul {
margin:0;
padding:0;
list-style:none;
}
#navbar li {
float:left;
margin:0;
padding:0;
border-right: 1px solid #fff;
}
#navbar a {
display:block;
padding:0px 10px;
}
</style>
</head>
<body>
<div id="header">
Site Name
</div>
<div id="navbar">
<ul>
<li> <a href="#">Home</a> </li>
<li> <a href="#">About</a> </li>
<li> <a href="#">Downloads</a> </li>
<li> <a href="#">Documentation</a> </li>
<li> <a href="#">Contributing</a> </li>
</ul>
</div>
<div id="frontboxcontainer">
<div id="frontsplash">
<h1>This is the title ... </h1>
<p>This is the introductory text This is the introductory text This is the introductory text
This is the introductory text This is the introductory text This is the introductory text
</p>
</div>
<div id="threeboxes">
<div id="leftbox">
<h2>DEMONSTRATION</h2>
<p> A fully functional demo of the
application is available online
</p>
</div>
<div id="middlebox">
<h2>SUPPORT US</h2>
<p>Why not donate to help keep
the project alive?
</p>
</div>
<div id="rightbox">
<h2>SERVICES</h2>
<p>Professional services available
with the application.
</p>
</div>
</div>
</div>
</body>
</html>
It has all gone pear shaped..... any ideas? Thanks. if I have a main div that is 790 px wide, how can I have 6 divs floating inline that all are equal in width and take up all the space? I've tried to set the width and there is always a space at the right end. When it looks like I have 5 px leftover and bump up the width by 1 px, adding that to six divs makes the last one drop down. any tutorials or ideas would be great. Thanks, Scott Hiya, this is my first time posting here; tia for helping me out with my problem. I am trying to center a 784 wide page, cut up into multiple divs. It's working, but I am getting a problem which I cannot get rid of. I'm using position:relative, and this is making the page scroll as if the images were below each other. They are showing up in the correct spots, but once the page is finished, I end up with another page worth of white space to scroll through (which I do not want.) I hope this explained it correctly. Below is an example of the html and css I am using. Notice the red drops below the final picture then length of the picture itself. Once the entire page is done, it is about 1500px longer than needed. ******************************* HTML ******************************* <html> <head> <link rel="stylesheet" type="text/css" href="new.css"> </head> <body> <div class="begin"> <div class="header_piece_01"><img src="images/picture_01.jpg"></div> <div class="rocket_logo"><img src="images/picture_02.jpg"><br><img src="images/picture_03.jpg"><br><img src="images/picture_04.jpg"></div> </div> </body> </html> ******************************* new.css ******************************* body { font-family : Verdana, Arial, Helvetica, sans-serif; font-size : 11px; text-align : justify; line-height : 150%; color : #000000; margin : 0px; border : 0px; padding : 0px; background-color : #FFFFFF; } a { text-decoration : none; } a:hover { text-decoration : none; } .begin { width : 784px; background-color : red; margin-left : auto; margin-right : auto; } .header_piece_01 { width : 31px; height : 118px; } .rocket_logo { position : relative; top : -118px; left : 31px; width : 289px; } |
|||||||