• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

DIV Coontainer lappt einwenig über? (HTML/CSS)

Waterfront_xD

Waterfront_xD

Neues Mitglied
Moin ich verzweifel... Schaut euch das Bild an: Man sieht das der Container "Linkerrand" nicht gleich mit "Datum" aufhört... Also er lappt einfach rüber ... Die width sind aber bei beiden Containern 20% ...

8BBDn.PNG


Hier mein kompletter body:
HTML: 
<body>
<div id="website">


    <div id="home">Home</div>
    <div id="banner">Banner</div>
    <div id="datum">Datum</div>
    <div id="menu">Menü</div>
    <div id="linkerrand">Linkerrand</div>   
    <div id="content">Content</div>
    <div id="telefon">Telefon</div>       
   
   
</div>
</body>

Und hier meine CSS datei:
Code: 
html, body {
    font-family: Verdana, Arial, sans-serif;
    color: white;
    background-image: url("../images/background.png");
}

#website{
height:100%;
width:100%;
margin:auto;
}

#home{
background: green;
height:200px;
width:20%;
position:absolute;
top:10px;
left:10px;
}

#banner{
background: gray;
height:200px;
width:80%;
position:absolute;
top:10px;
right:10px;
}

#datum{
background: blue;
height:25px;
width:20%;
position:absolute;
top:210px;
left:10px;
}

#menu{
background: orange;
height:25px;
width:80%;
position:absolute;
top:210px;
right:10px;
}

#linkerrand{
background:orange;
height:600px;
width:20%;
position:absolute;
top:235px;
left:10px;
}

#content{
-moz-border-radius:15px 15px 15px 15px; /* Firefox */
-webkit-border-radius:15px 15px 15px 15px; /* Chrome, Safari */
-khtml-border-radius:15px 15px 15px 15px; /* Konqueror */
border-radius:15px 15px 15px 15px; /* CSS3 */
behavior:url(border-radius.htc); /* Internet Explorer */
border: solid black 2px;
height:500px;
width:55%;
position:absolute;
top:255px;
right:300px;
}

#telefon{
border: solid white 2px;
-moz-border-radius:15px 15px 15px 15px; /* Firefox */
-webkit-border-radius:15px 15px 15px 15px; /* Chrome, Safari */
-khtml-border-radius:15px 15px 15px 15px; /* Konqueror */
border-radius:15px 15px 15px 15px; /* CSS3 */
behavior:url(border-radius.htc); /* Internet Explorer */
width:250px;
height:200px;
position:fixed;
top:250px;
right:8px;
}

LG
Water
 
Werbung:
Div-Container werden nicht position: absolute sondern mit floats nebeneinander angeordnet.
 
ja das hatte ich zuerst auch so gefloatet, dann war es aber nicht möglich mit margin-top:XYpx; den "content" div container ein bisschen vom menü runter zu schieben sondern es wurde die komplette website runter geschoben
 
Werbung:
Hallo,

dann waren in deinem Quellcode bzw. den CSS-Anweisungen Fehler enthalten. Die sollten beseitigt werden, anstatt sie zu belassen und mit ungeeigneten Mitteln überspielen zu wollen. Ohne Link zur Seite mit Inhalt ist leider keine konkrete Hilfe möglich.

Außerdem solltest du auf feste Pixel-Angaben so weit wie möglich verzichten. Sonst wird deine Seite nicht flexibel und entspricht einem veralteten Tabellenlayout - halt nur mit anderen Mitteln.

Gruss

MrMurphy
 
Zuletzt bearbeitet:
Waterfront_xD schrieb:
ja das hatte ich zuerst auch so gefloatet, dann war es aber nicht möglich mit margin-top:XYpx; den "content" div container ein bisschen vom menü runter zu schieben sondern es wurde die komplette website runter geschoben
Zum Vergrößern anklicken....

War vielleicht ein collapsing margin, aber das löst man nicht mit position: absolute.

Es gibt zwei Ansätze, welche immer problematisch sind. Der eine besteht in Tabellenlayout und der andere darin, Webseiten wie ein Grafik-Dokument aufbauen zu wollen.
 
Jo also erstens ist es keine Online Website sondern die URL sagt schon: localhost also es ist mein XAMPP server :D ^^

Dann werd ich den Code wieder zurück schreiben und das wieder mit float machen...
Collapsing margin, heißt das soviel wie verschachteln?`Also ich hatte bevor ich alles absolute gemacht hatte mehrere verschachtelungen noch drinnen um zu probieren aber es hat nix gebracht es wurde immer die komplette website runter geschoben ...
naja ich werds erstmal umschreiben und dann meld ich mich wieder :)
 
Werbung:
Hallo

Jo also erstens ist es keine Online Website sondern die URL sagt schon: localhost also es ist mein XAMPP server
Zum Vergrößern anklicken....

Ja und? Es gibt genügend Freeware-Provider, zum Beispiel blaced.net. Da hast du innerhalb von 5 Minuten massenhaft kostenlosen Speicherplatz.

Gruss

MrMurphy
 
Habs mal etwas umgestellt. Hoffe du kannst es gebrauchen.
Übrigens, solltest du Text-Elemente keine feste Höhe geben. Kann unter Umständen kritisch werden.
Code: 
<!doctype html>
<html>
<head>
<title>test</title>
<meta charset="utf-8">
<style>
html, body {
  font-family: Verdana, Arial, sans-serif;
  color: white;
  background-image: url("../images/background.png");
height:100%;
}
#website{
margin:auto;
max-width:1300px;
min-height:100%;
}
#home{
background: green;
width:20%;
float:left;
}
#banner{
background: gray;
width:80%;
float:left;
}
#datum{
background: blue;
width:20%;
float:left
}
#menu{
background: orange;
width:80%;
float:left;
}
#linkerrand{
background:orange;
width:20%;
float:left;
}
#content{
width:55%;
float:left;
background:#999;
}
#telefon{
width:25%;
float:left;
background:#aaa;
}

.innen {
 margin:10px;
 padding:10px;
}

.border {
border:1px solid #000;
}

.noborder {
 padding:11px 0;
 border:none;
}

</style>
</head>
<body>
<div id="website">
  <div id="home">
   <div class="innen noborder">
      Home
   </div>
  </div>

  <div id="banner">
   <div class="innen noborder">
     Banner
   </div>
  </div>

  <div id="datum">
   <div class="innen noborder">
     Datum
   </div>
  </div>

  <div id="menu">
   <div class="innen noborder">
     menü
   </div>  
  </div>

  <div id="linkerrand">
   <div class="innen noborder">
      Linkerrand
   </div>  
  </div>

  <div id="content">
   <div class="innen border">
    Content
   </div>
  </div>
  <div id="telefon">
   <div class="innen noborder">
     Telefon
   </div>
  </div>   

</div>
</body>
</html>
 
Werbung:
ja, ist normales Verhalten. Du hast aber recht, ohne knkreten Inhalt können wie nicht helfen. Das Layuóut ist mist.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben