[gelöst] Zusätzlichen Div-Container um <div class="page"> erstellen
Eingetragen von highman72 (29)am 21.07.2013 - 11:47 Uhr in
Hallo zusammen,
ich verstehe nicht ganz, wie ich Drupal anweise, einen zusätzlichen DIV-Container anzulegen.
Ich habe eine Seite (mit zen ein eigenes Theme erstellt), das von oben den Header mit einem Farbverlauf füllen soll, aber eben nicht nur in den Header in den von mir definierten 1030 Pixeln Breite, sondern 100% der Seitenbreite. Jetzt habe ich mir gedacht, dass ich den gesamten Page-Container einfach mal in einen zusätzlichen Container namens "Verlauf" einpacke und dort einen background-image: linear-gradient mit Stopp bei 220px setze. Letzteres hatte ich ursprünglich auf dem <body> gesetzt, aber dann wiederholt sich der Verlauf am Ende der Seite, was nicht gut aussieht. Setze ich es auf irgendeinen anderen div, bleibt der Verlauf nur 1030 Pixel breit.
Ich habe mir mal die page.tpl.php vorgenommen und einfach vor das <div id="page"> ein <div id="Verlauf"> gesetzt und unten nach dem </div> <-- #page --> wieder aufgelöst. Aber das zusätzliche div wird nicht in den Seitenquelltext geschrieben. Da ich überhaupt kein PHP kenne, mir das aber gerne aneigne, wenn es mich weiterbringt, muss ich jetzt doch mal fragen.
Kann mir jemand helfen, oder ist mir nicht mehr zu helfen?
Danke und Grüße
highman72
- Anmelden oder Registrieren um Kommentare zu schreiben
Der page.tpl.php beschreibt
am 21.07.2013 - 12:10 Uhr
Der page.tpl.php beschreibt nicht den gesamten Seitenaufbau, sondern nur den wesentlichen Teil des
<body>-Bereiches. Außerhalb von page hast Du also noch das body-Tag und das html-Tag, denen Du ebenfalls Hintergrundbilder mitgeben kannst. Das sollte doch für Deine Zwecke reichen. Also brauchst Du dafür nicht irgendwo in PHP einzugreifen, sondern kommst mit CSS aus.Beste Grüße
Werner
Hallo Werner,erstmal danke.
am 21.07.2013 - 13:27 Uhr
Hallo Werner,
erstmal danke. Das body-Tag habe ich per CSS mit dem Farbverlauf betankt, aber das führt dazu, dass der Farbverlauf sich unten am Ende des Inhalts (Content kleiner als Bildschirminhalt) wiederholt. Somit müsste ich in jedem View immer genug Content haben, um keine Wiederholung zu haben. Das html-Tag habe ich eben probiert. Da ist es das gleiche. Daher bleibt mir gar nichts anderes übrig, als das irgendwie als neues div einzupflegen, oder?
Ich habe mir gedacht, dass neue DIVs logischerweise in der page.tpl.php eingebaut werden, oder? Zumindest ist da der Page-div drin, darin der header und darunter diverse andere. Das müsste doch gehen, dass ich da noch einen drumherum spanne.
Oder mache ich irgendwo doch einen Denkfehler?
Danke und Grüße
Highman72
PS: Habe das mal kurz hier zum Test mit gepimptem html-Tag abgelegt. Der Farbverlauf soll sich unten nicht wiederholen...
Man nimmt dazu ein
am 21.07.2013 - 13:45 Uhr
Man nimmt dazu ein Hintergrundbild, das ein (oder wenige) Pixel breit ist und die Länge des Verlaufs umfaßt. Dann läßt man dieses Bild nur horizontal wiederholen und setzt die untere Farbe, also die, wo der Verlauf aufhört, als Hintergrund-Farbe bei dem entsprechenden Element.
Ich glaube, Du solltest Dich etwas mehr in CSS einarbeiten, denn das wirst Du noch häufig brauchen.
Beste Grüße
Werner
Hallo Werner, na klar, das
am 21.07.2013 - 14:04 Uhr
Hallo Werner,
na klar, das geht auch. Aber genau das wollte ich eigentlich nicht, weil ich da mit CSS wesentlich flexibler bin. Aber so oder so, im Kern kommt dann genau das gleiche raus. Sowohl html als auch body werden unterhalb des Ende des Contents wiederholt. Dann spielt es keine Rolle, ob ich archaisch mit einem Bild oder modern mit einem CSS-Farbverlauf arbeite.
Ich muss mich also eher in PHP einarbeiten, als in CSS, denn damit habe ich ja kein Problem. Bestehende DIVs mit CSS dazu zu bringen, das anzuzeigen, was ich will, ist ja einfach. Nur eben nicht mit neuen, die ich nicht zum Laufen kriege...
Danke schon mal. Noch jemand Ideen?
Liebe Grüße
Highman72
Du kannst dein eigenes Theme erstellen
am 21.07.2013 - 14:50 Uhr
in dem natürlich auch ein festverdrahtetes Hintegrundbild enthalten sein kann.
Bei Eigenkreationen bist du frei.
Ich verstehe nicht, wo für
am 21.07.2013 - 15:00 Uhr
Ich verstehe nicht, wo für Dich der Unterschied zwischen einem selbst erstellten
<div>und dem bereits exitierenden body-Tag liegen soll. Entweder läßt sich der Gradient in der Länge stoppen oder nicht. Dann ist es egal, ob das body-Element verwendet wird oder ein selbst eingefügtes div-Element das innerhalb vom Body liegt, aber das page-Element umfassen und eine Breite von 100% bekommen soll.Beste Grüße
Werner
Hallo Werner, mmhhh. Schau
am 21.07.2013 - 15:08 Uhr
Hallo Werner,
mmhhh. Schau doch mal die Testseite an. Das stoppt bei 220px und bleibt weiß. Wenn unten allerdings ein neues, aber offenbar anderes Body beginnt, wird der Farbverlauf wiederholt. Wenn ich per PHP ein neues DIV generiere, dann bleibt das sicher oben, weil ja Header, Menüs usw. auch nicht wiederholt werden.
Also muss es entweder irgendeinen Selektor geben, der nur für das obere Body gilt oder ich versteh's auch nicht. Aber sonst hast Du natürlich recht.
Möglicherweise helfen mir einfach zwei zusätzliche Augen. Kannst Du mir vielleicht mit dem Firebug (spassigerweise kann das der Chrome nativ...) oder so mal draufschauen? Ich habe schon alle möglichen Selektoren versucht, aber es betrifft immer oben und unten oder geht gar nicht...
Danke und Grüße
Highman72
@Ronald: das hatte ich noch
am 21.07.2013 - 15:10 Uhr
@Ronald:
das hatte ich noch nicht probiert. Dann bin ich aber wieder bei der Grafik. Aber gut... wenn's ohne Klimmzüge geht...
Ich gebe noch mal Nachricht. Das Thema mit dem zusätzlichen DIV würde mich trotzdem interessieren...
Danke und Grüße
Highman72
warum hälts du dich an einem zusätzlichen DIV fest?
am 21.07.2013 - 15:34 Uhr
Drupal erzeugt für jeden Teilbereich einen DIV.
Das reicht normalerweise völlig aus. Die meisten wollen die DIVs löschen ;)
Wenn due ein eigenes Thema baust, kannst du dinge, die sonst dynamisch geladen werden, fest "verdrahten".
Ich weiß nicht, wieviel du über das Theming im allgemeinen, und Theming bei Drupal weißt.
Es lohnt sich, hier die Details zu erarbeiten.
Ich habe mir die Webseite
am 21.07.2013 - 15:54 Uhr
Ich habe mir die Webseite jetzt mal im Firefox angesehen. Du mußt dem html-Element neben dem CSS-Befehl background-image: linear-gradient ..... noch zwei weitere CSS-Angaben mitgeben:
background-size: ...;
background: no-repeat;
dann sollte das auch so aussehen wie Du willst.
Beste Grüße
Werner
Mensch Werner, you made my
am 21.07.2013 - 16:50 Uhr
Mensch Werner, you made my day...!
Auf die Idee, dass das ein blödes Repeat gewesen ist, bin ich einfach nicht gekommen. Ich dachte, dass das unten ein weiteres Feld ist, für das das gilt. Jetzt geht das logischerweise auch ohne ein weiteres DIV... Ich habe nur ein background-repeat: no-repeat gesetzt und das war es. Ein background-size war nicht nötig zu setzen...
Tausend Dank Jungs...
Beste Grüße vom jetzt glücklichen
Highman72
Oh Mann, ich bin so
am 21.07.2013 - 19:35 Uhr
Oh Mann, ich bin so blöd:
Einmal Flush Caches und mein DIV (den ich zwischenzeitlich noch nicht gelöscht hatte) war auch da... Gut, jetzt isser wieder weg, weil brauch ich nicht... Echt blöder Anfängerfehler...
Danke nochmal.
Grüße
Highman72