Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 10 von 19

Thema: Liste entwickelt Eigenleben in ihrem Layout

  1. #1
    Teeny
    Registriert seit
    06.06.2011
    Beiträge
    25
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Liste entwickelt Eigenleben in ihrem Layout

    Liebe Leute,
    in einer Liste, welche in einfacher Weise Dinge untereinander angeordnet und zentriert zeigen soll, passiert auch genau dieses - aber zwei der Listenelemente fallen aus der Rolle und entwickeln ein Eigenleben. Ich kann nicht heraus finden warum das so ist - gleicher Code, gleiche CSS, eigentlich alles gleich.... sehr mysteriös.....sicher gibt es eine simple Erklärung, aber ich sehe wohl den Wald vor lauter Bäumen nicht. Kann jemand helfen? Danke!

    Die Liste popt auf, wenn man unter

    http://www.learn-spanish-thoroughly.de/

    über "Deutsches Fernsehen" hovert. Es ist sofort ersichtlich, dass die Liste falsch ist, sozusagen 'verzogen', aber Warum???? Und warum nur teilweise?????

    Der Code lautet so:

    Code:
    <div id="thirdleft"> <br />
          Deutsches Fernsehen<br />
          <br />
          Watch<br />
          German Television<br />
          here! 
          <div id="popup"> <br />
            Courtesy of ARD and ZDF - many thanks! <br />
            <br />
            <li class="list"><a href="http://www.tagesschau.de/multimedia/livestreams/index.html" target="blank">ARD 
              Tagesschau</a></li>
            <br />
            <li class="list"><a href="http://www.ardmediathek.de" target="blank">ARD 
              Mediathek</a></li>
            <br />
            <li class="list"><a href="http://www.zdf.de" target="blank">ZDF Homepage</a></li>
            <br />
            <li class="list"><a href="http://www.heute.de/ZDFheute" target="blank">ZDF 
              Heute Nachrichten</a></li>
            <br />
            
          </div>
        </div>
    
    Die CSS ist so:
    
    #popup {
    	position: relative;
    	width: 430px;
    	padding: 15px;
    }
    
    .list {
    	height: 25px;
    	list-style-image: none;
    	list-style-type: none;
    	border-top-width: thin;
    	border-right-width: thin;
    	border-bottom-width: thin;
    	border-left-width: thin;
    	border-top-style: solid;
    	border-bottom-style: solid;
    	border-top-color: #000000;
    	border-bottom-color: #000000;
    	background-color: #CCCCCC;
    	border-right-style: solid;
    	border-left-style: solid;
    	border-right-color: #000000;
    	border-left-color: #000000;
    }
    Bin für jeden Hinweis sehr dankbar!
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Interessierte/r
    Registriert seit
    03.02.2010
    Ort
    Wanne-Eickel
    Alter
    48
    Beiträge
    125
    Danke
    1
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Liste entwickelt Eigenleben in ihrem Layout

    Eine Liste wird z.B. mit <ul> begonnen und mit </ul> beendet. Dazwischen dürfen nur <li> stehen. Selfhtml und W3C

  3. #3
    Samurai
    Registriert seit
    21.08.2011
    Beiträge
    233
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Liste entwickelt Eigenleben in ihrem Layout

    Zitat Zitat von TanjaP. Beitrag anzeigen
    Eine Liste wird z.B. mit <ul> begonnen und mit </ul> beendet. Dazwischen dürfen nur <li> stehen. Selfhtml und W3C
    Nicht ganz richtig. es können zB noch weitere ul's eingebaut werden. In den li's selbst sind wiederum noch weitere Tags möglich

    alxy

  4. #4
    Bandit
    Gast

    Standard AW: Liste entwickelt Eigenleben in ihrem Layout

    Und manchmal muss man einfach nur mal einen Validator über den HTML-Code laufen lassen, um die Fehler zu entdecken: http://validator.w3.org/check?verbos...oroughly.de%2F

  5. #5
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Liste entwickelt Eigenleben in ihrem Layout

    gelöscht
    Geändert von sejuma (19.03.2012 um 16:55 Uhr) Grund: falscher Post

  6. #6
    Teeny
    Themenstarter

    Registriert seit
    06.06.2011
    Beiträge
    25
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Liste entwickelt Eigenleben in ihrem Layout - viel mysteriöser!

    Liebe Leute,

    erst einmal herzlichen Dank an Tanja P., an alxy und an den Banditen für die Ratschläge!

    Das Problem ist noch immer ungelöst. Wie von Euch aufgezeigt und vom Validator bestätigt ist mein Code nicht einwandfrei (ein li-tag soll in einem div nicht erlaubt sein), allerdings ändert eine Reparatur nichts, aber auch gar nichts. Will sagen, ich kann den Code ändern und die li's in eine ol oder ul einfassen oder auch den div durch einen anderen Tag ersetzen - hilft nichts. Immer noch ist die Liste nicht richtig dargestellt.

    Außerdem ist komisch: Den von mir gemachten Fehler (wenn es denn einer ist (?) ) habe ich laut Validator noch an vielen anderen Stellen gemacht - es wird mehr als dreißigmal der gleiche Fehler moniert! Aber: alle diese Listen werden in jedem Browser korrekt dargestellt, alles funzt ganz wunderbar..... nur diese eine Fernsehliste eben ncht.

    Ferner: Der Fehler tritt auf in IE und Opera (zwei Listenelemente korrekt, zwei falsch). In Google und Safari tritt der Fehler nicht auf (alle Elemente korrekt dargestellt) In Firefox tritt der Fehler abgemildert auf (drei Listenelemente falsch, eines korrekt). Das ist doch mehr als kurios, oder?

    Zusätzlich noch kurioser: Im unteren Bereich der Seite sind vier (identische!!!) divs. Sie enthalten nichts außer einem einzigen Wort. Der Text steht in einem der vier divs nicht (wie sonst) in der Mitte. Kann mir einer sagen warum? Die divs sind in jeder Hinsicht identisch (abgesehen vom Text). Dieser Fehler tritt nur in den Browsern auf, welche auch die o.a. Fernseh-Liste vermasseln.

    Ich bin komplett ratlos. Die einzige Spur, die ich habe -obwohl ich mir keinen Reim darauf machen kann - ist dass evtl irgendein Zusammenhang mit der DW-Box besteht. Denn wenn ich diese deaktiviere, verschwinden die genannten Probleme. Versteh ich allerdings nicht. Was hat die DW-box mit dem Rest zu tun?

    Das ist das mysteriöseste Problem, das mir je untergekommen ist. Hoffe ich hab mich verständlich ausgedrückt. Für hilfreiche Ideen und Hinweise bin ich ganz wahnsinnig,außerordentlich, tierisch und ganz gewaltig richtig dankbar!

  7. #7
    Interessierte/r
    Registriert seit
    03.02.2010
    Ort
    Wanne-Eickel
    Alter
    48
    Beiträge
    125
    Danke
    1
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Liste entwickelt Eigenleben in ihrem Layout - viel mysteriöser!

    Das würde schon einiges ändern, wenn die Liste korrekt sein würde:

    Code:
    <div id="grammar_popup">            <li class="list"><a href="grammar/definite_and_indefinite_article_001_en.php">The              definite and the indefinite article</a></li>           <br />           <li class="list">...
    hier fehlt z.B. immer noch <ul>, die <br> dazwischen haben da nichts zu suchen, den Abstand der li untereinander werden per css geregelt.
    Code:
     
    <div id="grammar_popup">  <ul>          
    <li class="list">...</li> <li class="list">...</li>
    <li class="list">...</li>
    </ul>
    Das es teilweise wie gewünscht dargestellt wird, liegt daran das manche Browser "netter" sind als andere. Solange die gravierenden Fehler nicht beseitigt sind (li in ul) bleibt es ein Glücksspiel.

    Die vier divs am Ende sind nicht gleich - die einen enthalten Text, der aber weder z.B. als Überschrift, Absatz oder sonstiges ausgezeichnet ist, die anderen enthalten Inline-Elemente:
    Code:
    <div>text</div>
    <div><a>text</a></div>
    Du siehst, das etwas fehlt?
    Zum nachlesen

  8. #8
    Meister(in)
    Registriert seit
    24.02.2007
    Beiträge
    460
    Danke
    0
    Bekam 47 mal "Danke" in 47 Postings

    Standard AW: Liste entwickelt Eigenleben in ihrem Layout

    So sollte es klappen.
    Code:
    <!DOCTYPE html>
    
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <title>navi</title>
    <style>
    
    * {
     margin:0;
     padding:0;
     list-style:none;
     text-decoration:none;
    }
    
    ul {
     width:200px;
     margin:10px;
     padding:20px 0;
     background:#ffa;
     border:1px solid #a33;
    }
    
    ul li span {
     display:block;
     padding-top:3px;
     text-align:center;
    }
    
    ul li span.df {
     padding-bottom:20px;
    }
    
    ul li {
     position:relative;
    }
    
    li ul {
     position:absolute;
     left:-99999px;
     top:-20px;
     width:400px;
     padding:10px;
     margin:0;
     background:#fff;
     border:3px solid #a33;
    }
    
    li ul li {
     border:1px solid #000;
     background:#eee;
     margin:20px;
     padding:0px;
    }
    
    li ul li.caption {
     border:none;
     background:transparent;
    }
    
    li a {
     display:block;
     padding:5px;
     background:#eee;
     color:#000;
     font-weight:bold;
    }
    
    li:hover ul {
     left:200px;
    }
    
    li a:hover {
     background:#ffa;
    }
    
    li ul a {
     text-align:center;
    }
    
    </style>
    </head>
    <body>
      <ul> 
        <li><span class="df">Deutsches Fernsehen</span> <span>Watch</span> <span>German Television</span> <span>here! </span>
         <ul>
            <li class="caption">Courtesy of ARD and ZDF - many thanks!</li> 
            <li><a href="http://www.tagesschau.de/multimedia/livestreams/index.html" target="blank">ARD Tagesschau</a></li>
            <li><a href="http://www.ardmediathek.de" target="blank">ARD Mediathek</a></li>
            <li><a href="http://www.zdf.de" target="blank">ZDF Homepage</a></li>
            <li><a href="http://www.heute.de/ZDFheute" target="blank">ZDF Heute Nachrichten</a></li>
         </ul>
        </li>
       </ul> 
    </body>
    </html>
    Geändert von djheke (24.03.2012 um 20:53 Uhr)

  9. #9
    Teeny
    Themenstarter

    Registriert seit
    06.06.2011
    Beiträge
    25
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Liste entwickelt Eigenleben in ihrem Layout

    Hallo,

    besten Dank an Tanja und djheke für die Hinweise. Habe dieses WE leider wenig Zeit weiterzuarbeiten, aber wenigstens habe ich schon einmal die li's im Fernseh-popup in eine ul eingefasst. Damit müsste der Code doch an dieser Stelle doch zumindest nicht fehlerhaft sein, oder?

    Ändern tut das aber leider nichts.

    @ Tanja:
    Wenigstens die divs 4,5 und 6 sind identisch, bitte noch einmal reinsehen. Kann dort auch keinen fehlerhaften Code entdecken ( Sind ja noch fast leer, die divs).Hast Du eine Idee, warum div 5 anders aussieht?

    @djheke
    Werde am Montag deine ausführlichen Hinweise sehr genau studieren, danke dafür. Für den Moment, wüsstest Du warum einfassen der li's in ul nichts ändert?

    An alle:
    Wenn ich die DW box auskommentiere (sie ist also als aktiver Code dann nicht mehr vorhanden), verschwinden die Probleme mit den Listen und dem fünften div sofort, sogar dann, wenn ich den alten, fehlerbehafteten Code drin lasse. Hat jemand eine Idee, warum das so ist? Ich kann keinen Zusammenhang mit der DW box und dem Rest erkennen.

    Gruß
    Sriver

  10. #10
    Interessierte/r
    Registriert seit
    03.02.2010
    Ort
    Wanne-Eickel
    Alter
    48
    Beiträge
    125
    Danke
    1
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Liste entwickelt Eigenleben in ihrem Layout

    Zitat Zitat von sriver Beitrag anzeigen
    ...
    Wenigstens die divs 4,5 und 6 sind identisch
    Nein.
    Code:
        <div id="fourth">fourth</div>
        <div id="fifth">fifth</div>
        <div id="sixth"><script language=JavaScript type="text/javascript">document.write("Javascript-text")</script></div>
    in div sixth steht ein inline-Element (script) und in den anderen? Anders würde es aussehen, wenn z.B. es so aussehen würde:
    Code:
        <div id="fourth"><p>fourth</p></div>
        <div id="fifth"><span>fifth</span></div>
        <div id="sixth"><script language=JavaScript type="text/javascript">document.write("Javascript-text")</script></div>
    Das mit dem validieren hat schon seinen Grund. Nimm mal ein großes Brett (deine Seite) und hau es mit 50 krummen Nägeln (deine Fehler) an die Wand - kann halten, muss aber nicht. Es wird dann auch nicht reichen, wenn Du zwei krumme Nägel gegen 2 gute ersetzt

Ähnliche Themen

  1. Navigation: Liste oder nicht Liste?
    Von Macrosdesign im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 23.07.2009, 13:42
  2. Das Eigenleben von Forenbeiträgen (Oder : sinnlose Postings)
    Von isaBERLIN im Forum Das Forum für Spiele, Fun & Jokes
    Antworten: 4
    Letzter Beitrag: 25.11.2007, 06:21
  3. Zuweisen einer Liste aus Objekt einer neu erstellten Liste
    Von Rachgold im Forum Forum für alle anderen Programmiersprachen
    Antworten: 1
    Letzter Beitrag: 29.07.2007, 09:55
  4. DSK-Soft -> Komplett Neu Entwickelt
    Von FireDuck im Forum Eure Homepages und Foren - Vorstellung und Bewertungen
    Antworten: 13
    Letzter Beitrag: 21.07.2007, 19:14
  5. Fehlermeldung:Bei Ihrem Server stehen Register_Globals auf O
    Von im Forum Computer - Internet Forum
    Antworten: 1
    Letzter Beitrag: 09.02.2007, 22:07

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •