Website mit enthaltenen DIV-Container zentrieren

ichwars83 · 06.02.2009

Hallo ihr Experten,

weiß nicht obs hier rein passt und die Überschrift ist wohl auch nicht ganz verständlich, deswegen versuch ich es mal zu erläutern.

Also es geht darum eine Website zu zentrieren, das ist weniger das Problem,denn da gibts ja viele Möglichkeiten. Vorallem mit Dreamweaver.
Die Seite besteht aus einem Hintergrundbild und darauf sind mittels DIV-Containern die Inhalte und auch die Buttons.

Ist die Website links oben, bleibt alles an Ort und stelle, egal welche größe das Browserfenster gerade hat.

Nachdem ich aber dank einer einzelnen Tabellenspalte die Website bzw. die Hintergrundgrafik nun zentriert haben und auch die DIVs an die vermeindlich richtige position geschoben haben, bleiben die DIVs stehen, nur die Grafik passen sich dem Browserfenster an...sind also Dynamisch.
Ich möchte aber das der Text und die Buttons, sprich die DIVs sich mit bewegen...also auch am Browserfenster und somit der Auflösung anpassen.

Ich hoffe es war verständlich...*schwitz* Und ihr könnt mir helfen.

Als alternative bleibt mir dann nämlich nur die Grafik zu Slicen und dann so anzupassen und den Text mit einem iframe einzufügen...hab ich aber nicht so viel spielraum...was die Kreativität angeht. Der Text liegt auf einem halbtransparentem Viereck...

Vielen Dank..

VG aus Leipzig

cebito · 06.02.2009

AW: Website mit enthaltenen DIV-Container zentrieren

Tabelle hin oder her, klar werden die Div's der nicht folgen. Ein wenig css/html-code zur Analyse wäre hier angebracht.

ichwars83 · 06.02.2009

AW: Website mit enthaltenen DIV-Container zentrieren

Dann setz ich mal den Code rein, den ich im Dreamweaver hier vorliegen habe.

Code:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSL_Gallery</title>
<style type="text/css">
<!--
body,td,th {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: small;
 color: #FFFFCC;
}
body {
 background-color: #663300;
}
.Stil1 {font-size: x-small}
#apDiv2 {
 position:absolute;
 left:352px;
 top:94px;
 width:328px;
 height:50px;
 z-index:2;
}
#apDiv3 {
 position:absolute;
 left:438px;
 top:219px;
 width:494px;
 height:303px;
 z-index:3;
}
.Stil2 {font-size: small}
-->
</style></head>
<body>
<table width="100%" border="0" cellspacing="0">
  <tr>
    <td><div align="center"><img src="Bilder/index.jpg" width="1030" height="592" alt="Index_BG" /></div></td>
  </tr>
</table>
<!-- ImageReady Slices (csl_gallery.psd) -->
<div id="apDiv2">
  <table width="100%" border="0">
    <tr>
      <td width="41%"><table width="100%" border="0">
        <tr>
          <td width="44%"><div align="left"><img src="Bilder/button_galerie.png" alt="Gallerie" width="129" height="40" border="0" usemap="#Map" /></div></td>
          <td width="56%"><img src="Bilder/button_impressum.png" alt="Impressum" width="124" height="38" border="0" usemap="#Map2" /></td>
        </tr>
      </table></td>
    </tr>
  </table>
</div>
<div id="apDiv3">
  <p class="Stil1"><br />
    <span class="Stil2">Herzlich Willkommen bei der CSL-Gallery<br />
    <br />
    <br />
    Hier finden Sie sch&ouml;ne Momentaufnahmen von Leipzig und<br />
    dem Leipziger Umland.<br />
    </span></p>
  <p><span class="Stil2">Doch der Osten Deutschlands hat noch viel mehr zu bieten.<br />
  Die Sehensw&uuml;rdigkeiten von Dresden, wie der Zwinger, die<br />
  Semperoper und der F&uuml;rstenzug sind nur einige davon.<br />
    <br />
    In unserer Rubrik &quot;Ausflugsziele&quot; k&ouml;nnen Sie sich viele sch&ouml;ne<br />
    Bilder anschauen, vielleicht bekommen Sie ja dann Geschmack<br />
    auf einen kleinen Tagesausflug.<br />
    <br />
    Wir w&uuml;nschen Ihnen viel Spa&szlig; beim st&ouml;bern.</span><br />
  </p>
  <p>&nbsp; </p>
</div>
<!-- End ImageReady Slices -->
<map name="Map" id="Map">
  <area shape="rect" coords="4,4,201,52" href="galerie.html" />
  <area shape="rect" coords="43,46,167,82" href="gallerie.html" />
</map>
<map name="Map2" id="Map2">
  <area shape="rect" coords="3,5,200,53" href="impressum.html" />
</map>
</body>
</html>

Ich hoffe da kann man was erkennen...ich arbeite so gut wie nie mit Code, denn bin eher ein Pixelschieber...

cebito · 06.02.2009

AW: Website mit enthaltenen DIV-Container zentrieren

mach mal ein div all:

Code:

#all {
position:relative;
margin:0 auto;
width:1030px;
height:auto;
}


<body>
<div id="all">

<!-- hier alles rein, was bisher zw. <body> und  </body> steht -->

</div>
</body>

ichwars83 · 06.02.2009

AW: Website mit enthaltenen DIV-Container zentrieren

Ich werds bei nächster Gelegenheit ausprobieren und poste dann mein Ergebnis.

Herr_D · 06.02.2009

AW: Website mit enthaltenen DIV-Container zentrieren

position: relative ist unnötig und für ein Element direkt nach dem Body völlig sinnfrei und falsch

o0Andy0o · 06.02.2009

AW: Website mit enthaltenen DIV-Container zentrieren

wie kann man den Wrapper umgehen ?

stb_87 · 06.02.2009

AW: Website mit enthaltenen DIV-Container zentrieren

o0Andy0o schrieb:
wie kann man den Wrapper umgehen ?

Wie meinst du das jetzt genau?

cebito · 06.02.2009

AW: Website mit enthaltenen DIV-Container zentrieren

Herr_D schrieb:
position: relative ist unnötig und für ein Element direkt nach dem Body völlig sinnfrei und falsch

N(J)ein, warum es so ist, frag mich nicht, aber wenn ich dem div position: relative gebe, richten sich die darin befindlichen absolut positionierten div's an den Dimensionen von div all aus, lass ich position: relative weg, tun sie dies nicht sondern richten sich wieder am Fenster aus.
Funktioniert in allen (mir zur Verfügung stehenden) Browsern und ist auch nur als Notlösung anzusehn, wenn man nicht gleich den gesamten Quelltext umschreiben will.

Darude · 06.02.2009

AW: Website mit enthaltenen DIV-Container zentrieren

@ichwars83

Du hast deine Div-Container als "absolute positioniert", was ich so auf den ersten Blick gesehen hab. Wenn du erreichen möchtest, dass sich deine DIVs zusammen mit deinem Hintergrundbild verschieben, musst du sie floaten. Das erreichst du mit der Anweisung "float: left" oder "float: right" im CSS-Code... In Dreamweaver gibt es auch diese Option, sie heißt nur anders... Wenn du sie nicht findest, dann meld dich mal...Ich installier Dreamweaver und guck mal nach ... Viel Glück

o0Andy0o · 06.02.2009

AW: Website mit enthaltenen DIV-Container zentrieren

stb:

Herr_D schrieb:
position: relative ist unnötig und für ein Element direkt nach dem Body völlig sinnfrei und falsch

ich warte immernoch auf ne Antwort.

feelx75 · 06.02.2009

AW: Website mit enthaltenen DIV-Container zentrieren

Herr_D schrieb:
position: relative ist unnötig und für ein Element direkt nach dem Body völlig sinnfrei und falsch

cebito schrieb:
N(J)ein, warum es so ist, frag mich nicht, aber wenn ich dem div position: relative gebe, richten sich die darin befindlichen absolut positionierten div's an den Dimensionen von div all aus, lass ich position: relative weg, tun sie dies nicht sondern richten sich wieder am Fenster aus.
Funktioniert in allen (mir zur Verfügung stehenden) Browsern und ist auch nur als Notlösung anzusehn, wenn man nicht gleich den gesamten Quelltext umschreiben will.

Das stimmt und in diesem Fall macht Position: relative eigentlich auch Sinn... denn die Spezifikation sagt:

position: relative
Die Position der Box wird gemäß dem normalen Fluss berechnet (man spricht auch von der Position im normalen Fluss). Anschließend wird die Box relativ zu ihrer normalen Position verschoben. Wird eine Box B relativ positioniert, wird die Position der nachfolgenden Box so berechnet, als wäre B nicht verschoben worden.

position: absolute
Die Position (und möglicherweise Größe) der Box wird mit Hilfe der Eigenschaften 'left', 'right', 'top' und 'bottom' angegeben. Diese Eigenschaften geben Abstände relativ zum umschließenden Block der Box an. Absolut positionierte Boxen werden aus dem normalen Fluss entfernt. Das bedeutet, sie haben keinen Einfluss auf das Layout späterer gleichrangiger Elemente. Obwohl absolut positionierte Boxen Ränder haben, fallen sie nicht mit anderen Rändern zusammen.

@Andy: Wieso willst du den Wrapper umgehen?

Herr_D · 06.02.2009

AW: Website mit enthaltenen DIV-Container zentrieren

cebito schrieb:
N(J)ein, warum es so ist, frag mich nicht, aber wenn ich dem div position: relative gebe, richten sich die darin befindlichen absolut positionierten div's an den Dimensionen von div all aus, lass ich position: relative weg, tun sie dies nicht sondern richten sich wieder am Fenster aus.
Funktioniert in allen (mir zur Verfügung stehenden) Browsern und ist auch nur als Notlösung anzusehn, wenn man nicht gleich den gesamten Quelltext umschreiben will.

oke... ziehe alles zurück, hatte den quelltext da oben nicht richtig gelesen... die absoluten Positionierungen hab ich übersehen...

theoretisch müßte man den gesamten Quelltext umschreiben... und wenns nur so ist, die absoluten positionierungen auf 50% zu setzen und per -padding das ganze wieder richtig hinzurücken

Dann könnte man sich den Wrapper sparen...

ichwars83 · 13.02.2009

AW: Website mit enthaltenen DIV-Container zentrieren

Hallo,

also nach etwas langer Zeit bin ich heut mal wieder dazu gekommen rumzuprobieren.
Hab als erstes die Variante von cbito ausprobiert und bin zufrieden damit. Reicht völlig so aus. Alles was danach kam klang mir zu verwirrend und auf komplett neuen Quelltext hab ich ehrlich gesagt keine lust.

Herzlichen Dank an alle Tippgeber.

Nice Weekend

ichwars83 · 27.03.2009

AW: Website mit enthaltenen DIV-Container zentrieren

Hallöchen,

muss das Thema noch mal aus der Mottenkiste auspacken, aber hab einen anderen Projekt ein ähliches Problem.
Denke mal das ich einen Denkfehler habe. Bin wie von cbito beschrieben vorgegangen.

Vielleicht findet jemand (m)einen Denkfehler...Vielen Dank schon mal.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/URL]">
<html xmlns="[URL="http://www.w3.org/1999/xhtml"]XHTML namespace[/URL]">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Malschule Petra</title>
<style type="text/css">
<!--
body,td,th {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: small;
 color: #000066;
 overflow:hidden
}
#all {
position:relative;
margin:0 auto;
width:1030px;
height:auto;
}
#apDiv1 {
 position:absolute;
 left:208px;
 top:219px;
 width:592px;
 height:346px;
 z-index:1;
}
-->
</style></head>
<body>
<div id="apDiv1">
  <h3>Herzlich Willkommen!</h3>
</div>
<div align="center">
<div id="all">
  <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td valign="middle"><div align="center"><img src="Bilder/background.jpg" width="800" height="600" border="0" usemap="#Map" /></div></td>
    </tr>
    <tr>
      <td><div align="center">
        <p><br />
          © 2009 ? Computerservice Leipzig ? P. Tietz</p>
      </div></td>
    </tr>
  </table>
</div>
</div>
<map name="Map" id="Map">
<area shape="rect" coords="386,122,502,156" href="angebot.html" target="_parent" alt="Angebot" />
<area shape="rect" coords="514,122,633,156" href="galerie.html" target="_parent" alt="Galerie" />
<area shape="rect" coords="642,122,758,156" href="impressum.html" target="_parent" alt="Impressum" />
<area shape="rect" coords="50,12,414,106" href="home2.html" />
</map>
</div>
</body>
</html>

Und noch ein Bild...

ichwars83 · 30.03.2009

AW: Website mit enthaltenen DIV-Container zentrieren

Das Problem besteht weiterhin...hat jemand eine Idee für die Lösung des Ganzen?

mfg

Schattenspringer · 30.03.2009

AW: Website mit enthaltenen DIV-Container zentrieren

du hast die div mit der id "apDIV1" mit der überschrift vor das div "all gesetzt" - denke mal, dass das wahrscheinlich das prob sein wird ....

gruss schattenspringer

ichwars83 · 30.03.2009

AW: Website mit enthaltenen DIV-Container zentrieren

Mein herzlichen Dank....Berufsblind

Genau das war das Problem...passiert.

Eine schöne neue Woche noch.

MFG