html css div help tt - Page 2

FranzP

France270 Posts

May 06 2011 12:21 GMT

#21

I guess for the content you can just put padding top et left so that your text is placed properly inside your image and what shaannn said put your image as a background in the css image and write in the div.

It's totally possible to have a scroll bar in the content div. Just fixed its size with a height attribute in the css, maybe you'll have to toy with the overflow attribut in your style.

And one more advice. Don't use ids for all your div (or others) use classes when you have one style for many different elements.

alffla

Hong Kong20321 Posts

May 06 2011 12:21 GMT

#22

ohh omg awesome i can't think you enough for all the help :D::D:D

MasterOfChaos

Germany2896 Posts

May 06 2011 12:21 GMT

#23

I think a content box like in your image is a bad idea. Especially with only the box content scrolling. I'd rather make the high of the box adapt to the amount of content in it, and then scroll the whole page.

FranzP

France270 Posts

May 06 2011 12:22 GMT

#24

On May 06 2011 21:18 shannn wrote:

Show nested quote +

To use scroll bar you gotta use overflow:hidden; in the content div with the attached background image.
This way you'll need to set a specific height for the content div.
Then in HTML you just set content or other images in the content div. This way when you get more text it will show the scroll bar else it will just show the image.

overflow:hidden will hide the scroll bar, didn't you mean overflow:auto.

FranzP

France270 Posts

May 06 2011 12:25 GMT

#25

On May 06 2011 21:21 MasterOfChaos wrote:
I think a content box like in your image is a bad idea. Especially with only the box content scrolling. I'd rather make the high of the box adapt to the amount of content in it, and then scroll the whole page.

Yeah but you can't stretch your background image for that you have to divide your image in three. One top part one middle part set on repeat-y and the bottom part. And with the irregular left and right border it can be a pain in the ass...

shannn

Netherlands2891 Posts

May 06 2011 12:28 GMT

#26

On May 06 2011 21:22 FranzP wrote:

Show nested quote +

overflow:hidden will hide the scroll bar, didn't you mean overflow:auto.

Ya I didn't meant hidden. Auto is best to use but if he wants scroll bar then scroll it is.

I said the same thing like Master to not use that content image box.
It's best to use some separate divs in which u have 3 divs (1 for the top border, 1 for the content and 1 for the bottom). So that when you have more text then the box will just automatically resize to the amount of text you have and then you won't need to use overflow.

On May 06 2011 21:25 FranzP wrote:

Show nested quote +

Haven't seen the image in detail but if it's irregular then it won't work :D

FranzP

France270 Posts

May 06 2011 12:32 GMT

#27

edit (that part is useless ^^) : Yeah but in that case you'll have a 1px high middle image for continuity and you can't have irregular border without doing something complicated. Unless I'm missing a way to make repeat-y continuous with big image or something.

Well the content div is the div with box with irregular border no ? Or I missed something

overflow:scroll will always show the scroll even if there is nothing to scroll for.

shannn

Netherlands2891 Posts

May 06 2011 12:55 GMT

#28

On May 06 2011 21:32 FranzP wrote:
edit (that part is useless ^^) : Yeah but in that case you'll have a 1px high middle image for continuity and you can't have irregular border without doing something complicated. Unless I'm missing a way to make repeat-y continuous with big image or something.

Well the content div is the div with box with irregular border no ? Or I missed something

overflow:scroll will always show the scroll even if there is nothing to scroll for.

I just thought of a normal border and didn;t look at the image that specifically at the borders when I wrote my post which MasterofChaos probably did the same.

And yes I'm aware of the scroll part so I just didn't think things through so I just said scroll.
I did say that auto is best though :p

emucxg

Finland4559 Posts

May 06 2011 13:47 GMT

#29

http://www.adobe.com/devnet/dreamweaver/articles/first_website_pt2.html

the link u gave us is pretty awsome l0l

FranzP

France270 Posts

May 06 2011 14:10 GMT

#30

By the way w3school is not really a reference for css. Not saying it's a bad website but it's not a reference (see http://w3fools.com/ for some corrections on w3school content)

alffla

Hong Kong20321 Posts

May 06 2011 14:14 GMT

#31

hmm haha wow so much feedback in my blog now thanks guys ;D:D:

hm.. so how would i go about making a dynamic content box that enlarges itself depending on how much content i put in? :S that would be even more awesome but i'm afraid i have no idea how to make it ..

wouldn't i need a repeating tile pattern for the background to expand on and everything :S

tofucake

Hyrule19153 Posts

May 06 2011 14:21 GMT

#32

On May 06 2011 21:12 alffla wrote:
oo ok sweet yea i got that background thing done now haha :D
haha tofucake im so far down this road i can't turn back now >_>

its possible to have a scroll bar inside the contentdiv right ? :O

and its easy to embed content inside?

overflow: auto;
or
overflow: scroll;

Either would work. Example:


/* menu stuff */

#content
{
    position: absolute;
    left: 150px;
    top: 200px;
    width: 400px;
    height: 800px;
    overflow: auto;
}

<div id="menustuff"> <!-- menu stuff here etc --></div>
<div id="content">
    <!-- CONTENT HERE -->
</div>

Obviously you'd have to adjust the positions and sizes, but it's fairly easy.

tofucake

Hyrule19153 Posts

May 06 2011 14:30 GMT

#33

On May 06 2011 23:14 alffla wrote:
hmm haha wow so much feedback in my blog now thanks guys ;D:D:

hm.. so how would i go about making a dynamic content box that enlarges itself depending on how much content i put in? :S that would be even more awesome but i'm afraid i have no idea how to make it ..

wouldn't i need a repeating tile pattern for the background to expand on and everything :S

Now that I've read further, no. You use more divs! For the upper and lower borders you use background-image: url('borderx.png'); backround-repeat: repeat-x; and similar for the vertical with repeat-y. For corners you can either overlap or you can have special corner pieces (if you need to).

alffla

Hong Kong20321 Posts

May 06 2011 14:40 GMT

#34

hhmm .. ok . well not really getting how that works right now but i'll think about it tonight, thanks

don't get why i need an upper border? wouldn't i just need a 'lower' section that repeats as it expands lower and lower? :S

and how do the corners work? shouldn't the 'borders' fill up the entire width anyway?

oh right you're talking about that box that i drew ohh i get it i think hahah :D:D:D

tofucake

Hyrule19153 Posts

May 06 2011 14:50 GMT

#35

If you have sharp corners, it's no problem. If you want rounded corners or something fancy like that, you have to use CSS3 (incomplete and not fully supported) or special corner images. If you want to have the expanding box box, you need to set the borders for the top and bottom so they stretch out accordingly, and the sides so they stretch vertically. You can also set min and max height and width values and an overflow: scroll to get the scroll when necessary, and to make sure stuff doesn't stretch the content box to insane sizes.

Byte

Germany11 Posts

May 06 2011 15:04 GMT

#36

On May 06 2011 19:47 shannn wrote:
fuck IE6 :< I'm always FML when I start on it

Anyways @OP
If I read your post correctly then you just inserted an image in your div with the content image am I right?

You should use CSS to use it as a background without repeating the image.
Then you can just add text in that div with the background image.

And use float for both div in which the navigation and the content is in.
Use another div beneath the navigation and content div to clear since you almost always want to use clear after using floated divs.

So key words are which you should look up at w3schools (linked above by 2pac as well) which will probably what you want:

CSS float
CSS clear
CSS background

I guess that's it :p

From a webdesign perspective. I don't like it that you used a box as content. Because now you will have limited space in a div unless you use overflow but then it'll make it ugly as you'll see scroll bars in the content div.

Happy to give some advice and hope it helped :p

^ that's how I would do it. Alternatively while you are reading up on positioning you schould come across something called a z-index. It allows you to have elements over top of one another.

alffla

Hong Kong20321 Posts

May 06 2011 15:18 GMT

#37

hi

so basically this is how i should aarrange some new div images to repeat and expand? am i on the right track?

thanks, TL rocks man.

[image loading]

FranzP

France270 Posts

May 06 2011 15:19 GMT

#38

<div class=contentTop>
</div>
<div class=content>
      write your content here
</div>
<div class=bottom>
</div>

now the css :


.contentTop {
     background-image:url(url to the top part of the background);
}
.content {
     background-image:url(url to 1px high image that will repeat verticaly);
     background-repeat:repeat-y;
     padding-left:15px; //so that your text won't be on top of the border
}
.contentBottom {
     background-image:url(url to the bottom part of the background);
}

With this your content box will bea extendable but you won't be able to have irregular border on the right side and the left side.