Problem bei Infobox


  • h4wX
  • 1204 Aufrufe 7 Antworten

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

  • Problem bei Infobox

    Hi,

    also ich beschäftige mich in letzter Zeit mit CSS und somit auch mit Layout.
    Ein zweispaltiges Layout schaffe ich ohne Probleme, doch nun habe ich ein Problem beim 3 Spaltigen Layout.
    Nun ich verdeutliche es mal an diesem Quelltext:

    <style type="text/css">
    <!--

    body {
    text-align:center;
    }

    #seitenbereich {
    text-align:left;
    margin: 0 auto;
    width:780px;
    }

    #kopfzeile {
    background-color:lightskyblue;
    border-bottom:1px black solid;
    }

    #fusszeile {
    background-color:lightskyblue;
    border-top;2px black solid;
    }

    #navi {
    float:left;
    width:14em;
    background-color:thistle;
    }

    #inhalt {
    margin-left:14em;
    background-color:lightblue;
    }

    -->
    </style>

    <div id="seitenbereich">

    <div id="kopfzeile">
    Das ist eine Test-Homepage zur Beobachtung der Zentrierung
    </div>

    <div id="navi">
    <ul>
    <li>Startseite</li>
    <li>Gästebuch</li>
    <li>Kontakt</li>
    <li>Impressum</li>
    </ul>
    </div>

    <div id="inhalt">
    Assassin’s Creed (dt. Kredo des Assassinen) ist ein Videospiel, das von Ubisoft Montreal entwickelt und von Ubisoft veröffentlicht wurde. Die Playstation-3- und Xbox-360-Versionen, sowie eine Fassung für das Handy erschienen am 15. November 2007; die PC-Version ist seit 10. April 2008 erhältlich. Außerdem erschien im Februar 2008 eine Version für den Nintendo DS, und im Juni des gleichen Jahres eine Version für das Nokia N-Gage sowie Symbian-fähige Mobiltelefone. Eine Demoversion des Spiels ist laut Verleger nicht geplant.[3] Verantwortlich für die Entwicklung des Spiels ist Jade Raymond. An der Entwicklung haben unter ihrer Leitung mehr als 300 festangestellte Mitarbeiter vier Jahre lang gearbeitet.[4] Es gehörte laut New York Times zu den am stärksten erwarteten Spieletiteln des Jahres 2007.
    </div>

    <div id="fusszeile">
    Diese Website wurde von h4wX erstellt.
    </div>


    </div>


    Nun, wenn ich jetzt einfach versuche eine 3. Box, undzwar die Infobox einzufügen, dann wird sie nicht vernünftig zentriert. Also je länger der Text in der Mitte, desto weiter verschiebt sich die Box. Ich möchte aber, dass die Box oben bleibt, wie bei der Steuerung.

    Wie bekomme ich das hin, bzw. mit welchem Code kann ich erreichen, dass noch eine 3. Box dazukommt, diese zentriert wird, also in der Mitte, genau wie beim jetzigen Code, und sie soll oben rechts eben zentriert sein.

    Ich komm einfach nicht weiter, ich hab allesmögliche mit float und margin versucht, es funktionierte jedoch nicht.

    mfg. h4wX

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von h4wX () aus folgendem Grund: .

  • meinst du das so?:

    HTML-Quellcode

    1. <style type="text/css">
    2. <!--
    3. body {
    4. text-align:center;
    5. }
    6. #seitenbereich {
    7. text-align:left;
    8. margin: 0 auto;
    9. width:780px;
    10. }
    11. #kopfzeile {
    12. background-color:lightskyblue;
    13. border-bottom:1px black solid;
    14. }
    15. #fusszeile {
    16. background-color:lightskyblue;
    17. border-top;2px black solid;
    18. }
    19. #navi {
    20. float:left;
    21. width:14em;
    22. background-color:thistle;
    23. }
    24. #inhalt {
    25. margin-left:14em;
    26. margin-right:14em;
    27. background-color:lightblue;
    28. }
    29. #info {
    30. float:right;
    31. width:14em;
    32. background-color:thistle;
    33. }
    34. -->
    35. </style>
    36. <div id="seitenbereich">
    37. <div id="kopfzeile">
    38. Das ist eine Test-Homepage zur Beobachtung der Zentrierung
    39. </div>
    40. <div id="navi">
    41. <ul>
    42. <li>Startseite</li>
    43. <li>Gästebuch</li>
    44. <li>Kontakt</li>
    45. <li>Impressum</li>
    46. </ul>
    47. </div>
    48. <div id="info">&lt;div id="info"&gt;sfg&lt;/div&gt;</div>
    49. <div id="inhalt">
    50. Assassin’s Creed (dt. Kredo des Assassinen) ist ein Videospiel, das von Ubisoft Montreal entwickelt und von Ubisoft veröffentlicht wurde. Die Playstation-3- und Xbox-360-Versionen, sowie eine Fassung für das Handy erschienen am 15. November 2007; die PC-Version ist seit 10. April 2008 erhältlich. Außerdem erschien im Februar 2008 eine Version für den Nintendo DS, und im Juni des gleichen Jahres eine Version für das Nokia N-Gage sowie Symbian-fähige Mobiltelefone. Eine Demoversion des Spiels ist laut Verleger nicht geplant.[3] Verantwortlich für die Entwicklung des Spiels ist Jade Raymond. An der Entwicklung haben unter ihrer Leitung mehr als 300 festangestellte Mitarbeiter vier Jahre lang gearbeitet.[4] Es gehörte laut New York Times zu den am stärksten erwarteten Spieletiteln des Jahres 2007.
    51. </div>
    52. <div id="fusszeile">
    53. Diese Website wurde von h4wX erstellt.
    54. </div>
    55. </div>
    Alles anzeigen
  • Ja das stimmt, danke. Aber mit welchem Code hast du es denn genau gemacht? Es muss doch im Style definiert werden, aber ich hatte es genau so gemacht, es funktionierte bei mir jedoch nicht.

    mfg. h4wX
  • ich denk mal du hast übersehn, dass ich #inhalt noch verändert habe.
    dennoch step by step:
    also ich hab hier einfach die infobox hinzugefügt, wie die navigation, nur mit float:right;:

    HTML-Quellcode

    1. #info {
    2. float:right;
    3. width:14em;
    4. background-color:thistle;
    5. }


    dann kam der kontainer:

    HTML-Quellcode

    1. <div id="info">&lt;div id="info"&gt;sfg&lt;/div&gt;</div>

    so und nun war der drinn, aber der text ging unter der box immer noch weiter
    dewegen hab ich #inhalt verändert:

    HTML-Quellcode

    1. #inhalt {
    2. margin-left:14em;
    3. margin-right:14em;
    4. background-color:lightblue;
    5. }