Kleinere Fragen zur Anpassung meiner Seite

**Baumkind** · 14.04.2010, 15:22

Hallo zusammen ;-)

Ich befinde mich immernoch am Aufbau meiner Seite und scheiter grad an kleinen Problemen.

1. Wie kann ich rechts oben die Navigation so einrichten, dass der Punkt am Anfang weg ist, das Wort nicht unterstrichen und wenn mans anklickt, dass es immer die gleiche Farbe behält.
Des wäre auch für die übrigen Links ganz nützlich :-D

2. Wie bekomme ich es hin, dass jeder neue Artikel in einer eigenen Box ist? Also zum Beispiel hier. Dass nicht alles in einem Content kommt, sondern dass es mehrere Boxen sind. | erledigt

3. Wie mache ich beim Login die Felder größer und mache das Benutzername und Passwort in das Feld und wie kann ich die Texte verändern?

4. Wie mache ich in der Navigation die Box aus 3 Teilen? Also oben der anfang mit NAVIGATION und dann wie ich das Hintergrundbild der eigentichen Box mache ist klar, aber dann wieder das untere Teil.

Schon mal vielen Dank für eure Hilfe. :-) Falls ihr nicht versteht, wie ich es meine melden, dann stell ichs als grafiken dar.

gruß, Michel

**Nikolas** · 14.04.2010, 15:34

Also pauschal gesagt sollte dir Firebug (Firefox-Plugin) und CSS bei den meisten Punkten helfen.
Damit lassen sich die jeweiligen CSS IDs und Klassen sehr leicht nachvollziehen und dementsprechend dann im Backend bearbeiten.

Falls CSS Fragen auftauchen empfehle ich www.css4you.de

Wenn es konkreter irgendwo hakt kommst du an Screenshots oder einem Link hier nicht herum.

Gruß
Nikolas

**Baumkind** · 14.04.2010, 15:42

Ohh, ist gepostet. Hab ihn vorher vergessen, sorry.

**Nikolas** · 14.04.2010, 15:47

Auch dabei hilft dir Firebug weiter.
Damit kannst du genau erkennen welches Div und somit welche CSS Klasse für jeden einzelnen Artikel zuständig ist. In diesem Fall handelt es sich um die Klasse "ce_text". Dieser Klasse kannst du nun in deinem Stylesheet den entsprechenden Border oder Hintergrund verpassen.

Gruß
Nikolas

**Baumkind** · 14.04.2010, 16:10

Ich möchte es aber nicht nur für die Text-Elemente einrichten, sondern für alle.
Und danke für deinen Tipp, aber ich komme nicht weiter, sonst hätte ich nicht nachgefragt.

**Nikolas** · 14.04.2010, 16:20

Dann versuch es mal damit:

div#main .inside>div { border: 1px solid #000000; }

Funktioniert aber nur in modernen Browsern. Siehe dazu...

**Baumkind** · 14.04.2010, 17:40

Funktioniert leider nicht. Da kommt auch nen durchgehender Content.

**Nikolas** · 14.04.2010, 19:04

Was soll denn da genau erscheinen? Also nur Artikel oder auch andere Module?
Hast du mal ein anderes Modul eingebaut und dann geschaut?

Könntest du vielleicht nen Screen machen wie du dir das vorstellst?

Also die Vorgehensweise ist immer die gleiche: Mit Firebug kannst du genau herausfiltern um welche Container es sich handelt und diese musst du dann entsprechend über CSS ansprechen.

Du kannst ja einzelnen Artikeln oder Modulen eine ganz neue CSS Klasse hinzufügen, die du dann entsprechend ansprichst.

**Baumkind** · 14.04.2010, 21:09

http://www.abload.de/img/screenod6g.png Grafik ist zu groß für des Forum.

Habs jetzt mal vereinfacht nut mit ner weißen fläche gemacht. Aber man erkennt ja, wie ichs mein.

Und wie mach ich es, dass vor und nach dem eigentlichen background-image einer Box nochmal nen Teil der Box in Form einer Grafik kommt? Per extra Modul oder mach ich des im zusätzlichen Code im Stylesheet der Box?
ich hoffe, dass ich mich richtig ausgedrückt habe und ihrs versteht. :-D Gar nich so leicht.
Danke schonmal für deine Mühe. :-)

Gruß, Michel

**Nikolas** · 15.04.2010, 08:38

Also, es sind ja nach wie vor nur Textblöcke von Artikeln. Dafür würde das Ansprechen der ce_text Klasse reichen damit du die Seite so darstellen kannst wie auf deinem Screenshot.
Dazu musst du natürlich dem umgebenden Container mit der Klasse "mod_article" die Hintergrundfarbe wieder wegnehmen.
Dann gibt's du der "ce_text" Klasse einmal den Hintergrund z.B. weiß und arbeitest mit Abständen, also margin-bottom für den unteren Abstand für den nächsten Block.

Code:

.ce_text { background-color:#fff; margin-bottom:20px; }

Dazu etwas Padding für die Abstände innerhalb der Box zu deren Rand und schon sieht es aus wie in deinem Screenshot. Hab's schon mal für dich getestet, funktioniert soweit auch

Natürlich kannst du das dann auch für andere Klassen machen, falls du irgendwelche Module einbinden möchtest.
Ich hoffe das hilft dir nun etwas.

**Baumkind** · 16.04.2010, 13:28

Perfekt. :-)
Vielen Dank, hat geklappt :-)

Ich finde leider nicht die CSS-Klasse für Links.

Hier die Homepage nochmal.

Außerdem hab ih jetzt die graphical navigation und leider wird die mir nicht so angeziegt, wie ich sie mir wünsche. Hier wäre das gleiche Problem, wie bei der Navigation oben rechts mit den Punkten. Ich glaub auch, dass ohne die Punkte der abstand zwischen den Grafiken weg ist. Wäre um Hilfe dankbar. :-)

**Nikolas** · 16.04.2010, 14:24

Das ist doch schon mal prima, dass das geklappt hat.
Auch die weiteren Punkte sind per CSS einfach zu lösen:

Damit die Aufzählungszeichen verschwinden und der Abstand zum Rand weg ist folgendes:

Code:

ul {list-style:none; padding:0px;}

Für die Links versuch es mit folgendem Code:

Code:

a {color:#f00; text-decoration:none}

usw.

Dafür kannst du aber auch besser mal bei CSS4YOU schauen, die haben eine tolle Übersicht, wie und was du mit CSS machen kannst.

Gruß
Nikolas

**Baumkind** · 17.04.2010, 17:04

Hi ;-)
Das mit dem Listentyp entfernen hat funktioniert.
Allerdings bekomme ich den Abstand zwischen den Grafiken nicht weg.

Und für die Links ändert es zwar die Sachen, allerdings nur für den aktiven Zustand. Ich glaub, so heißt des. Also wenn es geklickt ist. Mit was für nem Code erreiche ich den Link an sich selber? Kann ich des nicht für alle gleichzeitig im Body ändern?

**Nikolas** · 17.04.2010, 17:09

Bei den einzelnen Grafiken in der Liste musst du den Listenelementen li einen margin zuweisen.

Die Links kannst du natürlich alle ansprechen.

Es gibt da folgende Pseudo-Klassen die zur Gestaltung aller Links im Body benötigt werden:

a:link
a:visited
a:active
a:hover

**Baumkind** · 18.04.2010, 18:39

Das mit der Navigation hat jetzt geklappt, bestens.

Aber für die Links bin ich einfach tatsäclich zu dumm. Des möchte nicht funktionieren.

Möchtest du mir noch erklären, wie ich eine flexible Box aus 3 Teilen zustande bekommen? Also der obere Teil, dann der mittlere Teil, der sich so erweitert, dass der Text reinpasst und dann noch der Abschluss mit Schatten unten dran. Die Grafiken an sich hab ich schon ich muss es nurnoch irgendwie hinbekommen. :-D
Danach wäre eigentlich dann noch meine wichtigste Frage beantwortet.
Vielen Dank schonmal.

**Nikolas** · 19.04.2010, 12:33

Scheinbar hast du das mit den Links doch hinbekommen!?

Zu einer Box mit Schattengrafik usw.: Da gibt es mehrere Methoden.

Zum einen CSS 3 ohne Grafiken: Läuft allerdings nur in den aktuellsten Browsern. Wie das geht kannst du am Besten googlen.

Dann natürlich wie du vor hast mit Grafiken: Da gibt es wiederum verschiedene Möglichkeiten und bevor ich hier jetzt Verschiedenste beschreibe kannst du auch hier besser nach googlen.

Hast du bereits was in der Richtung gemacht, wär es hilfreich wenn du mir zeigen kannst wie du vorgegangen bist und woran es genau hapert.

**Baumkind** · 19.04.2010, 18:34

So wie ich das Verstanden habe, muss ich sozusagen die 3 Divs in ein Modul bekommen?
Also habe ich als erstes Div den wrapper_top
Als 2. dann den normalen ce_text
und als 3. dann wrapper_bottom

jetzt hab ich dann halt .mod_wrapper_top nen hintergrundbild zugewiesen und dem .mod_wrapper_bottom auch, allerdinsg erscheinen keine Bilder. Deswegen denke ich, dass meine Vorgensweise leider falsch war. :-D

**Nikolas** · 21.04.2010, 11:45

Probier mal das hier: http://www.memiso.com/shadow-effects...-with-css.html

Also es gibt wie gesagt verschiedene Wege. Vielleicht solltes du einfach mal googlen, da das hier ja kein CSS oder Design Forum sondern ein TYPOlight Forum ist.

Du musst auf jeden Fall mit verschiedenen Elementen arbeiten wenn du das auch für ältere Browser machen möchtest. Wenn das nicht sein muss empfehle ich dir die neue CSS3 Eigenschaft box-shadow für die neuen Browser. Wie gesagt, am Besten mal googlen.

**Baumkind** · 21.04.2010, 14:16

Das System habe ich verstanden, aber wie setzte ich das in Typolight um?
Da kann ich nicht einfach in den Quelltext 3 verschiedenen Divs machen.

**Nikolas** · 21.04.2010, 15:12

Du kannst entweder ein neues Template ür die Artikel anlegen oder du benutzt einfach bereits vorhandene Elemente wie h1 Tag, p Tag und das umgebende Div.

Du kannst z.B. dem H1 Tag als Hintergrund die obere Grafik anzeigen lassen, dem p Tag die sich wiederholende Hintergrundgrafik und dem umgebenden Div dann die untere Grafik als Hintergrund.

Entsprechend dann natürlich mit Padding und background-position arbeiten und es sollte gehen.

so z.B.:

Code:

.ce_text>h1{background:url("grafik1.xyz") top left no-repeat;}
.ce_text>p{background:url("grafik2.xyz") top left repeat-y;}
.ce_text>div{background:url("grafik3.xyz") bottom left no-repeat;}

**Baumkind** · 21.04.2010, 16:13

Ist ne gute Idee, klappt aber allerdings nicht ganz, da nicht jeder Artikel auf p anspricht. ich hab auch schon versucht, mit Firebug ne CSS-Klasse für den Content zu finden, aber habe nichts gefunden, was gepasst hat.
Und er untere Teil wird noch beim text angeziegt und somit unter dem Hintergrundbild von p.

**Nikolas** · 21.04.2010, 17:16

Dann versuch es mal mit nur zwei Grafiken.
Und zwar wie folgt:

Die erste Grafik bindest du über den H1 Tag ein. Diese Grafik hat nun den oberen Teil deiner Box-Grafik und den mittleren Teil und zwar so, dass die Grafik dann so lang ist, dass eigentlich kein Artikel diese Länge erreicht.
Dann brauchst du nur noch für das Div die untere Grafik am Bottom einbinden und die Größe dieser Grafik per padding-bottom einstellen um den Abstand zum vorigen Inhalt zu realisieren.

**Baumkind** · 21.04.2010, 18:18

Funktioniert leider auch nicht ...
Die Grafik wird nur angezeigt, bis h1 vrobei ist. Und die letze Grafik wird auch nicht immer angezeigt.

**Baumkind** · 21.04.2010, 18:23

Ahh: Es klappt aber, wenn ich die Grafik für .ce_text einsetzte.
Allerdings besteht dann immernoch des Problem mit dem Ende.

außerdem wird oben nen teil der box angeziegt, obwohl der da nicht hingehört.

**Nikolas** · 22.04.2010, 07:55

Ähm, okay.
Vielleicht anders rum probieren. Die lange Grafik in den Hintergrund, also das untere Ende in die lange Grafik in das Div einbauen. Den oberen Teil als Hintergrund in den H1 Tag.

Die Grafik oben kommt aus einem leeren ce_text Div in deinem wrapper_top Da musst du mal schauen wo das genau herkommt bei dir.

**Baumkind** · 22.04.2010, 19:29

Problem ist, wenn ich die Grafik in die H1 mache, dann wird es nur für den bereich des h1 angeziegt. Im eigentlichen text ist dann gar nichts. Und wenn ich es im p mache, wird es für jeden Absatz neu angefangen und das nichtmal bei allen. Also war es nur bei ce_text möglich.

**downunder006** · 23.04.2010, 13:20

Hallo zusammen,

3. Wie mache ich beim Login die Felder größer und mache das Benutzername und Passwort in das Feld und wie kann ich die Texte verändern?

Bei dem Punkt komme ich auch nicht weiter. Ich finde einfach nicht die richtige ID und Klasse.
Firebug hilft mir irgendwie auch nicht.

Hätte da vielleicht mal noch jemand einem Tip ?

mfg

Volker

**Baumkind** · 27.04.2010, 13:25

Weiß hier neimand mehr weiter?
Nach dem bottom meiner Box bin ich glücklich :-D

**Nikolas** · 27.04.2010, 14:55

H1 und Div Klasse ce_text anpassen.

Code:

div.ce_text {position:relative; background:url('wrapper_bottom.png') bottom left no-repeat transparent;}

h1 {position:absolute; width:100%; background:url('wrapper_top.png') top left no-repeat transparent; margin:-28px 0 0; padding:13px;}

verwenden kannst du auch eine Grafik wenn diese lang genug ist und kein Artikel jemals die Grafik ausreizt.

**Baumkind** · 27.04.2010, 19:27

Hi ;-)

Das mit dem Backgroundimage für H1 funktioniert nicht.

Das kommt dann dabei raus ... Das Hintergrundbild wird nur für den Bereich von H1 verwendet.

**Nikolas** · 27.04.2010, 19:42

Zitat von Baumkind

Hi ;-)

Das mit dem Backgroundimage für H1 funktioniert nicht.
...

Das kommt dann dabei raus ... Das Hintergrundbild wird nur für den Bereich von H1 verwendet.

Ist klar

Du musst hier die größere oder auch längere Grafik für das DIV verwenden.
Einfacher noch: Benutze eine Grafik, die komplett den Container abbildet - also mit dem oberen und dem unteren Rand. Diese machst du dann entsprechend groß, so dass ein Artikel nie die anze Grafik benötigen wird (wenn machbar).
Dann gibst du beim Div an:

Code:

background-position:bottom left

und beim H1

Code:

background-position:top-left

Klappt auf jeden Fall ;-) Hab es bei mir getestet. Probier es einfach nochmal. Ich hab nun leider keine Zeit mir das noch mal auf deiner Seite anzuschauen.
Wenn du es nicht hinbekommen solltest, kann ich mir das morgen noch einmal anschauen.

**Baumkind** · 27.04.2010, 20:20

Ja, klappt wenn ich für .ce-text kein Padding eingebe. Dann klebt mir aber auch der text direkt außen an der Box. Weißt du, was ich dagegen noch tun kann? Dann bin ich glücklich und du bist von mir befreit? :-D
Schon mal unglaublich viel Dank für deine Geduld und Hilfe.

**Nikolas** · 28.04.2010, 10:20

Kleiner Trick: Gib der Klasse .ce_text den Padding den du haben willst für den linken Abstand und dann gibt's du dem H1 Element den entsprechenden Wert aber mit negativem Vorzeichen und dem H1 dann den gleichen padding für den linken Abstand wie dem .ce_text Element.

Also in etwa so:

.ce_text {padding-left:13px;}
.ce_text H1 {margin-left:-13px; padding:13px;}

Damit funktioniert es.

**Baumkind** · 28.04.2010, 14:30

Du bist ein Gott!
Vielen, vielen dank :-) <3

**Nikolas** · 28.04.2010, 14:50

Zitat von Baumkind

Du bist ein Gott!

Mal nicht übertreiben

Bin noch nicht einmal ein CSS Profi, hoffe aber auf dem Weg dahin ^^

Aber dennoch danke sehr.

Schönen Gruß
Nikolas

**Nikolas** · 28.04.2010, 14:57

Hab mir deine Seite nochmal angeschaut, das mit dem Rand der über die H1 Hintergrundgrafik hinaus geht soll so bestimmt nicht oder?

Da kannst du wie folgt abhilfe leisten:

.ce_text {position:relative; margin-top:30px; overflow:visible;}
.ce_text H1 {position:absolute; margin-top:-30px;}

edit: genauer genommen müssen die beiden margin Werte den Wert der Höhe deines H1 Hintergrundbildes haben.

**Baumkind** · 28.04.2010, 15:14

Hat geklappt :-)
Danke nochmal :-P

**Nikolas** · 28.04.2010, 15:27

Zitat von Rundinhio

edit: genauer genommen müssen die beiden margin Werte den Wert der Höhe deines H1 Hintergrundbildes haben.

Zitat von Baumkind

Hat geklappt :-)
Danke nochmal :-P

Du hast nun 30px für margin genommen, das klappt nicht ganz. Guck mal auf deiner Seite Info den zweiten und dritten Beitrag an, da wird der obere Text abgeschnitten. Nimm den als Wert die Pixel die deine Hintergrundgrafik hoch ist, dann klappt es. Sind bei dir in diesem Fall 47px soweit ich das beurteilen kann

**Baumkind** · 29.04.2010, 15:23

Habs grad irgendwie selber hingewurstelt aber danke :-D

**Baumkind** · 05.05.2010, 07:30

Nochmal ne kleine Frage:
Wieso wird mir der Footer 3-5Pixel vom unteren Rand angeziegt?
Ich hab schon veruscht, ihn mit .footer anzusprechen und hab beim margin -4px gemacht, aber des hat nicht funktioniert.
http://neu.kjg-boefingen.de/index.php/startseite