Community

9dots.de Webdesign Board

 

 FAQFAQ   SuchenSuchen   MitgliederlisteMitgliederliste   BenutzergruppenBenutzergruppen   RegistrierenRegistrieren 

 ProfilProfil   Einloggen, um private Nachrichten zu lesenEinloggen, um private Nachrichten zu lesen   LoginLogin 


Design valide slicen (CSS)
Gehe zu Seite 1, 2  Weiter
 
Neues Thema eröffnen   Neue Antwort erstellen    9dots.de Webdesign Community Foren-Übersicht -> Coding-Support
Vorheriges Thema anzeigen :: Nächstes Thema anzeigen  
Autor Nachricht
nanos
Mitglied
Mitglied


Angemeldet: 04.06.2004
Beiträge: 1752


BeitragVerfasst am: 25.03.2008, 13:36    Titel: Design valide slicen (CSS) Antworten mit Zitat
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 Winken

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
Benutzer-Profile anzeigen Private Nachricht senden MSN Messenger
deLiTe.
Mitglied
Mitglied


Angemeldet: 16.09.2006
Beiträge: 504
Wohnort: Freiburg
Interessen: Eye-Candy

BeitragVerfasst am: 25.03.2008, 16:20    Titel: Antworten mit Zitat
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
Benutzer-Profile anzeigen Private Nachricht senden MSN Messenger
Impi
Mitglied
Mitglied


Angemeldet: 06.05.2006
Beiträge: 530


BeitragVerfasst am: 25.03.2008, 16:44    Titel: Antworten mit Zitat
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
Benutzer-Profile anzeigen Private Nachricht senden E-Mail senden
ShortY
Mitglied
Mitglied


Angemeldet: 04.06.2004
Beiträge: 556
Wohnort: Herdorf
Interessen: Glaube, MTB, klettern, Musik(hören und machen), Computer

BeitragVerfasst am: 25.03.2008, 16:45    Titel: Antworten mit Zitat
ich weiß ja nich, wie der aktuelle Stand ist, aber ich denke ich hab ihm eben schon via ICQ helfen können...
Nach oben
Benutzer-Profile anzeigen Private Nachricht senden
deLiTe.
Mitglied
Mitglied


Angemeldet: 16.09.2006
Beiträge: 504
Wohnort: Freiburg
Interessen: Eye-Candy

BeitragVerfasst am: 25.03.2008, 19:17    Titel: Antworten mit Zitat
Impi hat folgendes geschrieben:
Achja? Ich sage, es ist auch mit dem jetzigen Layout möglich.

Will ich sehn Winken
Nach oben
Benutzer-Profile anzeigen Private Nachricht senden MSN Messenger
Age
Mitglied
Mitglied


Angemeldet: 04.06.2004
Beiträge: 161
Wohnort: Wien

BeitragVerfasst am: 26.03.2008, 00:32    Titel: Antworten mit Zitat
deLiTe. hat folgendes geschrieben:
Impi hat folgendes geschrieben:
Achja? Ich sage, es ist auch mit dem jetzigen Layout möglich.

Will ich sehn Winken


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
Benutzer-Profile anzeigen Private Nachricht senden Website dieses Benutzers besuchen
deLiTe.
Mitglied
Mitglied


Angemeldet: 16.09.2006
Beiträge: 504
Wohnort: Freiburg
Interessen: Eye-Candy

BeitragVerfasst am: 26.03.2008, 01:20    Titel: Antworten mit Zitat
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? Winken
Nach oben
Benutzer-Profile anzeigen Private Nachricht senden MSN Messenger
bl:nd
Moderator
Moderator


Angemeldet: 04.06.2004
Beiträge: 3499


BeitragVerfasst am: 26.03.2008, 01:34    Titel: Antworten mit Zitat
Ja, dann sing mal dein Liedchen, anstatt hier einen auf dicke Hose zu machen (wenn auch berechtigt)! Winken
Nach oben
Benutzer-Profile anzeigen Private Nachricht senden E-Mail senden Website dieses Benutzers besuchen
nanos
Mitglied
Mitglied


Angemeldet: 04.06.2004
Beiträge: 1752


BeitragVerfasst am: 26.03.2008, 11:08    Titel: Antworten mit Zitat
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. Winken

//edit
Was mir gerade irrsinnigerweise einfällt... Ugly
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? Denken
Nach oben
Benutzer-Profile anzeigen Private Nachricht senden MSN Messenger
bl:nd
Moderator
Moderator


Angemeldet: 04.06.2004
Beiträge: 3499


BeitragVerfasst am: 26.03.2008, 11:35    Titel: Antworten mit Zitat
Die perfekte Lösung von Impi würde mich jetzt noch interessieren... Smilie
Nach oben
Benutzer-Profile anzeigen Private Nachricht senden E-Mail senden Website dieses Benutzers besuchen
ShortY
Mitglied
Mitglied


Angemeldet: 04.06.2004
Beiträge: 556
Wohnort: Herdorf
Interessen: Glaube, MTB, klettern, Musik(hören und machen), Computer

BeitragVerfasst am: 26.03.2008, 11:37    Titel: Antworten mit Zitat
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
Benutzer-Profile anzeigen Private Nachricht senden
Age
Mitglied
Mitglied


Angemeldet: 04.06.2004
Beiträge: 161
Wohnort: Wien

BeitragVerfasst am: 26.03.2008, 23:25    Titel: Antworten mit Zitat
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
Benutzer-Profile anzeigen Private Nachricht senden Website dieses Benutzers besuchen
AEQUITAS
Mitglied
Mitglied


Angemeldet: 16.08.2005
Beiträge: 513
Wohnort: Köln
Interessen: Freundin, Parties, Webdesign, eSport, Tischtennis, Laufen

BeitragVerfasst am: 27.03.2008, 13:31    Titel: Antworten mit Zitat
Wo ist das denn tricky?

body {
width:100%;
text-align:center;
blabla
}

div#seite {
width:1003px;
margin:0px auto;
}

fertig Sehr glücklich

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
Benutzer-Profile anzeigen Private Nachricht senden
deLiTe.
Mitglied
Mitglied


Angemeldet: 16.09.2006
Beiträge: 504
Wohnort: Freiburg
Interessen: Eye-Candy

BeitragVerfasst am: 27.03.2008, 15:47    Titel: Antworten mit Zitat
AEQUITAS hat folgendes geschrieben:
body {
width:100%;
text-align:center;
blabla
}

Ist das valide? Smilie
Nach oben
Benutzer-Profile anzeigen Private Nachricht senden MSN Messenger
AEQUITAS
Mitglied
Mitglied


Angemeldet: 16.08.2005
Beiträge: 513
Wohnort: Köln
Interessen: Freundin, Parties, Webdesign, eSport, Tischtennis, Laufen

BeitragVerfasst am: 27.03.2008, 16:14    Titel: Antworten mit Zitat
Auf jeden Fall!!!! Ugly
Nach oben
Benutzer-Profile anzeigen Private Nachricht senden
Beiträge der letzten Zeit anzeigen:   
Neues Thema eröffnen   Neue Antwort erstellen    9dots.de Webdesign Community Foren-Übersicht -> Coding-Support Alle Zeiten sind GMT + 1 Stunde
Gehe zu Seite 1, 2  Weiter
Seite 1 von 2

 
Gehe zu:  
Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst deine Beiträge in diesem Forum nicht bearbeiten.
Du kannst deine Beiträge in diesem Forum nicht löschen.
Du kannst an Umfragen in diesem Forum nicht mitmachen.

Board Software by phpBB © 2001, 2005 phpBB Group. Impressum
Dominik Wuttke - Moritz Münchmeyer - Joachim Nagel GbR.
AGB