I don't really understand how it works.
Do you just put
{margin:0;text-align:center;}
or have an absolute positioning, then manually find the right position to have the page centered?
If you choose the first option, how about the containers, images ect...? Wouldn't you have to manually move them anyway? So why choose an automatic centering?
For the second option, will this work on every browsers? Would there be any case where the layout would be messed up?A <div> has, by default, a width of 100%. "text-align:center" will center text within that div.
If you want to center a fixed width div use..
<div style="margin:0 auto; width:600px;">So, I will put that line for DIVs that are supposed to be centered (banner, bottom bar...), but for the other DIVs (picture, text...) use absolute positioning?There are already heaps of posts on this topic in this forum, do a search.
Don't use absolute positioning to align an element in the body to the centre, if you looked at it in a smaller or larger res it won't be in the centre.
What most people do it have a container centred in the middle of the page, then have everything aligned left inside this container div.
Then if you want anything inside this to align centre make an extra class and have this align centre and it will align centre in the container div, therefore in the centre of the page.
eg:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Aligning</title>
<style type="text/css"><!--
body {
text-align: center;
}
#container {
width: 600px;
margin: 0 auto;
text-align: left;
}
.ad {
text-align: center;
}
--></style>
<body>
<div id="container">
<h1>Welcome</h1>
<div class="ad">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"blah.gif" width="350px" height="100px" alt="blah" /></div>
</div><!--End Container-->
</body>
</html>Let's say you want to put another image or text positionned somewhere near the 3/4 of the image "blah.gif", wouldn't you have to use absolute positioning?Let's say you want to put another image or text positionned somewhere near the 3/4 of the image "blah.gif", wouldn't you have to use absolute positioning?
Hard to say for sure without a good visual idea of what you want, but from the description I'd guess that either you'd use relative positioning or perhaps just tweaking the margins or padding of the element you want positioned.But even if I tweak your margin or padding, the image won't be on top of the first one... I'm getting more confusing...
If you have a look at the website (<!-- m --><a class="postlink" href="http://masa.intnet.mu">http://masa.intnet.mu</a><!-- m -->) I did, which is my first website in CSS, there's the 'latest news' image. Then, on top of it, there's another DIV for the text, then another DIV for the blue cylindric images, and finally a DIV for the 'Read more''s. The four DIVs are using absolute positioning.
I know it's all messy, but that's the only way I know for the moment.
So, How would this same positioning be presented with another CSS method?commonly we use percentages, or alternativly using relative poitions and the text-align properties.Try something like this..
<style type="text/css">
#news {
margin:20px 10px; padding:0px; width:250px; height:200px;
background:#fff url(images/bkgnd.gif) xx yy no-repeat);
/* use xx and yy to position the background image within the div */
}
#news p {
margin:0px; padding:5px 10px; /* adjust paragraph spacing */
}
</style>
..
<div id="news">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"images/latestnews">
<p>Formation.....</p>
<p> <img src=http://www.webdeveloper.com/forum/archive/index.php/"images/readmore.gif" style="float:right"></p>
<p>Rencontre.....</p>
<p> <img src=http://www.webdeveloper.com/forum/archive/index.php/"images/readmore.gif" style="float:right"></p>
<p>Mission.....</p>
<p> <img src=http://www.webdeveloper.com/forum/archive/index.php/"images/readmore.gif" style="float:right"></p>
</div>Thank you!
Do you just put
{margin:0;text-align:center;}
or have an absolute positioning, then manually find the right position to have the page centered?
If you choose the first option, how about the containers, images ect...? Wouldn't you have to manually move them anyway? So why choose an automatic centering?
For the second option, will this work on every browsers? Would there be any case where the layout would be messed up?A <div> has, by default, a width of 100%. "text-align:center" will center text within that div.
If you want to center a fixed width div use..
<div style="margin:0 auto; width:600px;">So, I will put that line for DIVs that are supposed to be centered (banner, bottom bar...), but for the other DIVs (picture, text...) use absolute positioning?There are already heaps of posts on this topic in this forum, do a search.
Don't use absolute positioning to align an element in the body to the centre, if you looked at it in a smaller or larger res it won't be in the centre.
What most people do it have a container centred in the middle of the page, then have everything aligned left inside this container div.
Then if you want anything inside this to align centre make an extra class and have this align centre and it will align centre in the container div, therefore in the centre of the page.
eg:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Aligning</title>
<style type="text/css"><!--
body {
text-align: center;
}
#container {
width: 600px;
margin: 0 auto;
text-align: left;
}
.ad {
text-align: center;
}
--></style>
<body>
<div id="container">
<h1>Welcome</h1>
<div class="ad">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"blah.gif" width="350px" height="100px" alt="blah" /></div>
</div><!--End Container-->
</body>
</html>Let's say you want to put another image or text positionned somewhere near the 3/4 of the image "blah.gif", wouldn't you have to use absolute positioning?Let's say you want to put another image or text positionned somewhere near the 3/4 of the image "blah.gif", wouldn't you have to use absolute positioning?
Hard to say for sure without a good visual idea of what you want, but from the description I'd guess that either you'd use relative positioning or perhaps just tweaking the margins or padding of the element you want positioned.But even if I tweak your margin or padding, the image won't be on top of the first one... I'm getting more confusing...
If you have a look at the website (<!-- m --><a class="postlink" href="http://masa.intnet.mu">http://masa.intnet.mu</a><!-- m -->) I did, which is my first website in CSS, there's the 'latest news' image. Then, on top of it, there's another DIV for the text, then another DIV for the blue cylindric images, and finally a DIV for the 'Read more''s. The four DIVs are using absolute positioning.
I know it's all messy, but that's the only way I know for the moment.
So, How would this same positioning be presented with another CSS method?commonly we use percentages, or alternativly using relative poitions and the text-align properties.Try something like this..
<style type="text/css">
#news {
margin:20px 10px; padding:0px; width:250px; height:200px;
background:#fff url(images/bkgnd.gif) xx yy no-repeat);
/* use xx and yy to position the background image within the div */
}
#news p {
margin:0px; padding:5px 10px; /* adjust paragraph spacing */
}
</style>
..
<div id="news">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"images/latestnews">
<p>Formation.....</p>
<p> <img src=http://www.webdeveloper.com/forum/archive/index.php/"images/readmore.gif" style="float:right"></p>
<p>Rencontre.....</p>
<p> <img src=http://www.webdeveloper.com/forum/archive/index.php/"images/readmore.gif" style="float:right"></p>
<p>Mission.....</p>
<p> <img src=http://www.webdeveloper.com/forum/archive/index.php/"images/readmore.gif" style="float:right"></p>
</div>Thank you!