|
HTML - How Many Divs Should You Use, Containers Etc...
So i was looking at a sites code and thought it looked very pro, now in one section they have a 2 col results table made from divs so it might display something like, (nb: img is just a small icon image)
img teamX Vs TeamY 6-2 <-- a row img teamC Vs TeamF 2-8 this pic illustrates it:- Now each row has it own "row container div" and the whole thing is within the "table container div" but then there are 4 divs (cell divs) to hold all the content, for example HTML Code: <div class="cont"><a href="?page=1">
<div style="float:left; width:38%"><img class="game" src="1.gif" /> <b><img class="flag" src=2.gif" /> teamX</b></div>
<div style="float:left; width:9%; text-align:center">vs</div>
<div style="float:left; width:38%"><img class="flag" src="3.gif" /> TeamY</div>
<div style="float:left; width:15%; text-align:right; "><b>6</b> - 2</div>
<br style="clear:both"/>
</a>
</div>
Why do they use all the cell divs, why not just put all the text and images into the "row conatiner div", it's not like the font type or size is different for the text, is this the right way to code?? Similar TutorialsHi, I have added a screen shot to show what i mean here A site i am working on reuires 4 boxes in the main content area. I have started the template and i have managed to get the first 2 boxs to always have the same height with the following scipt Code: function fixH(one,two) {
if (document.getElementById(one)) {
var lh=document.getElementById(one).offsetHeight;
var rh=document.getElementById(two).offsetHeight;
var nh = Math.max(lh, rh);
document.getElementById(one).style.height=nh+"px";
document.getElementById(two).style.height=nh+"px";
}
}
window.onload=function(){
fixH('box1','box2','box3','box4');
}
i have added box3 and box4 to the bottom part and i tried a number of ways to get it to work but box 3 and 4 just wont stretch to match the others height. Please can you let me know what needs to be added to make this work? You will see box 1 and box 2 are the same height and this is done by using the script above. Box 3 and box 4 are not the same height. Any suggestions? extra info: The boxes are defined in my style sheet and i have not set the height because i dont want a fixed height. I want the boxes to stretch as i type out text into them but for them to keep the same layout on the pege so the top 2 boxes always need the same height and the bottom 2 need the same height aswell. Hey all. Here is the link to the site: http://test.gdconf.com/scheduler/ Look at the bottom part of the page where you should see Session Wish List and myGDC Schedule. If you look at the page in IE, there is extra spacing after the right-side scroll bar. Where is that dead space coming from and how can it be removed? It is making it so that the spacing is off on 2nd column. Please let me know if you guys need any code. Thanks. I'm trying to create a page where there is a centered background image, and two div's, one on the left and one on the right, all aligned properly. I tested it by syncing it to my website, and I -think- it displays correctly. However it definitely does not display correctly in Dreamweaver, as in Dreamweaver my central background image is slanted to the left for some reason. Can someone please check my code to make sure it has this layout? (Background image centered, with one section on left and one on right, two sections has same size and same distance from background image) But in Dreamweaver it shows up like this, so I'm worried it might not display correctly on computers with different resolutions: Code: <!DOCTYPE HTML>
<html>
<head>
<!-- Create container type object containing background image with interactive image links layered on top. -->
<!-- Objects are centered on screen. Sub-image positions are relative to container -->
<style>
#container {
display: block;
margin-left: auto;
margin-right: auto;
position: relative;
border:none;
width: 380px;
height: 633px;
background-image: url("pictures/mainmenu.png");
background-position:center;
}
#container img {
position: absolute;
border:none;
left: 65px;
width: 245px;
height: 53px;
}
<!-- the three buttons -->
#image1 {top: 225px}
#image2 {top: 300px}
#image3 {top: 375px}
</style>
<meta charset="utf-8">
<LINK href="style.css" rel="stylesheet" type="text/css">
<title>Main Playlist</title>
</head>
<body>
<br>
<br>
<div id="wrap">
<div id="left"><a href="ContactInfo.html" style="color:#000">Profile</a></div>
<div id="right">Upcoming works</div>
<div id="container">
<a href="song1.html"><img src="pictures/button-hualuowuyuan.png" alt="song1" id="image1" /></a>
<a href="song2.html"><img src="pictures/button-river.png" alt="song2" id="image2" /></a>
<a href="song3.html"><img src="pictures/button-snow.png" alt="song3" id="image3" /></a>
</div>
</div>
</body>
</html>
CSS: Code: @charset "utf-8";
/* CSS Document */
body {
margin:10px;
padding:10px;
background-image: url(pictures/audigrandpiano.jpg);
background-repeat:no-repeat;
background-position:right bottom;
}
img.center{
display: block; margin-left: auto; margin-right: auto;
}
#wrap {
position:relative;
min-height:100%;
}
#left {
float:left;
width:300px;
height:500px;
text-align:center;
}
#right {
float:right;
width:300px;
height:500px;
text-align:center;
}
Really appreciate it I have this code: Code: <body> <div style="width: 150px; height:150px; border:1 solid red; float: left">111</div> <div style="width: 150px; height:150px; border:1 solid red; float: left">222</div> <div style="width: 150px; height:150px; border:1 solid red; float: left">333</div> </body> What you see are three fixed-size DIVs on the same row but aligned to the left. I need the same effect (using any method) that has those three boxes centred on the page. It must also fulfill this criteria: 1) Be on the same line 2) Be fixed-size 3) Be a unique element for each in terms of code, as each box is dynamically generated using a loop 4) Work for any number of boxes (rules out editing of margins to hack it visually) You don't have to use DIVs - anything will do (tables, pure CSS). But I've not been able to find a way of doing it. Okay, i have a problem with divs on my site i have 4 divs, the first one is the holder, he's around the other 3. Then there are 3 divs that have to be placed next to each other, but that isn't working! When i use float left or right it tottaly screwes up my page, does anyone know what i do wrong?? my code is: HTML Code: /********** Lay-out **********/
body{
margin:0;
padding:0;
background-color:black;
font-family:Tahoma;
}
.houder{
background-color:white;
width:982px;
height:500px;
margin-left:auto;
margin-right:auto;
}
.header{
height:120px;
width:980px;
margin:0;
padding:0;
background-image:url(Afbeeldingen/header.jpg);
}
.headers{
background-image:url(Afbeeldingen/headr.jpg);
background-repeat:repeat-x;
height:21px;
width:270px;
margin-top:1px;
font-family: Tahoma;
font-size:11px;
color:white;
padding-left:10px;
padding-top:7px;
}
a{
color:black;
text-decoration:underline;
font-size:11px;
font-family:Tahoma;
}
.Contenthouder{
height:340px;
width:980px;
}
.scheiding{
background-image:url(Afbeeldingen/scheiding.jpg);
background-repeat:repeat-y;
width:5px;
height:340px;
margin-left:280px;
}
/********** Menu **********/
.menu{
background-image:url(Afbeeldingen/menu.jpg);
background-repeat:repeat-x;
width:980px;
height:14px;
margin-top:1px;
font-family: Tahoma;
font-size:12px;
padding-top:9px;
padding-bottom:10px;
}
a.menu:link, a.menu:active, a.menu:visited{
color:white;
text-decoration:none;
padding-left:10px;
padding-right:10px;
}
a.menu:hover{
background-image:none;
color:red;
text-decoration:none;
background-color:white;
}
/********** inlog **********/
.inloghouder{
width:280px;
margin-right:700px;
font-size:12px;
float:left;
}
.inlogtxt{
padding-left:20px;
font-size:11px;
}
.inloginput{
border:0;
background-color:lightgrey;
font-size:12px;
width:250px;
height:18px;
padding-top:4px;
}
.inlogknop{
background-image:url(Afbeeldingen/knop.jpg);
font-size:11px;
font-family: Tahoma;
background-color:grey;
border:0;
color:white;
font-weight: bold;
height:20px;
}
/********** Text **********/
.texthouder{
width:500px;
background-color:yellow;
height:300px;
float:right;
}
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" xml:lang="ne" lang="en">
<head>
<title>Familie Voetbalspel</title>
<link rel="stylesheet" type="text/css" href="Style.css" />
</head>
<body>
<div class="houder" align="center">
<div class="header" /></div>
<div class="menu" align="left" valign="middle">
<a href="#" class="menu"><b>Home</b></a>
<a href="#" class="menu"><b>Uitleg</b></a>
<a href="#" class="menu"><b>Punten</b></a>
<a href="#" class="menu"><b>Ronde scores</b></a>
<a href="#" class="menu"><b>Klassement</b></a>
<a href="#" class="menu"><b>Spelers</b></a>
<span class="menurechts" style="margin-left:389px;"><a href="http://www.coachvanhetjaar.nl" class="menu"><b>Coach van het Jaar</b></a></span>
</div>
<div class="Contenthouder" align="left">
<div class="inloghouder">
<div class="headers">
<b>Inloggen bij het Familie Voetbalspel</b>
</div>
<div class="inlogtxt">
<br />
<b>Gebruikersnaam<br /><br />
<input type="text" name="gebruikersnaam" class="inloginput" /><br /><br />
Wachtwoord<br /><br />
<input type="password" name="wachtwoord" class="inloginput" /><br /><br />
<input type="submit" value="Inloggen" class="inlogknop"/><br /><br />
<a href="#">Wachtwoord vergeten?</a><br /><br />
<a href="#">Geen account?? Hier aanmaken!!</a>
</div>
</div>
<div class="texthouder">
</div>
<div class="scheiding">
</div>
</div>
</div>
</body>
</html>
contenthouder is the holder, inloghouder de div on the left, scheiding the div in the middle and texthouder the div on the right Ok, I'm completely self taught, so don't be surprise if my html is a mess. I was told recently that I'm out of date in using tables and should be using divs, so in updating my website that's what I'm trying to do. The first one is that it doesn't display properly in IE. Can anyone tell me why, and how to rectify it? http://www.ratscallions.co.uk/Test/index.html There are other problems (as you'll be able to see), but I'd like to work that one out first. Thank you, Nim Hello. I have problem with IE 6.0. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<!- Holly hack for 3 px -->
<!--[if IE]>
<style type="text/css">
#_left, #_right, #_center { zoom: 1;}
</style>
<![endif]-->
<style type="text/css">
<!--
#_left {
float: left;
width: 200px;
color: #900;
}
#_right {
float: right;
width: 200px;
color: #00F;
}
#_center {
float: left;
width: 200px;
color: #00F;
}
-->
</style>
</head>
<body>
<div id="_left">Polyvios left menu<br />
sdfdsfdsf<br />sdfdsfdsf<br />sdfdsfdsf<br />sdfdsfdsf</div>
<div id="_right">Polyvios right menu<br />sdfdsfdsf<br />sdfdsfdsf<br />sdfdsfdsf<br />sdfdsfdsf<br />sdfdsfdsf<br />sdfdsfdsf</div>
<div id="_center">ddd</div>
</body>
</html>
The result of this code must be three in line menu. (the code is an example). But IE 6.0 can't understand divs with float. Any one who knows how I can fix it? Sorry for my English. Thank you. Could anyone explain to me how to put rounded corners on divs? Ive researched it a bit, but i want to be able to change the colours so i dont want to use image based if possible. found a way to do it but want more than one curved div but cant seem to be able t use different colours. I want to have one large rounded div on the webpage then some smaller ones within this one for nav menus and content etc, Have found some ideas but they dont work with IE. Hello, I've been dealing with this problem and it seems fairly simple but has got me scratching my head. The page works fine in Firefox (of course) but internet explorer draws this problem. There are gaps between the DIVS and I have tried messing with the margins and padding a bit but have had no luck. here is the page in Firefox: Here is the code in page. HTML Code: <div id="container"> <div id="head"><a href=""><img src="hd_1.png" border="0" /></a></div> <div id="ev_top"><img src="ev_top.png" /> </div> <div class="float"><img src="ev_l1.png" /> </div> <div class="ev1"> <div class="ev2">Dallas</div> <div><a href=""><img src="ev_dallas_tba.png" border="0" /></a></div> <div class="ev3"><div class="float"><img src="/bullet_blue.png" /></div> <div class="ev4"><a href="">May - TBA</a></div> <div class="ev5">| <a href=""> More...</a></div> </div> </div><div class="float"><img src="ev_gap1.png" /></div> <div class="ev1"> <div class="ev2">New York</div> <div><a href=""><img src="ev_ny.png" border="0" /></a></div> <div class="ev3"><div class="float"><img src="/bullet_blue.png" /></div> <div class="ev4"><a href="">04.29 - 87 Lounge</a></div> <div class="ev5">| <a href=""> More...</a></div> </div> </div> <div class="float"><img src="ev_gap2.png" /></div> <div class="ev1"> <div class="ev2">Store</div> <div><img src="ev_str.png" /></div> <div class="ev3"> <div class="float"><img src="bullet_yellow.png" /></div> <div class="ev4">Coming Soon</div> <div class="ev5">| <a href="#"> Updates...</a></div> </div> </div> <div class="float"><img src="ev_right.png" /></div> </div> <div id="ev_bot"><img src="ev_bot.png" /></div> <div class="float"><img src="ev_botr.png" /> </div> </div> <div id="blog_right"><img src="blog_rt_gap.png" /></div> <div id="blog_contain"> Style sheet: Code: body{
font-family:Arial, Helvetica, sans-serif;
width:713px;
background:#cfeae7 url(bg.png);
margin:0 auto;
height:100%
}
#container{height:100%; width:750px;}
#head{text-align:center; padding-right:25px;}
.float{float:left;}
.ev1{float:left; width:211px; background:url(ev_box_bg.png); font-size:24px; text-align:center;}
.ev2{float:left;text-align:left; text-indent:6px;color:#9ce4e4;padding-top:5px;height:100%;}
.ev3{padding-left:5px;text-indent:3px; padding-top:10px; width:211px;}
.ev4{float:left; font-size:12px;color:#b1e7e7; height:100%;}
.ev5{text-align:right; font-size:12px; color:#a2e6e6; padding-right:15px;padding-bottom:9px;height:100%;}
#ev_top{padding-left:6px; margin:0px; padding-top:0px;padding-bottom:0px;}
#ev_bot{float:left; margin:0px; padding:0px;}
Any ideas? Help would be appreciated! Thanks. Can anyone help me with this code to make the page fluid in all three browsers without showing spaces in between the sections? http://www.cpe.rutgers.edu/wetlands/certificate05.html Thanks in advance Hello, I am using a div for my website. I would like all the content to load in the divs, I don't want to create a new page for each site.How can I do this? Also, for the portfolio,I would like the images to change when you click the arrow, but I don't want to use frames or have each image on a new page. Can I do this within the div? Thanks! http://heartless-ink.com/treegirl.html Hi again I decided to use divs instead of tables for the html layout, now i have some issues and would like to ask you guyz around here. this is the html : PHP Code: <body> <div id="wrapper"> <div id="top"> <div id="logo"></div> </div> <div id="menlog"> <img src="logo.png" width="231" height="54" /> <ul> <li><a href="#">Home</a></li> <li><a href="#">About us</a></li> <li><a href="#">Contact us</a></li> <li><a href="#">Search: </a></li> <li><div id="searchbx"><form class="search" action=""> <input type="text" class="text-field"/> <input type="submit" class="submit" value="submit" /></form> </div></li> </ul> </div> </div> </body> and this is the css: PHP Code: #wrapper { text-align: left; margin: 0px auto; padding: 0px; width: 100%; /* border: 1px solid black; */ } #top { width: 100%; /* border: 1px solid black; */ } #logo { background: url('bg-top.png') no-repeat; padding: 0px 0px; margin: 10px 0px 0px 0px; width: 100%; height: 90px; position: relative; } #menlog { /* width was 100% */ width: 100%; font-size:15px; } and this is what i get : now my problem is that my menu wont remain in the same line as the logo and it goes to the next line under the logo which i dont want! i tried also to put this line : PHP Code: <img src="logo.png" width="231" height="54" /> inside a div which i gave "display:inline" property but that failed too ! it would be nice if someone can advice me. I am trying to make a new layout for my site, http://www.jkrfan.com/index2.php , and I want it to be like this site: http://james-fan.org/ in the way that they have the two different background colors (the white one for the inside area and then the orangey one for the outside). I am also trying to figure out how they made the border on the right go all the way to the bottom. Help is very appreciated =] Thanks! My site is http://www.jkrfan.com/index2.php and my CSS is at http://www.jkrfan.com/styletest.css http://www.freewebs.com/stevenwang/ That is tables... Someone had mentioned I should create the website with divs. Any tips for doing this? Or is there a real simple way to do it real quick? And what are the added benefits to divs as opposed to tables? Or vise versa.. Any help, or info would be greatly appreciated. HTML Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<noframes></noframes><noscript></noscript><!-- --><script type="text/javascript" src="http://www.freewebs.com/p.js"></script><script type="text/javascript" src="floating-1.7.js"></script>
<title>WEB PAGE TITLE GOES HERE</title>
<style type="text/css">
#navcontainer ul
{
padding-left: 0;
margin-left: 0;
background-color: #e7e7e7;
color: #000000;
float: center;
width: 100%;
font-family: 'arial',verdana,sans-serif;
}
#navcontainer ul li { display: inline; }
#navcontainer ul li a
{
padding: 0.3em 3.3em;
background-color: #e7e7e7;
color: #000000;
text-decoration: none;
float: center;
border-top: 1px solid #323232;
border-bottom: 1px solid #323232;
}
#navcontainer ul li a:hover
{
background-color: #ffffff;
color: #000000;
}
td.padding
{
padding: 0px 0px 0px 30px;
}
</style>
</head>
<body style="margin: 0px; padding: 0px; font-family: 'arial',verdana,sans-serif;">
<div id="floatdiv" style="
position:absolute;
background:#323232;
border-top: solid 3px #ffffff;
border-left: solid 3px #ffffff;
border-bottom: solid 3px #ffffff;
border-right: solid 3px #ffffff;
height: 165px;
width: 32px;
top:35px;
right:30px;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
z-index:100">
<p align=center><img src="follow_right.png" alt="" border="0">
<a href="http://www.facebook.com/litofficial" target="_blank"><img src="facebook.png" alt="" title="We're on Facebook!" border="0"></a><br>
<a href="http://www.twitter.com/#!/litofficial2" target="_blank"><img src="twitter.png" alt="" title="Follow us on Twitter!" border="0"></a>
</p></div>
<script type="text/javascript">
floatingMenu.add('floatdiv',
{
// Represents distance from left or right browser window
// border depending upon property used. Only one should be
// specified.
// targetLeft: 0,
targetRight: 30,
// Represents distance from top or bottom browser window
// border depending upon property used. Only one should be
// specified.
targetTop: 35,
// targetBottom: 0,
// Uncomment one of those if you need centering on
// X- or Y- axis.
// centerX: true,
// centerY: true,
});
</script>
<table width="100%" style="height: 100%;" border="0">
<!-- ============ HEADER SECTION ============== -->
<tr>
<td colspan="3" style="height: 10px;" bgcolor="#323232">
</td></tr>
<tr>
<td class="padding" colspan="3" style="height: 225px;" bgcolor="#e7e7e7"><a href="http://www.litofficial.com" target="_blank"><img src="lit_logo_001.gif" alt="" title="" border="0"></a>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">home</a></li><li><a href="#">about</a></li><li><a href="#">blog</a></li><li><a href="#">collection</a></li><li><a href="#">contact</a></li><li><a href="#">order</a></li></ul>
</div>
</td></tr>
<!-- ============ NAVIGATION BAR ============== -->
<tr>
<td colspan="3" valign="middle" height="0" bgcolor="#ffffff">
</td></tr>
<!-- ============ MIDDLE COLUMN ============== -->
<tr>
<td class="padding" width="38%" valign="top" bgcolor="#ffffff">
<h2>recent posts</h2>
The third table row contains three table cells which create the menu column (left), the content column (middle) and the extra column (right).
</td>
<td class="padding" width="36%" valign="top" bgcolor="#ffffff">
<h2>about</h2>
The third table row contains three table cells which create the menu column (left), the content column (middle) and the extra column (right).
<td class="padding" width="26%" valign="top" bgcolor="#ffffff">
<h2></h2>
</td>
</td></tr>
<!-- ============ FOOTER SECTION ============== -->
<tr>
<td class="padding" colspan="3" align="left" height="120" bgcolor="#323232">
<a href="http://www.facebook.com/litofficial" target="_blank"><img src="facebook.png" alt="" title="We're on Facebook!" border="0"></a>
<a href="http://www.twitter.com/#!/litofficial2" target="_blank"><img src="twitter.png" alt="" title="Follow us on Twitter!" border="0"></a>
</td></tr>
</table>
Hello, Please have a look at this site: http://www.shahspace.com/bow/home.html As you can see, I have two div colored pink and some space between them and around them. I'd like to get rid of all spacing but I can't. Here's the code: Code: <html>
<head>
<title>The Bow Tower</title>
<style>
body
{
background: url('content_bg.jpg');
background-repeat: repeat-x;
}
#textdiv
{
width: 230px;
height: 100%;
background-color: #ffaaaa;
float: left;
padding: 0;
margin: 0;
}
#imgdiv
{
width: 250px;
height: 100%;
background-color: #ffaaaa;
padding: 0;
margin: 0;
}
span
{
font-size: 18pt;
font-family: verdana;
font-weight: bold;
}
</style>
</head>
<body>
<div id="textdiv">
<br>
<br>
<span>
The Bow Tower<br>
</span>
<br>
<br>
<ul>
<li><a href="services.html">Services</a></li>
<li><a href="information.html">Information</a></li>
<li><a href="health_safety.html">Health and Safety</a>
<li><a href="index.html">Index</a>
</ul>
</div>
<div id="imgdiv"><img align=right src="bow tower.jpg" border=0></div>
</tr>
</table>
</body>
</html>
What can I do to get rid of the spacing (I'm working in IE9). Hello, I have a div tag that is scrolled vertically. I found some java code he https://developer.mozilla.org/en/DOM...scrollIntoView that allows me to use a "Scroll to Top" button at the bottom of the DIV to help navigate it back to the top. Problem is, that I want the page to remain in the same position, whereas this seems to be making my page scroll to the bottom at the same time as scrolling the div to the top. Has anyone got any ideas on howto scroll a div to the top, without the page reloading, or scrolling? Thanks Jay I have two divs next to eachother. The first DIV has a float:left with width:100%; The second DIV has float:right with width:200px; But for some reason when the left div gets to width it pushes the right div down. http://i43.tinypic.com/2u5q6ol.jpg What i really want is that the left DIV jumps to a newline when it reaches the right DIV instead of the right edge of my screen. Anyone any idea how to do this?? HTML Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Blaat</title>
</head>
<body>
<div style="float:left; width:100%; margin-right:-220px; border:#000 1px
solid;">
jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj ffffffffff fffffffffff fffffff
fffffffff ffffffffff fffffffffff ffffffffff fffffffffff fffffffffffff
ffffffffff
<div style="float:right; width:200px; border:#000 1px solid;">
hhhhhhhhhhhhhhhh
</div>
</div>
</body>
</html>
So just draw on AP divs and maybe also a bit of tweaking, can you "get away" with this? Biggest problem i see is that IE and FF tend not to always format things exactly the same .... ALSO, if i want to line up say an input text box with a search button gif(25px x 24px) at the side of the input then this works in firefox, Note that this is an AP div. <div id="apDiv3"> <input type = "text" size = "26"/><img src = "images/search.gif" /> </div> #apDiv3 input{float:left;height:16px;padding:2px;} Gives this is FF, Whereas in IE there is a small gap between the right end of the input and the gif, and also the input field is smaller I have to say i don't really undertsand the css there, i got it form the web. Why is there a gap and why is it smaller? Hello! The divs work fine in Firefox, but adjust to the text in IE. How can I stop them adjusting? http://rkgrant.110mb.com/rkghome2.html Thank you for your help! Hello 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 |
|||||||