16 replies [Last post]
saybrah
Offline
Regular
Last seen: 14 years 37 weeks ago
Joined: 2005-03-16
Posts: 19
Points: 0

http://searchengineprofit.com/eyesol/

cant figure out how to center it on stage

i tried this in the css but nothin happens Sad

body {
margin:50px 0px; padding:0px;
text-align:center;
}

#Content {
width:750px;
margin:0px auto;
text-align:left;
padding:15px;
}

Anonymous
Anonymous's picture
Guru

Need centering help

You are positioning everything absolutely which removes it from the document flow. It shows up exactly where you placed it.

You need to understand position:absolute before you use it. If you did understand it you wouldn't be using it in this case. Smile

Nice design, just a bad implementation.

Oh, and how about a doctype? That would be peachy.

All that being said you can get it to center by doing this:

	
#Content {
	position:relative;
	width:750px;
	margin:0px auto;
	text-align:left;
	padding:15px;
		}

saybrah
Offline
Regular
Last seen: 14 years 37 weeks ago
Joined: 2005-03-16
Posts: 19
Points: 0

Need centering help

thanks, yah i exported css in fireworx to dreamweaver so thats all it gave me

Anonymous
Anonymous's picture
Guru

Need centering help

saybrah wrote:
thanks, yah i exported css in fireworx to dreamweaver so thats all it gave me
Oh. We take web design seriously here. Perhaps you didn't know.

saybrah
Offline
Regular
Last seen: 14 years 37 weeks ago
Joined: 2005-03-16
Posts: 19
Points: 0

Need centering help

lol i can tell this has to be the most popular forum on the net with 10k members congrats. oh i have a problem it centered well but i need it directly at the top also and what do i do about the document type

Anonymous
Anonymous's picture
Guru

Need centering help

saybrah wrote:
oh i have a problem it centered well but i need it directly at the top also
Then don't place it any lower.

saybrah wrote:
and what do i do about the document type
Add one.

saybrah wrote:
lol i can tell this has to be the most popular forum on the net with 10k members congrats.

From the index page: We have 40806 registered users Laughing out loud

saybrah
Offline
Regular
Last seen: 14 years 37 weeks ago
Joined: 2005-03-16
Posts: 19
Points: 0

Need centering help

lol i didnt do that do i add like top margin 0 or something

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 47 weeks 1 day ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Need centering help

saybrah wrote:
… oh i have a problem it centered well but i need it directly at the top also and what do i do about the document type

You have 50px of top margin on body that shifts everything down.
body {
    margin:50px 0px; 
    padding:0px;
    text-align:center;
    }
instead, do
html, body {
    margin: 0;
    padding: 0;
    }

On new documents, always code against a strict DTD. Read the article and use the complete html4.01 DTD at A List Apart.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

And, never ever put major style rules inline with the html. That will get you in trouble one day.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Anonymous
Anonymous's picture
Guru

Need centering help

Here's a present for you: . , ! ? : ;

Let me know if you need any other punctuation. Laughing out loud

I don't know that I feel right about helping you make a web page you are not going to be making correctly. In fact, this may be against my better judgment but ...

... you placed the body 50px from the top. What did you expect that to do?

I like your design, it's just that the code is really awful. In fact one text size increase renders half of the "Our company" section hidden from view.

saybrah
Offline
Regular
Last seen: 14 years 37 weeks ago
Joined: 2005-03-16
Posts: 19
Points: 0

Need centering help

awww come on man all i did was paste the code cant a noob get a break

saybrah
Offline
Regular
Last seen: 14 years 37 weeks ago
Joined: 2005-03-16
Posts: 19
Points: 0

Need centering help

kk5st wrote:

And, never ever put major style rules inline with the html. That will get you in trouble one day.

cheers,

gary

i dont undestand that?

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 15 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Need centering help

Gary means don't put your CSS styles in your HTML because you're quite likely to forget them and spend hours tinkering with your CSS file trying to fix a problem when you were looking in the wrong place all the time (just had a thread today where that happened to someone else).

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Anonymous
Anonymous's picture
Guru

Need centering help

saybrah wrote:
awww come on man all i did was paste the code cant a noob get a break
Trust me, you'll thank me in the long run. Smile

saybrah
Offline
Regular
Last seen: 14 years 37 weeks ago
Joined: 2005-03-16
Posts: 19
Points: 0

Need centering help

Tyssen wrote:
Gary means don't put your CSS styles in your HTML because you're quite likely to forget them and spend hours tinkering with your CSS file trying to fix a problem when you were looking in the wrong place all the time (just had a thread today where that happened to someone else).

example please.. i really dont know about css only that its better than tables sometimes

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 15 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Need centering help

It means, rather than doing this:

<div id="eyesitesobanpng-fwr4c1" style="position:absolute; left:0px; top:329px;width:359px; height:185px;z-index:7; visibility:visible"> take all that style information and put it in your CSS file <link type="text/css" rel="stylesheet" href="eyesol.css"> like this:

#eyesitesobanpng-fwr4c1 { position:absolute; 
left:0px; 
top:329px;
width:359px; 
height:185px;
z-index:7; 
visibility:visible;
}

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

mike lane
mike lane's picture
Offline
Regular
Tacoma, WA
Last seen: 16 years 7 weeks ago
Tacoma, WA
Timezone: GMT-8
Joined: 2005-12-06
Posts: 50
Points: 0

Need centering help

saybrah wrote:
Tyssen wrote:
Gary means don't put your CSS styles in your HTML because you're quite likely to forget them and spend hours tinkering with your CSS file trying to fix a problem when you were looking in the wrong place all the time (just had a thread today where that happened to someone else).

example please.. i really dont know about css only that its better than tables sometimes

Hey first post here.

Think of a web page this way. You have the html as your content and you have the CSS as your design. So saying that CSS is better than tables doesn't make much sense because CSS and tables are two completely different things. Now laying out a page with semantic xhtml that is styled by CSS is always better than using tables for layouts. That said, tables are excellent at what they are designed for, organizing and presenting tabular data (although CSS is important there too).

But that strays from the point which I think was don't use inline CSS without a very good reason. That means that something like this should be avoided if at all possible.

<div style="border:1px solid red">Some text</div>

The style="border:1px solid red" is inline CSS. It is CSS that is right in there with the content. It cannot be overridden and you have to actually go in to your content to change it. But if you had this:

<div class="content">Some text</div>

you can now separate out your content (the above) with the style by putting the following in an external CSS file.

.content {border:1px solid red;}

(Of course one may want to be much more judicious about the use of classes, but this is just an example.) So think of your xhtml file as a document where only the content and containers for that content reside and think of your CSS file as a document where only your styles (which includes your layout, colors, decorative images, etc) reside. You can also take this one step more and consider javascript to be the page's behavior (but that may be for another forum - I'm not sure, I'm new Wink)

Okay, that was a long winded answer but hopeuflly you get the point.

Now about centering things that are positioned absolutely. You can in fact do this but the catch is that you must know the width of your element. To center an element that is 200px wide horizontally (in its containing element), simply use position:absolute; and left:50%; and margin-left:-100px;. To center an element vertically (again in its containing element) do the same thing except change the margin-left: to margin-top:. Hopefully that made sense.

http//photos.mikelanestudios.com/
http//blog.mikelanestudios.com/

saybrah
Offline
Regular
Last seen: 14 years 37 weeks ago
Joined: 2005-03-16
Posts: 19
Points: 0

Need centering help

ah ok i got you. i did that before when i first experimented with css. i have an issue with that text in the side box. if it get a +2 bigger i get a gap between the graphics on the left.