zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Layout Probleme

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 30.07.2006, 23:17
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.07.2006
Beiträge: 9
SchwarzerMagier befindet sich auf einem aufstrebenden Ast
Ausrufezeichen Layout Probleme

Hallo ihr,
ich habe eien Problem! Ich habe nen Layout was mit Tabellen ohne große Probleme realisierbar ist. Nun würd ich gerne das selbe in ein css layout umsetzten und stoße da auf große probleme. Weil es nicht so will wie ich will.
Könntet ihr mir helfen? Ich habe eine Grafik eingefügt in welcher ihr mein Layout seht und wie ich mir das vorgestellt habe. Ich bin jedes mal daran gescheittert bitte helft mir (genaue angaben auf dem bild. Der schwarze rand stellt das browser fenster da.):


Bitte helft.

Danke schön

Grüße SchwarzerMagier
Angehängte Grafiken
Dateityp: jpg problem.jpg (15,8 KB, 7x aufgerufen)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 30.07.2006, 23:31
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Container mit 100% (Minimal-)Höhe, faux columns für body und den Container. Im Container 4 divs (nicht verschachtelt): Header (kann auch h1 statt div sein), dann linke Spalte (links floaten), dann rechte Spalte (rechts floaten), dann der Content (nicht floaten, nur margin-left & right entsprechend der Breiten der beiden äußeren divs). Außerdem korrekt clearen (z.B. "Easy Clearing" auf den Content anwenden) sowie "FooterStickAlt" einsetzen.

Alle "technischen Details" für die Umsetzung dieses Prinzips findest Du im FAQ-Beitrag von mazzo (natürlich unter verschiedenen Punkten). Außerdem gibt's dort unter Punkt 3 noch andere Beispiele für Dein Vorhaben.

Geändert von heiko_rs (30.07.2006 um 23:43 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 30.07.2006, 23:40
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.07.2006
Beiträge: 9
SchwarzerMagier befindet sich auf einem aufstrebenden Ast
Standard Danke

Danke ich werde es mal ausprobieren
Mit Zitat antworten
  #4 (permalink)  
Alt 31.07.2006, 13:59
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.07.2006
Beiträge: 9
SchwarzerMagier befindet sich auf einem aufstrebenden Ast
Ausrufezeichen Problem

Hallo nochmal,
ich habe nun was gefunden was so auch funktioniert wie ich es möchte jetzt gibt es doch noch ein Problem der Text in #left wird im Internet Explorer angezeigt so wie es sich gehört und im Firefox sieht man vom text nicht.

Meine CSS:
Code:
/* CSS Document */
body {
  min-width: 550px; background-color:#e6e6e6;     /* 2x LC width + RC width */
}
#header {height:188px; background-image:url(../image/header.jpg); }
#container {
  padding-left: 150px;   /* LC width */
  padding-right: 150px;  /* RC width */ 
}
#container .column {
  position: relative;
  float: left;
}
#center {
  width:100%; background-color:#FFFFFF;
}
#left {
  width: 150px;          /* LC width */
  right: 200px;          /* LC width */
  margin-left: -100%; background-color:#e6e6e6; 
}
#right {
  width: 150px;          /* RC width */
  margin-right: -150px; background-color:#e6e6e6  /* RC width */
}
#footer {
  clear: both; background-image:url(../image/footer.gif); height:30px;
}
/*** IE6 Fix ***/
* html #left {
  left: 170px;           /* RC width */
}
.rmenu { color:#FFFFFF;}
Weiß jemand wo ran das liegt?


Grüße SchwarzerMagier
Mit Zitat antworten
  #5 (permalink)  
Alt 31.07.2006, 14:49
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Mir fällt so erstmal auf, daß Du #left zu weit nach links schiebst (der Wert von "right" muß der Breite von #left entsprechen, und im IE verschiebst Du übrigens auch falsch), aber das dürfte noch nicht der Grund sein. Kannst Du mal das Markup dazu posten und/oder einen Link?
Mit Zitat antworten
  #6 (permalink)  
Alt 31.07.2006, 17:58
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.07.2006
Beiträge: 9
SchwarzerMagier befindet sich auf einem aufstrebenden Ast
Pfeil Link

Also ich habe es mal unter http://www.derkleinewebmaster.de/css/index.html hochgeladen....

Grüße SchwarzerMagier
Mit Zitat antworten
  #7 (permalink)  
Alt 31.07.2006, 18:41
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Sieht erstmal okay aus, kann man aber erst richtig sagen, wenn Du mal probeweise Fülltext hineinschreibst, damit man das Verhalten bei verschiedenen Spaltenhöhen überprüfen kann (alternativ testweise Höhen zuweisen).

Und falls die Headergrafik nicht eh nur ein Provisorium ist, unbedingt überarbeiten, denn einige Bilder fallen total raus. Du solltest die Bilder unbedingt bzgl. Kontrast, Helligkeit, Schärfe und Farbintensität etc. so einheitlich wie möglich hinbekommen.

Geändert von heiko_rs (31.07.2006 um 18:43 Uhr)
Mit Zitat antworten
  #8 (permalink)  
Alt 31.07.2006, 18:52
Neuer Benutzer
neuer user
 
Registriert seit: 30.07.2006
Beiträge: 12
superbursche befindet sich auf einem aufstrebenden Ast
Standard

Hi, hier haste mal eines meiner eigenen Vorlagen:
Code:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>layout</title>
	<style type="text/css">
			* {
				padding: 0px;
				margin: 0px;
			}
			.cleaner {
				clear: both;
			}
			/*	HIER IST DAS HINTERGRUNDBILD FÜR DIE LINKE SPALTE DEFINIERT */
			#container {
				margin: 0px auto;
				width: 100%;
				height: 100%;
				background-image: url(left.gif);
				background-position: left;
				background-repeat:repeat-y;
			}
			#container[id] {
				height: auto;
				min-height: 100%;
				margin: 0px auto;
			}
			html {
				height: 100%;
			}
			#container {
				min-height: 100%;
				position: relative;
				margin: 0px auto;
			}
			#header {
				position: relative;
				height: 188px;
				background-color: #000;
			}
			#left {
				position: relative;
				width: 150px;
				float: left;
			}
			#center {
				position: relative;
				float:left;
				background-color: #fff;
			}
			#right {
				position: relative;
				width: 180px;
				float: right;
			}
			#footer {
				position: absolute;
				bottom: 0px;
				height: 30px;
				background-color: #000000;
				width: 100%;
			}
			/*	HIER IST DAS HINTERGRUNDBILD FÜR DIE RECHTE SPALTE DEFINIERT */
			body {
				width: auto;
				height: 100%;
				background-color: #fff;
				background-image: url(right.gif);
				background-position: right;
				background-repeat:repeat-y;
			}
		</style>
</head>
	<body>
		<div id="container">
			<div id="header">
				&nbsp;
			</div>
			<div id="left">
				&nbsp;
			</div>
			<div id="center">
				&nbsp;x
			</div>
			<div id="right">
				&nbsp;
			</div>

			<div id="footer" class="cleaner">
				&nbsp;
			</div>
		</div>
	</body>
</html>
Damit Hintergrundfarbe der linken und der rechten Spalte auch bis ganz untern durchgehen brauchst du diese beiden Bilder:


left.gif: http://img352.imageshack.us/img352/7152/leftub7.gif
right.gif: http://img352.imageshack.us/img352/7237/rightxb8.gif

Einfach als left.gif und right.gif in dein Rootverzeichnis speichern.

Viel Spass damit, SB
Mit Zitat antworten
  #9 (permalink)  
Alt 31.07.2006, 19:19
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Stimmt, ich hatte mir die CSS noch gar nicht angesehen; Du mußt natürlich noch dafür sorgen, daß die Farben bis unten "durchgehen". Falls #center immer höher ist als #left und #right, brauchst Du keine faux columns, andernfalls binde die Grafiken ein wie im Vorposting beschrieben (aber bitte background zusammenfassen!). Dafür muß #container allerdings noch die 3 Floats einschließen (siehe FAQ).

Geändert von heiko_rs (31.07.2006 um 19:26 Uhr)
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 31.07.2006, 19:44
Neuer Benutzer
neuer user
 
Registriert seit: 30.07.2006
Beiträge: 12
superbursche befindet sich auf einem aufstrebenden Ast
Standard

Hallo heiko_rs,
Zitat:
Dafür muß #container allerdings noch die 3 Floats einschließen.
Wie meinst du das?, die DIV's mit den Floats sind doch innerhalb des #containers. Das Problem mit den Backgroundimages ist, dass die Breite des #containers ja abhängig vom Browserfenster ist und man somit kein Statisch-breites Bild als Hintergrund für #left und #right auf dem Body einrichten kann.

Gruß, SB
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
Layout Probleme!!! Silverhawk1988 CSS 15 21.12.2008 16:12
paar Probleme mit dem CSS Layout SimonK. CSS 6 05.10.2008 15:57
Probleme mit Layout kruemelchen26 CSS 0 15.05.2007 23:40
Positionierung und Layout Probleme dabidu CSS 9 22.10.2006 10:57
Probleme mit Mehrspaltigem Layout RalfEggert CSS 0 27.09.2004 17:39


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:57 Uhr.