Hello WHT;

On my site in progress (http://barbarasdeli.com) I was wondering if anybody could help me. I want the red header to be lowered a little bit more. I'm having trouble doing so. Can anybody take a look at my CSS?

Also, if I want to add a picture slideshow, what is the best way about doing so? I want the picture to change randomly, every time. I have many high res photos and it would be neat for the photo to be different every time.

I want the red header to be lowered a little bit more. I'm having trouble doing so. Can anybody take a look at my CSS?

I'm certainly no expert in this, but... adjusting the header height in the CSS did not change anything because it is using an image (img01.gif) that does not repeat... changing that image size from 1px x 100px to 1px x 120px will work with what you have already.

Also, if I want to add a picture slideshow, what is the best way about doing so? I want the picture to change randomly, every time. I have many high res photos and it would be neat for the photo to be different every time.Do you want a different picture to randomly appear, or do you want a slideshow effect, where different pictures appear every few seconds with some sort of transition?

The first option is very easy - a little PHP snippet and you have your randomizer. The second option takes a little more effort, especially when you want to start at a random position...

Ariss is correct in expanding the header size. Do a search for javascript slideshow or php slideshow this will give you many options for the other portion, there are dozens of these out there.

For the header you need to either, increase the size of the background img in css (img01.gif) currently 100px, or remove it and create a new div wrapping the header and add the red as a background color at whatever height you want.

<div id="header_background">
<....header logo and nav stuff....>!
</div>

CSS:
#header_background{
background: #red;
width: 100%;
height: 150px;
}

As for the slideshow, as the_pm said either use php to create a static randomizer or as I have recently, use jquery with jflow and have a dynamic randomizer with transition effects...!

if you're using css you can add padding to the image to make it drop down. it'd be like this originally


div#_________ {
width:500px;
height:100px;
background: (images/____)



to make it drop down by lets say 50pixels you'd make it like this:


div#_________ {
width:500px;
height:150px;
padding:50px 0 0 0;
background: (images/____)




"Padding:0 0 0 0;" always follows the rule top right bottom left (i remember it as trouble cos i can never get it right first time) All you have to remember is that you must add the amount of padding to the div height. :D

feel free to contact me if you ever need any help.

The only trouble with the above is the img background is attributed to the body in his css, if it was a div then seeing as it is just solid color, then the image is not needed, but a color declaration of red at whatever height would be better.

This is true, I didn't think of it that way. :)
One error in my method that i've noticed is that the image needs a repeat colour on it to colour the padding. It should be something like this:


div#_________ {
width:500px;
height:150px;
padding:50px 0 0 0;
background: (images/____) repeat-x #fff

This is true, I didn't think of it that way. :)
One error in my method that i've noticed is that the image needs a repeat colour on it to colour the padding. It should be something like this:


div#_________ {
width:500px;
height:150px;
padding:50px 0 0 0;
background: (images/____) repeat-x #fff

my point is why load the image and repeat it on the x-axis?, pad the top 50px and color it the same color as the image, why not just drop the image save bandwidth and let css take care of it.


div#_________ {
height:150px;
background: #red;
}


this is all you need.