<div> background

SaschaCap · #1 (**permalink**) 19.04.2008, 15:53

Ahoi,
hab jetzt mal ne Seite nur mit Div´s gemacht Fiesta Welten (mein erstes mal) und bis jetzt habe ich mich gut geschlagen, doch jetzt komme ich an ein paar punkten nicht weiter:

Das Hintergundbild wird nicht ganz angezeigt.
Beim ersten Menü links ist der Hintergrund bisschen verschoben.
Es wird leider rechts und links im Menü keine Hintergrundfarbe (weiss) angezeigt

Hoffe einige die sich mit CSS auskennen können mir helfen. Alle CSS Angaben sind im Code enthalten:

PHP-Code:


			
<body bgcolor="#028698" topmargin="0">

<div align="center" style="width:100%; height:100%; background: url(http://fiesta.nachtblock.de/site/themes/fiesta/images/bg03.jpg) top center no-repeat;">

    

    <div style="width: 988px; height: 127px; background: url(http://fiesta.nachtblock.de/site/themes/fiesta/images/fiesta2_02.png);">

        <div style="width: 416px; height: 64px; float:right; margin-top:55px; margin-right:10px;">

        <img border="0" src="http://fiesta.nachtblock.de/site/themes/fiesta/images/spez1.png" width="416" height="64">

        </div>

    </div>



    <div style="width: 988px; height: 153px;">

        <div style="width: 692px; height: 153px; float:left;">

            <div style="width:692px; height:153px; background: url(http://fiesta.nachtblock.de/site/themes/fiesta/images/fiesta2_04.gif);">

            </div>

        </div>

        <div algin="right" style="width: 296px; height: 153px; float:right; background: url(http://fiesta.nachtblock.de/site/themes/fiesta/images/fiesta2_05.gif);">

            <div style="width: 280px; height: 37px;"><?php print $header; ?>

            </div>

        </div>

    </div>

    

    <div style="width: 988px; hight: 100%; margin-bottom:0px; background-color: #FFFFFF; text-align:left;">

        <div style="float:left; width:150; height:100%; background-color: #FFFFFF;">

        <div style="width:150px; height:32px; background: url(http://fiesta.nachtblock.de/site/themes/fiesta/images/fiesta2_06.gif);">

        </div>

            <div style="width:150px; clear:right; background: url(http://fiesta.nachtblock.de/site/themes/fiesta/images/fiesta2_11.gif);">

            <div style="margin-left:15px;">

            &raquo; <a class="menu" href="#">HYPERLINK 1</a><br />

            &raquo; <a class="menu" href="#">HYPERLINK 2</a><br />

            &raquo; <a class="menu" href="#">HYPERLINK 3</a><br />

            &raquo; <a class="menu" href="#">HYPERLINK 4</a><br />

            &raquo; <a class="menu" href="#">HYPERLINK 5</a><br />

            </div>

            </div>

        <div style="width:150px; height:60px; background: url(http://fiesta.nachtblock.de/site/themes/fiesta/images/fiesta2_09.gif);">

        </div>

            <div style="width:14%; width:150px; clear:right; background: url(http://fiesta.nachtblock.de/site/themes/fiesta/images/fiesta2_11.gif);">

            <div style="margin-left:15px;">

            &raquo; <a class="menu" href="#">HYPERLINK 1</a><br />

            &raquo; <a class="menu" href="#">HYPERLINK 2</a><br />

            &raquo; <a class="menu" href="#">HYPERLINK 3</a><br />

            &raquo; <a class="menu" href="#">HYPERLINK 4</a><br />

            &raquo; <a class="menu" href="#">HYPERLINK 5</a><br />

            </div>

            </div>        

        <div style="width:150px; height:47px; background: url(http://fiesta.nachtblock.de/site/themes/fiesta/images/fiesta2_13.gif);">

        </div>

            <div style="width:150px; clear:right; background: url(http://fiesta.nachtblock.de/site/themes/fiesta/images/fiesta2_11.gif);">

            <div style="margin-left:15px;">

            &raquo; <a class="menu" href="#">HYPERLINK 1</a><br />

            &raquo; <a class="menu" href="#">HYPERLINK 2</a><br />

            &raquo; <a class="menu" href="#">HYPERLINK 3</a><br />

            &raquo; <a class="menu" href="#">HYPERLINK 4</a><br />

            &raquo; <a class="menu" href="#">HYPERLINK 5</a><br />

            </div>        

            </div>

        <img border="0" src="http://fiesta.nachtblock.de/site/themes/fiesta/images/fiesta2_15.gif" width="150" height="26">

        </div>

        

        <div style="float:right; width:301px;  background-color: #FFFFFF;" height="100%">

            <p align="center"><img border="0" src="http://fiesta.nachtblock.de/site/themes/fiesta/images/letztforen.png" width="132" height="39"></p>

            <div style="margin-left:10px; margin-right:10px;">Forenthemen

            </div><br />

            <p align="center"><img border="0" src="http://fiesta.nachtblock.de/site/themes/fiesta/images/comforum.png" width="290" height="100"></p><br />

            <p align="center"><img border="0" src="http://fiesta.nachtblock.de/site/themes/fiesta/images/umfrage.png" width="96" height="37"></p>

            <div style="margin-left:10px; margin-right:10px;"><?php print $right ?>

            </div>

        </div>

    

        <div style="float:left; width:537px; background-color: #FFFFFF;">

            <div><?php print $content; ?>

            </div>

        </div>    

        

    </div>

    

    <div style="width: 988px; height: 50px; text-align:left;">

    <img border="0" src="http://fiesta.nachtblock.de/site/themes/fiesta/images/fiesta2_16.png" width="988" height="50">

    </div>

    

</div>

lg SaschaCap

Crizzo · #2 (**permalink**) 19.04.2008, 16:55

Sieht nach einer ziemlichen Div-Suppe aus. Div-Element sollen nur semantisch wertvolle Elemente gruppieren, sie aber nicht ersetzen.
Wenn du statt einer Tabelle nun für jede Zelle eine Division nutzt, hast du nichts gewonnen.

Liest du eine Einführung/Buch usw. ?

btw: noch ne Menge Fehler im Markup: [Invalid] Markup Validation of http://fiesta.nachtblock.de/site/ - W3C Markup Validator

Wieso schreibst du die CSS-Anweisung nicht in deine CSS-Datei(en), sondern per "style="" " direkt in den HTML-Code?

SaschaCap · #3 (**permalink**) 20.04.2008, 11:52

Ahoi,
wie ich das jetzt verstanden habe muss ich also viel weniger div verwenden nach dem Motto weniger ist mehr? Das heisst warscheinlich für das linke menü, mitte und rechtes menü nur jeweils ein div? Geht das überhaupt weil ich befürchte das ich die einzelnen Grafiken nicht so platzieren kann wie ich es möchte.

lg Sascha

Crizzo · #4 (**permalink**) 20.04.2008, 12:00

Klar geht das und vielleicht ist sogar das eine Div unnötig und du brauchst nur die Liste (<ul>).

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Inline Listenelement wird nicht richtig im background befüllt	SteveB	CSS	3	28.04.2011 20:41
Problem mit CSS Style	flo007	CSS	3	25.01.2009 17:08
Float-Reihenfolge?	wolf1985	CSS	0	21.08.2008 01:35
Footer left und right Probleme...	wolf1985	CSS	2	14.08.2008 13:04
Mozilla zeigt DIV zu oft an	cracki	CSS	6	09.03.2008 15:22