Optimiertes vor-zurück

[Herbert K.]

Hallo!

Ich bräuchte euere hilfe: auf jeder meiner Seiten sollte unten ein Vor und ein Zurück-Link sein. Beides sollte auf gleicher höhe sein.

Um es nochmal genau zu verdeutlichen:

------------------------
| Der Inhalt der Seite |
| steht hier irgendwo  |
| und die Links sollen |
| so wie hier unten    |
| erscheinen:          |
|                      |
| Zurück          Vor  |
|                      |
------------------------

Das geht natürlich am besten mit einer Tabelle aber gibt es da noch "verbesserte" bzw. "elegantere" möglichkeiten? Zum Beispiel mit Divs?

Danke.

[Marc Reichelt]

Hallo Herbert,

Ich bräuchte euere hilfe: auf jeder meiner Seiten sollte unten ein Vor und ein Zurück-Link sein. Beides sollte auf gleicher höhe sein.

Um es nochmal genau zu verdeutlichen:

---

| Der Inhalt der Seite |
| steht hier irgendwo  |
| und die Links sollen |
| so wie hier unten    |
| erscheinen:          |
|                      |
| Zurück          Vor  |

Das geht natürlich am besten mit einer Tabelle aber gibt es da noch "verbesserte" bzw. "elegantere" möglichkeiten? Zum Beispiel mit Divs?

Elegant wäre es, dies mittels CSS zu lösen.
Hier kann man Elemente links oder rechts fließen lassen ("float" ist das Stichwort hierbei) - wenn es das ist was du suchst.

RICHTIG elegant wird es, wenn du die Links dann noch mit rel="next" und rel="prev" http://de.selfhtml.org/html/verweise/typisierte.htm@title=typisierst.

Grüße

Marc Reichelt || http://www.marcreichelt.de/

[Lukas]

Zum Beispiel so:

  
<style type="text/css">  
#main, #content{  
      width=100%;  
      height=95%;  
}  
#back{  
      width=50%;  
      height=5%;  
      bottom: 0px;  
      left: 10px;  
}  
#next{  
      width=50%;  
      height=5%;  
      bottom: 0px;  
      right: 10px;  
}  
</style>  
<div id="main">  
<div id="content">  
blablablablablablablubb...  
</div>  
<div id="back">  
<a href="">Zur&uuml;ck</a>  
</div>  
<div id="next">  
<a href="">Vor</a>  
</div>  
</div>

[Auge]

Hallo

Zum Beispiel so:

nicht.

<style type="text/css">
[code lang=css]#main, #content{
      width=100%;
      height=95%;
}

  
Hier und folgend sind die Gleichheitszeichen durch Doppelpunkte auszutauschen.  
  

> ~~~css

#back{  

>       width:50%;  
>       height:5%;  
>       bottom: 0px;  
>       left: 10px;  
> }  
> #next{  
>       width:50%;  
>       height:5%;  
>       bottom: 0px;  
>       right: 10px;  
> }

»» </style>

Einerseits haben die Angaben zur Breite folgende Auswirkung:
10px+50%+50%+10px=100%+20px=Querscrollbalken, wo keiner sein müsste.

Andererseits haben bottom, right und left (das hier nicht verwendete top ebenfalls) keine Auswirkung, wenn keine von static abweichende Angabe zu position erfolgt und das ist hier nicht der Fall.

Tschö, Auge

[molily]

| Zurück          Vor  |

<p id="link-zurueck"><a href="" rel="prev">Zurück</a></p>
<p id="link-vor"><a href="" rel="next">Vor</a></p>

#link-zurueck { float: left; }
#link-vor { text-align: right; }

Das geht natürlich am besten mit einer Tabelle

Tabellenlayout für so eine simple Aufgabe?

Beispiel mit Divs?

Wozu Divs?

Mathias