Vorheriges Thema anzeigen :: Nächstes Thema anzeigen |
Autor |
Nachricht |
nanos Mitglied
Angemeldet: 04.06.2004 Beiträge: 1752
|
Verfasst am: 25.03.2008, 13:36 Titel:
Design valide slicen (CSS) |
|
|
|
|
Hallo zusammen,
ich habe ehrlich gesagt bislang nie einen sehr großen Wert auf W3C/CSS-konforme Layouts gelegt. Da man jedoch vor den Schlagwörtern Web 2.0 und Barrierefreiheit einfach nicht mehr davonlaufen kann, hab ich mich mal dazu entschlossen, mein nächstes Design möglichst valide zu gestalten.
Mein Problem beginnt jedoch schon beim Umsetzen des Layouts in div-Layer. Ich weiß einfach nicht wie ich dieses Design
http://files.marcelsauer.com/wipdesign.jpg schneiden und dazu den passenden Code erstellen soll, damit es sowohl vertikal (Seite soll zentriert sein und sich nach links und rechts erweitern) als auch horizontal (wenn der Inhalt länger wird) expandiert.
Nachdem ich jetzt schon 3 Tage mit Hilfe von http://www.andreas-kalt.de/webdesign/tutorials/css-layout-erstellen daran gesessen habe, geb ich mich geschlagen und brauche eure Hilfe
Es geht mir wirklich nur darum, wie ich es hinbekomme, dass sich das Design in die Länge und in die Breite erweitert.
Ich bedanke mich schon mal im Voraus für eure Mühen. |
|
Nach oben |
|
|
deLiTe. Mitglied
Angemeldet: 16.09.2006 Beiträge: 504 Wohnort: Freiburg Interessen: Eye-Candy
|
Verfasst am: 25.03.2008, 16:20 Titel:
|
|
|
|
|
Wann/Wo genau soll sich die Seite denn erweitern?
Soll dieser mittlere Contentbereich bleiben wie er ist (Zentrierung, Breite) und nur bei unterschiedlichen Fenstergrößen der Hintergrund mitgehen. Wenn du das so willst, dass quasi alles in alle Richtungen expandiert (Bildschirmfüllend), wirst du um ein paar kleine Designänderungen nicht herum kommen. |
|
Nach oben |
|
|
Impi Mitglied
Angemeldet: 06.05.2006 Beiträge: 530
|
Verfasst am: 25.03.2008, 16:44 Titel:
|
|
|
|
|
deLiTe. hat folgendes geschrieben: | Wann/Wo genau soll sich die Seite denn erweitern?
Soll dieser mittlere Contentbereich bleiben wie er ist (Zentrierung, Breite) und nur bei unterschiedlichen Fenstergrößen der Hintergrund mitgehen. Wenn du das so willst, dass quasi alles in alle Richtungen expandiert (Bildschirmfüllend), wirst du um ein paar kleine Designänderungen nicht herum kommen. |
Achja? Ich sage, es ist auch mit dem jetzigen Layout möglich.
Nanos: Falls du Hilfe bei der Umsetzung brauchst, melde dich mal per ICQ bei mir. (25110268) |
|
Nach oben |
|
|
ShortY Mitglied
Angemeldet: 04.06.2004 Beiträge: 556 Wohnort: Herdorf Interessen: Glaube, MTB, klettern, Musik(hören und machen), Computer
|
Verfasst am: 25.03.2008, 16:45 Titel:
|
|
|
|
|
ich weiß ja nich, wie der aktuelle Stand ist, aber ich denke ich hab ihm eben schon via ICQ helfen können... |
|
Nach oben |
|
|
deLiTe. Mitglied
Angemeldet: 16.09.2006 Beiträge: 504 Wohnort: Freiburg Interessen: Eye-Candy
|
Verfasst am: 25.03.2008, 19:17 Titel:
|
|
|
|
|
Impi hat folgendes geschrieben: | Achja? Ich sage, es ist auch mit dem jetzigen Layout möglich. |
Will ich sehn |
|
Nach oben |
|
|
Age Mitglied
Angemeldet: 04.06.2004 Beiträge: 161 Wohnort: Wien
|
Verfasst am: 26.03.2008, 00:32 Titel:
|
|
|
|
|
deLiTe. hat folgendes geschrieben: | Impi hat folgendes geschrieben: | Achja? Ich sage, es ist auch mit dem jetzigen Layout möglich. |
Will ich sehn |
Hier: http://www.next-level-media.at/test/ ... hab das mal schnell umgesetzt.
Im Firefox auf 1440x900+ ganz gut, allerdings für geringere Auflösungen werden dann die seitlichen Schatten ein Problem, da sie sehr groß sind! ....
Age[/url] |
|
Nach oben |
|
|
deLiTe. Mitglied
Angemeldet: 16.09.2006 Beiträge: 504 Wohnort: Freiburg Interessen: Eye-Candy
|
Verfasst am: 26.03.2008, 01:20 Titel:
|
|
|
|
|
Age hat folgendes geschrieben: | Im Firefox auf 1440x900+ ganz gut, allerdings für geringere Auflösungen werden dann die seitlichen Schatten ein Problem, da sie sehr groß sind! .... |
Eben genau das mein ich ja...
Und hier
Und kommt mir jetzt nicht mit transparenten PNGs, davon kann ich grad ein Liedchen singen, nicht wahr bl:nd? |
|
Nach oben |
|
|
bl:nd Moderator
Angemeldet: 04.06.2004 Beiträge: 3499
|
Verfasst am: 26.03.2008, 01:34 Titel:
|
|
|
|
|
Ja, dann sing mal dein Liedchen, anstatt hier einen auf dicke Hose zu machen (wenn auch berechtigt)! |
|
Nach oben |
|
|
nanos Mitglied
Angemeldet: 04.06.2004 Beiträge: 1752
|
Verfasst am: 26.03.2008, 11:08 Titel:
|
|
|
|
|
Also Age's Ergebnis deckt sich eigentlich perfekt mit dem Wunschresultat. Danke erstmal für die Arbeit.
ShortY konnte mir allerdings auch schon gut weiterhelfen. Dort stehe ich aber vor diesem kleinen Problem. Siehe:
http://www.marcelsauer.com/css/
Links konnte ich die Grafik nur per Tabelle und vertical-align nach unten bringen. Rechts habe ich es in einem div-Element versucht, wo vertical-align ja ohne weiteres nicht möglich ist.
Ein weiteres Manko in der Lösung wäre außerdem, dass man bei niedrigeren Auflösungen bereits scrollen müsste um zum Footer zu gelangen.
Deshalb werde ich wohl eher mal den Schatten so verkleinern, dass ihn auch 1024x768er User ihn "unabgeschnitten" sehen können und mich Ages Code bedienen.
//edit
Was mir gerade irrsinnigerweise einfällt...
Wäre es dann auch nicht möglich per PHP-Script die Auflösung eines Besuchers zu ermitteln und dann je nach Auflösung einen größeren bzw. kleineren Schatten einzubinden? |
|
Nach oben |
|
|
bl:nd Moderator
Angemeldet: 04.06.2004 Beiträge: 3499
|
Verfasst am: 26.03.2008, 11:35 Titel:
|
|
|
|
|
Die perfekte Lösung von Impi würde mich jetzt noch interessieren... |
|
Nach oben |
|
|
ShortY Mitglied
Angemeldet: 04.06.2004 Beiträge: 556 Wohnort: Herdorf Interessen: Glaube, MTB, klettern, Musik(hören und machen), Computer
|
Verfasst am: 26.03.2008, 11:37 Titel:
|
|
|
|
|
das ginge wohl, allerdings würd ich das wohl nicht so machen. Man weiß ja nie, ob ein User auch wirklich den Browser maximiert hat. Der Trend geht zwar klar zu größeren Displays/Monitoren und zu höheren Auflösungen, allerdings würde ich wohl noch keine Seite machen, die nicht bei 1024x768px korrekt und komplett dargestellt werden kann.
@nanos: sry, bin gestern abend nicht mehr dazu gekommen. War noch spontan im Kino (kann btw "Die Welle" nur empfehlen!) |
|
Nach oben |
|
|
Age Mitglied
Angemeldet: 04.06.2004 Beiträge: 161 Wohnort: Wien
|
Verfasst am: 26.03.2008, 23:25 Titel:
|
|
|
|
|
Hier kannst du gleich die ganze Page direkt runterladen:
http://www.next-level-media.at/test/page.zip
Schau dir vorallem an wie ich die Ebenen positioniert habe ... ist bei CSS ein bisschen tricky, wenn man ein zentriertes Layout machen will.
Age |
|
Nach oben |
|
|
AEQUITAS Mitglied
Angemeldet: 16.08.2005 Beiträge: 513 Wohnort: Köln Interessen: Freundin, Parties, Webdesign, eSport, Tischtennis, Laufen
|
Verfasst am: 27.03.2008, 13:31 Titel:
|
|
|
|
|
Wo ist das denn tricky?
body {
width:100%;
text-align:center;
blabla
}
div#seite {
width:1003px;
margin:0px auto;
}
fertig
achja age kleiner tipp:
schreib einfach margin:0px; oder margin:0px 0px 0px 0px; anstatt jede seite (left, right,top, bottom) zu schreiben. so spart man viele zeilen code und vor allem dateigröße, außerdem würde ich nicht alles in position:absolute; machen, höchsten den kopf und den footer! ansonsten sieht es ganz gut aus, also von der programmierung her. |
|
Nach oben |
|
|
deLiTe. Mitglied
Angemeldet: 16.09.2006 Beiträge: 504 Wohnort: Freiburg Interessen: Eye-Candy
|
Verfasst am: 27.03.2008, 15:47 Titel:
|
|
|
|
|
AEQUITAS hat folgendes geschrieben: | body {
width:100%;
text-align:center;
blabla
}
|
Ist das valide? |
|
Nach oben |
|
|
AEQUITAS Mitglied
Angemeldet: 16.08.2005 Beiträge: 513 Wohnort: Köln Interessen: Freundin, Parties, Webdesign, eSport, Tischtennis, Laufen
|
Verfasst am: 27.03.2008, 16:14 Titel:
|
|
|
|
|
Auf jeden Fall!!!! |
|
Nach oben |
|
|
|