in CSS eine klasse als ausnahme bei a:focus angeben

winzigweich

Hallo alle,

lerne so langsam ein wenig CSS und hab da mal ein Problem

auf allen Unterseiten habe ich neben einer menuezeile -
die aus links auf verschiedene unterseiten besteht
die UK-Flagge stehen.
durck click darauf switched man zwischen englich und deutsch beliebig hin und her
wobei die länderfahne mit wechselt .

aber auf ewiner seite auf der ich beispielfotos zeige klappt es nicht mehr ?
ich habe versucht mit a:focus img + :not(.flagge) { ..... } die klasse auszuschließen
klappt allerdings sogar nicht wie ich möchte !
css validator zeigt alles grün

wäre schön wenn jemand ne idee hätte

danke

modem-kind

du schließt mit :not(.flagge)
ja nicht die Klasse aus sondern nur die Eigenschaften: Werte; FÜR diese Klasse an dieser Stelle ! siehe1)
die die anderen Elemente dann aber Alle erhalten !
1) hinweis: nur diese Eigenschaften.. die die an anderer Stelle für die Klasse .flagge stehen bleiben gültig !

also was möchtest Du bei der Klasse ausschließen ?
das das Bild da nicht angezeigt wird.. ?
m und das nur bei :focus auf a ?? merkwürdig ?? ( +kaum jemand nutzt die Tabtaste für A Elemente )

verstehe nur die hälfte .
ansonsten kannst Du eine Klasse für ein bestimmtes Element nur
mit Javascript entfernen Remove /n oder hinzufügen add /en
Gruß modem-kind

winzigweich

hallo und erstmal danke,

also ich möchte bei klick auf sie flagge den engl. text bzw. die enl. seite aufrufen.
ich bekomme aber ikmmer nur die flagge gezoomt ? schade ich häng noch die daten an ev. hilft es ja

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
    <link href="muster.css" rel="stylesheet">
      <style type="text/css">



       </style>
       <title> T i t l e</title>
  </head>
 
<body>
    <h1>    titel </h1>
    <h2>
        <a href="file:start.html">Startseite</a> |         
        <a href="file:s2.html">seite2</a> | 
        <a href="file:s3.html">seite3</a> |   


    </h2>
<br><br>


<div class="alsbilderzeile">  /*  div #1 */


<div class="film">
 <a href="#"><img src="bilder/bild1.jpg" alt="bild1"></a>
<br>
<div class="beschreibung">TEXt bla bla</div>
 </div>




<div class="film">
 <a href="#"><img src="bilder/bild2.jpg" alt="bild2"></a>
<br>
 <div class="beschreibung">TEXt bla bla</div>
</div>


<div class="film">
 <a href="#"><img src="bilder/bild3.jpg" alt="bild3"></a>
 <div class="beschreibung">TEXt bla bla</div>
</div>




</div> /* div für die bilderzeile */  




<div class="transparenz-aus">    
         <div id="fa1-oben">
           <img src="bilder/fa1-logo.jpg" alt="fa1-logo">
         </div>


<div class="flagge">
 <a href="file:referenzen-eng.html"><img src="bilder/grossbritannien.gif" alt="flag-gb"> </a>
</div>


 </div>
</body>
</html>


<!--            hier kommt die muster.css -->


/* muster.css */


h1{
 margin-left: 125px;
 font-size:25pt;
 font-family:Arial;
 color:blue;
 background: #d4d4d4
}


h2{
 margin-left: 125px;
 font-size:20pt;
 font-family:Arial;
 color:black;
 background: #d4d4d4
}


h3{
 margin-left: 125px; 
 font-size:20pt;
 font-family:Arial;
 color:#000000;
 background: #d4d4d4;
}


#fa1-oben {
  position: absolute;
  top: 25px;
  left: 5px;
}


.flagge {


  position: absolute;
  top: 78px;
  left: 1175px;
  font-size: 16pt;
}




.alsbilderzeile {
 width:3550px;
 float:left ;
 overflow: scroll;
}




div.film { 
         /*top right bottom left*/ 
  margin: 350px 10px 1px 10px;
  border: 1px solid #000000;
  float: left;
  text-align: center;
  background: #d4d4d4 top left no-repeat;
  font-size: 10px;
}


div.film img
{
  display: inline;
  margin: 25px 10px 1px 10px;
  border: 1px solid #d4d4d4;
  height: auto;
  width: 250px;

}




div.beschreibung 
{
  text-align: left;
  font-weight: normal;
  font-size:16pt;
  margin: 10px 10px 10px 10px;
  color: #000000;
  background-color: #ffffff;
  max-width:225px;
} 


/*z-index zzt wg.8bilder =9  */


a:focus img +  :not(.flagge)  { 

                position:fixed;        
                border: 2em solid #eee;
                border-radius: 1em;
        left:350px;
        top:  150px;
                width: 50%;
        z-index:9;
                overflow:hidden;
        box-shadow: 1px 1px 5px #333;                

}








/* muster.css   ******** EOF ************* */

Alles anzeigen

modem-kind

Hallo winzigweich,
also ich weiß ja nicht wo Deine - referenzen-eng.html ist
im Stammverzeichnis.. ( gleicher Ordner) wo auch die index.html ist /liegt oder nicht -
aber wenn ja - OK ! ----------- ( ansonsten pack / schieb sie da hin )

dann reicht <a href="referenzen-eng.html"><img usw. usw </a> -das funktioniert - Relative Adressierung -
OHNE das file: davor ( das ist sowieso ein Sonderfall - )

probiere es mal aus : <a href="referenzen-eng.html"><img src="bilder/grossbritannien.gif"></a>

beim <img src="bilder/grossbritannien.gif"/>
und <img src="bilder/bild1.jpg"/>
usw. hast Du es ja auch so gemacht ( Relative Adressierung ) und das Bild wird angezeigt richtig

schreibe aber bitte beim img am Schluß /> statt nur > ..ist richtiger auch wenn beides funktioniert meistens -

-------------------------------------------------------------------------------------------
zum mit file:

WAS Du da hast ist Lokale Absolute Adressierung - das funktioniert auch..
Aber -
muss dann richtig geschrieben werden !

dazu brauchst du sowas
file:///K:/Ordner/referenzen-eng.html.html ---- und nicht nur >> file:referenzen-eng.html

Erklärung:
1.) file: ( Schlüsselbefehl )
2.) meinComputer also ///
3.) Festplattenlaufwerksbuchstabe mit Doppelpunkt und / dahinter also meist C:/
4.) dann - wenn in einem Ordnerpfad - den angeben auch mit / dahinter meinOrdner/
5.) dann den Dateinamen mit .(punkt) und html dahinter .html

Also: <a href="file:///C:/meinOrdner/referenzen-eng.html"><img src=usw. usw. /></a>

nach dem anklicken wenn wie oben beschrieben Relativ siehst Du in der Browser Adressleiste dann auch welchen
Absoluten Pfad der Computer mit Browser genommen hat in richtiger Absolut Schreibweise -

den letzt endlich ensteht auch aus dem Relativen ein Absoluter Pfad

DAS WÜRDE dann aber im Richtigem Internet NICHT mehr Funktionieren
Nur auf Deinem eigenem Computer

Eigene Dateien immer Relativ Adressieren
PS. googel u lies ein bisschen dazu

Gruß aus Hamburg modem-kind

winzigweich

Hallo modem-kind,

moin moin auch aus dem hohen norden .

erstmal vielen danke für das ansehen meines problems !

Wenn ich das einbaue bekomme zwar das umschalten zwischen den sprachen wieder hin aber die angezeigten bilder werden nicht mehr durch anklicken groß angezeigt sondern nun passiert beim click auf ein bild NIX ?, nur beim click auf englisch geht es zur datei auf englisch und von dort wieder zurück !

Irgendwo klemmt was ! hast du noch ne idee oder einen anderen ansatz ?

ich trink erstmal nen kaffee und suche weiter .
mfg
Michael

djheke

Beschäftige Dich doch erst mit HTML5/CSS3. Weil, Dein HTML sieht schlimm aus. Hier mal ein Beispiel(Geht bestimmt noch besser)

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>flexbox</title>
<style>


* {
 margin:0;
 padding:0;
 text-decoration:none;
 box-sizing:border-box;
}




header {
 display:flex;
 background:#ead;
}


header img {
 flex-basis:100px;
}


header h1 {
 padding:17.5px;
}


nav {
 display:flex;
 background:#add;
}


nav a {
 flex:1;
 padding:10px;
} 


nav .en {
 text-align:right;
}
main {
 display:flex;
 background:#dea;
}


figure {
 margin:10px;
 padding:10px;
 border:1px solid #000;
 flex:1;
}


figure img {
 width:100%;
}


footer {
 padding:10px;
 background:#333;
 color:#fff;
}
</style> 
</head>
<body>
<header>
<img src="logo.png" alt="logo">
<h1>Meine Homepage</h1>
</header>


<nav>
<a href="start.html">Startseite</a>         
<a href="s2.html">seite2</a> 
<a href="s3.html">seite3</a> 
<a class="en" href="referenzen-eng.html"><img src="en.gif" alt="flag-gb"> </a> 
</nav>


<main>


<figure>
 <a href="#"><img src="bild1.jpg" alt="bild1"></a>
   <figcaption>TEXt bla bla</figcaption>
</figure>


<figure>
 <a href="#"><img src="bild1.jpg" alt="bild1"></a>
   <figcaption>TEXt bla bla</figcaption>
</figure>


<figure>
 <a href="#"><img src="bild1.jpg" alt="bild1"></a>
   <figcaption>TEXt bla bla</figcaption>
</figure>




<figure>
 <a href="#"><img src="bild1.jpg" alt="bild1"></a>
   <figcaption>TEXt bla bla</figcaption>
</figure>


</main>


<footer>Ende</footer>
</body>
</html>

Alles anzeigen

modem-kind

Hallo winzigweich,
also in deinem css stand nie was
das die Bilder Größer erscheinen lässt

(oder Du hast hier einen anderen Code gesendet )

wenn ich richtig versteh willst es so !
kopiere das mal in den css Abschnitt -

div.film img:hover {
animation: bigger 2s forwards; } /* 2s = 2 Sekunden .. kannst auch ändern zb 4s */
@keyframes bigger {
from { transform: scale(1.0); }
to { transform: scale(2.0); } /* auch zb 1.4 oder 1.7 oder 2.3 usw. geht - probiere*/
}

das ist aber für Deinen alten Html Code
nicht für den neuen von djheke -

der Dir ja gezeigt hat wie es sauberer gemacht wird Heute in Html5

( :hover ist allerdings heutzutage im echtem I-Netz teils schwierig -
weil Handys das ja nicht wirklich kennen ) wie du wohl schon weist ---

Gruß modem-kind

winzigweich

Hallo und moin moin,

erstmal auch danke an djheke also zur lösung von modemkind => super es funzt
nur sind nun die bilder nun in der vorschau RIESIG UND ZOOMEN NOCH GRÖẞER ?
Das kann ich aber handeln , hoffe ich.
Das post von djheke ist zwar schick aber irgendwie bekomme ich das nicht zum laufen,
mittlerweile arbeite ich nun schon an der x-ten lösung und die klappt hier mal der Code
also HTMLab dem <HEAD bleibt es fast unverändert .

Code

/*<![CDATA[*/
#gallery_position { 
   margin: 10px;
}


#gallery {
   position: relative;
   width: 3200px;
   height: 150px;
   border: 1px solid #000000;
   background-color: #FFFFFF;
}


#gallery img {
   width: 600px;
   height: 300px;
   margin: 25px;
}


#gallery a, #gallery a:visited {
   display: block;
   float: left;
   background-repeat:no-repeat;
   width: 160px;
   height: 120px;
   margin: 10px;
   border: 1px solid #000000;
   text-decoration: none;   
}


#gallery a span, #gallery a strong {
   display: none;
}


#gallery a span em {
   display: block;
   background-repeat:no-repeat;
   width: 800px;
   height: 600px;
   margin: 0;


}


#gallery a:focus, #gallery a:active  {
   border: 1px solid #666666;
}


#gallery a:focus span, #gallery a:active span  {
   display: block;
   position: fixed; /*absolute; */

   left: 260px;
   top: 225px;
   width: 800px;
   height: 600px;
   z-index:1;
   font-size: 0.8em;
   color: #000000;
}




#gallery a:focus strong, #gallery a:active strong  {
   position: fixed;
   display: block;
   left: 27px;
   top: 87px;
   width: 800px;
   height: 600px;
   background-color: #EFEDEC;
   color: #1199FF;
   font-size: 0.8em;   
}


/*]]>*//*]]>*/

Alles anzeigen

in der .css sthe nun allewrdings gar nix mehr es ist wirklich ne "null-byte.css"

Tags