darstellung falsch

recab · 22. März 2012

Hey, ich habe be imir eine seite mit css jetzt designt, in der ansichtsfunktion von Scriptly sieht das auch ganz hübsch aus, aber wenn ich es über firefox versuche anzeigen zu lassen fehlen manche stellen komplett und andere sind nicht vollständig.

hier mal eben mein code:

CSS

h1 {
color:white;
}




.navibilder {
	float:right;
	width: 154px;
	height: 26px;
	margin-right: 5px;
	border: none;
}




.nutzerbereich {
	width: 154px;
	height: 26px;
	float:right;
	margin: 5px;
	border: none;




}
#titelbild {
	float: right;
	width: 1300px;
	height: 400px;
	margin: auto;
	border:none;
}
#nutzerbereich {
	background-color: #FF0000;
	border: solid 10px #660000;
	height: 100%
}




#hintergrund{
background-color:black;
width: 1300px;
height: 100%;
}




#kopfzeile {
  background-color:lightskyblue;
  border-bottom:1px solid black;
}




#navi {
width: 164px;
float:left;
text-align: left;
margin: 10px;
background-color: #FF0000;
border: 10px solid #660000
}




#navi ul {
list-style:none;
}




#navi li {
margin-top: 1em;
margin-bottom: 1em;
}




#inhalt {
margin-left: 14em;
margin-right: 14em;
text-align: center;
}




#news {
width:14em;
text-align: center;
float:right;
margin: 10px;
background-color: #FF0000;
border: 10px solid #660000
}

Alles anzeigen

und hier die dazu gehörende seite:

HTML

<!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" xml:lang="de" lang="de">




<head>
	<title>Craft, der RPG Minecraft Server</title>




	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
	<meta name="description" content="" />
	<meta name="author" content="" />
	<meta name="keywords" content="" />
	<meta name="generator" content="Webocton - Scriptly (www.scriptly.de)" />




	<link rel="stylesheet" type="text/css" media="screen" href="design.css" />
</head>




<body>
<div id="hintergrund">




	<div id="kopfzeile">
    	<img id="titelbild" src="Banner/hauptbanner.jpg" />
	</div>
	<div id="nutzerbereich">
    	<img class="nutzerbereich" src="Buttons/Logout.png" />
	</div>




	<div id="navi">
    	<ul>
        	<li><a href="index.htm"><img class="navibilder" src="Buttons/Startseite.png" /></a></li>
        	<li><a href="forum.htm"><img class="navibilder" src="Buttons/Forum.png" /></a></li>
        	<li><a href="kalender.htm"><img class="navibilder" src="Buttons/Kalender.png" /></a></li>
        	<li><a href="galerie.htm"><img class="navibilder" src="Buttons/Galerie.png" border="0" height="26" width="154" alt="Galerie von Craft" /></a></li>
        	<li><a href="faq.htm"><img class="navibilder" src="Buttons/FAQ.png" border="0" height="26" width="154" alt="FAQ von Craft" /></a></li>
        	<li><a href="mitglieder.htm"><img class="navibilder" src="Buttons/Mitglied.png" border="0" height="26" width="154" alt="Mitglieder von Craft" /></a></li>
        	<li><a href="gruppen.htm"><img class="navibilder" src="Buttons/Gruppen.png" border="0" height="26" width="154" alt="Gruppen von Craft" /></a></li>
        	<li><a href="team.htm"><img class="navibilder" src="Buttons/Team.png" border="0" height="26" width="154" alt="Team von Craft" /></a></li>
        	<li><a href="kontakt.htm"><img class="navibilder" src="Buttons/Kontakt.png" border="0" height="26" width="154" alt="Kontakt mit Craft" /></a></li>
    	</ul>
	</div>
	<div id="inhalt">
    	<h1>FAQ</h1>
	</div>
	<div id="news">
    	<h2>News</h2>
	</div>
</div>
</body>
</html>

Alles anzeigen

kann mir vllt jemand sagen warum die darstellung bei firefox so falsch ist?
liebe grüße

unkown-6363 · 22. März 2012

verrätst du ihn uns auch, damit Internet"Wanderer" die dasselbe Problem haben hier die Lösung finden?

recab · 22. März 2012

gute idee
der fehler bei der steuerung war, dass "margin" im allgemeinen teil von "#navi" ist und nicht in dem bereich für die "li"
bei dem fehler, das die leiste unter dem titelbild auf 100% war. die 100% beziehen sich dann allerdings nur auf texte und nicht auf bilder. (das selbe war auch beim hintergrund) d.h. es muss eine höhre in em bzw px angegeben werden, oder noch text rein damit es richtig angezeigt wird.

P.s den hintergrund über ne id zu machen ist nicht so vorteilhaft wie ich finde, lieber bei body und html machen dann ist der ganze bildschirm
(also so:

CSS

html, body {
	background-color: #000000;
	margin:0;
	padding:0;
	width: 100%;
	height:100%
	overflow:hidden;

)

darstellung falsch

Jetzt mitmachen!

Teilen