Alright I've been facing some problems with my tester Forum that I'm using to learn coding for my actual forum. I haven't gotten much progress because I'm stuck on some parts. Here what it looks like so far... http://test3r.forumsmotion.com/index.htm?sid=c4ccb92e811e01500403b1ed8698afcb

Basically I need better coding for the following:

The nav bar (contact me tabs) needs to be fixed to the actual background. Because I'm using a code for location on the page i.e. left: 92px; and now whenever I re-adjust the my browser the width of the page the bar stays in those coordinates but the background image re-sizes.

Forum and other text. In the picture u can see that i want to shrink the width of the category bars and forum box's all that stuff to fit inside small boxes in the background image.

I wanna remove the "view your posts" thingy on the right, unless someone has a spot they think I could put it.

Here's a quick pic to help understand: https://i.servimg.com/u/f61/15/31/31/17/screen10.jpg

Thanks

thanks for the help guys...

Hell!

Well, I visited you site and saw that you set a whole image as background and then trying to position all forum elements on their respective background.

This is a wrong method of doing this. I don't think it is possible to achieve what you want this way. Its better to slice up the background images in image editing software and then add them via CSS.

Do u recommend that for each section, instead of placing it on top of the background image, I set the sliced image as the background? So for the middle, instead of having a certian size box to hold the text, I Have the box sliced so its connected to the text? I just don't know how to do that, I'm really behind on html :/

hmmm...

I think you are trying to make a whole theme for your forum and you have chosen a very difficult layout for that. If you don't have advanced skills at CSS you should start with some simple and easy layout.

We are always here to hep you out but there are many thing that can't be fixed by just getting a copy-paste code from here. Hope you understand.

I suggest to start learning from something easy and then give try to a difficult layout. The current layout you have needs lots of fixes and images to be used.

The entire Layout I have in Photoshop with over 170 layers... so I have the images and I agree that its a difficult layout, that y I came to u guys cuase I knew u guys could help. I was hoping that this could be my way of learning :]

Yes, we can help you but we can't make a whole theme for you.

If you are upto learning by making a theme. Its best to start with little simpler rather than using a large layout as big as 170 layers

I agree, I'm probably gonna make the layout a bit more simple, but im sticking to the design oh, and a quick question. If i wanna apply a image behind a body of text, i slice it horizontally? so when the text is stretched it moves with it? Oh, and how do i do that? xD

To put background for text we usually put...

Code:

p {
background : url(BACKGROUND IMAGE URL) repeat;
}

But, i mean an image that is sliced, so when the text gets larger the image can shape with it. so for a body of text, I would assume u slice the image horizontally therefor when the text gets longer, the image can stack horizontally.

The background image can't adjust itself as per the size of text. We can make it repeat if the element goes larger in size than the size of the image.

ahh, that's what i meant but then how would u have the top and bottom (if they look different) be aligned there, like if the top is rounded and has some design.

Nopes, I don't think thats possible.

This is sorta what I meant. Like, The body repeats and the top and bottom are fixed at top and bottom , I'm pretty sure I've seen this on other sites, but if not I guess you win some u lose some

Top:

Body:

Bottom:


The differences are very minimal but doesn't look right without the top and bottom.

Ah..for that you need to use 3 different images for top, body and bottom. One image can't adjust itself as per the height and width of a box.

And one element can't have more that one background image so we need additional 2 backgrounds one on top and other on bottom to add images.

O.o ughh... is there like a tutorial I could follow? I mean, I understand the general idea of what your saying... but I doubt I'd be able to do it just from hearing that. And thanks, I really appreciate all your help so far :]

May be this tuts can help...
http://kalsey.com/2003/07/rounded_corners_in_css/
http://articles.sitepoint.com/article/css-round-corners-boxes-curves

These seem pretty good, and I'll definitely use them to try it out, but where do i place the code if i want it, to be the background of a certian body of text? Like If i want it to be behind the forum. It also doesn't mention how to have the background an image and not just the corners, or even how to slice the background image so it stacks when the text is stretched.

I'll most likely be using these codes:

HTML:

Code:

<div class="bl"><div class="br"><div class="tl"><div class="tr">
Lorem ipsum dolor sit amet consectetur adipisicing elit
</div></div></div></div>
<div class="clear">&nbsp;</div>

CSS:

Code:

.bl {background: url(bl.gif) 0 100% no-repeat #e68200; width: 20em}
.br {background: url(br.gif) 100% 100% no-repeat}
.tl {background: url(tl.gif) 0 0 no-repeat}
.tr {background: url(tr.gif) 100% 0 no-repeat; padding:10px}
.clear {font-size: 1px; height: 1px}

To make rounded corners for certain body or text you just need to replace the selectors .bl, .br, .tl, .tr with the ones that the targeted body has.

The code you posted above will work but if you want to apply rounded corners to smoe body of Forumotion forum, the code will be different since the HTML of Forumotion differs from the HTML in this code.