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 petra65 Experte (1.8k Punkte)
Hallo,

evtl. hilfreich ist das css (sorry - ich vergass) ....


#rechts {
float:left;
margin:0 0 20px 20px;
width:235px;
}

/* Formatierungen Navigation (Rechte Spalte) */
#rechts ul {
list-style:none;
margin:0 0 0 0;
}

#rechts ul li {
display:block;
margin:0 0px 0 0;
padding:0 0 0 16px;
}

#rechts ul li a {
text-decoration:none;
color:#666;
}

#rechts ul li a:hover {
color:#75263B;
font-weight:bold;
}

.center{
text-align:center;
}

Gruss - Petra
0 Punkte
Beantwortet von
um welches Bild dreht es sich, was heißt "mit einem Hintergrundbild probiert", "wenn ich eine Klasse definiere"?

Dein Code ist so nicht valide:
[*]innerhalb <ul> muss <li> folgen.
[*]es gibt 2 Elemente mit der id "rechts"
[*]</ul> fehlt einmal

wozu soll das div mit der id "seite" gut sein? das ist komplett überflüssig, da body dasselbe macht
0 Punkte
Beantwortet von petra65 Experte (1.8k Punkte)
Hallo,

...was heißt "mit einem Hintergrundbild probiert", "wenn ich eine Klasse definiere"?

Ich wollte das Bild eigentlich als Hintergrundbild einfügen (background-image), da wurde das Bild erst gar nicht angezeigt,
auch mit div bzw. class hatte ich keinen Erfolg.

innerhalb <ul> muss <li> folgen.

Ist geändert

es gibt 2 Elemente mit der id "rechts"

Richtig, sorry war ein Kopierfehler.

</ul> fehlt einmal

kann ich im Originalcode nicht finden (bestimmt ausversehen gelöscht)

wozu soll das div mit der id "seite" gut sein? das ist komplett überflüssig, da body dasselbe macht

könnte man auch Container nennen, in diesem Container ist dann alles andere zu finden. Body und Seite haben unterschiedliche Formatierungen.

Das css ist übrigens absolut valide, im html stecken noch kleine Fehler.

Ich habe jetzt einfach im footer eine Box definiert, in dieser wird das Bild angezeigt - da stört mich, dass das Bild unter den Spalten ist, und nicht neben der linken Spalte (also in der rechten).

Naja - im Notfall würde ich es dann eben so lassen.

Vielen Dank und viele Grüße
Petra
0 Punkte
Beantwortet von
Ich wollte das Bild eigentlich als Hintergrundbild einfügen (background-image), da wurde das Bild erst gar nicht angezeigt,
auch mit div bzw. class hatte ich keinen Erfolg.
das steht so schon im ersten Posting! Meinst du ernsthaft, deine Antworten auf meine Nachfragen würden das Problem irgendwie erhellen? "geht nicht" - Nachfrage: "was genau geht nicht?" - "Na, geht nicht" das ist ein typischer Kindergartendialog, netterweise zeigen einem die Kinder dort wenigstens das vermeintlich defekte Spielgerät.

könnte man auch Container nennen, in diesem Container ist dann alles andere zu finden.
was exakt der Definition von body entspricht
Body und Seite haben unterschiedliche Formatierungen
das ist gelinde gesagt Unsinn
0 Punkte
Beantwortet von kicia Mitglied (939 Punkte)
unten ausrichten ist immer etwas schwierig, finde ich.
Ich löse das Problem mit einer Tabelle:

<table><tr><td style="vertical-align:bottom; height:200px; width:100px; border:solid 1px; text-align:right">
test
</td></tr></table>

Das hat jedenfalls bei mir als einzige Lösung alle Tests bestanden.

Möglicherweise wäre ein span mit line-height = gewünschteHöhe geeignet.

rechts ausrichten mit float:right oder text-align:right, je nach Lösungsansatz.
0 Punkte
Beantwortet von petra65 Experte (1.8k Punkte)
@Gast24

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

Kindergarten?? Klarer geht doch wohl nicht !!
0 Punkte
Beantwortet von
Nochmals, ganz einfach: was auch immer du da gemacht hast, es war offensichtlich fehlerhaft. Wie wäre es also, wenn du endlich mal mit der Sprache rausrücken würdest, was du da konkret gemacht hast, damit ich dir endlich sagen kann, was daran falsch war.
Klarer geht doch wohl nicht !!
doch, doch, das geht sehr viel klarer! ZB mit dem fraglichen Quellcode (und den nicht wieder willkürlich beschnippeln wie in den ersten beiden Postings).
0 Punkte
Beantwortet von petra65 Experte (1.8k Punkte)
Hallo,

du hast ja recht - sorry - es fällt mir unheimlich schwer ein Problem genau zu beschreiben.

Ich habe mal eine Testseite hochgeladen, diese ist zu finden unter:
www.p-henning.de/mb-index.html

Hier das komplette css:
www.file-upload.net/download-1724561/inhalt.css.html

Es geht mir um den Schmetterling in der rechten unteren Ecke, dieser befindet sich nun in der Fußzeile - ich möchte diesen aber in der rechten Spalte unten rechts haben (damit er neben dem Text der linken Spalte zu sehen ist). Und da der linke Bereich, je nachdem wieviel Text dort ist, immer unterschiedlich lang ist, kann ich dieses Bild ja nicht an eine absolute Position setzen.

Und was leider auch nicht funktioniert sind die Listenpunkte im linken Bereich, egal ob Formatierung über css oder Direktformatierung ... diese werden einfach nicht angezeigt!!


Vielen Dank und viele Grüße
Petra
0 Punkte
Beantwortet von derpfleger Experte (1.5k Punkte)
Nun, dann erst mal auf die Schnelle das Listenpunkt-Problem:

Gebe der Liste eine eigene id und füge dort ein padding ein (so ca 20px), dann zeigt auch der IE7 die Listenbullets an. Dabei musst du natürlich auch die Gesamtbreite der Liste anpassen, sonst verrutscht dein Layout. Einfach die width-Angabe weglassen für die Listen-id wäre am einfachsten.

Gruß derpfleger

By the way: als Zusatzinfo für Darstellungsprobleme ist auch immer sehr hilfreich, in welchen Browsern (incl. Versionsnummer) du dein Layout getestet hast.
0 Punkte
Beantwortet von derpfleger Experte (1.5k Punkte)
Ach, gerade gesehen: du kannst die padding-left-Angabe natürlich auch in deinem
#links ul {}
unterbringen.
Seite:
...