Footer, 3 Wörter zentriert, 1 Wort rechtsbündig

[düddldei]

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

[misterunknown]

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

[düddldei]

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?

[Gunnar Bittersmann]

@@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'

[misterunknown]

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

[Gunnar Bittersmann]

@@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 und right: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'

[düddldei]

danke danke danke!

Durch euch hab ichs geschafft!!!

[misterunknown]

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

[Linuchs]

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

[Gunnar Bittersmann]

@@Linuchs:

nuqneH

Du kannst einen zweiten Container wie den footer absolute positionieren und das Impressum dahinein schreiben.

Nein.

<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'

[Gunther]

Moin,

<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`{:.language-css}. Dann funktioniert es.  
  
Du meinst dem Link ein 'float:right' verpassen - siehe: <http://jsfiddle.net/Np5QT/>  
  
  
Gruß Gunther

[misterunknown]

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

[Gunnar Bittersmann]

@@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".

Beispiel

Qapla'