Frage: arbeite ich so korrekt ?

puur · 20.01.2009

Hi leute, hab hier mal jemandem Versucht zu helfen und dabei sind bei mir doch ziemliche zweifel aufgekommen, ob ich überhaupt korrket mit CSS & HTML umgehe. Eigendl. klappt alles also die Seiten die ich so mache werden in den Browsern korrekt dargestellt.. (außer paar schwierigkeiten mitm IE der brauch ne extrawurst sollte aber normal sein.)

Hier mal ein ausschnitt vom Code den ich geschrieben habe, damit ihr seht wie mein Quellcode aussieht.. wär nett wenn ihr mir mal feedback geben könnt:

HTML:

<div id="index">
    <!-- HEADER ANFANG -->
    <div id="head1-1"><img class="_trans" src="./images/head1.png" alt="head1" /></div>
    <div id="header">
        <div id="quikmenu">

            <div id="head_l"></div>
            <div id="head_m">
                <div id="quiknavi">
                    <div style="float: left;"><a onfocus="if(this.blur)this.blur()" href="/neu/Startseite.html" class="button1 button_selected"></a></div>
                    <div style="float: left; background: #32363C; width: 1px; height: 45px;"></div>
                    <div style="float: left;"><a onfocus="if(this.blur)this.blur()" href="/neu/Gameserver.html" class="button2"></a></div>
                    <div style="float: left; background: #32363C; width: 1px; height: 45px;"></div>
                    <div style="float: left;"><a onfocus="if(this.blur)this.blur()" href="/neu/Voiceserver.html" class="button3"></a></div>
                    <div style="float: left; background: #32363C; width: 1px; height: 45px;"></div>

                    <div style="float: left; width: 295px; height: 45px;">&nbsp;</div>
                    <div style="float: left;"><a onfocus="if(this.blur)this.blur()" href="/neu/Technik.html" class="button4"></a></div>
                    <div style="float: left; background: #32363C; width: 1px; height: 45px;"></div>
                    <div style="float: left;"><a onfocus="if(this.blur)this.blur()" href="/neu/Files.html" class="button5"></a></div>
                    <div style="float: left; background: #32363C; width: 1px; height: 45px;"></div>
                    <div style="float: left;"><a onfocus="if(this.blur)this.blur()" href="/neu/Support.html" class="button6"></a></div>
                </div>
                <br style="clear:left" />
                




<!--                
                    <div style="float: left;"><img src="./images/unternavigation.jpg" alt="unternavigation" /></div>
                    <div style="float: left;"><img src="./images/navi/sub/subnavi_bg-l.jpg" alt="subnavigation" /></div>
                    <div id="subnavi_bg-rep">
                        <div style="float: left; margin-left: 10px;"><img src="./images/navi/sub/arrows.jpg" alt="Arrows" /></div><div style="float: left; margin-left:5px; margin-top: 3px;"><a href="/neu/Files.html">Files</a></div>
                        <div class="spacer_sub"></div>
                        <div style="float: left; margin-left: 10px;"><img src="./images/navi/sub/arrows.jpg" alt="Arrows" /></div><div style="float: left; margin-left:5px; margin-top: 3px;"><a target="_blank" href="/neu/phpbb3/">Forum</a></div>
                        <div class="spacer_sub"></div>
                        <div style="float: left; margin-left: 10px;"><img src="./images/navi/sub/arrows.jpg" alt="Arrows" /></div><div style="float: left; margin-left:5px; margin-top: 3px;"><a href="/neu/Ueber-Uns.html">Über uns</a></div>
                        <div class="spacer_sub"></div>
                        <div style="float: left; margin-left: 10px;"><img src="./images/navi/sub/arrows.jpg" alt="Arrows" /></div>
                        <div style="float: left; margin-left:5px; margin-top: 3px;">
                            <a href="/neu/Awards.html">Awards</a>
                        </div>
                        <div class="spacer_sub"></div>
                        <div style="float: left; margin-left: 10px;"><img src="./images/navi/sub/arrows.jpg" alt="Arrows" /></div><div style="float: left; margin-left:5px; margin-top: 3px;"><a href="/neu/agb.html">AGB</a></div>
                    </div>
                    <div style="float: left;"><img src="./images/navi/sub/subnavi_bg-l.jpg" alt="subnavi Hintergrund" /></div>
                    <br style="clear:left" />
                
-->
                



            </div>
            <div id="head_r"></div>
        </div>

        <div id="header_bild"><img src="./images/header_bild.jpg" alt="header-bild"/></div>
    
    </div>
    
    <!-- HEADER ENDE -->
    
    <!-- CONTENT -->

    <div id="content">
        
        <!-- CONTENT LEFT -->

ï»¿        <div id="content_left">
            
            <div id="preisrechner">
                
                <div class="preisrechner_head"></div>
                <div id="preisrechner_cont"></div>
                <div class="preisrechner_foot"></div>
                
                <div id="preisrechner_box-inhalt">

                    <div style="float: left; margin-left: 4px; _margin-left: 2px; padding-top: 3px; _padding-top: 8px;">
                        <div style="float: left;"><img src="./images/content/bilder/preisrechner.jpg" alt="Preisrechner" /></div>
                        <div style="float: left; margin-left: 4px; padding-top: 5px; _padding-top: 10px; _margin-left: 2px;"><a target="_blank" href="http://gameservercheck.de/anbieter_644.html"><img src="./images/content/bilder/gameservercheck.jpg" alt="Gameservercheck" /></a></div>
                        <div style="float: left; margin-left: 15px; padding-top: 10px; _margin-left: 10px;"><img class="_trans" src="./images/content/bilder/oekoicon.png" alt="OekoIcon" /></div>
                        <br style="clear: left;" />
                    </div>
                </div>
                
            </div>
            
            <div id="live_support">

                
                <div class="preisrechner_head"></div>
                <div id="live_support-cont"></div>
                <div class="preisrechner_foot"></div>
                
                <div id="live_support_box-inhalt">
                    <div style="float: left; padding-left: 20px; padding-top: 20px; _padding-top: 10px; _padding-left: 15px; _padding-bottom: 7px;" id="livesupport_txt-ie7"><img class="_trans" src="./images/content/bilder/livesupport_txt.png" alt="Live Support" /></div>
                    <div style="float: left; padding-left: 35px; padding-top: 5px; _padding-top: 10px; _padding-left: 25px;"><a target="_blank" href="/neu/ticketsys/login_page.php"><img class="_trans" src="./images/content/bilder/live_support-off.png" alt="Livesupport Offline" /></a></div>
                    <br style="clear: left;" />
                </div>
            
            </div>

            
            <div id="partner">
                <div class="preisrechner_head"></div>
                <div id="partner_cont"></div>
                <div class="preisrechner_foot"></div>
                
                <div id="partner_box-inhalt">
                    <div style="float: left; padding-left: 20px; padding-top: 20px; _padding-top: 20px; _padding-left: 15px;"><img class="_trans" src="./images/content/bilder/partner_txt.png" alt="Partner" /></div>
                    <div style="float: left; padding-left: 20px; padding-top: 19px;"><a target="_blank" href="http://sales.tritoncia.com/hosters.php?id=82799"><img class="_trans" src="./images/content/bilder/teamspeak_partner.png" alt="Teamspeak Partner" /></a></div>
                    <div class="hr_grafik"><img src="./images/content/bilder/hr_grafik.jpg" alt="hr-Grafik" /></div>
                    <div style="float: left; padding-left: 20px; padding-top: 15px;" id="partner_ingame-IE"><a target="_blank" href="http://www.ingame.de/"><img class="_trans" src="./images/content/bilder/partner_ingame-de.png" alt="Partner Ingame" /></a></div>

                    <div class="hr_grafik2"><img src="./images/content/bilder/hr_grafik.jpg" alt="hr_Grafik" /></div>
                    <div style="float: left; padding-left: 20px; padding-top: 15px;"><a target="_blank" href="http://www.bitskin.de"><img class="_trans" src="./images/content/bilder/partner_bitskin.png" alt="Partner Bitskin" /></a></div>
                    <br style="clear: left;" />
                </div>
                
            </div>
            <br /><br />
        </div>
        
        

<!-- ENDE CONTENT LEFT -->            

<!-- CONTENT MAIN -->    

        <div id="content_main">

            <div style="float: left; margin-left: 2px; _margin-left: 1px; margin-top: 5px; margin-bottom: 13px;"><h4>Maximale Leistung zu minimalen Preisen</h4></div>
            
            <br style="clear: left;" />
            
            <div style="float: left; margin-right: 13px;">
            <div class="box_klein">
                <div class="box_klein-head"></div>
                <div id="box_klein-cont"></div>
                <div class="box_klein-foot"></div>
            </div>

            <div class="box_klein-inhalt">
                <div style="float: left; width: 160px;">
                    <div style="float: left; width: 120px; height: 45px; margin-left: 20px; margin-top: -3px;"><img src="./images/content/bilder/preisschild_270.png" alt="2,70 Euro" /></div>
                    <div style="float: left; width: 104px; height: 20px; padding-top: 15px; padding-left: 28px;"><img class="_trans" src="./images/content/bilder/Gameserver_txt.png" alt="Gameserver" /></div>
                    <div style="float: left; width: 96px; height: 23px; padding-left: 5px; padding-top: 10px;"><img class="_trans" src="./images/content/bilder/preis_hit.png" alt="Preis Hit" /></div>
                    <div class="hr_angebot"><img class="_trans" src="./images/content/bilder/hr_angebot.png" alt="Trennlinie" /></div>
                    
                    
                    
                    <div style="float: left; padding-left: 30px; padding-top: 15px;" class="IEx">
                        <div style="float: left;" class="IExx"><img class="_trans" src="./images/content/bilder/arrow.png" alt="Arrow" /></div>
                        <div style="float: left; padding-left: 5px;" class="IExxx"><a href="#####">read more</a></div>

                    </div>
                    
                    <br style="clear: left;" />
                </div>
                <div style="float: left">
                    <div style="float: left; padding-left: 15px; padding-top: 20px;"><img class="_trans" src="./images/content/bilder/gameserver_paket.png" alt="Gameserver Paket" /></div>
                </div>
            </div>
            </div>
            
            <div class="box_klein">

                <div class="box_klein-head"></div>
                <div id="box_klein-cont2"></div>
                <div class="box_klein-foot"></div>
            </div>
            <div class="box_klein-inhalt">
                <div style="float: left; width: 160px;">
                    <div style="float: left; width: 120px; height: 45px; margin-left: 20px; margin-top: -4px;"><img class="_trans" src="./images/content/bilder/preisschild_199.png" alt="1,99 Euro" /></div>
                    <div style="float: left; width: 104px; height: 20px; padding-top: 15px; _padding-top: 12px; padding-left: 28px;"><img class="_trans" src="./images/content/bilder/Voiceserver_txt.png" alt="Voiceserver" /></div>
                    <div style="float: left; width: 96px; height: 23px; padding-left: 5px; padding-top: 10px;"><img class="_trans" src="./images/content/bilder/preis_hit.png" alt="Preis Hit" /></div>

                    <div class="hr_angebot"><img class="_trans" src="./images/content/bilder/hr_angebot.png" alt="Trennlinie" /></div>

                    <div style="float: left; padding-left: 30px; padding-top: 15px;" class="IEx">
                        <div style="float: left;" class="IExx"><img class="_trans" src="./images/content/bilder/arrow.png" alt="Arrow" /></div>
                        <div style="float: left; padding-left: 5px;" class="IExxx"><a href="#####">read more</a></div>
                    </div>
                    
                    <br style="clear: left;" />
                </div>
                <div style="float: left">

                    <div style="float: left; padding-left: 15px; padding-top: 20px;"><img class="_trans" src="./images/content/bilder/voiceserver_paket.png" alt="Voiceserver Paket" /></div>
                </div>
            </div>
            
            <br style="clear: left;" />
            
            <div style="float: left; margin-top: 12px;">
                <div class="box_breit">
                    <div class="box_breit-head"></div>
                    <div id="box_breit-cont1"></div>
                    <div class="box_breit-foot"></div>

                </div>
                <div class="box_breit-inhalt">
                    <div style="float: left; width: 315px;">
                        <div style="padding-top: 30px; padding-left: 30px;"><img class="_trans" src="./images/content/bilder/unser_testserver-txt.png" alt="Unser Testserver" /></div>
                        <div style="padding-left: 30px;" class="text"><h4 style="color: #579ECF">Counter-Strike:Source</h4></div>
                        <div style="padding-left: 30px; margin-top: -15px;" class="text">
                        
                            <b>Name:</b><br />
                            <br />

                            <b>Adresse:</b><br />
                            <img class="_trans" src="./images/content/bilder/arrow.png" alt="Arrow" />&nbsp;<a href="hlsw://194.29.237.50:27040">194.29.237.50:27040</a><br />
                            <b>Map:</b> <br />
                            <b>Players:</b> /<br />
                        
                        </div>

                        <div style="float: left; padding-left: 150px; margin-top: -80px;"><img src="./images/content/bilder/CSS-Monitor.png" /></div>
                    </div>
                    
<!-- NEUE SERVER IP -->                    
                    <div style="float: left; width: 299px; padding-left: 10px; _padding-left: 0px; _margin-left: -15px;">
                        <div style="padding-top: 40px;">&nbsp;</div>
                        <div style="" class="text"><h4 style="color: #579ECF">Counter-Strike 1.6</h4></div>
                        <div style="margin-top: -15px;" class="text">
                        
                            <b>Name:</b><br />

                            <br />
                            <b>Adresse:</b><br />
                            <img class="_trans" src="./images/content/bilder/arrow.png" alt="Arrow" />&nbsp;<a href="hlsw://194.29.237.50:27040">194.29.237.50:27040</a><br />
                            <b>Map:</b> <br />
                            <b>Players:</b> /<br />

                        </div>
                        <div style="float: left; margin-top: -80px; padding-left: 110px; _margin-top: -83px;"><img src="./images/content/bilder/1.6-Monitor.png" /></div>
                    </div>
                </div>

(...)

stb_87 · 20.01.2009

AW: Frage: arbeite ich so korrekt ?

Fast gut, aber auch nur fast.

Die Navigation würde ich mit listen elementen erstellen.
Das CSS würde ich auslagern in eine externe Datei.

Kann dir dazu dieses Tut hier empfehlen:

AngleShiva · 21.01.2009

AW: Frage: arbeite ich so korrekt ?

stb_87 schrieb:
Fast gut, aber auch nur fast.

Die Navigation würde ich mit listen elementen erstellen.
Das CSS würde ich auslagern in eine externe Datei.

Kann dir dazu dieses Tut hier empfehlen:

Das ist aber super link!

Lg! AngleShiva!

sokie · 21.01.2009

AW: Frage: arbeite ich so korrekt ?

Frage: arbeite ich so korrekt ?

wenn es dir allein darum geht, dass deine Seiten in Browsern dargestellt werden, ist das vielleicht ok.
wenn es aber um html und css geht und die Konzepte der beiden, dann taugt das so nicht besonders.
eine besondere eigenschft von css Formatierungen liegt darin, dass es möglich ist inhalt und Design klar voneinander zu trennen. Als Ergebnis erhält man einen gut strukturierten, leicht lesbaren Code.
eine Andere ist die, dass man ohne Eingriffe in den html code das Aussehen der Seite verändern kann.
mit inlinestyles an fast jedem Element ist bei dem Beispiel oben dieses Konzept klar verworfen, und css verfehltseinen Zweck.

Ein weiterer Punkt ist, dass in dem Beispielcode eventHandler verwendet werden, die zum einen ganz unnötig sind, und zum anderen bei deaktiviertem Javascript nicht funktionieren.
CSS kennt Pseudoklassen wie zB :hover und :focus
sinnvoll wäre zB dem bereich #quicknavi eine entsprechende css formatierung zu geben:

Code:

#quicknavi div{
  float: left;
}

(wie schon ausgeführt, wäre es allerdings sinnvoller, die Linkliste gleich als liste zu definieren.)
Dinge wie:

Code:

<div style="float: left; background: #32363C; width: 1px; height: 45px;"></div>

gehen eigentlich gar nicht.
wenn das a element rechts eine Rahmenlinie von 1px solid #32363C haben soll, notiert man das besser im CSS für das element selbst (für alle a elemente im Bereich):

Code:

#quicknavi a{
  display: block;
  border-right: 1px solid #32363C;
  height: 45px;
}

das wichtigste fehlt den Links in dem Bereich allerdings noch,und das ist ein beschreibender LinkText. sonst ist da zB bei textbrowsern nichts auf das man klicken könnte und die Seite wäre unbenutzbar.
usw...
eine reihe von Seiten zum Erlernen von HTML/CSS gibts ja in den Stickies.