|
HTML - Problem Overlapping Divs
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<STYLE>
#mp { border:1px solid #999; width:300px; background-color:#222; color:#999;}
#mptabpanel { float:left; width:300px; height:400px; }
#mptabcomments { background-color:#003; z-index:4; position:relative; top:0px; left:0px; }
#mptablinks { background-color:#030; z-index:5; position:relative; top:0px; left:0px; }
#mptabplaylist { background-color:#300; z-index:6; position:relative; top:0px; left:0px; }
</STYLE>
</head>
<body>
<!-- open mediaplayer --><DIV id="mp">
<DIV id="mptabpanel">
<DIV id='mptabcomments'>COMMENTS TAB</DIV>
<DIV id='mptablinks'>LINKS TAB</DIV>
<DIV id='mptabplaylist'>PLAYLIST TAB</DIV>
</DIV>
</DIV><!-- close mediaplayer -->
</body>
</html>
The three divs, "mptabcomments/links/playlist" are supposed to occupy the exact same position. (Only one of them will be visible at any time.) I've tried relative positioning and altering each div's z-index but my brain seems to have switched off here! I can't use absolute positioning because this layout is part of a bigger layout which itself is going to be absolutely positioned around the screen and I don't want to have to manually update each contained div's position every time the parent div is moved. Similar TutorialsHello people. I am desiging a web framework and that requires me to create overlapping divs. They will be absolutely positioned and I am planning on using the DOM to allow the user to select which one to take precedence and create special effects with. Kind of like how the windows work in MS Windows with the frames overlapping each other Can someone kindly give me some CSS or JavaScript or any clues as to how I might do this? Thanks in advance and regards, mintsmike http://completely-gaga.com/ hi i want to make it so that my image fader sits ontop of my header, i've set the positioning of where i want it to be and tried z-index, but it's still not working. any idea what i need to do? Hi to all, I am creating an event planner which means that I have a calendar like in html generated by server side script, with users created events stored in a database that are displayed with floating divs that can span across many days. Events can be added/edited at any time by many users, and I can not modify the way they add or modify it. Therefore I can have many events on any day and an event can last an indefinite number of days. The problem is that some of the event will overlap, is there any way in html /css to prevent the <div> with absolute position to overlap without any javascript ? Thanks a Million, Alex Hello, thanks for stopping by to help me out. I'm making myself a website at the moment, and I'm using divs to create the layout. I've got it looking the way I want in IE but there's a glitch with Firefox. I'm using php include to insert the header (which is a container div with two divs inside - stacked horizontally) on the top of all pages. With IE this works fine, but in Firefox the div in the main page containing all the body and text overlaps onto the header. I've taken two screenshots if you want to take a look to see what I mean: FF: http://img253.imageshack.us/img253/9...eenshotpq3.jpg IE: http://img441.imageshack.us/img441/6...eenshotgp9.jpg The page is http://www.exclusive-2-u.com/GeorgiaMarie/about.php if you want to check out the code. Thanks again! Georgia Okay, so as you can see from this page: http://ggmdolly.com/headersample.php The only problem with the page is that the text is overflowing out of the supposed layout area. The reason for this is that if I add padding to the div, the layer's BACKGROUND IMAGE (which is the grey area plus the shading over the main background) also moves, and looks really messed up. So I need to know how I can add padding to the text - what way is there? I tried making a new div layer within the div layer that contains the background - but the div doesn't 'stretch' for the text so the background doesn't repeat itself, if you get what I mean. Any solutions? My code looks like this: <div id=layer2 style="position:absolute; top:348px; left:276px; width:785px; z-index:2; padding-left:0px; padding-right:0px; padding-top:0px; background-image:url(http://ggmdolly.com/divbackground.png);"> <body> (Body text) </body> </div> Hi guys, I am new in html. i have problem while creating a screen. when i scroll down my TD field completely overlap to TH field. I got one code from google. i goes well till my input field is text. but when i used select option in html, it ovelap to my TH. i send u my code to u. and same vbscript behind this code. Please correct me. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML><HEAD><TITLE>Freeze Foot</TITLE> <META http-equiv=Content-Type content="text/html; charset=windows-1252"> <META content="MSHTML 6.00.2900.2180" name=GENERATOR> <link href="warehouse/external_css_file.css" rel="stylesheet" type="text/css"> <style> .select{ outline:groove; overflow:hidden; border-width: thin; border-color: #000000; } </style> </HEAD> <BODY><!-- CSS style to support freeze footer --> <form action="formout.php" method="post"> <H2 align=center> </H2> <STYLE type="text/css"> THEAD TH { BORDER-RIGHT: silver 1px thin; CURSOR: default; POSITION: relative; BACKGROUND-COLOR: silver; font-size:14px; } THEAD TH.locked { BORDER-RIGHT: silver 1px thin; CURSOR: default; POSITION: relative; BACKGROUND-COLOR: silver; font-size:14px; } THEAD TH { Z-INDEX: 20; ; TOP: expression(parentNode.parentNode.parentNode.parentNode.scrollTop-2) } THEAD TH.locked { Z-INDEX: 30 } TD.locked { Z-INDEX: 10; ; LEFT: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft); POSITION: relative; BACKGROUND-COLOR: #ffeaff } TH.locked { Z-INDEX: 10; ; LEFT: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft); POSITION: relative; BACKGROUND-COLOR: #ffeaff } TFOOT TR { Z-INDEX: 20; POSITION: relative; ; TOP: expression(parentNode.parentNode.parentNode.TopOfFooter) } .select { position:relative; z-index:-20;} </STYLE> </p> <DIV id=tbl-container align="center" style="BEHAVIOR: url('file:///D|/swapnilwork/freezeFoot.htc'); OVERFLOW:scroll; WIDTH:450px; SCROLLBAR-BASE-COLOR: #ffeaff; HEIGHT: 200px" > <table bgcolor=white align="center"> <thead> <tr> <th><div align="center">Item Name</div></th> <th><div align="center">Bags</div></th> <th><div align="center">Quantity</div></th> <th><div align="center">UOM Name</div></th> <th><div align="center">Shift</div></th> <th>Remarks</th> </tr> </thead> <tbody> <tr> <td><input name="itmnm" type="text" id="itmnm" size="40"></td> <td><input name="Bags" type="text" id="bags" size="15"></td> <td><input name="qty" type="text" id="qty" size="10"></td> <td><input name="uomname" type="text" id="uomname" size="15"></td> <td><label> <select name="select" size="1" class="select" > </select> </label></td> <td><input name="remark" type="text" id="remark" size="40"></td> </tr> <tr> <td><input name="itmnm" type="text" id="itmnm" size="40"></td> <td><input name="Bags" type="text" id="bags" size="15"></td> <td><input name="qty" type="text" id="qty" size="10"></td> <td><input name="uomname" type="text" id="uomname" size="15"></td> <td><label> <select name="select2" class="select" id="select2"> </select> </label></td> <td><input name="remark" type="text" id="remark" size="40"></td> </tr> <tr> <td><input name="itmnm" type="text" id="itmnm" size="40"></td> <td><input name="Bags" type="text" id="bags" size="15"></td> <td><input name="qty" type="text" id="qty" size="10"></td> <td><input name="uomname" type="text" id="uomname" size="15"></td> <td><label> <select name="select3" class="select" id="select3"> </select> </label></td> <td><input name="remark" type="text" id="remark" size="40"></td> </tr> <tr> <td><input name="itmnm" type="text" id="itmnm" size="40"></td> <td><input name="Bags" type="text" id="bags" size="15"></td> <td><input name="qty" type="text" id="qty" size="10"></td> <td><input name="uomname" type="text" id="uomname" size="15"></td> <td><label> <select name="select4" class="select" id="select4"> </select> </label></td> <td><input name="remark" type="text" id="remark" size="40"></td> </tr> <tr> <td><input name="itmnm" type="text" id="itmnm" size="40"></td> <td><input name="Bags" type="text" id="bags" size="15"></td> <td><input name="qty" type="text" id="qty" size="10"></td> <td><input name="uomname" type="text" id="uomname" size="15"></td> <td><label> <select name="select5" size="1" class="select" id="select5"> </select> </label></td> <td><input name="remark" type="text" id="remark" size="40"></td> </tr> <tr> <td><input name="itmnm" type="text" id="itmnm" size="40"></td> <td><input name="Bags" type="text" id="bags" size="15"></td> <td><input name="qty" type="text" id="qty" size="10"></td> <td><input name="uomname" type="text" id="uomname" size="15"></td> <td><label> <select name="select6" id="select6"> </select> </label></td> <td><input name="remark" type="text" id="remark" size="40"></td> </tr> <tr> <td><input name="itmnm" type="text" id="itmnm" size="40"></td> <td><input name="Bags" type="text" id="bags" size="15"></td> <td><input name="qty" type="text" id="qty" size="10"></td> <td><input name="uomname" type="text" id="uomname" size="15"></td> <td><label> <select name="select7" id="select7"> </select> </label></td> <td><input name="remark" type="text" id="remark" size="40"></td> </tr> <tr> <td><input name="itmnm" type="text" id="itmnm" size="40"></td> <td><input name="Bags" type="text" id="bags" size="15"></td> <td><input name="qty" type="text" id="qty" size="10"></td> <td><input name="uomname" type="text" id="uomname" size="15"></td> <td><label> <select name="select8" id="select8"> </select> </label></td> <td><input name="remark" type="text" id="remark" size="40"></td> </tr> </tbody> </table> </DIV> </form> </BODY> </HTML> I am working on a page and everything shows up perfectly in every browser I have tried except for internet explorer, which messes everything up. Here is how the page is supposed to look: http://i140.photobucket.com/albums/r.../Picture12.png however, here is how it looks in internet explorer. it moves the entire div underneath everything else when it should be aligned next to it: http://i140.photobucket.com/albums/r.../Picture13.png and also, in internet explorer it messes up within the div itself, but only to one of my thumbnails like so: http://i140.photobucket.com/albums/r...icture14-1.png my boss and i have been fighting with this for a while now, here is the link to the page: http://www.nba.com/sixers/dance/media.html and here is my coding for the div itself, if you need to see the rest i can post it as well <div id="dancers"> <div class="dancer"> <a href="/sixers/dance/annie.html"><img src="/media/sixers/annie_thumb.jpg" /></a> <a href="/sixers/dance/annie.html">Annie</a> </div> <div class="dancer"> <a href="/sixers/dance/chenelle.html"><img src="/media/sixers/chenelle_thumb.jpg" /></a> <a href="/sixers/dance/chenelle.html">Chenelle</a> </div> <div class="dancer"> <a href="/sixers/dance/dana.html"><img src="/media/sixers/dana_thumb.jpg" /></a> <a href="/sixers/dance/dana.html">Dana</a> </div> <div class="dancer"> <a href="/sixers/dance/danielle.html"><img src="/media/sixers/danielle_thumb.jpg" /></a> <a href="/sixers/dance/danielle.html">Danielle</a> </div> <div class="dancer"> <a href="/sixers/dance/deirdre.html"><img src="/media/sixers/deirdre_thumb.jpg" /></a> <a href="/sixers/dance/deirdre.html">Deirdre</a> </div> <div class="dancer"> <a href="/sixers/dance/erica.html"><img src="/media/sixers/erica_thumb.jpg" /></a> <a href="/sixers/dance/erica.html">Erica</a> </div> <div class="dancer"> <a href="/sixers/dance/jeaneen.html"><img src="/media/sixers/janeen_thumb.jpg" /></a> <a href="/sixers/dance/jeaneen.html">Janeen</a> </div> <div class="dancer"> <a href="/sixers/dance/jenn.html"><img src="/media/sixers/jenn_thumb.jpg" /></a> <a href="/sixers/dance/jenn.html">Jenn</a> </div> <div class="dancer"> <a href="/sixers/dance/jessica.html"><img src="/media/sixers/jessica_thumb.jpg" /></a> <a href="/sixers/dance/jessica.html">Jessica</a> </div> <div class="dancer"> <a href="/sixers/dance/julie.html"><img src="/media/sixers/julie_thumb.jpg" /></a> <a href="/sixers/dance/julie.html">Julie</a> </div> <div class="dancer"> <a href="/sixers/dance/kate.html"><img src="/media/sixers/kate_thumb.jpg" /></a> <a href="/sixers/dance/kate.html">Kate</a> </div> <div class="dancer"> <a href="/sixers/dance/lauren.html"><img src="/media/sixers/lauren_thumb.jpg" /></a> <a href="/sixers/dance/lauren.html">Lauren</a> </div> <div class="dancer"> <a href="/sixers/dance/melanie.html"><img src="/media/sixers/melanie_thumb.jpg" /></a> <a href="/sixers/dance/melanie.html">Melanie</a> </div> <div class="dancer"> <a href="/sixers/dance/melinda.html"><img src="/media/sixers/melinda_thumb.jpg"></a><br><a href="/sixers/dance/melinda.html">Melinda</a> </div> <div class="dancer"> <a href="/sixers/dance/nina.html"><img src="/media/sixers/nina_thumb.jpg" /></a> <a href="/sixers/dance/nina.html">Nina</a> </div> <div class="dancer"> <a href="/sixers/dance/vi.html"><img src="/media/sixers/vi_thumb.jpg" /></a><br><a href="/sixers/dance/vi.html">Vi</a> </div> </div> Hey guys my site http://www.atlanta-web.com I have 3 <div>s which i centered using the css technique Code: margin: 0 auto; They work perfect in IE 7, FF2, FF3 but fail in IE6 any idea what i could do to make this correct? Thanks, Eric Hello, In Internet Explorer, the following page shows just fine: www.myspace.com/milqud However, in Firefox, there's small gaps between the images and Flash files. I'd like to remove these gaps. How do I go about doing this? Here's the html code I'm using: HTML Code: <img src="http://www.milqud.com/myspace/topleft.jpg" width="390" height="520" border="0"> <object enableJSURL="false" enableHREF="false" saveEmbedTags="true" allowScriptAccess="never" allownetworking="internal" type="application/x-shockwave-flash" allowScriptAccess="never" allownetworking="internal" height="520" width="410" data="http://www.milqud.com/myspace/topheader.swf"> <param name="allowScriptAccess" value="never" /> <param name="allowNetworking" value="internal" /> <param name="movie" value="http://www.milqud.com/myspace/topheader.swf" /> </object> <br> <img src="http://www.milqud.com/myspace/mainbg.jpg" border=0> http://ebay.110mb.com/test/ I made some changes to the design and ended up mashing it! I just can't see where I have gone wrong .... anyone any ideas? Hi, I was trying to develop a page in HTML/CSS but having some difficulties. I have created many pages before but this one is giving me a hard time. What I have done differently this time it, i have used Positioning tags. The problem i am having is I can not set any two divs or images side by side. If i set 1 image and 1 div side by side they are being placed on top of each other. But, i may be going crazy here, i was able to place the top two divs side by side (logo and privacy_protected). Can any one please tell me what i am doing wrong or what i should do? Here is the code that i am using: Code: <body>
<div id="wrapper">
<div id="bodypic">
<div id="logo"><a href="index.html"><img src="images/transparent.png" width="319" height="100" border="0" /></a></div><!--logo -->
<div id="privacy_protected"></div><!--privacy_protected -->
<img src="images/transparent.png" height="29" width="1020"/>
<div id="728block">
<img src="images/transparent.png" height="89" width="18" style="float:left"/>
<div id="728adunit"><img src="images/728x90.jpg" width="728" height="90" /></div><!--728adunit -->
<a href="#"><img src="images/transparent.png" height="89" width="23" style="float:left"/></a>
<a href="#"><img src="images/transparent.png" height="45" width="219" style="float:left"/></a>
<a href="#"><img src="images/transparent.png" height="43" width="202" style="float:left"/></a></div><!--728adblock -->
</div><!--bodypic -->
</div><!--wrapper -->
</body>
And the CSS Code: #wrapper {
height: 1174px;
width: 1024px;
margin-right: auto;
margin-left: auto;
}
#bodypic {
background-image: url(images/wrapper.jpg);
float: left;
height: 1174px;
width: 1024px;
}
body {
background:#FFF;
font-family:Arial, Helvetica, sans-serif;
text-align:justify;
font-size:14px;
}
a:link {
color: #06F;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #06F;
}
#logo {
background-image: url(images/Editorial_v3-1_01.gif);
float: left;
height: 103px;
width: 498px;
}
#privacy_protected {
background-image: url(images/Editorial_v3-1_02.jpg);
float: left;
height: 103px;
width: 526px;
}
#728block {
float: left;
height: 91px;
width: 1024px;
}
#728adunit {
float: left;
height: 90px;
width: 728px;
}
a:hover {
text-decoration: underline;
color: #06F;
}
a:active {
text-decoration: none;
}
Please help! I want to make an HTML "bar graph". This would be very simple except that I want the name of each bar to be overlaid. Again, simple, but what if the bar name is longer than the bar? Then it can't be text inside a coloured DIV, can it? Or can it? An important thing is that the graph's width will not be fixed. It'll probably take up about 40% of the page. So if the available page width is altered, the graph and it's bars will have to be re-stretched. Could somebody show me a simple example of how to "overlay" text over a DIV that not wide enough to contain it? Here's what I want: Thanks in advance for any help, Seymour. i've trouble getting my header not to interfer with my menu. I think its got something to do with my margins, but i cant figure it out. Thx for helping out a total beginner! http://wemadethis.net/blog.html i'm trying to wrap my head around floats, and implement them into a new design i'm doing. basically it's a 4 column directory listing. it looks fine when the browser is >960px, but once you resize your browser so only two columns fit horizontally, the 3rd column appears below as desired BUT it is off to the right, and the 4th column is below on the left. once you resize your browser so only one column fits horizontally, it appears correct again. any tips to fix the layout when only two columns can fit horizontally? the site is here (css is in the header for now): http://cortlandareatribune.com/test/directory.html I have 3 swf files (buttons that expand vertically when mouse overed) that i want them to overlap a picture. they are all placed in a table as seen in the pic, can this be done? Hi everyone, Sorry to ask questions, I'm sure it gets annoying to have newbies bug you. At this point, I just don't know where to look. I googled this issue and found this site, but the steps didn't do anything for me like it did the original posters problem. I started making a site from dreamweaver, which I did not much enjoy. I left and went back to my usual notepad/IE. I have it online now, and it looks ridiculous on Firefox. I've tried the css reset, which only messed it up even further. I've tried validator, which didn't really do anything but tell me about errors that I don't even understand. I'm getting so frustrated! What on Earth am I doing wrong? http://exit20.com/vguadiana/index.html hi, i have a table, i freezed(locked) the first column and firs row of the table.whilw scrolling down, the freezed(locked) column camouflages the freezed row.but i don't want this.i want the freezed row to caoumaflage the freezed column.do you have any ideas? Regards. This is my first project using CSS and anything other than basic HTML and it's been going good so far. The page I'm designing is for my new guild on World of Warcraft (yes I'm addicted) and my problem is with the Content DIV i created. The site is http://twilightsdawn.50webs.com/index.html In the code, I nested DIV elements containing the actual news posts themselves within the actual Content DIV, and by not specifying a height I had hoped the element would resize and simply tack on extra DIVS below one another. This seems to be the case with Banner and Content Text DIVs but the second set simply overwrite the previous and all my attempts to force the second "news post" below the first have failed or resulted in bizarre alignments. I am at a loss and would appreciate any design suggestions and/or feedback on the code. Thanks I wasn' too sure if I should post this here or not. If not, I'm really sorry. I'm working the home page and here is what I was trying to accomplish. Under the header and the menu, we would have a left section of about ~520px. It would be divided into 2 parts. Top and bottom section. Also, there would be a right column of say 250px The texts of the "content area" (left) and the "right column" are overlapping. I had forgotten a lot of the CSS and can't seem to fix this issue. I probably did some things with css that are not "proper" Anyway, here's a link to the page and to the CSS Link css Thanks in advance. heres the test site. http://thefamilydynamic.jsimsc.com/ and what i am trying to accomplish is the drop down menu's at the top to overlap the frame below it (FRAME B) instead of being hid behind it. i tried ALLOWTRANSPARENCY="true" but the menu still drops behind frameb the menu itself IS transparent, so i should be able to see the stuff on frameB when the menu drops down |
|||||||