div-container / boxen / layer ...

[torsten]

hallo,

hier erst mal mein code:

layer.css:

.top  { position:absolute; width:900px; height:50px;  border:1px solid black }
.left { position:absolute; width:50px; height:700px; margin-top:50px;  border:1px solid black }
.inline { position:absolute; width:780px; height:680px; margin-top:60px; margin-left:60px; border:1px solid black;  }
.right { position:absolute; width:50px;  height:700px; margin-top:50px; margin-left:850px; border:1px solid black }
.bottom { position:absolute; width:900px; height:50px; margin-top:750px; border:1px solid black }

index.htm:

<div class="top"></div>
<div class="left"></div>
<div class="inline"></div>
<div class="right"></div>
<div class="bottom"></div>

so nun mein problem:
ich muss es irgendwie schaffen die boxen ohne position:absolute zu realisieren. weil ich ansonsten später probleme bekomme. hab es mit float:left und float:right probiert, funktioniert wunderbar wenn ich 2 boxen nebeneinander haben will, aber hier sind es 3 boxen die nebeneinander sein sollen. gibt es eine möglichkeit auf position:absolute zu verzichten?

hier zu veranschaulichung: http://www.torsten-homepage.de/test/

gruß
torsten

[Ingo Turski]

Hi,

ich muss es irgendwie schaffen die boxen ohne position:absolute zu realisieren. weil ich ansonsten später probleme bekomme.

sehr gute Entscheidung. Wobei Du ja eigentlich bisher gar keine Positionierung vorgenommen hast.
Setze für die Elemente, die nebeneinander stehen sollen, float und eine passende Breite. Bei drei Elementen kannst Du eines auch ohne float nur über margin ausrichten, wobei dieses dann im Quelltext als letztes einzutragen ist.

freundliche Grüße
Ingo

[torsten]

hi ingo,

hab mir dein rat zu herzen bekommen, funkrioniert auch soweit. leider aber nur im NS nicht im IE

.top  { width:900px; height:50px;  border:1px solid black }
 .left { width:50px; height:700px;   border:1px solid black; float:left }
 .inline { width:780px; height:680px;  border:1px solid black; margin-right:60px; float:right }
 .right { width:50px;  height:700px; border:1px solid black; margin-left:850px }

gibt auch ne möglichkeit das im IE zu realisieren?

[Ingo Turski]

Hi,

ich würde hier die rechte Box rechts floaten lassen und die mittlere nicht. für diese (und nur für diese) würde ich margin-left und margin-right angeben.

freundliche Grüße
Ingo

[torsten]

Hi,

hmm, irgendwie bekomm ich das nich hin, hab es zwar so gemacht wie du vorgeschlagen hast, aber das letzte und dritte element rutscht nach unten.

.top  { width:900px; height:50px;  border:1px solid black }
 .left { width:50px; height:700px;   border:1px solid black; float:left }
 .inline { width:780px; height:680px;  border:1px solid black; margin-left:60px }
 .right { width:50px; height:700px; border:1px solid black; float:right }

gruß

[Hans-Peter]

hallo Torsten,

.left { float:left }
.inline { float:left }
.right { }

so?

HP

[torsten]

hi

.left { float:left }
.inline { float:left }
.right { }

so?

ne so leider auch nich, habs wie ingo beschrieben hat jetzt doch hinbekommen. nur im IE wirkt sich das etwas anders aus, dass is auf gut deutsch gesagt scheisse. werd wohl mit javascript ne brwoserweiche machen un den support für den IE abschalten...

gruß

[Hans-Peter]

als tip vielleicht noch:

manchmal hilft es, wenn du float:left und clear:left hintereinander schreibst. ist zwar nicht ganz logisch, löst aber manchmal das problem.

HP

[Thomas Luethi]

Hallo,

werd wohl mit javascript ne brwoserweiche machen un den support für den IE abschalten...

Find ich nicht gerade optimal...
Guck doch mal noch bei den ueblichen Freak-Seiten und Tutorials,
wie die denn ihre 3-Spalten-Layouts machen.
http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html
http://www.pixy.cz/blogg/clanky/css-3col-layout/
http://www.csstips.com/layouts/3-column.asp
u.s.w.
http://www.google.ch/search?q=3-column+layout+css&sourceid
http://aktuell.de.selfhtml.org/links/css.htm

Gruesse,

Thomas

P.S. Weiss einer, was mit http://glish.com/css/ los ist?

[Ingo Turski]

Hi,

Du hast aber vermutlich überlesen, daß Du die Reihenfolge der Elemente im HTML anpassen mußt.
Ich vermute mal, Du willst etwas in dieser Art erreichen:

CSS:
#seite { width:900px; }
#top  { height:50px; border:1px solid black }
#left { width:50px; height:700px; border:1px solid black; float:left }
#inline { height:680px; border:1px solid black; margin:10px 60px }
#right { width:50px; height:700px; border:1px solid black; float:right }

HTML:
<div id="seite">
  <div id="top"></div>
  <div id="left"></div>
  <div id="right"></div>
  <div id="inline"></div>
  <div id="bottom"></div>
</div>

freundliche Grüße
Ingo