[CSS] "vertical-align: bottom"

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • [CSS] "vertical-align: bottom"

    ja, ich hab da ein css problem
    und zwar will ich text nach unten formattieren, sprich vertikal gesehen soll der sich am unteren rand aufhalten :roll:

    damit das leichter verständlich ist, post ich mal die betreffenden dateien.
    was ich will, ist dass die navi-items praktisch auf dem border stehen...

    Quellcode

    1. body {
    2. background-color: #333;
    3. font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
    4. color: #ccc;
    5. }
    7. h2 {
    8. text-align:center;
    9. font-size:0.9em;
    10. font-weight:bold;
    11. }
    13. #frame {
    14. width:800px;
    15. margin-right:auto;
    16. margin-left:auto;
    17. margin-top:10px;
    18. padding:0px;
    19. text-align:left;
    20. }
    22. #navi {
    23. height: 150px;
    24. font-size: 1.2em;
    25. border-bottom: 2px solid #f00;
    26. vertical-align: bottom;
    27. }
    29. #navi a {
    30. color: #b2b2b2;
    31. text-decoration: none;
    32. margin-left:10px;
    33. padding-left: 5px;
    34. padding-bottom: 10px;
    35. border-left: 2px solid #f00;
    36. }
    38. #content {
    39. padding:0px;
    40. text-align:left;
    41. }
    43. #footer {
    44. margin-top: 10px;
    45. height: 80 px;
    46. font-size: 0.7em;
    47. text-align: center;
    48. border-top: 1px solid #ccc;
    49. }
    51. p,h1,pre {
    52. margin:0px 10px 10px 10px;
    53. }
    Alles anzeigen


    und das ist die html datei:

    Quellcode

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
    2. <html>
    3. <head>
    4. <title>kapelle</title>
    5. <link href="css/style.css" rel="stylesheet" type="text/css" />
    6. </head>
    7. <body>
    8. <div id="frame">
    9. <div id="navi">
    10. <a href="index.php">Kapelle</a>
    11. <a href=".php">Musikanten</a>
    13. <a href=".php">Termine</a>
    14. <a href=".php">Kontakt</a>
    15. <a href=".php">G&auml;ste</a>
    16. </div>
    17. <div id="content">
    18. content
    19. </div>
    22. <div id="footer">
    23. Copyright: 2006 </div>
    24. </div>
    25. </body>
    26. </html>
    Alles anzeigen

  • Dein derzeitiger Code besagt, dass die 3 div-Elemente navi, content, footer untereinander angeordnet sind und nicht nebeneinander! Für zweiteres müsste man die divs entweder in eine Tabelle packen, oder sie mit position:absolute positionieren. Dann bröuchte man aber kein vertical-align mehr.

    Das vertical-align bei dir sollte bewirken, dass die Links in dem 150px großem div am unteren Ende erscheinen.

  • SelfHTML schreibt zu vertical-align:

    "http://de.selfhtml.org/css/eigenschaften/ausrichtung.htm" schrieb:


    Sie können nebeneinanderstehende Elemente mit unterschiedlicher Höhe, zum Beispiel Tabellenzellen in einer Tabellenzeile oder Textpassagen mit unterschiedlicher Schriftgröße innerhalb einer Zeile, im Verhältnis zueinander ausrichten.


    In diesem Falle gibt es kein nebenstehendes Element zu deinem div-Tag.

    Ich schätze, dass du das ganze mit einer Tabelle lösen musst, damit das klappt.
    Also einfach eine Tabelle mit Höhe 150px, 1 Zeile und 1 Spalte, dabei dann vertical-align.
    Da ist genau genommen auch kein nebenstehendes Element, aber das wird denk ich trotzdem klappen.