|
CSS - Two Divs Writing Over Each Other
I have two divs
Code: <div class="QuickLinkDisplay" dir="ltr" lang="en"> Hello, World!<br /> Test<br /> Test </div> <br /> <div class="ContentDisplay" dir="ltr" lang="en"> Hello, World!<br /> Test<br /> Test</div> </body> The corresponding styles are as follows Code:
div.ContentDisplay
{
background-color: rgb( 255, 250, 238 );
background-image: url( ../../../images/ssplash/ContentBackground.gif );
font-size: 10pt;
left: 200px;
margin-bottom: 0%;
padding: 5px;
position: absolute;
width: 575px;
}
div.QuickLinkDisplay
{
background-color: rgb( 255, 227, 160 );
background-image: url( "../../../images/ssplash/QuickLinkBackground.gif" );
left: 200px;
padding: 5px;
position: absolute;
width: 575px;
}
The problem is, that ContentDisplay which is supposed to be displayed under QuickLinkDisplay, is printed right in the middle of QuickLinkDisplay (see it in action here The middle column is all I'm concerned about) Anyone know how to fix this? Similar TutorialsOk, 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. 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. 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? 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. CSS coding started. Please see post #3 Here's the design: 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! Is there a way to detect whether someone is using a mobile device, and write specific CSS according to whether the viewer is using a computer or Iphone/ Blackberry or other mobile device? Any links or info is appreciated. thanks - Hi. I have a nav bar on my site which I created using Suckerfish Dropdowns. my <UL>-s id is "nav". Everything is working when I hide secong level list by Css: Code: ul ul{display:none;}
But when I change it to (so as to not hide all second level lists) Code: ul#nav ul{display:none;}
, the browser still hides the list, but didn't show it on hover! : Code: li:hover ul, li.sfhover ul{
display: block;
}
This behaviour seems very strange for me. Can anyone explain me that? The address of the page is http://www.dinal.ru/new/ Thank you. Artashes Hi. I have this DIV element which has content inside, and which has some JS code implemented on it. Every thing works like a charm. Then, I add a transparent PNG background. Everything's still working. But for the PNG background to be transparent in IE I have to set a filter on the DIV, like this: CSS Code: Original - CSS Code * html #master_container /* This is the DIV element */ { background-image: none; background-color: transparent; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='./images/main_window_glass.png', sizingMethod='scale'); } * html #master_container /* This is the DIV element */ Which in turn, for some blunt and very unknown reason, cancels any functionalities of the content inside the DIV or the JS code relative to the DIV. Here, take a look: http://pilau.phpnet.us/mctours/index.html Compare in FireFox and IE6 and tell me if you have ANY clue! Thanks, very much, frustrated Pilau Hi, I'm currently trying to write a website that will look like this: http://andrew.estyles.com.au/website.jpg The website will be anchored to the top left of the screen and will stretch 100%. The main content area (light blue) must stretch vertically to fit the content, and the side bar (purple) must stretch to the same height as the main content area. What I want to do is let the user hide the side bar by clicking on a button on it (using Javascript). When they click the button, I want the side bar to shrink to about 10-20px in width (enough so that it's still there and you can click another button on it to show it). When the button is clicked to hide it, I want the main content area to move left and fill in the space where the side bar was (and similarly, I want it to move back to the right when the side bar is expanded) I'm having troubles figuring out the CSS to do this. Here's what I've got so far: HTML: Code: <div id="topBanner">Banner goes here!</div>
<div id="menuBar">{{T_MENU}}</div>
<div id="main">
<div id="leftBar">Side Bar</div>
<div id="content">Main Content
</div>
</div>
CSS: Code: /* GENERAL STYLES */
body
{
margin: 0px;
}
img
{
border: 0px;
}
/* END GENERAL STYLES */
/* top website banner */
#topBanner
{
width: 100%;
height: 100px;
background-color: #CCCCCC;
border: 0px solid black;
}
/* bar containing the menu */
#menuBar
{
width: 100%;
height: 20px;
background-color: #666666;
border: 0px solid black;
}
/* container for leftBar and content */
#main
{
width: 100%;
background-color: #0000FF;
background-image: url('../images/main_background.gif');
background-repeat: repeat-y;
}
/* left bar containing quick links etc */
#leftBar
{
float: left;
width: 140px;
padding: 5px;
}
/* main content area */
#content
{
font-family: Verdana, Ariel, Helvetica, Times New Roman;
}
Using that code, I get my side bar fine etc, it all works fine - but I'm not sure what I should be doing to hide it (I don't mean I don't know the javascript code to do it, I just mean I don't know what I actually need to modify in the divs). Also, you'll note that I'm using the faux column method described here to put in my side bar if that makes a difference. The image I am using is just 150px (size of my side bar) one colour on the left, and then another colour for the rest of it. So when I shrink the side bar, I need to adjust the background images too. So yeah, if anyone can send me in the right direction I'd appreciate it! Cheers. I have a header.inc file and a footer.inc file that is called to each new file that I create. The header.inc file holds all the javascripts as well as calls the css, etc. It also begins the body and the footer.inc file closes the body. In other words in each new file that I create I have a php statement calling the header, and at the bottom of the file another statement that calls the footer. So each new file is really only part of the body as the title and head are found in the header.inc file. What I would like to do is be able to change the background color of the body of a new file if I choose to do so. But obviously because each new file is only part of the body I cannot put a css style in the new file. Is there any way of writing a php statement that I can place in a new file that would allow me to change the background-color of let's say #faunabody for that particular page??. Hope this is clear...thanks alot Hey, does anyone know if there's a mozilla equivilent to writing-mode? um .. that's all Thanks Hi there, For some reason, I have a white space appearing above my divs. This is only happening in FF though. I have a header and 2 columns underneath, but the two columns underneath the header have a white gap above them. This is my CSS: Code:
#clear{
clear:both;
}
#wrapper{
width: 780px;
margin: 0 auto;
}
#header_wrapper{
width: 780px;
background-image: url('img/header_bg.jpg');
height: 86px;
}
#logo{
float:left;
margin-left: 20px;
}
#header_right{
float:right;
margin-right: 20px;
margin-top: 60px;
}
#left{
float:left;
width: 580px;
margin-top:0px;
}
#right{
float:right;
background-color: #dddddd;
width: 200px;
}
and this is my HTML Code: <div id="wrapper"> <div id="header_wrapper"> <div id="logo"> <a href="index.html"> <img src="img/logo.jpg" alt="Pitter's Painting" border="0" /> </a> </div> <div id="header_right"> <a href="index.html" class="orange">Home</a><span class="white_small"> | </span><a href="#" class="orange">Contact Us</a> </div> </div> <div id="clear"></div> <div id="left"> sadsad </div> <div id="right"> nav </div> Any ideas what I have wrong? Please have a look at http://www.root.lamtha2.co.uk/cssproblem/ why is there a gap between #header and #maincontent in both IE and FF how do I resolve? thanks Right now I'm using a table for showing how many people from each state have signed a petition. It looks sort of like this: Code: <table> <tr> <td bgcolor="#FDFCE5" align="center"><a class="state" href="./signers.php?search_field=state&state=CA">CA</a></td> <td bgcolor="#FDFCE5" align="center"><a class="state" href="./signers.php?search_field=state&state=CA">1242</a></td> </tr> <tr> <td align="center"><a class="state" href="./signers.php?search_field=state&state=TX">TX</a></td> <td align="center"><a class="state" href="./signers.php?search_field=state&state=TX">550</a></td> </tr> <tr> <td bgcolor="#FDFCE5" align="center"><a class="state" href="./signers.php?search_field=state&state=FL">FL</a></td> <td bgcolor="#FDFCE5" align="center"><a class="state" href="./signers.php?search_field=state&state=FL">487</a></td> </tr> </table> Should I be using DIVs? Any ideas as to why i'm getting these 2 gaps where the white background is clearly visible? It's under the header div and above the footer div, which surrounds my content/container div. There also seems to be a margin or padding around the text in the leftSide and mainText divs, but none around the text in the rightSide div. Hmmm? This problem can be reproduced in FF. http://www.indusmultifoods.com/test/indus.php Any insight would be greatly appreciated. Thanks! Amit p.s. there is no php code as of now, i just have a habit of starting off my webpages with php extensions. 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. 1.On amazon.com's home page, they have a search bar with a background image on top of another background image. Is this done with a background div with z index 1 immediately followed by the search bar's background div with z index 2? 2.I'm confused about where divs are to be placed. If you have a form with a table layout, would the div be placed outside the form tag or outside the table tag? 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 |
|||||||