Menu
Hello everyone, this might be a simple thing to do for msot of you, but for a newbie like my self its a brain twister.
Page im trying to center image on: [url]www.primal-instinct.org
I have been trying to get this image to center for everyone, and since everyone has different resolutions, it always looks different for everyone. My question is, is it possible to have it center for everyone ? I think I have seen this on other peoples enter screens, but im not sure what they did, and couldnt find any pages to try and look at the source… if someone could help me with this issue I would greatly appreciate it.
Thanks ahead of time,
-shahiz.
No that HTML tag will not vertically center the image, just horizontally.
It appears to be vertically centered (by accident obviously), you can do that by putting it in a table. However I never use tables, it can be done with CSS aswell.
I have noticed that your Source code is not good. It is broken at the end.
Did you code that page?[/QUOTE]
well, i just used macromedia dreamweaver[/QUOTE]That would explain it then. Dreamweaver, like all WYSIWYGs, doesn't use HTML or XHTML. It uses what we call "tag soup".
I have just tried to validate your page as XHTML Transitional.
It Failed with 25 errors.
Can I ask why you chose XHTML? The errors that appear show that you do not have an understanding of XHTML. You need to go back and Learn a bit of HTML and XHTML.
[B]Here are some of the most obvious mistakes:[/B]
You have code outside the </HTML> (html end tag).
You have in-line styles on the html page; use a seperate style sheet for this.
[B]XHTML mistakes:[/B]
no "alt" specified in the IMG tag
Always use Lower-case tags
I can take a look at the code and re-write it for you if you want?[/QUOTE]
Yeah, I am going to re-read the whole html goodies page. [/QUOTE]No, for the Love of God, or the W3C, don't do that! It's full of errors and omissions. It's the worst thing that I've seen on the web. If you must use a tutorial seek out the W3Schools. It's still full of errors but it's not so bad.
Here is the code I have done for you, it now validates as XHTML. I have created a CSS style sheet for all the formatting (background colour etc.) to get you started. Try not to use in-line styles.[/QUOTE]
Wha...? First you chastise shahiz for using XHTML transitional and inline styles, then you go ahead and use it in your "code", which is full of deprecated inline style tags...... The page STILL does not validate anyway, because if you had looked closely you would have noticed the part throwing most of the errors is generated by the op's host.
And you still didn't address the issue of the vertical centering....[/QUOTE]
[CODE]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Primal Instinct [3.14] Age Of Conan Guild</title>
<link rel="stylesheet" type="text/css" href="core.css">
</head>
<body>
<div id="entry">
<h1>Primal Instinct</h1>
<h2>Age of Conan Guild</h2>
<h3>Enter</h3>
<ul>
<li><a href="http://www.primal-instinct.org/main.html" title="Enter the Main site">Site</a></li>
<li><a href="http://www.primal-instinct.org/phpBB2" title="Go to the Forums">Forum</a></li>
</ul>
</div>
</body>
</html>[/CODE][CODE]* {
border: 0;
margin: 0;
padding: 0;
}
body {
background-color: #000000;
color: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
#entry {
position: absolute;
height: 162px;
top: 50%;
width: 100%;
margin-top: -81px;
}
#entry h1, #entry h2, #entry h3 {
font-size: 1px;
text-indent: -1000px;
float: left;
}
#entry ul {
display: block;
list-style: none;
height: 162px;
width: 1022px;
background-image: url(newsplash.png);
margin: 0 auto;
}
#entry li {
float: left;
display: inline;
margin-top: 126px;
margin-left: 45px;
margin-right: -35px;
padding-left: 10px;
}
#entry a {
display: block;
width: 100px;
height: 30px;
text-indent: -1000px;
}
[/CODE]Centauri,
Fantastic explaination, I think shahiz should be good to go now ?.
You are a Gentleman and Scholar.[/QUOTE]
....free time to good use by addressing the vertical centering issue....[/QUOTE]but you can center an image horizontally AND vertically on a page, if you know the dimensions of the image. If the image is, say, 500px wide and 300-pixels tall, "position" it "left:50%"; and "top:50%;", then, using a negative margin, pull it back half of these respective widths, ergo, "centered" on any window.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd ">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title></title>
<style type="text/css">
* {border:0; padding:0; margin:0;}
body {height:100%;} /*IMPORTANT, -need this for IE to work */
</style>
<script type="text/javascript"><!--
// -->
</script>
</head>
<body>
<img alt="image: horizontally and vertically centered" src="images'picture.jpg" style="[B]position: relative; top:50%; left:50%; margin-left:-250px; margin-top:-150px;[/B] [U]width:[B]504[/B]px; height:[B]304[/B]px;[/U] border:3px double black;" />
</body>
</html>[/QUOTE]
0.1.9 — BETA 6.2