zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Problem mit einem CSS Layout

Antwort
 
LinkBack Themen-Optionen Ansicht
  #11 (permalink)  
Alt 19.05.2005, 17:01
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.03.2004
Beiträge: 1.843
RoToRa wird schon bald berühmt werden
Standard

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
Mit Zitat antworten
Sponsored Links
  #12 (permalink)  
Alt 19.05.2005, 17:05
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.01.2005
Ort: Berlin
Beiträge: 2.152
mazzo wird schon bald berühmt werden
Standard

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?
Mit Zitat antworten
Sponsored Links
  #13 (permalink)  
Alt 20.05.2005, 13:39
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.01.2005
Ort: Berlin
Beiträge: 2.152
mazzo wird schon bald berühmt werden
Standard

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>
Mit Zitat antworten
  #14 (permalink)  
Alt 20.05.2005, 14:56
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.05.2005
Beiträge: 12
nARC befindet sich auf einem aufstrebenden Ast
Standard

@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:

Mit Zitat antworten
  #15 (permalink)  
Alt 20.05.2005, 16:33
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.01.2005
Ort: Berlin
Beiträge: 2.152
mazzo wird schon bald berühmt werden
Standard

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.
Mit Zitat antworten
  #16 (permalink)  
Alt 20.05.2005, 16:38
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.05.2005
Beiträge: 12
nARC befindet sich auf einem aufstrebenden Ast
Standard

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>
Mit Zitat antworten
  #17 (permalink)  
Alt 20.05.2005, 16:55
Benutzerbild von Boris
Tanzender Webentwickler
XHTMLforum-Kenner
 
Registriert seit: 29.07.2004
Ort: Kornwestheim / Stuttgart
Beiträge: 4.930
Boris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer Mensch
Standard

Der IE kennt position: fixed; nicht einmal, das kannst Du vergessen.
__________________
My software never has bugs. It just develops random features ...

» DevShack - die Website des freien Webentwicklers Boris Bojic
Mit Zitat antworten
  #18 (permalink)  
Alt 20.05.2005, 17:34
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.05.2005
Beiträge: 12
nARC befindet sich auf einem aufstrebenden Ast
Standard

@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.

Mit Zitat antworten
  #19 (permalink)  
Alt 20.05.2005, 21:51
Benutzerbild von Boris
Tanzender Webentwickler
XHTMLforum-Kenner
 
Registriert seit: 29.07.2004
Ort: Kornwestheim / Stuttgart
Beiträge: 4.930
Boris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer Mensch
Standard

Das war keine Kritik, das war eine reine Feststellung eines IE-Problems als Information an Dich.
__________________
My software never has bugs. It just develops random features ...

» DevShack - die Website des freien Webentwicklers Boris Bojic
Mit Zitat antworten
Sponsored Links
  #20 (permalink)  
Alt 21.05.2005, 04:29
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.05.2005
Beiträge: 12
nARC befindet sich auf einem aufstrebenden Ast
Standard

@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.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 18:10 Uhr.