Gruppen
- Top Gruppen
- Betriebsysteme
- Windows classik
- Linux
- BS-Sonstige
- Software
- Datenbanken
- Bildbearbeitung
- Audio/mp3/Video
- Security/Viren
- SW-Sonstige
- Hardware
- Mainboard/CPU
- Grafikkarten
- Peripherie
- Laptop/Notebook
- HW-Sonstiges
- Netzwerk
- Telefon,ISDN,Modem
- W-Lan
- NW-Sonstiges
- Programmierung
- PHP,ASP,Perl...
- Java,C++...
- Webseiten/HTML
- Sonstiges
- PC-Sonstiges
- Plauderecke
- SN Intern
- Test
/ Forum / Webseiten/HTML
Webseiten/HTML
Fragevon Petra65 vom 23.06.2021, 21:09 Options
Bild am unteren Rand ausrichten (css) ... funktioniert nicht
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> </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
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> </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
Antwort 1 von Petra65 vom 23.06.2021, 21:56 Options
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
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
Antwort 2 von gast42 vom 23.06.2021, 22:43 Options
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
Dein Code ist so nicht valide:
wozu soll das div mit der id "seite" gut sein? das ist komplett überflüssig, da body dasselbe macht
Antwort 3 von Petra65 vom 24.06.2021, 06:32 Options
Hallo,
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.
Ist geändert
Richtig, sorry war ein Kopierfehler.
kann ich im Originalcode nicht finden (bestimmt ausversehen gelöscht)
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
Zitat:
...was heißt "mit einem Hintergrundbild probiert", "wenn ich eine Klasse definiere"?
...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.
Zitat:
innerhalb <ul> muss <li> folgen.
innerhalb <ul> muss <li> folgen.
Ist geändert
Zitat:
es gibt 2 Elemente mit der id "rechts"
es gibt 2 Elemente mit der id "rechts"
Richtig, sorry war ein Kopierfehler.
Zitat:
</ul> fehlt einmal
</ul> fehlt einmal
kann ich im Originalcode nicht finden (bestimmt ausversehen gelöscht)
Zitat:
wozu soll das div mit der id "seite" gut sein? das ist komplett überflüssig, da body dasselbe macht
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
Antwort 4 von gast42 vom 24.06.2021, 07:03 Options
Zitat:
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.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.
Zitat:
könnte man auch Container nennen, in diesem Container ist dann alles andere zu finden.
was exakt der Definition von body entsprichtkönnte man auch Container nennen, in diesem Container ist dann alles andere zu finden.
Zitat:
Body und Seite haben unterschiedliche Formatierungen
das ist gelinde gesagt UnsinnBody und Seite haben unterschiedliche Formatierungen
Antwort 5 von kicia vom 24.06.2021, 13:32 Options
unten ausrichten ist immer etwas schwierig, finde ich.
Ich löse das Problem mit einer Tabelle:
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.
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.
Antwort 6 von Petra65 vom 24.06.2021, 19:56 Options
@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 !!
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 !!
Antwort 7 von gast42 vom 25.06.2021, 06:51 Options
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.
Zitat:
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).Klarer geht doch wohl nicht !!
Antwort 8 von Petra65 vom 25.06.2021, 07:13 Options
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:
http://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
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:
http://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
Antwort 9 von derpfleger vom 25.06.2021, 10:35 Options
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.
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.
Antwort 10 von derpfleger vom 25.06.2021, 11:08 Options
Ach, gerade gesehen: du kannst die padding-left-Angabe natürlich auch in deinem
#links ul {}Antwort 11 von gast42 vom 25.06.2021, 19:23 OptionsLösung
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
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
Antwort 12 von Petra65 vom 25.06.2021, 22:23 Options
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
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
Antwort 13 von Kolo vom 26.06.2021, 13:40 Options
Hi, kann aber mit einen anderen Browser schon nichtmehr klappen.
Antwort 14 von gast42 vom 26.06.2021, 20:06 Options
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
gemeint war in Lösung B übrigens ein Element, das nur die beiden Spalten beinhaltet
@Kolo: das klappt in jedem Textbrowser nicht
Antwort 15 von Petra65 vom 27.06.2021, 00:16 Options
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
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
Antwort 16 von gast42 vom 27.06.2021, 09:22 Options
Zitat:
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).im Opera und Firefox verrutschen die beiden Spalten
Abhilfe: zu Beginn deines CSS erst einmal für alle Elemente alles festlegen, vor allem Abstände:
* {
padding:0;
margin:0;
}
Antwort 17 von Petra65 vom 27.06.2021, 21:51 Options
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
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
Ähnliche Themen
Horizontales und vertikales Zentrieren eines div-Containers mit CSS
derpfleger 05.08.2006 - 7580 Hits - 1 Antwort
Listen mit CSS in IE, Firefox und Opera gleich ausrichten.
derpfleger 03.10.2007 - 2298 Hits -
ich habe eine css TEMPLATE im dreamwiver personalisiert und im pc getestet, hat funktioniert aber auf meinem server nicht. wieso?
simetrala 21.03.2008 - 19 Hits - 4 Antworten
css: bild in div anders behandeln
rastus 12.11.2008 - 31 Hits - 8 Antworten
Hinweis
Diese Frage ist schon etwas älter, Sie können daher nicht mehr auf sie antworten. Sollte Ihre Frage noch nicht gelöst sein, stellen Sie einfach eine neue Frage im Forum..
Neue Einträge
