close ad
Databridge V2 with MySQLi support IS Now Available!
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

Positioning problem

Thread began 11/02/2009 6:11 am by mrs | Last modified 11/02/2009 11:25 am by neilo | 2068 views | 6 replies |

mrs

Positioning problem

Hi, I have a problem where I have two divs where one sits on top of the other and as divs they sit fine, but as soon as I put content into the bottom div, it gets pushed to the side of of the top div rather than sitting behind within the lower div.

Why is this?

untitled-1.php

Basically, I am expecting the word 'image' to disappear behind the logo. It does the same whether it is text or an image!

Thanks

Mat

Sign in to reply to this post

mrs

Just to clarify, I have now added a red placement image and want it to sit behind the logo and butt up to the left of the blue div.

I'm stumped as to why this is happening.

Thanks.

Mat

Sign in to reply to this post

neilo

Hiya Mat,

That is the default behaviour of a div. What is it that you are trying to achieve? If you want the 'headerimage' div to contain an image, then you would set the background image to point to the one you want, i.e. in your screen.css stylesheet you would have:

#outerWrapper #header #headerimage {
background-color: #66CCFF;
height: 360px;
width: 820px;
background-image: url(path_to/your_image.jpg);
}



As a background image, it would not affect the positioning of any of the divs within the headerimage div.

If you wanted extra images or text to appear on top of that, you would need to add extra divs within the headerimage div - as you have with the logo div and the buckpanel divs.

Sign in to reply to this post

mrs

Oh OK, I did try that but I thought it was a bit of a cheat and wasn't sure if it actually was css compliant.

OK, so from there then, I was hoping to have either a javascript based image slide show a bit like that from the plugin of Advanced Random Image, or even a flash based slide show.

Is it possible to do such a thing with a background property? Actually, is it possible to have a server side include as the background and that then hold the javascript for the slideshow?

Thanks

Mat

Sign in to reply to this post

neilo

The header div usually contains a background image - nothing cheating about that - and supporting text or divs is commonly placed 'on top' of that (inside the header div). If having a background image in a header div were not w3c compliant, rather a lot of us would be up the creek without a stylesheet.

You can't set slideshow - flash or otherwise - as a background image. You would need to create a div within the header image to hold the slideshow.

You'd be best to create what you want for the header as far as possible as one background image - everything you have so far could be one background image (colour, logo, Buckingham) you could then easily create a div for your slide show without worrying about displacing those other divs.

You could certainly create a div in the header for a server-side include, but there wouldn't be much point if it were only appearing on that one page, and wasn't going to be changed often.

Probably the best idea would be to roughly mock up (in photoshop or other graphics software) what it is you want the header to look like so that we can help with the css.

Sign in to reply to this post

mrs

I've basically ended up floating both the logo and the buckingham panel to the right which allowed the image area to rise to the position I need it in. I then had to give a right margin of 659 px to the logo and surprisingly, a left margin to the buckingham panel of 644 px which is odd as it was already floated to the right! Why that has happened and worked I have no idea.

Is this CSS compliant, or will it cause issues?

Strangely though, what I've done hasn't had any adverse affect on the navigation bar at the bottom of this image area.

Anyway, thank you for your efforts.

Sign in to reply to this post

neilo

Nice one - it's looking good.

You have an extra </body> tag at around line 70 of your page which needs to be removed.

Looking great.

Sign in to reply to this post

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...