zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Hintergrundfarbe 'Full-Width'

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 25.02.2016, 16:29
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.02.2016
Beiträge: 17
kabopress befindet sich auf einem aufstrebenden Ast
Standard 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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 26.02.2016, 09:12
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 02.01.2012
Beiträge: 487
dazzle89 wird schon bald berühmt werden
Standard

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
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 26.02.2016, 13:37
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.02.2016
Beiträge: 17
kabopress befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #4 (permalink)  
Alt 26.02.2016, 13:39
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.02.2016
Beiträge: 17
kabopress befindet sich auf einem aufstrebenden Ast
Standard

PS: auch in CSS mit '.section-1 {color:white}' bekomme ich kein Ergebnis


Gesendet von iPhone mit Tapatalk
Mit Zitat antworten
  #5 (permalink)  
Alt 26.02.2016, 14:23
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 02.01.2012
Beiträge: 487
dazzle89 wird schon bald berühmt werden
Standard

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.
Mit Zitat antworten
  #6 (permalink)  
Alt 26.02.2016, 15:28
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.02.2016
Beiträge: 17
kabopress befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #7 (permalink)  
Alt 26.02.2016, 19:49
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.02.2016
Beiträge: 17
kabopress befindet sich auf einem aufstrebenden Ast
Standard

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?
Mit Zitat antworten
  #8 (permalink)  
Alt 29.02.2016, 09:01
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 02.01.2012
Beiträge: 487
dazzle89 wird schon bald berühmt werden
Standard

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
Mit Zitat antworten
  #9 (permalink)  
Alt 29.02.2016, 11:13
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.02.2016
Beiträge: 17
kabopress befindet sich auf einem aufstrebenden Ast
Standard

Ok verstehe.

Meinst du "Einstieg in CSS"?




Gesendet von iPhone mit Tapatalk
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 29.02.2016, 11:19
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 02.01.2012
Beiträge: 487
dazzle89 wird schon bald berühmt werden
Standard

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)
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 22:17 Uhr.