Ansicht:   

#259276

Mike_R zur Homepage von Mike_R

Rosenheim,
11.02.2011, 15:20:17

Aufflackernder Rand bei img-link nicht abstellbar (web.design)

Hi,
langsam krieg ich ein schlechtes Gewissen, wenn ich schon wieder mit einem Problem daherkomme. Ich hatte das zwar schon als Zusatz in einem anderen Fall gepostet, aber da ist es irgendwie \"untergegangen\".

Hab folgende Situation: Ein div enthält 2 innere divs, die jeweils ein Pfeil-Bild enthalten.
Wenn ich nun draufklicke, erscheint beim Klicken ganz kurz der Bildrand (beim Mozilla purple, beim IE8 weiß) Alle Varianten im stylesheet mit text-decoration: none; bringen nichts (geht ja auch nur bei Text oder?), aber auch border=\"0\" bei <img> hilft nichts. Aber irgendwie müsste man das doch abstellen können.

<div id=\"arr\">
<div id=\"arle\">
<a class=\"menue\" href=\"agentur2.html\">
<img src=\"images/arrow_left.jpg\" width=\"30\" height=\"45\" border=\"0\" alt=\"Pfeil_links\"> </a> </div>
<div id=\"arri\">
......
</div>

Mike_R

#259277

MudGuard zur Homepage von MudGuard

München,
11.02.2011, 15:22:49

@ Mike_R

Aufflackernder Rand bei img-link nicht abstellbar

> Hi,
> langsam krieg ich ein schlechtes Gewissen, wenn ich schon wieder mit einem
> Problem daherkomme. Ich hatte das zwar schon als Zusatz in einem anderen
> Fall gepostet, aber da ist es irgendwie \"untergegangen\".
>
> Hab folgende Situation: Ein div enthält 2 innere divs, die jeweils ein
> Pfeil-Bild enthalten.
> Wenn ich nun draufklicke, erscheint beim Klicken ganz kurz der Bildrand
> (beim Mozilla purple, beim IE8 weiß) Alle Varianten im stylesheet mit
> text-decoration: none; bringen nichts (geht ja auch nur bei Text oder?),
> aber auch border=\"0\" bei <img> hilft nichts. Aber irgendwie müsste man das
> doch abstellen können.
>
> <div id=\"arr\">
> <div id=\"arle\">
> <a class=\"menue\" href=\"agentur2.html\">
> <img src=\"images/arrow_left.jpg\" width=\"30\" height=\"45\" border=\"0\"
> alt=\"Pfeil_links\"> </a> </div>
> <div id=\"arri\">
> ......
> </div>

a img { border:none; }

--
[image]
MudGuard
O-o-ostern

#259362

Mike_R zur Homepage von Mike_R

Rosenheim,
12.02.2011, 10:18:18

@ MudGuard

Aufflackernder Rand bei img-link nicht abstellbar

Hallo Mudguard,

vielen Dank für Deinen Tipp:

> a img { border:none; }

Leider hat dieser Eintrag im stylesheet aber überhaupt keine Änderung bewirkt; der Rand erscheint nach wie vor. Hab\'s auch in allen möglichen Varianten (#arle a img / a.img / #arle a.img usw.) probiert - beeindruckt ihn in keiner Weise. Aber vielleicht hast Du oder jemand anders noch einen anderen Trick auf Lager?

Mike_R

#259367

d-fens

Bonn,
12.02.2011, 11:41:36

@ Mike_R

Aufflackernder Rand bei img-link nicht abstellbar

> Leider hat dieser Eintrag im stylesheet aber überhaupt keine Änderung
> bewirkt; der Rand erscheint nach wie vor. Hab\'s auch in allen möglichen
> Varianten (#arle a img / a.img / #arle a.img usw.) probiert - beeindruckt
> ihn in keiner Weise. Aber vielleicht hast Du oder jemand anders noch einen
> anderen Trick auf Lager?

Könntest du uns den Quelltext zur Verfügung stellen? Vielleicht gibt es irgendwelche Wechselwirkungen, die sich aus dem Schnipsel nicht ersehen lassen.

--
„Tu es oder tu es nicht! Es gibt kein Versuchen.“
(Jedi-Meister Yoda)

#259369

Mike_R zur Homepage von Mike_R

Rosenheim,
12.02.2011, 12:23:11

@ d-fens

Aufflackernder Rand bei img-link nicht abstellbar

Hi,

> Könntest du uns den Quelltext zur Verfügung stellen? Vielleicht gibt es
> irgendwelche Wechselwirkungen, die sich aus dem Schnipsel nicht ersehen
> lassen.

natürlich gerne. Vielen Dank für Deine Antwort. Hier die Adresse http://www.alpsolution.de/knierer/index.html

Und hier das stylesheet:
body
{
font-family: courier, \"Avant Garde Medium BT\", Verdana, sans-serif;
background-repeat: no-repeat;
font-size: 36px;
color: #333;
text-align: center;
}

#background_agentur, #background_agentur2, #background_agentur3, #background_agentur4
{
position: absolute;
top: 0px; left: 144px; width: 980px; height: 594px;
background-repeat: no-repeat;
z-index: 1;
}

#background_agentur
{
background-image: url(images/agentur.jpg);
}

#background_agentur2
{
background-image: url(images/agentur2.jpg);
}

#background_agentur3
{
background-image: url(images/agentur3.jpg);
}

#background_agentur4
{
background-image: url(images/agentur4.jpg);
}

#background_termine
{
position: absolute;
top: 0px;
left: 144px;
width: 980px;
height: 594px;
background-image: url(images/lady_gespiegelt.jpg);
background-repeat: no-repeat;
z-index: 1;
}

#background_drykorn
{
position: absolute;
left: 144px; top: 0px;
background-repeat: no-repeat;
z-index: 1;
}

#drykorntext
{
position: absolute;
left: 365px; top: 75px;
background-repeat: no-repeat;
text-decoration: none;
z-index: 2;
}

#background_iheart
{
position: absolute;
left: 144px; top: 0px;
background-repeat: no-repeat;
z-index: 1;
}

#background_bags
{
position: absolute;
left: 144px; top: 0px;
width:980px; height:594px;
background-image: url(images/bags.jpg);
background-repeat: no-repeat;
z-index: 1;
}

#background_kontakt
{
position: absolute;
left: 144px; top: 0px;
width: 980px; height: 594px;
background-image: url(images/impressum.jpg);
background-repeat: no-repeat;
z-index: 1;
}

#navi
{
position: absolute;
left: 187px;
top: 0px;
width: 265px;
height: 594px;
background-repeat: no-repeat;
background-color: #000;
text-align: left;
z-index: 2;
}

#logo
{
position: relative;
left: 31px;
top:0 px;
width: 201px;
height:75px;
background: #000 url(images/logo_solo.jpg) no-repeat;
z-index: 3;
}
#logotext
{
position: relative;
left:10px; top:5px; width: 247px; height:18px;
margin-bottom: 11px;
background: #000 url(images/logo_text.jpg) no-repeat;
z-index: 3;
}

.line
{
background: #000 url(images/dotted_line.jpg) no-repeat;
margin-left: 25px;
left:0px; top:30px; width:204px; height:14px;
z-index: 3;
}

#menuaktiv
{
position: relative;
left:-43px; top:0px; width:155px; height:19px;
color: #000;
background-color: #fff;
z-index: 3;
}

#menuaktivlast
{
position: relative;
left:-43px; top:0px; width:245px; height:19px;
color: #000;
background-color: #fff;
z-index: 3;
}

a.menuaktivlink
{
text-decoration: none;
font-size: 16px;
font-weight: bold;
color: #000;
margin-left: 81px;
padding: 15px 0px 0px 0px;
}

.menu
{
text-decoration: none;
font-size: 36px;
}

a.menulink
{
left:0px; top:0px; width:150px; height:19px;
text-decoration: none;
font-size: 16px;
font-weight: bold;
color: #fff;
margin-left: 35px;
}

a.menulink:hover
{
background-color: #fff;
color: #000;
}

#arr
{
position: relative;
left:30px; top: 1px;
width:65px; height:45px;
}

#arle
{
float: left;
width: 30px;
cursor: pointer;
}

#arri
{
float: right;
width: 30px;
cursor: pointer;
}

#info
{
position: absolute; left:32px; top:300px; width:230px; height:200px;
font-size: 12px;
color: #fff;
}
/* a img { border:none; } */


Wie schon gesagt: Der Rand erscheint nur kurz beim Draufklicken auf die Pfeile.

Mike_R

#259388

Johann [Gast]

12.02.2011, 16:16:17
(editiert von Johann, 12.02.2011, 16:23:57)

@ Mike_R

Aufflackernder Rand bei img-link nicht abstellbar (ed)

Meinst Du den gepunkteten Rand? Das steuert man mit der CSS Eigenschaft \"outline\".
Du suchst möglicherweise \"outline:none\".

Gruß,
Johann

PS: Auf \"http://www.alpsolution.de/knierer/iheart.html\" hast Du auch noch einen Border um das gesamte Bild, falls es noch nicht aufgefallen ist. Aber ich glaube, da arbeitest Du eh noch dran. Der img-Tag hat nämlich auch einen mysteriösen Parameter \"with\" und die Pfeilnavigation tut\'s auch noch nicht.

#259419

Mike_R zur Homepage von Mike_R

Rosenheim,
12.02.2011, 21:54:27

@ Johann

Aufflackernder Rand bei img-link nicht abstellbar

Erst mal wieder vielen Dank für Deine Antwort.

> Meinst Du den gepunkteten Rand? Das steuert man mit der CSS Eigenschaft
> \"outline\".
> Du suchst möglicherweise \"outline:none\".

Schön wär\'s gewesen, wenn\'s endlich geklappt hätte; aber das scheint ein wirkllich hartnäckiger Fall zu werden. Hab jetzt dieses \"outline:none;\" an allen (un)möglichen Stellen in meinem stylesheet platziert und vielleicht knapp 20 Versuche gestartet, aber der Rand erscheint jedes Mal wieder hartnäckig beim Klick auf einen der Pfeile.

> PS: Auf \"http://www.alpsolution.de/knierer/iheart.html\" hast Du auch noch
> einen Border um das gesamte Bild, falls es noch nicht aufgefallen ist.

War mir vor lauter \'href-Rand\' beseitigen, noch nicht aufgefallen. Danke, ist jetzt weg!

> Aber ich glaube, da arbeitest Du eh noch dran.

Richtig!

> Der img-Tag hat nämlich auch einen mysteriösen Parameter \"with\" ...

Das sind scheinbar Fehler, die die Browser anstandslos schlucken, wenn das Bild nicht in einer anderen Größe vorliegt!

Die Pfeilnavigation soll jetzt nur bei einzelnen Seiten die Hintergrundbilder austauschen (ist nicht meine Idee!!) und funktioniert jetzt vorläufig nur auf der index.html. (Weitere Bilder fehlen mir noch!)

Aber vielleicht gibt\'s für meinen mysteriösen Rand doch noch eine Lösung?

Mike_R

#259422

Johann [Gast]

12.02.2011, 22:05:17
(editiert von Johann, 12.02.2011, 22:15:09)

@ Mike_R

Aufflackernder Rand bei img-link nicht abstellbar (ed)

> Schön wär\'s gewesen, wenn\'s endlich geklappt hätte; aber das scheint ein
> wirkllich hartnäckiger Fall zu werden. Hab jetzt dieses \"outline:none;\" an
> allen (un)möglichen Stellen in meinem stylesheet platziert und vielleicht
> knapp 20 Versuche gestartet, aber der Rand erscheint jedes Mal wieder
> hartnäckig beim Klick auf einen der Pfeile.

a:active {outline:none}

> Das sind scheinbar Fehler, die die Browser anstandslos schlucken, wenn das Bild nicht in einer anderen Größe vorliegt!

Nein. Es existiert kein Parameter \"with\". Du hast Dich da verschrieben und meinst \"width\".
Benutzt Du nicht den Firefox mit HTMLTidy AddOn und/oder Firebug? Damit siehste so was auf Anhieb.

Gruß,
Johann

#259463

Mike_R zur Homepage von Mike_R

Rosenheim,
13.02.2011, 11:01:30

@ Johann

Aufflackernder Rand bei img-link nicht abstellbar

Hallo Johann,

> a:active {outline:none}

ja, das war\'s - eigentlich so einfach - aber gewusst wie!! Wieder was Wichtiges dazugelernt!

> Benutzt Du nicht den Firefox mit HTMLTidy AddOn und/oder Firebug? Damit
> siehste so was auf Anhieb.

Bis jetzt nicht - muss ich mich mal umschauen!

Vielen Dank noch mal für Deine Hilfe und jetzt komm ich gleich zu der anderen netztreff-Baustelle!

Mike_R

Ansicht:   
Auf unserer Web-Seite werden Cookies eingesetzt, um diverse Funktionalitäten zu gewährleisten. Hier erfährst du alles zum Datenschutz