-RESOLVED-How to make objects fill the full width of the screen
Quick question,
Im making a landing page where the background image is set at 100% width so it scretches to the width of the screen no mattter the resolution.
My content will be placed within a div that is a transparent white box, positioned absolutely. I would like ti stretch it to 100% of the width as well, but so far there is a small gap from the left, and then it stretches.. I have it set to 100% width as well.. am I doing something wrong? Heres the code I have so far.
<!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>Black Umbrella</title>
<meta name="description" content="Don't let the name fool you. There's nothing gloomy about the Black Umbrella. Instead, this 'customize-your-own' cocktail bar embraces a simple yet welcoming atmosphere along with the prime location the corner of Washington and Orange Avenue. This independent-minded venue will give patrons an opportunity to let their imaginations run wild and come up with their own unique cocktails. Get creative enough and your one-of-a-kind cocktail might just have what it takes to be inducted into our Wall of Fame!" />
<style type="text/css">
.bg {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -5000;
}
#content{float:left;
position:absolute;
top:100px;
height:250px;
width:100%;
background-color:#FFF;
opacity:0.7;
filter:alpha(opacity=70); /* For IE8 and earlier */}
</style>
</head>
another issue Im having is since my text and image are within a transparent div, they are as well transparent, how do I override this? I found an option using rgba but it doesnt work in i.e, so i doubt it would work.
I was playing with a similar issue last night and found the bit of code below that served miracles for me. Maybe it will help in your case? I gave it a quick try with your code and it seemed to if I'm understanding your problem correctly.
* {
padding: 0px;
margin: 0px;
}
To be honest I'm not entirely sure what exactly what the * is representing. I'm pretty sure it's representing all tags not already called out, but I'm not sure which specific ones are causing the desired effect on the padding and margin. If someone could elaborate on what the * is representing I'd much appreciate it so long as it doesn't distract from lmorales's question.
It's not really overwriting your #content though, because you didn't specify the margin and padding in your #content. It's just overwriting the default values. If you specify the margin and padding in your #content does it work? Here's a snip of my code that's working for me in my application.
Here's the website I was using last night to figure out what I think is a similar problem. Some pretty cool stuff on it even if it doesn't help you in this application. Might be worth a quick look.
Actually, that does work, I think i just messed up my code earlier... and as for the parent/child transparency, yeah just doesnt work so i just used a transparent png rather than css transparency... weird quirk there..
Phew, I thought I was going to be wrong there for a minute, can't have that!
Honestly, I've just began to learn XHTML this term, and my instructor could be vastly better. This forum is proving to be a great bridge to that huge gap. Lots of quirks to learn. Your transparency issue was beyond anything I've looked at, so thanks for figuring that out for me before I had to struggle for hours.
Haha I have never learned html, css, or anything web related in school, I studied graphic design ( i.e print and whatnot) my job just figured i could just "pick it up" and make a million websites in like a week.
Hey, you wouldnt know how to fix this new problem would ya? I have my background set to fill the screen, its like an image with black bars on top and bottom.. they want a floated right footer on it that is always on the bottom and in the black portion of the image.. is this possible?
I would think it is possible. Actually, it sounds a bit like a variation of what I was trying to do when I found this page below. I wanted the footer to be at the bottom and stay there when the window is resized. Rather than make the width 100% just define it and float it right. Would that work?
Also, I'm pretty sure there's a really tacky way to do it too using some kind of script. Thankfully they've pretty much gone out of style. I'm sure there's tasteful examples though. Here's a tutorial and Javascript example of one floating in the top right.
that sorta works, but if you see its not really at the complete bottom, and if you resize the window, the footer encroaches on the background image.. I think i should probably start a new topic
Yea, your footer text isn't respecting the div's. Here's the code for my page with respectful footer text. I can't really pin what it is in your code that's causing the text to pop out. It seems like it may be a combination of things perhaps. I'm thinking along the lines of floats, positions (absolute, relative), and a splash of height %.
I just figured out why your text was being so defiant. For some reason I hadn't noticed that the black bars are part of the background image. I thought they were their own div tags. You'll have to break those off of the image and make them divs, at least the bottom one.
(By the way, I have done other things today, promise! Your site has just been an interesting application for what I'm already trying to teach myself.)
Before you post, read our: 
