|
CSS - Cascading Divs And Backgrounds
Hi all!
I've got a slight problem with my div layout, and seem to be stuck, maybe one here has had similar troubles, and found a solution *g* I've got a Layout, that needs the following things: *) repeat-y background image for a parchment background *) header and footer images for the beginning and end of the parchment *) text that flows over the parchment, header and footer images Normally I'd just put the parchment in a parent div, put the header and footer in another div (contained in the parent div) and put the text in another div with biggest z-index (also contained in parent div). Unfortunately, as the text needs to stretch the parent div so that the parchment background is behind the whole text, I can not set the text div as position absolute, 'cause absolute divs don't expand their parents. I also can not position the header and footer divs without position absolute. But position absolute divs are always above non absolute divs, even is z-index is set higher in the non absolute divs. Is there anything i miss? Is it simply not possible? Thanks in advance! Roman Similar TutorialsHello all, I've been scratching my head on this one for a bit. First of all, here's the site I'm working on: http://dev.discoverahost.com If you'll note, the background for the content is currently blank. I'm trying to get a background to cover that area. Here's the basic structure for that page: Code: <div id="main_header"> </div> <div id="main_navigation"> Home :: About :: Link :: Such and Such </div> <div id="content_wrap"> <div id="image_below_nav"> </div> <div id="content_main_header"> </div> <div id="content_main"> Lorem Ipsum blah blah blah </div> </div> Note: That's not all the code. You can look at the souce for the full thing. The background I'm trying to apply I want to go on the wrapper background (content_wrap). I've got it all defined in the CSS file, located he http://dev.discoverahost.com/css/style.css The problem is that the wrapper isn't expanding vertically to include the background, even though I've got plenty of text inside of another nested div. Now it works if I put content outside of these divs ... which I really don't want to do. Maybe I've got my structure all wrong for doing this kind of thing, but any and all help is very much appreciated. Thanks! - Adam Hello. I need some help with positioning css. I want a div in the center of the page with a width of 780 px and a height of the entire page. On the left I want a background image aligning to the right and on the right side I want a background image aligning to the left. These two div's must be stretching to the whatever size your screen is. I just can't get it done. Right now I have this, but well, it's not really working properly. PHP Code: .left { width:30%; margin-bottom:0px; background-position:top right; float:left; height:100%; background: url("../img/left.jpg") top right repeat-y; } .right { width:30%; margin-right:0px; margin-bottom:0px; float:left; height:100%; background: url("../img/right.jpg"); } .centerpositie { width: 40%; //border:1px solid black; float:left; top:0px; background-color:#FFFFFF; width:780px; height:100%; } I am working on this site for a client and I can't figure out what the hell I'm doing wrong. It doesn't "work" in FireFox, which of course (I assume) means that IE is simply forgiving my errors, but let's not have a religious debate, let's solve problems. http://www.nolower.com/example.php http://www.nolower.com/css/public.css I am curious about two things: 1) Why is my white background (the main div) not showing up on this page? I thought I had cleared every float, yet, still, there it isn't! 2) Why does the background shadow (the main div), a background image that extends into the padding in IE as you'll see, not show up on FireFox? If anyone can help identify what I've done wrong and explain to me what made it break in CSS, I'd be very grateful. I've been trying to figure out the peculiarities of CSS and its very poor cross-implementation (not that tables were ever cross-implemented well either, oi) for about a year now and I always either make a new mistake or find something I haven't figured out yet. Thanks! I am using what I thought was a fairly simple stylesheet and layout, but it is giving more trouble than I have ever had with stylesheets. Essentially, I have a container div, which is used to center a page. I have set the background color of that div to be white. I would expect that the divs inside of this div (navigation, content, etc.) would perpetuate that color, but they do not! They do in Dreamweaver and IE, but not in Firefox! I am quite confused, and would greatly appreciate feedback from anyone who would care to look and explain. I am sure I am missing something relatively simple. You can find the HTML and Stylesheet at http://www.levatinodentist.com/about.htm and http://www.levatinodentist.com/main.css Thank you - lambrite hi all. thanks for looking. i'll be quick. i am trying to learn css vs tables and this is my first foray. here's the link: http://www.rightbraintools.com/DEV on my PC, it looks fine in opera 7.something and netscape 7.2. terrible in IE 6. perfect on safari and just a mess on i.e 5 for mac. i'll worry about that last one later!!! please let me know what's going on with the staggered lists. If anyone can help, i'd love it. it is sooooo easy to do this in tables that i'm close to reverting!!! oh nooo! here's my css sheet and html in case anyone doesn't want to download it: body{ background-color: #FFF; margin: 0; padding: 0; font-family: Verdana; font-size: 11px; color: #000; } #container{ border: 0; margin: 0; width: 657px; } #logo{ height: 100px; padding: 20px 0 5px 0; } #design{ } #content{ display: block; height: 330px; width: 657px; padding: 0; border: 0; } #sidebar{ width:220px; height: 328px; padding:3px 0 3px 0; text-color: grey; border: 0; float: left; } #menu{ width: 430px; height: 328px; padding: 3px 0 3px 0; float: left; border: 0; } #menu ul, #menu ul.copy{ list-style:none; margin:0; padding:0; clear:both; } #menu ul li a:link, #menu ul li a:visited, #menu ul li.empty, #menu ul li.copy{ width: 134px; padding:3px 0 3px 5px; float: left; margin: 0 2px 0 2px; } #menu ul li.copy{ color: #666666; height: 90px; display: block; word-wrap: break-word ; border: 0; } #menu ul li a:link, #menu ul li a:visited { color: #000; height: 11px; background:url(../i/btn_bg.gif); vertical-align:middle; text-decoration:none; } #menu ul li a:hover { background:url(../i/btn_bg_over.gif); } img { border: 0px; } #menu ul li.empty img{ margin: -4px 0 0 -4px; } and my html: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Home </title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/> <link href="css/layout.css" rel="stylesheet" type="text/css"/> </head> <body> <div id="container"> <div id="logo"> [logo img goes here]</div> <div id="design"><img src="i/hd_placeholder.gif" width="657" height="108"/></div> <div id="content"> <div id="menu"> <ul > <li><a href="#">Introduction</a></li> <li><a href="#">Current Developments</a></li> <li><a href="#">Collections</a></li> </ul> <ul > <li class="copy">this is content this is content this is content</li> <li class="copy">this is content this is content this is content</li> <li class="copy">this is content this is content this is content</li> </ul> <ul> <li><a href="#">Document of the Week</a></li> <li><a href="#">Bibliography</a></li> <li><a href="#">Links</a></li> </ul> <ul > <li class="copy">this is content this is content this is content</li> <li class="copy">this is content this is content this is content</li> <li class="copy">this is content this is content this is content</li> </ul> <ul > <li><a href="#">Information</a></li> <li class="empty"><img src="i/full.gif" width="137" height="107" /></li> <li class="empty"><img src="i/full.gif" width="137" height="107" /></li> </ul> </div> <div id="sidebar"> sidebar here </div> </div> </div> </body> </html> Hi all, I've searched around and haven't been able to find anything. I'm writing a site whose CSS sheet has the following in it: a:link { color: #200963; text-decoration: underline; } .sidelink { color: #ffffff; text-decoration: none; } The sidelink class is used for my side nav menu. A line from it is: <p><a href="about-us.htm"><span class="sidelink" onmouseover="this.style.color=\'yellow\';" onmouseout="this.style.color=\'\';">About Us</span></a></p> Why does Firefox insist on showing the menu links as underlined? IE doesn't. Is this a W3C standard that Firefox implements? Thanks, Dave Hi, I'm trying to make a drop-down menu using CSS and javascript. I'm posting this here because the javascript (and most of the css!) is working fine, I just need some help with the positioning. You can see the menu so far on the website I'm beginning to develop, 10pinleague.com. As you can see the initial drop downs work as intended but when you attempt to open a submenu, that should appear to the right of the drop down menu, it appears in completely the wrong place. And for some odd reason the distance from the drop-down menus to the submenus increases more and more as you progress from Menu 1 to Menu 2 and 3. I'm no expert at either javascript or CSS, so the drop down menu was something that I downloaded from a website, here, and then adapted to suit my site. Perhaps this wasn't intended to work as a cascading drop down menu. I just thought if I apply the same principle of wrapping the link in a div and getting that to show another new div containing the submenu it should work. And it kind of does, just in the wrong place - which I do not understand why this happens. Here is the HTML code for the menu. (note this is not the actual code on my website, this is code that is generated from a php loop I've made. But the HTML remains the same). Code:
<!-- START OF MENU !-->
<table width='730' height='30'>
<tr>
<td width='20%' align='center'>
<div id='menu1a'>
<a href='#'>Menu 1</a>
</div>
<div id='menu1b' class='menu_dropdown'>
<table width='150' height='50'>
<tr>
<td class='padded'>
<table width='100%' height='100%'>
<tr>
<td class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'>
<div id='submenu1_1a'>
<a href='#'>Item 1</a>
</div>
</td>
</tr>
<tr>
<td class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'>
<div id='submenu1_2a'>
<a href='#'>Item 2</a>
</div>
</td>
</tr>
<tr>
<td class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'>
<div id='submenu1_3a'>
<a href='#'>Item 3</a>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<script type='text/javascript'>at_attach('menu1a', 'menu1b', 'hover', 'y', 'pointer');</script>
</td>
<td width='20%' align='center'><div id='menu2a'>
<a href='#'>Menu 2</a>
</div>
<div id='menu2b' class='menu_dropdown'>
<table width='150' height='50'>
<tr>
<td class='padded'>
<table width='100%' height='100%'>
<tr>
<td class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'>
<div id='submenu2_1a'>
<a href='#'>Item 2</a>
</div>
</td>
</tr>
<tr>
<td class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'>
<div id='submenu2_2a'>
<a href='#'>Item 2</a>
</div>
</td>
</tr>
<tr>
<td class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'>
<div id='submenu2_3a'>
<a href='#'>Item 3</a>
</div>
</td>
</tr>
<tr>
<td class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'>
<div id='submenu2_4a'>
<a href='#'>Item 4 ></a>
</div>
<div id='submenu2_4b' class='menu_dropdown'>
<table width='150' height='50'>
<tr>
<td class='padded'>
<table width='100%' height='100%'>
<tr>
<td class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'>
<a href='#'>Item 4a</a>
</td>
</tr>
<tr>
<td class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'>
<a href='#'>Item 4b</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<script type='text/javascript'>at_attach('submenu2_4a', 'submenu2_4b', 'hover', 'y', 'pointer');</script>
</td>
</tr>
<tr>
<td class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'>
<div id='submenu2_5a'>
<a href='#'>Item 5</a>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<script type='text/javascript'>at_attach('menu2a', 'menu2b', 'hover', 'y', 'pointer');</script></td><td width='20%' align='center'><div id='menu3a'><a href='#'>Menu 3</a></div><div id='menu3b' class='menu_dropdown'><table width='150' height='50'><tr><td class='padded'><table width='100%' height='100%'><tr><td class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'><div id='submenu3_1a'><a href='#'>Item 3</a></div></td></tr><tr><td class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'><div id='submenu3_2a'><a href='#'>Item 2</a></div></td></tr><tr><td class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'><div id='submenu3_3a'><a href='#'>Item 3</a></div></td></tr></table></td></tr></table></div><script type='text/javascript'>at_attach('menu3a', 'menu3b', 'hover', 'y', 'pointer');</script></td><td width='20%' align='center'><div id='menu4a'><a href='#'>Menu 4</a></div><div id='menu4b' class='menu_dropdown'><table width='150' height='50'><tr><td class='padded'><table width='100%' height='100%'><tr><td class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'><div id='submenu4_1a'><a href='#'>Item 4</a></div></td></tr><tr><td class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'><div id='submenu4_2a'><a href='#'>Item 2</a></div></td></tr><tr><td class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'><div id='submenu4_3a'><a href='#'>Item 3</a></div></td></tr></table></td></tr></table></div><script type='text/javascript'>at_attach('menu4a', 'menu4b', 'hover', 'y', 'pointer');</script></td><td width='20%' align='center'><div id='menu5a'><a href='#'>Menu 5</a></div><div id='menu5b' class='menu_dropdown'><table width='150' height='50'><tr><td class='padded'><table width='100%' height='100%'><tr><td class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'><div id='submenu5_1a'><a href='#'>Item 1</a></div></td></tr><tr><td class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'><div id='submenu5_2a'><a href='#'>Item 2</a></div></td></tr><tr><td class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'><div id='submenu5_3a'><a href='#'>Item 3</a></div></td></tr></table></td></tr></table></div><script type='text/javascript'>at_attach('menu5a', 'menu5b', 'hover', 'y', 'pointer');</script></td>
</tr>
</table>
Here is the related CSS.....but I doubt this is important. Code:
.menu_dropdown { background-color: #a5caad; border: 1px solid #057c1f; position: absolute; visibility: hidden; font-size: small; }
.menu_dropdown A:link {text-decoration: none; color: #000; font-weight: normal; }
.menu_dropdown A:visited {text-decoration: none; color: #000; font-weight: normal; }
.menu_dropdown A:active {text-decoration: none; color: #000; font-weight: normal; }
.menu_dropdown A:hover {text-decoration: underline; color: #000; font-weight: normal; }
td.menuNormal
{padding: 0px;
font-weight: bold;
vertical-align: top;
background-color:#a5caad;}
td.menuHover
{padding: 0px;
font-weight: bold;
vertical-align: top;
background-color: #87bc93;}
And here is the javascript file, that I have not modified in any way from the site I linked to above. Code:
// <script>
// Copyright (C) 2005 Ilya S. Lyubinskiy. All rights reserved.
// Technical support: http://www.php-development.ru/
//
// YOU MAY NOT
// (1) Remove or modify this copyright notice.
// (2) Distribute this code, any part or any modified version of it.
// Instead, you can link to the homepage of this code:
// http://www.php-development.ru/javascripts/dropdown.php.
//
// YOU MAY
// (1) Use this code on your website.
// (2) Use this code as a part of another product provided that
// its main use is not creating javascript menus.
//
// NO WARRANTY
// This code is provided "as is" without warranty of any kind, either
// expressed or implied, including, but not limited to, the implied warranties
// of merchantability and fitness for a particular purpose. You expressly
// acknowledge and agree that use of this code is at your own risk.
function expand(s)
{
var td = s;
var d = td.getElementsByTagName("div").item(0);
td.className = "menuHover";
}
function collapse(s)
{
var td = s;
var d = td.getElementsByTagName("div").item(0);
td.className = "menuNormal";
}
// ----- Popup Control ---------------------------------------------------------
function at_display(x)
{
var win = window.open();
for (var i in x) win.document.write(i+' = '+x[i]+'<br>');
}
// ----- Show Aux -----
function at_show_aux(parent, child)
{
var p = document.getElementById(parent);
var c = document.getElementById(child );
var top = (c["at_position"] == "y") ? p.offsetHeight+2 : 0;
var left = (c["at_position"] == "x") ? p.offsetWidth +2 : 0;
for (; p; p = p.offsetParent)
{
top += p.offsetTop;
left += p.offsetLeft;
}
c.style.position = "absolute";
c.style.top = top +'px';
c.style.left = left+'px';
c.style.visibility = "visible";
}
// ----- Show -----
function at_show()
{
var p = document.getElementById(this["at_parent"]);
var c = document.getElementById(this["at_child" ]);
at_show_aux(p.id, c.id);
clearTimeout(c["at_timeout"]);
}
// ----- Hide -----
function at_hide()
{
var c = document.getElementById(this["at_child"]);
c["at_timeout"] = setTimeout("document.getElementById('"+c.id+"').style.visibility = 'hidden'", 333);
}
// ----- Click -----
function at_click()
{
var p = document.getElementById(this["at_parent"]);
var c = document.getElementById(this["at_child" ]);
if (c.style.visibility != "visible")
at_show_aux(p.id, c.id);
else c.style.visibility = "hidden";
return false;
}
// ----- Attach -----
// PARAMETERS:
// parent - id of visible html element
// child - id of invisible html element that will be dropdowned
// showtype - "click" = you should click the parent to show/hide the child
// "hover" = you should place the mouse over the parent to show
// the child
// position - "x" = the child is displayed to the right of the parent
// "y" = the child is displayed below the parent
// cursor - Omit to use default cursor or check any CSS manual for possible
// values of this field
function at_attach(parent, child, showtype, position, cursor)
{
var p = document.getElementById(parent);
var c = document.getElementById(child);
p["at_parent"] = p.id;
c["at_parent"] = p.id;
p["at_child"] = c.id;
c["at_child"] = c.id;
p["at_position"] = position;
c["at_position"] = position;
c.style.position = "absolute";
c.style.visibility = "hidden";
if (cursor != undefined) p.style.cursor = cursor;
switch (showtype)
{
case "click":
p.onclick = at_click;
p.onmouseout = at_hide;
c.onmouseover = at_show;
c.onmouseout = at_hide;
break;
case "hover":
p.onmouseover = at_show;
p.onmouseout = at_hide;
c.onmouseover = at_show;
c.onmouseout = at_hide;
break;
}
}
Can somebody please help me get the submenus appearing next to the divs in the drop-down menus that they relate to, rather than half way across the page? Thank you very much! PS. If you think I've asked this in the wrong place and it should be in the Javascript forum, could you move it for me? Thanks. This might be simple, and might not be. Ok, I'm a sort of CSS noob, so bear with me if this is simple I have 3 images that I created, and I plan to make a fluid layout with them. As you would expect, one is the top, one is the filler that expands, and one is the footer image. Now this would be raher simple to do, but there is one hard point: At the end of the whole layout, there is a gradient. This makes it look really cool in like login boxes(the image sizes are optimized for those), but that means that there is a large chunk of the footer where I want text to overlap from the content area. Is this possible? I will attach images if someone doesn't get my rambling i am trying to create a website and i know you can create backgrounds by going to photoshop and doing like a gradient with the image width of 1px and then place that into the css and it will repeat. i was wondering how can i make like an image as my background like 'http://fortysevenmedia.com/about/' i dont want it to be a background you create in photoshop and use background image and then it looks really weird repeating. i guess im wondering what other ways are there of making backgrounds for websites? Hi - I'm playing with the Css Zen Garden example. I'm basically trying to do a real simple layout - semi-transparent boxes, that switch from a background image to a solid color when the mouse hovers. On firefox, its working pretty much the way I want. IE pretty much completely chokes though, and I can't figure out why - it doesn't want to apply background images or colors to the <div>'s. My example is he http://kc9ddi.poromenos.org/zen and the style sheet is at http://kc9ddi.poromenos.org/zen/sample.css I can't figure out what IE's doing with the background colors and images. I'd appreciate any help anyone would offer. Here's an example of css for a div Code:
#preamble {
border-style: groove;
border-width: 0.2ex;
border-color: blue;
padding: 0px 1ex;
background: url(grad1.png) #ADD8E6;
opacity: .50;
filter: alpha(opacity=50);
zoom: 1;
}
#preamble:hover {
background: #ADD8E6;
}
I am creating my layout using div's but they are not showing up in my browser. Can you see anything in my code that looks wrong? Thanks for your help! HERE'S MY HTML FILE...... Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/strict.dtd"> <HTML> <HEAD> <title>PDV TV</title> <LINK REL="stylesheet" TYPE="text/css" HREF="styles/style.css"> </HEAD> <BODY> <!-- TOP --> <DIV CLASS="layout_top"> </DIV> <!-- MAIN --> <DIV CLASS="layout_main"> </DIV> <!-- BOTTOM --> <DIV CLASS="layout_bottom"> </DIV> <!-- FOOTER --> <DIV CLASS="layout_footer"> </DIV> </BODY> </HTML> HERE'S MY CSS FILE...... Code:
/* GENERAL
-----------------------------------*/
body {
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
font-family: Arial;
font-size: 14px;
color: #000000;
}
img {
border: 0px;
}
p {
padding: 0px;
margin: 0px;
}
a {
color: #2f2613;
text-decoration: none;
}
a:hover {
color: #2f2613;
text-decoration: underline;
}
.eventDate {
padding-bottom: 10px;
}
.textElement ul {
list-style-type: disc;
}
.textElement li {
padding-bottom: 5px;
margin: 0px;
list-style: normal;
}
.eventsList .eventDate {
display: normal;
}
h1, h2, h3, h4, h5, h6 {
padding: 0px;
margin: 0px;
font-size: 16px;
}
.iframe {
background: transparent;
}
.clear {
clear: both;
}
.tab .element {
margin-bottom: 15px;
}
.fieldSelected {
border: 0px solid #111111 !important;
background-color: #d1cdb1 !important;
}
.textElement {
margin-bottom: 20px;
}
.title {
margin-bottom: 5px;
}
/* LAYOUT
-----------------------------------*/
.layout_top {
width: 100%;
height: 41px;
margin: 0px auto;
background-image: url(images/top_bg.jpg);
background-position: top;
background-repeat: repeat-x;
}
layout_main {
width: 100%;
height: 500px;
margin: 0px auto;
background-image: url(images/main_bg.jpg);
background-position: top;
background-repeat: repeat-x;
}
layout_bottom {
width: 100%;
height: 264px;
margin: 0px auto;
background-image: url(images/bottom_bg.jpg);
background-position: top;
background-repeat: repeat-x;
}
layout_footer {
width: 100%;
height: 30px;
margin: 0px auto;
background-image: url(images/footer_bg.jpg);
background-position: top;
background-repeat: repeat-x;
}
Hey all I'm a web programmer and a moderately skilled web designer, and I've got a bit of a problem. I assist in running a forum at midnafanforum.com and I was asked quite a while ago to set it up so a border ran down either side - this down the left side and this down the right. The images should repeat for as long as the page goes on for (it has a varying height, depending on the main content). The temporary solution we've used is this -one image containing both sides of the background, and whilst on one fairly uncommon resolution of 1400x3200 this looks fine, obviously on all others it looks stupid. Any help would be much appreciated - considering I'm not very experienced in CSS it'd be helpful if the code itself could be given, or I could at least be walked through fixing this. Thanks in advance Cheeseweasel EDIT: How annoying, URLs are blocked. midna fan forum dot com is the address. I swear I'm not spamming for more traffic, honestly. At the moment, my BODY tag contains the following CSS: Code:
BODY {
background: url(images/gradients/bg_top.jpg);
background-repeat: repeat-x;
}
The bg_top.jpg file is an image 200px high, and 3px wide. This displays nicely at the top of my page. It is a gradient from dark grey which fades out to a pattern of simple squares. I would then like these squares to be repeated across the whole of my background. What I wanted to do was to set a second background image that would display underneath the gradient, but this didn't appear to work. Looking around Google, it appears that you can only set the one background for the body tag. Is this the case? If so, is it possible to set it up so that the square pattern repeats itself across the whole page, but underneath the gradient at the top? Many thanks. I would like to do the following on a web page but not sure how. Tried a few things but it didnt display what I was hoping for... I want essentially a 3 layered background image. The main background is one image that is tiled in all directions The second image is tiled in x but attached to the top of the screen The third image is the same as the second image but attached to the bottom of the screen. Over the top of this I want to use html tables and have the background displayed through the empty table cells. Is this possible? Any help appreciated Hi, I have a design that uses "rounded tabs", however each tab is a different size, so I cannot just use a standard-sized tab background image. Is there a way I can use a left rounded image and right rounded image with the middle a solid colour as a background instead of inline images? Thanks! Hi, I'm trying to do a design with: http://xlibrisclients.co.uk/flybynite/new/V1.htm in mind. I want the content to have a scrollbar if content goes off the page... basically want to achieve the look and feel of a frame base site such as: http://www.flybynite.co.uk/website/ but only using CSS and tables. Please help! Janusz Hello all, Wondering if those of you who love netscape more than I do can help me, This is a little css script to get a bg image to show in the top right hand corner of a table the table Its called from <td class="rightnav"> Is there something that I i have done that makes netscape not display the image? I'm resonably new to Css, but I have a pretty good handle on it, just not with what netscape supports. Does it have to be called in a <p> tag? I have tried this and a <Div> tag but it wont display, but in Explorer it is fine ... I'd apreciate any suggestions its really frustrating .rightnav { font-family: Arial, Helvetica, sans-serif; font-size: 10px; font-weight: bold; background-image: url(images/continued.jpg); background-repeat: no-repeat; background-attachment: fixed; background-position: top right; height: 100%; white-space: normal; display: block; overflow: hidden; } any help apreciated =) - Shell. I'm working on my personal website and needed something quick so I found a free template I liked and started changing things as needed. The way the header works is it uses a background img for the nav so it displays off both sides of the browser. This image scrolls up as the page does. To make it look more interesting I wanted to add a simple background image to visually box in the content... but I need this one to be fixed. Every solution I've tried doesn't seem to work. I'm posting separate test links with a description why its not working. (I'm a new user so you'll have to copy/paste links. Figured it'd be easier for you to see it than post 8 different code tags). First thing's first: Images I'm moving around a bg_boarder.jpg and bg_general.jpg bradyoo.com/test.html Both bg imgs in body {} - boarder img scrolls. bradyoo.com/test02.html Boarder img fixed in wrapper {} - boarder img displays on top of bg_general by YO logo. bradyoo.com/tes03t.html Boarder img fixed in body {}, general img in header{} - General image doesn't display beyond wrapper. I even tried fixing everything (not the optimal result, but I will use it if this is the only solution) bradyoo.com/test04.html Both bg fixed in body {}, position: fixed in header {} - I added the fixed position in the header to keep the nav from scrolling but the embeded content displays on top of the header when scrolling. Drumroll, almost. Scrolling image, image swap, and css image backgrounds. This one is working almost exactly as I would like for it to in IE and FF. http://www.mtn.ncahec.org/web/grace/bagwell/test5.asp But, if you scroll down, why are the backgrounds not going all the way to the bottom in FF? Starts acting weird around item 29...... Works fine in IE6. Thank you, thank you, please, please? Janet I am having quite a time finding out if it's possible to use the AlphaImageLoader hacks on a png to make it a background image. I need this for drop shadows on a gradient page background. I have found a site that does have working png transparent backgrounds he http://thedesignspace.net/css/transparentPNG.htm For some reason, even though my code is basically the same with the image location changed, it fails to work for me, while that page does. My code can be seen at http://codymays.net/~private_ftp/theed. If you look at the source you'll see the IE specific css file. Works fine in opera/ff. Any help would be greatly appreciated. |
|||||||