Weiß ist in Firefox grau, aber in IE weiß

Yamram · 8. Juni 2010

Hallo,
für meine Homepage habe ich CSS aber weiß ist in Firefox grau. wie kann ich das ändern?

Sören · 8. Juni 2010

Ich hab auch Firefox und bei mir ist weiß auch weiß.

Was hast du denn für einen Farbcode dafür benutzt?

NeoAramis · 8. Juni 2010

#999, #eee, #ddd etc. = grau
#fff = weiss

:wink:

Sarkkan · 8. Juni 2010

...also Hexadezimalcodes verwendet er in seiner Styledatei...

Öhm.. kann es sein, dass du das nicht für 'page' und 'content' definiert hast?
Versuch das einfach mal^^
Oder ich hab es übersehen.. =/

lauras · 8. Juni 2010

Abgesehen davon, dass wir dieses Thema schonmal hatten...

Yamram · 9. Juni 2010

hier das ist der css-farb-code:

Code

background-color:#ffffff

NeoAramis · 9. Juni 2010

Zitat von "philipp e."
hier das ist der css-farb-code:
Code
background-color:#ffffff

Code

background-color: #ffffff;

Yamram · 9. Juni 2010

ich hab das ; nicht mit kopiert

Yamram · 9. Juni 2010

es liegt glaube ich irgendwo anders dran
vielleicht habe ich ein div nicht geschlossen
also ich finde nichts:
Seite

PHP

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Computer Clan</title>
<link rel="stylesheet" href="styles.css" type="text/css" />
<link rel="shortcut icon" href="images/favicon.ico" type="image/vnd.microsoft.icon">
</head>
<body onload="window.setTimeout('ZeitAnzeigen()', 1000)" vlink="blue" link="blue" alink="blue">
<center>
<div id="container">
	<div id="header">
		<h1>Computer Clan</h1>
		<p>computers have feelings</p>
	</div>
	<div id="nav">
		<ul>
			<li><a href="home.php" title="Home">Home</a></li>
			<li><a href="login.php" title="Login">Login</a></li>
			<li><a href="gaestebuch.php" title="Gästebuch">Gästebuch</a></li>
			<li><a href="forum.php" title="Forum">Forum</a></li>
			<li><a href="downloads.php" title="Downloads">Downloads</a></li>
			<li><a href="info.php" title="Info">Info</a></li>
			<li><a title="Sonstiges">Sonstiges</a></li>
		</ul>
	</div>
	</center>
	<div id="content">
		<div id="page">
.............................
</div>
</div>
		<div id="sidebar">
		    <h4>Uhrzeit und Datum</h4>
		    <script type="text/javascript" src="dhtml.js"></script>
<script type="text/javascript">
function ZeitAnzeigen () {
  var Wochentagname = new Array("Sonntag", "Montag", "Dienstag", "Mittwoch",
                                "Donnerstag", "Freitag", "Samstag");
  var Jetzt = new Date();
  var Tag = Jetzt.getDate();
  var Monat = Jetzt.getMonth() + 1;
  var Jahr = Jetzt.getYear();
  if (Jahr < 999)
    Jahr += 1900;
  var Stunden = Jetzt.getHours();
  var Minuten = Jetzt.getMinutes();
  var Sekunden = Jetzt.getSeconds();
  var WoTag = Jetzt.getDay();
  var Vortag = (Tag < 10) ? "0" : "";
  var Vormon = (Monat < 10) ? ".0" : ".";
  var Vorstd = (Stunden < 10) ? "0" : "";
  var Vormin = (Minuten < 10) ? ":0" : ":";
  var Vorsek = (Sekunden < 10) ? ":0" : ":";
  var Datum = Vortag + Tag + Vormon + Monat + "." + Jahr;
  var Uhrzeit = Vorstd + Stunden + Vormin + Minuten + Vorsek + Sekunden;
  var Gesamt = Wochentagname[WoTag] + ", " + Datum + ", " + Uhrzeit;




  if (DHTML) {
    if (NS4) {
      setContent("id", "Uhr", null, '<span class="Uhr">' + Gesamt + "<\/span>");
    } else {
      setContent("id", "Uhr", null, Gesamt);
    }
    window.setTimeout("ZeitAnzeigen()", 1000);
  }
}




</script>
<p><div id="Uhr" class="Uhr">&nbsp;</div></p>
			<h4>Login</h4>
			<form method="post" action="login.php">
			<p><table border="0"><tr>
			    <td>Username</td>
				<td><input type="text" name="name"></td></tr><tr>
				<td>Passwort</td>
				<td><input type="password" name="passwort"></td></tr><tr>
				<td><input class="sender" type="submit" value="login"></td></tr></table></p>
			</form>
			<h4>Links</h4>
			<ul>
				<li><a target="_blanc" href="http://www.spyka.net" title="Spyka Webmaster resources">Spyka Webmaster</a></li>
				<li><a target="_blanc" href="http://www.mywebsolution.de" title="My Websolution">My Websolution</a></li>
				<li><a target="_blanc" href="http://www.phpbox.de" title="PHP Box">PHP Box</a></li>
				<li><a target="_blanc" href="http://www.php-einfach.de" title="PHP Einfach">PHP Einfach</a></li>
				<li><a target="_blanc" href="http://berlin.pennergame.de/change_please/462670...07/ " title="Penner Game">Penner Game Spende</a></li>
			</ul>
	</div>
	<div class="clear">
	<?php
	#IP Speicherung
	$ip = $_SERVER['REMOTE_ADDR'];
	$eintrag = "".$ip."<br>";
	$db = 'iplist.dat';
	$datei = fopen($db,"a");
	fwrite($datei, $eintrag);
	?>
	</div>
	<div id="footer">
		<p>COMPUTER CLAN &copy; 2010 - Homepage
		<?php
			error_reporting(0);
			$datenbank = "version.dat";
			$datei = fopen($datenbank,"r");
			fpassthru($datei);
		?></p>
		<p>written by <a href="mailto:philipp_cc@gmx.net">Philipp Escher</a> and <a href="maitlo:felixus123@yahoo.de">Felix Dirrol</a></p>
		<p>designed by <a href="mailto:philipp_cc@gmx.net">Philipp Escher</a></p>
		<p><a href="#" onclick="window.print();">Seite drucken</a></p>
	</div>		
</div>
</body>
</html>

Alles anzeigen

CSS-Datei:

Code

html, * {
	padding:0;
	margin:0;
}
body {
	background-color:#666666;
	margin:0 auto;
	font-size:1.0em;
	color:#303030;
	font-family:Geneva, Arial, Helvetica, sans-serif;
}




/* headers */
h1 {
	font-size:3.4em;
	text-align:left;
	padding-top:20px;
	padding-left:30px;
	color:#ffffff;
	letter-spacing:3px;
	font-weight:normal;
}
h2 {
	font-family:Geneva, Arial, Helvetica, sans-serif;
	color:#7491A1;
}
h3 {
	font-size:1.3em;
	font-weight:normal;
	color:#333333;
	border-bottom:1px solid #DDDDDD;
}
h4 {
	background-color:#DDDDDD;
	border-bottom:1px solid #CCCCCC;
	padding:5px;
	color:#999999;
}




/* paragraphs */
p {
	margin:2px 0 15px 0;
	line-height:1.3em;
}




/* links */
a {
	color:#333333;
	border-bottom:1px dotted #333333;
	text-decoration:none;
	border:none;
}
a:hover {
	color:#7491A1;
	border-bottom:1px solid #7491A1;
}
div#footer a {
	color:#ffffff;
	text-decoration:underline;
	border:none;
}
div#footer a:hover {
	border:none;
}
div#sidebar ul li a { 
	color:#999999;
	border-bottom:1px solid #CCCCCC;
	font-family:Geneva, Arial, Helvetica, sans-serif;
	font-size:1.1em;
}
div#sidebar ul li a:hover {
	background-color:#DDDDDD;
}




/* lists */
ul, ol {
	margin:0 0 5px 30px;
}




li {
	list-style-type: none;
	list-style-position: inside;
}




/* code */
code {
	display:block;
	border:1px solid #cccccc;
	background-color:#dddddd;
	padding:15px;
	margin:5px;
}

/* container, header and nav */
div#container {
	background-color:#ffffff;
	width:70%;
	padding:0 5px;
	margin:0 auto;
}
div#header {
	background-image:url('images/headerbg.jpg');
	background-repeat:no-repeat;
	background-position:top right;
	background-color:#000000;
	height:120px;
	padding:10px;
}
div#header p {
	text-align:left;
	padding:0 0 0 30px;
	margin:0;
	font-size:0.8em;
	color:#ffffff;
}
div#nav {
	background-image:url('images/navbg.jpg');
	background-repeat:repeat-x;
	height:71px;
}
div#nav ul {
	margin:0;
	padding:0;
}
div#nav ul li {
	display:block;
	float:left;
}
div#nav ul li a {
	float:left;
	border:none;
	padding:25px 15px 0 15px;
	height:46px;
	letter-spacing:2px;
	border-right:1px solid #999999;
	color:#FFFFFF;
	text-decoration:none;
	display:block;
}
div#nav ul li a:hover {
	background-color:#333333;
}




/* content */
div#content {
	padding:20px 10px 0 10px;
}
div#page {
	width:67%;
	float:left;
}
div#sidebar {
	width:28%;
	float:right;
}
div#sidebar p {
	padding:3px 5px;
	font-family:Geneva, Arial, Helvetica, sans-serif;
}
div#sidebar ul {
	list-style:none;
	margin:7px 12px;
}
div#sidebar ul li {
	padding:3px 0;
}




/* footer */
div#footer {
	padding:20px 5px;
	background-color:#636363;
	color:#ffffff;
}
div#footer p {
	font-size:0.6em;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	text-align:center;
	margin:0;
	padding:5px;
}




/* generic classes */
.bold {
	font-weight:bold;
}
.sender {
border: 1px #a9a9a9 solid; margin-top: 1px; margin-right: 1px; margin-bottom: 1px; margin-left: 1px; font-weight: bold; font-size: 11px; color: #000000; line-height: 14px
}
.clear {
	clear:both;
}

Alles anzeigen

lauras · 9. Juni 2010

Ist immer sinnvoll bei Code-Fragen, Teile des Codes nicht mitzukopieren... Wie soll man dir denn dann helfen?

Sören · 9. Juni 2010

Deine Seite hat 43 Fehler im W3C Validator. Vielleicht löst sich dein Problem, wenn du diese beseitigst.
http://validator.w3.org/

Sarkkan · 9. Juni 2010

Zitat von "phillip e."

Code

div#content { 
   padding:20px 10px 0 10px; 
} 
div#page { 
   width:67%; 
   float:left; 
}

...moment, wie war das noch gleich?

Zitat von "Sarkkan"

Öhm.. kann es sein, dass du das nicht für 'page' und 'content' definiert hast?
Versuch das einfach mal^^
Oder ich hab es übersehen.. =/

Ok Ich sag dazu einfach mal nichts

NeoAramis · 9. Juni 2010

Okay also,

Ich glaube Du hast so im Allgemeinen nicht viel Ahnung von HTML und besonders CSS. Ich habe mir einmal den Code genauer angesehen. Wie schon früher bemerkt hast du dieses Template von einer fremden Seite übernommen. Das ist nicht schlimm, kannst du ruhig machen. Nur ist es so, dass wenn man ein Template nach seinen Wünschen anpassen will, muss man ein Flair für HTML und CSS haben. Jeder Entwickler von solchen Templates hat eine eigene Technik der Layouterstellung. Und um herauszufinden wie der Entwickler vorgegangen ist, muss man schon etwas mehr als nur das HTML-Seminar hier durchgearbeitet haben. Nun zurück zum Thema. Ich sehe genau das wolltest du machen. Du wolltest dieses Template übernehmen und Dir selber gewisse Elemente dazutun oder gewisse Elemente verändern. Weil Du wirklich mehr Übung brauchst, hat sich dieses Vorhaben zu einer Katastrophe entwickelt. Da war einfach alles hinten und vorne nicht richtig. Ist jetzt nicht übertrieben ausgedrückt. Ich bilde mir die Meinung, dass du dich an zu schwierige Sachen wagst. Kannst du mir aus dem Kopf sagen, wie das float-Prinzip funktioniert? Kannst du ein einfaches zweispaltiges Layout erstellen? Kapierst du das Prinzip der Vererbung in CSS? Weisst du eigentlich wann man padding und margin verwenden soll/muss und wann nicht? Das sind ein paar Fragen die man einfach ohne gross zu überlegen beantworten können muss um solche Projekte wie Deine zu verwirklichen. Ich gebe Dir einen Tipp. Gehe wirklich nochmals das Seminar durch. Am Schluss musst Du dich selber abfragen können. Das heisst, das du nach jedem Kapitel kurz Dir selber sagen kannst, was du gelernt hast und die Theorie auch wirklich erklären kannst und auch verstehst was du gerade sagst. Das ist aber noch nicht alles. Theorie alleine nützt dir nichts. Gleichzeitig musst du noch alles ins Praktische übersetzten und ausprobieren. Und damit meine ich nicht, dass Du eine Website erstellst, nein, sondern du machst einzelne Codeschnipsel und experimentierst herum. Nur so lernst Du. Weil wenn ich deinen Code anschaue merke ich einfach, dass du wirklich sehr wenig weisst und auch ziemlich Mühe hast den kleinsten Fehler zu finden. Jetzt gerade in diesem Thread. Wenn du eine solche Website möchtest, müsstest du diesen Fehler auch selbst sehen können.

Nun genug. Ich habe Dir noch den Code überarbeitet:

index.html

HTML

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Computer Clan</title>
<link rel="stylesheet" href="design.css" type="text/css" />
<link rel="shortcut icon" href="images/favicon.ico" type="image/vnd.microsoft.icon">
</head>
<body>
<div id="container">
	<div id="header">
		<h1>Computer Clan</h1>
		<span>computers have feelings</span>
   	</div>
   	<div id="nav">
   		<ul>
			<li><a href="#" title="#">Home</a></li>
			<li><a href="#" title="#">Login</a></li>
			<li><a href="#" title="#">Gästebuch</a></li>
			<li><a href="#" title="#">Forum</a></li>
			<li><a href="#" title="#">Downloads</a></li>
			<li><a href="#" title="#">Info</a></li>
			<li><a href="#" title="#">Sonstiges</a></li>
		</ul>
	</div>
	<div id="content">
		<div id="page">
			<div id="page_content">
				<h3>Titel h3</h3>
				<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et 					justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, 							consetetur 							sadipscing elitr, sed diam nonumy eirmod empor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo 						dolores 					et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem 			ipsum dolor sit amet.</p>
				<h3>Titel h3</h3>
				<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et 					justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, 							consetetur 							sadipscing elitr, sed diam nonumy eirmod empor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo 						dolores 					et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem 			ipsum dolor sit amet.</p>
			</div>
		</div>
		<div id="sidebar">
			<div id="sidebar_content">
				<h4>Uhrzeit und Datum</h4>
				<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et 					justo 				duo dolores et ea rebum.</p>
	         	<h4>Login</h4>
	         	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et 					justo 				duo dolores et ea rebum.</p>
				<h4>Links</h4>
				<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et 					justo 				duo dolores et ea rebum.</p>
	         	<ul>
		            <li><a target="_blanc" href="http://www.spyka.net" title="Spyka Webmaster resources">Spyka Webmaster</a></li>
		            <li><a target="_blanc" href="http://www.mywebsolution.de" title="My Websolution">My Websolution</a></li>
		            <li><a target="_blanc" href="http://www.phpbox.de" title="PHP Box">PHP Box</a></li>
		            <li><a target="_blanc" href="http://www.php-einfach.de" title="PHP Einfach">PHP Einfach</a></li>
		            <li><a target="_blanc" href="http://berlin.pennergame.de/change_please/462670...07/ " title="Penner Game">Penner Game Spende</a></li>
	         	</ul>
   			</div>
   		</div>
		<div id="footer">
      		<p>COMPUTER CLAN &copy; 2010 - Homepage
			<p>written by <a href="mailto:philipp_cc@gmx.net">Philipp Escher</a> and <a href="maitlo:felixus123@yahoo.de">Felix Dirrol</a></p>
			<p>designed by <a href="mailto:philipp_cc@gmx.net">Philipp Escher</a></p>
			<p><a href="#" onclick="window.print();">Seite drucken</a></p>
		</div>      
</div>
</body>
</html>

Alles anzeigen

design.css

Code

/*	Basis */
	* {
		padding: 0;
   		margin: 0;
   	}

   	body {
   		background-color: #666;
   		min-width: 65.1em;
   		text-align: center;
   	}




/*	Schriften */
	h1 {
	   font-size: 3.4em;
	   padding: 40px 0 5px 20px;
	   color: #fff;
	   letter-spacing: 3px;
	   font-weight: normal;
	}

	span {
		font-size: 1em;
	   	padding: 0 0 30px 25px;
	   	color: #fff;
	   	display: block;
	}

	h2 {
	   font-family: Geneva, Arial, Helvetica, sans-serif;
	   color: #7491A1;
	}

	h3 {
	   font-size: 1.3em;
	   font-weight: normal;
	   margin: 0 0 20px 0;
	   color: #333333;
	   border-bottom: 1px solid #ddd;
	}

	h4 {
	   background-color: #ddd;
	   border-bottom: 1px solid #ccc;
	   padding: 5px;
	   color: #999;
	}




	p {
	   line-height: 150%;
	   padding: 0 0 15px 0;
	}







	a {
	   color: #333;
	   border-bottom: 1px dotted #333;
	   text-decoration: none;
	   border: none;
	}

	a:hover {
	   color: #7491A1;
	   border-bottom: 1px solid #7491A1;
	}

	#footer a {
	   color: #fff;
	   text-decoration: underline;
	   border: none;
	}

	#footer a:hover {
	   border: none;
	}

	#header p {
	   text-align:left;
	   padding:0 0 0 30px;
	   margin:0;
	   font-size:0.8em;
	   color:#fff;
	}

	#sidebar ul li a {
	   color: #999999;
	   border-bottom: 1px solid #CCCCCC;
	   font-family: Geneva, Arial, Helvetica, sans-serif;
	   font-size: 1.1em;
	}

	#sidebar ul li a:hover {
	   background-color: #ddd;
	}




	ul, ol {
	   margin:0 0 5px 30px;
	}

	li {
	   list-style-type: none;
	   list-style-position: inside;
	}

	#nav ul {
	   margin:0;
	   padding:0;
	}

	#nav ul li {
	   display:block;
	   float:left;
	}

	#nav ul li a {
	   float:left;
	   border:none;
	   padding:25px 15px 0 15px;
	   height:46px;
	   letter-spacing:2px;
	   border-right:1px solid #999999;
	   color:#999;
	   text-decoration:none;
	   display:block;
	}

	#nav ul li a:hover {
	   background-color:#333333;
	}

	#sidebar p {
	   padding:3px 5px;
	   font-family:Geneva, Arial, Helvetica, sans-serif;
	}

	#sidebar ul {
	   list-style:none;
	   margin:7px 12px;
	}

	#sidebar ul li {
	   padding:3px 0;
	}

	#footer p {
	   font-size:0.6em;
	   font-family:Verdana, Arial, Helvetica, sans-serif;
	   text-align:center;
	   padding:5px;
	   margin: 0;
	}

/*	Layout */
	#container {
		background-color: #fff;
		width: 65em;
		padding: 0 10px 0 10px;
		text-align: left;
		margin: 0 auto;
	}

	#header {
		background-color: #000;
		height: auto;
	}

	#nav {
		height: 70px;
		margin-bottom: 30px;
	}

	#content {
		background-color: #fff;
	}	

	#page {
		width: 70%;
		float: left;
	}

	#sidebar {
		width: 30%;
		float: right;
	}

	#page_content {
		padding: 0 10px 10px 10px;
	}

	#sidebar_content {
		padding: 0 10px 10px 10px;
	}

	#footer {
		padding: 20px 5px;	
	   	background-color: #636363;
		color: #fff;
		clear: both;
		margin: 30px 0 0 0;	
	}

Alles anzeigen

lauras · 9. Juni 2010

Ich möchte mich da anschließen.
Es ist nicht so, dass wir dich fertig machen wollen, aber es ist nicht schön, wenn man dir etwas immer wieder sagt mach dies, mach das.
Vielleicht überlegst du dir, dir das was Leute sagen, die sich schon ganz gut auskennen, auch mal wenigstens ansatzweise umzusetzen.

Du hast mir schonmal versprochen, dass du das tun wolltest, erinnerst du dich? Weil im Grunde wollen wir dir doch alle nur helfen

LG

Yamram · 10. Juni 2010

hab die Farben geändert!
aber jetzt ist der haupttail immer noch nicht in der mitte
Ihr könnt es selbst ausprobieren (erst IE dann FF*)
<a class="postlink" href="http://webspace.dnsalias.net/phome/home.php">http://webspace.dnsalias.net/phome/home.php</a>

Ich weiß nicht, was das sein kann.

*FF = Firefox

Yamram · 10. Juni 2010

[Problem gelöst]

Lösung:
Ich habe mal <center> und </center> weggelassen!

Anonymous · 15. Juni 2010

Abgesehen davon das dein Design nicht wirklich zusammenpasst und der :hover effekt beim Menu im Internet Explorer8 leider nicht ausgeführt wird. Sieht es jetzt in beiden aktuelen Versionen der Browser gleich aus. bei dir nicht?

EDIT17:48:Zu spät geschrieben, Problem bereits gelöst, alles klar

lauras · 15. Juni 2010

Zitat von "Verwebbt"

und der :hover effekt beim Menu im Internet Explorer8 leider nicht ausgeführt wird.

Müsste man mit Javascript nachrüsten..
Philipp: Am besten mal danach googlen, sonst siehts doof aus, da hat er Recht

Anonymous · 16. Juni 2010

Zitat von "lauras"

Müsste man mit Javascript nachrüsten..
Philipp: Am besten mal danach googlen, sonst siehts doof aus, da hat er Recht

Hat er ein Js Menü, oder teilweise auf js basierend.

Geht das sonst nicht auch ohne Js im IE. Also bei mir schon, css ist doch mächtig

lauras · 16. Juni 2010

Der IE kennt den hover-Effekt nur für Links, wenn ich mich nicht irre. Für alles andere muss man nachrüsten

Weiß ist in Firefox grau, aber in IE weiß

Jetzt mitmachen!

Teilen