Anzeige

Div zentrieren

Div zentrieren | PSD-Tutorials.de

Erstellt von Foos, 28.09.2008.

  1. Foos

    Foos Member

    1
    Dabei seit:
    31.01.2007
    Beiträge:
    1.034
    Geschlecht:
    männlich
    Software:
    Photoshop, Dreamweaver, Indesign, Illustrator
    Kameratyp:
    Sony A7R/A7S
    Div zentrieren
    HEy, ich mach gerad eine neue Homepage und versuche verzweifelt meinen Div-Container zu zentrieren!
    Ich hätte den Code, der allerdings noch sehr unaufgeräumt ist. Aber vl. blickt ihr ja trotzdem duch und könntet mir sagen, wie ich das Ding in die Mitte bekomm...

    PHP:
    1. <div id="contenthome">
    2.  
    3.         <div id="centerhome">
    4.           <div class="csc-textpic csc-textpic-left csc-textpic-above">
    5.             <div align="center"><a href="images/gruppe_gross.jpg" rel="lightbox[logos]" ><img src="images/gruppe_grossthumb.jpg" title="bp.jpg" height="177" width="255" /></a></div>
    6.           <div class="csc-textpic-text"></div></div><div class="csc-textpic-clear"><!-- --></div>
    7.  
    8.         <a id="c4"></a>    
    9.  
    10.     <div class="mainhead"><a href="http://www.justus-becker.de/index.php?id=11">Aktuelles »</a></div>
    11.     <div class="mainshortcont">
    12.          
    13.  
    14. <table border="0" cellpadding="0" cellspacing="0">
    15. <tbody><tr><td>
    16. <div style="float: left; margin-right: 7px;"><img src="images/gr.png" width="142"></div>
    17. <p class="newsshorthead">Lorem Ipsum</p>
    18. <p class="newsshorttext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
    19. <p class="newsshorttext">&nbsp;</p></td></tr>
    20.   <tr>
    21.     <td><div style="float: left; margin-right: 7px;"><img src="images/gr.png" alt="" width="142" /></div>
    22.         <p class="newsshorthead">Lorem Ipsum</p>
    23.       <p class="newsshorttext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
    24.       <p class="newsshorttext">&nbsp;</p></td>
    25.   </tr>
    26. <tr><td>
    27. <div style="float: left; margin-right: 7px;"><img src="images/gr.png" width="142"></div>
    28. <p class="newsshorthead">Lorem Ipsum</p>
    29. <p class="newsshorttext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p></td></tr>
    30. </tbody></table>
    31.     </div>
    32.     <div class="clr"></div>
    33. </div>
    34. <div id="righthome">
    35.         <a id="c2"></a>
    36.             <div class="csc-textpic csc-textpic-left csc-textpic-above"><div class="csc-textpic-imagewrap">
    37.               <div align="center">
    38.                 <dl class="csc-textpic-image csc-textpic-firstcol csc-textpic-lastcol" style="width: 191px;">
    39.                   <dt><strong>Wir sind für Sie da:</strong></dt>
    40.                 </dl>
    41.               </div>
    42.               <p align="center">Mo. - Fr.: 07.30 - 12.00 Uhr<br />
    43.                 Sa.: 08 - 12.00 Uhr</p>
    44.                 </div>
    45.             <div class="csc-textpic-text"></div></div><div class="csc-textpic-clear"><!-- --></div>
    46.  
    47.         <a id="c5"></a>
    48.         <div class="newshead">Neuigkeiten</div>
    49.         <div class="newsbox">
    50.             <div class="newsdat">26.09.2008</div>
    51.             <div class="newstitel">Loremp Ipsum</div>
    52.             <div class="newsdat">26.09.2008</div>
    53.             <div class="newstitel">Loremp Ipsum</div>
    54.             <div class="newsdat">26.09.2008</div>
    55.             <div class="newstitel">Loremp Ipsum</div>
    56.             <div class="newsdat">26.09.2008</div>
    57.             <div class="newstitel">Loremp Ipsum</div>
    58.             <div class="newsdat">25.09.2008</div>
    59.             <div class="newstitel">Loremp Ipsum</div>
    60. </div>
    61.  
    62.         <a id="c6"></a>
    63.  
    64.             <div class="newshead">Wetter</div>
    65.             <p></p>
    66.             <table border="1" align="center" cellpadding="4" cellspacing="0">
    67.               <tbody>
    68.                 <tr>
    69.                   <td align="center"><font size="-7"><nolayer>
    70.                     <iframe noresize="" marginheight="0" marginwidth="0" src="menu_data/home_zaehler_typ3.htm" scrolling="No" width="0" frameborder="0" height="0"></iframe>
    71.                     </nolayer> <font face="arial"> <b>Lauterhofen (Oberpfalz)</b><br />
    72.                       Samstag<br />
    73.                       18° / 3°C<br />
    74.                       <a href="http://www.wetter.net/" target="_blank"><img src="images/k2.gif" alt="heiter" width="50" border="0" height="39" /></a><br />
    75.                       heiter<br />
    76.                       <br />
    77.                       <a href="http://www.wetter.net/" target="_blank">© wetter.net</a></font></font></td>
    78.                 </tr>
    79.               </tbody>
    80.           </table>
    81.         </div>
    82.         <div id="floatreset"></div>
    83.       </div>
     
    #1      
  2. Wraith

    Wraith Nicht mehr ganz neu hier

    1
    Dabei seit:
    22.06.2005
    Beiträge:
    74
    Geschlecht:
    männlich
    Ort:
    Altenriet
    Software:
    Adobe Creative Suite CS5 Master Collection
    Kameratyp:
    Canon PowerShot G12
    Div zentrieren
    AW: Div zentrieren

    Das CSS für den Hauptcontainer bei 800 mal 400 Pixel Größe:

    #contenthome {
    height: 400px;
    width: 800px;
    margin-top: -200px;
    margin-left: -800px;
    position: absolute;
    left: 50%;
    top: 50%;
    }

    Grüßle
    Wraith
     
    #2      
  3. gargamelix

    gargamelix Aktives Mitglied

    253
    Dabei seit:
    24.07.2008
    Beiträge:
    1.340
    Geschlecht:
    männlich
    Ort:
    NRW
    Software:
    PS/Corel
    Kameratyp:
    Foto:EOS 450 D,Knipse:PS A530
    Div zentrieren
    AW: Div zentrieren

    <style>
    #contenthome {
    height: 400px;
    width: 800px;
    margin-left:auto;
    margin-right:auto;

    }
    </style>

    So kann man auch die höhe und breite des divs immer noch ändern..

    und alles ist schön in der Mitte..
     
    Zuletzt bearbeitet: 28.09.2008
    #3      
  4. Foos

    Foos Member

    1
    Dabei seit:
    31.01.2007
    Beiträge:
    1.034
    Geschlecht:
    männlich
    Software:
    Photoshop, Dreamweaver, Indesign, Illustrator
    Kameratyp:
    Sony A7R/A7S
    Div zentrieren
    AW: Div zentrieren

    also ich kriegs irgendwie nich in die mitte...:(
     
    #4      
  5. stb_87

    stb_87 Web-Sheriff - ohne Bild

    Dabei seit:
    13.05.2007
    Beiträge:
    1.895
    Geschlecht:
    männlich
    Software:
    dies & das
    Div zentrieren
    AW: Div zentrieren

    Hast die Seite mal mit Strg + F5 neu geladen bzw. den Cache geleert?

    Wie sieht denn dein Quelltext aus? Wie hast du das eingefügt?
     
    #5      
  6. eFoX

    eFoX Reiche Zahnarztgattin

    Dabei seit:
    18.04.2004
    Beiträge:
    620
    Geschlecht:
    männlich
    Ort:
    Stuttgart
    Software:
    CS4 Suite
    Kameratyp:
    EOS 450D + 70-200:4L + 28-75:2.8
    Div zentrieren
    AW: Div zentrieren

    div id =contenthome ist dein seiten-wrapper?
    dann dort im css den eintrag in:
    Code (Text):
    1. margin: 0 auto;
    ändern! bewirkt vertikale zentrierung im browser
     
    #6      
  7. cosmicblue

    cosmicblue Guest

    Div zentrieren
    AW: Div zentrieren

    Stimmt. Aber beim IE6 bewirkt das leider nichts. Da mußt du noch zusätzlich z.B. für den body
    Code (Text):
    1. text-align: center;
    nehmen. Allerding muss dann in den anderen DIV´s die Textausrichtung noch angepasst werden.

    Gruß

    cosmicblue
     
    #7      
x
×
×
teststefan