div stretching

[JKdesignz]

I like to stretch my div horizontally over my entire screen, this div has no decorations at all, it's just basically a block that needs to be viewed in 800x600 and 1024x768 without the troubling sight I'm getting now. now I used width: 1000px (this will never work ofcourse in 800x600) so I'm a bit troubled here I might say :S:S

Thou shalt be victorious!!

 

[BillyRayPreachersSon]

DIVs will automatically be stretched to 100% of their container width. If this is the browser, then they should be 100% of the browser width. If this is full-screen, then the DIV will be as well.

If you are not seeing this, then I can only assume that you have some CSS that is stopping this from happening.

Post your code and I'm sure someone will be able to point you in the right direction.

Hope this helps,
Dan

The answers you get are only as good as the information you give!

 

[JKdesignz]

<div style="position: absolute; left: 0px; top: 0px; z-index: 0; background-color: #c0c0c0; width: 100px; height: 1000px;"></div>

I don't have this one linked to my css file, but as you can see the width still is 1000px :S:S

Thou shalt be victorious!!

 

[BillyRayPreachersSon]

but as you can see the width still is 1000px

I'm not sure how that can be, given that you've specified the width as 100px.

That aside, because the DIV is absolutely positioned, it is effectively removed from the document flow, which [for you] means the width will only ever be what you specify.

If you remove the "position:absolute" then the DIV will always be 100% of the width of its container.

Hope this helps,
Dan


The answers you get are only as good as the information you give!

 

[JKdesignz]

ah wait, that my vertical div :S:S:S, just exchange the values and you've got the one i need, but vertical i have the same problem so, any way i will try, thx

Thou shalt be victorious!!

 

[Vragabond]

I don't know what is bothering you. You specify width: 1000px and you get the width 1000px. Just as what you instructed it to do. Here's a few pointers:

1. Always work with a complete and valid doctype.
2. Avoid absolute positioning whenever possible. There is a time and place for absolute positioning but definitely not for the main containers of your page.
3. Start simple and check often. You have a div with a lot of things in the style declaration and I don't know if you know or wanted to have all of them. If your goal was to have a div expanding 100% of the window, all of them are arbitrary.

 

[ChrisHunt]

Have you tried [tt]width: 100%;[/tt]? I'm not sure how it will work for an absolutely positioned element though.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[JKdesignz]

ok, i removed the "position: absolute" now my browser is generates the div as a small block similar to a textblock :S:S.
With all due respect vragabond, I copied my doctype for xhtml 1.1 right from the deitel cd with was an extra to the book 'internet & the world wide web, how to program' 4th edition ( I think), however, there is no chapter herein which shows how to solve problems like this. And absolute positioning was working fine, until i needed to reorganise, this is my website as it is now (NOT DONE)

http://home.zonnet.nl/p.j.roeloffzen/jelle/welcome.html

<div style="left: 0px; top: 0px; background-color: #c0c0c0; width: 100px;"></div>

Thou shalt be victorious!!

 

[Vragabond]

I didn't mean to talk you down, I was just trying to give you some good advice how to code websites. I did not know whether you're using a doctype or not but I do have to recommend it as a first thing. I guess I could add "if you don't have it" at the end. However, you shouldn't have anything before the doctype. Unfortunately, IE gets confused if you have the <xml> declaration before it, so you'd better remove that. Also, you have some random characters which might confuse browsers.

Point two still stays. Absolute positioning should definitely not be used here. It might work fine, but it is best avoided. You could make good steaks on the hood of the car, but it might not be the best idea to do so.

Point three as well. Looking at the snippet you gave, left and top declarations play no role. Why not omit them then. It's good to know how things work and what makes them work and just specify what you want and not a bunch of arbitrary information.

 

[JKdesignz]

ok I see, but how to position the div in the top left corner? my div is now padded for about 15 px

<div style="z-index: -1; background-color: #c0c0c0; height: 100px;"></div>

Thou shalt be victorious!!

 

[BillyRayPreachersSon]

You'll probably need to add this to your style section:

body {
   padding: 0px;
   margin: 0px;
}

Hope this helps,
Dan


The answers you get are only as good as the information you give!

 

[Vragabond]

And I would still remove [tt]z-index[/tt] from that declaration. [tt]z-index[/tt] is used to stack positioned elements on top of each other, where z-index property tells you which element in stacked on top of which. Since you are not using more elements and your element is not even positioned (thus it will simply ignore z-index), you can safely remove it. As you see in Dan's answer, it is not all in configuring the element but also the page around it. Dan removed the default margin from the body and probably gained that gap you were talking about.

 

[JKdesignz]

ok, I tried and losing hope, this time I sended my full code and css along with this thread. My surrounding divs are at the bottom of the body. I can't seem to get them aligned, I made a class for the margin as Dan told me because every object which was absolute positioned got on the left of the screen. i just need a gray bar with a width of 100 px on the left with no limits when scrolling down, same on the left, and a bar on the top which is a 100 px in height.
css:

html 			{scrollbar-base-color:#333366; scrollbar-arrow-color: #CCCCFF; scrollbar-track-color: #999999; scrollbar-shadow-color: #000000; scrollbar-lightshadow-color: #000000; scrollbar-darkshadow-color: gray; scrollbar-highlight-color: #CCCCFF; scrollbar-3dlight-color: #000000}
body			{background-color: #333366; }
body.blok 		{margin: 0px; padding: 0px;}
#background2 		{center center no-repeat}
img			{border: none;}
span			{font-weight: bold; font-size: 14px;}
span.groot		{font-family: magneto; font-weight: bold; font-size: 20px;}
a			{text-decoration: underline; color: red; font-weight: bold;}
a.nodec 		{text-decoration: none}
a:hover 		{text-decoration: none; color: #CCCCFF; background-color: red}
#home			{z-index: 1; position: absolute; left: 0px; top: 150px; width: 200px; }
#profile		{z-index: 1; position: absolute; left: 0px; top: 210px; width: 200px; }
#portfolio		{z-index: 1; position: absolute; left: 0px; top: 270px; width: 200px; }
#pix			{z-index: 1; position: absolute; left: 0px; top: 330px; width: 200px; }
#music			{z-index: 1; position: absolute; left: 0px; top: 390px; width: 200px; }
#contact		{z-index: 1; position: absolute; left: 0px; top: 450px; width: 200px; }
#indicator		{z-index: 1; position: absolute; left: 160px; top: 105px;}
#me			{position: absolute; right: 100px; top: 150px; width: 196px; padding: 5px;
			height: 100px; border: #C0C0C0 3px solid; background-color: #CCCCFF; color: #333366;}
marquee			{font-family: magneto; font-size: 18px;}

and here's my xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"[URL unfurl="true"]http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">[/URL]

<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]

<head>
	<title>SilK0re's Hole of Destruction</title>
	<link rel="stylesheet" 
type="text/css" href="stijl.css" media="all" />
</head>

<body>
	<div id="home">
 		<a href="home.html"><img src="button_home2.gif" width="160px" alt="home" /></a>
 	</div>
 	<div id="profile">
 		<a href="profile.html"><img src="button_profile.gif" width="160px" alt="profile" /></a>
 	</div>
 	<div id="portfolio">
 		<a href="portfolio.html"><img src="button_portf.gif" width="160px" alt="portfolio" /></a>
 	</div>
 	<div id="pix">
 		<a href="pix.html"><img src="button_pix.gif" width="160px" alt="photos" /></a>
 	</div>
 	<div id="music">
 		<a href="music.html"><img src="button_music.gif" width="160px" alt="music" /></a>
 	</div>
 	<div id="contact">
 		<a href="contact.html"><img src="button_contact.gif" width="160px" alt="contact" /></a>
 	</div>
 	<div style="position: absolute; left: 219px; top: 150px; background-color: #CCCCFF; color: #333366; width: 365px; height: 284px; padding: 5px; color: black; text-align: center; overflow: auto; border:#C0C0C0 3px solid; font-family: trebuchet ms; font-size: 12px;
 	scrollbar-base-color: #333366; scrollbar-arrow-color: #CCCCFF;scrollbar-track-color: #999999; scrollbar-shadow-color: #000000; scrollbar-lightshadow-color: #000000; scrollbar-darkshadow-color: gray; scrollbar-highlight-color: #CCCCFF; scrollbar-3dlight-color: #000000">
 	*****text*****</div>
 	<div id="me">
 		<img src="me.gif" width="186px" alt="me"/>
 	</div>
 	<div class="blok" style="background-color: #c0c0c0; height: 100px; padding: 0px;"></div>
	<div class="blok" style="background-color: #c0c0c0; width: 100px; padding: 0px;"></div>
	<div style="background-color: #c0c0c0; width: 100px;"></div>
</body> 
</html>

Thou shalt be victorious!!

 

[JKdesignz]

i said left 2 times, think on one of them as right

Thou shalt be victorious!!

 

[BillyRayPreachersSon]

I made a class for the margin as Dan told me

I told you no such thing. I specifically said "add this to your style section":

body {
   padding: 0px;
   margin: 0px;
}

Which you have clearly changed into something completely different ("body" and "body.blok" are two very, very different things).

Dan


The answers you get are only as good as the information you give!

 

[ChrisHunt]

JKdesignz, you seem to be piling complexity on complexity in order to to achieve what should be a fairly simple layout. Vragabond gave some good advice on another thread - "Start simple, check often".

So, take a deep breath, what are you actually trying to do?. You want a title bar across the top and a sidebar down the left? Fine. Get those broad layout areas working first, then add some content to each, get that working, then add further chrome like scrollbar colours and such. If you try to do it all at once you won't know which bit to fix when it doesn't work.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[Vragabond]

I am backing out of here since the user showed no interest at all in implementing the solutions we provided. Looking at the page I see absolutely no need for absolute positioning, we advised the author to steer clear and nothing happened. It is not worth it. This design is a done deal I guess.

 

[johnwm]

Is it a bit naughty using the W3C XHTML logo without the link, and when your page doesn't validate?

________________________________________________________________
If you want to get the best response to a question, please check out FAQ222-2244 first

'If we're supposed to work in Hex, why have we only got A fingers?'

http://www.essexsteam.co.uk

for steam enthusiasts

 

[xmb]

Thou shalt be victorious!!

n/c

. Mac for productivity
.. Linux for developement
... Windows for solitaire

 

[JKdesignz]

ok the page was working, until i thought it needed some improvements, this is where it went wrong, I'm doing this in steps and that's why the absolute positioned elements are still there. I think it's time to start over and do exactly as told. thanks for your time anyways

Thou shalt be victorious!!