|
|
|
Croatia9517 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.
|
Hyrule19152 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
|
|
|
|
|
|
EPT![[image loading]](http://imgur.com/pCSp1.jpg)
![[image loading]](http://imgur.com/pna57.jpg)
