"next!"

Legacy_Staff · #1 Jul 15th, 2006, 11:40

Okay, I seem to be starting to get somewhere with bits of this but I'm still nowhere near an overall picture and I can't find the info I need to get to the next step of my exercise:-

I have a scrolling background image (repeat-y center).

I've now made an expanding box to go on top of it, which I've tested separately so I know it's working. But, I don't seem to be able to lay the latter on top of the former. All I see is the orginal background image which makes up most of the page.

CSS

Code: Select all

.340box {
 width: 340px;
 background: url('Boxes/340wide/340Middle.jpg') repeat-y;
 z-index: 1;
}
.340box h2 {
 background: url('Boxes/340wide/340Top.jpg') no-repeat left top;
 padding-top: 10px
}
.340box .last {
 background: url('Boxes/340wide/340Bottom.jpg') no-repeat left bottom;
 padding-bottom: 10px
}
.340box h2, .340box p {
 padding-left: 20px;
 padding-right: 20px;
 
}

HTML

Code: Select all

<body>
<div class="340box">
 <h2>Test Header</h2>
 <p class="last">Lorem Ipsum Thingummybob</p>
</div>
</body>

Result (on blank page)

The 'Boxes/340wide/340Middle.jpg' is a 1px high image, the width of the box (and don't say "It doesn't line up!", I realised as soon as I got this far. *sigh*

)

Also, I don't seem to be able to format the text (font / size etc).
Is there a clever reason why?
I've checked the code on W3C so I'm assuming it must be connected to the way I'm creating the box to put it in (?).

ukgeoff · #2 Jul 15th, 2006, 20:34

Where is the css for the scrolling background?

masonbarge · #3 Jul 15th, 2006, 22:23

Put your box inside another div, and do the style and position on the containing box.

The z-index is superfluous - you don't need it and it wouldn't work anyway.

Legacy_Staff · #4 Jul 18th, 2006, 15:21

Aww crud!
Sorry guys but the database lost your posts and I hadn't tried them yet.
Any chance you could repost?
Pretty please?

moojoo · #5 Jul 18th, 2006, 17:05

I was wondering what happened to mine.

Basically you want one div to contain all 3 elements of the box.

<div id="foo">
<div id="boxtop"> </div>
Content here
<div id="boxbottom"> </div>
</div>

You put the middle repeating pattern on #foo. That should work for you.

Legacy_Staff · #6 Jul 18th, 2006, 23:05

Thx Mooj.
so it doesn't matter where I place the repeat jpg in the sequence?
Coding it at the top of the sequence will still work, even if it starts to repeat after the top jpg?

[edit: Re the content. There no elements or anything for that? I just enter it 'as is', in the middle?]

moojoo · #7 Jul 19th, 2006, 12:36

No you would use whatever html you need in there and you place the side repeating pattern on the containing div and place the corner images above and below your content. IE may add an extra space after the bottom one so just tack on an overflow:hidden; and that should fix that.

Legacy_Staff · #8 Jul 19th, 2006, 15:03

Quote:

Originally Posted by moojoo

overflow:hidden.

Ummm... may be back to you on that bit.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Creating a "tag" system to find relevant "related" pages	MrQuestions	PHP Forum	3	Mar 20th, 2008 23:06
[SOLVED] Show "Image" Depends On User "Status"?	Monie	Classic ASP	6	Oct 16th, 2007 01:22
? IS "meta name="robots" content="?" necessary in pages ?	Love2Java	Starting Out	6	Aug 8th, 2007 13:48
window.opener.document["nameForm"].getElementById("someid").value; doesnt work	drpompeii	JavaScript Forum	0	Feb 17th, 2007 23:09
Need to build a "Trip" or "Journey Planner"	jswebdev	PHP Forum	4	Dec 5th, 2005 23:22

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
"next!"