HTML Help? Don't know what tags to use., Need to write over an image Options

[Mavrik347]

Hi Guys,

I'm new to the site so dont really know where to put this.

Anyway here is my problem.... I need to be able to place text OVER an image without it being a background image which take over the page and repeats itself. I also need to tell the nav bar to stay at the top and not hover between the bottom and top of the page. I layed the site out as a table, 3 rows, 2 coloums, the first 2 rows are fine but the 3rd is the one that will have all the content in it; this is where the problem is, I cant seem to put in an image down then write over it for say, news; then put another under it of the old news so the newest news stays at the top if you know what I mean. I dont really know how to use <div> tags so I dont know if they are the answer or not but if jyou could help then I would be very very greateful. Here is a site that does it but it uses PhP to do it, but you can see what I mean. http://www.sovclan.org/

This is my website now...


How I want it...


The layout of the 2 remaining rows...


P.S. Sorry if this comes through as SPAM, My post didnt come up last time I posted, could be lag.

[jimlongo]

If you use CSS you can have a background to a table or cell.

[pandy]

Anyway here is my problem.... I need to be able to place text OVER an image without it being a background image which take over the page and repeats itself.

Yeah, CSS. You may want to look into positioning. I don't think this is a good way to go though. You can't know what resolution and text size the user have/need, so you can't control where the text ends up relative the image. Rather cut the image up and use just the necessary parts.

Here is a site that does it but it uses PhP to do it, but you can see what I mean. http://www.sovclan.org/

PHP or not doesn't matter. The output is always HTML, CSS and JavaScript, things the browser can understand, and that's where it happens. I don't think that site does it like you describe though. Looks like traditional table layout with sliced images.

Much better to divide the page in boxes in a way that the boxes can expand if needed and the whole page can adopt to th available window size. Backgrounds do not have to take over the page and repeats themselves. CSS can make them not repeat at all or repeat in only one direction. See http://www.w3.org/TR/REC-CSS2/colors.html, especially http://www.w3.org/TR/REC-CSS2/colors.html#...ckground-repeat or in shorter from here http://www.htmlhelp.com/reference/css/colo...und-repeat.html.

Since, with CSS, you can have backgrounds with all elements this is no problem at all to do. I'd divide it in three boxes like this.

Since the text box and the nav box should be able to expand downwards, just see to it that the background images fade to a solid color that blends with the background color at the bottom.

P.S. Sorry if this comes through as SPAM, My post didnt come up last time I posted, could be lag.

No, you are right. It was accidentally marked as spam. Sorry we didn't notice quicker. I deleted it now since you have gotten answers here. Hope that's OK.

[Mavrik347]

Thanks for the help guys, one thing though, when I say over an image I mean so it doesnt matter what res the client is on, here is an example that hit the nail on the head. http://www.totalbf2.com/

You see what I mean? The news boxes down the center are all one and are not background images. I just dont know how they did it... What I meant about the news boxes is basicaly how they have it, so I can make another ontop of that one so its pushed down the page. Problem is I never used .css sheets, wouldnt know where to start or how to make them, I'll take a look aroung the links you sent.

Thanks for all the help so far!

EDIT: Oh and I actually want is constrained to the size it is, not a whole screen site

This post has been edited by Mavrik347: Nov 25 2006, 07:21 AM

[pandy]

I don't understand what you mean when you say they are all one? Sure they use backgrounds. The heading for each text box has this background image (you'll only see a thin line when it doesn't tile): http://images.totalbf2.com/misc/box.main.back.gif . The white is just that, a white background color. Nowhere do I see text on top of an inline image.

[Mavrik347]

If you look "Dawn Patrol v0.22 Client Released
Today | 07:42 AM | 10 Comments" is all over an image, but the image it is over is not a background image. I worded it wrong saying 'they are all one', I meant it isnts a background image.

So you have:
The webpage background (yellow one)
An image (the images that make up the news box)
The writing over the images that make up the news box images.

To sumerise what Im looking for is to have it like this (starting from the bottom layer).

Background colour > Images that make up the news box > Text/Content of the news box.

So you know what I mean?

[pandy]

Yes, you *think* it's all one image but I say it isn't.

The light green at the top is the background image I showed you. They must use images for the rounded corners too. The rest is just text on a white background color. You are stuck in HTML thinking, me thinks. As said, with CSS you aren't limited to one backgound image for BODY. Every single element (tag) on the page can have its own backgound if you wish.

Copy this and load it in your browser and you'll see.

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>The proof is in the pudding</title>

<style type="text/css">
<!--
body { background: #a9a67b; color: #000 }
h4,p { margin: 0 }
#pudding { width: 15em;
border: 2px dashed #000;
background: #fff
url(http://forums.htmlhelp.com/style_emoticons/default/tongue.gif)
5em 8em no-repeat; color: #000 }
#pudding h4 { background: url(http://images.totalbf2.com/misc/box.main.back.gif)
repeat-x }
-->
</style>

</head>


<body>

<div id="pudding">
<h4>See what I mean now?<br>:-)</h4>
<p>
Lots of blah blah blah blah blah blah
blah blah blah blah blah blah blah
blah blah blah blah blah blah blah
blah blah blah blah blah blah blah
blah blah blah blah blah blah blah
blah blah blah blah blah blah blah
blah blah blah blah blah blah blah
blah blah blah blah blah blah blah
blah blah blah blah blah blah blah
blah blah blah blah blah blah blah</p>
</div>

</body>
</html>

[Mavrik347]

Sweet Jesus of Nasaruf.... You did it, I am forever in debt to you lol.

Just few questions, can DIV ID be anything? Could you just run through quickly why and how "<style type="text/css">" seems to make it all fall into place. Also there is a slight problem with it lol, the background is transparant

EDIT: I uploaded one of the pages, Here I need the background to be #333333 not the TBF2 one lol.

EDIT 2: Ooooh I getting used to this now fixed the background.

This post has been edited by Mavrik347: Nov 26 2006, 11:38 AM

[pandy]

Sweet Jesus of Nasaruf.... You did it, I am forever in debt to you lol.

I tried to tell you.

Just couple questions, can DIV ID be anything?

Yes, with these constraints. http://www.w3.org/TR/html401/types.html#type-name .
If you want to reuse the box, as they do on that page you like, you should use class instead of id. The name of an id must be unique in a page, i.e. you can only have one instance of id="pudding". A class can be used many times.

Also could you just run through quickly why and how "<style type="text/css">" seems to make it all fall into place.

You can read for yourself here. Start from the beginning.
http://www.w3.org/TR/html401/types.html#type-name

Basically you apply style rules to already existing HTML structures. By giving elements a class or an id you can single them out.

p { color: black ; background: yellow }

... makes all P elements black with a yellow background (I have so great taste!).
But...
p.foo { color: yellow; background: black }
...makes paragraphs with the class "foo", and ONLY those, look just the opposite.

The red bits are called selectors. They decide what is to be styled. The blue bits are style rules. They tell how it's going to be styled.

It's a lot more than that, but it gives you a little peek at how it works anyway.

[Mavrik347]

Brill man, thanks

1 more thing, any idea how I keep the nav bar at the top? lol

EDIT: Just uploaded the latest Here, problem is there are random gaps :/ any idea how to get rid?

This post has been edited by Mavrik347: Nov 26 2006, 12:44 PM

[pandy]

What gaps?

[Mavrik347]

Gaps?

[pandy]

Oh. I thought that was by design.

The upper gap is because of the default margin browsers may put on headings. You have H4 and H5 but in the CSS you have only H5. Change this:

CODE

h4,p { margin: 0 }

to this:

CODE

h4,h5,p { margin: 0 }

The second gap is because if the BR and the HR you have there. You can use a border instead.

h5 { border-bottom: 1px solid #000 }
http://htmlhelp.com/reference/css/box/#border-bottom

You'll still se a small gap but that's because your background image is a tad too short. Make it higher. Remember people may increase the text size too, so you need to add some for that also. You should also have a background color to cover your ass. I should have used that from the start. You do it like so.

selector { background: #123456 url(pic.gif) }
http://htmlhelp.com/reference/css/color-ba...background.html

Now go and read the CSS pages so you can get rid of FONT tags and such.

[Mavrik347]

...My sisters single

Thanks man, only thing left is I need to jam the nav bar to the top.

(Gonna take a look at the CSS page you gave me to see if there is anything in there, any ideas?)

EDIT: Tried a "Padding-top:" but aint budging, Now I know how to use <div>'s I think I'll reconsider using a table in future lol.

This post has been edited by Mavrik347: Nov 27 2006, 11:00 AM

[pandy]

Thanks man, only thing left is I need to jam the nav bar to the top.

Set the border of the table to something other then "0" so you can see what's going on. Then go here and read about the valign attribute.
http://www.htmlhelp.com/reference/html40/tables/td.html

(Gonna take a look at the CSS page you gave me to see if there is anything in there, any ideas?)

Yes. Read it the whole thing

Now I know how to use <div>'s I think I'll reconsider using a table in future lol.

That's good. But don't overuse DIVs. They are good for making sections like this, but don't use them instead of paras, headings an so on. Use them as wrappers to hold sections together. It's easy to go div-crazy and that's not a good thing.

[Mavrik347]

O, M, F, G.

Thank you, thank you, thank you, thank you, thank you, thank you, thank you, thank you, thank you, thank you, thank you, thank you, thank you, thank you, thank you, thank you, SO much for all the help, all is working just fine!

I'll certainly recommend you to anyone! Again thank you so much

[pandy]

So CSS is your new hobby now?
You are welcome. Glad it worked for you.