Is <a href> causing forced distance? [closed]

StackOverflow https://stackoverflow.com/questions/21696688

  •  09-10-2022
  •  | 
  •  

Frage

On my page there are 2 different ways to view a "map".

The first way just shows the map. The second way contains links to each quarter of the map.

This is the second way whichs result is not looking as I want it to look. Is this caused by the img wrapping <a href="...">?

Or what could be causing this distance?

And how could I fix this? (Wihtout using CSS, as I'm currently not able to use CSS because fo personal reasons.)

<a href="http://www.straight-devel.com/test?Frame=12&amp;SqrXIndex=0&amp;SqrYIndex=0">
    <img src="/2000.png" title="12" alt="12"/>
</a><a href="http://www.straight-devel.com/test?Frame=12&amp;SqrXIndex=0&amp;SqrYIndex=1">
    <img src="/1001.png" title="1" alt="1"/>
</a><a href="http://www.straight-devel.com/test?Frame=12&amp;SqrXIndex=0&amp;SqrYIndex=2">
    <img src="/1100.png" title="1" alt="1"/>
</a><a href="http://www.straight-devel.com/test?Frame=12&amp;SqrXIndex=0&amp;SqrYIndex=3">
    <img src="/1111.png" title="2" alt="2"/>
</a><a href="http://www.straight-devel.com/test?Frame=12&amp;SqrXIndex=0&amp;SqrYIndex=4">
    <img src="/2200.png" title="14" alt="14"/>
</a>
<br/>

The result looks like this:

Alot of unwanted space http://www.star-hole.com/pictures/incorrect.png

This is the way without the links:

<img src="/2000.png" title="12" alt="12"/>
<img src="/1001.png" title="1" alt="1"/>
<img src="/1100.png" title="1" alt="1"/>
<img src="/1111.png" title="2" alt="2"/>
<img src="/2200.png" title="14" alt="14"/>
<br/>

And the resulting map looks the way I want the other map to look like too:

Alot of unwanted space http://www.star-hole.com/pictures/correct.png

Is there anyone whos able to help me?

EDIT

I should note, that the code snippets just are for the first row of the map. As The way they generate the map doesn't change and each row is the same code (its dynamicly done in a C loop, so its 100% sure)

War es hilfreich?

Lösung

On the head tag add these style

<style type="text/css">
  a, img {margin: 0; padding: 0;}
</style>

Andere Tipps

Hmm the horizontal spacing is curious. To elaborate on Ishank's answer.

Add the following in between the <head> </head>

<link rel="stylesheet" href="style.css" type="text/css"/>

Open up a new document and save it in the same directory as your HTML file name it: style.css

Paste the following into the new document:

[Original Comment] Perhaps try to remove all padding and margins which the browser applies by:

*{
    margin: 0;
    padding: 0;
}

I highly recommend you use Cascading Style-Sheets (CSS). A good resource to start learning is here: WebPlatform.Org: CSS

You could do an internal CSS.

<!DOCTYPE html>
<html>
<head>
    <title>Your Page Title Goes Here!</title>
    <style>
    * {
        margin: 0;
        padding: 0;
    }
    </style>
</head>

<body>
<a href="http://www.straight-devel.com/test?Frame=12&amp;SqrXIndex=0&amp;SqrYIndex=0">
    <img src="/2000.png" title="12" alt="12"/>
</a><a href="http://www.straight-devel.com/test?Frame=12&amp;SqrXIndex=0&amp;SqrYIndex=1">
    <img src="/1001.png" title="1" alt="1"/>
</a><a href="http://www.straight-devel.com/test?Frame=12&amp;SqrXIndex=0&amp;SqrYIndex=2">
    <img src="/1100.png" title="1" alt="1"/>
</a><a href="http://www.straight-devel.com/test?Frame=12&amp;SqrXIndex=0&amp;SqrYIndex=3">
    <img src="/1111.png" title="2" alt="2"/>
</a><a href="http://www.straight-devel.com/test?Frame=12&amp;SqrXIndex=0&amp;SqrYIndex=4">
    <img src="/2200.png" title="14" alt="14"/>
</a>
<br/>
</body>
</html>
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top