Antworten zum Thema „Problem mit float-Layout“

Lakai · 29.04.2007

sees community!

ich bins mal wieder und brauch eure hilfe...

ist für die meisten von euch wahrscheinlich kein großes ding, aber ich komm einfach net weiter, bei folgender problemstellung.

will ein dreispaltiges div-layout machen, wobei die linke und die rechte spalte eigentlich nur ein hintergrundbild enthalten.

wenn ich das ganze mit prozentwerten machen würde, würde es funktionieren...

da meine mitlere spalte aber eine pixeldefinition benötigt, weil sonst die hintergrund-textur nicht mehr passt, hab ich das problem, welches euch bei einem besuch auf Schreinerei Leibinger offensichtlich wird...

also hier meine index file

Code:

<body>

<div id="left">
<p>test</p>
</div>

<div id="container">
<p>test</p>
</div>

<div id="right">
<p>test</p>
</div>

<div id="foot">
<p>test</p>
</div>

</body>

und hier das dazugehörige css file

Code:

* {
	margin: 0;
	padding: 0;
}
html {
	/*background: transparent url(images/textur.jpg) repeat;*/
	height: 100%;
}

body {
	font: normal 0.7em/1.4em Tahoma, Verdana, Arial, Georgia, sans-serif; 
	color: #7c7c7c;
	text-align: center;
	height: 100%;
	width: 100%;
}

#left {
	float: left;
	background-image: url(../images/rightback.jpg);
	background-repeat: repeat-y;
	background-position: top right;
	height: 100%;
}

#right {
	background-image: url(../images/leftback.jpg);
	background-repeat: repeat-y;
	background-position: top left;
	height: 100%;
}

#container {
	float: left;
	width: 900px;
	height: 100%;
	border: none;
	text-align: left;
	background-image: url(../images/mainback.jpg);
	background-repeat: no-repeat;
	background-position: center top;
}

#foot {
	width: 100%;
	height: 100px;
	border: none;
	text-align: left;
	background-color: #fff;
}

achja, den footer hab ich nur mal testweise eingefügt um zu gucken, was passiert wenn ich was mit width=100% unten dran häng!

vielen dank schon mal für alle antworten

knispel · 29.04.2007

AW: Problem mit float-Layout

hi, dein Problem mit den Spalten:

#right nach left floaten und #foot clearen

Was soll denn mit dem Footer noch passieren?

Lakai · 29.04.2007

AW: Problem mit float-Layout

ah ok, danke!

aber wie krieg ich die divs right und left jetzt dazu, dass sie den kompletten platz ausfüllen?

knispel · 29.04.2007

AW: Problem mit float-Layout

... ist schon mit dem Verlegemuster verflixt.
Habe mal einen anderen Vorschlag.
Ich würde das Parkett komplett in den Hintergrund nehmen und dann alles andere einfach zentrieren.
Was hältst du davon?

Lakai · 29.04.2007

AW: Problem mit float-Layout

das hab ich mir anfangs auch gedacht, aber dann krieg ich probleme mit dem internet explorer, der die pngs net richtig anzeigt... zwecks transparenzen im logo...

auch mit iepngfix...

muss doch irgendeine möglichkeit geben...

knispel · 29.04.2007

AW: Problem mit float-Layout

ja, das problem mit png, selbst im IE7 ...

Sorry, wenn ich wieder nicht direkt auf dein problem eingehe:
Nach dem jetzigen Stand werden für die HP insgesamt 244 kb geladen. Ist es nicht auch aus diesem Grunde ratsam, das mit der mainback.jpg noch mal zu überdenken? Wenn du dein Grafikkonzept vielleicht doch änderst, ist das bisherige div-Layout sowieso für die Katz.

Habe gerade noch eine Idee:
Trenn doch Logo vom Parkett und lege nur letzteres in den background.

Lakai · 29.04.2007

AW: Problem mit float-Layout

hm ja aber dann ist ja das ganze layout für die katz... hehe
aber du hast recht. es ist schon riesig das hintergrundbild...

naja lass mir das mal durch den kopf gehen...

danke schon mal für die anregungen!

knispel · 30.04.2007

AW: Problem mit float-Layout

Trotzdem möchte ich dir natürlich eine Variante zeigen, die so funktioniert, wie du es wolltest (bezügl. Browser müsstest du weiter anpassen, im IE7 und FF2 getestet):

HTML:

<style>
* {
    margin: 0;
    padding: 0;
}
body {
    font: normal 0.7em/1.4em Tahoma, Verdana, Arial, Georgia, sans-serif; 
    color: #7c7c7c;
    text-align: center;
    height: 100%;
    width: 100%;
}
#left, #right{
  position: absolute;
  top: 0;
  width: 50%;
  height: 900px;
  }
#left{
  background-image: url('leftback.jpg');
  left: 0;
  z-index: 1;
  }
#container{
  background-image: url('mainback.jpg');
  position: relative;
  top: 0;
  width: 900px;
  height:900px;
  margin: 0 auto;
  z-index: 3;
  }
#right{
  background-image: url('rightback.jpg');
  right: 0;
  z-index: 2;
  }
</style>
</head>
<body>
<div id="left">
</div>
<div id="container">
</div>
<div id="right">
</div>
<div id="foot">
Hier der Footer
</div>

Dennoch würde ich das mit dem großen Hintergrund an deiner Stelle so nicht machen.

Lakai · 30.04.2007

AW: Problem mit float-Layout

mensch klasse!

vielen dank!

jetzt muss ich mir nur noch was mit der textur überlegen... wie ich die evtl. kleiner bekomm...

bzw. eine ganz andere nehmen!

sollte halt irgendwas mit holz sein.

zwecks schreinerei und so ^_^!

aber vielen dank!