...

View Full Version : Help With A Stretch Page...



WrestlingAnswer
08-22-2005, 09:29 PM
Here's What My Site Looks Like Not Stretched:

http://www.wrestlinganswers.com/main/index2.html

Here's What My Site Looks Like Stretched:

http://www.wrestlinganswers.com/main/index3.html

Here's What I Want My Site To Look Like Stretched:

http://www.wrestlinganswers.com/main/example.jpg

This Is My First 'Non-Amateurish' Site That I Have Actually Coded Entirely Myself, I Was Wondering If Anyone Had Any Ideas/Tutorials On How I Could Fix This Problem?

jscheuer1
08-23-2005, 05:48 AM
They all look the same to me.

bazz
08-23-2005, 11:01 AM
Hmmm,

I don't know what you mean by stretched. Do you mean that if the window is narrowed, that your site will narrow as well (ie, your site is fliud)?

Bazz

WrestlingAnswer
08-23-2005, 08:05 PM
Yeah, Fluid Is What I Mean. I Couldn't Think Of The Right Word.

WrestlingAnswer
08-24-2005, 06:44 AM
Anyone?

bazz
08-24-2005, 01:47 PM
well, your examples don't help me much with undertsanding your difficulty because as said by jscheuer1, "they all look the same to me". OK the third is different (thinner), but I don't fully understand how they describe this 'problem'.

It looks like you have this page built within a table :rolleyes:, which if so, is why it has the whitespace on each side. If you use the window as the container, then use floating 'divs' you'll begin to see how to design a fluid, or more fluid, site. As the resolution becomes changed by the user, the floating divs can always position themselves relative to the sides of the window.

nothing against tables but, leave them out of normal web design and you'll gradually find coding easier. That's my experience anyway, and I'm nothing like expert as other guys here.


Bazz

WrestlingAnswer
08-24-2005, 04:37 PM
Okay Thanks, Someone Else Told Me To Try Tables And It Didnt Seem To Work, I Will Research Some Fluid Tuts. :)

bazz
08-24-2005, 04:55 PM
don;t forget to make sure you have a DOCTYPE at the top of your html file. Then the browser will know what way you want it to present the page, rather then it thinking it knows what you want it to do. see the sticky at the top of this forum.

Also your fluid divs could layout like...

<body>

<div id="first">stuff here</div>
<div id="second">stuff here</div>
<div id="third">stuff here</div>

</body>

Then tell the div how to behave with CSS like

#first {
float : left;
width : 25%;
background-color: #aaaaaa; /* the darker grey one */
}

#second {
float : right;
background-color: #cccccc; /* the lighter grey one*/
width : 25%;
}

#third {
margin : auto auto;
width : 40%;
background-color: #ffff80; /*the other colour */
}

That should give you three boxes of differing shapes in your page of two shades of grey and one of (I think), red.
not tested but I think it should give you the idea of how to CSS and of the simplicity of the html structure when used with CSS

Bazz



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum