|
|||
Hintergrundfarbe 'Full-Width'
Hallo zusammen,
ich bin neu in diesem Forum, habe aber direkt eine Frage. Noch dazu bin ich ein absoluter Anfänger in Sachen HTML & CSS. Ich bin dabei einen Blog per WordPress aufzubauen: Http://www.cashcademy.de Ich habe hier zwei Startseiten angelegt: HOME: Die Hintergrundfarbe "indianred" wird über die volle Breite des Bildschirms gestreckt, da ich den 'site-inner' mit dem Attribut 'background-Color' eingefärbt habe. Mein Problem: Ich will diese Hintergrundfarbe nur für einen bestimmten Teil der Startseite. Ab einem gewissen Punkt soll die Standard- oder eine andere Farbe erscheinen. Das habe ich auf diese Weise nicht hinbekommen, also habe ich eine zweite Variante ausprobiert: HOME 2 Hier habe ich den einzufärbenden Teil per HTML innerhalb einer Tabelle ausgegeben, welche eben die entsprechende Hintergrundfarbe hat. Problem hierbei: Links und rechts ist die Hintergrundfarbe weiß. Ich komm nicht weiter. Dafür kann ich eben unten weiterschreiben mit der normalen Hintergrundfarbe. Ich hoffe hier weiß jemand Rat und ist so nett, mir weiterzuhelfen. Gruß Kaan Gesendet von iPhone mit Tapatalk |
Sponsored Links |
|
|||
Also falls ich dein Problem richtig verstehe, musst du verschiedene Boxen (z.B. <div> oder <section>) verwenden, die über die gesamte Breite gehen und den gewünschten Hintergrund haben. Darin befindet sich dann jeweils eine Box mit einer bestimmten Breite oder maximalen Breite, die den Inhalt zentriert. Bei home1 hast du ja einem div, das über die ganze Seite geht, den Hintergrund gegeben.
Zur Veranschaulichung habe ich mal ein Beispiel erstellt: Edit fiddle - JSFiddle |
Sponsored Links |
|
|||
Vielen Dank für deine Antwort!
Ich habe folgendes eingefügt: HTML: <section class="section-1"> <div class="inner"> <h1>Cashcademy und finanzieller Erfolg</h1> <p>Für den finanziellen Erfolg gibt es viele Irrwege, daher haben wir drei Säulen definiert, an denen du dich orientieren kannst.</p> </div> </section> Und in CSS: .page-id-79 .section-1 {background-color: #fff} .page-id-79 .inner {margin: 0 Auto; max-width:800px;text-align:center;} Es funktioniert aber leider nicht. Kann es sein, weil ich den "site-inner" bereits rot gefärbt habe und die box nun im Hintergrund erscheint? alternativ gibt es ein Tag namens "wrap" in der CSS Datei, wenn ich hier 'Max-width:100% ' eingebe, so streckt sich alles komplett, dafür ist jedoch der komplette Content inklusive Header bis an den Rand gezogen. Gesendet von iPhone mit Tapatalk |
|
|||
Vielleicht wäre es sinnvoll wenn du dich zum Boxmodell informierst.
Was genau willst du erreichen? Soll die neue Box nen weissen Hintergrund kriegen? Das hast du nämlich nirgendwo angegeben. Irgendwo hast du einen Fehler gemacht, denn mit dem Entwicklungstool deines Browsers kannst du erkennen, dass der Section kein background zugewiesen wird. Außerdem wäre es vielleicht besser die neue Section NICHT in die Box zu bauen, die den roten Hintergrund hat, sondern im HTML-Code dahinter zu platzieren. |
|
|||
Mir fehlen so ziemlich die Grundkenntnisse.
Section nicht in die box bauen? [emoji23] Ich möchte die Startseite unterteilen, so dass es mehrere, farblich und thematisch abgegrenzte, Bereiche gibt. Ich hab das ganze grad per iPhone ausprobiert. Ich setze mich heute Abend dran und melde mich nochmal. Gesendet von iPhone mit Tapatalk |
|
|||
Also ich habe es unter "HOME" ausprobiert und wie du siehst ist dort jetzt ein weisser Kasten. Allerdings auch nur bis zu einer bestimmten Breite.
Ich habe auch irgendwie den .inner weiss gefärbt und nicht die section. Hast du irgendeine Idee? |
|
|||
Dann wird es schwierig dir zu helfen...
Also wichtig ist, wenn du Boxen / Bereiche mit unterschiedlichen Farben untereinander haben möchtest, dann darfst du sie NICHT ineinander verschachteln, sondern musst sie, wie in meinem Beispiel, auch untereinander im HTML platzieren. Und ansonsten wird für Grundlagen immer wieder dieses Tutorial empfohlen: www.little-boxes.de |
|
|||
Nein du musst es nicht gleich kaufen, du kannst da bereits viel online lesen:
Little Boxes online lesen - Little Boxes - Webseiten gestalten mit HTML und CSS (Peter Müller) |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Problem mit CSS Menü | FuFi | CSS | 1 | 05.01.2015 16:46 |
Verschiebungen bei größerem Bildschirm | seelefant | CSS | 4 | 28.07.2014 16:43 |
Media Querys - Layout geht wird über den Displayrand angezeigt | DarkNemesis84 | CSS | 9 | 05.05.2013 23:00 |
CSS von Plugin beisst! | expand | CSS | 0 | 28.09.2012 18:44 |
Responsive webdesign: horizontales Menü mit angepasster Schriftgröße | Spencer | Javascript & Ajax | 3 | 19.09.2012 00:16 |