✔ CSS Ausrichtung + Text + bottom

Status
Nicht offen für weitere Antworten.
J

jandark

Grünschnabel
Hallo Leute,

ich bin nicht ganz unbedarft was CSS anbelangt, also das schon einmal vorab.:o)

Jetzt hab ich aber doch ein Problem. Ich habe 1div in dem sich wiederum 1-2 div's befinden. In letzterem steht Text. Genau dieses letzte div, soll automatisch unten rechts am Rand des "großen" div's ausgerichtet werden.

verschiedene Versuche mittels css scheiterten bis dato. Hier mal eines von vielen probierten (ähnlichen) Beispielen:

div.content {

margin:0 auto;
margin-bottom: 20px;
text-align: right;
bottom:auto;
padding-right:10px;
padding-top:20px;
FONT-FAMILY:Verdana,Helvetica,sans-serif;
color:#CCCCCC;
font-size:12px;
text-decoration: none;
}

auch das weglassen oder hinzufügen von Varianten mittels bottom haben nicht funktioniert. Im Forum habe ich darüber auch nichts gefunden. Vielleicht habt ihr noch eine Idee? Wäre super nett. Danke schon mal im voraus

jandark
 
Hi,

nach oben rechts bekommst Du den div mit float: right; width: blah;

Allerdings muß dieser div dann im Quelltext vor dem linken div stehen, was für die Serialisierbarkeit nicht so toll ist. Nach unten könntest Du den div eventuell mit position: relative oder sogar mit position: abolute bekommen. Allerdings verstehen position: absolute nur die wenigsten Browser so wie vom w3c vorgesehen. Insbesondere der IE macht hier allerhand Merkwürdigkeiten.

Nur so als grundsätzliche Idee...
 
Grundsätzlich wird das zuletzt eingebettete DIV immer am unteren Rand des Eltern-DIVs angeordnet und der Text mit text-align:right rechtsbündig ausgerichtet.

Da es bei dir aber nicht funktioniert, und du uns die CSS-Formatierungen des Eltern-DIV nicht mitgeteilt hast, kann ich jetzt nur vermuten, wie sich das komplette Layout / DIV-Modell zusammensetzt.

In diesem Workaround befindet sich das DIV.footer außerhalb des DIV.mainBox und besitzt eine feste Höhe 20px, um die (plus Rahmenstärke des DIV.mainBox) das DIV mit Hilfe von margin-top:-21px nach oben geschoben wird.

Wie gesagt, ist ein Workaround ;)

Code: 
html, body
{
height: 100%;
}

div.mainBox
{
width: 600px;
height: 100%;
margin: 0 auto;
border: 1px solid #000;
}

div.content
{
height: 100%;
background: #f5f5f5;
}

div.footer
{
width: 600px;
height: 20px;
margin: 0 auto;
margin-top: -21px;
background: #cccccc;
text-align: right;
}
HTML: 
<div class="mainBox">
     <div class="content">Content</div>
</div>
<div class="footer">Footer</div>
  • Browsercheck: FF 1.0.7, IE 6.0, MOZ 1.6, NN 7.0, OP 8.50
 
Zuletzt bearbeitet von einem Moderator:
mit dem footer per -21px zu experimentieren, bin ich nicht gekommen. Dann versuch ich das trotzdem mal als anschließendes Tag zu setzen und nicht mit in das Elter DIV. Da mein Text im Eltern - Div dynamisch ist, sieht es ziemlich b***escheiden aus, wenn man mit <br> das nächste DIV an die Stelle buxiert, wo es hingehören soll. Feste Positionierung von oben geht nicht, da der Text ja wie gesagt dynamisch ist. Nur noch mal für alle Fälle, sieht mein Layout so aus.

____________________________________________________
<?php

$titel = "text";

@include "header.inc.php";

?>
<div> bla bla bla / ich bin dynmisch.
<div> zwei Tags, nicht zwingend</div>
<div> Tag um das es geht/ das soll immer ca.10 px von unten im Eltern-Div stehen</div>
</div>
</body>
</html>

Für weitere Anregungen bin ich dankbar, falls das mit dem Footer doch nicht klappt.

jandark
 
Hallo michaelsinterface,


du bist mein Held. Danke. Hab es grad ausprobiert und es funktioniert tatsächlich mit
margin-top: -21px

Ich hab da gestern Stunden mit zugebracht (inkl. Suche)

Hab ich schon Danke gesagt? Danke !

jandark
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück