Keine Pläne zur Umsetzung in CSS
lima-city → Forum → Sonstiges → Spam und sonstiges Unvergütetes
benutzername
bild
definieren
denken
greifswald
header
hintergrund
hintergrundbild
http
idee
image
layout
navigation
position
schriftzug
setzen
text
ungeordnete liste
waldorfschule
weiteres element
-
Hallo zusammen,
ich habe hier ein kleines Webseitenlayout im Grafikprogramm gebaut, das nun mit HTML und CSS umgesetzt werden muss...
http://www.ferdinand-malcher.de/extern/nimmersatt.png
Leider sind mir ein wenig die Hände gebunden, wie ich das Ganze überhaupt angehen soll.
Der Kopf ist kein Problem, der SChatten daunter sollte auch keines sein.
Nun aber: Der Schriftzug zentriert und aber das Logo linksbündig? Gut, das bekomme ich vllt. auhc noch hin.
Wie aber kann ich die beiden Spalten links und rechts definieren, sodass sie quasi \"unendlich lang\" sind, also beim Scrollen sich verlängern und IMMER am unteren Sietenrand abschließen?
Der graue Bereich in der Mitte sollte komplett als Contentbereihc dienen; das Bild ist da nur als Füllstoff drin...
Vielen Dank für Ideen, Tipps, etc...
gruß
ferdinand24 -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Die simple, aber effektive Technik \"Faux Columns\" könnte dir vll helfen (http://www.alistapart.com/articles/fauxcolumns/).
(Wenn du diesen Artikel gelesen hast, würdest du vll denken: \"Wieso bin ich selbst nicht drauf gekommen?\" *gg)
Wenn es ein flüssiges Layout sein soll (prozentuale Breite der Sidebar und Content), brauchst du dann 2 <div>s als Faux-Columns Container, die jeweils 1 faux-columns-Bild (eine für die linke, andere für die rechte) als background haben, die du prozentual positionierst (background-position). Die Bilder müssen natürlich dann breiter sein als normal, damit die Sidebar auch in die Breite \"wachsen\" können, wenn man den Browser Fenster vergrößert.
Wenn die Höhe auch noch 100% sein soll: http://ryanfait.com/sticky-footer/
Das Logo könntest du per background-image definieren und per background-position links positionieren lassen wohingegen das Text als <img> per text-align zentriert ausgerichtet wird.
Ryan
Beitrag geändert: 2.5.2008 17:07:18 von ryanblack -
FauxColumns sind SO simpel... Leider habe ich viel zu kompliziert gedacht und ewig gebraucht, bis man mir vermitteln konnte, was gemeint ist...
Mein Layout ganz so umsetzen, wie ich es möchte, kann ich dami zwar auch nicht, denn es geht ja nicht, dass die BEIDEN Sidebars an den Fensterrändern \"kleben\", immer die gleiche Größe haben und die Fenstergröße trotzdem noch variabel ist.
Ich habe mir da aber anders geholfen: http://www.waldorfschule-greifswald.de/nimmersatt/web/
Benutzername/Passwort: testbereich1 (ist nur, damit keine Robots eindringen)
Nun finde ich die Navigation noch etwas lieblos. Daher wollte ich noch einen leichten Verlauf im Hintergrund einfügen.
Bitte im Firefox od. Opera betrachten: http://www.waldorfschule-greifswald.de/nimmersatt/web1
Welche Form dieser BG hat, ist ja ersteinmal egal.
Den Hintergrund kann cih ja simpelst mitteld background-image definieren. Nun habe ich allerdings das schwarze (und beim Hover rote) Logo davor schon mit background-image gestaltet.
Also habe ich zu \"content\" in Zusammenhang mit der Pseudoklasse :before gegriffen.
Leider mag der IE das absolut nicht und stellt das kleine Logo überhaupt nicht dar.
Gibt es da ein Workaround?
gruß
ferdinand24 -
Wenn du bei der Navigation statt einzelner Links eine ungeordnete Liste benutzt (<ul> und <li> ) hast du ein weiteres Element (<li> ), wo du ein Hintergrundbild setzen kannst ;) .
Also: Den Farbverlauf-Hintergrundbild als background-image von <li> und das rote Menüpunktbild als background-image von <li><a>.
Ryan
(Es wäre sinnvoll, wenn du bei dem <img> von dem Schriftzug im Header einen Alternativtext [alt=\"Nimmersatt\"] setzt, damit Suchmaschinen den Titel auch lesen können...)
Beitrag geändert: 3.5.2008 17:13:32 von ryanblack -
Wenn du bei der Navigation statt einzelner Links eine ungeordnete Liste benutzt (<ul> und <li> ) hast du ein weiteres Element (<li> ), wo du ein Hintergrundbild setzen kannst ;) .
Also: Den Farbverlauf-Hintergrundbild als background-image von <li> und das rote Menüpunktbild als background-image von <li><a>.
Ryan
(Es wäre sinnvoll, wenn du bei dem <img> von dem Schriftzug im Header einen Alternativtext [alt=\"Nimmersatt\"] setzt, damit Suchmaschinen den Titel auch lesen können...)
Beitrag geändert: 3.5.2008 17:13:32 von ryanblack
Achja, das ist eine gute Idee ;)
Ich melde mihc gleich zurück, ob alles geklappt hat!
Das ist alles noch cniht ordentlich gemacht. Der Schriftzug bekommt auch ncoh Höhen- und Breitenangaben, etc. ;)
gruß
ferdinand24
Beitrag geändert: 3.5.2008 17:55:28 von ferdinand24 -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
