CSS Code wird falsch dargestellt

Toast · 6. März 2010

So ich bins ma wieder >:O

Ich habe mir etwas gecodet, was am Ende ca. so aussehen soll:

Spoiler anzeigen

Es sind alle Bilder vorhanden, aber das was ich gecodet habe sieht so aus:

Fehler

Meine CSS & HTML Codes:

Codes

CSS

body {  font: 100% Tahoama;  background:url("verlauf.png") repeat-x;  background-color: #FFFFFF;  font-size: 9px;}#ol {  position:absolute;  top: 20px;  left: 100px;  z-index:2;  height: 9px;  width: 9px;  background:url("Wi-FiTreff/imgs/border_ol.png") repeat-x;}#or {  position:absolute;  top: 20px;  height: 9px;  width: 9px;  right: 120px;  z-index:2;  background:url("Wi-FiTreff/imgs/border_or.png") repeat-x;}#ur {  position:absolute;  left: 100px;  height: 9px;  width: 9px;  z-index:2;  bottom: 29px;  background:url("Wi-FiTreff/imgs/border_ur.png") repeat-x;}#ul {  position:absolute;  left: 100px;  z-index:2;  background:url("Wi-FiTreff/imgs/border_ul.png") repeat-x;  height: 9px;  width: 9px;  bottom: 29px;}#u {  background:url("Wi-FiTreff/imgs/border_u.png") repeat-x;  height: 66px;  position:absolute;  left: 109px;  z-index:1;  bottom: 86px;  margin-right: 100px;  width: 100%;}#header {  background:url("Wi-FiTreff/imgs/border_o.png") repeat-x;  height: 183px;  position:absolute;  top: 20px;  left: 109px;  z-index:1;  margin-right: 100px;  width: 100%;}#content {  background:url("Wi-FiTreff/imgs/verlauf.png") repeat-x;  padding: 5px;  position:absolute;  top: 203px;  left: 120px;  z-index:1;  margin-right: 100px;  width: 100%;}#turniere {  background:url("Wi-FiTreff/imgs/turnierverlauf.png") repeat-x;  padding: 5px;  float: right;  position:absolute;  right: 320px;  width: 200px;  z-index:2;  top: 203px;}#steuerung {  padding: 5px;  z-index:2;}ul#navi li>ul {  display: none;  color: #636b70;  background:url("Wi-FiTreff/imgs/button.png")}ul#navi li:hover>ul, ul#navi li>a#aktuell+ul {  display: block;  color: #636b70;  background:url("Wi-FiTreff/imgs/button.png")  }*:first-child+html ul#navi ul {  background-color: #636b70;  color: #636b70;}.info {  margin: 20px;  background:url("Wi-FiTreff/imgs/turnierverlauf.png") repeat-x;  padding: 5px;}a.link {  font-size: 12px;  text-decoration: none;  border-bottom: 1px dotted #636b70;  color: #636b70;}hr {  border-bottom:1px dotted #636b70;}#l {  position:absolute;  left: 100px;  top: 29px;  background:url("Wi-FiTreff/imgs/border_rl.png") repeat-y;  width: 20px;  z-index: 2;  height: 100%;}#r {  position:absolute;  right: 120px;  top: 29px;  background:url("Wi-FiTreff/imgs/border_rl.png") repeat-y;  width: 20px;  z-index: 2;  height: 100%;} #Rahmen div {  clear: left;}

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" xml:lang="de" lang="de">
<head>
<link href="style.css" type="text/css" rel="stylesheet" />
<title>Startseite | Wi-Fi Treff</title>
</head>
<body>
<div id="container1">
<div id="border_ol">
&nbsp;
</div>
<div id="header">
&nbsp;
</div>
<div id="border_or">
</div>
</div>
<div id="navi">
   <div id="Rahmen"><ul id="Navigation">
    <li><a href="#Beispiel">Seite 1</a></li>


    <li><a href="#Beispiel">Seite 2</a>
      <ul>
        <li><a href="#Beispiel">Seite 2a</a></li>
        <li><a href="#Beispiel">Seite 2b</a></li>
      </ul>
    </li>


    <li><a href="#Beispiel">Seite 3</a></li>


    <li><a id="aktuell" href="#Beispiel">Seite 4</a>
      <ul>
        <li><a href="#Beispiel">Seite 4a</a></li>
        <li><span>aktuelle Seite</span></li>
        <li><a href="#Beispiel">Seite 4c</a></li>
      </ul>
    </li>


    <li><a href="#Beispiel">Seite 5</a></li>
  </ul><div></div></div>
</div>
<div id="container2">
<div id="l">
&nbsp;
</div>
<div id="content">
Lorem ipsum eu ius ceteros praesent, nibh efficiantur cu mel, ei soluta pericula maluisset eam! Nam ea kasd omnis accusata, et ius constituto moderatius? Autem eirmod vituperatoribus per in, te per utinam veritus intellegam? In eum aperiam placerat tractatos, sed cu erat omnium pertinacia, ad dolores copiosae vivendum his. Vero decore interpretaris nec no, usu quando appareat eu?


 In sale reque vulputate vis, quo an assum graece omnesque, ut brute lorem his. No duo probo mucius detraxit, ei iudico animal sea, postea animal alterum nec ea. Cum eu sale aliquip persecuti, cum ne homero maluisset delicatissimi, at eam ubique cetero accusamus? Congue invenire expetenda ad qui, fierent tincidunt ut quo. Pro tincidunt temporibus complectitur te? Eu vitae doming constituam qui, ut tempor postulant repudiare sit, cum te soluta vocent theophrastus.


 No clita constituto cum, sed te harum viderer salutatus. Ea nam alia reprehendunt delicatissimi, ad vidit meliore concludaturque nec, an legimus facilisis sed. Sea ne putent mollis veritus! Ne minim nullam ancillae qui, ad duo hinc probo appareat, per duis laoreet officiis te. Usu sint harum inimicus in, te rebum euismod tincidunt his, mea alia gubergren ullamcorper ei! Vel novum assentior scripserit te, sed te tantas fabulas minimum, ne enim delenit constituam mei. Ludus dicunt concludaturque mea ne, an cum discere corpora suscipit.


 In nam clita delectus luptatum, unum everti ad eos, error nostrum mnesarchum eos an. Tota ipsum vis ad, constituto percipitur omittantur qui ut, id sea paulo graeco copiosae. Facer fabulas mediocrem ne eam, has mazim appareat aliquyam ad. Ne vel error utinam delicata. Id pro soluta docendi, nihil facete incorrupte no nec, eu eius possim laboramus mei.


 Ut natum vocibus his, an amet mollis pericula mei, eum stet dolores percipitur ne! Eos equidem quaerendum at, mei te oratio nemore posidonium! Mea sint sonet in, munere suavitate his ut, eum ad magna atqui efficiantur? Vix salutandi forensibus eu, nullam nostrud sapientem pri et. Ei aliquid corpora his, usu tota everti at, vel clita timeam adolescens in.


 Sea ex graece labores fabellas, in mea tollit dictas viderer, at per sint adhuc. Denique electram constituam has te, ei saperet gloriatur sit. Ei nam senserit moderatius, eam impetus argumentum ut, elit mediocrem sapientem ne mei. Illud prompta adversarium ea eos. In nibh mazim eripuit vim, ne possim incorrupte cum? Exerci oblique duo at, nec in nobis consul delenit, vis omnis ornatus cu.


 Per aeque voluptua ocurreret ne, dicant essent vocent nam ei, mel an eruditi mnesarchum definitionem. Rebum veniam fastidii te usu, justo minim est ei! Et nam meis appareat, probo novum cotidieque te vim, vix sumo libris aliquid no. In per cetero legendos voluptatibus, sea at stet docendi legendos! Lorem iudico senserit id eos, oratio meliore laboramus ne vix. Nam nostrud copiosae sensibus ea.


 Eum no persius facilis insolens, vis ludus vivendo singulis in, ex vis epicurei perfecto volutpat. Ad vis assum scripserit comprehensam, no vix quis eleifend dignissim, mutat elitr dicunt te mei. Nihil nonummy aliquando ad mel, te utinam omnesque ius, an populo persius comprehensam vix. Cu aliquip.
</div>
<div id="r">
&nbsp;
</div>
</div>
<div id="container3">
<div id="border_ul">
&nbsp;
</div>
<div id="u">
&nbsp;
</div>
<div id="border_ur">
&nbsp;
</div>
</div>
<div id="turniere">
</div>
</body>
</html>

Alles anzeigen

validator zeigt weder im HTML noch im CSS sheet Fehler an... =/

Danke für eure Hilfe :)

PS: Die größen sollen so sein wie im CSS sheet, nicht wie oben im Bild xD
PPS: "#turniere" und ".info" soll vorerst nicht angezweigt werden ;)

**TimWolla** · 6. März 2010

Link mal bitte.

Toast · 6. März 2010

Ist leider noch nicht on, ich werd später, wenn ich on komme, mal die ganzen Dateien schicken, damit du's selbst ausprobieren kannst.

Beagle · 6. März 2010

CSS

body {
  font: 100% Tahoama;
  background:url("verlauf.png") repeat-x;
  background-color: #FFFFFF;
  font-size: 9px;
}


#ol {
  position:absolute;
  top: 20px;
  left: 100px;
  z-index:2;
  height: 9px;
  width: 9px;
  background:url("Wi-FiTreff/imgs/border_ol.png") repeat-x;
}

Alles anzeigen

Ist Tahoama eine Font? Und ist im Ordner Wi-FiTreff nochn Ordner "Wi-FiTreff"? Wenn ich das so schreiben würde in meinen Layouts klappt das btw. auch nicht o_O probier doch mal "background:url("imgs/bildname");)" ?
kA ob EeZy gleich kommt und sagt das ich kein CSS kann oder so xD

**TimWolla** · 6. März 2010

Tahoma ist eine Font. Allerdings sorgt das nicht für den Fehler.

Zitat

Und ist im Ordner Wi-FiTreff nochn Ordner "Wi-FiTreff"?

Wo steht das denn? Aufjedenfall muss das mit dem background nicht falsch sein.

Plinfo · 6. März 2010

Zitat von eeZy

Tahoma ist eine Font.

Tahoma ja. Aber nicht Tahoama. Also bei mir hat es nie mit background geklappt. Eventuell würde ich background-image nehmen und repeat-x in background-repeat packen, weil dieses All in One bei mir jedenfalls nie klappt. Nur aufgeteilt klappt alles perfekt.

Beagle · 6. März 2010

Tahoama ist mir nur aufgefallen, das dadurch der fehler nicht kommt weiß ich.

CSS

background:url("Wi-FiTreff/imgs/border_ol.png") repeat-x;

Das klappt bei mir (Natürlich isses bei mir anders) nicht. Nur wenn die Datei im Ordner über Wi-FiTreff ist...=/
Das meinte ich damit. Weil wenn der Ordner "imgs" im Ordner "Wi-FiTreff/Wi-FiTreff/" liegt dann klappts.
Edit:// Und wenn hinter user("...") repeat-x steht klappt nix.

Toast · 6. März 2010

Ja, das mit dem Wi-FiTreff unterordner ist ein Fehler^^

Ich werds ausbessern, und wenns immernochnicht klappt lad ich alle dateien hoch damit ihr's ausprobieren könnt :)

/€dit: Hat sich bisschen was verändert, hier nochmal alle Dateien (Die änderungen im CSS-Seet waren beabsichtigt):

Dateien

Beagle · 6. März 2010

Das Archiv is beschädigt o.O

Toast · 6. März 2010

Lol, kennt wer ne Seite, wo ich nen Ordner ohne zip wat weis ich uploaden kann?

Chris! · 7. März 2010

erinnert mich vom design her iwie an meine projektseite ;)
schick schick :D

Toast · 7. März 2010

Jo, hab mich bei dir orientiert :D

Sind auch fast die selben Hex-Codes, aber wie hast du das hingekriegt? Bei mir zeigt es die die divs "l", "r", "border_ol", "border_or", "border_ul", "border_ur" nicht an .__.

Chris! · 7. März 2010

äähm ich muss zugeben, es ist ein fertigdesign :D

Toast · 7. März 2010

Natoll...

Naja, hab am CSS Code rumgebastellt, wie gesagt zeigts aber nicht die divs "l", "r", "border_ol", "border_or", "border_ul", "border_ur" an.

Code

CSS

body {
  font: 100% Tahoma;
  background:url("verlauf.png") repeat-x;
  background-color: #FFFFFF;
  font-size: 9px;
}


#ol {
  position:absolute;
  top: 20px;
  left: 100px;
  z-index:2;
  height: 9px;
  width: 9px;
  background:url("border_ol.png") repeat-x;
}


#or {
  position:absolute;
  top: 20px;
  height: 9px;
  width: 9px;
  right: 120px;
  z-index:2;
  background:url("border_or.png") repeat-x;
}


#ur {
  position:absolute;
  left: 100px;
  height: 9px;
  width: 9px;
  z-index:2;
  bottom: 29px;
  background:url("border_ur.png") repeat-x;
}


#ul {
  position:absolute;
  left: 100px;
  z-index:2;
  background:url("border_ul.png") repeat-x;
  height: 9px;
  width: 9px;
  bottom: 29px;
}


#u {
  background:url("border_u.png") repeat-x;
  height: 66px;
  position:absolute;
  left: 109px;
  z-index:1;
  bottom: 86px;
  margin-right: 100px;
  width: 100%;
}


#header {
  background:url("border_o.png") repeat-x;
  height: 183px;
  position:absolute;
  top: 20px;
  left: 109px;
  z-index:1;
  margin-right: 100px;
  width: 100%;
}


#content {
  background:url("verlauf.png") repeat-x;
  padding: 5px;
  position:absolute;
  top: 203px;
  left: 120px;
  z-index:1;
  margin-right: 100px;
  width: 100%;
}


#turniere {
  background:url("turnierverlauf.png") repeat-x;
  padding: 5px;
  position:absolute;
  right: 320px;
  width: 200px;
  z-index:2;
  top: 203px;
  border: 1px dashed black;
}


#steuerung {
  padding: 5px;
  z-index:2;
}


ul#navi li>ul {
  display: none;
  color: #636b70;
  background:url("button.png")
  border: 1px dashed black;
  height: 30px;
  width: 150px;
}


ul#navi li:hover>ul, ul#navi li>a#aktuell+ul {
  display: block;
  color: #636b70;
  background:url("button.png")
  border: 3px dashed black;
  height: 30px;
  width: 150px;
}


*:first-child+html ul#navi ul {
  background-color: #636b70;
  color: #636b70;
}


.info {
  margin: 20px;
  background:url("turnierverlauf.png") repeat-x;
  padding: 5px;
  border: 1px dashed black;
}


a.link {
  font-size: 12px;
  text-decoration: none;
  border-bottom: 1px dotted #636b70;
  color: #636b70;
}


hr {
  border-bottom:1px dotted #636b70;
}


#l {
  position:absolute;
  left: 100px;
  top: 29px;
  background:url("border_rl.png") repeat-y;
  width: 20px;
  z-index: 2;
  height: 100%;
}


#r {
  position:absolute;
  right: 120px;
  top: 29px;
  background:url("border_rl.png") repeat-y;
  width: 20px;
  z-index: 2;
  height: 100%;
}
 
#Rahmen div {
  clear: left;
}

Alles anzeigen

Help pls..

/€dit: Dateien als .txt ladet es runter, dann öffnen mit editor und als .zip speichern :)

Beagle · 7. März 2010

Iwie passt das ja nich ganz o.O

CSS

#ol

aber im HTML gibts kein

HTML

<div id="ol">

o.O
KA obs nen Unterschied gibt.

Toast · 8. März 2010

fuuu, ich hab statt ol im HTML border_ul

naja, mal versuchen

//Zeigt jetzt die runden ecken an, aber an komplett anderen stellen 0o

**TimWolla** · 8. März 2010

War nichtmal sonderlich anspruchsvoll :D

Fertiges Design: http://rapidshare.com/files/360615488/test.zip

Toast · 8. März 2010

hab jetzt auch den größten Teil hinbekommen, ich änder noch ein paar saehn bei mir, werd mich an deiner versieon orientieren^^, habs nämlich so gelöst: (ohne navi)

Code

CSS

body {  font: 100% Tahoma;  background:url("verlauf.png") repeat-x;  background-color: #FFFFFF;  font-size: 12px;}#u {  background:url("border_u.png") repeat-x;  height: 66px;  position: relative;  z-index: 1;  top: 0px;  left: 100px;  margin-right: 100px;  width: 78%;  border-left: 20px solid #636b70;  border-right: 30px solid #636b70;  border-top: none;  border-bottom: none;  color: #636b70;}#header {  background:url("border_o.png") repeat-x;  height: 183px;  position:relative;  top: 11px;  left: 100px;  z-index:1;  margin-right: 100px;  width: 78%;  border-left: 20px solid #636b70;  border-right: 30px solid #636b70;  border-top: none;  border-bottom: none;  color: white;}#content {  background:url("verlauf.png") repeat-x;  padding: 5px;  position:relative;  top: 0px;  left: 100px;  height: auto;  z-index:1;  margin-right: 100px;  width: 78%;  border-left: 20px solid #636b70;  border-right: 20px solid #636b70;  border-top: none;  border-bottom: none;}#ol {  position:absolute;  top: 19px;  left: 108px;  z-index:2;  height: 9px;  width: 9px;  background:url("border_ol.png") repeat-x;}#or {  position:absolute;  height: 9px;  width: 9px;  top: 18px;  right: 135px;  z-index:2;  background:url("border_or.png") repeat-x;}#ur {  position:relative;  height: 9px;  width: 9px;  z-index:2;  top: -18px;  right: -3px;  margin-left: 89%;  background:url("border_ur.png") repeat-x;}#ul {  position:relative;  z-index:2;  background:url("border_ul.png") repeat-x;  height: 9px;  width: 9px;  top: -9px;  left: 100px;}

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" xml:lang="de" lang="de">
<head>
<link href="style.css" type="text/css" rel="stylesheet" />
<title>Startseite | Wi-Fi Treff</title>
</head>
<body>


<div id="ol">
&nbsp;
</div>


<div id="or">
&nbsp;
</div>


<div id="header">
TEST
</div>


<div id="content">
lololololololololololololololololololololololololololololololololololololololol <br />
lololololololololololololololololololololololololololololololololololololololol <br />
lololololololololololololololololololololololololololololololololololololololol <br />
lololololololololololololololololololololololololololololololololololololololol <br />
lololololololololololololololololololololololololololololololololololololololol <br />
lololololololololololololololololololololololololololololololololololololololol <br />
lololololololololololololololololololololololololololololololololololololololol <br />
lololololololololololololololololololololololololololololololololololololololol <br />
lololololololololololololololololololololololololololololololololololololololol <br />
lololololololololololololololololololololololololololololololololololololololol <br />
lololololololololololololololololololololololololololololololololololololololol <br />
lololololololololololololololololololololololololololololololololololololololol <br />
lololololololololololololololololololololololololololololololololololololololol <br />
lololololololololololololololololololololololololololololololololololololololol <br />
lololololololololololololololololololololololololololololololololololololololol <br />
lololololololololololololololololololololololololololololololololololololololol <br />
lololololololololololololololololololololololololololololololololololololololol <br />
lololololololololololololololololololololololololololololololololololololololol <br />
lololololololololololololololololololololololololololololololololololololololol <br />
lololololololololololololololololololololololololololololololololololololololol <br />
lololololololololololololololololololololololololololololololololololololololol <br />
lololololololololololololololololololololololololololololololololololololololol <br />
lololololololololololololololololololololololololololololololololololololololol <br />
lololololololololololololololololololololololololololololololololololololololol <br />
lololololololololololololololololololololololololololololololololololololololol <br />
lololololololololololololololololololololololololololololololololololololololol <br />
lololololololololololololololololololololololololololololololololololololololol <br />
lololololololololololololololololololololololololololololololololololololololol <br />
lololololololololololololololololololololololololololololololololololololololol <br />
lololololololololololololololololololololololololololololololololololololololol <br />
lololololololololololololololololololololololololololololololololololololololol <br />
lololololololololololololololololololololololololololololololololololololololol <br />
</div>


<div id="u">
&nbsp;
</div>


<div id="ul">
&nbsp;
</div>




<div id="ur">
&nbsp;
</div>


</body>
</html>

Alles anzeigen

/€dit: Ich kann dem "legend"-Tag keine feste größe zuweisen, er verändert sich immer, was soll ich tun?

Toast · 9. März 2010

Habs im FF so hinbekommen wie ich's wollte, aber im IE wirds anders dargestellt, also Das Menü ist verschoben, kann man da verschiedene angaben für die Browser machen?

Vollkornbrot · 9. März 2010

jop
http://de.selfhtml.org/css/lay…erweichen.htm#alternative