CSS hover und focus nicht auf die bilderlinks anwenden

Begonnen von bajazzo, 01 Februar 2007, 10:14:16

⏪ vorheriges - nächstes ⏩

0 Mitglieder und 1 Gast betrachten dieses Thema.

bajazzo

Hallo, ich mache neues design für meine Seite und irgendwie hriege ich den bogen mit Bilderlinks nicht raus.
Und zwar, wenn ich für die Links hover und focus vergebe, z.B. unterschteichen und hintergrund, will ich ausschliessen das dies auch auf die Bilderlinks gilt.
Beispiel: textlinks sollen beim hover effekt haben, Bilderlinks in Useraccount nicht.
Mit img {border:0px;} klappt das nicht.
ich hänge die ganze CSS, vielleicht hat jemand eine Idee.

body { background-color: #FFFFFF;}
* { font-family:Verdana,Helvetica,Sans-serif,sans-serif; font-size: 100.01%; color: #000000; line-height: 1.4em; }
br { line-height: 1em; }
/********************************************/
/* Loginform (div) oben rechts neben logo   */
/*  (erbt Globale Seiten Schriftgröße)      */
/********************************************/
#LoginForm { font-size: 0.70em; }
#LoginForm a { font-size: 1em; }
/********************************************/
/* Linien */
/********************************************/
hr { height: 1px; border: 0; background: #CCCCCC; color: #CCCCCC }
/********************************************/
/* Bilder */
/********************************************/
img { border:0px; }
/********************************************/
/* Links */
/********************************************/
a, a:link { font-size: 0.70em; color: #990000; text-decoration: none; }
a:visited { font-size: 0.70em; color: #990000; text-decoration: none;}
a:hover,
a:focus { font-size: 0.70em; color: #990000; text-decoration: none; border-bottom: #CCCCCC dashed 1px; border-top: #CCCCCC dashed 1px; background-color: #EFEFEF; }
a:active { font-size: 0.70em; color: #990000; text-decoration: none; }
/********************************************/
/* Überschriften */
/********************************************/
h1 { font-weight: bold; font-size: 1em; }
h2 { font-weight: bold; font-size: 1em; }
h3 { font-weight: bold; font-size: 1em; margin-bottom: 5px; }
h4 { font-weight: bold; font-size: 1em; }
h5 { font-weight: bold; font-size: 1em; }
h6 { font-weight: bold; font-size: 1em; }
/********************************************/
/* Suchfeld oben           */
/********************************************/
#searchTop { background-color: #EFEFEF; text-align: right; border-right: #CCCCCC 1px solid; width: 170px; font-size: 1em;}
#searchTop form { display: inline; }
#searchTop input {
background-color: #FFFFFF;
    font-size: 1em;
    font-weight: bold;
    color: #990000;
border-left: 0px;
    border-top: 0px;
    border-right: 0px;
    border-bottom: 0px;
    /*padding: 2px;*/
    /*height: 20px; */
/*padding-left: 3px;*/
}
#searchTop input.formbutton {
  color: #990000;
  background: url(../images/button_bg.png) repeat-x;
  text-align: center;
  font-size: 1em;
  font-weight: bold;
  border: 0px;
  width: auto;
  padding-left: 3px;
  padding-top: 0px;
  padding-right: 3px;
  padding-bottom: 3px;
  /*height: 20px;*/
}
/********************************************/
/* Linkzeile oben */
/********************************************/
#LinkLineTop {
font-size: 0.70em;
width: 100%;
    padding-top: 3px;
    padding-bottom: 3px;
    border-bottom: #cccccc solid 1px;
    border-top: #cccccc solid 1px;
}
#LinkLineTop a { font-size: 1em; }
/********************************************/
/* Blöcke links */
/********************************************/
.LeftBox { border-right: 0px; }
.LeftBoxTitle { font-size: 0.70em; font-weight: bold; margin-bottom: 3px; width: auto; }
.LeftBoxContent { font-size: 0.70em; margin-bottom: 8px; line-height: 1.2em; }
.LeftBoxContent a,
.LeftBoxContent a:visited,
.LeftBoxContent a:hover,
.LeftBoxContent a:focus,
.LeftBoxContent a:active { font-size: 1em;}
/********************************************/
/* Halter Zelle für Inhalte Mitte */
/********************************************/
.CenterBox { border: 0px; font-size: 0.70em; }
.CenterBox a,
.CenterBox a:visited,
.CenterBox a:hover,
.CenterBox a:focus,
.CenterBox a:active { font-size: 1em;}
/********************************************/
/*  Module Überschrift         */
/* (erbt CenterBox Schrift)                 */
/********************************************/
#ModuleTitle { font-weight: bold; margin-bottom: 5px; width: auto; }
/********************************************/
/* News, Artikel, News Fusszeile */
/* (erbt CenterBox Schrift) */
/********************************************/
.Content { text-align: justify; }
.Content a,
.Content a:visited,
.Content a:hover,
.Content a:focus,
.Content a:active { font-size: 1em; }
.Tiny { font-size: 0.80em; text-align: center; margin-top: 5px; }
.Tiny a,
.Tiny a:visited,
.Tiny a:hover,
.Tiny a:focus,
.Tiny a:active { font-size: 1em; }
/*****************************************************************/
/* Formular Elemente */
/* (in der Mitte erben die Form Elemente Content eigenschaften)  */
/*****************************************************************/
form { display: inline; margin: 0px; }
input { font-size: 0.95em; border:1px solid #CCCCCC; padding: 2px; height: 20px; }
input:focus { background-color: #EFEFEF; }
input.formbutton {
  color: #990000;
  background: url(../images/button_bg.png) repeat-x;
  text-align: center;
  font-size: 0.95em;
  font-weight: bold;
  border: 1px solid #CCCCCC;
  width: auto;
  padding-left: 3px;
  padding-top: 0px;
  padding-right: 3px;
  padding-bottom: 3px;
  height: 22px;
}
input.formcheckbox { background-color: transparent; border: none; padding: 3px; }
select { border:1px solid #CCCCCC; height: 20px;}
select:focus { background-color: #EFEFEF;}
textarea { border:1px solid #CCCCCC; overflow: auto; }
textarea:focus { background-color: #EFEFEF; }
/********************************************/
/* Halter Zelle für Blöcke rechts */
/********************************************/
.RightBox { border: 0px; }
.RightBoxTitle { font-size: 0.70em; font-weight: bold; margin-bottom: 3px; width: auto; }
.RightBoxContent { font-size: 0.70em; margin-bottom: 8px; line-height: 1.2em; }
.RightBoxContent a,
.RightBoxContent a:visited,
.RightBoxContent a:hover,
.RightBoxContent a:focus,
.RightBoxContent a:active { font-size: 1em; }
.RightBoxContent form { font-size: 1em;}
/********************************************/
/* Umfrage Block rechts */
/********************************************/
.Umfrage_block1 { background-color: #FFFFFF; width: auto; }
.Umfrage_block2 { background-color: #EFEFEF; width: auto; }
/********************************************/
/* Linkzeile unten (div) */
/********************************************/
#LinkLineBottom {
    font-size: 0.70em;
    text-align: center;
width: 100%;
    padding-top: 3px;
    padding-bottom: 3px;
    border-bottom: #cccccc solid 1px;
    border-top: #cccccc solid 1px;
}
#LinkLineBottom a { font-size: 1em; }
/********************************************/
/* Footer unten (div) */
/********************************************/
#FootMsg {
font-size: 0.65em;
    width: 100%;
    text-align: center;
background-color: #FFFFFF;
    margin-top: 0px;
margin-bottom: 5px;
}
#FootMsg a { font-size: 1em; }
/*******************************
ALT MUSS WEG !!!!!
********************************/
/*** ALT soll nach und nach Raus stattdessen ModuleTitle (div id) ***/
.moduletitle {
    background-color: #EFEFEF;
font-size: 1em;
font-weight: bold;
    height: 21px;
    border: #CCCCCC solid 1px;
    margin-bottom: 5px;
    background: url(../images/block_head.png);
}
th { font-weight: bold; }
.sitetitle {
font-family: Verdana, Helvetica, sans-serif;
font-size: 1em;
font-style: italic;
font-variant: small-caps;
font-weight: bold;
letter-spacing: 1px;
margin-left: 10px;
margin-top: 5px;
}
.storycat {
font-size: 1em;
font-weight: bold;

}
.viewbench {
background-color: #FFFFFF;
font-size: 1em;
}
Genie ist die grenzenlose Bereitschaft, sich Mühe zu geben.

henne

ZitatMit img {border:0px;} klappt das nicht.

kann ja auch nicht gehen  ;) Da da nicht gesagt wird das es sich um Links handelt  ;)

Mach mal so:

a img {border: 0px;}
bye Henne

don't click the blue "e" on your desktop, use Firefox

Jeden Tag verschwinden Rentner im Internet, weil sie gleichzeitig alt und entfernen drücken

bajazzo

soweit war ich auch schon, sorry das ich es nicht erwähnt habe.
es klappt auch nicht mit:
a img,
a:link img,
a:hover img,
a:focus img,
a:active img,
a:visited img { border: 0px;}
auch nicht mit ! important
:mad2:
auch nicht wenn ich die a img anweisung zu den classen hinzufüge
Genie ist die grenzenlose Bereitschaft, sich Mühe zu geben.

gabin

Hallo bajazzo,

probiere mit einen Punkt davor:
Zitat
.a img {...}
.a:link img {...}
.a:hover img {...}
.a:focus img {...}
.a:active img {...}
.a:visited img {...}

Gruß
gabin
Die beste Voraussetzung ist dieses learning by doing. Wenn man auf der Kabarettbühne mit drei Zuschauern im Saal anfängt und dann irgendwann ganze Hallen füllt.

henne

Hi,

dann versuchmal noch das zusätzlich:

img {border:none;}
bye Henne

don't click the blue "e" on your desktop, use Firefox

Jeden Tag verschwinden Rentner im Internet, weil sie gleichzeitig alt und entfernen drücken

bajazzo

vielen dank für euere mühe, aber inzw. glaube ich das dies (border so oder so) gar nicht lösungansatz sein kann.

es ist nun mal so das a border eine eigenschaft des link ist egal was drin ist (text oder bild). sogesehen funzen die browser (FF und IE7, mit den ich immer parallel teste) schon richtig.

ich hab alle vorschläge in allen varianten natürlich durchgetestet und keiner hat geholfen. die einzige erklärung dafür kann nur der ob.g. satz sein.

was ich in zwischen hinbekommen habe ist nicht ideal aber hilfreich, und zwar:
- links definieren mit text-decoration und nicht border
- wenn ich background-color für links mache kann ich das nicht eliminieren mit a img aber ich kann es überschreiben!

hier ein auszug aus der datei das jetzt funzt, wenn auch nicht mit dashed oder so:
a, a:link { font-size: 0.70em; color: #990000; text-decoration: none; }
a:visited { font-size: 0.70em; color: #990000; text-decoration: none;}
a:hover,
a:focus { font-size: 0.70em; color: #990000; text-decoration: underline overline; background-color: #F2F2F2; }
a:active { font-size: 0.70em; color: #990000; text-decoration: none; }
a img,
a:hover img,
a:focus img { border: 0px; background-color: #FFFFFF;}
Genie ist die grenzenlose Bereitschaft, sich Mühe zu geben.

henne

Zitatvielen dank für euere mühe, aber inzw. glaube ich das dies (border so oder so) gar nicht lösungansatz sein kann.

es ist nun mal so das a border eine eigenschaft des link ist egal was drin ist (text oder bild). sogesehen funzen die browser (FF und IE7, mit den ich immer parallel teste) schon richtig.

so ganz stimmt das nicht:

wenn du links z.B. so definierst:

a {border-bottom: 1px solid #cccccc;}

dann kann man es auch so für Bilder unterbinden (im Defaulttheme von pragmaMx wird das so praktiziert):

a img {border-bottom: 0px;}

oder halt none

ich vermute daher mal das die images irgendwo diese Eigenschaft vererbt kriegen, so genau hab ich mir Deine CSS nicht angeschaut. Falls Du noch ne Lösung suchst, kannst du mir ja mal das Theme zukommen lassen dann schau ich mal genauer.
bye Henne

don't click the blue "e" on your desktop, use Firefox

Jeden Tag verschwinden Rentner im Internet, weil sie gleichzeitig alt und entfernen drücken

bajazzo

ich danke dir,
die Theme ist noch in der Arbeit, aber ich schau gleich nach in wie weit die schon mit aktuellen Pragma läuft dann poste ich es.
Ich hätte schon gern die Möglichkeit die Text links mit background und border z.B. dashed zu machen.
ich brauch ein wenig, melde mich wieder.
Genie ist die grenzenlose Bereitschaft, sich Mühe zu geben.

bajazzo

ja doch, das geht.
falls dir auffällt das einiges nicht ganz so "pragma" ist, ist es absicht. :BD:
das wirklich einzige das die Theme noch geben soll ist die link border dashed + background ohne das die img davon betroffen sind.

[gelöscht durch Administrator]
Genie ist die grenzenlose Bereitschaft, sich Mühe zu geben.