Kacheln des Layout-Randes

[wulihubi]

Hallo Ihr Lieben,

bitte, wie geht das nochmal, wenn ich an den Master-Bereich angrenzend sauber zwei Linien, also eine rechts und eine links am Rand der Layoutfläche nach unten duplizieren mag? Also, dass dabei kein Versatz entstehen kann?

Danke Euch, W.

[nettesekel]

Hast du mal ein Besipiel wie das aussehen soll, wenns fertig ist?

[wulihubi]

Ok, hier mal ein vorübergehender Entwurf meines neuen Banners, der an den Rändern seine Fortsetzung in den Layout-Bereich hinein braucht:

[nettesekel]

Also links und rechts der grüne Streifen und mittig weiß!?

Dann schneide von dieser Grafik unten einen 1-2px breiten Streifen ab und nutze ihn als Hintergrundgrafik für den Layoutbereich/die Tabelle... was immer du nutzt. Der Bereich sollte die selbe Breite haben, wie die Grafik...
Dann stellst du für die Hintergrundgrafik eine vertikale Wiederholung ein und damit sollte sich das Ganze schon erledigt haben... klarer?

[Tao]

Guten Morgen!
Hallo Werner!

Du könntest dein Banner auch noch mit folgender Möglichkeit weiterführen:

Ziehe im vorhandenen Layoutbereich einen zusätzlichen Layoutbereich auf, der die genaue Breite deines Banners hat (die Länge ist beliebig nach Seiteninhalt veränderbar), und weise diesem einfach einige CSS-Einstellungen zu. Welche das sind kannst du im Beispiel auf der Seite 2 sehen.
 
http://tao1997.cwsurf.de/3/index.html

Als Vorteil gegenüber der Grafkischnippsel-Lösung ist, dass du Beispielsweise auch eine unteren Rand mit beliebig abgerundeten Ecken machen kannst. Das ginge bei der anderen Lösung natürlich auch, aber nur mit einer weiteren Grafik.

Das Beispiel ist mit NOF12 erstellt und das könnte ich dir als Vorlage überlassen,
sofern du ebenfalls mindestens NOF 12 hast.

LG

[nettesekel]

Zu den runden CSS-Ecken hatte Zappe auch mal zwei nette Tuts gemacht, falls du Probleme hast die Eintellungen nachzuvollziehen... http://www.zappelo.bplaced.net/nof/runde-ecken/  & http://zappelo.de/demo/alles-rund/

[wulihubi]

Hallo,
ich bins mal wieder.

Erstmal danke für die Tipps, doch komme ich mit beiden grade nicht weiter. Die Screenhots anbei zeigen Euch meine Situation.

1. Die Eingabe der Daten in CSS zur Generierung des Randes könnt Ihr vielleicht erkennen, dennoch wird der rand nicht erzeugt. Woran liegt das?

2. Nachdem ich den Schnipsel für den Hintergrund eingefügt hatte, stellte sich eine Linie fast mittig dar, was ich ebenfalls nicht verstehe. Doch schlimmer ist ja, dass ich sie nicht mehr löschen kann!!

Was könnte ich tun?

Danke und lG, W.

[john doe]

... kann es sein, dass man diese CSS-Formatierungen erst in der Vorschau (oder nach lokaler Publizierung) und nicht im Design sieht? (Bei mir ist das zumindest so).

Bei der Hintergrundgrafik würde ich zuerst mal schauen ob da noch irgendwo was in Richtung zentrieren eingestellt ist.

Beides zusammen würde ich für meinen Teil aber auch nicht verwenden - entweder oder.

Grüße, John.

[wulihubi]

Danke Jo,

bin jetzt etwas weiter gekommen. Konnte den Schnipsel aus dem Ordner löschen und die Darstellung der Linie infolge CSS Einstellungen funktioniert auch. Nun habe ich das Problem, dass sich die Breite der eingefügten zusätzlichen Layoutfläche nur über Schieberegler bestimmen lässt, nicht aber ein Dialog angeboten wird, über den ich die Breite exakt definieren kann. Meine Line hat daher einen Bruch von 1px Breite.

[john doe]

Ich hoffe ich habe das jetzt richtig verstanden (weil Schieberegler habe ich hier bei der Layouterstellung nirgends...)

Wenn Du das Layout per 'Anfasser' (das sind diese kleinen Vierecke rundherum) veränderst, dann siehst Du unten rechts im NOF-Fenster zwei Angaben: x:--- und y:--- sowie W:-- und H.---
Ersteres ist die Anfangsposition des Objektes von links und oben, zweiteres Breite und Höhe des Objektes. Damit kannst du feststellen ob Dein Layout die korrekte Größe und Position hat (was ich bezweifle).
Wenn nicht: korrigieren. Wenn ja - ein screenshot der Voransicht wäre dann auch hilfreich.

Du kannst Dir das einfacher machen, wenn du an der entsprechenden (End-) Position eine weitere Hilfslinie hinsetzt und daran einrasten lässt (dto. Anfang).
Dann hast Du die Breite ziemlich sicher immer so wie benötigt.

Wenn Du die Größe des Feldes absolut angeben möchtest, dann geht das wie immer über den CSS-Reiter des Layouts (dort wo Deine Border-Angaben stehen) unter 'Position', dort 'height' und 'width'.
Hat für mich aber den Nachteil, dass das dann selten mit der Designansicht beim basteln übereinstimmt.

Hilft das weiter?

[wulihubi]

Hallo Ihr Lieben,

nochmal vielen Dank für Eure Tipps! Allmählich komme ich weiter.
Nun hätte ich noch zwei Fragen:
Ist es möglich, auf meinen Banner im Masterbereich ne Horizontale Linie einzufügen? Bei mir wird diese dann immer abseits, also rechts außerhalb des Masterrahmens dargestellt.
Und gibt es die Mögichkeit, über CSS Schlagschatten um den Layoutbereich herum einzupflegen? Ähnlich, wie hier auf dieser Website?

Viele Grüße, W.

[john doe]

Hallo Wulihubi,

Zu Frage eins: Theoretisch ja. Je nach dem, was sonst noch in deinem Master liegt kann das Eine das Andere aber schon mal verdrängen.
Praktisch mache ich das höchstens mal innerhalb eines Textes. Ansonsten besser per Bitmap lösen, bzw. gleich in den Hintegrund des Masters einbauen.

Zu Frage zwei: M.e. eher weniger. Würde ich auch über Bitmaps lösen.
Btw: Sehe nur ich den Link nicht der wohl vorhanden sein sollte???

[wulihubi]

Ok, danke.
Ich meinte den Schlagschatten, hier bei nof-community!   

LG

[nettesekel]

Einen Schatten kannst auch mit CSS erzeugen. In deine Klasse müsste das eingefügt werden und in Farbe und Stärke angepasst werden:

Code: HTML5

1. box-shadow: 0 0 5px #ebebe5;
2. -moz-box-shadow: 0 0 5px #ebebe5;
3. -webkit-box-shadow: 0 0 5px #ebebe5;

Wenn du deine abgerundeten Ecken allerdings mit Grafiken erstellt hast und nun der Tabelle oder dem Layoutbereich die die Grafik als BG verwenden diesen Schatten zuweist wird es um die Rundung wahrscheinlich einen eckigen Schatten geben.
Heißt du müsstest dann auch die Rundungen mittels CSS erzeugen...

[john doe]

Ne war wieder schneller!

Hier ist ein 'box-shadow'. Aber die Konsequenzen wurden ja auch schon beschrieben...