span und div Inhalte werden nicht angezeigt

pelgro · #1 (**permalink**) 30.05.2010, 20:24

Hier einmal kurz beide Datein

HTML:

Code:

<!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>Digital-gaminq - News</title>

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

    <link href="styles/design.css" type="text/css" rel="stylesheet" />

</head>
<body>
<div id="seitenbereich">
    <div id="counter">
        <?php
        include("inc/konfiguration.php");
        include("inc/counter.php");
        ?>
    </div>
    <div id="header">
    </div>
    <div id="navi_1">
        <a href="forum/index.php" id="A"></a>
        <a href="guestbook.php" id="B"></a>
        <a href="contact.php" id="C"></a>
        <span class="rest"></span>
    </div>
    <div id="lauf">
    </div>
    <div id="navi_2">
        <a href="index.php" id="D"></a>
        <a href="teams.php" id="E"></a>
        <a href="matches.php" id="F"></a>
        <a href="gallery.php" id="G"></a>
        <a href="aboutus.php" id="H"></a>
        <a href="downloads.php" id="I"></a>
        <a href="links.php" id="J"></a>
        <a href="sponsors.php" id="K"></a>
    </div>
    <span id="lm">
        <span id="links"></span>
        <span id="lm_text"></span>
        <?php
        echo "Test!"
        ?>
    </span>
    <span id="nm">
        <span id="nm_text"></span>
        <?php
        echo "Test!"
        ?>
    </span>
    <span id="nmi">
        <span id="nmi_text"></span>
        <?php
        echo "Test!"
        ?>
    </span>
    <span id="loginfeld">
        <span id="loginfeld_text"></span>
        <?php
        echo "Test!"
        ?>
    </span>
    <span id="rechts"></span>
    <div id="unten_1"></div>
    <div id="unten_2"></div>
    <div id="ihnalt">
    <span id="news_text">
    </span>
    </div>
</div>
</body>
</html>

CSS:

Code:

* {margin: 0; padding: 0;}
html, body {background-color: #000000;text-align: center;}

/*###############
* Positionierung
* ###############*/
#seitenbereich {width:990px;height: auto;margin: 0 auto;text-align:left;padding-top: 10px;}
#counter {background-image: url(../images/digital-gaminq_01.jpg);background-repeat: no-repeat;width: 974px;height: 32px;color: #FFFFFF;font:arial 12px; padding-top: 13px;}
#header {background-image: url(../images/digital-gaminq_02.jpg);width: 974px;height: 119px;}
#navi_1 {background-color: #000000;width: 974px;height: 33px;}
.rest {background-image: url(../images/digital-gaminq_06.jpg);width: 640px;height: 33px;margin:0px 0px 0px 334px;position: absolute;}
#lauf {background-image: url(../images/digital-gaminq_07.jpg);background-repeat: no-repeat;width: 974px;height: 39px;}
#navi_2 {background-color: #000000;width: 974px;height: 38px;}
#lm {background-color:#FFFFFF;width: 245px;height: 90px;float: left;}
#links {background-image: url(../images/digital-gaminq_16.jpg);width:3px;height:90px;float: left;}
#lm_text {background-image: url(../images/digital-gaminq_17.jpg);width:242px;height:27px;float: left;}
#nm {background-color:#FFFFFF;width:243px;height:90px; float: left;}
#nm_text {background-image: url(../images/digital-gaminq_21.jpg);width:243px;height:27px;float: left;}
#nmi {background-color:#FFFFFF;width:246px;height:90px;float: left;}
#nmi_text {background-image: url(../images/digital-gaminq_25.jpg);width:246px;height:26px;float: left;}
#loginfeld {background-color:#FFFFFF;width:237px;height:90px;float: left;}
#loginfeld_text {background-image: url(../images/digital-gaminq_27.jpg);width:237px;height:26px;float: left;}
#rechts {background-image: url(../images/digital-gaminq_29.jpg);width:3px;height:90px;float: left;}
#unten_1 {background-image: url(../images/digital-gaminq_30.jpg);width:974px;height:28px;background-repeat: no-repeat;}
#unten_2 {background-image: url(../images/digital-gaminq_31.jpg);width:974px;height:6px;background-repeat: no-repeat;}
#inhalt {background-color:#FFFFFF;width: 722px; min-height:950px;float: left;}
#news_text {background-image: url(../images/digital-gaminq_32.jpg);width:722px;height:28px;}

/*###############
* Counter
* ###############*/
.counter {color: #8bbbef;}
#today {float: left;padding-left: 200px;}
#yesterday {float: left;padding-left: 15px;}
#total {float: left;padding-left: 425px;}

/*###############
* 1 Navi-Elemente
* ###############*/
#A {background-image: url(../images/digital-gaminq_03.jpg);width: 111px;height: 33px;margin:0px 0px 0px 0px;position: absolute;}
#A:hover {background-image: url(../images/digital-gaminq_03_h.jpg);width: 111px;height: 33px;margin:0px 0px 0px 0px;position: absolute;}
#B {background-image: url(../images/digital-gaminq_04.jpg);width: 112px;height: 33px;margin:0px 0px 0px 111px;position: absolute;}
#B:hover {background-image: url(../images/digital-gaminq_04_h.jpg);width: 112px;height: 33px;margin:0px 0px 0px 111px;position: absolute;}
#C {background-image: url(../images/digital-gaminq_05.jpg);width: 112px;height: 33px;margin:0px 0px 0px 223px;position: absolute;}
#C:hover {background-image: url(../images/digital-gaminq_05_h.jpg);width: 112px;height: 33px;margin:0px 0px 0px 223px;position: absolute;}
/*###############
* 2 Navi-Elemente
* ###############*/
#D {background-image: url(../images/digital-gaminq_08.jpg);width: 122px;height: 38px;margin:0px 0px 0px 0px;position: absolute;}
#D:hover {background-image: url(../images/digital-gaminq_08_h.jpg);width: 122px;height: 38px;margin:0px 0px 0px 0px;position: absolute;}
#E {background-image: url(../images/digital-gaminq_09.jpg);width: 123px;height: 38px;margin:0px 0px 0px 122px;position: absolute;}
#E:hover {background-image: url(../images/digital-gaminq_09_h.jpg);width: 123px;height: 38px;margin:0px 0px 0px 122px;position: absolute;}
#F {background-image: url(../images/digital-gaminq_10.jpg);width: 123px;height: 38px;margin:0px 0px 0px 245px;position: absolute;}
#F:hover {background-image: url(../images/digital-gaminq_10_h.jpg);width: 123px;height: 38px;margin:0px 0px 0px 245px;position: absolute;}
#G {background-image: url(../images/digital-gaminq_11.jpg);width: 123px;height: 38px;margin:0px 0px 0px 368px;position: absolute;}
#G:hover {background-image: url(../images/digital-gaminq_11_h.jpg);width: 123px;height: 38px;margin:0px 0px 0px 368px;position: absolute;}
#H {background-image: url(../images/digital-gaminq_12.jpg);width: 123px;height: 38px;margin:0px 0px 0px 491px;position: absolute;}
#H:hover {background-image: url(../images/digital-gaminq_12_h.jpg);width: 123px;height: 38px;margin:0px 0px 0px 491px;position: absolute;}
#I {background-image: url(../images/digital-gaminq_13.jpg);width: 123px;height: 38px;margin:0px 0px 0px 614px;position: absolute;}
#I:hover {background-image: url(../images/digital-gaminq_13_h.jpg);width: 123px;height: 38px;margin:0px 0px 0px 614px;position: absolute;}
#J {background-image: url(../images/digital-gaminq_14.jpg);width: 123px;height: 38px;margin:0px 0px 0px 737px;position: absolute;}
#J:hover {background-image: url(../images/digital-gaminq_14_h.jpg);width: 123px;height: 38px;margin:0px 0px 0px 737px;position: absolute;}
#K {background-image: url(../images/digital-gaminq_15.jpg);width: 114px;height: 38px;margin:0px 0px 0px 860px;position: absolute;}
#K:hover {background-image: url(../images/digital-gaminq_15_h.jpg);width: 114px;height: 38px;margin:0px 0px 0px 860px;position: absolute;}

Und das wird nicht angezeigt:

Code:

    <div id="unten_1"></div>
    <div id="unten_2"></div>
    <div id="ihnalt">
    <span id="news_text">

Code:

#unten_1 {background-image: url(../images/digital-gaminq_30.jpg);width:974px;height:28px;background-repeat: no-repeat;}
#unten_2 {background-image: url(../images/digital-gaminq_31.jpg);width:974px;height:6px;background-repeat: no-repeat;}
#inhalt {background-color:#FFFFFF;width: 722px; min-height:950px;float: left;}
#news_text {background-image: url(../images/digital-gaminq_32.jpg);width:722px;height:28px;}

Hoffe sieht den Fehler.

Walter IT-Services · #2 (**permalink**) 31.05.2010, 01:57

Hallo!

Wenn ich deinen Code teste, seh ich die DIVs (mit border gesehen, da ich die bilder nicht habe). Ich schätze daher, dass deine Hintergrundbilder schlicht und einfach nicht existieren. Ob da was nicht stimmt, sieht man super mit dem Firebug-Plugin für den FF. Einfach im Firebug mal auf den "Network"-Tab klicken.
Dort sieht man, welche Dateien angefordert werden von der Seite. Rot markierte Dateien, sind Dateien, die auf dem Server nicht gefunden wurden.

LG
Micha

pelgro · #3 (**permalink**) 31.05.2010, 08:08

Danke für die Antowrt. Habe mal mit Firebug nachgeschaut.
Bilder eksistieren. DAs Problem ist nur. Das die Div's hinter die Span's gehen.
So zeigt es mit Firebug zumindest an.
Wenn man im HTML-Bereich ist und dann mit der Maus über einem der Div' fährt, zeigt er ja an, wo der auf der Seite ist.
Warum gehen die Div's dan hinter die Span's?

Walter IT-Services · #4 (**permalink**) 31.05.2010, 14:29

Das Problem ist, dass man ohne die Bilder zu haben, schlecht sehen kann, worauf das hinaus laufen soll. Aber scheinbar hast du ein Clearing-Problem. Du lässt die SPANs floaten, clearst danach aber nicht. Du kannst dir ja mal in der FAQ den Punkt 2 durchlesen. Vielleicht hilft dir das weiter.

Am besten wäre es, wenn du dein Zeug hochlädst und einen Link postest. Dann kann ich mir mehr darunter vorstellen, wie das mal aussehen sollte.

LG
Micha

pelgro · #5 (**permalink**) 31.05.2010, 15:49

Danke.
unten_1 und unten_2
werden jetzt angezeigt.
Nur wie mache ich das mit divs die float:left; benutzen?

Hier mal der Link
Digital-gaminq - News

uspri · #6 (**permalink**) 31.05.2010, 16:11

Darf ich mal fragen, warum Du die ganzen Bereiche eigentlich in <span> packst und kein <div> verwendest? Ein <div> ist zum gruppieren zusammengehöriger Bereiche gedacht und auch passend dazu ein Blockelement, wohingegen ein span von Haus aus ein Inlineelement ist und dazu passend dann auch keine Blockelemente enthalten darf.

Walter IT-Services · #7 (**permalink**) 31.05.2010, 16:13

Zitat:

Zitat von uspri

Darf ich mal fragen, warum Du die ganzen Bereiche eigentlich in <span> packst und kein <div> verwendest? Ein <div> ist zum gruppieren zusammengehöriger Bereiche gedacht und auch passend dazu ein Blockelement, wohingegen ein span von Haus aus ein Inlineelement ist und dazu passend dann auch keine Blockelemente enthalten darf.

Stimmt. Habe ich mich auch schon gefragt.
Außerdem braucht man keine Inline-Elemente links floaten lassen.
Zudem sehe ich jetzt gar kein Problem mehr. Sieht doch gut aus (Chrome).

pelgro · #8 (**permalink**) 31.05.2010, 20:12

Gute Frage.
Weiss selber nicht, was mich dort geritten hat O.o

EDIT:
der div "Inhalt" wird immer noch nicht angezeigt.

Code:

#inhalt {background-color:#FFFFFF;width: 722px; min-height:950px;float: left;}

Walter IT-Services · #9 (**permalink**) 31.05.2010, 20:46

Natürlich wird er angezeigt. Er hat nur keine Größe, da das min-height nicht zieht. Wenn ich dort Text reinschreibe hat er nur die Größe des textes

pelgro · #10 (**permalink**) 31.05.2010, 20:50

Zitat:

Zitat von Walter IT-Services

Natürlich wird er angezeigt. Er hat nur keine Größe, da das min-height nicht zieht. Wenn ich dort Text reinschreibe hat er nur die Größe des textes

Hatte Text eingefügt. Wurde nicht angezeigt....
Ach und ausserdem, werden die Teile i-wie nicht mehr angezeigt. Ausser im FF. Und da auch nicht der Inhalt.

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Div oder Span unten links positionieren	pkipper	CSS	8	21.06.2011 08:48
DIV wird immer mit einem Abstand nach oben angezeigt -soll aber links oben erscheinen	plegox	CSS	4	21.05.2011 12:17
bei kleinerer auflösung wird div container nicht ganz angezeigt	koehle	CSS	12	17.07.2010 20:30
Rahmen oben (div) wird nicht angezeigt	yyyy	CSS	6	20.08.2009 15:45
Div über div wird im IE nicht angezeigt	eckigeecke	CSS	5	02.04.2009 10:38