Linked images scattered

Nick-S

04-07-2011, 12:04 AM

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:
<!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;}

Nick-S

04-08-2011, 02:40 AM

53 views and no replies?

teedoff

04-08-2011, 03:13 AM

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?

Nick-S

04-08-2011, 04:24 AM

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.

teedoff

04-08-2011, 04:30 AM

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 (http://valdator.w3.org)to see your errors.

Nick-S

04-08-2011, 05:00 AM

Is this correct?

<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>

teedoff

04-08-2011, 02:13 PM

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?

Nick-S

04-08-2011, 03:04 PM

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.

teedoff

04-08-2011, 04:31 PM

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.

teedoff

04-08-2011, 04:56 PM

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.

Nick-S

04-16-2011, 06:26 AM

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:<!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:

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;}