|
|
|
Croatia9538 Posts
|
Your going to need something called a float as well as absolute/relative positioning
check out http://htmldog.com/ you can do it! 
|
Welcome to the world of web UI. Wait till you get to browser compatibility, especially IE6
|
Hong Kong20321 Posts
On May 06 2011 19:33 pgshock wrote:Your going to need something called a float as well as absolute/relative positioning check out http://htmldog.com/ you can do it!
i've been trying to float the big 'text box' rectangle but it doesnt seem to want to move.. fml
|
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
|
On May 06 2011 19:43 alffla wrote:i've been trying to float the big 'text box' rectangle but it doesnt seem to want to move.. fml
You need to float the left div as well. There's no point to float the content box if the navigation isn't floated in your case.
And make sure that both div (navigation and content) width are within the limit you've specified. If it's in body then u won't need to specify but if you placed navigation and content div in another div which has a specified limit then the accumalitive width of navigation + content should be within that limit).
|
Hong Kong20321 Posts
ok ok ok shannn thanks for hte help atm.
so basicallyh each of the pencils are in their own individual divs. when i float: left; they go all weird as well scattering everywhere. i've been searching all this css stuff as well ..
haha oh yea the box is shitty cuz there's limited space but it doesnt matter, i have just to put some rnadom text in there its ok..
oh here's what happens when i float left >_ <
![[image loading]](http://i.imgur.com/2ta2a.png)
oh hm.. so are u suggesting i have to make a big div container for the navigation and tehn antoher one for the content box?
OH SHIHIH epihphany
|
On May 06 2011 19:52 alffla wrote:ok ok ok shannn thanks for hte help atm. so basicallyh each of the pencils are in their own individual divs. when i float: left; they go all weird as well scattering everywhere. i've been searching all this css stuff as well .. haha oh yea the box is shitty cuz there's limited space but it doesnt matter, i have just to put some rnadom text in there its ok.. oh here's what happens when i float left >_ <
You need to put the navigation div's in 1 div and float that div and not each individual navigation div.
THen your set to fine.
|
Hong Kong20321 Posts
On May 06 2011 19:54 shannn wrote:Show nested quote +On May 06 2011 19:52 alffla wrote:ok ok ok shannn thanks for hte help atm. so basicallyh each of the pencils are in their own individual divs. when i float: left; they go all weird as well scattering everywhere. i've been searching all this css stuff as well .. haha oh yea the box is shitty cuz there's limited space but it doesnt matter, i have just to put some rnadom text in there its ok.. oh here's what happens when i float left >_ < You need to put the navigation div's in 1 div and float that div and not each individual navigation div. THen your set to fine.
OH SHIT SOH SHIT SOHTHI sthanks man i can't believe i didnt htink of that before.
ok hhope i can figure out the code for that nowhahah
|
Hong Kong20321 Posts
ok man ok ok i'm sooo freaking cloes to making this work but somehow it doesn't wanna move up stairs. i made the #container to 801px and it did fly up but then there was a freaking 1px white gap between #navigationdiv and my #content when i did that.
how now!? :S thanks so much for the help btw shan
|
I need to look at your css. There can be many things that cause the 1px white line.
First things to think about :
- Have you calculated the width correctly? As in, are the navigation div and the content div 801px together?
- What happens if u set the container div to 800px?
- Have you setup a margin to one of the containers, or a border?
|
On May 06 2011 20:20 alffla wrote:
ok man ok ok i'm sooo freaking cloes to making this work but somehow it doesn't wanna move up stairs. i made the #container to 801px and it did fly up but then there was a freaking 1px white gap between #navigationdiv and my #content when i did that.
how now!? :S thanks so much for the help btw shan
Did you check whether margins and padding are at 0 0 0 0?
|
It's best to look at what the width of each image is.
If your image is smaller than the width of the div you specified then it can cause that 1px white cap.
Example:
#containerdiv {
width:800px;
}
#navigationdiv{
width:250px;
}
#navigation img (the pencil images){
width:250px;
}
#contentdiv{
width:550px;
}
#content img{
width:500px;
}
The above code would make 50px white space in the content div. If you aligned your content image to center then that would mean 25px white space on both sides in the content div.
If your contentdiv is 1px bigger than your image then it can cause the 1px white space.
|
Hong Kong20321 Posts
oh HSITT omgomg can't believe i made a mistake with the image width for nav bar.. lOL omg -_- i feel so stupid i wouljdn't make such a mistake with other things
thanks for the reminder to check everything though
okkkkk AWESOME IT ALL FITS TOGETHER NOW
now to place content in the box..
|
The way I see in that picture including the css. You've just inserted an image in a div.
That way you're making things harder for yourself to place content over that image as you'll need some complicated things like using z-index etc which just looks ugly.
You need to remove the image in HTML in the content div.
Instead use CSS to attach a background onto the content div.
So it'll look like this.
html > body #contentdiv{
height:auto;
min-height:minimal height when the page loads;
}
#contentdiv {
background:url('your/path/to/image.jpg') no-repeat 0 0;
width:somethingpx;
height:should be same height as specified above;
}
This way you can just put text in #contentdiv while it appears to be written on top of the image.
Further clarifcation on the background css.
No-repeat means that the image will not be repeated in any way (horizontal or vertically or both) when the div gets bigger in height than is specified.
|
Hyrule19215 Posts
ACK
Dreamweaver is the devil. And Photoshop's slice markup isn't much better T.T
Anyway, you can just use a single image for the background and use maps and divs for content positioning. No need to slice anything.
|
On May 06 2011 20:54 tofucake wrote:
ACK
Dreamweaver is the devil. And Photoshop's slice markup isn't much better T.T
Anyway, you can just use a single image for the background and use maps and divs for content positioning. No need to slice anything.
Yes you can do that but if he wants to use hovers on the navigation items (example) then having a single background will make it impossible to do so.
It's still preference but using a single image as background will just limit the possibilities which u don't want if you are thinking of adding new features in the future or change some image.
|
Hong Kong20321 Posts
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?
|
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?
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.
Sorry it's overflow:scroll;
overflow:hidden; is without scroll and without having text spring outside the div and scroll is the same as hidden except it has a scroll bar :p
|
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.
|
Hong Kong20321 Posts
ohh omg awesome i can't think you enough for all the help :D::D:D
|
Germany2896 Posts
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.
|
On May 06 2011 21:18 shannn wrote:Show nested quote +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? 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.
|
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...
|
On May 06 2011 21:22 FranzP wrote:Show nested quote +On May 06 2011 21:18 shannn wrote: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? 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.
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 +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...
Haven't seen the image in detail but if it's irregular then it won't work :D
|
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.
|
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
|
|
|
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)
|
Hong Kong20321 Posts
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
|
Hyrule19215 Posts
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.
|
Hyrule19215 Posts
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).
|
Hong Kong20321 Posts
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
|
Hyrule19215 Posts
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.
|
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.
|
|
|
<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.
|
Hong Kong20321 Posts
^ wow awesome thanks, i'm going to try that in a sec :D:D
|
css is so much harder to read than java( or python or c++) l0l
|
Hong Kong20321 Posts
sorry, how would i expand the bit right under teh navigation menu so that it fits the expanding content box as well? :S cuz you see i have this drop shadow thing thats in a straight line..
|
Hong Kong20321 Posts
|
Hyrule19215 Posts
The trickiest part of your layout is the non-uniform borders, which might make things look weird with odd heights/widths.
|
Hong Kong20321 Posts
On May 07 2011 01:07 tofucake wrote:
The trickiest part of your layout is the non-uniform borders, which might make things look weird with odd heights/widths.
i decided to just make straight left and right edges to make it look ok..
i still don't know how to make the part under the bottom pencil expand along with the content box though~ :S
|
try min-height:100%;
for the menu container div, and the div inside it that's under the menu
the only problem with that is that it usually has to have a parent container element that has a specified height, which this one doesn't. xD
|
Hong Kong20321 Posts
On May 07 2011 01:18 quirinus wrote:
try min-height:100%;
for the menu container div, and the div inside it that's under the menu
that sounds like it's going to stretch it like hell? or what.. o_ o haha lemme try doing the content expanding thing first . sigh
|
it probably won't work. it should expand it to 100% of the screen height that contains the page. or more if there's more content than that.
|
Hyrule19215 Posts
min-height works on the container and settings. Using min-height: 100% on a div inside another div which has a height of 800px will result in the inner div having a height of 800px as well.
Inception plot was stolen from CSS.
|
On May 07 2011 01:27 tofucake wrote:
min-height works on the container and settings. Using min-height: 100% on a div inside another div which has a height of 800px will result in the inner div having a height of 800px as well.
Inception plot was stolen from CSS.
ah, didn't see he had a specified height for the container. it should work then.
but just use min-height:100%; for the div under the menu, don't use it for the container then.
lol inception. it's a div inside a div inside a div, and every one steals the rules from the previous one, but with a twist!
|
Un-related to your plight: is Dreamweaver still being updated and sold? Is there an alternate product that has become the standard? Thanks, and good luck with the site.
|
Hong Kong20321 Posts
hahahhaha omg inception
shit man
lol im actually gettnig the hang of this css div shit , kinda awesome. my head feels explode-y though. too much information in a day .. :D
|
On May 07 2011 01:50 alffla wrote:
hahahhaha omg inception
shit man
lol im actually gettnig the hang of this css div shit , kinda awesome. my head feels explode-y though. too much information in a day .. :D
Whatever you do, do not, I Repeat, Do not open your website in IE6.
Welcome to the world of web design!
Cool looking website btw
|
Hong Kong20321 Posts
if anyones still around,
how the heck do i make this filler (the filler under the last pencil that says dsdsd) stretch to the bottom ?! >_> i put an image inside the navigation container div, is that the right thing to do? i tried height: 100%; didnt seem to do anything haha. and i read about some bottom: px; thing? but not sure what that is supposed to do . hmph.
![[image loading]](http://imgur.com/wSUsm.gif)
|
Hong Kong20321 Posts
perhaps i should stick my footer image div to the bottom of the page ? then somehow implement the sticky footer css that seems to be quite famous.. o_O
http://www.cssstickyfooter.com/non-stick-footer.html
then somehow make the filler space thing expand all the way to the top of the footer image...
-.-
ok too tired hope someone replies tmr. .ehe :D thanks so much for all the help everyone.
|
You want to do the exact same thing as with your border in the content box, you need to create an image with 1px height that repeats until you're at the bottom of the page.
So it's basically a variation of your .content:
.content {
background-image:url(url to 1px high image that will repeat verticaly);
background-repeat: repeat-y;
}
|
Hong Kong20321 Posts
yea i did a repeat y but because there's no content in there it doesn't auto fill to the bottom of the page .. :\
|
Hong Kong20321 Posts
oh man i've run into the problem of this too. if i have too little content in the content_rep div (the repeating texture) then there's a huge ass gap between the bottom of the content box and the bottom of the thingy.
FFFFFFFFFF
![[image loading]](http://i.imgur.com/Nwq8H.gif)
|
Hong Kong20321 Posts
actually nvm ,i added a backgroud to the overall container div LOL so it covers any missing space.
|
On May 07 2011 14:44 alffla wrote:
actually nvm ,i added a backgroud to the overall container div LOL so it covers any missing space.
yea, that's generally the technique.
any other problems or everything works now?
|
|
|
|
|
|
EPT![[image loading]](http://imgur.com/pCSp1.jpg)
![[image loading]](http://imgur.com/pna57.jpg)
![[image loading]](http://i.imgur.com/dlaYi.gif)
