Anzeige

Zweispaltiges Webdesign in der Umsetzung

Zweispaltiges Webdesign in der Umsetzung | PSD-Tutorials.de

Erstellt von CrazyLopp, 14.03.2010.

  1. CrazyLopp

    CrazyLopp Hat es drauf

    1
    Dabei seit:
    07.10.2009
    Beiträge:
    2.104
    Geschlecht:
    männlich
    Ort:
    NRW
    Software:
    Ps, Coda, Blender, Maya, phpDesigner 8 und co.
    Kameratyp:
    Canon 1000D, 450D
    Zweispaltiges Webdesign in der Umsetzung
    Hi,

    ich bin gerade dran mein Layout umzusetzten also zu coden, bin auch schon recht weit nur hänge ich gerade am content!

    Wie der Titel schon sagt will ich einen zweispaltigen Content haben. Die erste Idee war es als div umzusetzten, nur hänge ich da gerade dran.

    Hier ist mal der Code:
    Code (Text):
    1. div#content {
    2.     width:961px;
    3.     background:#000000;
    4.     margin:0 auto;
    5. }
    Dies ist nur für den Hintergrund des Contents!

    So soll es dann aussehen:
    [​IMG]

    Falls ihr einen tipp habt immer her damit, jedoch wäre es nett wenn ihr das leicht verstänlich ausdrücken könnt da ich nicht der beste im coden bin :D


    Lieben Gruß
    Crazylopp
     
    #1      
  2. leveler

    leveler 00110100 00110010

    Dabei seit:
    23.06.2008
    Beiträge:
    2.614
    Zweispaltiges Webdesign in der Umsetzung
    AW: Zweispaltiges Webdesign in der Umsetzung

    hi, ich denke, Du koenntest es mit 2 div`s machen, dem ersten gibst du ein "float:left;", dem 2. ein "float: right;", danach am besten ein <br id="clearer" /> einbauen, in der cssdann fuer den #clearer {clear: both; height: 1px; overflow: auto; } ..so koennt`s wohl funzen;
     
    #2      
  3. CrazyLopp

    CrazyLopp Hat es drauf

    1
    Dabei seit:
    07.10.2009
    Beiträge:
    2.104
    Geschlecht:
    männlich
    Ort:
    NRW
    Software:
    Ps, Coda, Blender, Maya, phpDesigner 8 und co.
    Kameratyp:
    Canon 1000D, 450D
    Zweispaltiges Webdesign in der Umsetzung
    AW: Zweispaltiges Webdesign in der Umsetzung

    Das hab ich jetzt nicht so ganz verstanden :uhm:

    also soll es so aussehen?

    Code (Text):
    1.  
    2. #clearer {
    3.     clear: both;
    4.     height: 1px;
    5.     overflow: auto;
    6. }
    7.  
    8. div#content {
    9.     width:961px;
    10.     background:#000000;
    11.     margin:0 auto;
    12. }
    13.  
    14. div#content div#content1 {
    15.     width:400px;
    16.     float:left;
    17. }
    18.  
    19. div#content div#content2 {
    20.     width:400px;
    21.     float:right;
    22. }
    23.  
    24.  
     
    #3      
  4. Herr_D

    Herr_D offline

    Dabei seit:
    09.06.2005
    Beiträge:
    8.557
    Geschlecht:
    männlich
    Zweispaltiges Webdesign in der Umsetzung
    AW: Zweispaltiges Webdesign in der Umsetzung

    Wenn es ein Fließtext (zuammenhängender Text) werden soll, dann überleg dir das nochmal mit den 2 Spalten... User scrollen erfahrungsgemäß nur ungern ;)


    Ansonsten, wie leveler es beschrieben hat...


    Code (Text):
    1.  
    2. #content {
    3.     width:961px;
    4.     background-image:url(adresse);
    5.     margin:0 auto;
    6. }
    7.  
    8.  
    9. #content .links {
    10.     width:50%;
    11.     background:transparent;
    12.     float:left;
    13.     margin:0;
    14.     padding:1em;; }
    15.  
    16.  
    17. #content .rechts {
    18.     margin:0;    
    19.     margin-left: 50%;
    20.     padding:1em;
    21.     }
    22.  
    23. .freierWille {
    24.     clear:both;
    25.     }
    26.  

    HTML:
    1.                
    2.  
    3. <div id="content">
    4.      <div class="links"></div>
    5.      <div class="rechts"></div>
    6.      <div class="freierWille"></div>
    7. </div>
    8.  
    9.  
     
    #4      
  5. CrazyLopp

    CrazyLopp Hat es drauf

    1
    Dabei seit:
    07.10.2009
    Beiträge:
    2.104
    Geschlecht:
    männlich
    Ort:
    NRW
    Software:
    Ps, Coda, Blender, Maya, phpDesigner 8 und co.
    Kameratyp:
    Canon 1000D, 450D
    Zweispaltiges Webdesign in der Umsetzung
    AW: Zweispaltiges Webdesign in der Umsetzung

    Also das hat irgendwie nicht geklappt :uhm:

    Das sieht nun so aus:
    [​IMG]


    Hier ist der Code(Css):
    Code (Text):
    1.  
    2. * {
    3.     margin:0;
    4.     padding:0;
    5.     border:0;
    6. }
    7.  
    8. html {
    9.     background-color:#949494;
    10. }
    11.  
    12. body {
    13.     font:62.5%/1.8em "Times New Roman", verdana, arial, sans-serif;
    14.     color:#fff;
    15.     background:url(../grafiken/bg-body.gif) 0 0 repeat-x;
    16. }
    17.  
    18. .noBorder {
    19.     border:0!important;
    20. }
    21.  
    22. .noMargin {
    23.     margin:0!important;
    24. }
    25.  
    26. .freierWille {
    27.     clear:both;
    28. }
    29.    
    30. /* ------------------------- */
    31.  
    32. div#headerContainer {
    33.     width:100%;
    34.     background:url(../grafiken/bg-header-container.png) center 0 no-repeat;
    35. }
    36.  
    37. div#headerContainer div#header {
    38.     width:961px;
    39.     height:329px;
    40.     background:url(../grafiken/bg-header.png) 0 0 no-repeat;
    41.     margin:0 auto;
    42.     position:relative;
    43. }
    44.  
    45. /* ------- End of Header ------ */
    46.  
    47. div#headerContainer div#header ul#navi-top {
    48.     position:absolute;
    49.     list-style:none;
    50.     top:2px;
    51.     left:54px;
    52. }
    53.  
    54. div#headerContainer div#header ul#navi-top li {
    55.     float:left;
    56.     padding:0 15px;
    57.     border-right:1px solid #bfbfbf;
    58.     line-height:12px;
    59.     text-transform:uppercase;
    60. }
    61.  
    62. div#headerContainer div#header ul#navi-top li a {
    63.     color:#bfbfbf;
    64.     text-decoration:none;
    65. }
    66.  
    67. div#headerContainer div#header ul#navi-top li a:hover,
    68. div#headerContainer div#header ul#navi-top li.active a {
    69.     text-decoration:none;
    70.     color:#fff;
    71. }
    72.  
    73. /* ------- End of navi-top ------ */
    74.  
    75. div#headerContainer div#header ul#navi {
    76.     position:absolute;
    77.     top:275px;
    78.     left:194px;
    79.     list-style:none;
    80. }
    81.  
    82. div#headerContainer div#header ul#navi li {
    83.     padding:0 125px 0 0;
    84.     float:left;
    85.     text-transform:uppercase;
    86. }
    87.  
    88. div#headerContainer div#header ul#navi li a {
    89.     color:#bfbfbf;
    90.     font:18px "Times New Roman", verdana, arial, sans-serif;
    91.     text-decoration:none;
    92. }
    93.  
    94. div#headerContainer div#header ul#navi li a:hover,
    95. div#headerContainer div#header ul#navi li.active a {
    96.     color:#fff;
    97.     font:18px "Times New Roman", verdana, arial, sans-serif;
    98.     text-decoration:none;
    99. }
    100.  
    101. /* ------- End of navi ------ */
    102.  
    103.  
    104. div#content {
    105.     width:961px;
    106.     background:#000000;
    107.     margin:0 auto;
    108. }
    109.  
    110. #content .links {
    111.     width:50%;
    112.     background:url(../grafiken/bg-content.gif);
    113.     float:left;
    114.     margin:0;
    115.     padding:1em;
    116. }
    117.  
    118.  
    119. #content .rechts {
    120.     margin:0;
    121.     background:url(../grafiken/bg-content.gif);
    122.     margin-left:50%;
    123.     padding:1em;
    124. }
    125.  
    Und so in der Html:
     
    #5      
  6. Herr_D

    Herr_D offline

    Dabei seit:
    09.06.2005
    Beiträge:
    8.557
    Geschlecht:
    männlich
    Zweispaltiges Webdesign in der Umsetzung
    AW: Zweispaltiges Webdesign in der Umsetzung

    Schriftfarbe ist weiß?


    Das hat geklappt... in freier wille kommt natürlich kein Text, das ist nur, um zu clearen (den Fluss wieder herzustellen... bei den anderen beiden div ist weißer Text auf weißem hintergrund schlecht zu lesen


    Wenn das HGBild den rechts und links zuordnest, dann mußt du halt auch 'ne Höhe angeben oder eben den div content den HG verpassen...
     
    #6      
  7. CrazyLopp

    CrazyLopp Hat es drauf

    1
    Dabei seit:
    07.10.2009
    Beiträge:
    2.104
    Geschlecht:
    männlich
    Ort:
    NRW
    Software:
    Ps, Coda, Blender, Maya, phpDesigner 8 und co.
    Kameratyp:
    Canon 1000D, 450D
    Zweispaltiges Webdesign in der Umsetzung
    AW: Zweispaltiges Webdesign in der Umsetzung

    Aber wie bekomme ich es denn nun so hin das die beiden kleiner werden also von der breite, die höhe soll sich ja automatisch anpassen...

    Und wie kann ich eine neue Schriftfarbe für den Content bestimmen, wenn ich einfach colore:#000000; eingebe bring das nicht...

    Aber danke schonmal für die Hilfe :)


    Lieben gruß
    Crazylopp
     
    Zuletzt bearbeitet: 14.03.2010
    #7      
  8. Herr_D

    Herr_D offline

    Dabei seit:
    09.06.2005
    Beiträge:
    8.557
    Geschlecht:
    männlich
    Zweispaltiges Webdesign in der Umsetzung
    AW: Zweispaltiges Webdesign in der Umsetzung

    Ah so...

    gib mal .links und .rechts color:#000 !important; (color nicht colore)

    und dann könntest du da aus dem margin: 0; 10px oder so machen, was du brauchst... Außenabstand halt ... weite dann 961/2-20px ;) dann kannst du padding: auch wechlassen (innenabstand)


    Code (Text):
    1.  
    2. div#content {
    3.     width:961px;
    4.     background:#000000;
    5.     margin:0 auto;
    6. }
    7.  
    8. #content .links {
    9.     width:460px;
    10.     background:url(../grafiken/bg-content.gif);
    11.     float:left;
    12.     margin:10px;
    13.     color:!important;
    14. }
    15.  
    16.  
    17. #content .rechts {
    18.     width:460px;
    19.     background:url(../grafiken/bg-content.gif);
    20.     float:right;
    21.     color:!important;
    22. }
    23.  

    Könnte sein, dass du für den IE die weiten etwas anpassen mußt...



    Morgen mehr, Madame brüllt schon :motz:
     
    #8      
  9. CrazyLopp

    CrazyLopp Hat es drauf

    1
    Dabei seit:
    07.10.2009
    Beiträge:
    2.104
    Geschlecht:
    männlich
    Ort:
    NRW
    Software:
    Ps, Coda, Blender, Maya, phpDesigner 8 und co.
    Kameratyp:
    Canon 1000D, 450D
    Zweispaltiges Webdesign in der Umsetzung
    AW: Zweispaltiges Webdesign in der Umsetzung

    Cool das hat nun schon mal geklappt...

    Nur ein Problem besteht noch und zwar möchte ich innerhalb der contents (also recht und links) noch einen Abstand haben sodas der Text nicht genau am rand sich befindet...
    Nur wie immer weiß ich nicht so genau wie, oder ich werde blind, habe es schon mit border versucht aber das will irgendwie nicht so ganz funktionieren...
     
    #9      
  10. dragobert

    dragobert Nicht mehr ganz neu hier

    Dabei seit:
    21.02.2010
    Beiträge:
    170
    Geschlecht:
    männlich
    Ort:
    Nürnberg
    Software:
    Corel 11
    Kameratyp:
    Lumix FZ18
    Zweispaltiges Webdesign in der Umsetzung
    AW: Zweispaltiges Webdesign in der Umsetzung

    "noch einen Abstand haben sodas der Text nicht genau am rand sich befindet.."
    ...
    Margin
    Padding
     
    #10      
  11. CrazyLopp

    CrazyLopp Hat es drauf

    1
    Dabei seit:
    07.10.2009
    Beiträge:
    2.104
    Geschlecht:
    männlich
    Ort:
    NRW
    Software:
    Ps, Coda, Blender, Maya, phpDesigner 8 und co.
    Kameratyp:
    Canon 1000D, 450D
    Zweispaltiges Webdesign in der Umsetzung
    AW: Zweispaltiges Webdesign in der Umsetzung

    Vielen dank, man sowas nennt man wohl dann auf dem Schlauch stehen :D
     
    #11      
  12. daddaa

    daddaa pro-newbie

    Dabei seit:
    13.12.2006
    Beiträge:
    214
    Geschlecht:
    männlich
    Ort:
    Daheim
    Software:
    Textwrangler, Netbeans, Blender
    Kameratyp:
    Sony Nex-3
    Zweispaltiges Webdesign in der Umsetzung
    AW: Zweispaltiges Webdesign in der Umsetzung

    In dem Fall wohl padding.

    Bei .rechts und .links jeweils z.B. "padding: 10px;" oder je nach Belieben unterschiedliche Angaben für oben/unten bzw. die Seiten.

    edit: border hilft dir da nicht weiter ;) (bzw. vllt schon mit gleicher Farbe, das ist aber sicher nicht im Sinne des Erfinders...)
     
    #12      
  13. CrazyLopp

    CrazyLopp Hat es drauf

    1
    Dabei seit:
    07.10.2009
    Beiträge:
    2.104
    Geschlecht:
    männlich
    Ort:
    NRW
    Software:
    Ps, Coda, Blender, Maya, phpDesigner 8 und co.
    Kameratyp:
    Canon 1000D, 450D
    Zweispaltiges Webdesign in der Umsetzung
    AW: Zweispaltiges Webdesign in der Umsetzung

    Ohh man heute ist aber der Wurm drinnen, nun sieht ja alles schonmal ganz gut aus, jedoch wenn ich jetzt einen etwas längeren Text habe dann verlängert sich ja der content (also content.rechts) jedoch nicht der normale content, also der schwarze Hintergund :hmpf:

    Lieben Gruß
    Crazylopp
     
    #13      
  14. daddaa

    daddaa pro-newbie

    Dabei seit:
    13.12.2006
    Beiträge:
    214
    Geschlecht:
    männlich
    Ort:
    Daheim
    Software:
    Textwrangler, Netbeans, Blender
    Kameratyp:
    Sony Nex-3
    Zweispaltiges Webdesign in der Umsetzung
    AW: Zweispaltiges Webdesign in der Umsetzung

    genau dafür sollte eigentlich das clear-Element da sein...

    Wo hast du das genau eingebunden?

    Kannst du nochmal deinen jetzigen Stand des Quelltextes hochladen oder posten? wäre eine große Hilfe um zu helfen :D
     
    #14      
  15. CrazyLopp

    CrazyLopp Hat es drauf

    1
    Dabei seit:
    07.10.2009
    Beiträge:
    2.104
    Geschlecht:
    männlich
    Ort:
    NRW
    Software:
    Ps, Coda, Blender, Maya, phpDesigner 8 und co.
    Kameratyp:
    Canon 1000D, 450D
    Zweispaltiges Webdesign in der Umsetzung
    AW: Zweispaltiges Webdesign in der Umsetzung

    Code (Text):
    1.  
    2. * {
    3.     margin:0;
    4.     padding:0;
    5.     border:0;
    6. }
    7.  
    8. html {
    9.     background-color:#949494;
    10. }
    11.  
    12. body {
    13.     font:62.5%/1.8em "Times New Roman", verdana, arial, sans-serif;
    14.     color:#fff;
    15.     background:url(../grafiken/bg-body.gif) 0 0 repeat-x;
    16. }
    17.  
    18. .noBorder {
    19.     border:0!important;
    20. }
    21.  
    22. .noMargin {
    23.     margin:0!important;
    24. }
    25.  
    26. .clearer {
    27.     clear:both;
    28. }
    29.    
    30. /* ------------------------- */
    31.  
    32. div#headerContainer {
    33.     width:100%;
    34.     background:url(../grafiken/bg-header-container.png) center 0 no-repeat;
    35. }
    36.  
    37. div#headerContainer div#header {
    38.     width:961px;
    39.     height:329px;
    40.     background:url(../grafiken/bg-header.png) 0 0 no-repeat;
    41.     margin:0 auto;
    42.     position:relative;
    43. }
    44.  
    45. /* ------- End of Header ------ */
    46.  
    47. div#headerContainer div#header ul#navi-top {
    48.     position:absolute;
    49.     list-style:none;
    50.     top:2px;
    51.     left:54px;
    52. }
    53.  
    54. div#headerContainer div#header ul#navi-top li {
    55.     float:left;
    56.     padding:0 15px;
    57.     border-right:1px solid #bfbfbf;
    58.     line-height:12px;
    59.     text-transform:uppercase;
    60. }
    61.  
    62. div#headerContainer div#header ul#navi-top li a {
    63.     color:#bfbfbf;
    64.     text-decoration:none;
    65. }
    66.  
    67. div#headerContainer div#header ul#navi-top li a:hover,
    68. div#headerContainer div#header ul#navi-top li.active a {
    69.     text-decoration:none;
    70.     color:#fff;
    71. }
    72.  
    73. /* ------- End of navi-top ------ */
    74.  
    75. div#headerContainer div#header ul#navi {
    76.     position:absolute;
    77.     top:275px;
    78.     left:194px;
    79.     list-style:none;
    80. }
    81.  
    82. div#headerContainer div#header ul#navi li {
    83.     padding:0 125px 0 0;
    84.     float:left;
    85.     text-transform:uppercase;
    86. }
    87.  
    88. div#headerContainer div#header ul#navi li a {
    89.     color:#bfbfbf;
    90.     font:18px "Times New Roman", verdana, arial, sans-serif;
    91.     text-decoration:none;
    92. }
    93.  
    94. div#headerContainer div#header ul#navi li a:hover,
    95. div#headerContainer div#header ul#navi li.active a {
    96.     color:#fff;
    97.     font:18px "Times New Roman", verdana, arial, sans-serif;
    98.     text-decoration:none;
    99. }
    100.  
    101. /* ------- End of navi ------ */
    102.  
    103.  
    104. div#content {
    105.     width:961px;
    106.     background:#000000;
    107.     margin:0 auto;
    108.     font:11px "Times New Roman", verdana, arial, sans-serif;
    109.     color:#000000;
    110.     position:relative;
    111. }
    112.  
    113. #content .links {
    114.     width:570px;
    115.     padding:15px;
    116.     background:#bfbfbf;
    117.     float:left;
    118.     margin:20px;
    119.     top:75px;
    120.     color:#000000;
    121.     position:absolute;
    122. }
    123.  
    124.  
    125. #content .rechts {
    126.     width:230px;
    127.     padding:15px;
    128.     background:#bfbfbf;
    129.     float:right;
    130.     margin:20px;
    131.     color:#000000;
    132. }
    133.  
    134.  
    135.  
    136.  
     
    #15      
  16. daddaa

    daddaa pro-newbie

    Dabei seit:
    13.12.2006
    Beiträge:
    214
    Geschlecht:
    männlich
    Ort:
    Daheim
    Software:
    Textwrangler, Netbeans, Blender
    Kameratyp:
    Sony Nex-3
    Zweispaltiges Webdesign in der Umsetzung
    AW: Zweispaltiges Webdesign in der Umsetzung

    Versuch es mal ohne das "position:absolute;" bei #content .links, das hebt das Element aus dem Textfluss und Layout heraus. Zur Not kannst du das auch über relative machen, aber es müsste schon auch so gehen (geht ja beim rechten Bereich auch).
    Dazu dann auch noch "top:75px;" rausnehmen und das über margin erledigen.

    Hoffe, das hilft, ansonsten wärs gut, auch mal das html zu haben, dann kann ich es mir ganz ansehen und z.b. mit Firebug untersuchen.
     
    #16      
  17. CrazyLopp

    CrazyLopp Hat es drauf

    1
    Dabei seit:
    07.10.2009
    Beiträge:
    2.104
    Geschlecht:
    männlich
    Ort:
    NRW
    Software:
    Ps, Coda, Blender, Maya, phpDesigner 8 und co.
    Kameratyp:
    Canon 1000D, 450D
    Zweispaltiges Webdesign in der Umsetzung
    AW: Zweispaltiges Webdesign in der Umsetzung

    Ich ahbe mal die componenten auf meinen server gelegt, somit kann man es sich auch real ansehen : rene-w.de

    Ich versuche es mal so wie du es gesagt hast :)


    Lieben Gruß
    Crazylopp
     
    #17      
  18. daddaa

    daddaa pro-newbie

    Dabei seit:
    13.12.2006
    Beiträge:
    214
    Geschlecht:
    männlich
    Ort:
    Daheim
    Software:
    Textwrangler, Netbeans, Blender
    Kameratyp:
    Sony Nex-3
    Zweispaltiges Webdesign in der Umsetzung
    AW: Zweispaltiges Webdesign in der Umsetzung

    Scheint doch funktioniert zu haben.
    Wenn noch was unklar ist, einfach nochmal fragen :D

    Gruß, daddaa
     
    #18      
  19. CrazyLopp

    CrazyLopp Hat es drauf

    1
    Dabei seit:
    07.10.2009
    Beiträge:
    2.104
    Geschlecht:
    männlich
    Ort:
    NRW
    Software:
    Ps, Coda, Blender, Maya, phpDesigner 8 und co.
    Kameratyp:
    Canon 1000D, 450D
    Zweispaltiges Webdesign in der Umsetzung
    AW: Zweispaltiges Webdesign in der Umsetzung

    Also richtig funktinoiert hat es leider nicht, nur weil ich im HTMl document immer leere Tag geschreiben habe zieht der Content (also der schwarze hintergrund nach unten)

    Also dies war im HTML Dokument auf den Clearer bezogen
     
    #19      
  20. daddaa

    daddaa pro-newbie

    Dabei seit:
    13.12.2006
    Beiträge:
    214
    Geschlecht:
    männlich
    Ort:
    Daheim
    Software:
    Textwrangler, Netbeans, Blender
    Kameratyp:
    Sony Nex-3
    Zweispaltiges Webdesign in der Umsetzung
    AW: Zweispaltiges Webdesign in der Umsetzung

    Du hast bei <div class="textbox"> immernoch das position:absolute drin!!!!

    Nehm das raus, dann geht alles wunderbar und du kannst dir die Leerzeichen sparen.

    Ist genau das, was ich oben gesagt, bzw. gemeint habe ;)
     
    #20      
x
×
×