Contentbackground Problem

Laksone · 15.10.2009

Hi,

ich hoffe Ihr könnt mir helfen. Und zwar soll das hintergrundbild im contentbereich FIX sein! im firefox wird alles richtig angezeigt, im ie allerdings nicht! wenn ich das ganze mit "background-attachment" mache ist der contentbackground so fixiert dass wenn ich die ganze seite scrolle nicht mitscrollt! also nochmal kurz! im contentbereich soll nur der text scrollen!!!

hoffe das war eeeeinigermaßen verständlich....

danke schonmal!!!!!
__________________________________________________________________

#content {
background: url(../bilder/content.jpg); background-attachment:fixed ; background-position: center 330px; background-repeat:no-repeat;
width: 691px;
height: 496px;
float: left;
overflow-x:hidden;
overflow-y:auto;
overflow-y:scroll;

}

____________________________________________________________

<div id="content">

<div class="padding">

<a name="start"> <h1> Die Allrounder </h1> </a>

<br>
<br>
<br>
<br>
<br>

<a name="dienstleistungen"> aaa </a>

</div>

</div>
__________________________________________________________

Silvio · 15.10.2009

AW: Contentbackground Problem

Sorry, also entweder hab ich gerade ein Konzentrations-Tief, oder ich vestehe noch nicht so richtig was Du möchtest.
Kannst Du nicht die Seite online stellen und hierher verlinken?

Laksone · 15.10.2009

AW: Contentbackground Problem

alsoo versuch es nochmal.....

im contentbereich soll sich NUR der text scrollen lassen!!!
(background-attachment: fixed)

das funktioniert auch so weit!!!

wenn ich jetzt allerdings die gesamte seite scrolle (also nicht den content) bleibt der contentbackground trotzdem an der gleichen stelle!!! d.h. wie auf dem bild passt das layout einfach nicht mehr!!!

contentbg soll mitscrollen beim scrollen der gesamten seite aber nicht beim scrollen im contentbereich!!!!

Ja und wie gesagt im Firefox funktioniert es ganz normal!!!

hoffe dass es jetzt verständlich ist!?

Laksone · 15.10.2009

AW: Contentbackground Problem

Okay hier die seite!!!

Silvio · 15.10.2009

AW: Contentbackground Problem

Ah, danke, jetzt verstehe ichs

Einfach:

background-attachment: scroll;

aus der master.css entfernen und dann klappts

Viele Grüße
Silvio

tai · 15.10.2009

AW: Contentbackground Problem

Bei mir funktioniert deine Seite mit Opera, Firefox und auch mit dem Internet Explorer.

Laksone · 15.10.2009

AW: Contentbackground Problem

danke schonmal,

aaaaaaaaaaber jetzt kommt das problem.....

Es funktioniert nur im Firefox! IE scrollt den contentbackground!!

Gruß

der Laks

Silvio · 15.10.2009

AW: Contentbackground Problem

Laksone schrieb:
danke schonmal,

aaaaaaaaaaber jetzt kommt das problem.....

Es funktioniert nur im Firefox! IE scrollt den contentbackground!!

Gruß

der Laks

Stimmt, ich hab nur im IE 8 geschaut im IE 6 scrollt er noch...Moment

Edit:

Schreib Deinen content im css mal so in eine extra css-Datei für IE (mit Headeranmerkung: <!--IF IE balbla kennste oder?), dann klappts:
#content {

background: url(../bilder/content.jpg) 0 0 no-repeat fixed;
width: 691px;
height: 496px;
float: left;
overflow-x:hidden;
overflow-y:auto;
overflow-y:scroll;

}

Laksone · 15.10.2009

AW: Contentbackground Problem

hmmm.... sorry aber bei mir funktioniert es so nicht.... auch nicht im firefox!!!

danke für deine mühe schonmal! wär cool wenn du noch ne idee hättest?!
bin absolut ratlos!!!

Silvio · 15.10.2009

AW: Contentbackground Problem

Laksone schrieb:
hmmm.... sorry aber bei mir funktioniert es so nicht.... auch nicht im firefox!!!

danke für deine mühe schonmal! wär cool wenn du noch ne idee hättest?!
bin absolut ratlos!!!

Also, ich weiß nicht was Du machst, aber bei mir funktionierts im IE 6.
Du musst halt diesen o.a. geführten Code speziell für die IEs unter 8 in eine extra CSS-Datei bringen und anfügen.

Laksone · 15.10.2009

AW: Contentbackground Problem

hmm... habs jetzt einfach ersetzt in der master.css
versteh nicht ganz was ich machen soll ?!

also eine kopie erstellen von der master.css und dann.... ??? oder wie soll ich das verstehen?!

Silvio · 15.10.2009

AW: Contentbackground Problem

1. Lass es bitte, so, wie Du es hattest in der master.css
2. Erstelle eine neue css-Datei (zb. master_ie6.css) und füge meinen abgeänderten Code oben ein
3. Füge eine Browserweiche im head-Bereich Deiner index.html ein:

HTML:

<!--[if lt IE 8]>
     <style type="text/css">@import url(master_ie6.css);</style>
<![endif]-->

Dann müsste es klappen. Falls jemand einen Internet Explorer kleiner als IE8 hat gilt für den background Deines Contentsbereich das, was in der master_ie6.css steht, ansonsten nimmt er die normale css

Ich hoffe, ich konnte Dir helfen.

Silvio

Laksone · 15.10.2009

AW: Contentbackground Problem

hmm ich glaube ich habe alles richtig gemacht aber es funktioniert trotzdem nicht!!!!

So sieht das ganze jetzt bei mir aus!!!

ff zeigt alles richtig an! ie macht contentbg repeat und scrollt den bg (trotz alternativer .css) !!?

Silvio · 15.10.2009

AW: Contentbackground Problem

Ich muss leider los, ich schreib Dir morgen nochmal. Ist das ok? Vielleicht schaut ja auch noch ein anderer drüber. auf jeden Fall hattest Du eben in der IF-Anweisung die Versionierung nicht angesprochen und das lower then entfernt.
Die Url scheint nicht richtig zu sein.
Wenn mann statt master.css master_ie.css bei der normalen Verknüpfung angbibt, läufts im IE.

Herr_D · 15.10.2009

AW: Contentbackground Problem

css

Code:

#bg_content {
width: 691px;
height: 496px;
margin:0; padding:0;

background: url(../bilder/content.jpg); 
background-position: center 330px; 
background-repeat:no-repeat;

overflow:hidden;
}

#content {

width: 691px;
height: 496px;
float: left;
overflow-x:hidden;
overflow-y:auto;
overflow-y:scroll;

}

HTML:

<div id="bg_content">
<div id="content">Inhalt</div>
</div>

Wahlweise dem ganzen Bereich (rechts inhalt links) einen bg zuordnen das erspart das zusätzliche div...

Laksone · 15.10.2009

AW: Contentbackground Problem

@ Silvio

Wenn ich statt der master.css die master_ie6.css nehme funktioniert es trotzdem nicht?! ----> contentbg scrollt beim scrollen der gesamten seite nicht mit!

_____________________________________________
@ Herr_D

So hab ich es auch schon versucht, dann verschieben sich die divs allerdings!??

Vielen Danke schonmal an alle!!!!!

Herr_D · 15.10.2009

AW: Contentbackground Problem

whoops sorry... war nicht ganz bei der sache... das float muß natürlich auch verschoben werden

Nur noch eine css notwendig...

Code:

html, body {
        margin: 0;
        padding: 0;
}


body {
        font-family:  Helvetica, Arial, Verdana, Sans-serif;
        font-size: 12px;
        color: #666666;
        background: #ffffff;
}

  /* LINKS */

a:link{
color:#484848;
text-decoration: none
}
a:visited{
color:#484848;
text-decoration: none
}
a:hover{font-weight: bolder;
color: #32cd32;
text-decoration: none
}
a:active{color:#484848;
text-decoration: none
}

.hidden {
        display: none;
}

#wrapper {
        width:845px;
        margin:         auto;
}

#header {
        background: url(../bilder/header.jpg);
        height: 281px;
}

#navigation {
        background: url(../bilder/navi.jpg);
        height: 50px;
}

#left {
        background: url(../bilder/left.jpg);
        width: 77px;
        height: 496px;
        float: left;
}

[COLOR="Red"]#bg_content {
            width: 691px;
            height: 496px;
            margin:0;
            padding:0;
            background-image:url(../bilder/content.jpg);
            background-repeat:no-repeat;
            overflow:hidden;
            float: left;
}

#content {
        width: 691px;
        height: 496px;
        overflow-x:hidden;
        overflow-y:auto;
        overflow-y:scroll;
}[/COLOR]

#right {
        background: url(../bilder/right.jpg);
        width: 77px;
        height: 496px;
        float: left;
}

#footer {
        background: url(../bilder/footer.jpg);
        height: 92px;
        clear: both;
}

#fixadresse1
{
        color:#736F6E;
        text-align: center;
           margin-left:  left:50%;
}

h1 {
        margin: 0;
        padding: 0;
        font-family: Helvetica, Arial, Verdana, Sans-serif;
        font-size: 18px;
        color: #32cd32;
}


#navigation .navi{    /* PADDING FÜR DIE NAVIGATION */
                font-size: 13px;
                margin: 00;
                padding-top: 10px;
}

#content h2 {
        margin: 0;
        padding: 0;
}

#content p {
        margin: 0;
        padding: 0;
}

#content .padding {
        padding: 30px;

}

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

        <head>
                <meta http-equiv="Content-type" content="text/html; charset=UTF-8">
                <title>Die Allrounder - Ihr Helfer im Haushalt und Garten</title>
                <meta http-equiv="Content-Language" content="en-us">
                <meta http-equiv="imagetoolbar" content="no">
                <meta name="MSSmartTagsPreventParsing" content="true">
                <meta name="description" content="Description">
                <meta name="keywords" content="Keywords">
                <meta name="author" content="Die Allrounder">
               <style type="text/css" media="all">@import "css/master.css";</style>
        </head>

        <!-- WRAPPER -->

        <body>
                <div id="wrapper">
                        <!-- HEADER -->
                        <div id="header">
                                <h1></h1>
                        </div>
                        <!-- NAVIGATION -->
                        <div id="navigation">
                                <center>
                                        <div class="navi">
                                                <a href="#start" target="_self">Home </a>| <a href="#dienstleistungen" target="_self">Dienstleistungen </a></div>
                                </center>
                        </div>
                        <div id="left"></div>
                        <div id="bg_content">
                                <div id="content">
                                        <div class="padding">
                                                <a name="start">
                                                        <h1>Die Allrounder</h1>
                                                </a><br>
                                                <br>
                                                <br>
                                                <br>
                                                <br>
                                                <br>
                                                <br>
                                                <br>
                                                <br>
                                                <br>
                                                <br>
                                                <br>
                                                <br>
                                                <br>
                                                <br>
                                                <br>
                                                <br>
                                                <br>
                                                <br>
                                                <br>
                                                <br>
                                                <br>
                                                <br>
                                                <br>
                                                <br>
                                                <br>
                                                <br>
                                                <br>
                                                <br>
                                                <br>
                                                <br>
                                                <br>
                                                <br>
                                                <br>
                                                <br>
                                                <br>
                                                <br>
                                                <br>
                                                <br>
                                                <br>
                                                <br>
                                                <br>
                                                <br>
                                                <br>
                                                <br>
                                                <a name="dienstleistungen">aaa </a></div>
                                </div>
                        </div>
                        <div id="right"></div>
                        <!-- FOOTER -->
                        <div id="footer"></div>
                        <div id="fixadresse1">
                                Gdadaslads Â* | Â*dasdsander<br>
                                Ecdadsf18 | fas5d0 Weasd Â*Â*Â*<br>
                                Tel.: 06asd29873 | Fax: 06dassad37 Â*Â*Â*<br>
                                <a href="mailto:idasdasnder.de">E-Mail: indasdasder.de</a>
                                <p>Â*</p>
                        </div>
                </div>
        </body>

</html>

Silvio · 16.10.2009

AW: Contentbackground Problem

Jup, das ist natürlich die saubere Variante

Freue mich schon auf CSS3. Da wird es uns in vielen Dingen leichter gemacht

Laksone · 16.10.2009

AW: Contentbackground Problem

Yeah geil, funktioniert 1A!!!

Dank euch Jungs!!!