Div Questions

[shwaza]

Ok, I am trying to learn how to use divs, as i have discovered the true crappiness of tables. Anyway, i have some questions, which i hope someone can answer.

1) is it possible to add rows and coloms to divs like tables? if yes, how?

2) is it possible to have background images in divs? if yes, how?

3) how come ie, and firefox react differently to divs? because in ie, my div test page, is offcentered.

4) Does anyone know of a really good tutorial for divs/css?

[688206002]

Originally posted by shwaza@Dec 28 2004, 11:36 AM
Ok, I am trying to learn how to use divs, as i have discovered the true crappiness of tables. Anyway, i have some questions, which i hope someone can answer.

1) is it possible to add rows and coloms to divs like tables? if yes, how?
Not really, no... divs are meant for layouts, not storing data in tabular format, hence rows and columns aren't really necessary.

2) is it possible to have background images in divs? if yes, how?
Yup, I offered a short tutorial on this in this thread: Go about 3-4 posts down the page. (http://www.hostmatrix.org/forum/index.php?showtopic=1526)

3) how come ie, and firefox react differently to divs? because in ie, my div test page, is offcentered.
Different browsers & different platforms handle CSS & divs differently.

4) Does anyone know of a really good tutorial for divs/css?
Here is a basic one on using CSS & divs to position: Tutorial (http://www.howtocreate.co.uk/tutorials/index.php?tut=1&part=9). You are also welcome to look at the code on my site; I suggest SoE (Main Page).. oh wait, you're already an alpha tester for it anyway! :P lol (http://688206002.hostmatrix.org/soe/). The code is relatively clean :P and it demonstrates using background images :) (Don't forget to download and look at the stylesheet too :P) If you want to use any of the code or stylesheet, just send me a short PM letting me know ;)

20175

[shwaza]

ok, just one more question now, you said that it wasnt possible to have rows and coloms, so say i wanted to have a place for content, and a place for links, and they were parralell to eachother, would i have to make a completley different div to do this?

Thanks for the help as well, and i think i will take a look at the source :P

[688206002]

Originally posted by shwaza@Dec 28 2004, 12:52 PM
say i wanted to have a place for content, and a place for links, and they were parralell to eachother, would i have to make a completley different div to do this?
20181



Yah, but trust me... if you do this, it'll also be easier to customize/change in the future :)

[shwaza]

ok, i figured i would just start doing that before you replied, just to see how it worked, and it is SOOOOO much easier and better layed out than tables, i'll never use tables again :) the only problem I'm making now, is background images, i havnt made a style sheet yet, so I am just putting all the dimensions of the divs, and the bg images and such right into the code, however, when i preview it, i cant get it to show the bg images :angry: do you know why this might be?

[688206002]

Originally posted by shwaza@Dec 28 2004, 01:12 PM
ok, i figured i would just start doing that before you replied, just to see how it worked, and it is SOOOOO much easier and better layed out than tables, i'll never use tables again :) the only problem I'm making now, is background images, i havnt made a style sheet yet, so I am just putting all the dimensions of the divs, and the bg images and such right into the code, however, when i preview it, i cant get it to show the bg images :angry: do you know why this might be?
20184


can i see the page or the code? :)

[shwaza]

Sure, here is one of the divs, that is supposed to have a background (images/bg.jpg) but it isnt showing.

<div id="content" style="position:absolute; left:182px; top:216px; width:600px; height:600px; z-index:3; background-image: url(images/bg.jpg); layer-background-image: url(images/bg.jpg); border: 1px none #000000;"></div>

and btw, i'm just adding in the background images with dreamweaver in the design view.

EDIT: hmm actually nvm the last two things i said :P it is working now. I geuss my dreamweaver just didnt want to show it :P

[mck9235]

I have had the same problem and I to was using Dreamweaver and it worked when I uploaded so I just figured it doesnt show them, or maybe I didnt give the right path... :D

[shwaza]

lol the funny thing was for me, was that i just saved it, and reopened dreamweaver, and there were the pictures lol, it didnt really have any reason not to show them.

Anyway, new question lol

How do you make it, so that when you put text into a div, that the div will expand once it get's filled and goes over, also, i dont want a scroll, and also, is it possible for the background image to keep repeating as it gets longer too?

[688206002]

Originally posted by shwaza+Dec 28 2004, 02:23 PM--><div class='quotetop'>QUOTE(shwaza @ Dec 28 2004, 02:23 PM)</div><div class='quotemain'>How do you make it, so that when you put* text into a div, that the div will expand once it get's filled and goes over?
20196
[/b]

try changing the CSS to overflow:visible (kinda buggy... and the intent of this is actually to get the content to display OUTSIDE the div if it doesn't fit... but all the IE versions (except IE 5 on mac) extend the div to fit the content.

interestingly, if you don't define the overflow property, the default is overflow:visible but this does not result in bugs; the content simply extends outside of the div


<!--QuoteBegin-shwaza@Dec 28 2004, 02:23 PM
also, i dont want a scroll, and also, is it possible for the background image to keep repeating as it gets longer too
20196
[/quote]

it should repeat automatically as long as it's got enough room to repeat. the only way for it NOT to repeat is by doing this:
background:url(images/SoEBG2_01.jpg) no-repeat;

[shwaza]

hmm lol funny thing is, that it wont repeat, :S anyway, i'm sure i can figure it out, now i have another problem. I decided to make a stylesheet, and i sort of based it on yours, and i got it working, in every aspect except for the background image, the alignment is fine and the size, but the image dosnt show up, here is the code.

#header{
position:absolute; left:182px; top:16px; width:600px; height:150px; z-index:1; background-image: url(images/header.jpg) repeat;
}

ps: thanks for all your help so far :)

EDIT: ok, does anyone have any idea why ie is allowing the background image to repeat in a div and firefox isnt...?

[688206002]

well, instead of background-image: url(images/header.jpg) repeat;

try

background:url(images/header.jpg);

[shwaza]

ok i did that, and it works on ie, but not on firefox :angry: do you have any repeating backgrounds on your site i could look at?

[688206002]

Originally posted by shwaza@Dec 29 2004, 06:28 AM
ok i did that, and it works on ie, but not on firefox :angry: do you have any repeating backgrounds on your site i could look at?
20342


no, i don't currently have a page that repeats images... sorry; but i've gotten images to repeat in firefox before with the same code; can i see the entire page and see if i can play around with it a bit?

[shwaza]

ok, well i dont have anything on the internet yet, but i could give you the css style sheet, and if you just make a blank page in dreamweaver, with divs with those id's and i could upload the image somewhere, just so you could use that :)

anyway heres the style sheet

a:link{
color:#0099ff; font: normal normal 12px Arial;
text-decoration: none
}
a:visited{
color:#0099ff; font: normal normal 12px Arial;
text-decoration: none
}
a:hover{
color:#990000; font: normal normal 12px Arial;
text-decoration: underline
}
a:active{
color:#0099ff; font: normal normal 11px Verdana;
text-decoration: none
}

#header{
position:absolute; left:182px; top:16px; width:600px; height:150px; z-index:1; background-image: url(images/header.jpg); layer-background-image: url(images/header.jpg); border: 1px none #000000;
}
#navigation{
position:absolute; left:182px; top:165px; width:600px; height:50px; z-index:2
}
#bordert{
position:absolute; left:182px; top:215px; width:600px; height:22px; z-index:3; background-image: url(images/bordert.jpg);
}
#logo{position:absolute; left:31px; top:16px; width:150px; height:200px; z-index:4
}
#content{
position:absolute;
left:182px;
top:236px;
width:600px;
height:17px;
z-index:5;
background-image: url(images/center.jpg);
repeat;
visibility: inherit;

}
#borderb{
position:absolute; left:182px; top:253px; width:600px; height:22px; z-index:6; background-image: url(images/borderb.jpg);
}


and i uploaded center.jpg at http://shwaza.4t.com/center.jpg so you can just change that source.

Lol it seems that my 4 questions have turned into like 20 lol thanks a lot :)

EDIT: sorry, that source dosnt work, here is the new one

http://www.storemypic.com/uploads/d72d2ce290.jpg

[688206002]

well, I'm assuming http://www.storemypic.com/uploads/d72d2ce290.jpg is center.jpg, so that's where i put it...

anyhow, the image is 600 pixels wide... and the div is 600px wide... so there really isn't room for it to repeat... when i change the div's width to anything greater than 600, it repeat in both browsers :P (likewise for height; when i make the height of the div anything above 100px, it repeats in both browsers with no modification to the code other than the size of the div)

[shwaza]

Ok, sorry for double post first, but this is the only way that someone would see it as having a new post :P so after i post this, I'll just delete my last post.

Anyway, i put up my new site, http://shwaza.hostmatrix.org and there is still a problem with the repeating background :angry: and i know it's not just my firefox, because mck said that it didnt repeat for him, and i found out, that it isnt just the background repeat, beacuse i made the image have a height of 2000px, yet, it still only fills up the amount of space where the div starts, not where it expands to, help?

btw: it works fine on IE but firefox = bleh.

[starmena3]

well I think there is an html code for repeated backgrounds im not sure. and yeah everything looks fine for me.

[shwaza]

Originally posted by starmena3@Dec 30 2004, 06:23 PM
well I think there is an html code for repeated backgrounds im not sure. and yeah everything looks fine for me.
20608


you're using IE i assume then?

[688206002]

Well, now that I can see the entire code, I know what the prob is :)

In your stylesheet, under #content, change height to 100% instead of a predefined pixel height (because you don't know how much space your text is going to take up).

[shwaza]

Ahh ok, *goes to try it* *cpanel is loading very slowly* *clicking on file manager* lol ok that's enough.

ok, i lied, cpanel is still loading, wtf is going on? still waiting... Bam! got it lol

Ok, well, that made a bit of difference, it shows all 2000px of the image, however, it dosnt repeat... yet it does still in ie. grrrrr. anymore suggestions?

EDIT: i also took out that 100% thing, because all it did was make all of my content divs on all my pages 2000px high. back to square one i geuss ;)

[688206002]

ummm... dunno, it repeats on my firefox... maybe try taking out the height thing altogether (ie. don't define the height)

EDIT:
k, after seeing your edit, i'm just a little confused :P how high do you want your content div to be? do you want it to be as large as possible to fit all the content, or do you want a scroll or something else?

[shwaza]

hehe one step ahead of you :P i already took out the height, yet, it still doesnt repeat

Also: did you scroll to the bottom, on the home page? because it's only that page, that is longer than 2000px

EDIT: do you have msn? because it might be a little easier to talk :P

EDIT2: Yes! i changed repeat-y; to repeat; yay!! its fixed :)

[688206002]

Awesome! :) gj
No I don't have MSN sorry... I stopped using IM a long time ago :P

[shwaza]

ok, i'm not even really sure why i added in the repeat-y i think i saw it somewhere while i was googling this lol