A Better Way of Positioning

[ChrisTheSoul]

Hello

I wondered if someone could suggest a better way of doing this as I've more than likely found the most inefficient way of doing it.

What this achieves is here...

www.slightlyaskew.co.uk/deadship/index.php

essentially the row where the text is is three images, the middle one being used as a background in the "main_text" DIV. I spent an age trying to stop the DIVs from line breaking, and finally came up with the code below. Please don't comment on the rest of the site! I know it's nowhere near finished. One step at a time and all that.

Thank you in advance for any help and advice.

Christoff
x

My CSS

Code: Select all

 
wrapper {width:720px; height:255px;}
   .inliners {float:left;}
   #main_text {width:308px; height:255px; background-image:url(images/main_centre.gif); overflow-x:hidden; overflow-y:auto; background-position:fixed; background-repeat:no;}

My HTML

Code: Select all

 
<div id="wrapper">
 
<div class="inliners"><img src="images/main_ship.gif" alt="Dead Ship Records"></div>
 
<div class="inliners"><div id="main_text">...lots of text...</div></div>
 
<div class="inliners"><img src="images/main_middle_right.gif" alt=""></div>
 
</div>

[karinne]

Hmmm ... you know what? Since you're using a scrolling div, why not make the background 1 image then all you have to do is position you scrolling div and you menu.

That's how I would do it. Much simpler and cleaner.

[ChrisTheSoul]

I like your thinking.

Ummm... how would I got about doing this? Presumably i need my text DIV to overlap the DIV with my image in it? Or am I already barking up the wrong tree?

[karinne]

Apply your background (the paper thing) to body { }

Then all you would need is 2 divs ... 1 for the content and 1 for the nav

[ChrisTheSoul]

Ah yes I see. Never thought of doing it that way for some reason.

What's the best way of positioning these DIVs so they overlap the the existing image? If I use absolute references, will I come unstuck with different screen sizes?

[karinne]

Since the existing image is applied as a background, there is no problem.

You could do something like this

Code: Select all

html {
    background-color: #fff;
    margin: 0;
    padding: 0;
}


body {
    width: 720px;
    background: #fff url(image.jpg) no-repeat 0 0;
}

#content {
    width: 308px;
    height: 255px;
    float: right;
    margin-right: 20px; <<<------- you'll need to adjust this 
    overflow: auto;
    clear: both;
}

#navigation {
   clear: both;
   width: ....
}

Something like this ... I haven't tested however ... the fingers just started writing

[ChrisTheSoul]

Thanks!

So I use margin-right and margin-top in the Content DIV to position the text over the image? And a similar thing for the navigation DIV?

Sorry to take up your time! You can have two sheep as a token of my appreciation.

[karinne]

Basically yeah ....

[ChrisTheSoul]

But doesn't that mean that the text will be in a different place depending on the size of the users display?

[karinne]

It shouldn't ... Try it out ... you'll see.

[Marc]

nope, as long as the image is in the same place, which it is.