Images Shifting over...

**HydrasLick** · 03-23-2005 01:35 AM

I'm pretty sure this is an easy fix but have not been able to find a solution to my problem yet. First of all, here is a page that I have just recently started:

http://webpages.charter.net/virtualskynet

As you can see, the table being on the left side shifts the images over to the right a little bit. I have tried using the
"style="float:center" command, but that did not work, nor did <div align="center"> I would like it if all of the pictures were
in an even row ... so that all of them will be aligned correctly.

If anyone has a solution to this problem, please tell me.

Peace,

Hydra

**Fang** · 03-23-2005 03:12 AM

A lot of changes required:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Welcome to Virtual Skynet</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="copyright" content="Basic HTML"> 
<meta name="keywords" content="Basic HTML"> 
<meta name="description" content="HTML template"> 

<style type="text/css">
<!-- 
* {
margin:0;
padding:0;
}
body {
background:#E0E0E0;
color:#000;
font:1em Verdana, Geneva, Arial, Helvetica, sans-serif;
}
#header {
width:80%;
margin:auto;
text-align:center;
} 
a:link {color: blue;}
a:visited {color: blue}
a:active {color: blue}

hr {
margin:10px 0 40px 0;
}
h1 {
margin:20px 0;
font-size:200%;
}
#content {
border:1px solid #E0E0E0;
position:relative;
}
ul {
position:absolute;
left:5px;
list-style-type: none;
border:5px solid #000;
}
li {
padding:3px;
text-align:left;
}
ul a {text-decoration:none;}
#images {
width:486px;
margin:auto;
}
#images img {
float:left;
border:1px solid #E0E0E0;
}
-->
</style>

</head>
<body>
<div id="header">
    <h1>Welcome to Virtual Skynet</h1>
    <p>Desktop Wallpapers/Backgrounds, made using the program <a href="http://www.planetside.co.uk/terragen/">Terragen</a></p>
    <hr>
</div>

<div id="content">
    <ul>
        <li><a href="http://webpages.charter.net/virtualskynet">Home</a></li>
        <li><a href="http://webpages.charter.net/virtualskynet/Gallery.html">Gallery</a></li>
        <li><a href="http://www.planetside.co.uk/terragen">Terragen</a></li>
        <li><a href="http://webpages.charter.net/virtualskynet/Contact.html">Contact Me</a></li>
    </ul>
    <div id="images">
        <img src="http://webpages.charter.net/virtualskynet/Dark Envy (2 - small).jpg" height="120" width="160" alt="">
        <img src="Fountain of Youth (Mini).bmp" height="120" width="160" alt="">
        <img src="Fountain of Youth (2 - Mini).bmp" height="120" width="160" alt="">
        <img src="Envy (Mini).bmp" height="120" width="160" alt="">
        <img src="Dark Envy (Mini).bmp" height="120" width="160" alt="">
        <img src="Dark Envy (foggy - Mini).bmp" height="120" width="160" alt="">
    </div>
</div>
</body>
</html>

Tutorials (x)html css

**HydrasLick** · 03-23-2005 05:33 PM

Wow, thank you. It worked perfectly. I'm just a beginner ... and I have no idea what you did. I'm assuming that what you did was xhtml... which I do not know. I was trying to build my site completely on html and maybe some java, but, thank you anyway! I appreciate it.

**IncaWarrior** · 03-23-2005 06:37 PM

xhtml is just html with stricter rules.

It's best to stay away from javascript (I think that's what you mean) and java as well just to keep your page accessible

**Fang** · 03-24-2005 01:01 AM

Go through the tutorials for html, xhtml and css in the link I gave.

**HydrasLick** · 03-24-2005 01:58 PM

Will do, thank you for all of your help.

Thread: Images Shifting over...

Thread Tools

Display

Images Shifting over...

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions