zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Layout - footer und layer[links] - Probleme - (CSS-Anfänger)

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 07.10.2005, 21:44
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.10.2005
Beiträge: 1
Basti_LRT befindet sich auf einem aufstrebenden Ast
Standard Layout - footer und layer[links] - Probleme - (CSS-Anfänger)

Hallo Leute,

ich möchte unsere Projektseite von frames auf div umstellen, habe aber nur wenig Erfahrung mit CSS. Der Aufbau der Seite sollte so bestehen bleiben, wie er zur Zeit ist. Mein Problem ist, dass jeder Browser sein Ding macht (IE u. FF klappen teilweise).

Vielleicht leigt es auch einfach am Stylesheet .

Code:
/* Farbe, etc. für Links */


		#footer a:link, #content a:link, #li_layer a:link,
		#footer a:visited, #content a:visited, #li_layer a:visited
		{
		text-decoration:none;
		color:#999900;	
		}

		#footer a:hover, #content a:hover, #li_layer a:hover
		{
		text-decoration:underline;
		color:#999900;
		}



		/* jetzt geht es los mit dem Layout */

		body
		{ 
			position:absolute;
			border:0;top:0; left:0; right:0;
			background:#CCCCCC; 

		background-attachment: fixed;
		background-image: url(images/warr.jpg);
		background-repeat: no-repeat;
		background-position: right center;
		}

		html, body
		{ 
			top:0; left:0; right:0;
			min-height:100%;
			margin:0;
			padding:0;
			width:100%;

		}



		#li_layer
		{
			position:fixed;
			top:0;
			left:0;
			border:0;
			width:200;			
			height:100%;
			background:black;
	
		}
		#content
		{	position:absolute;
			padding-top:20px;
			padding-left:220px;
			padding-right:20px;
			padding-bottom:70px;
			margin:0;
			

		}


		#footer_container
		{
			position:fixed;
			bottom:0; left:200; right:0;
			margin:0;
			height:50;
		}

		#footer 
		{			
			position:absolute;
			top:0; left:0; right:0; bottom:0;

		}

		
		/* für den MSIE */


		* html, * html body 
		{
			overflow:hidden;
                        top:0; 
			height:100%;
		}


		* html #content 
		{position:absolute;

			overflow:auto;

		}

		* html #li_layer
		{
			position:absolute;
			top:-1;
		}

		* html #footer_container
		{
			position:absolute;

		}


		* html #footer
		{	
			position:static;
		}

		* html #content

		{     
			height:100%; 
			width:100%;
		}
Auf www.warr.de/news.htm (oder falls der Namensserver sich endlich geändert hat die neue php Version www.warr.de/news.php)
Es sollte also einen Layer auf der linken Seite geben und einen footer.
Und alsob das nicht genug wäre, sollte das auch noch in jedem Browser gleich aussehen.

Falls ihr noch andere Vorschläge habt seid bitte bescheid!!
(bei der php version ist ein Gästebuch, Fotoalbum und ein kontakformular integriert [alles selbst in php gemacht ])
Thx Basti

Probleme:
FF keine
IE v6 Scrollbar zu "lang" versteckt sich also unter dem footer)
Opera (zeigt den footer gar nicht erst, das Bild im linken layer rutscht nach oben, macht es aber jetzt schon )

mit mehr browsern habe ich das noch nicht auf dem localhost noch nicht getestet.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 08.10.2007, 23:03
Neuer Benutzer
neuer user
 
Registriert seit: 08.10.2007
Beiträge: 1
Duke79 befindet sich auf einem aufstrebenden Ast
Standard das liebe leid der kompatibilität

Hallo Basti,

Du bist nicht allein auf der Welt Milliarden Stunden wurden schon mit dem lieben Thema Browserkompatibilität verbracht und Menschen fluchten was das Zeug hielt, egal....

Ein paar Regeln:
1.) Safari kannst du vergessen! und
2.) Der IE tut sich schwer mit dem Boxmodell. Stellst du zB zwei divs, oder lis, oder sowas untereinander, kamen die klugen leute von MS darauf, die per CSS eingestellten Abstände zu addieren und dann durch zwei zu teilen, oder sowas in der Richtung. Traurig, aber wahr.
Abhilfe kannst Du Dur damit schaffen in dem Du Dich eines kleinen Hacks im CSS bedienst. Da IE das Ableitungszeichen ">" nicht kennt, kannst Du Deine verwendeten Klassen einmal ganz normal für die IEs schreiben und daran hängst Du eine Zeile mit jew. HTML-tag und der Klasse mit Ableitungszeichen für die klugen Browser. Also so:

Code:
<style>
  #header {margin-bottom:20px}         /*für IE*/
  div > #header {margin-bottom:10px} /*alle anderen*/
</style>

...

<body>
<!-- das ganze geht mit allen tags, oder auch mit verschachtelten klassen -->
<div id="header">
  ...
</div>
Es gibt auch Leute die noch viel mehr Hacks verwenden. Bei einer korrekten HTML-Schreibweise (->firefox->addons->valiadator installieren!!!) reicht dieser hack aber völlig aus
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 Anfänger - Probleme mit Positionierung mchai CSS 5 22.01.2013 22:47
Footer Problem (3 spaltiges Layout, variable Höhe) Lofesto CSS 2 23.07.2007 17:13
3 Zeilen Layout CSS macht Probleme SimonT CSS 2 15.12.2006 15:08
CSS Layout Probleme ViktorR CSS 6 03.12.2006 16:15
Probleme mit CSS Layout Anthems CSS 1 20.12.2005 16:16


Alle Zeitangaben in WEZ +2. Es ist jetzt 04:16 Uhr.