Anzeige

ich steh auf dem schlauch - css mittig

ich steh auf dem schlauch - css mittig | PSD-Tutorials.de

Erstellt von tymoe, 10.11.2008.

  1. tymoe

    tymoe graphicdrunkie

    Dabei seit:
    22.07.2005
    Beiträge:
    273
    Geschlecht:
    männlich
    Ort:
    Ladenburg
    Software:
    Photoshop / Illustrator / Dreamweaver
    Kameratyp:
    EOS 450D
    ich steh auf dem schlauch - css mittig
    Hallo zusammen,

    irgendwie stehe ich gerade völlig auf dem schlauch.

    ich hab ein css layout gebaut und will das mittig zentrieren,
    das komplette layout.
    ich hab wohl nen kleinen denkfehler drin und komme selbst nach mehrfachen suchen und lösungangeboten nicht auf den fehler:

    hier der html teil:

    HTML:
    1. <div id="center">
    2.     <div id="seperator"> <img src="http://www.psd-tutorials.de/modules/Forum/images/seperator.jpg" width="134" height="533" alt="" /></div>
    3.        <div id="head_left"> <img src="http://www.psd-tutorials.de/modules/Forum/images/head_links.jpg" width="64" height="111" alt="" /></div>
    4.     <div id="head_right"> <img src="http://www.psd-tutorials.de/modules/Forum/images/head.jpg" width="602" height="111" alt="" /></div>
    5.     <div id="textline"> <img src="http://www.psd-tutorials.de/modules/Forum/images/slogan.jpg" width="64" height="426" alt="" /></div>
    6.     <div id="topnav">&nbsp;Navigation  </div>
    7.        <div id="content_container">content here  </div>
    8.     <div id="vertical"></div>
    9. </div>
    und das dazugehörige css:
    Code (Text):
    1.  
    2. body{
    3. background-color:#FFFFFF;
    4. text-align: center;
    5. }
    6.  
    7. #center{
    8.     margin: 0px auto ;
    9.     width: 950px;
    10.     text-align: left;
    11. }
    12.  
    13.  
    14. #seperator {
    15.     position:absolute;
    16.     left:64px;
    17.     top:10px;
    18.     width:134px;
    19.     height:533px;
    20. }
    21.  
    22.  
    23. #head_left{
    24.     position:absolute;
    25.     left:0px;
    26.     top:27px;
    27.     width:64px;
    28.     height:111px;
    29. }
    30.  
    31. #head_right{
    32.     position:absolute;
    33.     left:198px;
    34.     top:27px;
    35.     width:602px;
    36.     height:111px;
    37. }
    38.  
    39. #textline{
    40.     position:absolute;
    41.     left:0px;
    42.     top:138px;
    43.     width:64px;
    44.     height:426px;
    45. }
    46.  
    47. #topnav{
    48.     position:absolute;
    49.     left:205px;
    50.     top:138px;
    51.     width:595px;
    52.     height:37px;
    53.     border-right: 1px dashed;
    54. }
    55. #content_container {
    56.     position:absolute;
    57.     left:205px;
    58.     top:175px;
    59.     width:595px;
    60.     height:75%;
    61.     border-right: 1px dashed;
    62.     }
    63.  
    64. #vertical {
    65.     position:absolute;
    66.     left:64px;
    67.     top:175px;
    68.     width:134px;
    69.     height:75%;
    70.     background-image: url(images/navback.jpg);
    71.     background-repeat:repeat-y;
    72.     background-repeat:repeat;
    73.    
    74. }
    75.  
    wie gesagt, ich steh komplett auf dem schlauch.

    wie bekomm ich die dinger alle in die mitte?

    grüße
    tymoe
     
    Zuletzt bearbeitet: 10.11.2008
    #1      
  2. xxsiv

    xxsiv Creative Director

    Dabei seit:
    12.07.2007
    Beiträge:
    230
    Geschlecht:
    männlich
    Ort:
    New York
    ich steh auf dem schlauch - css mittig
    AW: ich steh auf dem schlauch - css mittig

    Code (Text):
    1. #center{
    2.     width: 950px;
    3.     margin: 15px auto;
    4. }
    5.  
    6.  
    text-align: center; kann ausn body raus
     
    #2      
  3. toxictoon

    toxictoon Pixelpatriot

    Dabei seit:
    27.05.2007
    Beiträge:
    633
    Geschlecht:
    männlich
    Ort:
    Augsburg
    Software:
    Adobe CC
    Kameratyp:
    Eos 400 d
    ich steh auf dem schlauch - css mittig
    AW: ich steh auf dem schlauch - css mittig

    mittig ausrichten:

    bau einen container um deine ganzen boxen (hab mir den code jetzt nicht durchgelesen)

    postition:absolute;
    width:950px;
    margin-left:-475px; /* hälfte der breite */
    left:50%;


    genau so könntest du theor. vertikal zentriert ausrichten...
     
    #3      
  4. tymoe

    tymoe graphicdrunkie

    Dabei seit:
    22.07.2005
    Beiträge:
    273
    Geschlecht:
    männlich
    Ort:
    Ladenburg
    Software:
    Photoshop / Illustrator / Dreamweaver
    Kameratyp:
    EOS 450D
    ich steh auf dem schlauch - css mittig
    AW: ich steh auf dem schlauch - css mittig

    muss dich enttäuchen, klappt nicht,
    denke eher dass es an den positionen der einzelnen divs liegt,
    aber wie gesagt, ich steh auf dem schlauch.

    grüße
    ty
     
    #4      
  5. tymoe

    tymoe graphicdrunkie

    Dabei seit:
    22.07.2005
    Beiträge:
    273
    Geschlecht:
    männlich
    Ort:
    Ladenburg
    Software:
    Photoshop / Illustrator / Dreamweaver
    Kameratyp:
    EOS 450D
    ich steh auf dem schlauch - css mittig
    AW: ich steh auf dem schlauch - css mittig

    der erste vorschlag funktionier nicht, bin gerade m 2. dran.
    --
    der funktioniert auch nicht,
    irgendwie muss es wirklich an den positionen der anderen div container liegen.
    vielleicht sollt ich das komplette modell mal umstricken......

    grüße
    ty
     
    Zuletzt bearbeitet: 10.11.2008
    #5      
  6. toxictoon

    toxictoon Pixelpatriot

    Dabei seit:
    27.05.2007
    Beiträge:
    633
    Geschlecht:
    männlich
    Ort:
    Augsburg
    Software:
    Adobe CC
    Kameratyp:
    Eos 400 d
    ich steh auf dem schlauch - css mittig
    AW: ich steh auf dem schlauch - css mittig

    Code (Text):
    1.  
    2. body{
    3. background-color:#FFFFFF;
    4.  
    5. }
    6.  
    7. #center{
    8. position:absolute;
    9. background:#00CCFF;
    10.     margin-left:-475px;
    11.     left:50%;
    12.     height: auto;
    13.     width: 950px;
    14.     text-align:left;
    15.  
    16. }
    17.  
    18. #seperator {
    19.     position:relative;
    20.     left:64px;
    21.     top:10px;
    22.     width:134px;
    23.     height:533px;
    24. }
    25.  
    26.  
    27. #head_left{
    28.     position:relative;
    29.     left:0px;
    30.     top:27px;
    31.     width:64px;
    32.     height:111px;
    33. }
    34.  
    35. #head_right{
    36.     position:relative;
    37.     left:198px;
    38.     top:27px;
    39.     width:602px;
    40.     height:111px;
    41. }
    42.  
    43. #textline{
    44.     position:relative;
    45.     left:0px;
    46.     top:138px;
    47.     width:64px;
    48.     height:426px;
    49. }
    50.  
    51. #topnav{
    52.     position:relative;
    53.     left:205px;
    54.     top:138px;
    55.     width:595px;
    56.     height:37px;
    57.     border-right: 1px dashed;
    58. }
    59. #content_container {
    60.     position:absolute;
    61.     left:205px;
    62.     top:175px;
    63.     width:595px;
    64.     height:75%;
    65.     border-right: 1px dashed;
    66.     }
    67.  
    68. #vertical {
    69.     position:relative;
    70.     left:64px;
    71.     top:175px;
    72.     width:134px;
    73.     height:75%;
    74.     background-image: url(images/navback.jpg);
    75.     background-repeat:repeat-y;
    76.     background-repeat:repeat;
    77.    
    78. }
    79.  
    80.  
    81.  

    bittesehr ;)
     
    #6      
  7. tymoe

    tymoe graphicdrunkie

    Dabei seit:
    22.07.2005
    Beiträge:
    273
    Geschlecht:
    männlich
    Ort:
    Ladenburg
    Software:
    Photoshop / Illustrator / Dreamweaver
    Kameratyp:
    EOS 450D
    ich steh auf dem schlauch - css mittig
    AW: ich steh auf dem schlauch - css mittig

    vielen dank für deine mühe,
    jetzt ist zwar alles zentriert, aber das layout passt nichtmehr zusammen.

    ich bin gerade dran das einfach mal umzufrickeln, denke das passt gkleich wie ichs will
    :)
    hab die container zu seltsam geplant.

    grüße
    ty
     
    #7      
  8. toxictoon

    toxictoon Pixelpatriot

    Dabei seit:
    27.05.2007
    Beiträge:
    633
    Geschlecht:
    männlich
    Ort:
    Augsburg
    Software:
    Adobe CC
    Kameratyp:
    Eos 400 d
    ich steh auf dem schlauch - css mittig
    #8      
  9. tombeat

    tombeat Filter Vergewalitger >)

    Dabei seit:
    04.06.2007
    Beiträge:
    246
    Geschlecht:
    männlich
    Ort:
    Graz/Puntigam|er Bier
    Software:
    PS CS2, Macromedia DW8
    ich steh auf dem schlauch - css mittig
    AW: ich steh auf dem schlauch - css mittig

    Wieso so kompliziert^^

    Code (Text):
    1.  
    2. #center {
    3.     width: 950px;
    4.     margin-left: auto;
    5.     margin-right: auto; }
    6.  
    Funktioniert bei mir immer, und passt sich an die Bildschirmauflösung an ;)
     
    #9      
  10. stb_87

    stb_87 Web-Sheriff - ohne Bild

    Dabei seit:
    13.05.2007
    Beiträge:
    1.895
    Geschlecht:
    männlich
    Software:
    dies & das
    ich steh auf dem schlauch - css mittig
    AW: ich steh auf dem schlauch - css mittig

    Häng vermutlich mit der absoluten Positionierung zusammen.


    Hmm... nicht kompliziert, sondern das selbe...
     
    #10      
  11. cebito

    cebito undefined

    262
    Dabei seit:
    08.03.2008
    Beiträge:
    8.316
    Geschlecht:
    männlich
    Ort:
    Dresden
    Kameratyp:
    zum durchgucken
    ich steh auf dem schlauch - css mittig
    AW: ich steh auf dem schlauch - css mittig

    Das liegt dran, weil die divs relativ positioniert sind, da mußt ein haufen rechnen, bis das passt. Einfacher gehts andersrum container relativ und für body center, dann alle divs rein und absolut positionieren. Hab ich hier http://www.psd-tutorials.de/modules...roblem-mit-div-positionierung.html#post740731 schon mal erklärt.
     
    #11      
  12. Herr_D

    Herr_D offline

    Dabei seit:
    09.06.2005
    Beiträge:
    8.555
    Geschlecht:
    männlich
    ich steh auf dem schlauch - css mittig
    AW: ich steh auf dem schlauch - css mittig



    Das ist genau das Problem...


    außer Center ist alles absolut positioniert... die absoluten interessiert kein stück, ob du noch n mittiges center einbaust... festgeklebt ist festgeklebt ;)



    Zeig mal den Entwurf der Seite (inklusive Bilder) vielleicht finden die CSSNasen hier ja ne Lösung ohne absolute Positionierung...
     
    #12      
x
×
×
teststefan