Ausnahmen in CSS
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
achse
anwendung
ausnahme
beispiel
bild
code
container
display
festlegen
frage
hintergrundbild
inhalt
linken rand
problem
regel
schummeln
seitenrand
text
verzichten
zweite vorkommen
-
Hallo,
wisst ihr, wie man bei CSS(3) Ausnahmen festlegen kann?
Ich bin ein blutiger Anfänger und versuche mir gerade, etwas zusammenzuschustern...
Damit man sich vorstellen kann, wie meine Seite vom Design her aufgebaut sein soll (nur das Wichtigste für die Frage):
Kombination aus HTML5, CSS3, PHP(5), JS und evtl. MySQL(5).
Am rechten und linken Rand sind jeweils 10% der Breite freigelassen, in der Mitte sind Navigation und Inhalt etc. in solchen "Rahmen" (ehem. <div>-Container, in HTML5 <header>, <nav>, <section> etc.) organisiert.
Das Hintergrundbild soll jedoch für jeden Seitenaufruf aus 12 gleich großen Bildern (hg1.jpg bis hg12.jpg) neu definiert/geladen werden. Erst wollte ich das einfach nur im Stylesheet mit PHP machen, aber dann hat Firefox das Stylesheet einfach aus dem Cache genommen und nicht neu geladen bei erneutem Seitenaufruf, was ja auch eigentlich sinnvoll ist, nur nicht für meine Anwendung. Das Gleiche, wenn man es ins HTML per <body background="..."> etc. einbindet. Also habe ich mich entschieden, das Bild als "normales" Bild einzubinden, damit es immer neu geladen wird. So habe ich das gemacht:
<body> <img id="hgbild" src="<?php $hg = rand(1,12); echo "$hg.jpg"?>" alt="Hintergrundbild">
Ich habe u. a. folgende Regeln im Stylesheet gesetzt (für meine Frage Uninteressantes im Beispiel rausgelöscht):
body { padding-left: 10%; padding-right: 10%; } img { display: block; width: 100%; border: 0; } #hgbild { width: 100%; height: 100%; left: 0px; top: 0px; z-index: 0; min-height: 100%; min-width: 100%; resize: both; }
Wie jedem sicher auffällt, sind da viele Sachen doppelt gemoppelt. Wahrscheinlich ist die Lösung auch alles andere als optimal.
Mein Problem: Das Bild wird natürlich jetzt auch nur in den mittleren 80% des Bildschirms angezeigt (bzw. nein: es steht nach rechts sogar über) und alle anderen Inhalte werden darunter (y-Achse/vertikal gesehen) dargestellt. Außerdem will ich, dass es fixiert wird, also nicht mitgescrollt, und dass die anderen Inhalte darüber (z-Achse/"näher am Mensch") dargestellt werden. Wie kriege ich es hin, dass es nicht mehr übersteht, sondern runterskaliert wird, sodass es an einer Seite genau so groß ist wie das Browserfenster (bzw. die dargestellte Website oder so, jedenfalls 100%) und an der anderen Seite größer oder gleich und es fixiert ist und halt die anderen Kriterien eines typischen Hintergrundbilds erfüllt?
Kann man z. B. die Ausnahme machen, dass die Padding-Regel für den Body hier nicht gilt oder mit einem negativen Margin schummeln?
Danke für jede Hilfe -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Warum nimmst du Body mit rechts und links 10%?
Für mich wäre einleuchtender, wenn du eine Ebene mit dem "Hintergrundbild" hast welches die ganze breite haben soll dass du diese so beibehälst und nur die darüber liegende Ebene für deinen Text / Liste mit dem Seitenrand belegst
-
Dein Problem in Bezug auf
Erst wollte ich das einfach nur im Stylesheet mit PHP machen, aber dann hat Firefox das Stylesheet einfach aus dem Cache genommen und nicht neu geladen bei erneutem Seitenaufruf, was ja auch eigentlich sinnvoll ist, nur nicht für meine Anwendung. Das Gleiche, wenn man es ins HTML per <body background="..."> etc. einbindet.
kann ich nicht nachvollziehen, möglicherweise war etwas an deinem Code nicht in Ordnung.
Hier findest du ein Beispiel, dass auf jeden Fall funktioniert
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Wechselnde Hintergrundfarbe / Wechselndes Hintergrundbild</title> <style> #wrapper{ margin-left:10%; margin-right:10%; } /* Variante 1 : Zuweisung zu body */ body.hg1{ background-color:red; } body.hg2{ background-color:blue; } body.hg3{ background-color:grey; } body.hg4{ background-color:silver; } body.hg5{ background-color:yellow; } body.hg6{ background-color:olive; } body.hg7{ background-color:orange; } body.hg8{ background-color:cyan; } body.hg9{ background-color:lemon; } body.hg10{ background-color:olive; } body.hg11{ background-color:brown; } body.hg12{ background-color:green; } /* Variante 2 : Zuweisung zu einem anderen Element */ /* deaktiviert */ /* .hg1>#wrapper{ background-color:red; } .hg2>#wrapper{ background-color:blue; } .hg3>#wrapper{ background-color:grey; } .hg4>#wrapper{ background-color:silver; } .hg5>#wrapper{ background-color:yellow; } .hg6>#wrapper{ background-color:olive; } .hg7>#wrapper{ background-color:orange; } .hg8>#wrapper{ background-color:cyan; } .hg9>#wrapper{ background-color:lemon; } .hg10>#wrapper{ background-color:olive; } .hg11>#wrapper{ background-color:brown; } .hg12>#wrapper{ background-color:green; } */ </style> </head> <body class="hg<?php $hg = rand(1,12); echo "$hg"?>"> <div id="wrapper"> <p>Text</p> </div> </body> </html> -
Du kannst mit meta-Tags und auch PHP-Headern das neuladen der CSS erzwingen, zur Not generisch ne kleine ID hintenran an den Dateinamen damit der Browser denkt es sei ne generische Anfrage und auf jeden Fall neu lädt.
<link rel="stylesheet" type="text/css" href="style/app.css?RANDOMZAHL" />
Ansonsten ist es sinnvoller auf Ausnahmen zu verzichten und dafür lieber eine neue Class einzuführen, die dann eben bei diesem Ausnahme-Element fehlt.
Auch gibt es einige CSS-Funktionen, die ähnliches erlauben, wie bspw.
.my-class:nth-child(even)
welches bspw. nur jedes zweite Vorkommen von "my-class" beachten würde. -
Vielen Dank für alle Tipps und Ideen!
@mein-wunschname: Klappt perfekt, danke vielmals! -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
