Frage stellen

Bild am unteren Rand ausrichten (css) ... funktioniert nicht

8k Aufrufe
Gefragt in Webseiten HTML von petra65 Experte (1.8k Punkte)
Hallo,

ich habe ein Problem mit der Anzeige eines Bildes....

Die Homepage besteht aus 6 Bereichen (DIVs):
Seite, Navigation, Header, Linken Spalte, Rechten Spalte, Fuss.

Nun möchte ich in der rechten Spalte ein Bild einfügen, dieses soll IMMER am unteren rechten Rand ausgerichtet sein.

Ich habe es mit einem Hintergrundbild probiert (dieses wird erst gar nicht angezeigt), wenn ich eine Klasse definiere, so wird mir das Bild auch nicht angezeigt. Wo ich nun den Fehler mache weiss ich nicht ;-(

Hier mal der grundsätzliche Aufbau der Seite:

<html>
<head></head>
<body>
<div id="seite"> <!-- Seite -->
<div id="navigation"></div> <!-- Navigation -->
<div id="header"></div> <!-- Header -->
<div id="links"></div> <!-- Linke Spalte -->

<div id="rechts"> <!-- Rechte Spalte -->
<h3>Navigation</h3>
<ul>
<li><a title="Startseite" href="index.html">Home</a></li>
<li><a title="Startseite" href="seite2.html">Seite 2</a></li>

<h6>&nbsp;</h6>
<ul class="center">
<img src="images/orchidee-2.jpg" width="140" height="140" border="0" alt="">
</ul>

<img id="rechts" src="images/logo1.jpg" width="140" height="160" border="0" alt=""> </div>
<div id="footer"></div> <!-- Fuss -->

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


Weiss jemand wie das Problem zu lösen ist??


Vielen Dank im voraus und viele Grüße - Petra

17 Antworten

0 Punkte
Beantwortet von
die beiden Spalten sind unterschiedlich hoch, dadurch kann ein Bild in der rechten Spalte unten so aussehen, als wäre es weiter oben.

Lösung
A: feste Höhen vorgeben
B: ein beide Spalten umgebendes Element einbinden und in dem das Bild unten rechts platzieren

Code:
...
background:url(...) right bottom no-repeat #fff;
...

PS: div "seite" ist immer noch überflüssig, alle seine CSS-Eigenschaften kannst du einfach dem body geben
es gibt doppelte IDs
0 Punkte
Beantwortet von petra65 Experte (1.8k Punkte)
Hallo,

für Problem 1 (Listenpunkte) war padding-left die Lösung. Darauf wäre ich ja nie gekommen!!

Problem 2 (Bilden unten rechts anzeigen)
div "Seite" überflüssig, Eigenschaften dem "body" geben ...

Daran verstehe ich folgendes nicht:
"body" hat einen hellgrauen Hintergrund, und "seite" hat einen weissen Hintergrund. Wenn ich die Eigenschaften von "seite" in "body" einfüge, so erhalte ich einen komplett weissen (oder je nach Wert einen grauen) Hintergrund.
Aber ansich egal (oder?), denn ich habe nun "seite" als Element genutzt (Lösung B), und den Schmetterling dort als Hintergrundbild eingefügt - und es funktioniert !!! Er ist da (super). Und genau dort wo ich ihn haben wollte.....

Vielen, vielen Dank für die tolle Hilfe ...

Gruss - Petra
0 Punkte
Beantwortet von
Hi, kann aber mit einen anderen Browser schon nichtmehr klappen.
0 Punkte
Beantwortet von
gib die Eigenschaften, die du bislang dem body gegeben hast dem Element html, und die des div "seite" dem body

gemeint war in Lösung B übrigens ein Element, das nur die beiden Spalten beinhaltet

@Kolo: das klappt in jedem Textbrowser nicht
0 Punkte
Beantwortet von petra65 Experte (1.8k Punkte)
Hallo,

genau so ist es ... funktioniert im IE7 einwandfrei, im Opera und Firefox verrutschen die beiden Spalten leicht.

Morgen ist auch noch ein Tag - werde dann den Vorschlag aus Antwort 14 umsetzen.

Vielen Dank ...

Gruss - Petra
0 Punkte
Beantwortet von
im Opera und Firefox verrutschen die beiden Spalten
liegt vermutlich an Konflikten mit den browserinternen CSS-Einstellungen (jeder Browser nutzt ein eigenes CSS für alles, was du in deinem nicht festlegst - das ist in jedem Browser aber anders. Beim Firefox kannst du es einsehen, wenn du diese Adresse aufrufst: resource:///res/html.css).
Abhilfe: zu Beginn deines CSS erst einmal für alle Elemente alles festlegen, vor allem Abstände:
* {
padding:0;
margin:0;
}
0 Punkte
Beantwortet von petra65 Experte (1.8k Punkte)
Hallo,

habe nun das komplette css überarbeitet, beide Seiten befinden sich nun in in einem Element., html und css ist valiede ..... und es funktioniert im IE7, Mozilla und Opera!!

Schade, dass es hier keine Smilys gibt ;-)

Super auch der Tipp mit den css-Eigenschaften für den Firefox (müssen die es denn so kompliziert machen??)

Nochmals vielen Dank für die Hilfe ...

Gruss - Petra
Seite:
...