zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Reines CSS Layout macht Probs

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 08.11.2007, 16:25
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.11.2007
Beiträge: 2
BigBoss befindet sich auf einem aufstrebenden Ast
Standard Reines CSS Layout macht Probs

hi@all
ich versuche mich gerade nen bissel mit css.
Ich hab ein einfaches Seitenlayout was ich vorher mal mit Tabellen gemacht habe und wollte dies nun mal rein mit css machen.
zu Großen Teilen funktionierte dies auch bis auf ein paar kleinigkeiten.
+--+----------------+
|.1.|........2.............| 1&2=Banner
+--+----------------+ 3=Menue
|...|.......................| 4=Content
|...|.......................|
|.3|..........4............|
|...|.......................|
|...|.......................|
+--+----------------+

Hier die seite
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
		<title>test</title>
		<link rel="stylesheet" href="testff.css" type="text/css" />
	</head>
	<body>
			<div id="logo">
				logo
			</div>
			<div id="banner">
				banner
			</div>
			<div id="navigation">
				<br />
				<a class="menu" href="search.php" >Suchen</a>
				<a class="menu" href="search.php" >Suchen</a>
				<a class="menulast" href="search.php" >Suchen</a>
				<a>&nbsp;<!--  --></a><br />
				<a class="menu" href="search.php" >Suchen</a>
				<a class="menulast" href="search.php" >Suchen</a>
				<a>&nbsp;</a><br />
				<a class="menuonly" href="search.php" >Suchen</a>
			</div>
			<div id="body">
				body
			</div>
	</body>
</html>
hier das css file
Code:
body
{
	background-color:		#000000;
	margin-top:				5px;
	margin-left:			5px;
	margin-right:			5px;
	margin-bottom:			5px;
	padding-top:			0px;
	padding-left:			0px;
	padding-right:			0px;
	padding-bottom:			0px;
}
#logo
{
	float:					left;
	border: 				1px solid #66FF00;	
	width:					150px;
	height: 				75px;
	background-color: 		#000000;
	color:					#FFFFFF;
	padding-top:			0px;
	padding-left:			0px;
	padding-right:			0px;
	padding-bottom:			0px;
	margin-top:				0px;
	margin-left:			0px;
	margin-right:			0px;
	margin-bottom:			0px;
	border-top:				1px solid #66FF00;
	border-left:			1px solid #66FF00;
	border-right:			1px solid #66FF00;
	border-bottom:			1px solid #66FF00;
	
}
#banner
{
	border: 				1px solid #66FF00;	
	height: 				75px;
	background-color: 		#000000;
	color:					#FFFFFF;
	margin-top:				0px;
	margin-left:			0px;
	margin-right:			0px;
	margin-bottom:			0px;
	border-left:			0px solid #66FF00;
	border-right:			1px solid #66FF00;
	border-top:				1px solid #66FF00;
}
#body
{
	position: 				relative;
	text-align:				left;
 	margin-top:				0px;
	margin-right:			0px;
	margin-bottom:			0px;
	color:					#FFFFFF;
	border-bottom:			1px solid #66FF00;
	border-right:			1px solid #66FF00;
	border-left:			1px solid #66FF00;
	border-top:				0px solid #66FF00;
	height:					100%;
	width:					100%;
}
#navigation
{
	position: 				relative;
	float:					left;
 	width: 					150px;
 	height:					100%;
	border: 				1px solid #66FF00;
	background-color: 		#000000;
	color:					#66FF00;
	border-top:				0px solid #66FF00;
	border-left:			1px solid #66FF00;
	border-bottom:			0px solid #66FF00;
}
#right
{
	position: 				static;
	float:					right;
 	width: 					1px;
 	border:					0px solid #66FF00;
	margin:					0px;
	padding:				0px;
	height:					100%;
}
#foot 
{
	position:				static;
	clear:					both;
	border-top:				0px solid #66FF00;
}
a.menu
{
	display:				block; 
	background-color: 		#000000;
	float:					left; 
	width:					140px; 
	height:					16px;
	text-decoration:		none;
	text-align: 			left;
	font-size: 				11px; 
	font-family:	 		Arial, sans-serif;
	color: 					#66FF00;
	border-color:			#66FF00;
	border-top:				1px solid;
	border-left:			0px solid;
	border-right:			0px solid;
	border-bottom:			0px solid;
	margin-top:				0px;
	margin-left:			0px;
	margin-right:			0px;
	margin-bottom:			0px;
	padding-top:			3px;
	padding-left:			10px;
	padding-right:			0px; 
	padding-bottom:			3px;
	cursor:					pointer;
}
a.menu:hover
{
	background-color: 	#66FF00;
	color: 				#000000;
}
a.menulast
{
	display:				block; 
	background-color: 		#000000;
	float:					left; 
	width:					140px; 
	height:					16px;
	text-decoration:		none;
	text-align: 			left;
	font-size: 				11px; 
	font-family:	 		Arial, sans-serif;
	color: 					#66FF00;
	border-color:			#66FF00;
	border-top:				1px solid;
	border-left:			0px solid;
	border-right:			0px solid;
	border-bottom:			1px solid;
	margin-top:				0px;
	margin-left:			0px;
	margin-right:			0px;
	margin-bottom:			0px;
	padding-top:			3px;
	padding-left:			10px;
	padding-right:			0px; 
	padding-bottom:			3px;
	cursor:					pointer;
}
a.menulast:hover
{
	background-color: 		#66FF00;
	color: 					#000000;
}
a.menuonly
{
	display:				block; 
	background-color: 		#000000;
	float:					left; 
	width:					140px; 
	height:					16px;
	text-decoration:		none;
	text-align: 			left;
	font-size: 				11px; 
	font-family:	 		Arial, sans-serif;
	color: 					#66FF00;
	border-color:			#66FF00;
	border-top:				1px solid;
	border-left:			0px solid;
	border-right:			0px solid;
	border-bottom:			1px solid;
	margin-top:				0px;
	margin-left:			0px;
	margin-right:			0px;
	margin-bottom:			0px;
	padding-top:			3px;
	padding-left:			10px;
	padding-right:			0px; 
	padding-bottom:			3px;
	cursor:					pointer;
}
a.menuonly:hover
{
	background-color: 		#66FF00;
	color: 					#000000;
}

.nav
{
	background-color: 		red;
}
Mein erstes Problem ist das der content bereich bei height=100% über den bildschirm hinaus geht obwohl kein inhalt da ist.
das zweite Problem ist das im IE die anordnung mit float einen zwischenraum zwischen den div´s verursacht. Der Firefox zeigt es aber richtig an. Kann man das irgendwie verhinder?
gruß & thx BB

Geändert von BigBoss (09.11.2007 um 13:04 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 09.11.2007, 00:09
Benutzerbild von Crizzo
der mit dem Editor kämpft
XHTMLforum-Kenner
 
Registriert seit: 17.10.2006
Ort: Ost-Hessen
Beiträge: 4.828
Crizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer Mensch
Standard

Also erst einmal hast du Probleme mit dem Boxmodell. Denn 100% + 2px sind mehr als 100%. Lies dazu hier: Cascading Style Sheets { Grundlegendes : Box-Modell }

Dann machst du noch Fehler mit "float". Sowas wie "float:middle" gibt es nicht. Lies dazu FAQ Punkt 2: http://xhtmlforum.de/40267-faq-haeuf...d-haeufig.html und hier: Cascading Style Sheets { Vollreferenz zu CSS 1 und CSS 2.1 : FLOAT }

Dann solltest du dringend einen Doctype verwenden. Aktuell wäre wohl XHTML 1.0 Strict angebracht. Zusätzlich fehlt dir eine "content-type".

Deine Seite hat sechs Fehler im HTML-Code und weitere fünf im CSS-Code. Teste deine Seite hier mit: The W3C Markup Validation Service und dein CSS damit: The W3C CSS Validation Service
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen!
Foren-FAQ
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 09.11.2007, 13:03
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.11.2007
Beiträge: 2
BigBoss befindet sich auf einem aufstrebenden Ast
Standard

so ich habe jetzt die dateien bereinigt und validieren lassen
(Quelltext is oben getauscht)
jetzt stellt sich mir aber immer noch die frage wie ich die div´s dazubekomme das sie die 100% des browserfensters einnimmt?
Gruß & thx BB
Mit Zitat antworten
  #4 (permalink)  
Alt 09.11.2007, 18:50
Benutzerbild von Crizzo
der mit dem Editor kämpft
XHTMLforum-Kenner
 
Registriert seit: 17.10.2006
Ort: Ost-Hessen
Beiträge: 4.828
Crizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer Mensch
Standard

Das steht auch in den FAQs.
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen!
Foren-FAQ
Mit Zitat antworten
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 3 Seiten Layout will net so :) nova_rs CSS 1 30.03.2010 16:54
Joomla und CSS Layout ohne Tabellen ... MoYo CSS 2 15.02.2007 11:19
CSS Layout - ist das so möglich? berlina CSS 18 12.02.2007 22:55
Layout: Tabelle -> CSS | ohne Schönheitsfehler? Knickedi CSS 20 05.08.2006 03:18
CSS Layout mit abgerundeten Ecken dimension CSS 3 17.04.2005 19:05


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