Jump to content
Uncle Stef's Forums are now in the Clubs - July 2025.

Web page align problem

snowbrdlover

By snowbrdlover
in Beginners Web Design

 Share

Recommended Posts

snowbrdlover Newbie

snowbrdlover

Posted
Posted

Hello all,

 

I want to ask a question concerning my website alignment when i resize the browser window.

 

I use APdivs with absolute position and i dont know how to fix the issue...i found many codes for wrapping but doesnt work.

I want my web page to be centered in browser window when i shrink it or in bigger screen resolutions.

 

Thank you,

Steve

falkencreative Newbie

falkencreative

Posted
Posted

You may be able to do this by wrapping the entire site within a div. For example:

 

<div id="wrapper">

... your site here...

</div>

 

and then adding a bit of CSS:

 

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

 

You can obviously choose whatever width works for you, and the margin: 0 auto will center the div in the browser window.

The position relative should force your absolutely positioned elements to stay within the wrapper div. I can't really give you specific instructions unless you post a link to the site you are talking about, or the HTML/CSS code.

snowbrdlover Newbie

snowbrdlover

Posted
  • Author
Posted

First off all thank you very much for your fast reply and concern :)

 

I will link a short piece of code of a new webpage i am trying 2 make, also i forgot to ask if it good also the background image to be resized

 

HTML:

<!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>

<h1>mmanouil</h1>

<table border="0">

<tr>

<td width="122"><h2> Home</h2></td>

<td width="142"><h3>Products</h3></td>

<td width="114"><h4>News</h4></td>

<td width="130"><h5>About us</h5></td>

<td width="65"><h6>Contact</h6></td>

</tr>

</table>

</body>

</html>

 

CSS:

 

@charset "UTF-8";

 

 

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

 

}

 

 

 

/*Main logo*/

h1{

position:absolute;

top:55px;

left:424px;

right:450;

text-align:center;

font:"Arial Black";

font-size:35px;

color:#FFF;

width: 194px;

height: 44px;

}

 

h2{font-size:18px; color:#FFF; position:center;}

h3{font-size:18px; color:#FFF; position:center;}

h4{font-size:18px; color:#FFF; position:center;}

h5{font-size:18px; color:#FFF; position:center;}

h6{font-size:18px; color:#FFF; position:center;}

 

 

table{

position:absolute;

left:354px;

top:115px;

width: 606px;

height: 38px;

border-radius: 10px;

background-color: #000;

}

 

Thanx in advance!

falkencreative Newbie

falkencreative

Posted
Posted

I would start with the code I posted above.

 

Keep in mind that after you do that, you may need to adjust the absolutely positioned elements. For example, you probably could remove the position/left/top from table{} in your CSS.

falkencreative Newbie

falkencreative

Posted
Posted

It does work if you adjust the width of the wrapper, and reset the positioning of the h1 and the table to use top:0 and left:0;

 

Here's an example (the CSS has been moved inside the file, but it belongs in an external file):

 

<!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>


<style type="text/css">

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

}

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

/*Main logo*/
h1{
position:absolute;
top:0;
left:0;
text-align:center;
font:"Arial Black";
font-size:35px;
color:#FFF;
width: 194px;
height: 44px;
}

h2{font-size:18px; color:#FFF; position:center;}
h3{font-size:18px; color:#FFF; position:center;}
h4{font-size:18px; color:#FFF; position:center;}
h5{font-size:18px; color:#FFF; position:center;}
h6{font-size:18px; color:#FFF; position:center;}


table{
position:absolute;
left:0;
top:100px;
width: 606px;
height: 38px;
border-radius: 10px;
background-color: #000;
}

</style>
</head>

<body>
<div id="wrapper">
<h1>mmanouil</h1>
<table border="0">
<tr>
<td width="122"><h2> Home</h2></td>
<td width="142"><h3>Products</h3></td>
<td width="114"><h4>News</h4></td>
<td width="130"><h5>About us</h5></td>
<td width="65"><h6>Contact</h6></td>
</tr>
</table>
</div>
</body>
</html>

 

You'll have to adjust the positioning of the elements to the correct locations.

 

All that being said, I really wouldn't suggest that you try to build a website entirely with absolute positioning. For an occasional element, using absolute positioning may make sense, but not the entire website. It will be tricky to build, difficult to bug check in multiple browsers and even trickier to edit later if you need to change things. You're much better off either letting the elements in the file flow normally (and adjusting the positioning with padding/margin) or using floats.

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...