|
CSS - Expanding Div's Vertically With Layers
Ok, Im somewhat of a newb when it comes to CSS so forgive me if any of thise doesnt make sense.
Im writing a page that has 3 sections, a top-menu section, a middle dynamic section and a bottom static section. Ive elected to use layers to display content in the middle section based on a mouseclick in the top section. To do this Ive made used of a script that encloses the dynamic section in a div, with subsequent nested divs set to visibility: none until they are called to be displayed. The issue that I am having is I am trying to position the bottom static section, that should always remain visible, below the middle section depending on the height of the midle section. Essentially the bottom section should move vertically as the size of the midle section changes sizes. The style that Im using is: Code: <style type="text/css">
#container { position:relative; width:495; height: 400px; z-index:100 }
.lyr { position:absolute; visibility:hidden; left:0; top:0; z-index:1 }
.layer { }
</style>
This is an example of the code in the body: Code: <a href="#" onClick="swapLayers('lyr0'); return false"><font>Click to return to the Welcome Text</font></a><br />
<a href="#" onClick="swapLayers('lyr1'); return false"><font>Click to return to the Welcome Text</font></a><br />
<a href="#" onClick="swapLayers('lyr2'); return false"><font>Click to return to the Welcome Text</font></a><br />
<div id="container">
<div id="lyr0" class="lyr">Layer 1</div>
<div id="lyr1" class="lyr">Layer 2</div>
<div id="lyr2" class="lyr">Layer 3<p> Continuing layer 3</p><p> Continuing layer 3</p></div>
<div class="layer">Layer 4</div>
</div>
With the above example Layer 1-3 will display based on mouseclicks. Layer 4 should appear beneath the currently displayed layer, and re-position accordingly based on the size of the preceding DIV. Does this make sense? Im not sure if Layer 4 should be nested inside the container div or below it. Thnx in advance for any help. Similar TutorialsI want to have a CSS layer that is a certain height, unless the content exceeds this height, in which case the layer will automatically expand. I have already done this before so that part is not the problem. The problem is I want to have another layer under this one. You will not be able to see this second layer if the content on the first layer does not exceed the pre-determined height of the first layer (it will have a different z-index). But I will have the background on the first layer set to no-repeat so that when the first layer is automatically expanded, you will see the second layer, which has a different background (that is its only purpose). However, I'm not sure how to make it so the second layer also expands automatically along with the first layer. Can someone help me? I hope this made sense. Is it somehow possible to stretch a containing (relatively positioned) div vertically around its child p's, which are absolutely positioned, without setting the height of the parent? I have tried the following code, which - obviously - does not work: 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="en" lang="en"> <head> <title></title> </head> <body> <div style="position: relative; width: 764px; border: solid 1px #C63949; background-color: grey;"> <p style="position: absolute; left: 255px; top: 29px; width: 164px; height: 113px; background-color: orange;"> </p> <p style="position: absolute; left: 25px; top: 27px; width: 198px; height: 175px; background-color: blue;"> <a title="x.jpg" href="x.jpg"> <img alt="x.jpg" src="x.jpg"/> </a> <br/> <strong>description</strong> </p> <p style="position: absolute; left: 255px; top: 151px; width: 168px; height: 164px; background-color: red;"> another div </p> <p style="position: absolute; left: 436px; top: 34px; width: 238px; height: 138px; background-color: green;"> <a title="y.jpg" href="y.jpg"><img alt="y.jpg" src="y.jpg"/> </a> </p> <p style="position: absolute; left: 29px; top: 220px; width: 182px; height: 153px; background-color: yellow;"> <a title="z.jpg" href="z.jpg"> <img alt="z.jpg" src="z.jpg"/> </a> <br/> <strong>description</strong> </p> testing testing testing </div> </body> </html> The problem is, I am using a online editor which creates the code for the child. I cannot change that css code. I am able to add to it, or change the css for the parent. If you have a suggestion how I can stretch the containing div, so it goes just below the lowest p, I would be very happy! EDIT: I just read on http://css-discuss.incutio.com/?page=AbsoluteOrFloatLayout "There is no way to instruct other parts of the page to start or end with respect to the absolutely positioned element" If this is true, than is there another way I can solve this problem? I'm working on this vanity site for myself, and don't have a lot of experience doing table-free layouts. But I've seen the benefits of it firsthand and want to start doing it for everything. An image of the layout I'm aiming for can be found here. The main problem I'm having right now is that when I put child <div>s into a parent <div>, the parent doesn't expand vertically. My main div that contains everything is "frame". Within "frame", there's "content_bg", and within "content_bg" there's "side", "blog" and "footer". I'm wanting all this to be centered and scaled 100% vertically, but I know that's a pain so I'm setting everything up first. - If I don't have the position property set to "fixed" or "absolute" in frame, it won't expand to contain the children. It will be 0px high. - If I don't have the position property set to "fixed" or "absolute" in content_bg, it has the same problem. - I can only set one or the other. Setting both expands content_bg, but not frame. - Sidepanel seems to have this problem too, but I haven't even started to try and fix it. Page CSS css Code: Original - css Code body { font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; color: #000000; background-image: url(assets/img/bg_stripes.gif); background-color: #2F2920; margin: 0px; } a { color: #544545; text-decoration: underline; } a:hover { color: #000000; text-decoration: none; } p { text-align: justify; } h1 { color: #2d5659; text-decoration: none; } #frame { background-image: url(assets/img/bg_frame.jpg); width: 996px; padding-right: 66px; padding-left: 66px; background-repeat: repeat-y; position: fixed; /* Without this, the background won't show for some reason */ } #frame #content_bg { background-image: url(assets/img/bg_main.jpg); background-repeat: repeat-y; } #frame #content_bg #blog { float: left; width: 540px; top: -30px; left: 20px; position:relative; } #frame #content_bg #side { background-image: url(assets/img/bg_sidepanel.jpg); position: relative; top: -66px; float: left; width: 275px; } #frame #content_bg #me { background-image: url(assets/img/me.jpg); background-repeat: no-repeat; float: left; width: 275px; height: 228px; } #frame #content_bg #header { background-image:url(assets/img/What-Happened-Final_06.jpg); background-repeat: no-repeat; float: left; width: 589px; height: 294px; } #frame #content_bg #side #linklog { position: relative; left: 29px; top: 2px; width: 208px; height: 248px; overflow: auto; } #frame #content_bg #side #linklog ul { margin-left: -35px; list-style-type: none; font-size: 12px; padding-bottom: 10px; } #frame #content_bg #side #linklog a { display: block; margin: 2px; padding: 3px; width: 176px; background-color: #E0C187; border-bottom: #CEB07A 3px solid; } #frame #content_bg #side #linklog a:hover, #frame #content_bg #side #linklog a:active { display: block; padding: 3px; margin: 2px; width: 176px; background-color:#F3D193; border-bottom: #CEB07A 3px solid; } #frame #content_bg #side #photolog { position: relative; left: 8px; top: 42px; width: 210px; height: 248px; } #frame #content_bg #side #photolog img { width: 58px; height: 58px; float: left; margin-top: 10px; margin-left: 10px; } #frame #content_bg #footer { background-image: url(assets/img/bg_footer.jpg); width:565px; height:218px; position: absolute; bottom: 0px; left: 366px; }
body {
Any help and/or constructive criticism would be very greatly appreciated. Ive seen a few topics about centering layers in browsers and it seems really complicated and often to specific to relate to my site. I used to use tables which were of course easy to center, but now at college we have to use layers (im working in design view im not a coder) and the teacher said try putting a layer in a layer and centering that but ive tried this and it doesnt work, i can get a layer in another layer, but not center it within it. This is the site im trying to do, i notice on cssvault.com cssbeauty.com most of the css sites (i know mines not really in css as such) are all centered and I was wondering how everyone does it? I went to the macromedia website and it said you can use an extension which works but for some reason it doesnt let you edit the site once you have centered it. Basically is there a simple way for me to center my site or is it really complicated? I wonder why we are learning in layers when tables center easily and move relative to each other Hello, I started off trying to find a content box that expands depending on screen res because the last one I made would break in the middle if the users screen res was over 1600px wide. This box worked great with the screen res but now I'm trying to put content in it and my content is not expanding the box down. Instead of pushing the box lower and forcing a scroll bar. The content keeps going down past the bottom of the box and makes a scroll bar. Any idea how I can make the box expand with my content? here is a link to my test page. http://www.gamerunion.com/test.html My css code. Code:
div#case {
position:absolute;
z-index:1;
top:200px;
left:50px;
bottom:50px;
right:50px;
background:url(/assets/images/tile.png) repeat;
}
div#tlcorner span, div#trcorner span, div#blcorner span, div#brcorner span, div#lftile span, div#rttile span, div#tptile span, div#btmtile span {
width:0;
height:0;
overflow:hidden;
display:block;
}
div#tlcorner {
position:absolute;
z-index:10;
top:0;
left:0;
background:url(/assets/images/corners.png) -369px 0 no-repeat;
width:123px;
height:123px;
}
div#trcorner {
position:absolute;
z-index:10;
top:0;
right:0;
background:url(/assets/images/corners.png) -246px 0 no-repeat;
width:123px;
height:123px;
}
div#blcorner {
position:absolute;
z-index:10;
bottom:0;
left:0;
background:url(/assets/images/corners.png) 0 0 no-repeat;
width:123px;
height:123px;
}
div#brcorner {
position:absolute;
z-index:10;
bottom:0;
right:0;
background:url(/assets/images/corners.png) -123px 0 no-repeat;
width:123px;
height:123px;
}
div#lftile {
position:absolute;
z-index:5;
top:0;
left:0;
bottom:0;
background:url(/assets/images/lr.png) -20px 0 repeat-y;
width:20px;
}
div#rttile {
position:absolute;
z-index:5;
top:0;
right:0;
bottom:0;
background:url(/assets/images/lr.png) 0 0 repeat-y;
width:20px;
}
div#tptile {
position:absolute;
z-index:5;
top:0;
right:0;
left:0;
background:url(/assets/images/tb.png) 0 0 repeat-x;
height:123px;
}
div#btmtile {
position:absolute;
z-index:5;
bottom:0;
right:0;
left:0;
background:url(/assets/images/tb.png) 0 -123px repeat-x;
height:123px;
}
div#case div.content {
position:absolute;
z-index:10;
width:100%;
min-height:400px;
overflow:hidden;
}
div#case div.content h1 {
font-family: "Times New Roman", serif, sans-serif, Arial;
font-size:16px;
color:#000000;
margin:5px 0;
padding:100px 0 0 100px;
text-align:left;
text-transform:capitalize;
}
div#case div.content p {
font-family: "Times New Roman", serif, sans-serif, Arial;
font-size:14px;
color:#000000;
text-align:justify;
padding:0 100px;
}
HTML Code:
<body>
<div id="header">
<h1 class="small">GamerUnion</h1>
<h2 class="small">For Gaming Addicts by Gaming Addicts.</h2>
</div>
<div id="case">
<div id="tlcorner"><span>top left corner</span></div>
<div id="trcorner"><span>top right corner</span></div>
<div id="blcorner"><span>bottom left corner</span></div>
<div id="brcorner"><span>bottom right corner</span></div>
<div id="tptile"><span>top side tile</span></div>
<div id="lftile"><span>left side tile</span></div>
<div id="rttile"><span>right side tile</span></div>
<div id="btmtile"><span>bottom side tile</span></div>
<div class="content">
<div id="nav">
<ul>
<li><a href="/" class="current">Home</a></li>
<li><a href="/about.html">About</a></li>
<li><a href="/forum/">Forum</a></li>
<li><a href="/resources.html">Resources</a></li>
<li><a href="/contact.html">Contact</a></li>
</ul>
</div>
<h1>Gamerunion</h1>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
</div>
</div>
</body>
have I got this right....any selector effectively becomes a layer once I add a 'position' and a 'z-index'? Thanks Chris I've tried different implementations, but none seem to be working. I have two images crossing over each other using two position: absolute divs. When I click on the one behind using an onClick javascript function, I want that div's z-layer value to change, but none of the sites are helping me. How do I do this? I hope someone can help me with this, please have a look at a page I have created: http://www.funnestgames.com/header_1.php Now before rolling over any of the links on the left side, notice the text "Rollover game for preview". I have been trying to get that inside the white rectangular outlined box, but the only way I know is if i use css and specify a certain number of pixels from the left side. I can't do this because the website is centered, and resizing the page would change the widths and it all gets messy, i hope you have the idea. I have the same problem if you rollover a link, you can barely read it but it says loading below the text "rollover game for preview" does anyone know a way to solve my problem? please view source on page if you can help me out and see what i did wrong. the divs start at approx line 135 thanks Code: <center> <div style="width:100px; height:100px;background-color:#E0E1E2; border: 1px double #ffffff; font-size:11px; font-weight:700; color:#333333; text-align:center;">Game Preview <div style="position: absolute; top: 300px;">Rollover game for preview</div> <div id="preview" style="width:100px; height:100px;background-color:#E0E1E2; visibility:hidden; z-index:99;"> <img name="preview_img" src="spacer.gif" style="height:100px; width: 100px; visiblility:hidden; " onload="showmehideme()"> <div id="loading" style="font-size:11px; font-weight:700; color:#333333; text-align:center; position: absolute; top: 300px;">Loading...</div> </div> </div> </center> Hi guys, I am using the following code on my page but the 'profile-description' div layer is not displaying correctly Some of the text shown as a result of this <? echo nl2br($row['description']); ?> is being shown outside the blue border created by this code : <div style="text-align:center;border:#a9c5df 1px solid;width:90%;padding:20px; background:url(images/bg-image.jpg) no-repeat 0 4px #ffffff;background-position:top right;"> PHP Code: #div-profile { position:relative; } #profile-data { position:absolute; top:-15px; right:230px; width:250px; font: 12px/17px verdana,arial,sans-serif; line-height:18px; text-align:left; } #profile-pic { position:absolute; top:0; left:-10px; width:170px; } #profile-description { position:relative; top:150px; left:60px; width:450px; font: 12px/17px verdana,arial,sans-serif; line-height:18px; text-align:left; } <div style="text-align:center;border:#a9c5df 1px solid;width:90%;padding:20px; background:url(images/bg-image.jpg) no-repeat 0 4px #ffffff;background-position:top right;"> <div id="div-profile"> <div id="profile-pic"> <img src="profile-pics/<? echo $pic ;?>" alt="" width="120" height="140" align="left"> </div> <div id="profile-data"> <br /> <strong>Name:</strong> <? echo("$row2[first_name]"); ?> <? echo("$row2[last_name]"); ?><br /> <strong>Specialist Area:</strong> <? echo("$row2[specialist_area]"); ?><br /> <strong>Phone:</strong> <? echo("$row2[phone]"); ?><br /> <strong>Mobile:</strong> <? echo("$row2[mobile]"); ?><br /> <strong>Company:</strong> <? echo("$row2[company]"); ?><br /> <strong>Address:</strong> <? echo("$row2[city]"); ?>, <? echo("$row2[state]"); ?><br /> <strong>Email:</strong> <a href="contact-agent.php?id=<? echo $_SESSION['member_id'];?>" title="Contact This Agent" onclick="NewWindow(this.href,'name','450','350','yes');return false">contact us here</a><br /> <? } ?> </div> <br /><br /> <div id="profile-description"> <? echo nl2br($row['description']); ?> <br /><br /><br /><br /> <div align="right"> <a href="contact-agent.php?id=<? echo $member_id ;?>" title="Contact This Agent" onclick="NewWindow(this.href,'name','450','350','yes');return false"> <img src="icon-email.gif" alt="Contact This Agent" width="60" height="60" hspace="10" border="0"></a> <a href="javascript:window.print()" title="Print This Page"> <img src="icon-print.gif" alt="Print This Page" width="60" height="60" border="0"></a> </div> </div> </div> Can anyone possibly help? How many layers or z-indexes can you reasonably use on one page? I'm thinking mostly IE here, since that is the browser I will be working with. For instance, you design a bunch of tabs - at least 24, and have a a span or div below those tabs that contain checkboxes and text preceeding each check box, for each tab on its own layer. Maybe a maximum of 40 checkboxes/text per layer. Clicking each tab will hide/unhide the appropriate layer of checkboxes/text in the div area. I know this may be better done axaj style, but for the sake of argument, what would you think is a maximum load for this scenario for a browser (latest IE) on a standard pc that may be up to 3 years old? Ok, I have this: Code: #background {
position:relative;
width:600px;
height:480px;
z-index:1;
background-image:"/background.jpg";
border-style:none;
color:#000000;
} <div ID="background">Whatever</div>
But it doesn't work.. why? i seem to be having trouble aligning two css layers i have a border and then content within in (content is images) i would like to align another layer in here to the middle left. can this be done? also the HTML is wrapping around the image, any way i can stop this? as the images should be along the bottom below the image. the link and data are as follows: http://wakefieldfhs.co.uk/stu/users/njacques/9 and one last thing i just noticed while testing all this, its not displaying the footer and ending data (this only occurs on my server, not on my test server. :S Code: (
layout->doExifBorder();
echo("EXIF INO HERE");
$layout->endBorder();
$layout->endBorder();
footer(); // for future refernce footer.inc include the end div's!!
?>)
(this would equate to: ) Code: <div class='t-exif'><div class='b-exif'><div class='l-exif'><div class='r-exif'><div class='bl-exif'><div class='br-exif'><div class='tl-exif'><div class='tr-exif'>EXIF INO HERE</div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div> </div> <div class="footer" align="center"> <a href='about.php'>about</a> | disclaimer | privacy | terms of use<br></div> </div> </body> </body> </html> Hi, I've been using nested layers in Dreamweaver and wanted to know if it's possible to hide all nested layers of a given layer (say A) by applying a behavior to hide just the layer A to an object? Or is it that in order to hide the nested layers also, I'll need to apply behaviors for each nested layer separately? Also, is there a way to load the content of a layer (such as swf movies, images and other stuff) only when its property is changed to visible (by default the layer is hidden). Thanks, Jayant Hello All, Im currently stuck trying to get a layer on top of a layer. The image below shows the problem. img68.imageshack.us/img68/5579/picture3cl2.png And here is a link to a code version: thenpcs.com/beta/ Any help greatfully appreciated! I'm attempting to create three layers, each containing a selection list form item, only one of which will be visible at any one time, based on the selection of another selection list (not shown in the code below). The layers must be centered within a Table cell: Code:
<table style="width:90%">
<tr>
<td style="text-align:center;">
<div id="layer1" style="width:100%;">
<select id="select1">
<option selected>Option 1</option>
<option>Option 2</option>
</select>
</div>
<div id="layer2" style="width:100%;">
<select id="select2">
<option selected>Option A</option>
<option>Option B</option>
</select>
</div>
<div id="layer3" style="width:100%;">
<select id="select3">
<option selected>Option 1A</option>
<option>Option 2B</option>
</select>
</div>
</td>
</tr>
</table>
.
.
This alone renders each layer sequentially, one on top of the other, vertically on the page, which is not what I want. I have tried using z-index values, but I think the problem stems more from the position value. I have tried using: Code: position:relative; left:0px; top:0px; on each layer, but nothing changes. I then tried using: Code: position:absolute; left:0px; top:0px; on each layer, and the layers *did* overlap each other, but were placed at the top of the page. So before I tear out all of my hair, does anyone have a suggestion for how to place these layers within a table cell so that they are a) centered horizontally within the cell, and b) overlap each other? Any help would be greatly appreciated. Thanks! - coredumped. Hi, http://sinistersuicide.net/lolastour12.html is the page I'm working on. Problems: - I tried using absolute positioning on my div layers but if the page was viewed on a lower resolution than what I'm using 1440x900 the div layers would move from where they were positioned. - So I transfered over to relative positioning and all was fine till I noticed a huge gap at the bottom of the page. The code for the page is: 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">
<html>
<head>
<title>lolastour1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.centre {
width: 406px;
height: 260px;
overflow:auto;
margin-right: auto;
margin-left: auto;
position: relative;
top: -480px;
left: 15px;
z-index: 50;
}
/*hack for IE5*/
body {
text-align: center;
}
.samplemovie {
width: 500px;
height: 340px;
overflow:auto;
margin-right: auto;
margin-left: auto;
position: relative;
top: -1105px;
left: 20px;
z-index: 50;
}
/*hack for IE5*/
body {
text-align: center;
}
</style>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
google.load("jquery", "1.3");
</script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet" charset="utf-8" />
<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script></stylesheet>
<script type="text/javascript" src="swfobject.js"></script>
</head>
<body bgcolor="#faabcb" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
});
</script>
<!-- Save for Web Slices (lolastour1.psd) -->
<table width="921" height="1301" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
<tr>
<td colspan="17">
<img src="images/lolastour1_01.jpg" width="920" height="209" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="209" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="5">
<img src="images/lolastour1_02.jpg" width="60" height="910" alt=""></td>
<td rowspan="2">
<a href="http://">
<img src="images/Join.jpg" width="102" height="47" border="0" alt="Join"></a></td>
<td colspan="2" rowspan="3">
<img src="images/lolastour1_04.jpg" width="93" height="553" alt=""></td>
<td colspan="2">
<a href="http://">
<img src="images/Members.jpg" width="172" height="41" border="0" alt="Members Log In Here"></a></td>
<td rowspan="3">
<img src="images/lolastour1_06.jpg" width="66" height="553" alt=""></td>
<td colspan="2">
<a href="http://">
<img src="images/Gallery.jpg" width="138" height="41" border="0" alt="Gallery"></a></td>
<td colspan="2" rowspan="3">
<img src="images/lolastour1_08.jpg" width="89" height="553" alt=""></td>
<td colspan="2">
<a href="http://">
<img src="images/Videos.jpg" width="144" height="41" border="0" alt="Videos"></a></td>
<td colspan="3" rowspan="5">
<img src="images/lolastour1_10.jpg" width="56" height="910" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="41" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="2">
<img src="images/lolastour1_11.jpg" width="172" height="512" alt=""></td>
<td colspan="2" rowspan="2">
<img src="images/lolastour1_12.jpg" width="138" height="512" alt=""></td>
<td colspan="2" rowspan="4">
<img src="images/lolastour1_13.jpg" width="144" height="869" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="6" alt=""></td>
</tr>
<tr>
<td rowspan="3">
<img src="images/lolastour1_14.jpg" width="102" height="863" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="506" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/lolastour1_15.jpg" width="24" height="357" alt=""></td>
<td colspan="7">
<a href="http://">
<img src="images/Join-17.jpg" width="521" height="40" border="0" alt="Join"></a></td>
<td rowspan="2">
<img src="images/lolastour1_17.jpg" width="13" height="357" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="40" alt=""></td>
</tr>
<tr>
<td colspan="7">
<img src="images/lolastour1_18.jpg" width="521" height="317" alt="">
</td>
<td>
<img src="images/spacer.gif" width="1" height="317" alt=""></td>
</tr>
<tr>
<td rowspan="4">
<img src="images/lolastour1_19.jpg" width="34" height="181" alt=""></td>
<td colspan="14">
<a href="http://">
<img src="images/Join-21.jpg" width="863" height="68" border="0" alt="Join"></a></td>
<td colspan="2" rowspan="2">
<img src="images/lolastour1_21.jpg" width="23" height="123" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="68" alt=""></td>
</tr>
<tr>
<td colspan="14">
<img src="images/lolastour1_22.jpg" width="863" height="55" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="55" alt=""></td>
</tr>
<tr>
<td colspan="12">
<img src="images/lolastour1_23.jpg" width="703" height="26" alt=""></td>
<td colspan="3" rowspan="2">
<a href="http://www.sinistersuicide.net/lolastour2.html">
<img src="images/Page-2-Tour.jpg" width="172" height="58" border="0" alt="Page 2 Of Tour"></a></td>
<td rowspan="2">
<img src="images/lolastour1_25.jpg" width="11" height="58" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="26" alt=""></td>
</tr>
<tr>
<td colspan="5">
<img src="images/lolastour1_26.jpg" width="310" height="32" alt=""></td>
<td colspan="3">
<a href="http://">
<img src="images/Webmasters.jpg" width="259" height="32" border="0" alt="Webmasters"></a></td>
<td colspan="4">
<img src="images/lolastour1_28.jpg" width="134" height="32" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="32" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="34" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="26" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="102" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="24" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="69" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="89" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="83" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="66" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="110" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="28" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="76" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="13" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="17" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="127" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="33" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="12" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="11" height="1" alt=""></td>
<td></td>
</tr>
</table>
<div class="centre">
<a href="images/freeimage1.jpg" rel="prettyPhoto" title=""><img src="images/freeimage1thumb.jpg" width="90" height="120" alt="" /></a>
<a href="images/freeimage2.jpg" rel="prettyPhoto" title=""><img src="images/freeimage2thumb.jpg" width="90" height="120" alt="" /></a>
<a href="images/freeimage3.jpg" rel="prettyPhoto" title=""><img src="images/freeimage3thumb.jpg" width="90" height="120" alt="" /></a>
<a href="images/freeimage4.jpg" rel="prettyPhoto" title=""><img src="images/freeimage4thumb.jpg" width="90" height="120" alt="" /></a>
<a href="images/freeimage5.jpg" rel="prettyPhoto" title=""><img src="images/freeimage5thumb.jpg" width="90" height="120" alt="" /></a>
<a href="images/freeimage6.jpg" rel="prettyPhoto" title=""><img src="images/freeimage6thumb.jpg" width="90" height="120" alt="" /></a>
<a href="images/freeimage7.jpg" rel="prettyPhoto" title=""><img src="images/freeimage7thumb.jpg" width="90" height="120" alt="" /></a>
<a href="images/freeimage8.jpg" rel="prettyPhoto" title=""><img src="images/freeimage8thumb.jpg" width="90" height="120" alt="" /></a>
<a href="images/freeimage9.jpg" rel="prettyPhoto" title=""><img src="images/freeimage9thumb.jpg" width="90" height="120" alt="" /></a>
<a href="images/freeimage10.jpg" rel="prettyPhoto" title=""><img src="images/freeimage10thumb.jpg" width="90" height="120" alt="" /></a>
</div>
<div class="samplemovie">
<script type='text/javascript' src='swfobject.js'></script>
<div id='mediaspace'>This text will be replaced</div>
<script type='text/javascript'>
var so = new SWFObject('player.swf','mpl','450','300','9');
so.addParam('allowfullscreen','true');
so.addParam('allowscriptaccess','always');
so.addParam('wmode','opaque');
so.addVariable('file','http://sinistersuicide.net/lolacasting.flv');
so.addVariable('controlbar','none');
so.addVariable('autostart','true');
so.addVariable('icons','false');
so.addVariable('stretching','fill');
so.write('mediaspace');
</script>
</div>
<!-- End Save for Web Slices -->
</body>
</html>
Is it possible to make a layer relative to the 'body' or some other container in my web page? The position of my layer changes with each screen, browser or setting but I would like to be able to keep it, say, 150px in from the left edge of the 800px wide 'container' I've made. In other words, I want a layer to act like any other selection. Thanks Chris Hi I have a div (#adcontainer), in that there are some boxes (#adcontainer .ad). Inside every box there should be a small image at top 5, left 5. At top 5, right 5 there should be a price-flash-image. Everything works perfect besides the price-flash.. I can't manage to position correctly. The css I'm using is: Code:
#adContainer { position: relative; width: 155px; float: left; margin: 0; margin-left: 5px; padding: 0;}
#adContainer .ad { width: 100%; margin: 0; padding: 0px; border: 1px solid black; background-color: white; }
#adContainer img { position: relative; display: block; top: 0px; left: 0px; padding: 3px; z-index: 1; }
.price { position: absolute; width: 68px; height: 40px; top: 5px; right: 5px; background-image: url('../images/price_flash_small.png'); font-size: 13pt; font-weight: bold; text-align: center; line-height: 40px; display: block; z-index: 99; }
HTML: Code: <div id="adContainer"> <div class="ad"><img src="shop/images/products/48602_small.jpg" width="94" height="100"><div class="price">24,90</div></div> <div class="ad"><img src="shop/images/products/4258_small.jpg" width="100" height="57" alt="Flow"><div class="price">78,00</div></div> <div class="ad">ad 3</div> </div> Please help! Hi; I am trying to make couple of layers, 9 to be exact in a page, all boxes are same size, but of course in different location, I have them like this: Quote: .box-1 { width: 200px; height: 155px; border: 1px; border-color: #339900; border-style: groove; position: absolute; top: 10px; left: 10px;} .box-2 { width: 200px; height: 155px; border: 1px; border-color: #339900; border-style: groove; position: absolute; top: 10px; left: 210px;} and so on for the rest of layers. as you notice all layers have some values, and just the positioning are not same, can I have all those unchanged value as a class somehow and have other values in as child or something? I could not find a way around it, to not repeat those values for 9 times when not necessary. thanks for help Hi All, I am looking for some advice really regarding a menu i am trying to incorporate on my site. The menu is set up to be displayed in the left hand column in a website as below: What i want to do is have the menu on the right hand side, and hence the direction of the flyout etc needs to be changed. The CSS used for the menu is: Code: /*---------------------------------*/
/* Vertical Fly-Out Menu Style */
/*---------------------------------*/
.verbar { /* Color of main vertical menubar and border */
color: black;
background-color: #e6e7e6;
border: 1px outset #fdfefd;
}
.vertitem { /* Behaviour of main vertical menu items, leave as is for proper operation */
text-align: left;
white-space: nowrap;
}
.vertitem a { /* Font style, size of main menu items */
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
text-decoration: none;
position: relative;
display: block;
}
.vertitem a:link, .vertitem a:visited { /* Default font style & color of main menu items */
color: #000000;
text-decoration: none;
}
.vertitem a:hover { /* Font style & color, background menu color of main menu item when hovered over */
color: #ffffff;
background-color: #21449c;
text-decoration: none;
}
.vertitem a:active { /* Font style & color, background menu color of main menu item when clicked */
color: #ffff00;
background-color: #666666;
text-decoration: none;
}
.vertsubmenu { /* Behaviour of sub-menu - leave as is for proper operation of submenus */
position: absolute;
left: 0;
top: 0;
visibility: hidden;
}
.vertsubframe { /* Color of submenu item and border */
background-color: #e6e7e6;
border: 2px outset #fdfefd;
position: relative;
display: block;
}
.vertsubitem { /* Behaviour of sub-menu - leave as is for proper operation of submenus */
text-align: left;
white-space: nowrap;
}
.vertsubitem a { /* Font style, size of submenu items */
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
text-decoration: none;
position: relative;
display: block;
}
.vertsubitem a:link, .vertsubitem a:visited { /* Default font style & color of submenu items */
color: #000000;
text-decoration: none;
}
.vertsubitem a:hover { /* Font style & color, background submenu color of submenu item when hovered over */
color: #ffffff;
background-color: #21449c;
text-decoration: none;
}
.vertsubitem a:active { /* Font style & color, background submenu color of submenu item when clicked */
color: #ffff00;
background-color: #666666;
text-decoration: none;
}
.vertsubitem .vertfwdarr, .vertitem .vertfwdarr { /* Positioning of right arrow for submenus */
position: absolute;
top: 5px;
right: 8px;
}
.dmselected { /* Style override for selected category tree */
background-color: #ccc;
font-weight: bold;
}
.verbar .dmselected { /* Style override for selected root category */
background-color: #999;
}
But unfortunately it doesn't mean a lot to me, i have tried changing single variables at a time, but to no avail. At present the structure is as follows: Main Category - Sub category 1 Sub category 2 - I would like it to be: Main Category Sub category 1 - - Sub category 2 If that makes sense? Any advice would be most appreciated. Best Regards Donna |
|||||||