zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Hintergrund wiederholt sich nicht bei verschachtelten divs

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 12.05.2015, 15:57
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.05.2015
Beiträge: 3
dk206 befindet sich auf einem aufstrebenden Ast
Standard Hintergrund wiederholt sich nicht bei verschachtelten divs

Hallo,

ich hoffe das mir jemand weiterhelfen kann, denn trotz Lösungssuche und mehrerem ausprobieren will meine Webseite einfach nicht so funktionieren wie ich es gerne hätte

Ich habe mehrere verschachtelte divs, in einem liegt die Hintergrundgrafik welche sich wiederholen soll wenn der Inhalt größer wird. Leider tut es das nicht und ich weiß nicht woran das liegt oder vielleicht sehe ich auch den Wald vor lauter Bäumen nicht mehr.

Würde mich sehr über Hilfe und Tipps freuen.

Vielen Dank und Grüße,
dk

Hier mein Code:
<div class="main_content">
<div class="main_content_top">Lorem ipsum</div>

<div class="main_content_center">
<div id="box_content">
<div class="box">
<div class="box_title">>Lorem ipsum</div>
<p>Lorem ipsum</p>
</div>

<div class="box">
<div class="box_title">>Lorem ipsum</div>
<p>Lorem ipsum</p>
</div>

<div class="box_news">
<div class="box_title">>Lorem ipsum</div>
<p>Lorem ipsum</p>
</div>
</div><!--end of box content-->
</div><!--end of main content center-->
</div><!--end of main content-->


Hier mein CSS:
.main_content{
width:1202px;
height:auto;
margin:auto;
padding:0 0 0 0;
}

.main_content_top{
width:1202px;
height:42px;
background-image: url("/staging/img/content_top.png");
}

.main_content_center{
width:1202px;
height: auto;
min-height: 340px;
background: url("/staging/img/content_center.png") repeat-x !important;
}

.main_content_bottom{
width:1202px;
height:42px;
background-image: url("/staging/img/content_bottom.png");
}

#box_content{
width:930px;
clear:both;
height: auto;
padding: 0 0 0 0;
margin: 0 0 0 183px;
}

.content_title{
font-size:18px;
color:#ff7f00;
padding:10px 0 0 15px;
font-family:Arial, Helvetica, sans-serif;
font-weight: bold;
}

.box{
float: left;
width: 250px;
min-height: 300px;
height: auto;
display: inline-block;
position: relative;
margin: 0 25px 0 0;
padding: 0 20px;
text-align:left;
text-decoration: none;
font: bold 12px/25px Arial, sans-serif;

text-shadow: 1px 1px 1px rgba(255,255,255, .22);

-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;

-webkit-box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);
-moz-box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);
box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);

-webkit-transition: all 0.15s ease;
-moz-transition: all 0.15s ease;
-o-transition: all 0.15s ease;
-ms-transition: all 0.15s ease;
transition: all 0.15s ease;

color: #19667d;

background: #eeeeee; /* Old browsers */
background: -moz-linear-gradient(top, #eeeeee 0%, #c9c7c7 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#c9c7c7)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #eeeeee 0%,#c9c7c7 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #eeeeee 0%,#c9c7c7 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #eeeeee 0%,#c9c7c7 100%); /* IE10+ */
background: linear-gradient(top, #eeeeee 0%,#c9c7c7 100%); /* W3C */

box-shadow: 5px 5px 5px #818181;
}
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 12.05.2015, 19:10
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo
Zitat:
ich hoffe das mir jemand weiterhelfen kann, denn trotz Lösungssuche und mehrerem ausprobieren will meine Webseite einfach nicht so funktionieren wie ich es gerne hätte
Gerne, wenn du uns die dazu notwendigen Infos gibst. Daran hapert es zur Zeit noch.

1. Uns fehlt das Hintergrundbild.

2. In welchen Container soll es eingefügt werden?

Und dann noch ein paar Bitten:

1. Packe Quelltext bitte in die zugehörigen Tags

Code:

2. Machs einfacher, lass unnötigen Quelltext weg. Im CSS hat du z. B. die class box_content und main_content_bottom, die im HTML-Quelltext überhaupt nicht vorkommen.

3. Im HTML-Quelltext gibt es wiederum ein div.box_news, für das kein CSS existiert. Ich denke nicht das das so sein soll.

4. Lasse unnötige id- und class-Namen weg.

5. Verwende div nur wo es notwendig ist. Verwende geeignetere Elemente.

6. Verzichte auf "important!"

Und stimmen überhaupt die Pfad- und Dateinamen zu den Bildern? Der Slash "/" zu Beginn funktioniert häufig lokal nicht.

Gruss

MrMurphy

Geändert von MrMurphy (12.05.2015 um 19:58 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 13.05.2015, 16:04
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.05.2015
Beiträge: 3
dk206 befindet sich auf einem aufstrebenden Ast
Standard

Hallo MrMurphy,

tut mir leid, das mit den Code Tags habe ich gar nicht gesehen
Das Hintergrundbild und Screenshots wie es bei mir aktuell aussieht sobald die Mindesthöhe von 340px überschritten wird und wie das mit den Boxen gemeint ist und die Mindesthöhe nicht überschritten wird habe ich angehängt.

Das Hintergrundbild soll in den Container main_content_center
Gebe ich main_content_center keine Mindesthöhe wird mir der Hintergrund gar nicht angezeigt weil er keine Höhe hat. Der eigentliche Inhalt liegt dann in den Containern box_content und box.
Die Grafiken werden mir alle angeteugt das ist nicht das Problem und die Pfade ändere ich dann wenn die Webseite fertig ist und auf den richtigen Server umzieht.
Sollte der Container main_content_center sich nicht automatisch von der Höhe her anpassen? Hatte bisher noch nie Probleme damit, aber hier weiß ich einfach nicht was ich falsch gemacht habe

"important!" habe ich nur verwenden um zu versuchen das Wiederholen zu erzwingen. Ich meiner Verzweiflung habe ich alles einfach mal ausprobiert.

Ich hoffe ich konnte mein Problem jetzt etwas besser erklären!?

Nochmals lieben Dank und Grüße

Ich versuche nochmal meinen Code etwas übersichtlicher zusammenzufassen:
Code:
<div class="main_content_center"><!-- Hier soll das Hintergrundbild angezeigt werden und sich automatisch wiederholen wenn der Inhalt größer wird -->
  <div id="box_content">
   <div class="box">
     <div class="box_title">>Lorem ipsum</div>
     <p>Lorem ipsum</p>
    </div><!--end of box-->
  </div><!--end of box content-->
</div><!--end of main content center-->
Code:
.main_content_center{
  width:1202px;
  height: auto;
  min-height: 340px;
  background: url("/staging/img/content_center.png") repeat-x !important;
}

#box_content{
  width:930px;
  clear:both;
  height: auto;
  padding: 0 0 0 0;
  margin: 0 0 0 183px;
}

.content_title{
  font-size:18px;
  color:#ff7f00;
  padding:10px 0 0 15px;
  font-family:Arial, Helvetica, sans-serif;
  font-weight: bold;
}

.box{
  float: left;
  width: 250px;
  min-height: 300px;
  height: auto;
  display: inline-block;
  position: relative;
  margin: 0 25px 0 0;
  padding: 0 20px;
  text-align:left;
  text-decoration: none;
  font: bold 12px/25px Arial, sans-serif;

  text-shadow: 1px 1px 1px rgba(255,255,255, .22);

  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;

  -webkit-box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);
  -moz-box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);
  box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);

  -webkit-transition: all 0.15s ease;
  -moz-transition: all 0.15s ease;
  -o-transition: all 0.15s ease;
  -ms-transition: all 0.15s ease;
  transition: all 0.15s ease;

  color: #19667d;

  background: #eeeeee; /* Old browsers */
  background: -moz-linear-gradient(top, #eeeeee 0%, #c9c7c7 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#c9c7c7)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #eeeeee 0%,#c9c7c7 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #eeeeee 0%,#c9c7c7 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #eeeeee 0%,#c9c7c7 100%); /* IE10+ */
  background: linear-gradient(top, #eeeeee 0%,#c9c7c7 100%); /* W3C */

  box-shadow: 5px 5px 5px #818181;
}
Angehängte Grafiken
Dateityp: jpg Zwischenablage01.jpg (95,7 KB, 5x aufgerufen)
Dateityp: png content_center.png (4,5 KB, 5x aufgerufen)
Dateityp: jpg Zwischenablage02.jpg (67,8 KB, 6x aufgerufen)
Mit Zitat antworten
  #4 (permalink)  
Alt 13.05.2015, 16:34
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Du brauchst für die Umsetzung von den Bildern wie du sie haben willst keinerlei Hintergrundbilder oder auch keine in 3 Teile unterteilten divs oder ähnliches.
Dafür reicht eineinzelnes Element mit einem linear-gradient vollkommen aus.
Mit Zitat antworten
  #5 (permalink)  
Alt 13.05.2015, 17:12
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo,

es ist schade das du uns trotz Nachfrage keinen vernünftigen Quelltext zur Verfügung stellst. Deshalb kann ich nur allgemein antworten.

Zitat:
Sollte der Container main_content_center sich nicht automatisch von der Höhe her anpassen?
Ja, wenn er Inhalt hat auf den er reagieren kann. Durch das Floaten der drei inneren div werden diese "aus dem Fluss genommen", wie es so schön heißt.

Das kannst du verhindern indem du an passender Stelle ein clear setzt. Merksatz:

Wer floatet muss auch clearen.

Siehe auch

CSS clear ? float:left / right beenden | mediaevent.de

Mit den Suchbegriffen "float clear css" findest du bei Google noch jede Menge andere Infos dazu.

Gruss

MrMurphy
Mit Zitat antworten
  #6 (permalink)  
Alt 13.05.2015, 17:26
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Nur für den Fall dass sich der Threadersteller fragt, was für uns ein vernünftiger Quelltext ist.
Einer, den man per copy-paste in zB jsfiddle.net oder codepen.io kopieren und das Problem sofort nachvollziehen kann. Also eins, wo auch alle Bildverlinkungen korrekt funktionieren.
Mit Zitat antworten
  #7 (permalink)  
Alt 14.05.2015, 12:18
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.05.2015
Beiträge: 3
dk206 befindet sich auf einem aufstrebenden Ast
Daumen hoch

Zitat:
Zitat von MrMurphy Beitrag anzeigen
Ja, wenn er Inhalt hat auf den er reagieren kann. Durch das Floaten der drei inneren div werden diese "aus dem Fluss genommen", wie es so schön heißt.

Das kannst du verhindern indem du an passender Stelle ein clear setzt. Merksatz:

Wer floatet muss auch clearen.
Hallo MrMurphy,

vielen Dank, das mit dem clearen hat geholfen!

Und zu dem Punkt das das ich keinen "vernünftigen" Quelltext zur Verfügung gestellt habe. Nicht jeder ist mit Foren vertraut und ich muss leider gestehen das ich dazu gehöre.
Nichtsdestotrotz bin ich sehr dankbar für Eure Hilfe und Tipps die ich hier bekommen habe und für's nächste mal weiß ich es dann besser

LG,
dk206
Mit Zitat antworten
Antwort

Stichwörter
divs, hintergrundbild, verschachtelt, wiederholen

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
Ein Bild im Vordergrund, DIVs im Hintergrund Violette (X)HTML 12 31.03.2013 13:53
div Hintergrund wird im IE durch Hintergrund des unteren divs überlagert ren83 CSS 6 19.10.2008 16:50
Mehrere DIV's im Hintergrund anordnen wolf1985 CSS 5 12.05.2008 13:34
Div Orientierung Leonidus CSS 22 30.05.2007 18:05
height: auto; immer 0 bei verschachtelten divs elBoB CSS 10 30.05.2006 13:26


Alle Zeitangaben in WEZ +2. Es ist jetzt 15:24 Uhr.