Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Linked images scattered

    Greetings, I am new here!

    My page contains images as links. However there is an empty area on the left side of the page that is clickable. In other words the links are scattered but when you click on an image, it works perfectly. I have attached my page, my code and a screenshot that explains the my problem.

    HTML code:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    <head>
    <title> linux</title>
    <link rel="stylesheet" href="style.css" type="text/css">
    </head>
    
    <div class="logo">
    <img src="linux.png" alt="linux" title="linux"></div>
    <body>
    
    <div class="h1"><H1>Welcome to the world of linux!</H1> </div>
    
    <div class= "ul">
    <li><a href="distro.html">distro home</a></li>
    <li><a href="centos.html">centos</a></li>
    <li><a href="ubuntu.html">ubuntu</a></li>
    <li><a href="opensuse.html">opensuse</a></li>
    <li><a href="gentoo	.html">gentoo</a></li>
    <li><a href="linux-mint.html">linux mint</a></li>
    <li><a href="fedora.html">fedora</a></li>
    <li><a href="red-hat.html">red hat</a></li>
    <li><a href="knopix.html">knopix</a></li>
    <li><a href="kubuntu.html">kubuntu</a></li>
    <li><a href="yellow-dog-linux.html">yellow dog linux</a></li>
    <li><a href="reactos.html">reactOS</a></li>
    <li><a href="mandriva.html">mandriva</a></li>
    <li><a href="jolicloud.html">jolicloud</a></li>
    <li><a href="debian.html">debian</a></li>
    <li><a href="arch-linux.html">arch linux</a></li>
    
    </ul>
    </div>
    
    <div class="img">
    <a href="ubuntu.html"><img src="ubuntu.gif" alt="ubuntu" title="ubuntu"></a>
    <a href="fedora.html"><img src="fedora.jpg" alt="Fedora" title="fedora"></a>
    <a href="debian.html"><img src="debian.gif" alt="debian" title="debian"></a>
    <br>
    <a href="opensuse.html"><img src="opensuse.png" alt="youtube" title="opensuse"></a>
    <a href= "jolicloud.html"><img src="jolicloud.png" alt="jolicloud"title="jolicloud"></a>
    <a href="reactos.html"><img src="reactos.png" alt="reactos" title="reactos"></a>
    <br>
    <a href="kubuntu.html"><img src="kubuntu.png" alt="kubuntu" title="kubuntu"></a>
    <a href="mandriva.html"> <img src="mandriva.png" alt="mandriva" title="mandriva"></a>
    <a href="arch-linux.html"><img src="arch.png" alt="arch linux"title="arch linux"></a>
    <br>
    <div>
    
    <p class="para1">Distros:</p>
    
    <div class="h5"><h5>
    <a href= "about.html">About </a> 
    <a href="home.html">Home </a>
    <a href="contact.html">Contact </a> 
    <a href ="info.html">Information </a>
    </h5></div>
    
    <div class=h2></div>
    <div class=h6> </div>
    <div class=h3> </div>
    
    </body>
    </html>

    CSS code:
    Code:
    body {position:fixed;}
    
    /*Heading*/
    .h1 h1{color:black; font-size:15pt;
     text-decoration:none; position: relative; bottom:-130px; left:430px; }
    
    /* linux logo*/
    .logo{
    position:absolute; top:-12px; left:520px; width:95%; height:85%;
    }
    .logo img {height:150px; width:180px;}
    
    /* distro list*/
    .ul 
    {list-style-type:none; position:absolute; 
    top:215px; margin:0px; padding:0px; width:270px; text-align:left; background-color:pink; 
    font-size:12pt; color:black;} 
    .li
    {display:outline;}
    
    
    /*icons*/ 
    a{text-decoration:none;}
    .img img
    {margin:10px; padding:20px; width: 85px; height:85px; position:relative; right:-390px; bottom:-150px;}
    
    /* icons element. */
    .h6 {background-color:yellow; margin:150px; padding:190px; position:absolute; 
    top: 49px; left:220px; z-index:-1; height:85px; width:90px;}
    
    /*Fonts*/
    .p arial
    {font-family: arial,times-new-roman, serif, webdings;}
    
    /* distros*/
    .para1 
    {position:absolute; top:165px; left:70px; font-size:18pt; text-decoration:none; color:white; font-weight:bold;}
    
    /*left nav*/
    .h2 {background-color:red; position:absolute; top:415px; margin:-235px; 
    padding:240px; width:40px;
    z-index:-1;}
    
    /*element on footing*/
    .h3 {background-color:orange; margin:30px; padding:20px; position: relative; 
    bottom:-110px; z-index:-1; width:265px; height:1px;  
    left:420px;}
    
    /*footing*/
    .h5 
    {position:relative; margin: -20px; padding:50px; bottom:-230px; left:450px;  font-size:12pt; word-spacing:25px;}
    Attached Thumbnails Attached Thumbnails Linked images scattered-my-page.jpg  
    Attached Files Attached Files

  • #2
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    53 views and no replies?

  • #3
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    It's hard for us to recreate your issues locally since it might be imaged based and we dont have your images. Do you have a test site live so we can look at it?
    Last edited by teedoff; 04-08-2011 at 03:27 AM.
    Teed

  • #4
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by teedoff View Post
    It's hard for us to recreate your issues locally since it might be imaged based and we dont have your images. Do you have a test site live so we can look at it?
    I have my images on the zip file above.
    My site is not online yet.

  • #5
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Before we do anything, you should fix your validation errors. I saw several just looking at your code that could cause your issue. For example, you have an unordered list that is invalid. It lacks an opening <ul> tag. You can give the <ul> tag a class or id if you want, but what you have done is give a div a class of ul.

    You can paste your code from above right into the validator to see your errors.
    Last edited by teedoff; 04-08-2011 at 04:33 AM.
    Teed

  • #6
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Is this correct?

    Code:
    <div class= "ul">
    <ul>
    <li><a href="distro.html">distro home</a></li>
    <li><a href="centos.html">centos</a></li>
    <li><a href="ubuntu.html">ubuntu</a></li>
    <li><a href="opensuse.html">opensuse</a></li>
    <li><a href="gentoo	.html">gentoo</a></li>
    <li><a href="linux-mint.html">linux mint</a></li>
    <li><a href="fedora.html">fedora</a></li>
    <li><a href="red-hat.html">red hat</a></li>
    <li><a href="knopix.html">knopix</a></li>
    <li><a href="kubuntu.html">kubuntu</a></li>
    <li><a href="yellow-dog-linux.html">yellow dog linux</a></li>
    <li><a href="reactos.html">reactOS</a></li>
    <li><a href="mandriva.html">mandriva</a></li>
    <li><a href="jolicloud.html">jolicloud</a></li>
    <li><a href="debian.html">debian</a></li>
    <li><a href="arch-linux.html">arch linux</a></li>
    
    </ul>
    </div>

  • #7
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Yes it looks correct. Not sure what that big gap in the link to gentoo.html is.

    What about the other validation errors you had. Did you fix those? Are you still having the issue you posted about?
    Teed

  • #8
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by teedoff View Post
    Yes it looks correct. Not sure what that big gap in the link to gentoo.html is.

    What about the other validation errors you had. Did you fix those? Are you still having the issue you posted about?
    The validator shows I have 1 error that is not related to my problem.
    I just want to explain my issues again in case if I wasn't clear.

    When you click and hold on to an image on the yellow area of my page with your mouse, you will see a strange border stretching from the left side of the page all the way to the image itself. The border should be smaller. I will attach more screenshots to show you what I mean.
    Attached Thumbnails Attached Thumbnails Linked images scattered-my-page-2.jpg   Linked images scattered-my-page-3.jpg   Linked images scattered-my-page.jpg  

  • #9
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    I tried pulling your zip files down, but kept getting errors. Wound up extracting only like 5 images. The rest didnt extract including your html files.

    It would be alot easier and quicker to put your site up on a server. There are some free hosting sites around you can use until you get a ful fledged hosting server.
    Teed

  • #10
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    I recreated your page using the 5 images I pulled down from your files and your code posted above.

    I could not recreate the issue you were talking about. One thing I would mention is the way you use html tags and then reduntantly wrap them in a div and give that div the class or id the same name as the tag itself. Not that it doesnt "work", but it confusing to style and many cases are not neccessary. For instance, the heading tags you use. You wrap some text in an h1 tag, but then have that in a div with a class of h1. Again, it seems to work, but when you style the heading in your style sheet, you could have just as easily styled the tag itself or even just gave THAT <h1> and class or id.

    <h1 class="heading1">Your Heading Text Here</h1>

    That way if you have more than one heading 1 tag, which really there's no need for, on your page, then that style would be specific to the class heading1.

    Make sure you refresh your page in the browser. Make sure you're not viewing a cached version, then if its still going on, you're really going to have to probably place your site on a server somewhere.
    Teed

  • #11
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok, I think I almost found the problem.
    I think its a position issue. When I set my images as position:absolute; they stack on top of each other. Can someone help me to position my images without overlapping or stacking?

    Here my updated code

    HTML:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    <head>
    <title> Linux</title>
    <link rel="stylesheet" href="style.css" type="text/css">
    </head>
    
    <div id="logo">
    <img src="linux.png" alt="linux.png" title="Tux">
    </div>
    
    <body>
    <h1 class="heading1">Welcome to the world of Linux!</h1>
    
    <ul id= "menu">
    <li><a href="distro.html">Distro index</a></li>
    <li><a href="centos.html">centos</a></li>
    <li><a href="ubuntu.html">ubuntu</a></li>
    <li><a href="opensuse.html">opensuse</a></li>
    <li><a href="gentoo.html">gentoo</a></li>
    <li><a href="linux-mint.html">linux-mint</a></li>
    <li><a href="fedora.html">fedora</a></li>
    <li><a href="red-hat.html">red-hat</a></li>
    <li><a href="knopix.html">knopix</a></li>
    <li><a href="kubuntu.html">kubuntu</a></li>
    <li><a href="yellow-dog-linux.html">yellow-dog-linux</a></li>
    <li><a href="reactos.html">reactos</a></li>
    <li><a href="mandriva.html">mandriva</a></li>
    <li><a href="jolicloud.html">jolicloud</a></li>
    <li><a href="debian.html">debian</a></li>
    <li><a href="arch-linux.html">arch-linux</a></li>
    </ul>
    
    
    <div id="img">
    <a href="ubuntu.html"  onclick="window.open(this.href); return   false;"><img src="ubuntu.gif" alt="Ubuntu"   title="Ubuntu"></a>
    <a href="fedora.html"onclick="window.open(this.href);return   false;"><img src="fedora.jpg" alt="Fedora"   title="Fedora"></a>
    <a href="debian.html" onclick="window.open(this.href); return   false;"><img src="debian.gif" alt="debian"   title="debian"></a>
    <br>
    <a href="opensuse.html" onclick="window.open (this.href); return   false;"><img src="opensuse.png" alt="opensuse"   title="opensuse"></a>
    <a href= "jolicloud.html" onclick= "window.open (this.href); return   false;"><img src="jolicloud.png"   alt="jolicloud"title="jolicloud"></a>
    <a href="reactos.html"onclick="window.open(this.href); return   false;"><img src="reactos.png" alt="reactos"   title="reactos"></a>
    <br>
    <a href="kubuntu.html"onclick="window.open (this.href); return   false;"><img src="kubuntu.png" alt="kubuntu"   title="kubuntu"></a>
    <a href="mandriva.html" onclick="window.open (this.href); return   false;"> <img src="mandriva.png" alt="mandriva"   title="mandriva"></a>
    <a href="arch-linux.html" onclick="window.open(this.href);return   false;"><img src="arch.png" alt="arch linux"title="arch   linux"></a>
    </div>
    
    <p class="para1">Distros:</p>
    
    <H5 id="heading5">
    <a href= "about.html">About </a> 
    <a href="mirror.html">Mirrors </a>
    <a href="downloads.html">Downloads </a> 
    <a href ="info.html">Info </a>
    </H5>
    
    <div class=h2></div>
    <div id=h6> </div>
    <div class=h3> </div>
    
    </body>
    </html>
    CSS:

    Code:
    body {position:fixed; background-color:cyan;}
    
    /*Heading*/
    .heading1{color:black; font-size:20pt;
     text-decoration:none; position: relative; bottom:-130px; left:430px; }
    
    /* Linux logo*/
    #logo{
    position:absolute; top:-12px; left:520px; width:95%; height:85%;
    }
    #logo img {height:150px; width:180px;}
    
    /* Distro list*/
    #menu 
    {list-style-type:none; position:absolute; border-radius:40px;
    top:215px; margin:5px; padding:15px; width:240px; background-color:white; 
    font-size:16pt; opacity:0.7; } 
    #menu :hover{color:black; font-size:16pt; background-color:cyan;  display:block; 
    font-weight:bold; font-style:italic;}
    #menu li :active{color:red; font-weight: bold;}
    #menu li :visited{color:white; opacity:0.1;}
    #menu :link{color:black;}
    
    
    /*icons*/
    #img img:hover {background-color:white; opacity:0.7;
    border-radius:30px;} 
    #img img:active{opacity:0.4; border:none;}
    #img img{border-radius:32px; border:none;}
    a{text-decoration:none;}
    #img img
    {margin:10px; padding:18px; width: 85px; height:85px; 
    position:relative; right:-390px; bottom:-150px; z-index:2;}
    
    /* icons space.*/
    #h6 {background-color:black; margin:150px; padding:190px; position:inherit; 
    top: 49px; left:220px; z-index:-100; opacity:0.7; border-radius:45px; height:85px; width:90px;
    box-shadow:60px 50px 50px black; border:10px solid yellow;}
    
    /*Fonts*/
    .p arial
    {font-family: arial,times-new-roman, serif, webdings;}
    
    /* distros*/
    .para1 
    {position:absolute; top:165px; left:70px; font-size:18pt; text-decoration:none; color:white; font-weight:bold;}
    
    /* left nav*/
    .h2 {background-color:red; border:10px solid lime; position:absolute; top:415px; margin:-235px; 
    padding:240px; width:40px;
    z-index:-3; border-radius:80px; 
    opacity:0.8; box-shadow: 15px 15px 15px black;}
    
    /* footing*/
    .h3 {background-color:green; margin:30px; padding:20px; position: absolute; 
    bottom:-240px;border:10px solid yellow; border-radius:30px; z-index:-1; width:300px; height:1px;  
    left:390px; opacity:0.6; box-shadow:10px 10px 10px black; }
    
    /*footing*/
    #heading5
    {position:relative; margin: -20px; padding:50px; bottom:-220px; left:420px;  font-size:12pt; word-spacing:25px;}
    #heading5 a:hover{text-decoration:none; color:black; background-color: yellow;}


  •  

    Posting Permissions

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