Problem mit einem CSS Layout - Seite 2

RoToRa · #11 (**permalink**) 19.05.2005, 17:01

Ein kurzer Vorschlag: Die grünen Teile sollen doch nur Hintergrundbilder sein, oder? Dann brauichst Du keine absolut positioniere DIVs. Schmeiss; d1, d2, n1, d2 raus, tue jeweils ein zweiites DIV in dx und nx (z.B. dx2, nx2) und setze die HG-BIlder von d1 auf dx und von d2 auf dx2 und positioniere sie mit background-position. Für n analog.

inhakt und news dürfen näturlich dann nicht mehr absolut positioniert sein, sondern benutze einfach margin, dann passt sich alles Textlänge an.

Robin

mazzo · #12 (**permalink**) 19.05.2005, 17:05

OK. Code is nu ja da.
Mir ists heute zu spät noch was zu tun, aber warum ist in dem Bildbeispiel die Aufteilung 50-50 und der Code zeigt links eine viel breitere Box als rechts?

Schonmal in meine Sig geschaut wegen der Header und Footer Positionierung? Hilft Dir das?

mazzo · #13 (**permalink**) 20.05.2005, 13:39

falls es Dir hilft, hier ein noch mit heisser Nadel gestrickter und somit etwas unausgegorener, aber immerhin valider

, Code.
"Probleme":
- #dx und #nx sind in #data noch nicht horizontal zentriert, warum auch immer;
- die Höhe von #data und den "Hintergrundboxen" sind noch fix, ebenso wie die von Dir vorgegebene Breite,
- an den margins und paddings kann man noch ordentlich schrauben

Aber dafür ist es jetzt ohne absolute Positionierung und im Test unter Opera7.54/FF1.0.1/IE6 siehts etwa so aus wie in Deiner Beispielgrafik.

Die Aufgabenstellung finde ich aber interessant, leider hab ich keine zeit heute mehr daran zu werkeln.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head>
<title>Test</title>
</head>
<style type="text/css">
* {
   margin:         0;
   padding:      0;
}
body {
   text-align: center;
}
#container {
   margin: 0 auto;
   width:  900px;
   text-align: left;
}
#header, #footer {
   height: 170px;
   background-color:   #b9b9b9;
}
#footer{
	clear: left;
}
#data {
   background-color:   #008cbf;
   height: 400px;
   margin: 0 auto;
}
#dx, #nx {
   float: left;
   width: 42%;
   height: 70%;
   border: 1px solid #f00;
   margin: 10px 10px 10px 10px;
}
#dx2top, #nx2top{
	position: relative;
	left:0px; 
  top:10px;
  height: 100px;
	margin-bottom: 20px;
	background-color: #FFF;
	background-image: url(test1.jpg);
}
#dx2bottom, #nx2bottom{
	position: relative;
	left:0px; 
  top:50px;
	height: 100px;
	margin-top: 20px;
	background-color: #FFF;
	background-image: url(test2.jpg);
}
#inhalt, #news {
   position: relative;
   left:0px; 
   top:-200px;
   background-color: #be0030;
}
#inhalt {
	margin-left: 50px;
}
#news {
	margin-right: 50px;
}

</style>
<body>
<div id="container">
   <div id="header">Header</div>

   <div id="data">
      <div id="dx">
         <div id="dx2top">DX2 top</div>
         <div id="dx2bottom">DX2 bottom</div>
         <div id="inhalt">Inhalt
Inhalt
Inhalt
Inhalt
Inhalt
Inhalt
Inhalt
Inhalt
Inhalt
Inhalt
Inhalt
Inhalt
</div>
      </div>
      <div id="nx">
         <div id="nx2top">NX2 top</div>
         <div id="nx2bottom">NX2 bottom</div>
         <div id="news">News
News
News
News
News
News
News
News
News
News
News
News
</div>
      </div>
   </div>

   <div id="footer">Footer</div>
</div>
</body>
</html>

nARC · #14 (**permalink**) 20.05.2005, 14:56

@mazzo
Schöner Lösungsansatz, danke dafür. Jedoch funktioniert das Konstrukt unter FF 1.0.4 nicht. Der Data Layer wird nicht skaliert, sowie DX2 top und DX2bottom. Wenn Im Layer Inhalt content rein kommt, wird dieser zwar angezeigt, abereben im unskalierten bereich.

Ich habe hier ein Screenshot erstellt:

mazzo · #15 (**permalink**) 20.05.2005, 16:33

sowas hab ich befürchtet, das Wort "Lösungsansatz" sollte vor allem auf dem zweiten Wort betont werden...

Wenn es Dir gelingt, die #data relativ in der Höhe zu gestalten (was Du ursprünglich mti height: 100% meintest, also so hoch wie nötig, um zwischen header und footer alles auszufüllen) sollte das nicht mehr passieren. Die Ursache ist sicher, dass ich der Einfachheit halber für #data eine fixe Höhe eingegeben hab, wenn die von einem DIV innerhalb #data überschritten wird passiert was auf dem Screenshot zu sehen ist.

nARC · #16 (**permalink**) 20.05.2005, 16:38

Irgendwie ist das alles sehr depremierend. Ich habe früher immer mit Tabellen das Design definiert. Jaja ich weiß, eigentlich darf das nicht gemacht werden. Deshalb wollte ich nun bei meinem neuen Projekt alles mit CSS umsetzen. Doch leider haut das irgendwie nicht hin. Ich habe die alten Entwurfe jetzt verworfen, und habe gerade komplett alles neu aufgebaut. Aber auch jetzt funktioniert es nicht. Wenn ich nun in den roten Layer Conten übergebe, wird das Konstrukt nicht skaliert. Ich weiß langsam nicht mehr weiter. Hier der Code und der Layoutplan als Bild. Hoffe mir kann jemand helfen.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<style type="text/css" media="screen">
*                 { margin: 0; padding: 0;}
body            { height: 100%; text-align: center; background-color: #868369; }
div#container   { width: 857px; height: auto; text-align: left; margin: 0 auto;  border: 1px solid blue; }
#head         { height: 170px; background-color:   #b9b9b9; }
#ubgng       { height: 45px; background-color:   #b9b9a1; }
#data         { background-color: #008cbf; margin: 0 auto; }
#foot          { height: 68px; background-color:   #b9b9b9;}
#dx            { position: relative; width: 600px; float: left; height: auto; background-color: #FFD200; }
#nx            { position: relative; width: 257px; float: right; left: 0px; height: auto; background-color: #FFD200;  }
#d1             {  position: fixed; height: 185px; margin: 5px; background-color: #09BE00; }
#d2             {  position: fixed; height: 185px; margin: 5px; background-color: #09BE00; }
#n1             {  position: fixed; height: 185px; margin: 5px; margin-left: 0px; background-color: #09BE00; }
#n2             {  position: fixed; height: 185px; margin: 5px; margin-left: 0px; background-color: #09BE00;  }
#inhalt    { position: absolute; width: 525px; margin: 5px; top: 7%; left: 40px; background-color: #BE0031; white-space: wrap }
#news     { position: absolute; width: 200px; margin: 5px; top: 7%; left: 28px; background-color: #BE0031; }
</style>
</head>
<body>
	<div id="container">
		<div id="head">HEADER</div>
		<div id="ubgng">FADEÜBERGANG</div>
		<div id="dx">
			<div id="d1">D1</div>
			<div id="inhalt">INHALT</div>
			<div id="d2">D2</div>
		</div>
		<div id="nx">
			<div id="n1">N1</div>
			<div id="news">NEWS</div>
			<div id="n2">N2</div>
		</div>
		<div id="foot">FOOTER</div>
	</div>	
</body>
</html>

Boris · #17 (**permalink**) 20.05.2005, 16:55

Der IE kennt position: fixed; nicht einmal, das kannst Du vergessen.

nARC · #18 (**permalink**) 20.05.2005, 17:34

@Boris
Kostruktive Kritik, soetwas liebe ich ja.

Ist mir auch schon aufgefallen, im IE wird es halbwegs vernünftig angezeigt, im FF ist es zwerhackt. Irgenwie alles Kagge. Und skaliert wird es immer noch nicht.

Boris · #19 (**permalink**) 20.05.2005, 21:51

Das war keine Kritik, das war eine reine Feststellung eines IE-Problems als Information an Dich.

nARC · #20 (**permalink**) 21.05.2005, 04:29

@Boris, ist kein Problem. Nur habe ich so einen Hals auf mich das ich das net hinbekomme, obwohl ich schon Seitenweise CSS Stoff mir rein gezogen habe. Die ganzen popeligen standard Layout ist ja kein Problem. Kaum hat man eine anspruchsvollere Augabe, scheitert man an dieser, weil CSS etwas nicht kann oder ich selbst

Deshalb hoffe ich das mir hier ein Experte helfen kann. Will ja von dem Tabellenlayout weg kommen.

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
CSS layout problem	donky	CSS	5	05.06.2009 16:56
Problem mit CSS Layout	jojoho	CSS	9	20.07.2008 22:16
layout mit css - problem	xxlcss	CSS	1	30.12.2005 02:25
problem ausrichtung grafik und rand (css layout)	celine@23	Barrierefreiheit	1	28.12.2005 13:05
includes bei css layout	dan	CSS	2	10.03.2004 18:21