Überlappen von div

Rotut · 26 Februar 2010

Hallo,

möchte eine Seite zentriert aufbauen.

Habe es bisher so ganz gut hinbekommen:

Dateianhang "1.jpeg"

Nun möchte ich ein Feld einbinden welches über gelb, hellbraun und weiß hinweggeht.

über gelb ist kein problem - da es innerhalb dieses Divs "rand_links" liegt.
aber es geht nicht über "content" und "contentreal" hinweg sondern setzt sich davor.

Dateianhang "2.jpeg"

kann mir jemand helfen bitte - bin schon am verzweifeln mit diesem scheiß zentrieren!?!

Rotut · 26 Februar 2010

ach der Code ist

html

HTML:

<body>
 
<!-- RAND_RECHT-->
<div id="rand_rechts">
 
<!-- TRAILER -->
<div id="trailer">
</div>
<!-- RAND_LINKS -->
<div id="rand_links">
<!-- BUTTON hz -->
<div id="hz_button">
<a class="hz_hover" href="xxx.php"></a>
</div>
 
</div>
<!-- RAND_LINKS END -->
</div>
<!-- RAND_RECHTS END -->
</div>
</body>

css

HTML:

 body {
  width:1000px; height:700px;
  margin:auto;  padding:0;
  background:transparent url(../projekt_2/neu/grafik/herzen.jpg);
}
<!------------------------->
<!-- DIV TAGS DEFINIERT  -->
<!------------------------->
 
<!-- RAND_RECHTS -->
#rand_rechts {
  position:absoulte; top:0px; left:0px;
  width:1000px; height:700px;
  margin:auto;  padding:0;
  background-color:blue;
}
<!-- TRAILER -->
#trailer {
  position:absoulte; top:0px; left:0px;
  width:800px; height:200px;
  float: left;
  margin:auto;  padding:0;
  background-color:red;
}
<!-- RAND_LINKS -->
#rand_links {
  position:absoulte; top:200px; left:0px;
  width:800px; height:500px;
  float: left;
  margin:auto;  padding:0;
  background-color:orange;
}
<!-- BUTTON nz-->
#hz_button {
  position:absoulte; top:0px; left:0px;
  width:300px; height:80px;
  float: left;
  margin-left:10px;margin-top:10px;  padding:0;
  background-color:blue;
}
 
<!-- CONTENT -->
#content {
  position:absoulte; top:200px; left:200px;
  width:600px; height:480px;
  float: left;
  margin-left:200px;  padding:0;
  background-color:#876456;
}
<!-- CONTENT_REAL -->
#contentreal {
  position:absoulte; top:200px; left:200px;
  width:580px; height:460px;
  float: left;
  margin-left:10px; margin-top:10px; padding:0;
  background-color:white;
}

Efchen · 26 Februar 2010

Du machst den selben Fehler, wie viele Anfänger. Du fängst mit dem Aussehen der Site an.
Und wenn Du dann mit HTML die Semantik festlegst, musst Du wieder alles ändern.

Block-Elemente zentriert man mit "margin:0 auto", Inline-Elemente zentriert man, indem man dem Elternelement "text-align:center" mitgibt.

Mach Dich mal mit den Grundlagen vertraut, insbesondere HTML und Semantik, denn das kommt sinnvollerweise eigentlich vor dem Layout:
Einf

Überlappen von div

Rotut

Neues Mitglied

Anhänge

Rotut

Neues Mitglied

Efchen

Guest

Neueste Beiträge