pragmaMx Support Forum

alles für Webmaster => Webseitengestaltung Allgemein => Thema gestartet von: bajazzo in 01 Februar 2007, 10:14:16

Titel: CSS hover und focus nicht auf die bilderlinks anwenden
Beitrag von: bajazzo in 01 Februar 2007, 10:14:16
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;
}
Titel: Re: CSS hover und focus nicht auf die bilderlinks anwenden
Beitrag von: henne in 01 Februar 2007, 10:27:44
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;}
Titel: Re: CSS hover und focus nicht auf die bilderlinks anwenden
Beitrag von: bajazzo in 01 Februar 2007, 11:09:56
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
Titel: Re: CSS hover und focus nicht auf die bilderlinks anwenden
Beitrag von: gabin in 01 Februar 2007, 13:29:50
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
Titel: Re: CSS hover und focus nicht auf die bilderlinks anwenden
Beitrag von: henne in 01 Februar 2007, 13:36:48
Hi,

dann versuchmal noch das zusätzlich:

img {border:none;}
Titel: Re: CSS hover und focus nicht auf die bilderlinks anwenden
Beitrag von: bajazzo in 01 Februar 2007, 14:16:46
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;}
Titel: Re: CSS hover und focus nicht auf die bilderlinks anwenden
Beitrag von: henne in 01 Februar 2007, 16:55:07
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.
Titel: Re: CSS hover und focus nicht auf die bilderlinks anwenden
Beitrag von: bajazzo in 01 Februar 2007, 17:06:20
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.
Titel: Re: CSS hover und focus nicht auf die bilderlinks anwenden
Beitrag von: bajazzo in 01 Februar 2007, 17:29:14
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]