Tutorial HTML, CSS u. PHP - Forum

von **Nadidz** » Freitag 4. März 2011, 12:33

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:

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

von **Sarkkan** » Freitag 4. März 2011, 18:50

Joa, gefällt mir^^

Naja.. zu dem Doctype.. da nimmst du am besten den HTML5er <!DOCTYPE html>. (Ja, dass war er)

Wo genau hast du den da Fragen zu den Div's und Floats?

von **Nadidz** » Samstag 5. März 2011, 19:12

Naja direkt Fragen habe ich im Moment eigentlich noch nicht

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

von **lauras** » Samstag 5. März 2011, 19:40

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

von **Nadidz** » Samstag 5. März 2011, 20:48

Hey,
danke für den Tipp ;)

von **Nadidz** » Sonntag 6. März 2011, 13:31

Jetzt habe ich schon das erste Problem ^^

Die Navigation von Websitebaker wird so eingefügt:

Code: Alles auswählen: <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: Alles auswählen: #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:

Code: Alles auswählen: #menu { float:right; position:relative; width:113px; height:217px; } #menu li { background:url(images/navi.png) no-repeat; display:inline; list-style-type:none; padding-left:10px; } #menu a { font-size:16px; font-family:arial; color:#FFFFFF; text-decoration:none; }

Und hier meine Page, wo ich teste:
http://nadidz.square7.de/

lg

von **lauras** » Sonntag 6. März 2011, 14:35

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.

von **Nadidz** » Sonntag 6. März 2011, 16:08

Juhu, es hat geklappt^^

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

Code: Alles auswählen: #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

)

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

von **lauras** » Sonntag 6. März 2011, 16:32

Wenn du nur eine Zeile jeweils hast eignet sich

Code: Alles auswählen: 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.

von **Nadidz** » Freitag 11. März 2011, 12:10

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

von **lauras** » Freitag 11. März 2011, 12:17

Müsste man den Code sehen, denke es könnte sein, dass irgendwo was falsch gefloatet ist :/

von **Nadidz** » Sonntag 20. März 2011, 14:48

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ü:

Code: Alles auswählen: #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; line-height:400px; } #menu a { font-size:16px; font-family:arial; color:#FFFFFF; text-decoration:none; }

Lg

von **Sarkkan** » Sonntag 20. März 2011, 16:55

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^^

Tutorial HTML, CSS u. PHP - Forum

Design umsetzten?!

Design umsetzten?!

Re: Design umsetzten?!

Re: Design umsetzten?!

Re: Design umsetzten?!

Re: Design umsetzten?!

Re: Design umsetzten?!

Re: Design umsetzten?!

Re: Design umsetzten?!

Re: Design umsetzten?!

Re: Design umsetzten?!

Re: Design umsetzten?!

Re: Design umsetzten?!

Re: Design umsetzten?!

Wer ist online?