Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „Div zentrieren“

Foos

Member

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:
<div id="contenthome">

        <div id="centerhome">
          <div class="csc-textpic csc-textpic-left csc-textpic-above">
            <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>
          <div class="csc-textpic-text"></div></div><div class="csc-textpic-clear"><!-- --></div>

        <a id="c4"></a>    

    <div class="mainhead"><a href="http://www.justus-becker.de/index.php?id=11">Aktuelles »</a></div>
    <div class="mainshortcont">
          

<table border="0" cellpadding="0" cellspacing="0">
<tbody><tr><td>
<div style="float: left; margin-right: 7px;"><img src="images/gr.png" width="142"></div>
<p class="newsshorthead">Lorem Ipsum</p>
<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>
<p class="newsshorttext">&nbsp;</p></td></tr>
  <tr>
    <td><div style="float: left; margin-right: 7px;"><img src="images/gr.png" alt="" width="142" /></div>
        <p class="newsshorthead">Lorem Ipsum</p>
      <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>
      <p class="newsshorttext">&nbsp;</p></td>
  </tr>
<tr><td>
<div style="float: left; margin-right: 7px;"><img src="images/gr.png" width="142"></div>
<p class="newsshorthead">Lorem Ipsum</p>
<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>
</tbody></table>
    </div>
    <div class="clr"></div>
</div>
<div id="righthome">
        <a id="c2"></a>
            <div class="csc-textpic csc-textpic-left csc-textpic-above"><div class="csc-textpic-imagewrap">
              <div align="center">
                <dl class="csc-textpic-image csc-textpic-firstcol csc-textpic-lastcol" style="width: 191px;">
                  <dt><strong>Wir sind für Sie da:</strong></dt>
                </dl>
              </div>
              <p align="center">Mo. - Fr.: 07.30 - 12.00 Uhr<br />
                Sa.: 08 - 12.00 Uhr</p>
                </div>
            <div class="csc-textpic-text"></div></div><div class="csc-textpic-clear"><!-- --></div>

        <a id="c5"></a>
        <div class="newshead">Neuigkeiten</div>
        <div class="newsbox">
            <div class="newsdat">26.09.2008</div>
            <div class="newstitel">Loremp Ipsum</div>
            <div class="newsdat">26.09.2008</div>
            <div class="newstitel">Loremp Ipsum</div>
            <div class="newsdat">26.09.2008</div>
            <div class="newstitel">Loremp Ipsum</div>
            <div class="newsdat">26.09.2008</div>
            <div class="newstitel">Loremp Ipsum</div>
            <div class="newsdat">25.09.2008</div>
            <div class="newstitel">Loremp Ipsum</div>
</div>

        <a id="c6"></a>

            <div class="newshead">Wetter</div>
            <p></p>
            <table border="1" align="center" cellpadding="4" cellspacing="0">
              <tbody>
                <tr>
                  <td align="center"><font size="-7"><nolayer>
                    <iframe noresize="" marginheight="0" marginwidth="0" src="menu_data/home_zaehler_typ3.htm" scrolling="No" width="0" frameborder="0" height="0"></iframe>
                    </nolayer> <font face="arial"> <b>Lauterhofen (Oberpfalz)</b><br />
                      Samstag<br />
                      18° / 3°C<br />
                      <a href="http://www.wetter.net/" target="_blank"><img src="images/k2.gif" alt="heiter" width="50" border="0" height="39" /></a><br />
                      heiter<br />
                      <br />
                      <a href="http://www.wetter.net/" target="_blank">© wetter.net</a></font></font></td>
                </tr>
              </tbody>
          </table>
        </div>
        <div id="floatreset"></div>
      </div>
 

Wraith

Nicht mehr ganz neu hier

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
 

gargamelix

Aktives Mitglied

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:

stb_87

Web-Sheriff - ohne Bild

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?
 

eFoX

Reiche Zahnarztgattin

AW: Div zentrieren

div id =contenthome ist dein seiten-wrapper?
dann dort im css den eintrag in:
Code:
margin: 0 auto;
ändern! bewirkt vertikale zentrierung im browser
 
C

cosmicblue

Guest

AW: Div zentrieren

div id =contenthome ist dein seiten-wrapper?
dann dort im css den eintrag in:
Code:
margin: 0 auto;
ändern! bewirkt vertikale zentrierung im browser

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

Gruß

cosmicblue
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
175.189
Beiträge
2.582.077
Mitglieder
67.259
Neuestes Mitglied
SaschMasch1312
Oben