<div>-basierte Struktur - will nicht.

  • <div>-basierte Struktur - will nicht.

    Mit Tabellen-Layout wäre es wohl kein Problem aber ich wollte das jetzt <div>baisert hinbekommen.

    Meine html sieht momentan so aus:

    Quellcode

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. <head>
    4. <title>test.html</title>
    5. <meta name="author" content="darthdespotism" />
    6. <link rel="stylesheet" href="template.css" type="text/css" />
    7. </head>
    8. <body>
    9. <div id="container">
    11. <div id="top">Das ist oben!</div>
    13. <div id="middle">
    15. <div id="nav"><ul>
    16. <li>Home</li>
    17. <li>Test</li>
    18. <li>Lustig</li>
    19. </ul></div>
    20. <div id="main">Das ist der Hauptbereich!</div>
    22. </div>
    24. <div id="bottom">&copy; Christoph Egger</div>
    26. </div>
    27. </body>
    28. </html>
    Alles anzeigen


    Meine CSS:

    Quellcode

    1. *
    2. {
    3. padding: 0;
    4. margin: 0;
    5. }
    7. body
    8. {
    9. height: 800px;
    10. text-align: center;
    11. }
    13. #container
    14. {
    15. position: fixed;
    16. width: 900px;
    17. height: 800px;
    18. margin-left: auto;
    19. margin-right: auto;
    20. background-color: #000000;
    21. }
    23. #top
    24. {
    25. position: fixed;
    26. width: 800px;
    27. height: 80px;
    28. top: 0;
    29. right: 0;
    30. bottom: auto;
    31. left: 0;
    32. background-color: #00FF00;
    33. margin-left: auto;
    34. margin-right: auto;
    35. }
    36. #middle
    37. {
    38. position: fixed;
    39. width: 800px;
    40. height: auto;
    41. top: 80;
    42. right: 0;
    43. bottom: auto;
    44. left: 0;
    45. background-color: #00FF00;
    46. min-height: 330px;
    47. margin-left: auto;
    48. margin-right: auto;
    49. text-align: left;
    50. }
    52. #nav
    53. {
    54. width: 120px;
    55. float: left;
    56. height: auto;
    57. }
    59. #main
    60. {
    61. width: 680;
    62. height: auto;
    63. background-color: #0000FF;
    64. }
    66. #bottom
    67. {
    68. position: fixed;
    69. width: 800px;
    70. height: 80px;
    71. top: auto;
    72. right: 0;
    73. bottom: 0;
    74. left: 0;
    75. background-color: #FFFF00;
    76. }
    Alles anzeigen

    Das ganze basiert aus einer Kombination folgender Tutorials:
    absalom.biz/tutorials/Mambo_Template_Tutorial.html
    w3.org/TR/CSS2/visuren.html#absolute-positioning
    w3.org/2002/03/csslayout-howto

    und sieht so aus:
    christoph.sf-ogame.de/test/div-layout/

    Wie man unschwehr erkennen kann ist das noch nicht ganz wie beabsichtigt. Ich hätte gerne den Footer direkt anschließend unter dem Hauptbereich und oben den Titelbereich nicht überdeckt.

    Ich nehmen Korrekturen genauso wie gute Nachschlagequellen ;)
    There are only 10 types of people in the world: Those who understand binary, and those who don't.

    Download meines ersten Spiels:HIER
    Über Feedback würde ich mich freuen ;)

  • Ja das was ich momentan habe dürfte "nicht fix" sein.

    Nur war halt das mit dem Fixen Layout so ziemlich das einzige das für micht verständlich erklärt war von dem was ich so gefunden hab
    There are only 10 types of people in the world: Those who understand binary, and those who don't.

    Download meines ersten Spiels:HIER
    Über Feedback würde ich mich freuen ;)

  • So jetzt habe ich ein neues Problem:

    Der Textbereich wächst zwar, aber der Container für den Hauptbereich nicht und somit wird der footer nicht nach unten verschoben.

    Die Texte und Farben sind Platzhalter / zum markieren der einzelnen Bereiche gedacht ;)

    Quellcode

    1. * {
    2. padding: 0;
    3. margin: 0;
    4. }
    6. /* Background - a small image goes a long way, and basic font styling */
    7. body {
    8. background-color: #0F0F0F;
    9. text-align: center;
    10. font-family:Georgia, "Times New Roman", Times, serif;
    11. color: #000000;
    12. }
    15. /* Now we figure out how wide our main page is - Alignment comes from the margin calls here combined with the text-align: center in the body call*/
    16. #container
    17. {
    18. width: 900px;
    19. margin-left: auto;
    20. margin-right: auto;
    21. }
    23. /* Area to put the main heading text in */
    24. #header
    25. {
    26. width: 900px;
    27. height: 80px;
    28. padding: 0em;
    29. margin-top: 50px;
    30. margin-left: auto;
    31. margin-right: auto;
    32. background-color: silver;
    33. }
    35. #subheading
    36. {
    37. width: 900px;
    38. background-color: Olive;
    39. text-align: left;
    40. }
    41. /* Main content area - faux columns CSS as previously seen on AListApart.com */
    42. /* One image for the background and borders with some padding for the internal layout, so as to move the content text itself off the borders */
    44. #content
    45. {
    46. background-color: #F0F0F0;
    47. text-align: left;
    48. padding-left: 30px;
    49. padding-top: 10px;
    50. padding-right: 30px;
    51. min-height: 330px;
    52. }
    54. /* Split the main content area into two columns - via static widths and a float */
    55. #sidebar
    56. {
    57. width:180px;
    58. float: left;
    59. background-color: #FF0000;
    60. }
    62. #bodytext {
    63. width: 650px;
    64. background-color: #00FF00;
    65. height: 680;
    66. float: right;
    67. text-align: justify;
    68. }
    70. /* Make sure the font size for links and paragraphs doesn't break */
    71. p, a {
    72. font-size: 0.8em;
    73. }
    75. /* Footer - need I say more? */
    77. #footer
    78. {
    79. width: 900px;
    80. height: 64px;
    81. background-color: Maroon;
    82. }
    Alles anzeigen

    Quellcode

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. <head>
    4. <title>test.html</title>
    5. <meta name="author" content="darthdespotism" />
    6. <link rel="stylesheet" href="template.css" type="text/css" />
    7. </head>
    8. <body>
    9. <div id="container">
    11. <div id="header">Das ist oben!</div>
    12. <div id="subheading">Dort bist du!</div>
    13. <div id="content">
    16. <div id="sidebar"><ul>
    17. <li>Home</li>
    18. <li>Test</li>
    19. <li>Lustig</li>
    20. </ul></div>
    21. <div id="bodytext">
    22. Joomla! (sprich: dschuumla) ist ein populäres freies Content-Management-System (CMS), das aus dem Open-Source-Projekt Mambo hervorgegangen ist. Nach erheblichen Differenzen mit der australischen Firma Miro, die die Namensrechte an Mambo besaß, verabschiedeten sich die Mambo-Entwickler von diesem Projekt. Um das System dennoch weiterentwickeln zu können, wurde der Code von Mambo 4.5.2.3 in Joomla! übernommen und dann zu 1.0.x (stable) weiterentwickelt. Joomla! gehört zusammen mit Typo3 zu den bekanntesten Open-Source-CMS.
    24. Joomla! basiert auf der serverseitigen Skriptsprache PHP, die ebenso wie die verwendete Datenbank MySQL unter einer Open-Source-Lizenz steht und kostenlos erhältlich ist. Die aktuell in der Beta-Phase befindliche Version 1.5 stellt für das Joomla CMS einen Entwicklungssprung dar. Basierte bisher der Quellcode noch auf Mambo, handelt es sich bei der Version 1.5 im Prinzip um ein gänzlich neues CMS. Die Kernkomponenten wurden vollständig objektorientiert ausgelegt und ein separates Joomla Framework wurde geschaffen. Dementsprechend steht Komponenten-Entwicklern eine neue API zur Verfügung um eigene Erweiterungen für Joomla zu entwickeln. Obwohl das Framework in der objektorientierten Version PHP 5 geschrieben wurde, wird Joomla 1.5 auch zur PHP-Version 4 abwärtskompatibel sein.
    26. Der Name Joomla! (Lautumschreibung) leitet sich von dem Wort ?Jumla? aus der Suaheli-Sprache ab. Es bedeutet soviel wie ?das ganze? oder auch ?als ganzes? und betont damit die Rolle der Entwickler-Gemeinschaft (Community). 2006 kamen Nutzer, Firmen und Verlage in Bonn zu einem Kongress zusammen, dem ?Joomla!Day?.</div>
    28. </div>
    30. <div id="footer">&copy; Christoph Egger</div>
    32. </div>
    33. </body>
    34. </html>
    Alles anzeigen


    EDIT://
    Danke fr den Link ;)
    There are only 10 types of people in the world: Those who understand binary, and those who don't.

    Download meines ersten Spiels:HIER
    Über Feedback würde ich mich freuen ;)

  • OK noch eine Frage:
    Ich habe jetzt wieder ein Problem wenn das Menü an der Linken Seite "länger" als der Text ist.

    Muss ich da auf floating verzichten? Ich werd aus den Tutorials einfach nicht schlau.
    There are only 10 types of people in the world: Those who understand binary, and those who don't.

    Download meines ersten Spiels:HIER
    Über Feedback würde ich mich freuen ;)

  • "Baby Herman" schrieb:

    Du brauchst wahrscheinlich unter dem Content und der Navigation das angesprochene clear: both, was du am besten durch ein div oder br Element einfügst. Donut hat dir ein solches Beispiel gegeben.


    Danke das wars ;)
    Jetzt versteh ich auch was d0nUt mit seinem 2. Satz sagen wollte
    There are only 10 types of people in the world: Those who understand binary, and those who don't.

    Download meines ersten Spiels:HIER
    Über Feedback würde ich mich freuen ;)

  • So damit ich in dem ereich weiterkomme habe ich nach einer Ferienlektüre gesucht.

    addison-wesley.de/main/main.as…kdetails&ProductID=121455

    klingt erstmal brauchbar und mit dem Verlag hatte ich bisher nur gute Erfahrungen. Was meint ihr?
    There are only 10 types of people in the world: Those who understand binary, and those who don't.

    Download meines ersten Spiels:HIER
    Über Feedback würde ich mich freuen ;)

  • Du willst dir wirklich extra Lektüre besorgen?

    Halte ich für äußerst sinnlos. Klar findest du im Internet nur selten wirklich ausführliche Tutorials, aber wenn du immer hinterher bist, dich auch mal bei css4you.de und SELFHTML zu informieren brauchst du das alles nicht. Dafür schätze ich CSS einfach zu einfach ein.

    Wichtig ist auch, dass du kleine Ideen immer wieder umzusetzen versuchst und dabei vielleicht auch andere gut gecodete Seiten zur Hilfe nimmst. Dieses Forum, Sonntagslounge.de oder Virb.com sind Beispiele unter verdammt vielen Seiten, die perfekte Orientierungen und Lösungsmöglichkeiten bereit stellen. Man muss halt nur mal genauer hinschaun.