Css Layout

[deethree]

Hallo, ich weiß nicht ob ich das hier posten darf wenn nicht bitte löschen. Danke !

Also da ich mit dem Tabellen im Layout auf der Hauptseite nicht zufrieden war habe ich mal versucht es umzubauen. Verwendete Software: Dreamweaver CS 2. Auflösung 1280x 1240. Browser IE 7.0.57

Die einzigen Dateien die geändert worden sind, waren die index.html im Template Ordner sowie die stylesheet.css. Es geht hier nur um das Layout von der Startseite. Alle anderen Css- Anweisungen sind entfernt worden (kommen aber noch).

Bitte um Kritik und ggf. Vorschläge. Danke.

Index.html

{config_load file="$language/lang_$language.conf" section="index"}

<div id="main_container">

	<div id="logo">

    <img src="{$tpl_path}img/top_logo.jpg" alt="{$store_name}" />

    </div>


    <div id="search">


    </div>


    <div id="navtrail">

    	<!--Hier darf nichts eingefügt werden-->

    	<div id="navtrail_left">

    	{$navtrail}   

    	</div>


        <div id="navtrail_right">

    	{if $account}{php} if (isset($_SESSION['customer_id'])) { {/php}<a href="{$logoff}">{#link_logoff#}</a> | {php} } {/php}{/if}{if $account}<a href="{$account}">        {#link_account#}</a> | {/if}<a href="{$cart}">{#link_cart#}</a> | <a href="{$checkout}">{#link_checkout#}</a>  

    	</div>        

    </div>

<div id="separater">

im Separater kann was stehen, muss aber nicht.

</div>    


	<div id="navigation_boxes">


    	<div id="navbox_left">

        {$box_CATEGORIES}

        {$box_ADD_QUICKIE}

        {$box_CONTENT}

        {$box_INFORMATION}

        {$box_LAST_VIEWED}

        {$box_REVIEWS}

        {$box_SEARCH}

        {$box_SPECIALS}

        {$box_WHATSNEW}

        </div>


    	<div id="navbox_right">

        {$box_CART}

        {$box_LOGIN}

        {$box_ADMIN}

        {$box_NEWSLETTER}

        {$box_BESTSELLERS}

        {$box_INFOBOX}

        {$box_CURRENCIES}

        {$box_LANGUAGES}

        {$box_MANUFACTURERS_INFO}

        {$box_MANUFACTURERS}

        </div>

    </div>



<div id="main_content">

{$main_content}

</div>     

</div>


<div id="footer">

{$store_name}

</div>

[/HTML]

stylesheet.css

[HTML]
/*
Tabellenloses CSS-Template für xt:commerce 3.04 Sp2.
erstellt von deethree am 11.06.2008

Dokumentaion:
Ein zentraler Div Container für den gesamten Inhalt.
*/
body {background-color:#FFBF00;} <!-- Hintergund für die HTML Seite -->

#main_container {width:980px;height:1000px;margin:0px auto;background-color:#00dFAA;}
#logo {float:left;width:490px;height:120px;background-color:#FFAD00;}
#search {float:right;width:490px;height:120px;background-color:#F00000;}

#navtrail {margin-top:120px;} <!-- dient nur als Element zur Ausrichtung -->
#navtrail_left {float:left;width:auto;height:20px;background-color:#ADFAD0;} <!-- width kann bearbeitet werden -->
#navtrail_right {float:right;width:auto;height:20px;background-color:#DFFAFD;}

#separater {text-align:center;width:100%;background-color:#D45F55;} <!-- dient als Element zur Ausrichtung, kann aber auch bearbeitet werden -->

#navigation_boxes {background-color:#FF9F55} <!-- Boxen mit den einzelnen $boxen -->
#navbox_left {float:left;width:180px;height:auto;background-color:#FF3F00;}
#navbox_right {float:right;width:180px;height:auto;background-color:#AF0AD0;}

#main_content {width:620px;height:auto;text-align:justify;background-color:#FFFFAA;} <!-- Hauptfenster zum Anzeigen des main_content -->
#footer {margin:0px auto;width:980px;background-color:#AAFF00;text-align:center;font-family:Arial, Helvetica, sans-serif;font-size:9px;}

.copyright {text-align:center;font-family:Arial, Helvetica, sans-serif;font-size:9px;}


[/HTML]

[John Steed]

Vier Tipps zur CSS-Datei:

1) Mach die HTML-Kommentare <!-- --> da raus! In CSS solltest Du auch /* in CSS kommentieren */

2) Benutze Kurzbefehle! Anstelle von background-color:#00dFAA; kannst Du auch einfach background:#00dFAA; schreiben!

3) Schreibe jede Anweisung eingerückt in eine eigene Zeile, das macht es übersichtlicher!

#main_container {

  width:980px;

  height:1000px;

  margin:0px auto;

  background:#00dFAA;

}

4) Redundanzen vermeiden! Anstelle mehrfach die Font-Family zu deklarieren, schreib sie einmal für alle Selektoren auf, wo Du sie brauchst

#footer, .copyright {

  font-family:Arial, Helvetica, sans-serif;

}

...oder einfach stumpf für alle Elemente

* {

  font-family:Arial, Helvetica, sans-serif;

}

Das macht Dreamweaver alles nicht von selbst, da musst Du von Hand an die CSS-Datei!

Ansonsten sehr übersichtlich - ich bezweifle aber mal kühn, dass das in dem Umfang ausreicht Kann man sich irgendwo ein Ergebnis angucken? Ich hab' zwar eine gute Vorstellungskraft, aber so der pure Code ist doch etwas mühsam...

Cheers,

IaN