Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „Website mit enthaltenen DIV-Container zentrieren“

ichwars83

Noch nicht viel geschrieben

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

undefined

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

Noch nicht viel geschrieben

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

undefined

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

Noch nicht viel geschrieben

AW: Website mit enthaltenen DIV-Container zentrieren

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

Herr_D

offline

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
 

cebito

undefined

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

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

Noch nicht viel geschrieben

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;)
 

feelx75

Hotpixel

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

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

offline

AW: Website mit enthaltenen DIV-Container zentrieren

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

Noch nicht viel geschrieben

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

Noch nicht viel geschrieben

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...
 
Zuletzt bearbeitet:

ichwars83

Noch nicht viel geschrieben

AW: Website mit enthaltenen DIV-Container zentrieren

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

mfg
 

Schattenspringer

Noch nicht viel geschrieben

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

Noch nicht viel geschrieben

AW: Website mit enthaltenen DIV-Container zentrieren

Mein herzlichen Dank....Berufsblind :D
Genau das war das Problem...passiert.

Eine schöne neue Woche noch.

MFG
 
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

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
175.158
Beiträge
2.581.880
Mitglieder
67.226
Neuestes Mitglied
Alec168
Oben