center with css [Archive] - CodingForums.com

zoobie

08-20-2003, 12:29 AM

I've positioned 3 things on my page with <div style="position:absolute; top:130px;left:30px">which is fine for 600 x 800 res...but when I look at it in a higher res like 1024 x 768, it falls completely apart...Now what?

bradyj

08-20-2003, 01:15 AM

I'm not really sure what you mean, I might need a visual:thumbsup:

Got a quick jpeg or something of how you want it spaced? I know how to center <div>'s with CSS and all that jazz... but I'm unsure here what your going for. I've been staring at this screen for too long ;)

zoobie

08-20-2003, 01:42 AM

So, how do you get it to display the same at any resolution? Thanks

Eskimo

08-20-2003, 07:23 AM

How about a link. Without a better description, I'm going to need a visual.

zoobie

08-20-2003, 10:49 AM

Well, if you look here, you'll see it's pretty obvious that it all needs to be on the top and centered with equal distance between all...I can't seem to get those buttons to come up, either. Thanks

Roy Sinclair

08-20-2003, 03:15 PM

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>TEST</title>
<style type="text/css">
div { border: solid red 1px; }
</style>
</head>
<body bgcolor="#000000" style="margin:0;padding:0;overflow:auto">
<form action="preview.php" method="post">
<div style="float:left">
<select size="5" name="img">
<option>Select 1</option>
<option>Select 2</option>
<option>Select 3</option>
<option>Select 4</option>
<option>Select 5</option>
</select>
</div>
<div style="text-align:center;float:right;vertical-align:top">
<input type="submit" value="Next"><br>
<input type="reset" value="Reset">
</div>
<div style="text-align:center;">
<textarea name="comments" rows="17" cols="63" onFocus="this.value='';"></textarea>
</div>
</form>
</body>
</html>

You'll note I added a style to give each div tag a border, it helps a lot when you're trying to place things and need to see where the true borders of the items are and can be removed for production once everything is all set. Try adding that style to your original page to see how the divs originally lined up.

Eskimo

08-20-2003, 03:15 PM

Like this? (http://www.eskimo151.com/zoobie.asp)

Your floats need to be set above your text area, and there is no such thing as float: center, use text-align:center.

I'll be out all day on a job site, don't be offended if I fail to reply real 'post haste'.

[EDIT]
Beat me by second Roy! :thumbsup:

Roy Sinclair

08-20-2003, 03:35 PM

Beat me by second Roy!

Only by a second (or less), when I posted my reply and started backing out to the list of new posts, your post was already there.

zoobie

08-20-2003, 08:24 PM

Thanks guys...Now, when I try to format the text inside the textarea with text-indent:25px, not only does it indent the text...but pushes the whole textarea over 25px, too. Fix?

Any particular reason the code for the textarea was put last instead of semi-inline like I had it?

Thanks

brothercake

08-20-2003, 08:28 PM

Try padding-left instead of text-indent.

btw - if a container has its width in px or em you can center it like this:

#foo {
width:36em;
position:absolute;
left:50%;
margin-left:-18em;
}

Works for vertical-centering as well :)

IdentityCrisis

08-20-2003, 08:32 PM

When using any of the padding-[LEFT|RIGHT|TOP|BOTTOM] propeties, you should also (always) set the other ones just to make sure that everything looks exactly the same on all browsers... for example...

padding-left: 25px; padding-right: 0px; padding-top: 0px; padding-bottom: 0x;

brothercake

08-20-2003, 08:35 PM

Originally posted by IdentityCrisis
you should also (always) set the other ones just to make sure that everything looks exactly the same on all browsers...
Nothing ever looks exactly the same in all browsers, and it doesn't have to - equivalency and equality are not the same thing :)

I do take your point about not trusting browser defaults to be consistent, but it should only really be necessary on elements with default amounts of that property .. like <ul> margins .. and afaik there aren't any elements with default padding.

Or have you encountered a particular situation where this was a gotcha?

btw - there's shortcut syntax for multiple values, eg:

padding:0 1em 0 1em;

which is top / right / bottom / left, or

padding:0 1em;

which is top & bottom / left & right

IdentityCrisis

08-20-2003, 08:48 PM

oh yeah... I forgot the shortcut... anyways ... it's always "good form old chum" to set all padding levels, not just left... that was my point :D

Also.. what's "em"... I've never heard of that measurement before...

MotherNatrsSon

08-20-2003, 08:56 PM

Originally posted by IdentityCrisis
oh yeah... I forgot the shortcut... anyways ... it's always "good form old chum" to set all padding levels, not just left... that was my point :D

Also.. what's "em"... I've never heard of that measurement before...

http://www.w3schools.com/css/css_units.asp

MNS

zoobie

08-20-2003, 08:59 PM

Thanks all.
I'm already using the padding...Problem is, it doesn't indent the first line rather all of them. I can format with php...but since there's no preview on this thing, I guess it can't be done with html. Boo

PS - I think em was the first unit of font measurement used

Roy Sinclair

08-20-2003, 09:06 PM

Originally posted by zoobie
Thanks guys...Now, when I try to format the text inside the textarea with text-indent:25px, not only does it indent the text...but pushes the whole textarea over 25px, too. Fix?

Any particular reason the code for the textarea was put last instead of semi-inline like I had it?

Thanks

Yep, the way you originally had it your div on the left was first and since it was declared to float it's default width was truncated to the size of it's content. With your div with the textarea declared next it "flowed" around the already placed div but with a default width of 100% it used all the rest of the space to the right hand side. Then your third div with the buttons comes along and since it's floated to the right it looks for the first space available on the right hand side, since your second div filled the whole width of the screen the first space available was under that div. That's why the order was changed, by placing it ahead of the div with the textarea it's got it's page position before the other div.

bradyj

08-20-2003, 09:23 PM

Originally posted by zoobie
PS - I think em was the first unit of font measurement used

Was it for the web? For print, it was points (or rather inches in the way back in the day) -- back when printing books was done by punching big chunks of metal letters, points were adopted to make a form of universal measurement; for the types of letters they were making out of metal, depending on the type of font they were creating. That may be off topic, but I was wondering if the em was the first measurement for web fonts, that would be interesting.

zoobie

08-20-2003, 09:49 PM

The ol' hidden ball trick, eh? Jeez...nothing like a few chapters missing from a book...Ok...Thanks all....Glad I didn't spend any time I don't have on this...

bradyj

08-20-2003, 11:16 PM

Originally posted by zoobie
The ol' hidden ball trick, eh? Jeez...nothing like a few chapters missing from a book...Ok...Thanks all....Glad I didn't spend any time I don't have on this...

Thank you for the answer -- it was both useful and fulfilling:thumbsup:

Ben@WEBProp

08-20-2003, 11:58 PM

Ok, I have a question along the same line. First look here (http://www.di.fm) and you will see the design that I am trying to figure out. I see that he has put the entire thing into 2 tables (ewww....tables). I got that to work just fine. However, now that I am trying to turn the thing into a div-happyland, it is not going so well. I cant seem to get my container div to stay centered on the page...what is the deal? Not even text-align: center works right...

Basically, I want the css to end up looking somewhat like this page (http://www.csszengarden.com/?cssfile=/039/039.css&page=0). Notice the centered main div that acts as a container for the rest of the info. How do you get it to stay centered like that?

All help is greatly appreciated.

Thanks!

-Ben

brothercake

08-21-2003, 12:00 AM

Originally posted by zoobie
I'm already using the padding...Problem is, it doesn't indent the first line rather all of them.
What about first-letter or first-line; one of them might work

textarea:first-letter { padding-left:2em; }

or

textarea:first-line { padding-left:2em; }

Ben@WEBProp - yours is a separate question; please start a new thread.

zoobie

08-21-2003, 01:40 AM

First-line didn't work but first-letter did. Thanks...Is that a stand-alone style? It looks strange...

brothercake

08-21-2003, 10:12 PM

Originally posted by zoobie
First-line didn't work but first-letter did. Thanks...Is that a stand-alone style? It looks strange...
I don't know what you mean by "stand-alone style"; http://www.w3schools.com/css/css_pseudo_elements.asp has info on these