Background-attachment with value static

[Philipp Kraus]

Hi,

I have one problem with my position of my background image. I have
created one div-tag that has a background image, which should be fixed
during scrolling. On the left side of the div is my menu-div, so the
content div is shown round 25% from the left browser side. In this
content div I would like to position a image on the left or right side.

I need a background-attachment: static, because the layout position is
the div, not the viewpoint. If I use background-attachment: static, it
isn't a valid css file, because only fixed and scroll are allowd.

You can see the idea on my webpage www.flashpixx.de. Some images will
be on the right side and some on the left in the content area. At the
moment my css is not valid and the IE make problems.

Does anyone an idea?

Thanks

Phil

[dorayme]

In article <f2**********@online.de>,
Philipp Kraus <ph***********@flashpixx.dewrote:

Hi,

I have one problem with my position of my background image. I have
created one div-tag that has a background image, which should be fixed
during scrolling. On the left side of the div is my menu-div, so the
content div is shown round 25% from the left browser side. In this
content div I would like to position a image on the left or right side.

I need a background-attachment: static, because the layout position is
the div, not the viewpoint. If I use background-attachment: static, it
isn't a valid css file, because only fixed and scroll are allowd.

You can see the idea on my webpage www.flashpixx.de. Some images will
be on the right side and some on the left in the content area. At the
moment my css is not valid and the IE make problems.

Does anyone an idea?

May I suggest a couple of things:

Instead of what you have in CSS try:

/* Redefine Tags */
body {
background-color: #FFFFFF;
font-family: sans-serif;
font-size: 100%;
text-decoration: none;
color: #000000;

}
/* Layout Daten */
#menu {

float: left;
width: 200px;
font-size: 50%;
}

#menu img {
border-style:solid;
border-width:1px;
border-color: #FFC852;
width: 60px;
height: 41px;
}

#menu div {

float: left;
width: 90px;
height: 80px;
}

#menu a {display: block;}

/* Content Daten */
#content {

margin-left: 210px;
padding: 5px;
border: 1px;
border-style:solid;
border-color: #999999;
background:#EFEFEF;
}

#content .pagetitle {
text-transform: uppercase;
font-size: large;
font-weight: bolder;
text-decoration: underline;
}

and in the HTML:
<!-- #NAVI -->
<div id="menu">
<div><a href="flashpixx/pages/projekte.php?name=main"><img
src="flashpixx/images/icons/maske.jpg"
alt="Projekte"></a>projekte</div>
<div><a href="flashpixx/pages/tutorials.php?name=main"><img
src="flashpixx/images/icons/seminar.jpg"
alt="Tutorials"></a>tutorials/studium</div>
<div><a href="flashpixx/pages/empfehlungen.php"><img
src="flashpixx/images/icons/auge.jpg"
alt="Empfehlungen"></a>empfehlungen</div>

<div><a href="flashpixx/pages/kenntnisse.php"><img
src="flashpixx/images/icons/stecker.jpg"
alt="Kenntnisse"></a>kenntnisse</div>
<div><a href="flashpixx/pages/taekwondo.php"><img
src="flashpixx/images/icons/asia.jpg" alt="Tae Kwon Do"></a>tae
kwon do</div>
<div><a href="flashpixx/pages/uebermich.php"><img
src="flashpixx/images/icons/platte.jpg" alt="Philipp
Kraus"></a>über mich</div>
</div>
<!-- /#NAVI -->
<!-- #CONTENT -->
These changes alone will improve the use of your page over
varying browser sizes. And hurdle all sorts of problems with your
page. See for yourself. try different browser sizes and font
settings in the browsers.

Gone is your positioning, thus gaining by losing what is not
needed. And the fonts at least in the content are now readable
better. Naturally, further improvements are possible. But this is
the direction I recommend.


You need to rethin

--
dorayme

[Philipp Kraus]

On 2007-05-20 04:10:10 +0200, dorayme <do************@optusnet.com.ausaid:

In article <f2**********@online.de>,

........

>

These changes alone will improve the use of your page over varying
browser sizes. And hurdle all sorts of problems with your page. See for
yourself. try different browser sizes and font settings in the browsers.
Gone is your positioning, thus gaining by losing what is not needed.
And the fonts at least in the content are now readable better.
Naturally, further improvements are possible. But this is the direction
I recommend.

You need to rethin

Thanks a lot. I have tried this changes. It works very fine, but I
would like to position the backgroundimage on the left side of my
content div (I set the background position to the position of the
content div), on center or right side I can't position, because I don't
know the size of the div.

Thanks

Phil

[dorayme]

In article <f2**********@online.de>,
Philipp Kraus <ph***********@flashpixx.dewrote:

On 2007-05-20 04:10:10 +0200, dorayme <do************@optusnet.com.ausaid:

In article <f2**********@online.de>,

.......

These changes alone will improve the use of your page over varying
browser sizes. And hurdle all sorts of problems with your page. See for
yourself. ... this is the direction
I recommend.

Thanks a lot. I have tried this changes. It works very fine, but I
would like to position the backgroundimage on the left side of my
content div (I set the background position to the position of the
content div), on center or right side I can't position, because I don't
know the size of the div.

OK, it is better than before. My suggestion of floating the divs
within the menu div was meant at first to allow the divs (mere
containers for the thumbnails and captions) to wrap on browser
size variations. It is slightly tricky to implement and you would
need to maybe use a max-width for the floated left menu div but
something more flexible for the actual width of the menu div
itself. For now, the floated inner divs are doing no harm but are
not taking advantage of the possibilities. I mention this now
because it looks a bit lavish to allow so much space to the left
unless you have a lot more thumbnails to put in. Perhaps you have
and all this is just a sketch of the real thing.

About bg image, you have it set on the content div, and it seems
fine to me judging by appearance on FF and Safari. I would tweak
it from 10px; to 0 for height from top but this is minor.

--
dorayme

[Gus Richter]

Philipp Kraus wrote:

On 2007-05-20 04:10:10 +0200, dorayme <do************@optusnet.com.au>
said:

>In article <f2**********@online.de>,

.......

>>

These changes alone will improve the use of your page over varying
browser sizes. And hurdle all sorts of problems with your page. See
for yourself. try different browser sizes and font settings in the
browsers.
Gone is your positioning, thus gaining by losing what is not needed.
And the fonts at least in the content are now readable better.
Naturally, further improvements are possible. But this is the
direction I recommend.

You need to rethin

Thanks a lot. I have tried this changes. It works very fine, but I would
like to position the backgroundimage on the left side of my content div
(I set the background position to the position of the content div), on
center or right side I can't position, because I don't know the size of
the div.

Perhaps the difficulty you encounter is in accepting that the background
image may be used in a div, table or cell and that the position is
referrenced to the top left of the viewport/canvas even if nested inside
a Relatively or Absolutely Positioned Div. If positioned outside of the
div, table or cell viewport boundaries, the background image, or portion
thereof, will no longer be visible.

BTW, you should be using a Strict DTD and not Transitional so that you
do not activate Quirky browser behavior (all new pages should be using
Strict). If doing so, drop the XML Declaration which will cause IE to go
into Quirks mode all the same.

--
Gus