Grafik hat blauen Rand

flaexx · 27 Januar 2008

Hi,

ich hab eine Grafik als Hyperlink, aber die wird mit einem Blauen Rand angezeigt.
Ich poste den Quellcode mal dazu!

HTML:

<html>

<head>

<title></title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="keywords" content="">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>

<div id="banner"></div>

<div id="navi">
<a class="home" href="#"><img src="http://www.html.de/images/home.jpg"></a>

</div>

<div id="content"><br><br><br>Hier entsteht der Content Bereich</div>

</body>
</html>

HTML:

body
    {
         background-color:    #bbbbbb;
         text-decoration:    none;
         font-family:        Verdana, Helvetica, sans-serif;
    font-size:        12pt;
         }

#banner
    {
         background-image:    url(images/banner.jpg);
         width:             750px;
         height:            200px;
    margin-left:        250px;
         margin-top:        20px;
    }

#navi
    {
         background-color:    #C0C0C0;
         width:             750px;
         height:            23px;
         top:                    770px;
    margin-left:        250px;
         float:            left;
         text-align:        center;
    }

#content
    {
         background-color:    #5F5F5F;
         width:            750px;
         height:            500px;
         top:                793px;
         margin-left:        250px;
         text-align:        center;
         }

a.home
    {
    background:     url(images/home.jpg) no-repeat right;
     }

Wie bekomm ich den weg?

HTMLehrling · 27 Januar 2008

entweder schreibst du ins img tag border="0" oder ins css img {border:0;}

flaexx · 27 Januar 2008

Danke! Daran hab ich gar nicht gedacht!

Kann dann geschlossen werden!:)

flaexx · 27 Januar 2008

Stopp bitte noch nicht zumachen! Editiere diesen Beitrag nochmal. Hab n neues Problem!

HTML:

<html>
<head>
<title></title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="keywords" content="">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>

<div id="banner"></div>

<div id="navi">
<a class="home" href="#"><img src="images/home.jpg" border="0"></a>
<a class="home" href="#"><img src="images/band.jpg" border="0"></a>
<a class="home" href="#"><img src="images/gigs.jpg" border="0"></a>
<a class="home" href="#"><img src="images/media.jpg" border="0"></a>
<a class="home" href="#"><img src="images/forum.jpg" border="0"></a>
<a class="home" href="#"><img src="images/gb.jpg" border="0"></a>
<a class="home" href="#"><img src="images/kontakt.jpg" border="0"></a>
<a class="home" href="#"><img src="images/links.jpg" border="0"></a>

</div>

<div id="content"><br><br><br>Hier entsteht der Content Bereich</div>

</body>
</html>

HTML:

body
    {
         background-color:    #bbbbbb;
         text-decoration:    none;
         font-family:        Verdana, Helvetica, sans-serif;
    font-size:        12pt;
         }

#banner
    {
         background-image:    url(images/banner.jpg);
         width:             750px;
         height:            200px;
    margin-left:        250px;
         margin-top:        20px;
    }

#navi
    {
         background-color:    #C0C0C0;
         width:             750px;
         height:            23px;
         top:                    770px;
    margin-left:        250px;
         float:            left;
         text-align:        center;
    }

#content
    {
         background-color:    #5F5F5F;
         width:            750px;
         height:            500px;
         top:                793px;
         margin-left:        250px;
         text-align:        center;
         }

a.home
    {
    background:     url(images/home.jpg);
     }

a.band
    {
    background:     url(images/band.jpg);
     }

a.gigs
    {
    background:     url(images/gigs.jpg);
     }

a.media
    {
    background:     url(images/media.jpg);
     }

a.forum
    {
    background:     url(images/forum.jpg);
     }

a.gb
    {
    background:     url(images/gb.jpg);
     }

a.kontakt
    {
    background:     url(images/kontakt.jpg);
     }

a.links
    {
    background:     url(images/links.jpg);
     }

Jetzt wird zwischen den einzelnen Grafiken ein Abstand von ca. 5px gemacht. Wie kann ich den wegmachen?

threadi · 27 Januar 2008

Könnte am fehlenden Doctype und der fehlenden Angabe, dass du dort keine Außenabstände haben willst liegen. Also

Code:

img { margin: 0px; }

flaexx · 27 Januar 2008

Hab beides eingebaut. Ist immer noch da!

HTMLehrling · 27 Januar 2008

hast du sowas eingebaut?

HTML:

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\'>

setz mal ganz am anfang deiner css sowas

HTML:

* {
margin:0;
padding:0;
}

wenns dann immer noch nicht klappt, poste nochmals deinen code

edit:

flaexx · 27 Januar 2008

Ich hatte nen Strict Doctype drin. Aber dein Doctype hat es eher noch schlimmer gemacht!

HTML:

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\'>
<html>
<head>
<title>Coming into Effect</title>
<meta name="description" content="Die Bandhomepage von Coming into Effect">
<meta name="author" content="Sebastian">
<meta name="keywords" content="Coming, into, Effect, Coming into Effect">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>

<div id="banner"></div>

<div id="navi">
<a class="home" href="#"><img src="images/home.jpg" border="0" ></a>
<a class="home" href="#"><img src="images/band.jpg" border="0"></a>
<a class="home" href="#"><img src="images/gigs.jpg" border="0"></a>
<a class="home" href="#"><img src="images/media.jpg" border="0"></a>
<a class="home" href="#"><img src="images/forum.jpg" border="0"></a>
<a class="home" href="#"><img src="images/gb.jpg" border="0"></a>
<a class="home" href="#"><img src="images/kontakt.jpg" border="0"></a>
<a class="home" href="#"><img src="images/links.jpg" border="0"></a>

</div>

<div id="content"><br><br><br>Hier entsteht der Content Bereich</div>

</body>
</html>

HTML:

body
    {
         background-color:    #bbbbbb;
         text-decoration:    none;
         font-family:        Verdana, Helvetica, sans-serif;
    font-size:        12pt;
         }

#banner
    {
         background-image:    url(images/banner.jpg);
         width:             750px;
         height:            200px;
    margin-left:        250px;
         margin-top:        20px;
    }

#navi
    {
         background-color:    #C0C0C0;
         width:             750px;
         height:            23px;
         top:                    770px;
    margin-left:        250px;
         float:            left;
         text-align:        center;
    }

#content
    {
         background-color:    #5F5F5F;
         width:            750px;
         height:            500px;
         top:                793px;
         margin-left:        250px;
         text-align:        center;
         }

a.home
    {
    background:     url(images/home.jpg);
         margin:     0px;
     }

a.band
    {
    background:     url(images/band.jpg);
         margin:     0px;
     }

a.gigs
    {
    background:     url(images/gigs.jpg);
         margin:     0px;
     }

a.media
    {
    background:     url(images/media.jpg);
         margin:     0px;
     }

a.forum
    {
    background:     url(images/forum.jpg);
         margin:     0px;
     }

a.gb
    {
    background:     url(images/gb.jpg);
         margin:     0px;
     }

a.kontakt
    {
    background:     url(images/kontakt.jpg);
         margin:     0px;
     }

a.links
    {
    background:     url(images/links.jpg);
         margin:     0px;
     }

threadi · 27 Januar 2008

Könntest Du ...
.. beim Doctype ganz hinten das überzählige \ entfernen?
.. den Code auch über mehrere Zeilen schreiben?
.. die Seite inkl. der Bilder online stellen?

flaexx · 27 Januar 2008

threadi schrieb:
.. den Code auch über mehrere Zeilen schreiben?
.. die Seite inkl. der Bilder online stellen?

Wie meinst du das?

HTMLehrling schrieb:
HTML:

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\'>

setz mal ganz am anfang deiner css sowas

Dieser Doctype ist im Moment eingebaut.

Coming into Effect

threadi · 27 Januar 2008

Ersteres .. schau dir den Quellcode in deinen Postings an ..

Zweiteres .. lad die Seite auf einen Webspace hoch ..

flaexx · 27 Januar 2008

Aso! Ja, sry, ich hab den kopiert und eingefügt, das hat der nciht mit übernommen.

Das zweite wollt ich eigentlich noch wegmachen -.- :mrgreen:

Sn0opy · 28 Januar 2008

Frage, reicht im Normalfall nicht einfach

Code:

a img {
  border: 0px;
}

Oder hab ich nun was im Thread übersehen?

flaexx · 28 Januar 2008

Weiß ich nicht, ich probier es mal aus!

HTMLehrling · 28 Januar 2008

also was mich ein wenig verwirrt ist, dass du ein a tag mit background hast und gleich im tag die selbe grafik nochmals mit einem img tag einbindest

also ich würd das eine oder andere entfernen

flaexx · 28 Januar 2008

HTMLehrling schrieb:
also was mich ein wenig verwirrt ist, dass du ein a tag mit background hast und gleich im tag die selbe grafik nochmals mit einem img tag einbindest

also ich würd das eine oder andere entfernen

Wo denn? Kannst du das mal bitte posten?

HTMLehrling · 28 Januar 2008

exmple:

HTML:

<a class="home" href="#">
<img src="http://www.html.de/images/home.jpg">
</a>

HTML:

a.home
    {
    background:     url(images/home.jpg);
         margin:     0px;
     }

flaexx · 28 Januar 2008

Habs jetzt ausprobiert. Geht nicht. kann einer von euch sich das mal ansehen und mal versuchen ob einer das hinbekommt?

threadi · 28 Januar 2008

threadi schrieb:
Zweiteres .. lad die Seite auf einen Webspace hoch ..

Und wie siehts heute damit aus :roll:

flaexx · 29 Januar 2008

Ich hab die neue Version hochgeladen. Aber es ist immer noch das gleiche...hat sich nix geändert.

Grafik hat blauen Rand

flaexx

Guest

Neues Mitglied

flaexx

Guest

flaexx

Guest

Moderator

flaexx

Guest

Neues Mitglied

flaexx

Guest

Moderator

flaexx

Guest

Moderator

flaexx

Guest

Neues Mitglied

flaexx

Guest

Neues Mitglied

flaexx

Guest

Neues Mitglied

flaexx

Guest

Moderator

flaexx

Guest