I don't know how to make it 100% width

HTML & CSS
1

Hi there.

So basically my div #slidershadow has a background image wich is 1400px wide. But the div only strecthes to around 960px and not 100% when I apply it to it.
What am I doing wrong?

HTML:

<!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>AirWipp</title>
<link href="css/styles.css" rel='stylesheet' type='text/css'>
<link href="css/reset.css" rel='stylesheet' type='text/css'>

</head>

<body>

<div id="background1">



<div id="content">

<div id="upper">

<img id="logo" src="images/logo.PNG" width="301" height="47" />

<div id="meny">

<img id="button" src="images/Meny1.png" width="71" height="31" />

</div>

<div id="herocontainer">

<div id="slidershadow">

<img id="slider" src="images/Slidertest.jpg" height="400" />

</div>

</div>

<div id="smenu">

</div>



</div>



</div>


</div>



</body>
</html>

CSS:

body {background-image:url(../images/dirtTextureBgTile.png)}


#background1 {
	margin: 0 auto;
	background-image:url(../images/Undermitter.png);
	min-height:1000px;

	}

#content {
	background-image:url(../images/headerHomeBgTile.png); repeat-x; height:435px; border-bottom:solid 5px #000}


#upper {width:960px; height:80px; margin:0 auto; padding-top:50px; }

#logo {float:left;  }

#meny {float:right; height:80px; width:500px; background-image:url(../images/tapeTopnavBg.png); background-repeat:no-repeat}

#slider { }

#slidershadow {padding: 35px 0 112px 0;
	background-image:url(../images/heroLightingBg.png);
	background-repeat:no-repeat;
	background-position: top center;
	height:400px;
	width:100%;
}


#herocontainer { margin-top: 70px;  }


#button {margin-top:15px;  }

#smenu {width:960px; height:80px; background-color:#99FF33; margin:0 auto;}
2

100% width means 100% width of hte parent. The nearest parent with a width set is #upper which has the 960px width. You’ll have to restructure your HTML to allow it to go that far out. Or manually set the width that wide (which you’ll have it hanging out, which can lead to many issues, but it’s an option, I guess. I’d say that you should just rethink your HTML :).

3

Ah, then I have to do that.

Thanks Ryan :slight_smile:

4

You’re welcome :). That % rule follows height as well. Different meaning depending on where used.

5

I fixed it! :slight_smile:

The upper was wrapping around all the other things, so I fixed it somehow and now it’s good. :smiley:

Ryan… don’t leave this community.
BTW, I’m so glad I found this and I’ve learned pretty much, and here in sweden I have some clients that wanted their websites done and I’ve earned about 1100USD in 2 weeks. I’m only seventeen so that’s good for me :slight_smile:

But my goal is to be professionall someday. :slight_smile:

6

kvnwpts, I can wholeheartedly recommend the SitePoint references. They’re extremely good for learning, better than tutorials for me, because I like the more thorough, academical approach to learning. A tutorial will only show you so much, but these references give you an in-depth understanding of the core principles, methods, and how to apply them when and where.

For layouts in particular, I recommend these reading lectures:

http://dev.opera.com/articles/view/35-floats-and-clearing/
http://dev.opera.com/articles/view/37-css-absolute-and-fixed-positioning/
http://dev.opera.com/articles/view/36-css-static-and-relative-positioning/

They were written by Tommy (AutisticCuckoo), who is also the co-author (along with Paul O’Brien) of the SitePoint references. Tommy is to HTML and semantics what Paul is to CSS.

I’m posting these because I have the feeling you’re really keen and eager on becoming a professional designer, so the reading material above is good to have in your arsenal of learning references.

7

Definately. Thank you very much. :slight_smile:

8

[ot]I have a track record of leaving here for long periods of time though :p. Think I’m here for the long haul though.

1100 USD? The crap. I wish I could find work :(. Fixing other designers problems, and they get work, lol.

You’re on the right track. Build up a portfolio.[/ot]

9

Thanks for the links, Kohoutek. If they’re not in my little “tutorial for novices” databank already, they’re going in today. Tommy is da bomb.

10

Well.

A good tip. I live in sweden and I got a website where all swedish companys are listed. So basically there is companys orderd from A-Z and in every letter there is around 2500 pages with 20-30 companys each page. 20% of the companys on each page has email contact, so that’s like 5 companys with listed emails on each page. So what I did was copy all the emails holding CTRL in and selecting all the emails, pasting it into my hotmail, and did so for about 50 pages and sent it BCC (I think it’s called) That’s like 250 companys. Next day I had 2 people wanting they wanted their website done, next day onother 2, and next day 1 more. And now I wanna build it up so I’m pretty cheap at start. But I got some clients. And on all companys on the letter A, i have another 2450 pages to write to. Then go on to B :slight_smile:

Got it?

11

EDIT: Search for some kind of site where you live and do the same, because you are really, really good. :slight_smile:

EDIT 2: OPS, i made another reply to myself. sorry.