CSS Posietonierung von DIV blöcken

Abcd12345 · 7. Mai 2008

Hi,

Ich bin mal wieder dabei eine Seite aus Div Blöcken zu bauen. Diesmal besteht sie aus 7 Blöcken. Ich habe vorher immer mit floats gearbeitet, was jetzt leider nicht mehr funktoniert. Die Blöcke ordnen sich einfach nicht so untereinander an, wie ich es möchte. GIbt es nun evtl. eine möglichkeit das mit Potitonierungen zu lösen?

Tankred · 7. Mai 2008

Kommt drauf an wie Dein Code aussieht bzw. Dein Design. Normalerweise kannst Du jedes div-Element frei positionieren, wenn Du die "position" auf "absolute" setzt. Das kann allerdings schnell zu Instabilitäten des Designs führen, weshalb float bzw. das natürliche aneinanderreihen von div-Elementen zu bevorzugen ist.

Abcd12345 · 7. Mai 2008

Tankred schrieb:
Kommt drauf an wie Dein Code aussieht bzw. Dein Design. Normalerweise kannst Du jedes div-Element frei positionieren, wenn Du die "position" auf "absolute" setzt. Das kann allerdings schnell zu Instabilitäten des Designs führen, weshalb float bzw. das natürliche aneinanderreihen von div-Elementen zu bevorzugen ist.

Hi nochmal,

Würde das auch am liebsten mit floats machen.

Okey ich hab mal Screenshot von meiner Vorlage und dem Fehler gemacht und den Css/Html Code lade ich auch mal hoch.

Problem ist Block 4 "siehe Screens", der nicht in die Lücke will :-(

Vorlage:
http://www.bilder-hochladen.net/files/2821-m-jpg.html

Fehler:
http://www.bilder-hochladen.net/files/2821-n-jpg.html

HTML:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title>Niebüll Messe</title>
  <link rel="stylesheet" type="text/css" href="../css/design.css"/>
</head>
<body>
 <div id="wrap">
    <div id="header_left">
    header_left
    </div><!--header_left-->
    <div id="header_top">
    header_top
    </div><!--header_top-->
    <div id="header_middle">
    header_middle
    </div><!--header_middle-->
    <div id="header_right">
    header_right        
    </div><!--header_right-->
    <div id="side_left">
    side_left
    </div><!--side_left-->
    <div id="content">
    content        
    </div><!--content-->
    <div id="side_right">
    side_right        
    </div><!--side_right-->
 </div><!--wrap-->
</body>
</html>

CSS:

HTML:

* {
   margin: 0;
   padding: 0;
}
 

#wrap {
   width: 1680px;
   height: 1400px;
}

#header_left {
   float: left;
   width: 450px;
   height: 250px;
   background-color: #330033;
   border-top-width: 150px;
   border-top-style: solid;
   border-color:#e6e6e6;
}

#header_top {
   float: left;
   height: 150px;
   width: 780px;
   background-color: #fff776;
}

#header_middle {
   float: left;
   height: 250px;
   width: 760px;
   border-right-width: 10px;
   border-left-width: 10px;
   border-left-style: solid;
   border-right-style: solid;
   border-color:#ffffff;
   background-color: #ff00ff;
}

#header_right {
   float: left;
   width: 450px;
   height: 250px;
   background-color: #330033;
   border-top-width: 150px;
   border-top-style: solid;
   border-color:#e6e6e6;
}

#side_left {
}

#header_top {
}



#content {
}

#header_right {
}

#side_right {
}

NoSyMe · 7. Mai 2008

uiiii, gleich abbrechen. Typischer Anfängerfehler unter Codern. Du machst dein Design so breit das ich sogar mit meiner 1680x1050 Auflösung seitwärts scrollen muss.

Ein Layout macht man maximal 980 Pixel breit. So bist du optimal für die breiteste Masse an Internetusern und Browsern abgesichert.

Wenn du dein Layout auf max. 980 Pixel breite geändert hast darfst du dich nochmal melden ^^

Abcd12345 · 7. Mai 2008

Nein^^ Die eigentliche HP soll bei 2,3 und 6 sein. Der Aussenrand ist nur zur Verschönerung da damit es auf großen Monitoren eben nicht so klein angezeigt wird. Der Mittler teil wurde ja extra von mir gegen kleinen Monitoren auf 780 Pixel angepasst

Ich bräuchte aber auch noch eine Funktion damit die Seite immer Mittig geöffnet wird... So das mann den 2,3 und 6 Teil immer in der Mitte hat wenn man die Seite aufmacht und nicht erst zur Mitte scrollen muss.

krizzelfix · 7. Mai 2008

Kannst du das nicht leichter lösen, in dem du ein Kontainer machst, der ob ist und Roten Hintergrund hat.
Dann passt es auf jeder Auflösung und sollte ganz einfachs ein.

Grüße

krizzel

Tankred · 7. Mai 2008

Na "body" ist ja auch ein Container, den man formatieren kann. Ich würde so rangehen: auf html alle Abstände usw. auf 0 setzen, body als Container für die Gesamtseite verwenden und prozentuale Größenangaben verwenden, darin einen Content-Container mit div z.B. zentriert auf der Seite positionieren und darin die Boxen anordnen. Mit position relative kann man die div Boxen dann quasi stapeln und das Design ist solide.

Abcd12345 · 7. Mai 2008

Also die Seite soll so aussehen das der Mittlere Teil immer fokusiert wird und dann der Rest des Bildschirms soll durch den Rand ausgefüllt werden. Die Ränder sollen dann immer exakt so groß sein wie das Browserfenster noch an freiaum hat nach links und rechts und der Mittlereteil soll konsant bleiben.

Wie krieg ich sowas hin? Für die obere Beschreibung zu dem ergebnis?

Tankred · 7. Mai 2008

Ja prinzipiell schon. Wenn Du Schwierigkeiten mit dem Basislayout hast, dann schau Dir doch diese Beispiele hier mal an: http://css-discuss.incutio.com/?page=ThreeColumnLayouts

Suche

CSS Posietonierung von DIV blöcken

Abcd12345

Lt. Junior Grade

Tankred

Gast

Abcd12345

Lt. Junior Grade

NoSyMe

Lt. Commander

Abcd12345

Lt. Junior Grade

krizzelfix

Commander

Tankred

Gast

Abcd12345

Lt. Junior Grade

Tankred

Gast

Ähnliche Themen