XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Spacer Problem (http://xhtmlforum.de/showthread.php?t=52113)

Valnar 03.06.2008 22:20

Spacer Problem
 
Hey leute,
bei mir werden in FireFox die Spacer hier nicht angezeigt, weiss jemand woran das liegt?
Darüber hinaus wird, der Archive Navigator Button nicht ganz markiert dargestellt.
Hier ein screen:
http://b.imagehost.org/0776/error.png

Hier die HTML Datei:
Code:

<?xml version="1.0"?>
<!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>
<title>Endfassung 1 - Hauptseite</title>
<link rel="stylesheet" type="text/css" media="screen" href="endfassung1_verein.css" />
<link rel="stylesheet" type="text/css" media="print" href="endfassung_print.css" />
</head>
<body id="archiv"> <!-- body erhält eine eigene ID -->
<!-- container Beginn -->
<div id="container">
<!-- kopf -->
<div id="kopf" title="Valnars archive" alt="Valnars Archive"><h1>Valnars Archive</h1>
<img src="bilder/sticker.gif" id="sticker" alt="sticker" width="100" height="100" />
</div>
<div id="navigation"><ul>
<li id="nav1"><a href="home.html">Home</a></li>
<li id="nav3"><a href="archive.html">Archive</a></li>
<li id="nav2"><a href="kontakt.html">Kontakt</a></li>
</ul>
</div> <!-- kopf Ende -->
<!-- links -->
<div id="links">
<ul>
<li>News:</li>
<li>3.Juli</li>
<li>Seite erröffnet!</li>
</li>
</ul>
</div> <!-- links Ende -->
<!-- rechts -->
<div id="rechts"><small>Mein kleines Archiv...</small></div>  <!-- rechts Ende -->
<!-- inhalt -->
<div id="inhalt">
<div class="ob-re">
<div class="ob-li">
<div class="un-re">
<div class="un-li">
<h2>Hauptseite</h2>
<div class="li-ecke">
<div class="re-ecke">
<p>BLA BLA <a href="#1">imperdiet</a> </p>
</div>  <!-- re-ecke -->
</div>  <!-- li-ecke -->
<div class="li-ecke">
<div class="re-ecke">
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec ante metus, gravida et, hendrerit a, varius eget, massa. Phasellus pede enim, congue id, semper nec, aliquam pellentesque, arcu. Suspendisse potenti. Nullam eget massa vel ipsum lacinia ullamcorper. Praesent vehicula bibendum mi. Nunc lectus augue, sagittis pellentesque, feugiat <a href="#4">ultrices</a>, facilisis a, velit. Fusce venenatis nulla ac purus. Praesent volutpat odio at erat. Mauris sollicitudin lorem non lectus. Nullam justo sapien, ullamcorper vitae, condimentum nec, blandit ac, est. Quisque quis purus. Praesent ornare. Nulla facilisis enim vitae enim mollis tincidunt. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</div>
<div class="li-ecke">
<div class="re-ecke">
</div>  <!-- re-ecke -->
</div>  <!-- li-ecke -->
</div>  <!-- un-li -->
</div>  <!-- un-re -->
</div>  <!-- ob-li -->
</div>  <!-- ob-re -->
</div> <!-- inhalt Ende -->
<!-- impressum -->
<div id="impressum"><h6>(c) 2008 by Valnar</h6></div> <!-- impressum Ende -->
</div> <!-- container Ende  -->
<!-- notizen -->
<div id="notizen"><p>die seite haste grad ausgedruckt!<br />Die Seiten wurden mit Hilfe des Buches "CSS für Kids" gestaltet! (echt zu empfelen das ding)</p>
<p>In dieser Kiste kannst du deine persönlichen Notizen hinschreiben, in langweiligen Stunden Skizzen und Karikaturen anfertigen oder einfach deine Einkaufsliste notieren!<br /> Viel Spaß und frohes Schaffen! Mein kommentar dazu: wtf?</p>
<p class="trennlinie">Notizen:</p>
</div> <!-- notizen Ende  -->
</body>
</html>

Hier die CSS Datei:
Code:

/*------------Grundeinstellungen------------*/
* {
  margin: 0px;
}
body {
  background: #00AEFF url(bilder/verlauf.gif) repeat-x fixed;
  color: #294F00;
  font-family: Geneva, Arial, Helvetica, sans-serif;
  font-size: 0.9em;
  margin: 0px auto;
  width: 800px;
}
#container {
  background-color: #B0FF8C;
  padding: 20px;
}
/*--------Navigation----------*/
.hidden {
  display: none; /*lässt den Originaltext verschwinden*/
}
ul, #navigation li {
  margin: 0px;
  padding: 0px;
  list-style: none;
  display: inline;
}
#navigation {
  padding-left: 120px;
  height: 35px; /*WICHTIG! Zeigt nur einen Ausschnitt*/
  border-bottom: solid #8FFF49 10px;
}
#navigation a, #navigation a:link, #navigation a:visited {
  height: 20px;
  display: block;
  float: left; /*lässt alles nebeneinander stehen, ansonsten übereinander*/
}
li#nav1:hover, li#nav2:hover, li#nav3:hover, li#nav4:hover, li#nav5:hover , li#nav6:hover, #hauptseite li#nav1, #kontakt li#nav2, #archiv li#nav3 {
  background:  url(bilder/nav-rechts-aktiv.gif) no-repeat top right;
  margin-left: 0px;
  float: left;
}
#nav1 a:hover, #nav2 a:hover, #nav3 a:hover, #nav4 a:hover, #nav5 a:hover, #nav6 a:hover, #hauptseite li#nav1 a, #kontakt li#nav2 a {
  background: url(bilder/nav-links-aktiv.gif) no-repeat top left;
  display: block;
  padding: 15px 15px 0;
}
li#nav1, li#nav2, li#nav3, li#nav4, li#nav5 , li#nav6 {
  background:  url(bilder/nav-rechts-inaktiv.gif) no-repeat top right;
  margin-left: 0px;
  float: left;
  padding-right: 10px;
}
#nav1 a, #nav2 a, #nav3 a, #nav4 a, #nav5 a, #nav6 a {
  background: url(bilder/nav-links-inaktiv.gif) no-repeat top left;
  display: block;
  padding: 15px 15px 0;
}
/*-------------weiteres Zeugs---------------*/
#kopf {
  background: url(bilder/haupttitel.gif) no-repeat top center;
  height: 100px;
  text-align: center;
}
#kopf>h1{
  display: none;
  padding: 25px 0px;
}
#inhalt h2 {
  letter-spacing: 5px;
  padding: 40px 0 0 0;
  text-align: center; 
}
#impressum>h6 {
  background-color: #8FFF49;
  padding: 5px 0px;
}
#inhalt p{
  padding:10px 30px 45px 40px; 
  text-indent: 25px; 
}
.li-ecke {
  background: url(bilder/spacer-li.gif) no-repeat 10% bottom;
}
.re-ecke { 
  background: url(bilder/spacer-re.gif) no-repeat 90% bottom;
}
/*----------Positionierungseinstellungen FLOAT---------------*/
#links {
  clear: both;
  background: #8FFF49 url(bilder/spalte-oben.gif) no-repeat top left;
  float: left;
  padding: 20px 0 0 0;
  width: 88px;
}
#links ul{
  display: block;
  background: url(bilder/spalte-unten.gif) no-repeat bottom left;
  padding: 0 0 20px 15px;
}
#rechts {
  background: #8FFF49 url(bilder/spalte-oben.gif) no-repeat top left;
  float: right;
  padding: 20px 0 0 0;
  width: 88px;
}
#rechts small{
  display: block;
  background: url(bilder/spalte-unten.gif) no-repeat bottom left;
  padding: 0 20px 20px 20px;
}
#inhalt {
  padding: 20px 0px;
  margin: 0 90px;
}
#impressum {
  clear: both;
  height: 30px;
  text-align: center;
}
/*-------------Hyperlinks----------*/
a {
  color: inherit;
  font-style: italic;
  text-decoration: none;
}
a:link {
  background-color: yellow;
}
a:visited {
  background-color: maroon;
}
a:hover, a:focus {
  background-color: red;
  outline: none;
}
a:active {
  background-color: white;
  outline: none;
}
/*-------------Formular----------*/
fieldset {
  margin: 0px 50px;   
  padding: 0px;
  background: url(bilder/formularverlauf.gif) repeat-x ;
  border: solid 1px #8DCD70;
}
legend {
  margin: 0 0 0 20px;
  padding: 5px;
}
label {
  font-weight: bold;
  float: left;
  clear: left;
  width: 100px;
  text-align: right;
  margin: 0 10px 0 0;
}
fieldset ol {
  margin: 0px;
  padding: 0px;
  list-style: none;
}
fieldset li {
  margin: 0;
  padding: 0 0 10px 10px;
}
fieldset.submit {
  background: none;
  margin: 15px 0 0px 171px;
  padding-bottom: 30px;
  border: none;
}
.formtext {
  font: inherit;
  width:265px;
  border: solid 1px #8DCD70;
  background: url(bilder/input-schatten.gif) no-repeat;
}
input.submit {
  border: solid 1px #294F00;
  background: white;
  margin: 0 0 30px 0;
}
label em {           
  color: #D20000;
  font-style: normal;
  font-size: 120%;
}
li small{           
  color: #D20000;
  font-style: normal;
  font-size: 70%;
  text-transform: uppercase;
  padding: 0 0 0 10px;
}

.ob-re { 
  background:url(bilder/sliding_ob-re.gif) top right no-repeat;
  margin:0;
  padding:0;
}
.ob-li { 
  background:url(bilder/sliding_ob-li.gif) top left no-repeat;
  margin:0;
  padding:0;
}
.un-re { 
  background:url(bilder/sliding_un-re.gif) bottom right no-repeat;
  margin:0;
  padding:0;
}
.un-li { 
  background:url(bilder/sliding_un-li.gif) bottom left no-repeat;
  margin:0;
  padding:0;
}
#hauptseite .un-li {
background:url(bilder/sliding_un-li.gif) bottom left no-repeat;
margin:0;
padding:0 0 40px 0;
}
#notizen {
  display: none;
}
#sticker {
  position: relative;
  left: -350px;
  top: -20px;
}


Geronimo 03.06.2008 22:49

Was verstehst du unter Spacer?

Timo 03.06.2008 22:50

Du hättest dir gern mehr Zeit beim Problembeschreiben lassen können. Auch rote Kreise auf dem Screenshot währen erlaubt.

Valnar 04.06.2008 16:57

Siehst du es nicht?
ROFL!
http://b.imagehost.org/0810/error.png


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

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023