Giving your text an exact position is part of the coding of the layout.
The layout is completely built in divs (divisions), each div contains information such as images for the layout or the actual text.
These divs can be positioned best through a CSS (Cascading Style Sheet) file which can be used in any HTML document.
The advantage of this is that you only have to make 1 CSS file which you can use in all of the HTML documents.
Website help
Printable View
-
04-25-2010, 05:41 AMJudobreaker
-
04-25-2010, 06:02 AMApplejuice
Thank you.. This helped me understand a little more..
-
04-25-2010, 08:30 AMApplejuice
Okay, new question..
Since everybody has a differnet screen size the 'exact distance' will be wrong. Ex:
On my com its 400 pixels to the left, and 200 top, and at my bro's it looks way outta position.
HELP! -
04-25-2010, 11:00 AMJudobreaker
Yes, that would be the case if you give everything a hard position.
There are some tricks though.
I'm just assuming that you want to center your layout.
To do this you will have to place all of your content divs in a main div which you center with CSS.
And the CSS would be something like this:Code:<html>
<head>
<title>Example page</title>
</head>
<body>
<div id="main_div">
<div id="header">Header image</div>
<div id="content">Page content</div>
</div>
</body>
</html>
Code:#main_div {
position: relative;
margin: auto;
width: 800px;
height: 700px;
}
#header {
position: absolute;
top: 0px;
left: 0px;
width: 800px;
height: 100px;
}
#content{
position: absolute;
top: 100px;
left: 0px;
width: 800px;
height: 600px;
}
The above example would create a simple page with a box of 800x700 which is always centered horizontally in the page.
This example is not centered vertically.
It is possible to create vertically centered layouts but it is a pain in the butt to do so.
I'd rather suggest you make a layout which centers horizontally and uses the full vertical page, this is a lot easier to code. -
04-25-2010, 12:07 PMChris
You can also use margin: 0px auto on your container div to center it no matter what the width is.
I generally like to use a maximum container width (or the width of the largest overall element in the layout, usually the container, at about 960px. Depending on how you've set up your original layout, and if you've used a grid to align elements, 960 is a pretty even choice because nowadays the most common resolution is 1024x. 960 gives a pretty good amount of space without having to worry about wrapping.
The html would be something like:
<div id="container">
...
</div>
And the css for it would resemble:
#container {
width: 960px;
min-height: 600px; // this isn't necessary, but if you don't have any content, it won't expand
margin: 0px auto;
}
margin: 0px auto; is the same as margin-left: auto; margin-right: auto. The only constant is that you must specify a width for your div or it won't work. You also can't use any type of css hacks that would throw IE into quirks mode because in quirks mode, IE doesn't understand "auto".
In regards to your example @judo, I would really advise against using absolute positioning on static elements unless you're sure of your target audience. The problem with absolute position is that it totally ignores the user end resolution and the width of the actual browser window. Since this can inherently cause problems, relative positioning is usually the better way to go. Absolute positioning is useful for things that are guaranteed not to be affected by a smaller browser window, but I've never been fond of entire layouts that use this method. Divs are automatically positioned relatively either way.
And I just took a second look at your css judo, I didn't see the "#main_div", it looks like that would be left aligned, and the box would be moved to the center of that, but that seems like a pain to keep up with. If I were going to center a div inside another div, margin: 0px auto; would do the trick for both, assuming both had specified widths. -
04-25-2010, 12:45 PMJudobreaker
My code works, I tried it before posting. ^^
I'm centering the main div so everything inside that div is centered automatically.
You're right on the absolute positioning by the way, it can be very tricky business but in this example it would work rather well.
However, I'd suggest using relative positioning with floats (I always use this).
I didn't use it in the example because I would have to explain floats at the same time which would make the explanation a lot more complicated.
It's better to explain one thing at the time. ^^ -
04-25-2010, 12:52 PMChrisThis part isn't actually true though. Centering the div does not mean that everything inside the div is automatically centered as well. Left align is automatically given if no alignment is specified.Quote:
Originally Posted by Judobreaker
I'm not trying to be prick, hopefully I don't come off that way. There's just a lot of potholes to dealing with things like centering layouts and working with relative vs absolute positioning, which is easy in theory if you're well versed with the box model. Obviously though it can be tricky. I just want to make sure he's getting accurate information. :P -
04-25-2010, 12:57 PMApplejuice
I dont want to center the layout. I want to place some text precisely somewhere if someone misunderstood .. (or was that a different forum?)
-
04-25-2010, 12:58 PMJudobreakerAhh I see what you mean.Quote:
Originally Posted by Solaris
I wasn't trying to actually center everything inside the div too, I just want to center the whole thing within the layout.
You're very correct that inside the div everything is still aligned to the left. :P -
04-25-2010, 01:04 PMApplejuice
Bumped with new question(s)
