Center aligned website

snowbrdlover · August 16, 2010

Hello again guys and girls,

Finnaly with ur advice i managed the content of my page to be wrapped as i increase or decrease the browser window.

But now i have another problem. I want my website to be also centered in browser window, i tried to do it by here: http://www.csstutorial.net/2010/02/how-to-create-a-center-aligned-page-with-css/ but with no sucess can u pls give me a clue?

Here is Html and css:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<title>Emmanouil main</title>

</head>

<body>

<h1>mmanouil</h1>

<tr>

<td width="109">Products</td>

<td width="105">About us</td>

<td width="81">Contact</td>

</tr>

</table>

</div>

</body>

</html>

@charset "UTF-8";

/*Sets the background image and color*/

body{ background-image:url(bgfinal2.jpg); background-repeat:no-repeat;

}

/*Resizing the website in each screen resolution*/

#wrapper { width: 550px; margin:0 auto; position:relative;

}

/*Main logo*/

h1{

position:absolute;

top:35px;

left:56px;

font:Arial;

font-size:35px;

color:#FFF;

}

/*TABLE*/

table {

-moz-border-radius: 1em 4em 1em 4em;

border-radius: 1em 3em 1em 3em;

color:#FFF;

position:absolute;

top:100px;

-moz-border-radius: 5em 5em 2em 2em;

border-radius: 5em 5em 2em 2em;

background-color:#222;

height: 33px;

}

/*Thimble*/

#img1{position:absolute; top:28px; left:78;}

Andrea · August 16, 2010

/*Resizing the website in each screen resolution*/

#wrapper { width: 550px; margin:0 auto; position:relative;}

}

550px is pretty narrow. Most people view with over 1000 px width now.

snowbrdlover · August 16, 2010

Thank u for ur fast reply Andrea!

I tried it but it doesnt work i can still see the white gap on the right of my browser.... should i put in css some info for the div "content"?

newseed · August 16, 2010

If this all the css styles you have then you might be experiencing the body default margins. Set the body to have margin: 0;

snowbrdlover · August 16, 2010

Thanx for help,

I did that but it didnt worked...

newseed · August 16, 2010

/*Sets the background image and color*/
body{ background-image:url(bgfinal2.jpg); background-repeat:no-repeat;

}

How big is that background image? You either need to make it repeat or apply a background color that is not white.

snowbrdlover · August 16, 2010

I add a background image and still nothing... Here is the code as it is now:

HTML & CSS

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<title>Emmanouil main</title>

</head>

<body>

<h1>mmanouil</h1>

<tr>

<td width="109">Products</td>

<td width="105">About us</td>

<td width="81">Contact</td>

</tr>

</table>

</div>

</body>

</html>

@charset "UTF-8";

/*Sets the background image and color*/

body{ background-image:url(bgfinal2.jpg); background-repeat:no-repeat; background-color:#000;

}

/*Resizing the website in each screen resolution*/

#wrapper { width: 800px; margin:0 auto; position:relative;

}

/*Main logo*/

h1{

position:absolute;

top:35px;

left:56px;

font:Arial;

font-size:35px;

color:#FFF;

}

/*TABLE*/

table {

-moz-border-radius: 1em 4em 1em 4em;

border-radius: 1em 3em 1em 3em;

color:#FFF;

position:absolute;

top:100px;

-moz-border-radius: 5em 5em 2em 2em;

border-radius: 5em 5em 2em 2em;

background-color:#222;

height: 33px;

}

/*Thimble*/

#img1{position:absolute; top:28px; left:78;}

snowbrdlover · August 16, 2010

And i forgot to say that the BG image size is 1024x680

Thanx

newseed · August 16, 2010

Base on your code I am not seeing any issues. Can you upload this somewhere and give us a url so we can check it live?

snowbrdlover · August 16, 2010

Sorry i cant atm cause i am away from my Server and my ftp is not connected to main HDD...

Do think that i must add in css info about the "content" division?

newseed · August 16, 2010

You can if you want but that div is contained by the wrapper div and so I don't see that would be the cause.

snowbrdlover · August 16, 2010

Nope it didnt worked... omg whats wrong ;P

newseed · August 16, 2010

Get the files uploaded the first chance you get and then give us the url. Otherwise we would only be guessing.

If you prefer, zip your html and css files along with any related images and upload it here. Also, supply a screen capture of your issue.

snowbrdlover · August 16, 2010

Thank you very much m8!

How can i upload the zip? cause i cant find it...

falkencreative · August 16, 2010

If you click the "add reply" button in the top/bottom right of this topic, there is a section just under the textarea that you enter your comments in called "Attachments" that should let you upload the zip file.

snowbrdlover · August 16, 2010

Hello,

There is not such area.. do i have to enable it from my profile settings?

Thank you,

falkencreative · August 16, 2010

This is what the page should look like... Note the "Attachments" section below the post textarea. This should be available to you... I know other new members have been able to upload things successfully.

snowbrdlover · August 16, 2010

Hehe i dont have this area for attachments under my text box :blink:

falkencreative · August 16, 2010

I've adjusted the permissions -- can you try again? It looks like new members weren't allowed to upload files to the Beginner's Web Design section, but that's been fixed.

snowbrdlover · August 16, 2010

Thank you very much!! :rolleyes:

Here is the zip file with my website to check whats the problem.

Best regards,

Steve

TEST.zip

falkencreative · August 16, 2010

There isn't anything wrong with the centering of the website. That is working fine.

However, one thing to note -- the website's wrapper is 700px wide, whereas the table you are using for your navigation is only 496px wide. This makes it appear like the content isn't actually in the center of the page, but slightly to the left. If you add "border:1px solid red" to #wrapper in your CSS, you'll see what I mean. Either you need to make the table wider to fill the 700px, or you'll need to make the #wrapper less than 700px.

One other thing... To use a black background, you need to change "background-color:#00000;"(5 "0"s) in your CSS to "background-color:#000000;" (6 "0"s). HEX codes that are used to specify colors usually use 6 characters, not five. Also, keep in mind that your background image isn't very big -- if you intend to use a background image, you probably should use a larger image.

snowbrdlover · August 16, 2010

Thank you very much for ur help and ur fast reply! I will make the appropriate changes u told me and i'll come back with the results!

Regards,

Steve

snowbrdlover · August 16, 2010

I am back again ;P

I totally understand what u've told me with the wrapper! And also the red color helps me adjust my web page But the background image is not centered like the rest of the site....Is always on the left.. Also i made the BG image 1024x768

newseed · August 16, 2010

You can center the background using background-position: center;

falkencreative · August 16, 2010

then change the CSS code that you are using to add the background image. You have this at the moment:

body{ background-image:url(bgfinal2.jpg); background-repeat:no-repeat; background-color:#000; }

You could shorten it to this:

body { background: #000000 url(bgfinal2.jpg) top center no-repeat; }

the "background" property combines the background-image, background-repeat, background-color and background-position properties into one shorter property. The "top center" section indicates where you want it to be placed.

snowbrdlover · August 16, 2010

I really appreciate all ur help u gave me!!! And sorry for asking so many questions ;P This is a great site that a begginer and not only that can take help I will suggest ur site to all of my friends that are interested with web design!!

Best regards,

Steve

Sign In

Center aligned website

Recommended Posts

snowbrdlover

Andrea

snowbrdlover

newseed

snowbrdlover

newseed

snowbrdlover

snowbrdlover

newseed

snowbrdlover

newseed

snowbrdlover

newseed

snowbrdlover

falkencreative

snowbrdlover

falkencreative

snowbrdlover

falkencreative

snowbrdlover

falkencreative

snowbrdlover

snowbrdlover

newseed

falkencreative

snowbrdlover

Join the conversation

Browse

Activity

Store

Support