www.webdeveloper.com
Results 1 to 6 of 6

Thread: Images Shifting over...

  1. #1
    Join Date
    Mar 2005
    Posts
    3

    Images Shifting over...

    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

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    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

  3. #3
    Join Date
    Mar 2005
    Posts
    3
    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.

  4. #4
    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

  5. #5
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Go through the tutorials for html, xhtml and css in the link I gave.

  6. #6
    Join Date
    Mar 2005
    Posts
    3
    Will do, thank you for all of your help.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles