21 users online (0 members and 21 guests)  


  Results 1 to 4 of 4

Related

  1. Replies: 4
  2. Google clickable site for sale    Forum: Websites For Sale
    Replies: 0
  3. Weird output on resizing images..    Forum: PHP Forum
    Replies: 11
  4. CIA news of the weird?    Forum: General Discussion
    Replies: 8
  5. Clickable image    Forum: HTML Forum
    Replies: 2
  1. #1
    Nick-S's Avatar
    New User

    Status
    Offline
    Join Date
    Apr 2011
    Posts
    11

    Weird clickable area

    Greetings!

    I am having some issues with my page.
    My page contains images as links, and they seem to work well. However there is an empty area on the left side of the page that is clickable. Or in other word, the links seem to stretch to the left side, and they are invisible, unless I click on them. I have attached my page, code and two screenshots showing my problem.

    In case you dont want to open the attachments, I pasted my code here. (you will have to add your own images though and my page is not online yet.)


    About the screenshots:

    the screenshot with the black dots, indicates that there is a clickable area.
    The grey dots indicate, that there is a clickable area behind the element.

    The other screenshot shows: When you click and hold an image on the center of the page, you will see a border stretching from the far left side reaching the image(s)


    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 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:
    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 Images Attached Images
    Attached Files Attached Files

  2. #2
    Nick-S's Avatar
    New User

    Status
    Offline
    Join Date
    Apr 2011
    Posts
    11

    Re: Weird clickable area

    I also want to add:


    This happens when you click and hold an image with your mouse.
    Your help would be strongly appreciated!

  3. #3
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: Weird clickable area

    Hi there Nick-S,

    and a warm welcome to these forums.

    Check out the attachment, for a complete re-working of your page.

    &#160;
    Attached Files Attached Files

  4. #4
    Nick-S's Avatar
    New User

    Status
    Offline
    Join Date
    Apr 2011
    Posts
    11

    Re: Weird clickable area

    Quote Originally Posted by coothead View Post
    Hi there Nick-S,

    and a warm welcome to these forums.

    Check out the attachment, for a complete re-working of your page.

    *
    Thanks a lot!