Jump to content

Center aligned website


snowbrdlover

Recommended Posts

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>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Emmanouil main</title>

<link href="emmanouil.css" rel="stylesheet" type="text/css">

 

</head>

 

<body>

 

 

<div id="wrapper">

 

<h1>mmanouil</h1>

 

 

 

<table width="469" height="43" border="0">

<tr>

<td width="80"> Home</td>

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

<td width="72">News</td>

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

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

</tr>

</table>

 

 

 

 

 

 

 

<img src="thimbleletterArial.png" alt="Logo Thimble" name="img1" width="63" height="73" id="img1" />

 

</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;}

Link to comment
Share on other sites

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>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Emmanouil main</title>

<link href="emmanouil.css" rel="stylesheet" type="text/css">

 

</head>

 

<body>

 

 

<div id="wrapper">

<div id ="content">

 

<h1>mmanouil</h1>

 

 

 

<table width="469" height="43" border="0">

<tr>

<td width="80"> Home</td>

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

<td width="72">News</td>

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

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

</tr>

</table>

 

 

<img src="thimbleletterArial.png" alt="Logo Thimble" name="img1" width="63" height="73" id="img1" />

</div>

</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;}

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...