Boxen Hintergrund

[rapid10]

Hallo ihr CSS-Profis!

Ich habe ein Problem mit einen Bildhintergrund. Und zwar habe ich Boxen für eine Webseite gemacht, die sich per Javascript ausfahren lassen.
Ich habe es aber immer noch nicht geschafft, den Boxen den Hintergrund zu geben: http://beta.jbcompany.org/jbtechnology/img/boxen2.png

Ich habe alles schon versucht, doch anscheinend mach ich was falsch. :(
Es wäre super wenn ihr mir helfen könntet.

JB Technology

Vielen Dank für eure Hilfe.

Mit bestem Dank rapid10

 

[assmaje]

Was genau funktioniert denn nicht? Hast du die Hintergründe (du musst das von dir gepostete Bild in 3 Teile teilen) für die Boxen den entsprechenden <div>s per background:url(pfad/bild.png); zugewiesen? Ein passender Code-Ausschnitt wäre sicherlich hilfreich.

 

[rapid10]

Wie du sicher sehen kannst, habe ich bei den eigentlichen Boxen keinen Hintergrund.
Welchem Element aus meinen Quellcode soll ich den Hintergrund zu weisen?
Den Quellcode bekommst du, wenn du auf der Webseite rechts klickst und dann auf Quellcode anzeigen klickst. :)
Danke für deine Hilfe.

 

[assmaje]

Welchem Element aus meinen Quellcode soll ich den Hintergrund zu weisen?

Die 3. Box erhält eine id, da sie einen anderen Hintergrund als die beiden anderen Boxen bekommt.

HTML:

<div class="box">
  ...
</div>

<div class="box">
  ...
</div>

<div id="box3">
  ...
</div>

CSS:

div.box
{
  ...
  background:url(pfad/box12.png) top right repeat-y;
}

div#box3
{
  ...
  background:url(pfad/box3.png) top right repeat-y;
}

Die Bilder sähen dann folgendermaßen aus:

box12.png:

box3.png:

Anscheinend willst du aber mit dem Bild box12.png im Endeffekt nur einen Rahmen erzeugen, was jedoch falsch ist, dafür gibt es CSS. Der Code sähe dann so aus:

HTML:

<div class="box">
  ...
</div>

<div class="box">
  ...
</div>

<div id="box3">
  ...
</div>

CSS:

div.box
{
  ...
  border-right:3px solid #446D8C;
}

div#box3
{
  ...
  background:url(pfad/box3.png) top right repeat-y;
}

---

Den Quellcode bekommst du, wenn du auf der Webseite rechts klickst und dann auf Quellcode anzeigen klickst. :)
Danke für deine Hilfe.

Ist mir bewusst, aber falls du mehr Antworten erhalten möchtest, solltest du auch den entsprechenden Code posten. ;)

 

[rapid10]

Nein, ich möchte das nicht so haben. Ich möchte, dass wenn man die Boxen ausfährt, auch der Hintergrund der anderen Boxen mit fährt - der Hintergrund soll nicht geteilt sein.
Es soll, wie die Grafik im Main-Bereich so oft untereinander angezeigt werden, so lange der Text ist.
Ich hoffe ich versteht was ich meine.

Hier ist der Quellcode des Teils, den ich mit dem Hintergrund haben will:

<ul id="boxen">
            <div id="navigation2"></div>
            <li>
                <div class="box">
                    <h2>Box 1</h2>
                    <p>
                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. <br /> <a href="#">mehr lesen</a>
                    </p>
                    <p class="more">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    </p>
                </div>
            </li>
            <li>
                <div class="box">
                    <h2>Box 2</h2>
                    <p>
                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. <br /> <a href="#">mehr lesen</a>
                    </p>
                    <p class="more">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    </p>
                </div>
            </li>
            <li>
                <div class="box">
                    <h2>Box 3</h2>
                    <p>
                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. <br /> <a href="#">mehr lesen</a>
                    </p>
                    <p class="more">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    </p>
                </div>
            </li>
        </ul>

CSS:

/* Navigation 2 */
#navigation2  {
    height: 60px;
    background: url(../img/navigation2.png) no-repeat center;
}

/* Boxen */
ul#boxen {
    background: url(../img/white.png) repeat-y center;
}

ul#boxen {
    padding: 0px;
    list-style: none;
    clear: both;
}

ul#boxen a {
    color: #212121;
    text-decoration: none;
}

ul#boxen a:hover {
    text-decoration: underline;
}

ul#boxen li {
    width: 216px;
    float: left;
    padding: 0px 8px 0px 8px;
    text-align: justify;
}

 

[rapid10]

Ich hab das Problem! :-) Ich musste ul die Eigenschaft owerflow: hidden geben.
So einfach wäre es gewesen. :-D