Webstatt.org - Community seit 2006 - 2012 (2024?)

unten ausrichten und headline-absatz

Avatar user-117
11.05.2007 15:30

Ich probiere gerade ein kleines Konzept umzusetzen.
Nur haben sich im code part mal wieder einige Fragen aufgetan.

Erstmal ein paar generelle Links:
Konzept:
Zum besseren Verständnis der folgenden Beschreibung hier der Link zum Konzept:

Der Titel (sign.png) soll unten links am rand ausgerichtet sein, ich finde jedoch keinen weg, dies bei viel Inhalt zu realisieren. Der Titel befindet sich zwar unten links, kommt jedoch nicht mit wenn man scrollt.

Die grüne Linie rechts im Hintergrund soll sich prozentual vom rechten rand entfernen und sich über die komplette Seite ziehen.
Auf diesem sollen dann die einzelnen Bilder (work.png) angeordnet sein.

Code-Teil
Hier sind die Links zum code Teil:
Website: http://prophet-design.de/tests/index.html
Stylesheet: http://prophet-design.de/tests/design.css

Die verwendeten Bilder liegen im ordner
http://prophet-design.de/tests/stuff
und haben die namen:
work.png (platzhalter für die Bilder)
sign.png (Pagetitel)
gradient.png (Hintergrundverlauf)


Probleme
Den Großteil der Probleme, die ausrichtung, habe ich ja bereits aufgezählt.
zum zweiten wären da die headlines.
Ich möchte eine subline unter der headline <h2> haben.
Diese bricht jedoch wie üblich um und lässt mir eine freie zeile stehen, was ich aufgrund der subline nicht gebrauchen kann. Lässt sich das evtl. unterdrücken?

|| prophet-design.de -- Frische Ideen ||
Avatar user-282
12.05.2007 00:42

Original von user-117
[...]

Probleme
Den Großteil der Probleme, die ausrichtung, habe ich ja bereits aufgezählt.
zum zweiten wären da die headlines.
Ich möchte eine subline unter der headline <h2> haben.
Diese bricht jedoch wie üblich um und lässt mir eine freie zeile stehen, was ich aufgrund der subline nicht gebrauchen kann. Lässt sich das evtl. unterdrücken?


Hi,
also so um ein Objekt mit scrollen zu lassen, wie z.B. denn Schriftzug unten links setzt man

position: fixed;

Das hat denn Nachteil, dass es bis IE 6 nicht richtig funktioniert, aber von anderen Browsern wie Firefox oder Opera. Sprich entweder du machst es so oder du machst es wie hier

Was meinst du mit "subline"? Wenn du eine einfache Linie unter dem Wort meinst, dann nimmst du einfach:

border-bottom: 1px #FFFFFF solid;

Und den Abstand bekommt man halt mit Margin weg, aber ich kann mich in dem Punkt auch gerade irren.

Das wären meine spontanen Einfälle gerade dazu. zwinkern Noch fragen?

Gruß, user-282 lächeln


P.S. Endlich konnte ich auch mal helfen (hoffentlich). xD

zwinkern Don't Panic! - Die Antwort lautet: 42
Avatar user-117
13.05.2007 09:43

danke erstmal für die antwort.

ja, das mit position:fixed ist klar, nur wie bekomme ich das dann hin, das das Objekt unten links am browserrand ist, ohne position:absolut zu benutzen?
ich versuch mal den code in dem link zu durchschauen...hab lange nicht mehr gecoded :O

mit der subline meine ich keine linie, sondern einen untertitel, sorry wenn ich mich missverständlich ausgedrückt hab.

falls es noch unklarheiten geben sollte, schriebt sie mir bitte.

gruß
Henning


---------------------------------

Also ich hab mir nochmal den code angeguckt und ein bisschen rumprobiert.
Bin jetzt um einiges weiter, allerdings weiß ich noch nicht wie ich die Bilder von den Arbeiten am besten positionieren kann.
Mit der Subline muss ich noch probieren.

Ergebnisse sieht man wie vorher unter
Website: http://prophet-design.de/tests/index.html
Stylesheet: http://prophet-design.de/tests/design.css


das problem dabi ist...im ie kann man das ganze knicken -.-

|| prophet-design.de -- Frische Ideen ||
Avatar user-282
13.05.2007 11:06

zwinkern Ist ja kein Problem, aber nochmal das "fixed" nimmt man ja anstatt "absolute".

Nun zu deinem Untertitel. Am besten probierst du mit "margin" die Tags h2 & h3 zu definieren. Am besten dabei genau "margin-bottom" bei h2 und "margin-top" bei h3.
Ich habe es so gemacht:

h2 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 10pt;
color: #fd391f;
margin-bottom:1px;
}

h3 {
margin-top:1px;
}

Und in der Realität sieht es so aus:


:]Also wie gesagt einfach die Tags h2 & h3 weiter definieren bzw. eine Klasse dort einsetzen.

Gruß, user-282 lächeln


EDIT: Achja fixed kennt ja IE erst ab der Version 7, deshalb würde ich es so machen, dass ich unten bei dem Schriftzug einen DIV mit "position: absolute" hinstelle, der immer eingeblendet wird wie bei meinem Beispiel mal da oben. Wegen dem PNG Bild bnimmst du dann den Alpha-Filter um es transpaent zu machen. Bloss bei deinem Streifen müsste man sich noch etwas überlegen.

zwinkern Don't Panic! - Die Antwort lautet: 42