Hello.
My question, is how to make a web page that, when you shrink it, wont just bundle all of the images or materials.
Mainly, if you shrink the page, how can you make sure everything stays where it is, while the “window” for your browser shrinks?
I am currently having problems doing this using any type of positioning with CSS.
Thank you
The trick is not to use positioning (e.g. position: absolute). You can stop things bunching up in a number of ways, Indeed, elements naturally flow around each other and don’t bunch up until you start applying CSS (usually wrongly).
But to be more specific, it would help to see what you are actually working on. Do you have a link or some sample code?
/*
CSS for A
*/
body {
margin: 0;
font-family: Verdana, Helvetica, Arial, sans-serif;
background-color: #e2edff;
line-height: 125%; }
#tagline {
background-color: #e2edff;
text-align: center;
border-bottom: 4px solid black; }
#header {
font-size: 130%;
font-weight: bold; }
#navigation {
position: absolute;
top: 7em;
left: 0;
height: 12em;
width: 10em;
background-color: #e2edee;
border: 4px solid black; }
#bodycontent {
position: absolute;
left: 11em;
top: 9.5em;
width: 50em;}
Yes, position: absolute is not the right technique for page layout, as it’s terribly inflexible. We’d also need to see the HTML to understand your page. Or, if you prefer, you could post a screen shot of your desired layout, and we could knock up a basic template to show a better way of going about this. 
As Ralph briefly mentioned, it’s not really suitable for layouts.
Reasons being:
- The big cheese, other elements can’t interact with it. Clashing can occur/overlap
- It really tries for a pixel perfect design, which will never be perfect cross browser
- It’s just a crappy way of doing it. There are more than 1 ways to do something in CSS, but only one RIGHT way
- More headaches really :).
Here is the code:
<!DOCTYPE html>
<html lang=“en”>
<head>
<title>Vale - Home</title>
<meta charset=“utf-8”/>
<link href=“style1.css” rel=“stylesheet” type=“text/css”/>
</head>
<body>
<div id = “tagline”>
<div id = “header”>
<h1>Value</h1>
</div> <!-- end of header –>
<p>Value</p>
</div> <!-- end of tagline –>
<div id=“navigation”>
<ul>
<li><a href = “background.html”> Background </a></li>
<li><a href = “contact.html”> Contact </a></li>
<li><a href = “experience.html”> Experience </a></li>
<li><a href = “education.html”> Education </a></li>
<li><a href = “interest.html”> Interest </a></li>
<li><a href = “main.html”> Home </a></li>
</ul>
</div> <!-- end of navigation –>
<div id=“bodycontent”>
<h2>Welcome!</h2>
<p>Thanks for helping me out, ralph.m and ryan! <a href="value@value.com">value</a>. </p>
<p><img src=“main.jpg” alt=“Value”/><p>
</div> <!-- end of bodycontent –>
</body>
</html>
However, I just need to know, what then, I should use instead of absolute positioning?
What other methods are there that work better?
Floating instead :). Check out this example below. I use floating to position the elements.
I only am posting the CSS because that’s all I changed about it. The only thing different from your original example, is text placement. Margins/paddings can move it now where you want it to go. Play with it :).
FLoats have a good bit of bugs with it (well, for IE6/7 anyway) but IE6 is basically dead and IE7 is on its’ way out the door. If you have any questions feel free to ask :).
#navigation {float:left;
height: 12em;
width: 10em;
background-color: #e2edee;
border: 4px solid black; }
#bodycontent {
float:left;
width: 50em;}
Thank you!
And, since I have your attention, I have a quick question.
My header/tagline do the same thing.
How can I position the text, in the center of the page, without the resize problem?
Again, much thanks.
To get text in the center, all you need to do is add text-align:center :). That way, with resize, it will automatically adjust to keep in the center.
But if I wanted it to stay where it was? Just have it in the middle while it is “full screen” sort of speak.
Oh, well you could set a width, such as 500px, and then margin:0 auto; to center :).
Thank you Ryan.
This has been very helpful.
Do you mean that you don’t want the edges of the layout to touch the side of the browser, but rather that you want things centered in the middle of the screen?
I would want the text centered, but only when the page was full. So, if someone made the window smaller, the centered text wouldn’t continue being centered.
Apologies if this sounds confusing.
I guess I could try illustrating it:
Full page : XXXX-centered text-XXXX
If they mad the window shorter from the right side in: XXX-cent
Hope that helps
In that case, I’d just set a left margin, that way the right side still has space, however, if the screen gets lower resolution, then the right side will go away. However, that seems strange to do, and won’t appear centered in most resolutions…
However if you have xxxxCONTENTxxxx, and you want it to be like…xxCONTENTxx, then use the auto margin.
O, I see what you mean. If that’s what you want, I’d say it’s best not to have any margin on the left. Otherwise, on some very small screens, people will see nothing but the blank space on the left, and think there’s nothing on your site at all.
Many sites choose to have their layout stuck to the left side, which is perfectly fine. A List Apart is an example that springs to mind.
Thank you ralph.
So, another question(sorry).
I am trying to have two div’s, each of them at the top of the page, one of the left, one of the right.
<!DOCTYPE HTML>
<html lang = "en">
</head>
<meta charset = "utf-8"/>
<link href = "style1.css" rel = "stylesheet" type = "text/css"/>
<title>Test</title>
</head>
</body>
<div id = "tagline">
<div id = "header">
<h1 class = "tagline">Test</h1>
<p class = "tagshort">Test!</p>
</div>
<div id = "login">
<h1>Login</h1>
<p id = "hr">User Name - XXXXXXX</p>
<p>Password - XXXXXXX</p>
<p><a href = "register.html">Want to Register?</a></p>
</div>
</div>
</body>
</html>
What would I need to do in order to have both of these at the top? Illustration: ValueXXXXXXXXXXXXXValue.
Well do this
#tagline{overflow:hidden;/*contain the floated children*/}
#header{float:left;width:300px;/*random value*/}
#login{float:right;width:300px;/*random value*/}
Floating! :D. Untested. Too lazy to check, but there’s no reason that shouldn’t work.
Awesome.
Didn’t know about overflow. Thanks again man, your more of a help than you could imagine.