Hilfe beim Layout / Design
4 verfasser
Seite 1 von 1
Hilfe beim Layout / Design
Ich breuchte mal Hilfe für das nägste AnimeChen.de Disein 2018. Ich habe da was einworfen bin mir aber noch nicht so gans in klaren was noch fehlen könnte um es Perfekt zu machen.
- Link http://www.animechen.de/HP-BETA/
Wer noch Tips hat dann gerne herdamit
Dake in voraus.
- Link http://www.animechen.de/HP-BETA/
Wer noch Tips hat dann gerne herdamit
Dake in voraus.
Re: Hilfe beim Layout / Design
hm vielleicht die navigations header noch ein wenig gestalten, damit diese sich von den links darunter abheben^^
Re: Hilfe beim Layout / Design
ja Müste ich ausprobiren da dises Desein in eine CMS einwander da muss ich scheuen wie ich es ansteuen kann
EDIT:
Wer gut Disein wie dese was mir vorschebt Programiren kann, kann mich geren per mail oder PM anscheiben.
EDIT:
Wer gut Disein wie dese was mir vorschebt Programiren kann, kann mich geren per mail oder PM anscheiben.
Re: Hilfe beim Layout / Design
Kann mir/Ihr mir sagen ob der Untere Teile der Seite abgeschitten ist. Spich das er Hintergund weg ist? und wo ich da den Fehler habe.
hier die Css Hatei
hier die Css Hatei
- Code:
@import url('https://fonts.googleapis.com/css?family=Alfa+Slab+One|Architects+Daughter|Special+Elite');
body{color:#000000;background:#000000 url('images/header.png') no-repeat left top;font-family:'Alfa Slab One',cursive;}
.menu-sibling{vertical-align:middle;font-style:italic;font-weight:bold;border:1px solid #000000;padding-left:4px;padding-right:4px;padding-top:1px;padding-bottom:1px;background-color:#6699FF}
.menu-current,.menu-first{border-style:solid;border-width:1px;padding-left:4px;padding-right:4px;padding-top:1px;padding-bottom:1px;background-color:#99CCFF}
.menExT{border:2px dashed #000000;padding-left:4px;padding-right:4px;padding-top:1px;padding-bottom:1px;font-family:'Special Elite',cursive;}
.copyText{position:absolute;width:1213px;height:27px;z-index:2;left:14px;top:9px;font-size:8pt;color:#FFFFFF;font-family:'Architects Daughter';}
.men{position:absolute;width:1149px;height:40px;z-index:3;left:38px;top:559px;font-family:'Special Elite',cursive;}
.oben{position:absolute;width:1236px;z-index:2;left:-1px;top:-1px;height:992px;background-image:url('images/layer_oben.png');background-repeat:no-repeat;}
.unten{position:absolute;width:1237px;height:45px;z-index:1;left:-3px;top:3708px;background-image:url('images/layer_unten.png');background-repeat:no-repeat;}
.mitte{position:absolute;width:1237px;z-index:3;left:-3px;top:991px;height:2717px;background-image:url('images/layer_mitte.png');background-repeat:repeat-y;}
.inhalt{position:absolute;width:824px;height:1242px;z-index:1;left:359px;top:-381px;}
.meb{position:absolute;width:282px;height:1323px;z-index:2;left:49px;top:-379px;}
Re: Hilfe beim Layout / Design
So wie der Fehler aussieht, würde ich tatsächlich nicht davon ausgehen, dass dies Ursprung im CSS-Code hat. Viel mehr schaut es für mich nach folgendem, recht simplen Fehler aus:
Das Bild ist zu kurz. Es passt sich automatisch der Bildauflösung des Geräts/Forum an. Doch dadurch, dass es ehr breit als lang ist, wird nicht der ganze Hintergrund bedeckt. Dadurch entsteht dieser Schnitt im Hintergrund.
Ich würde Dir einen Hintergrund empfehlen, der sich einfach irgendwann wiederholt, ähnlich wie hier. Sieht zwar jetzt vielleicht nicht ganz so Bombe aus, doch anstatt der plötzlichen Leere, schon besser.
Oder aber, Du nimmst/erstellst einen unendlichen Hintergrund.
Der CSS müsste soweit ok sein, mir ist beim Drüberfliegen nichts aufgefallen.
Sollte das Problem durch die zwei Beispiele oben nicht gedeckt werden, schaue ich ihn mir aber gerne nochmal an.
Liebe Grüße
Das Bild ist zu kurz. Es passt sich automatisch der Bildauflösung des Geräts/Forum an. Doch dadurch, dass es ehr breit als lang ist, wird nicht der ganze Hintergrund bedeckt. Dadurch entsteht dieser Schnitt im Hintergrund.
Ich würde Dir einen Hintergrund empfehlen, der sich einfach irgendwann wiederholt, ähnlich wie hier. Sieht zwar jetzt vielleicht nicht ganz so Bombe aus, doch anstatt der plötzlichen Leere, schon besser.
Oder aber, Du nimmst/erstellst einen unendlichen Hintergrund.
Der CSS müsste soweit ok sein, mir ist beim Drüberfliegen nichts aufgefallen.
Sollte das Problem durch die zwei Beispiele oben nicht gedeckt werden, schaue ich ihn mir aber gerne nochmal an.
Liebe Grüße
Re: Hilfe beim Layout / Design
@Neovine: Ich habe doch mehr oder weniger in der CSS definirt dass er den Hindergung in der y Richtung widerhollen soll das shet in .mitte dirn. Ich hede eher die werbung in verdach da ich ihr keine Feste größe zugegeben habe.
Hier das Mitten Bild
Hier das Mitten Bild
Re: Hilfe beim Layout / Design
Huhu :)
Ich melde mich dann auch mal zu Wort ^^
Zu dem CSS kann ich dir allerdings absolut nicht weiter helfen, da teste ich mich immer nur durch ohne zu wissen was ich eigentlich mache ^^"
Aber zu deiner Ursprünglichen Frage bezüglich des Designs helfe ich dir gerne.
Zum Layout:
Also zu erst einmal fällt mir bei dem Layout auf, dass das Logo farblich absolut nicht zum Hintergrund und den Layout Farben passt.
Es gibt eigentlich nur zwei Möglichkeiten in dem Fall; die eine ist das Logo dem Layout anzupassen, die andere das Layout dem Logo anzupassen. Große Firmen machen meist letzteres. So ist die Seite der deutschen Post Gelb und Schwarz oder die Seite der Telekom Pink und Weiß,...
In deinem Fall würde ich aber eher zur ersten Variante raten. Das Anime Chen Logo ist sehr verspielt und bunt mit Farbverläufen und dann in Lila und einem ins violett gehende Blau gehalten. Der Hintergrund mit dem Himmel ist in einem Azurblau, es geht vom Farbton mehr ins Grünliche als ins Violette. Vor allem am Horizont merkt man das.
Wenn das Logo, so wie beim momentanen Layout nur klein in der Ecke hervorschaut, ist es, finde ich, in Ordnung aber wenn es wie hier einen so großen Teil der Aufmerksamkeit auf sich zieht, dann beißen sich die Farben doch sehr.
Ich weiß nicht ob du eine PSD oder Vektor Datei des Logos hast, wenn ja würde ich empfehlen mal mit der Pipette die Farben des Hintergrundes zu kopieren und sie im Logo einzufügen. In meinem Beispiel unten habe ich die Möglichkeit nicht so gehabt, und deshalb einfach mit der Farbalance in PS herum gespielt.
Außerdem würde ich empfehlen das ganze in die Mitte zu setzen. Bei größeren Bildschirmen ist da nun so viel ungebrauchter Platz an der rechten Seite und Obendrein bricht der Lichtstrahl einfach ab. Mit dem zentrierten Layout könnte der Lichtstrahl sogar besser wirken. Bei dem würde ich dir außerdem empfehlen ihn Outzufaden oder zu Verblassen... mir fällt kein besserer Begriff ein xD
Ich versuch es mal als Bilder darzustellen:
Dadurch verschwindet es im Layout sanft und sieht gewollt aus.
Schließlich noch die Navi. Hier würde ich dir auf jeden Fall nahe legen eine Liebevollere Schrift zu wählen und sie nicht in farbigen Kästen zu legen. (Wobei ich glaube, dass das ja ohnehin nur vorübergehend ist...)
Vor allem würde ich aber versuchen, auf einen Zeilenumbruch zu verzichten. Dann überlege dir lieber ob du eine Dropdown-Navi machen willst/kannst oder ob du Punkte aus der Navi entfernst. Typisch wäre es z.B. Impressum und Kontakt am Seitenfuß zu platzieren.
Hier mal mein
Ich hoffe es hilft dir zumindest ein bisschen. Leider kann ich bei der Umsetzung in der Programmierung gar nicht helfen, aber wenn sonst was ist sag bescheid :)
LG Eiki
Ich melde mich dann auch mal zu Wort ^^
Zu dem CSS kann ich dir allerdings absolut nicht weiter helfen, da teste ich mich immer nur durch ohne zu wissen was ich eigentlich mache ^^"
Aber zu deiner Ursprünglichen Frage bezüglich des Designs helfe ich dir gerne.
Zum Layout:
Also zu erst einmal fällt mir bei dem Layout auf, dass das Logo farblich absolut nicht zum Hintergrund und den Layout Farben passt.
Es gibt eigentlich nur zwei Möglichkeiten in dem Fall; die eine ist das Logo dem Layout anzupassen, die andere das Layout dem Logo anzupassen. Große Firmen machen meist letzteres. So ist die Seite der deutschen Post Gelb und Schwarz oder die Seite der Telekom Pink und Weiß,...
In deinem Fall würde ich aber eher zur ersten Variante raten. Das Anime Chen Logo ist sehr verspielt und bunt mit Farbverläufen und dann in Lila und einem ins violett gehende Blau gehalten. Der Hintergrund mit dem Himmel ist in einem Azurblau, es geht vom Farbton mehr ins Grünliche als ins Violette. Vor allem am Horizont merkt man das.
Wenn das Logo, so wie beim momentanen Layout nur klein in der Ecke hervorschaut, ist es, finde ich, in Ordnung aber wenn es wie hier einen so großen Teil der Aufmerksamkeit auf sich zieht, dann beißen sich die Farben doch sehr.
Ich weiß nicht ob du eine PSD oder Vektor Datei des Logos hast, wenn ja würde ich empfehlen mal mit der Pipette die Farben des Hintergrundes zu kopieren und sie im Logo einzufügen. In meinem Beispiel unten habe ich die Möglichkeit nicht so gehabt, und deshalb einfach mit der Farbalance in PS herum gespielt.
Außerdem würde ich empfehlen das ganze in die Mitte zu setzen. Bei größeren Bildschirmen ist da nun so viel ungebrauchter Platz an der rechten Seite und Obendrein bricht der Lichtstrahl einfach ab. Mit dem zentrierten Layout könnte der Lichtstrahl sogar besser wirken. Bei dem würde ich dir außerdem empfehlen ihn Outzufaden oder zu Verblassen... mir fällt kein besserer Begriff ein xD
Ich versuch es mal als Bilder darzustellen:
-->
Dadurch verschwindet es im Layout sanft und sieht gewollt aus.
Schließlich noch die Navi. Hier würde ich dir auf jeden Fall nahe legen eine Liebevollere Schrift zu wählen und sie nicht in farbigen Kästen zu legen. (Wobei ich glaube, dass das ja ohnehin nur vorübergehend ist...)
Vor allem würde ich aber versuchen, auf einen Zeilenumbruch zu verzichten. Dann überlege dir lieber ob du eine Dropdown-Navi machen willst/kannst oder ob du Punkte aus der Navi entfernst. Typisch wäre es z.B. Impressum und Kontakt am Seitenfuß zu platzieren.
Hier mal mein
- Beispiel:
Ich hoffe es hilft dir zumindest ein bisschen. Leider kann ich bei der Umsetzung in der Programmierung gar nicht helfen, aber wenn sonst was ist sag bescheid :)
LG Eiki
Re: Hilfe beim Layout / Design
Ich Danke die @ADO-finder ich kann es versuch alles eine wenig mitig zu gestalen. Das Ganze ist eigenlich ein Großes blie geteiel und in CSS wider zusammensetz darum ist es so and die Seite Gequetscht da ich es besser zusammen bauen kann. Danke auch für das Bild ich versuce se mal umzusetzen
Re: Hilfe beim Layout / Design
Ich geb es auf. Wer Hier sich gut in CSS und Web Layer auskennt kann sich bei mir melden.
Ähnliche Themen
» Hilfe gesucht beim Aufbau von Online-Zauberschule
» Hilfe gesucht für Design (CSS)
» Forumieren - Pokémon Layout
» Serverumzug PLUS neues Design
» Neues Design für Aslan´s Wish!
» Hilfe gesucht für Design (CSS)
» Forumieren - Pokémon Layout
» Serverumzug PLUS neues Design
» Neues Design für Aslan´s Wish!
Seite 1 von 1
Befugnisse in diesem Forum
Sie können in diesem Forum nicht antworten