Achtung: Das Forum wird zum 31.05.2024 geschlossen. Für nähere Infos klicke hier.

div-hilfe

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

    • div-hilfe

      Hallo Freunde, habe ne wichtige Frage:


      Ich würde gerne eine Seite machen und hab ne Frage bezüglich div-tags:

      Ich möchte einen großen div tag machen so: 940px*700px. Dadrin möchte ich nun als "header" einen div tag machen 940px*295px...soweit so gut des hab ich shocnmal geschafft. Nun möchte ich nun unter den zweiten divtag ein Menü machen. Die Buttons sollen Bilder sein. Jedes Bild soll sein eigenes div-tag bekommen. Wie stelle ich das an dass ich auf eine Breite von 940 px, 6 div-tags bekomme, jeweils mit einem Abstand von 10 px?

      Hoffe ihr könnt mir helfen. Wenn ihr was an meinem Text nicht verstanden habt sagt bescheid ich häng mal ne Zeichnung dran, die ich gemacht hab...
      Die geschickteste Art eineen Konkurenten zu besiegen, ist, ihn in dem zu bewundern, worin er besser ist.
      Peter Altenberg

    • Original von cenk
      640:6= x.


      Aber, aber...CSS kann auch primitiv rechnen:

      Da diese 6 Container Unterelemente des X Pixel breiten Containers sind, kannst du jedem der 6 kleinen Container 16% (100:6=16) Breite mit float:left zuweisen.

      @philipp51: So wie sich das anhört, scheinst du von CSS basierten Layouts wenig Ahnung zu haben...du denkst noch immer in Tabellen Layouts. Du musst umdenken, wenn das was werden soll.

    • Hier zwei Links, die Dich sicher weiterbringen: The StyleWorks für Webseiten mit CSS-Layout allgemein und Listamatic für auf CSS basierende Menüs.

      Da findest Du sicherlich etwas. Wenn ich Dich richtig verstehe, dann hast Du ein grosses div-Element für den Body, danach hast Du ein weiteres div-Element für den Header definiert und anschliessend möchtest Du darunter unter den Header, aber im Body noch eine Menüleiste haben.

      Sieh Dir mal meine Seite an, ich habe das so gemacht.

      Quellcode

      1. /* Seitenränder entfernen */
      2. html, body {
      3. margin: 0;
      4. padding: 0;
      5. text-align: center; /* Inhalte zentrieren - f?ür IE */
      6. background-color: #fff;
      7. }
      9. /* Gesamten Inhalt der Webseite zentrieren */
      10. #content {
      11. margin-left: auto;
      12. margin-right: auto;
      13. text-align: left;
      14. width: 740px;
      15. }
      17. /* Container zur Aufteilung der Seite */
      18. /* Kopfleiste */
      19. #header {
      20. height: 230px;
      21. margin: 0;
      22. padding-left: 18px;
      23. }
      25. /* Men?leiste */
      26. #navcontainer {
      27. background-color: #fff;
      28. line-height: 40px;
      29. color: #333;
      30. }
      32. #navlist li {
      33. display: inline;
      34. list-style-type: none;
      35. padding-right: 20px;
      36. margin: 0;
      37. }
      39. #navlist li a#current {
      40. color: #CC0000;
      41. }
      43. #navlist a {
      44. color: #333;
      45. text-decoration: none;
      46. border-bottom: none;
      47. }
      49. #navlist a:hover {
      50. color: #CC0000;
      51. }
      53. /* Fussleiste */
      54. #footer {
      55. margin: 0;
      56. padding: 0;
      57. clear: both;
      58. background-image: url(../img/background.gif);
      59. background-repeat: repeat-y;
      60. }
      62. /* Linke Spalte */
      63. #leftcol {
      64. width: 420px;
      65. float: left;
      66. display: inline;
      67. margin: 0 5px 0 15px;
      68. padding-left: 25px;
      69. padding-right: 20px;
      70. border-right: 1px solid #999;
      71. }
      73. /* Rechte Spalte */
      74. #rightcol {
      75. width: 200px;
      76. float: right;
      77. display: inline;
      78. padding-right: 25px;
      79. padding-left: 5px;
      80. margin: 0 15px 0 5px;
      81. }
      Alles anzeigen


      Viele Grüsse,
      Kangaroo
      iBook 14" 933MHz PowerPC G4, 1,12GB RAM, 120GB HDD
      iMac 20", 2,16 GHz Intel Core 2 Duo, 3GB RAM, 250GB HDD
      Mac OS X 10.5.8
      iPod Video 80GB
      Apple TV
      AirPort Extreme

    • Original von Rahner


      @philipp51: So wie sich das anhört, scheinst du von CSS basierten Layouts wenig Ahnung zu haben...du denkst noch immer in Tabellen Layouts. Du musst umdenken, wenn das was werden soll.


      Wie kommst du denn darauf? Ich hab in meinen ersten beiden Posts kein Wort von Tabelle erwähnt. Und wie ich irgendwo mal gelesen habe sind div-tags keine Tabellen oder?
      Die geschickteste Art eineen Konkurenten zu besiegen, ist, ihn in dem zu bewundern, worin er besser ist.
      Peter Altenberg

    • Original von philipp51
      Wie kommst du denn darauf? Ich hab in meinen ersten beiden Posts kein Wort von Tabelle erwähnt. Und wie ich irgendwo mal gelesen habe sind div-tags keine Tabellen oder?


      Gründlich lesen und verstehen wäre hier nicht schlecht.
      Ich habe dir nur unterstellt, dass du noch in Tabellen denkst - im übertragenen Sinne.
      Ist jetzt aber auch egal, wenn du das Problem schon gelöst hast ;)