code reagiert unlogisch (für mich)

Mosima · 21 Oktober 2013

hallo leute,
meine css klasse will mir meine zwei boxen nicht anerkennen als teil der klasse seite. dieses phänomen tritt nur auf wenn ich die zwei boxen nebeneinander setze per float left. ansonsten werden sie untereinander dargestellt und der weisse hintergrund (class seite) wird passend vergrössert.

der code von der class seite ( css)

HTML:

#seite {
    margin: auto;
    padding-bottom: 20px;
    padding-top: 20px;
    width: 935px;
    background-color: #FFFFFF;
    box-shadow: -10px -0px 20px grey,
                  10px  10px 20px #666666;
}

von der ersten box und von der zweiten box (css)

HTML:

#old_news {
    width: 420px;
    height: auto;
    border: #000000 thin solid;
    margin: 0px 0 0 10px;
    float: left;
}

#old_news ul {
    background: #333333;
    list-style: none;
      height: auto;
    margin:0 ;
    padding: 0px 0px 0px 10px;
    color: #FFFFFF;
    font-size: 20px;
    font-style: italic;
    font-weight: bold;

}

#old_news ul > li > ul{
    background: #E4E4E4;
    padding: 5px 0 0 0;
    color: #000000;
    font: 14px normal;
    margin-left: -10px ;
}

#old_news1 {
    width: 420px;
    height: auto;
    border: #000000 thin solid;
    margin: 0px 0 0 10px ;
    float: left;

}

#old_news1 ul {
    background: #333333;
    list-style: none;
      height: auto;
    margin:0 ;
    padding: 0px 0px 0px 10px;
    color: #FFFFFF;
    font-size: 20px;
    font-style: italic;
    font-weight: bold;

}

#old_news1 ul > li > ul{
    background: #E4E4E4;
    padding: 5px 0 0 0;
    color: #000000;
    font: 14px normal;
    margin-left: -10px ;
}

die index.php

PHP:

<!DOCTYPE html>
<html>

<head>
    <title>Startseite</title>
    <link href="styles/style.css" type="text/css" rel="stylesheet">
</head>

<body>
    <div id="seite">
        <div id="header">
            <div id="h_text">
                  Lorem
            <div id="h_text1">
                  Impus
            </div>
            </div>

        <!-- navi -->
        <?php
            include '/includes/navi.html';
        ?>
        </div>

        <div id="inhalt">
          <div id="top_news">
                <ul>
                    <li>Lorem Impus
                        <ul>
                        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 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 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.  <br />  <br />  duis autem vel eum iriure dolor in hendrerit in vulputate
                          velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et
                          accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis
                          dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
                          sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                        </ul>
                    </li>
                </ul>
          </div>

          <div id="old_news">
                <ul>
                    <li>Lorem Impus
                        <ul>
                        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 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 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.  <br />  <br />  duis autem vel eum iriure dolor in hendrerit in vulputate
                          velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et
                          accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis
                          dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
                          sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                        </ul>
                    </li>
                </ul>
          </div>

        <div id="old_news1">
                <ul>
                    <li>Lorem Impus  news 1
                        <ul>
                        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 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 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.  <br />  <br />  duis autem vel eum iriure dolor in hendrerit in vulputate
                          velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et
                          accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis
                          dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
                          sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                        </ul>
                    </li>
                </ul>
          </div>

        </div>

    </div>

    <div id="fuss"></div>
</body>
</html>

hoffe jemand kommt dahinter... ich für meinen teil seh den fehler nicht

threadi · 21 Oktober 2013

Wer floatet muss auch clearen. Ergänze bei #inhalt noch ein

Code:

overflow: hidden;

Wäre eine Variante von vielen ;)

Dein HTML-Code ist btw. nicht wirklich gut. Ich sehe keinen Sinn darin eine Aufzählungsliste mit nur einem Punkt für so etwas zu verwenden. Da ist noch Optimierungspotential vorhanden.

Außerdem wäre der erzeugte HTML-Code wichtig gewesen für die Antwort auf deine Frage, nicht deine PHP-Datei.

Tronjer · 22 Oktober 2013

Außerdem ist ein langer Absatz innerhalb <ul></ul> semantisch falsch.

Mosima · 22 Oktober 2013

danke für die antworten.

das overflow hat geholfen.

was meinst du mit dem sinn im aufzählungspunkt? bin noch zimlich neu bei html/css daher bin ich für jeden hinweiss zu haben was code optimirung betrifft.

@ tronjer was schlägst du den als bessere alternative vor?

threadi · 22 Oktober 2013

Wenn Du HTML5 nutzt wäre <section> sicher passend - also nur <section> welches gefloatet wird anstelle des <div>.
Wenn Du HTML4 oder XHTML nutzt wäre das <div> als umgebendes Element völlig ausreichend.

Eine Aufzählung sollte man nur für wirkliche Auszählungen verwenden. Ein "typischer Anwendungsfall" wäre z.B. eine Liste von Sprachen die man für die Webseitenerstellung nutzt ;) Auch sollte man Listen für Menüstrukturen verwenden, da man (bzw. Suchmaschinen) hierüber die hierarchische Anordnung der Seiten erkennen kann.

code reagiert unlogisch (für mich)

Mosima

Neues Mitglied

threadi

Moderator

Tronjer

Senior HTML'ler

Mosima

Neues Mitglied

threadi

Moderator

Neueste Beiträge