PDA

View Full Version : CSS Picture over a picture



Mickey2002
Feb 18th, 2010, 03:40 AM
Hey everybody,

I'm making a website for a family member and it's the first time I used a CSS file. I'm almost done, but now I need some help:

She wants a watermark picture (just a JPG logo) on top of the
background (which is already a .GIF) and under the text.


On top of:
".container {
background: url(img/bgcontainer.gif) repeat-y;
margin: 0 auto;
width: 780px;"
she wants another picture.

I tried it already with 'AP DIV' in Dreamweaver. But than the picture is on top of the text.

So, the watermark.jpg has to be on the background picture, but under the text. So the text is still readable.
Is that possible?

This is my 'style.css so far it's large:



* {
margin: 0;
padding: 0;
}
a {
color: #963;
}
a:hover {
color: #C60;
}
body {
background: #655A46 url(img/bg.gif);
color: #543;
font: normal 62.5% "Lucida Sans Unicode",sans-serif;
}
input {
color: #555;
font: normal 1.1em "Lucida Sans Unicode",sans-serif;
}
p,cite,code,ul {
font-size: 1.2em;
padding-bottom: 1.2em;
}
h1 {
font-size: 1.4em;
margin-bottom: 4px;
}
code {
background: #FFE;
border: 1px solid #EED;
border-left: 6px solid #938262;
color: #554;
display: block;
font: normal 1.1em "Lucida Sans Unicode",serif;
margin-bottom: 12px;
padding: 8px 10px;
white-space: pre;
}
blockquote {
background: url(img/quote.gif) no-repeat;
color: #666;
display: block;
font: normal 1.3em "Lucida Sans Unicode",serif;
padding-left: 28px;
}
h1,h2,h3 {
color: #654;
padding-top: 6px;
}

.clearer {
clear: both;
}

.container {
background: url(img/bgcontainer.gif) repeat-y;
margin: 0 auto;
width: 780px;
}

.header {
background: url(img/bgheader.gif) repeat-x;
height: 120px;
margin: 0 auto;
width: 760px;
}

.title {
padding: 32px;
}
.title h1 {
color: #E4DBCF;
font: normal 3.4em "Lucida Sans Unicode","Trebuchet MS",sans-serif;
}

.navigation {
background: #FFF url(img/bgnavigation.gif) repeat-x;
font: bold 1.2em Verdana,sans-serif;
height: 44px;
margin: 0 auto;
padding: 0 18px;
width: 725px;
}
.navigation a {
color: #543;
text-decoration: none;
padding: 3px 4px;
margin-right: 12px;
line-height: 44px;
}
.navigation a:hover {
background: #CEBDA1;
color: #420;
}

.main {
clear: both;
padding: 0 10px 12px 28px;
}

.sidenav {
float: right;
width: 218px;
}
.sidenav h1 {
background: #BCB39F url(img/sidenavh1.gif) repeat-x;
border-bottom: 1px solid #999;
border-top: 1px solid #CCC;
color: #4A4A44;
font-size: 1.2em;
height: 22px;
margin: 0;
padding-left: 12px;
}
.sidenav ul {
margin: 0;
padding: 0;
}
.sidenav li {
border-bottom: 1px solid #A98;
border-top: 1px solid #DDC;
list-style: none;
color: #D6D6D6;
}
.sidenav li a {
background: #CCC3AF;
color: #554;
display: block;
padding: 8px 4px 8px 12px;
text-decoration: none;
}
.sidenav li a:hover {
background: #D6CCB9;
color: #554;
font-weight: bold;
}
.content {
padding-top: 12px;
float: left;
width: 68%;
}
.content .descr {
color: #987E57;
font-size: 1.1em;
margin-bottom: 6px;
}
.content li {
list-style: url(img/li.gif);
margin-left: 18px;
}

.footer {
background: #958463 url(img/bgfooter.gif) repeat-x;
color: #FED;
font-size: 1.1em;
line-height: 40px;
margin: 0 auto;
text-align: center;
width: 760px;
}
.footer a {
color: #FFD;
text-decoration: none;
}
.footer a:hover {
color: #FFF;
text-decoration: underline;
}

Thanks for reading! I hope you all understood.

Greetings,
Mickey

Excavator
Feb 18th, 2010, 04:27 AM
Hello Mickey2002,
It's difficult to figure out a problem with images when we don't get to see the images. Even more difficult when we don't get to see the markup, CSS alone isn't enough.

What image are you trying to put over .container? I don't see where you load a watermark.jpg.
What text?

A link to the test site would make it much easier to see your problem.

Mickey2002
Feb 18th, 2010, 07:00 PM
Hello Mickey2002,
It's difficult to figure out a problem with images when we don't get to see the images. Even more difficult when we don't get to see the markup, CSS alone isn't enough.

What image are you trying to put over .container? I don't see where you load a watermark.jpg.
What text?

A link to the test site would make it much easier to see your problem.

Thanks for your reply!!

Here is the temporary test site. http://www.hetgoedepad.nl/test/index.html

The blue logo has to be in the middle of .container. And the text on the logo.
The site and images are not done yet.

Thanks!

Excavator
Feb 18th, 2010, 07:49 PM
It works if you make .content relative so you can position off that...
like this -


.content {
padding-top: 12px;
float: left;
width: 68%;
position: relative;
}

and then make your #apDiv1 center with this -
<!--
#apDiv1 {
position:absolute;
width:223px;
height:296px;
z-index:1;
left: 50%;
top: 50%;
margin: -148px 0 0 -111px;
}
-->

Do you really need .content to be a % width when it's inside a fixed width container? Here is a demo of a simple 2 column layout (http://nopeople.com/CSS/simple_2-column/index.html) that might help you.

Have a look at some errors that could be fixed (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.hetgoedepad.nl%2Ftest%2Findex.html).

Mickey2002
Feb 18th, 2010, 08:59 PM
It works if you make .content relative so you can position off that...
like this -


.content {
padding-top: 12px;
float: left;
width: 68%;
position: relative;
}

and then make your #apDiv1 center with this -
<!--
#apDiv1 {
position:absolute;
width:223px;
height:296px;
z-index:1;
left: 50%;
top: 50%;
margin: -148px 0 0 -111px;
}
-->

Do you really need .content to be a % width when it's inside a fixed width container? Here is a demo of a simple 2 column layout (http://nopeople.com/CSS/simple_2-column/index.html) that might help you.

Have a look at some errors that could be fixed (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.hetgoedepad.nl%2Ftest%2Findex.html).

Thanks very much again haha!!

Yes I need .content to be a % width. If I change that, the layout is not right.
Maybe I do something wrong haha..

I'm aware of the errors on the site.. It's not done yet.
I think some of the errors may stay when I change it..

I have two last questions... :o :
1- The original one: How do I get the blue logo under the text? (It's on top of the text now.)
2- How do I get the blue logo fixed in the center on .content? (So the text is scrolling over the logo when you scroll.)

Look at the text site: http://www.hetgoedepad.nl/test/index.html .
at http://www.hetgoedepad.nl/test/voetreflex.htm see what I mean about the scrolling.

Thanks again and after this I will not bother you again haha.. You helped me lot. If I can do something for you???

Look at the text site: http://www.hetgoedepad.nl/test/index.html .
at http://www.hetgoedepad.nl/test/voetreflex.htm see what I mean about the scrolling.
Greetings,
Mickey

Excavator
Feb 18th, 2010, 09:26 PM
Yes I need .content to be a % width. If I change that, the layout is not right.
Maybe I do something wrong haha..

Look over the code on that 2 column demo I linked you to.
Specifically how the columns are laid out. The one column has a width and is floated, the other has no width and is margined over to make room for the floated one next to it.

Excavator
Feb 18th, 2010, 09:29 PM
2- How do I get the blue logo fixed in the center on .content? (So the text is scrolling over the logo when you scroll.

Change your CSS to look like this -
<!--
#apDiv1 {
position:fixed;
width:223px;
height:296px;
z-index:1;
left: 50%;
top: 50%;
margin: -148px 0 0 -111px;
}
-->



IE6 will mess that up. Here's another demo for you though, position:fixed; in IE6 (http://nopeople.com/CSS/fixed_background/index.html).
View the source to see how that's done.

Excavator
Feb 18th, 2010, 09:49 PM
1- The original one: How do I get the blue logo under the text? (It's on top of the text now.)

You'll need to mess around with z-index (http://www.w3schools.com/Css/pr_pos_z-index.asp) to get it to layer right.
Try taking the image out of that div, it can be on it's own just fine like this (notice the I moved the id onto the image so we can style that instead of the div it was in)


<h1>Voetreflexologie</h1>
<div class="descr">
<img src="pictures/Untitled-1.png" alt="" width="191" align="middle" height="298" id="apDiv1" />
<p>&nbsp;</p>
<p><strong><u>WAT IS VOETREFLEXOLOGIE ?</u></strong><strong> </strong></p>
</div>

<p>Reflexologie i




Then a higher z-index to make sure .content stays on top -

.content {
padding-top: 12px;
float: left;
width: 68%;
z-index: 999;
position: relative;
}



and a lower z-index to make sure the image comes first in the stack order. Notice I've also changed your dimensions...

#apDiv1 {
position:fixed;
width:191px;
height:298px;
left: 50%;
z-index: 1;
top: 50%;
margin: -112px 0 0 -220px; /*adjust where image is place by changing these margins*/
}
-->

Mickey2002
Feb 18th, 2010, 09:53 PM
Oh my god!! You are amazing, serious!
Thank you so much!

z-index has to be set to -1; .

It's perfect now.

Yes I have to change a lot of things and make the logo better. But after the webshop (what will be a very big challenge haha)
The basics are done.

Thank you so so much!!

Excavator
Feb 18th, 2010, 10:14 PM
Oh my god!! You are amazing, serious!
Thank you so much!

z-index has to be set to -1; .

It's perfect now.

Yes I have to change a lot of things and make the logo better. But after the webshop (what will be a very big challenge haha)
The basics are done.

Thank you so so much!!

Very cool :thumbsup: glad you got it working better and glad I could help.

Mickey2002
Feb 18th, 2010, 10:31 PM
Very cool :thumbsup: glad you got it working better and glad I could help.

You are very kind!
The only thing I hate is that the layout (the blue logo, and the text) in Dreamweaver are messed up. But online it looks fine gggrr..
Always the same haha..

Okay I'm done now.. Thanks again. You need another award so I'll keep voting :);)

All the best and take care!!

Excavator
Feb 19th, 2010, 12:48 AM
The only thing I hate is that the layout (the blue logo, and the text) in Dreamweaver are messed up. But online it looks fine gggrr..

Yeah, you can't depend on DW design view.
It does not render your code like any web browser :rolleyes:

Mickey2002
Feb 27th, 2010, 05:56 AM
Hey it's me again :)

I'm still busy with the website of the family member. And it's still not done ppff haha...
I have a problem with the blue logo:

How do I keep the logo behave the way it behaves now, but and keep it in .content?

It's fine the way it is now but if the browser window is resized (smaller window), the logo is getting out of . content. That's not so nice.

Is it possible to keep it in .content?

The test site: http://www.natuurlijke-genezing.eu/test2/

Greetings,
Mickey

Excavator
Feb 27th, 2010, 04:02 PM
Hey it's me again :)

I'm still busy with the website of the family member. And it's still not done ppff haha...
I have a problem with the blue logo:

How do I keep the logo behave the way it behaves now, but and keep it in .content?

It's fine the way it is now but if the browser window is resized (smaller window), the logo is getting out of . content. That's not so nice.

Is it possible to keep it in .content?

The test site: http://www.natuurlijke-genezing.eu/test2/

Greetings,
Mickey

Have you tried any other methods? Here is one with ap and new margins -

#logo {
position: absolute;
width: 191px;
height: 298px;
left: 50%;
z-index: -1;
top: 50%;
margin: -135px 0 0 -109px;
}

<img src="pictures/watermerklogo.png" alt="" id="logo" width="191" height="298" /> is valid. The align attribute (http://www.w3schools.com/tags/att_div_align.asp) of <div> is deprecated, and is not supported in HTML 4.01 Strict / XHTML 1.0 Strict DTD.


You could always just put the image as the background of .content too.

Mickey2002
Feb 27th, 2010, 10:31 PM
Thanks!

I see I have a lot to learn! haha..
If I change the align attribute (<div>) the page is not good.
I'll tried a lot of things but this was the best I could get. :D

Thanks again and I will shut up now hahaha