Forum Moderators: not2easy

Message Too Old, No Replies

Transparent border over background image?

Is this possible?

         

Ernos

3:01 am on Nov 26, 2003 (gmt 0)

10+ Year Member



Right now my site is very bare-bones as far as design goes: white background and dark-colored text and text graphics. I'm wondering if I can use a subtle tiled background image, but my experimenting is hitting a stumbling block because (I think) of the stylesheet I'm using to make a two-column layout that doesn't go all hinky in IE6. Here's the basics of the stylesheet:

html, body{margin:0; padding:5px; }

#pagewidth{width:100%; min-width: 500px; }

#header{width:100%;}

#outer{
border:solid red 0px;
border-left-width: 200px;
border-left-style: solid;
width: auto;
}

#inner{margin:0; width:100%;}

#outer>#inner { border-bottom:solid red 1px; }

#leftcol{
width:200px;
float:left;
position:relative;
margin-left:-200px;
margin-right:1px;
}

#maincol{
float: left;
width: 100%;
position: relative;
margin: 0 -8px 0 -2px;
}

#footer{width:100%; }


And this is what's in the body of the html document:

<div id="pagewidth" >
<div id="header" >
<div class="content"> Head </div>
</div>
<div id="outer" >
<div id="inner">
<div id="leftcol" >
<div class="content"><P>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </div>
</div>
<div id="maincol" >
<div class="content"><P>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque at ante.</div>
</div>
</div>
</div>
<div id="footer" >
<div class="content"> Footer </div>
</div>
</div>

I got this code from csscreator.com, which I originally found via a link right here on Webmaster World, and after pulling my hair out over the two-column layout I was relieved that I'd finally found one that seems to work. And it does, but only if I'm using plain, solid colors it seems. I tried adding this to the stylesheet:

body {color: white; background:url(image.jpg); }

But the left column area is still red because of the border styles that are applied (I chose red for the example just becaues it stands out against the white).

So I've tried changing the border from red to transparent, but that still doesn't allow the background image to be viewed.

Is there a way for this to work with this method? I've tried several different versions of the two-column layout, many of which I've found through this board, and this one has been the only one where the text in all columns behaves exactly as I want it to. I don't want to give it up, but I'd like the option of putting a background image on my site.

DrDoc

3:08 am on Nov 26, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Well, that's one way I have never seen a border be used before. Quite interesting.

However, if you ditch the border in your #outer div (all border rules) and replace them with margin-left:200px; you'll see that it works ;)

Ernos

4:08 am on Nov 26, 2003 (gmt 0)

10+ Year Member



God, I'm a moron. I had tried that, but I thought it wasn't working, but it turns out that I still had "clear:both" in my footer, which was somehow causing the leftnav to be pushed off the screen with this stylesheet.

Thanks for your help DrDoc, I probably wouldn't have taken another look at that. :)

DrDoc

3:19 pm on Nov 26, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Nah, I wouldn't call you a moron :) Just one of those things where you can't see the forest for the trees. ;)