Backgroundgrafik neben Conten? HILFE!!

MarcoKL

Hallo Community,

ich bin echt am verzweifeln, habe das Theme soweit fertig, nur bekomme ich eine Sache nicht hin...

Hier der aktuelle Stand der Dinge:

Siehe Anhang, wie sie aussehen soll. Ich bekomme einfach die Backgroundgrafik neben dem Content.
Links und Rechts soll der weisse Rahmen bis nach unten zum Footer reichen.

Hier mal die CSS Datei:

Code

a {
   outline: none;
}


td img {display: block;}


body {
    margin-top: 215px;
    background-color: #EDF5FB;
    background-image: url(../layout/header.gif);
    background-repeat: no-repeat;
    background-position: center top;
    background-attachment: scroll;
    height: auto;


}


#wrapper { 
    margin: 0 auto;
    float:none;
    width: 821px;
    height: auto;
}


#navigation_links {
    float: left;
    height: auto;
    width: 125px;
    margin-left: 0px;
    margin-top: 0px;
    margin-bottom:0px;
    list-style:none;
    text-align: left;
}


#sidebar_rechts {
    float: left;
    width: 175px;
    margin-left: 0px;
    margin-top: 18px;
    margin-bottom:0px;
    list-style:none;
    text-align: left;
}


#adresse_sidebar {
    float: left;
    width: 175px;
    margin-top: 60%;
    margin-left: 0px;
    margin-bottom:0px;
    list-style:none;
    text-align: left;
}


#content {
    width: 513px;
    margin-top: 0px;
    float: left;
    background-color: #FFF;
    border: 2px solid #D6ECF7;
    height: auto;
    background-image: url(../layout/content.gif);
    background-repeat: repeat-y;
    background-position: center 400px;
}


#footer {
    width: 821px;
    height:40px;
    margin-top: 0px;
    float: left;
    clear:both;
    background-image: url(../layout/footer.gif);
    background-repeat: no-repeat;
    background-position: center top;
}


#footer_content {
    width: 821px;
    margin-top: 0px;
    float: left;
    clear:both;
    background-image: url(../layout/content.gif);
    background-repeat: repeat-y;
    background-position: center top;
}


#footer_links {
    float: left;
    width: 409px;
    margin-left: 0px;
    margin-top: 30px;
    text-align:left;
}


#footer_rechts {
    float: right;
    width: 350px;
    margin-right: 5px;
    margin-top: 30px;
    text-align:right;
}




      /* dynamic pseudo-class, Link wird ausgewählt */




/* ---------------- CONTENT-MITTE ANFANG ----------------*/
.contenttext {
    text-align:left;
    padding:15px;
    font-family:Helvetica, Arial, serif;
    color: #868686;
    font-variant:normal;
    font-size:13px;
    letter-spacing: 0.03em;
    line-height: 120%;
}


/* ---------------- FOOTER ----------------*/


.footer_navigation {
    text-align:center;
    padding-left:5px;
    font-family:Helvetica, Arial, serif;
    font-variant:normal;
    font-size:10px;
    color:#63B7DF;
    letter-spacing: 0.06em;
}


/* ----------------Anfang Hyperlinks Content----------------*/
.footer_navigation a:link {
    letter-spacing: 0em;
    color: #63B7DF;
    text-decoration: none;
    font-weight: normal;
    text-decoration:none;
    letter-spacing: 0.06em;
}
      /* link pseudo-class, noch nicht besuchter Link */
.footer_navigation a:visited {
    letter-spacing: 0em;
    color: #63B7DF;
    text-decoration: none;
    font-weight: normal;
    text-decoration:none;
}  
      /* link pseudo-class, schon besuchter Link */
.footer_navigation a:hover {
    letter-spacing: 0em;
    color: #63B7DF;
    text-decoration: underline;
    font-weight: normal;
}
      /* dynamic pseudo-class, Benutzer 'hovert' */
.footer_navigation a:active {
    letter-spacing: 0em;
    color: #63B7DF;
    text-decoration: none;
    font-weight: normal;
} 


.footer_navigation li {
    list-style:none;
    display:inline;
    padding-right: 5px;
}
.footer_navigation ul {
    margin: 0px;
    padding: 0px;
}


/* ---------------- FOOTER ----------------*/


#form_sidebar_rechts{
    float:left;
    clear: both;
    padding-top: 25px;
    padding-bottom: 25px;
}
#form_sidebar_unten{
    padding-top: 25px;
}
/* ---------------- FOOTER Links----------------*/


.sidebar_f_links {
    text-align:center;
    padding-left:5px;
    font-family:Helvetica, Arial, serif;
    font-variant:normal;
    font-size:10px;
    color:#63B7DF;
    letter-spacing: 0.02em;
}


/* ----------------Anfang Hyperlinks Content----------------*/
.sidebar_f_links a:link {
    letter-spacing: 0.02em;
    color: #63B7DF;
    text-decoration: none;
    font-weight: normal;
    text-decoration:none;
    letter-spacing: 0.02em;
}
      /* link pseudo-class, noch nicht besuchter Link */
.sidebar_f_links a:visited {
    letter-spacing: 0.02em;
    color: #63B7DF;
    text-decoration: none;
    font-weight: normal;
    text-decoration:none;
}  
      /* link pseudo-class, schon besuchter Link */
.sidebar_f_links a:hover {
    letter-spacing: 0.02em;
    color: #63B7DF;
    text-decoration: underline;
    font-weight: normal;
}
      /* dynamic pseudo-class, Benutzer 'hovert' */
.sidebar_f_links a:active {
    letter-spacing: 0.02em;
    color: #63B7DF;
    text-decoration: none;
    font-weight: normal;
} 


.sidebar_f_links li {
    list-style:none;
    display:inline;
    padding-right: 5px;
}
.sidebar_f_links ul {
    margin: 0px;
    padding: 0px;
}


/* ---------------- FOOTER ----------------*/
/* ---------------- FOOTER Rechts----------------*/


.sidebar_f_rechts {
    text-align:center;
    padding-left:5px;
    font-family:Helvetica, Arial, serif;
    font-variant:normal;
    font-size:10px;
    color:#63B7DF;
    letter-spacing: 0.02em;
}


/* ----------------Anfang Hyperlinks Content----------------*/
.sidebar_f_rechts a:link {
    letter-spacing: 0em;
    color: #63B7DF;
    text-decoration: none;
    font-weight: normal;
    text-decoration:none;
    letter-spacing: 0.02em;
}
      /* link pseudo-class, noch nicht besuchter Link */
.sidebar_f_rechts a:visited {
    letter-spacing: 0.02em;
    color: #63B7DF;
    text-decoration: none;
    font-weight: normal;
    text-decoration:none;
}  
      /* link pseudo-class, schon besuchter Link */
.sidebar_f_rechts a:hover {
    letter-spacing: 0.02em;
    color: #63B7DF;
    text-decoration: underline;
    font-weight: normal;
}
      /* dynamic pseudo-class, Benutzer 'hovert' */
.sidebar_f_rechts a:active {
    letter-spacing: 0.02em;
    color: #63B7DF;
    text-decoration: none;
    font-weight: normal;
} 


.sidebar_f_rechts li {
    list-style:none;
    display:inline;
    padding-right: 5px;
}
.sidebar_f_rechts ul {
    margin: 0px;
    padding: 0px;
}


/* ---------------- FOOTER ----------------*/

Alles anzeigen

Ist hier zufällig ein Wordpress bzw. CSS Crack anwesend und kann mir bei meinem Problem weiterhelfen?

Bin für jeden Tipp sehr dankbar.

Grüße
Marco

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Marcus[IS]

Hi Marco,

ich bin zwar kein Fachmann, aber so wie ich deinen Seitenaufbau verstehe, könntest du mal folgendes versuchen;

Füge bei deiner CSS in

#Navigation_links und #Sidebar_rechts einfach eine Background Color Anweisung ([FONT=monospace]background-color: #ffffff) [/FONT]hinzu, dann müsste es theoretisch hinhauen und die beiden sollten einen weißen Hintergrund haben.

Gruß,
Marcus

Edit:
Ich habe gerade gesehen, dass Firebug mir eine Fehlermeldung ausgibt;
404 Not Found - ...one-step.de/wp/mako/wp-content/themes/mako_theme/layout/h_back.png

Keine Ahnung obs wichtig ist, aber wenn du es drinne hast, sollte es auch euf den FTP überspielt werden. ;)

MarcoKL

Danke für deine Antwort..

Funktioniert leider nicht, da zerschießt er mir das Layout und setzt den Content nach unten...

Weiss sonst einer weiter..

hero1977

ich denke da fehlt einfach ein DIV für den hintergrund. versuchs mal so:

ersetze (ich denke mal in der "header.php")

Code

<body>
<div id="wrapper">

mit

Code

<div id="wrapper">
<div class="bgcontent" style="background:#FFF">

und in der "footer.php"

Code

<!-- Ende: Rechte Sidebar -->           
</div></div></div>

mit

Code

<!-- Ende: Rechte Sidebar -->           
</div></div></div>
</div>

also du musst da ein div um den ganzen kram rumziehen und dem die hintergrundfarbe weiss geben.

MarcoKL

Macht er auch nicht.. ist doch echt zum verzweifeln..

telekommander

Der [FONT=Courier New]#content[/FONT] -Container ist der falsche Ort für das Hintergrundbild.
Dieser Container ist immer nur so lang/hoch wie der Inhalt.

Das Hintergrundbild müsste also in der [FONT=Courier New]#wrapper[/FONT] -Container.

Code

[COLOR=Red]#wrapper[/COLOR] {
    margin: 0 auto;
    float:none;
    width: 821px;
    height: auto;
    [COLOR=Red]background: url(../layout/content.gif) center 400px repeat-y;[/COLOR]
}

Damit es auch korrekt dargestellt wird ist ein "clearen" nötig.
Dazu den entsprechenden Container innerhalb des [FONT=Courier New]#wrappers[/FONT] setzen.

Code

<div style="clear: both;"></div> [COLOR=SeaGreen]<!-- NACH HIER -->[/COLOR]
</div>
<div style="clear: both;"></div> [COLOR=Red]<!-- VON HIER -->[/COLOR]
</body>
</html>

So seh ich es ...

MarcoKL

Vielleicht sollte ich noch kurz anfügen, dass ich eine Grafik "conten.gif" habe.

Habe diese Datei ebenfalls mal angehängt. Vielleicht hilft euch das weiter..

MarcoKL

Zitat von telekommander
Der [FONT=Courier New]#content[/FONT] -Container ist der falsche Ort für das Hintergrundbild.
Dieser Container ist immer nur so lang/hoch wie der Inhalt.
Das Hintergrundbild müsste also in der [FONT=Courier New]#wrapper[/FONT] -Container.
Code
[COLOR=Red]#wrapper[/COLOR] {
    margin: 0 auto;
    float:none;
    width: 821px;
    height: auto;
    [COLOR=Red]background: url(../layout/content.gif) center 400px repeat-y;[/COLOR]
}
Damit es auch korrekt dargestellt wird ist ein "clearen" nötig.
Dazu den entsprechenden Container innerhalb des [FONT=Courier New]#wrappers[/FONT] setzen.
Code
<div style="clear: both;"></div> [COLOR=SeaGreen][/COLOR]
</div>
<div style="clear: both;"></div> [COLOR=Red][/COLOR]
</body>
</html>
So seh ich es ...

Super Tipp, Danke Dir..

jetzt verdeckt es die Schwanzflosse.. Ist aktuell über den Link zu sehen...
Wie positioniere ich es den weiter unten?

hero1977

versuch mal das:

header:

Code

<div id="wrapper" class="cf">

style:

Code

.cf {
display: inline-block;
}
.cf[class] {
display: block;
overflow: hidden;
}


body {
    margin-top: 215px;
    background-color: #EDF5FB;
    height: auto;
}


#wrapper { 
    margin: 0 auto;
    float:none;
    width: 821px;
    height: auto;
    background:#FFF url(../layout/header.gif) 0 0 no-repeat;
    padding-top:200px;
}

Alles anzeigen

MarcoKL

Geht zwar nun bis nach unten, aber die Backgroundgrafik "content.gif" fehlt.. also die blaue Linie nach unten an beiden Seiten...

Und der Abstand von nach oben hin, ist total groß..

telekommander

Hier stösst CSS an die Grenzen. Den z-index des [FONT=Courier New]<body>[/FONT] eine Ebene höher legen bleibt wirkungslos, logisch.
Dir fehlt ein zusätzlicher[FONT=Courier New] #header[/FONT] -Container innerhalb des [FONT=Courier New]#wrapper[/FONT] -Container dort ensprechend das Hintergrundbild definieren.

Code

<div id="wrapper">
[COLOR=Red]<div id="header"> </div>[/COLOR]

Code

body {
   background-color: #EDF5FB;
}
#header {
   width: 821px;
   height: 420px;
   background: url(../layout/header.gif)  no-repeat;
}
#wrapper { 
    margin: 0 auto;
    float:none;
    width: 821px;
    height: auto;
    background: url(../layout/content.gif) repeat-y;
}

Alles anzeigen

MarcoKL

Schau mal eben, der Content verschiebt sich total nach unten... *verzweifel*

telekommander

Zitat von MarcoKL

Schau mal eben, der Content verschiebt sich total nach unten... *verzweifel*

Ja ja, entspann dich ...

Jetzt setze ein negatives margin-bottom für den #header -Container ...

Code

#header {
   width: 821px;
   height:400px;
   float:none;
   background: url(../layout/header.gif)  no-repeat;
[COLOR=Red]   margin-bottom: -180px;[/COLOR]
}

... und es passt.

MarcoKL

Perfekt !!! Tausend Dank

Mein Held des Tages ;)

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Backgroundgrafik neben Conten? HILFE!!

Jetzt mitmachen!