Design umsetzten?!

  • Hallo,
    ich habe in den letzten Tagen ein neues Design für meine Homepage "entwickelt" (natürlich ist es nicht ganz fertig, da man ja nicht alles bei Photoshop mit einbaun kann^^).


    Hier seht ihr meinen Entwurf:


    [Blockierte Grafik: http://s3.directupload.net/images/110304/temp/9tduu96k.jpg]


    Ich wollte nun schonmal ein paar Tipps haben von euch, bevor ich mich selbst ran mache und das Ganze umsetze^^
    Wie ich das nun alles am Besten mit den einzelnen Div's und Float's mache ^^
    Der Doctype sollte am besten Strict sein ;)


    Achso, wichtig ist vllt noch, dass das ganze auf einem CMS läuft, also müssen dann am Ende halt noch ein paar "Funktionen" davon mit rein.


    Liebe Grüße

  • Naja direkt Fragen habe ich im Moment eigentlich noch nicht :D
    Naja da werde ich mich morgen mal ransetzten und in bisl was zusammentippen ;)
    Wenn ich der Meinung bin, dass es fertig ist, werde ich es hier mal posten und ihr könnt ja dann sagen, was ich falsch gemacht habe ^^


    Lg

  • Kleiner Tipp bevor du anfängst:


    Für jede Box, wo spätet Text oder sonst was drinstehen soll, irgendeinen Blindtext reinmachen, dann kann man sich das ganze erstens besser vorstellen und zweitens vermeidet man oft unnötige Elemente, die man auch über Elemente, in denen Inhalt drinsteht realisieren könnte :)


    Gruß
    Laura

  • Jetzt habe ich schon das erste Problem ^^


    Die Navigation von Websitebaker wird so eingefügt:


    Code
    <ul>
    <li><span class="menu_current"><a href="http://nadidz.square7.de" target="_top"  class="menu_current"> Home </a></span>
    </li>
    <li><span class="menu_default"><a href="http://nadidz.square7.de/pages/test1.php" target="_top"  class="menu_default"> Test1 </a></span>
    </li>
    
    
    
    
    </ul>


    Wie man auf meiner Grafik erkennen kann, soll nun jeder Menüpunkt eine einzelne Grafik bekommen, also habe ich mir gedacht, dass ich jedem <li> eine Hintergrundgrafik zuordnen muss:


    Code
    #menu li {
        background:url(images/navi.png) no-repeat;
        display:inline;
        list-style-type:none;
        padding-left:10px;
    }


    Aber das funktioniert nicht (wäre ja auch zu schön gewesen ^^)
    Wie soll ich das jetzt umsetzen?


    So sieht gerade der ganze Code vom Menü aus:



    Und hier meine Page, wo ich teste:
    <!-- m --><a class="postlink" href="http://nadidz.square7.de/">http://nadidz.square7.de/</a><!-- m -->


    lg

  • Gib mal den Links in den li ein display: block; und floate sie entsprechend. Beim display: inline; wird nur der Platz verwendet, den die Schrift benötigt. Wenn du für die Links ein display: block; hast und eine feste Höhe und Breite dann haut das auch mit dem Hintergrundbild hin :)


    Gruß
    Laura


    PS: Lass für den Anfang das mit dem class="current" und so raus, das kannst du später relativ einfach noch ergänzen, dann blickst du jetzt am Anfang besser durch.

  • Juhu, es hat geklappt^^


    Habe das jetzt so gemacht, wie du es gesagt hast ;)


    Code
    #menu li {
        float:right;
        position:relative;
        display:block;
        height:217px;
        width:113px;
        background:url(images/navi.png) no-repeat;
        list-style-type:none;
        padding-left:10px;
    }


    Jetzt habe ich nur das Problem, dass die Schrift ganz oben hängt^^ Jetzt wollte ich die mit padding runterholen, aber das geht ja irgendwie bei Links nicht (aus meiner Erfahrung :D)


    PS: das mit dem current kann ich nicht rausnehmen, weil das der Part ist, der vom CMS selbst eingefügt wird ;) Sicherlich kann man das irgendwo ändern, aber im Moment stört es mich nicht so sehr ^^


    Lg

  • Wenn du nur eine Zeile jeweils hast eignet sich

    Code
    line-height: 217px;


    Line-height definiert die Zeilenhöhe und zentriert den Text vertikal in der Mitte der Zeile, wodurch bei nur einer Zeile der Text vertikal zentriert wird.

  • Hey, das hat funktioniert. Was es alles für Tags und so gibt, die ich noch nicht kenne, dass ist echt bewundernswert ^^
    Nur irgendwie habe ich das Problem, dass meine Navigation falsch angeordnet wird. Der Quelltext, welcher wieder vom CMS eingefügt wird, ist richtig rum, aber das was als erstes stehen soll, wird als letztes angezeigt?!


    Habt ihr eine Idee, woran das liegt?


    Lg

  • Hey,
    tut mir leid, dass ich mich erst jetzt wieder melde, aber in der Woche habe ich nur wenig Zeit wegen Schule, Fahrschule und Arbeit ^^


    Hier der Code zum Menü:



    Lg

  • Naja.. das ist nun ma quasi standard bei wenn man Rechts floatet^^'
    Wir sagen den Elementen ja, dass sie sich nach Rechts legen sollen und nächster Inhalt links von ihm stehen soll.


    Spontaner einfall:
    li's links floaten lassen und der ul eine Feste Breite geben und über das ul positionieren^^

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!