Footer, 3 Wörter zentriert, 1 Wort rechtsbündig
düddldei
- css
Tachen!
Bin gerade am HTML bzw. CSS lernen. Und schon tut sich das erste Fragezeichen auf. Ich möchte gerne am Footer 3 Wörter zentriert haben und 1 Wort soll rechtsbündig sein. Alles in der selben Zeile.
Wenn ich
#footer {
position: fixed;
bottom: 0;
left:0;
width: 100%;
line-height: 2em;
text-align: center;
background: #bfbfbf;
}
</div>
<div id="footer">
1\. Wort, 2. Wort, 3. Wort
<a href="impressum.html">Impressum</a>
Soll heißen: 1. Wort, 2. Wort, 3. Wort soll zentriert stehen und <a href="impressum.html">Impressum</a> soll in der selben Zeile rechtsbündig sein...
Alle meine Versuche ließen <a href="impressum.html">Impressum</a> in die nächste Zeile hüpfen.
Bitte um Hilfe! Danke
Moin,
Soll heißen: 1. Wort, 2. Wort, 3. Wort soll zentriert stehen und <a href="impressum.html">Impressum</a> soll in der selben Zeile rechtsbündig sein...
Alle meine Versuche ließen <a href="impressum.html">Impressum</a> in die nächste Zeile hüpfen.
<div id="footer"><a href="impressum.html">Impressum</a>
1\. Wort, 2. Wort, 3. Wort
</div>
Du nimmst den Link vor die Wörter und gibst ihm float:right
. Dann funktioniert es.
Grüße Marco
danke für die antwort...funktinoiert leider nicht
meinst du
<div id="footer">
<a href="impressum.html">Impressum</a>1. Wort 2. Wort 3. Wort
</div><!
und
#footer {
position: fixed;
bottom: 0;
left:0;
width: 100%;
line-height: 2em;
text-align: center;
background: #bfbfbf;
float:right;
}
da steht "Impressum" vor "1. Wort 2. Wort 3. Wort" in der Mitte. Es sollte doch ganz rechts stehen un "1. Wort 2. Wort 3. Wort" in der mitte...hmmm...was hab ich falsch gemacht?
@@düddldei:
nuqneH
da steht "Impressum" vor "1. Wort 2. Wort 3. Wort" in der Mitte. Es sollte doch ganz rechts stehen un "1. Wort 2. Wort 3. Wort" in der mitte...hmmm...was hab ich falsch gemacht?
Nicht richtig gelesen.
Du nimmst den Link vor die Wörter und gibst ihm
float:right
.
Worauf bezieht sich ihn dem Satz „ihn“?
Übrigens ist dann "1. Wort 2. Wort 3. Wort" nicht im Viewport zentriert, sondern zwischen linkem Rand und "Impressum".
Qapla'
Moin,
Übrigens ist dann "1. Wort 2. Wort 3. Wort" nicht im Viewport zentriert, sondern zwischen linkem Rand und "Impressum".
Ja, das stimmt. Wenn das stört könnte man den Link (also das A-Element) mit position:absolute
und right:0
rechts ausrichten.
Grüße Marco
@@misterunknown:
nuqneH
Übrigens ist dann "1. Wort 2. Wort 3. Wort" nicht im Viewport zentriert, sondern zwischen linkem Rand und "Impressum".
Ja, das stimmt. Wenn das stört könnte man den Link (also das A-Element) mit
position:absolute
undright:0
rechts ausrichten.
Sag ich doch. ;-) Allerdings auch, dass dies allein keine gute Idee ist.
Und mit dem Padding ist’s dann auch nicht im Viewport zentriert.
Man könnte ab einer bestimmten Viewportbreite dem Footer per Media-Query auch links dasselbe Padding verpassen …
Qapla'
danke danke danke!
Durch euch hab ichs geschafft!!!
Moin,
meinst du
<div id="footer">
<a href="impressum.html">Impressum</a>1. Wort 2. Wort 3. Wort
</div><!
Ja.
> und
> ~~~css
> #footer {
> position: fixed;
> bottom: 0;
> left:0;
> width: 100%;
> line-height: 2em;
> text-align: center;
> background: #bfbfbf;
> float:right;
> }
>
Nein, sondern:
#footer>a { float: right; }
Es gibt ja mehrere Möglichkeiten das per CSS zu selektieren; diese wäre eine.
Grüße Marco
danke für die antwort...funktinoiert leider nicht
meinst du
Wenn du ein Wort mit float:right positionierst, dann werden die anderen Worte in der Mitte vom verbleibenden Platz stehen. Das ist aber nicht die Mitte der Zeile.
Du kannst einen zweiten Container wie den footer absolute positionieren und das Impressum dahinein schreiben.
<a href=... style="position:fixed; bottom:0; right:0;">Imperium</a>
Linuchs
@@Linuchs:
nuqneH
Du kannst einen zweiten Container wie den footer absolute positionieren und das Impressum dahinein schreiben.
<a href=... style="position:fixed; bottom:0; right:0;">
Inline-Styles? Nein, pfui!! Und sag nicht, es war ja nur Beispielcode!
Imperium</a>
Das Impressum schlägt zurück? Weil es zu oft fälschlicherweise als „Imprint“ übersetzt wurde?
Qapla'
Moin,
<div id="footer"><a href="impressum.html">Impressum</a>
- Wort, 2. Wort, 3. Wort
</div>
>
> Du nimmst den Link vor die Wörter und gibst ihm `float:right`{:.language-css}. Dann funktioniert es.
Du meinst dem Link ein 'float:right' verpassen - siehe: <http://jsfiddle.net/Np5QT/>
Gruß Gunther
Moin,
Du nimmst den Link vor die Wörter und gibst ihm
float:right
. Dann funktioniert es.
Du meinst dem Link ein 'float:right' verpassen - siehe: http://jsfiddle.net/Np5QT/
Korrekt das meine ich. Ich dachte es wäre auch so rausgekommen^^
Grüße Marco
@@düddldei:
nuqneH
<div id="footer">
Hier ist wohl ein footer-Element angebracht. Blog: neue Elemente für die Seitenstruktur
Neben der bereits erwähnten Lösung gibt es auch die Möglichkeit, den Link "Impressum" im Footer absolut zu positionieren. Dann wäre der Text "1. Wort 2. Wort 3. Wort" mittig im Viewport zentriert.
Damit aber bei schmalen Viewports "1. Wort 2. Wort 3. Wort" und "Impressum" nicht übereinanderliegen, bekommt der Footer ein an den Linktext "Impressum" angepasstes padding-right. Dann ist allerdings "1. Wort 2. Wort 3. Wort" nicht im Viewport zentriert, sondern zwischen linkem Rand und "Impressum".
Qapla'