|
|||
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; } |
Sponsored Links |
|
|||
Hallo
Zitat:
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:
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) |
Sponsored Links |
|
|||
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; } |
|
|||
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. |
|
|||
Hallo,
es ist schade das du uns trotz Nachfrage keinen vernünftigen Quelltext zur Verfügung stellst. Deshalb kann ich nur allgemein antworten. Zitat:
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 |
|
|||
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. |
|
|||
Zitat:
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 |
Stichwörter |
divs, hintergrundbild, verschachtelt, wiederholen |
Themen-Optionen | |
Ansicht | |
|
|
Ä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 |