im thinking of ditching all my tables to do and learn CSS can an iframe be positioned statically within a div tag to take up 100% of it?
and can a div take take up 100% of the actual page? i know when u use tables and use 100% as a setting theres still some spare pixels.Originally posted by bladekitten
im thinking of ditching all my tables to do and learn CSS can an iframe be positioned statically within a div tag to take up 100% of it?
yes, but i dont think ull want to use an iframe, u can do the iframe appearance w/ css using a div and overflow: scroll; which is better
Originally posted by bladekitten
and can a div take take up 100% of the actual page? i know when u use tables and use 100% as a setting theres still some spare pixels.
yes. A table can do the same thing by setting setting <body leftmargin="0" topmargin="0"> but css can do the same thing:
body { margin: 0; }
div { width: 100%; height: 100%; }Let's say you have 2 elements you want on the same line, even if it's wider than the screen. With tables it's easy, you put them in cells of the same row, and no matter what, they stay adjacent to each other. What's the css equivalent?Look at this.
#container {
width: 619px;
}
#left, #right {
padding: 3px;
width: 300px;
height: 200px;
border: 1px solid #999;
background-color: #ccc;
float: left;
}
#right {
margin-left: 3px;
}
<div id="container">
<div id="left">
<p>Left DIV here.</p>
</div>
<div id="right">
<p>Right DIV here.</p>
</div>
</div>
The floated elements alone will collapse onto two lines if the browser is small enough, so that's where the containing DIV comes in. Its width is equal to the combined with of the floated DIVs, and acts as a "spreader" to keep the floated DIVs from dropping down to two lines.I tried that very thing, even brough the height down to "squeeze" them, had float left and right with clear left and right on the 2 elements, and it only seems to work in IE. Couldn't get it in a gecko. Let's say the 2 elements were images. Why would nested divs inside the containing one be necessary?Originally posted by DUNSEL
I tried that very thing, even brough the height down to "squeeze" them, had float left and right with clear left and right on the 2 elements, and it only seems to work in IE. Couldn't get it in a gecko. Let's say the 2 elements were images. Why would nested divs inside the containing one be necessary?
w/ two images u wouldnt need the two nested divs. just apply the float: left; for the 1st image and the second image would followOriginally posted by DUNSEL
I tried that very thing, even brough the height down to "squeeze" them, had float left and right with clear left and right on the 2 elements, and it only seems to work in IE. Couldn't get it in a gecko.
Can we see the code? The example I provided was tested in FB, so I don't even know if it'll work in IE (oh well).
Originally posted by DUNSEL
Let's say the 2 elements were images. Why would nested divs inside the containing one be necessary?
They wouldn't. I just used two DIVs because of your particular question on how to put two elements on the same line and have them stay there. If you used images, you wouldn't need the two DIVs.Actually IE was the one it worked in, and I think I know why. Clear says that the element it's applied to will have it's top left corner clear the bottom right corner of the element prior in the doc flow. So in other words, below and to the right, which seems entirely and utterly useless to me, however it is the spec. IE doesn't follow the spec. That's why it worked in IE, and not in gecko or Opera.im making a new banner since i have more space with the 0px margins , does anyone know what the exact banner size would be in 800x600
res? 800 was too big and im trying 795 now if i cant pinpoint it i will have to tile something as a background, will this css work for tiling a <div> tag background-image:url("tile.gif
; background-repeat:repeat; ?Originally posted by bladekitten
im making a new banner since i have more space with the 0px margins , does anyone know what the exact banner size would be in 800x600
res? 800 was too big and im trying 795 now
You can't know the exact width, because there are too many variables — such as scrollbar size, and various menus that take up horizontal space when opened.
Originally posted by bladekitten
if i cant pinpoint it i will have to tile something as a background, will this css work for tiling a <div> tag background-image:url("tile.gif; background-repeat:repeat; ?
Background images tile by default.ok well was that the proper css for putting in a background image then?
background-image:url("tile.gif");Yup.
im trying to figure out where i went wrong here, everything seems to be correct but its not working.
<div style="width:100%;height:120px; background-image:url("http://www.angeltowns2.com/members/collado/tiles/V2smalltile.jpg");>
<img src=http://www.webdeveloper.com/forum/archive/index.php/"http://www.angeltowns2.com/members/collado/banners/ColladoDesignsV2bio4.jpg" alt="collado designs 2004" />
</div>What specifically isn't working? Make sure the path to the background image is correct; also, it could be the quotes around the URL. Some people use them, some don't; some say they are wrong, some say they aren't. (In all the examples at the W3C website, they use quotes.) Try removing the quotes, too.yep it was the quotes the example in the book showed it with quotes and i did what the book said to a T, then i tried without the quotes and voila! it worked thats strange.
especially if W3C says use them.Glad you got it working.The problem you were having with quotes was because you were using them in the style attribute. You can't use double quotes in there, you'd have to use single quotes:
<div style="width:100%;height:120px; background:url('http://www.angeltowns2.com/members/collado/tiles/V2smalltile.jpg');">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"http://www.angeltowns2.com/members/collado/banners/ColladoDesignsV2bio4.jpg" alt="collado designs 2004" />
</div>
Also, it's a good idea to specify the height/width of all your images with the height="" and width="" attributes. When your pages load, it will stop everything from shifting around as the images load. Basically, it will keep your layout stable.
Also, for set-width banners, I have found that 700px width maximum is good. It works without scrollbars for AOL users at 800 x 600, and obviously, fine for those with larger screens. So that's usually the banner size I go with if I'm making it non-resizable.Originally posted by MstrBob
The problem you were having with quotes was because you were using them in the style attribute. You can't use double quotes in there, you'd have to use single quotes
Whoa, I must be getting lazy -- I didn't even catch that.
and can a div take take up 100% of the actual page? i know when u use tables and use 100% as a setting theres still some spare pixels.Originally posted by bladekitten
im thinking of ditching all my tables to do and learn CSS can an iframe be positioned statically within a div tag to take up 100% of it?
yes, but i dont think ull want to use an iframe, u can do the iframe appearance w/ css using a div and overflow: scroll; which is better
Originally posted by bladekitten
and can a div take take up 100% of the actual page? i know when u use tables and use 100% as a setting theres still some spare pixels.
yes. A table can do the same thing by setting setting <body leftmargin="0" topmargin="0"> but css can do the same thing:
body { margin: 0; }
div { width: 100%; height: 100%; }Let's say you have 2 elements you want on the same line, even if it's wider than the screen. With tables it's easy, you put them in cells of the same row, and no matter what, they stay adjacent to each other. What's the css equivalent?Look at this.
#container {
width: 619px;
}
#left, #right {
padding: 3px;
width: 300px;
height: 200px;
border: 1px solid #999;
background-color: #ccc;
float: left;
}
#right {
margin-left: 3px;
}
<div id="container">
<div id="left">
<p>Left DIV here.</p>
</div>
<div id="right">
<p>Right DIV here.</p>
</div>
</div>
The floated elements alone will collapse onto two lines if the browser is small enough, so that's where the containing DIV comes in. Its width is equal to the combined with of the floated DIVs, and acts as a "spreader" to keep the floated DIVs from dropping down to two lines.I tried that very thing, even brough the height down to "squeeze" them, had float left and right with clear left and right on the 2 elements, and it only seems to work in IE. Couldn't get it in a gecko. Let's say the 2 elements were images. Why would nested divs inside the containing one be necessary?Originally posted by DUNSEL
I tried that very thing, even brough the height down to "squeeze" them, had float left and right with clear left and right on the 2 elements, and it only seems to work in IE. Couldn't get it in a gecko. Let's say the 2 elements were images. Why would nested divs inside the containing one be necessary?
w/ two images u wouldnt need the two nested divs. just apply the float: left; for the 1st image and the second image would followOriginally posted by DUNSEL
I tried that very thing, even brough the height down to "squeeze" them, had float left and right with clear left and right on the 2 elements, and it only seems to work in IE. Couldn't get it in a gecko.
Can we see the code? The example I provided was tested in FB, so I don't even know if it'll work in IE (oh well).
Originally posted by DUNSEL
Let's say the 2 elements were images. Why would nested divs inside the containing one be necessary?
They wouldn't. I just used two DIVs because of your particular question on how to put two elements on the same line and have them stay there. If you used images, you wouldn't need the two DIVs.Actually IE was the one it worked in, and I think I know why. Clear says that the element it's applied to will have it's top left corner clear the bottom right corner of the element prior in the doc flow. So in other words, below and to the right, which seems entirely and utterly useless to me, however it is the spec. IE doesn't follow the spec. That's why it worked in IE, and not in gecko or Opera.im making a new banner since i have more space with the 0px margins , does anyone know what the exact banner size would be in 800x600
res? 800 was too big and im trying 795 now if i cant pinpoint it i will have to tile something as a background, will this css work for tiling a <div> tag background-image:url("tile.gif
; background-repeat:repeat; ?Originally posted by bladekitten im making a new banner since i have more space with the 0px margins , does anyone know what the exact banner size would be in 800x600
res? 800 was too big and im trying 795 now
You can't know the exact width, because there are too many variables — such as scrollbar size, and various menus that take up horizontal space when opened.
Originally posted by bladekitten
if i cant pinpoint it i will have to tile something as a background, will this css work for tiling a <div> tag background-image:url("tile.gif
; background-repeat:repeat; ? Background images tile by default.ok well was that the proper css for putting in a background image then?
background-image:url("tile.gif");Yup.
im trying to figure out where i went wrong here, everything seems to be correct but its not working.<div style="width:100%;height:120px; background-image:url("http://www.angeltowns2.com/members/collado/tiles/V2smalltile.jpg");>
<img src=http://www.webdeveloper.com/forum/archive/index.php/"http://www.angeltowns2.com/members/collado/banners/ColladoDesignsV2bio4.jpg" alt="collado designs 2004" />
</div>What specifically isn't working? Make sure the path to the background image is correct; also, it could be the quotes around the URL. Some people use them, some don't; some say they are wrong, some say they aren't. (In all the examples at the W3C website, they use quotes.) Try removing the quotes, too.yep it was the quotes the example in the book showed it with quotes and i did what the book said to a T, then i tried without the quotes and voila! it worked thats strange.
especially if W3C says use them.Glad you got it working.
The problem you were having with quotes was because you were using them in the style attribute. You can't use double quotes in there, you'd have to use single quotes:<div style="width:100%;height:120px; background:url('http://www.angeltowns2.com/members/collado/tiles/V2smalltile.jpg');">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"http://www.angeltowns2.com/members/collado/banners/ColladoDesignsV2bio4.jpg" alt="collado designs 2004" />
</div>
Also, it's a good idea to specify the height/width of all your images with the height="" and width="" attributes. When your pages load, it will stop everything from shifting around as the images load. Basically, it will keep your layout stable.
Also, for set-width banners, I have found that 700px width maximum is good. It works without scrollbars for AOL users at 800 x 600, and obviously, fine for those with larger screens. So that's usually the banner size I go with if I'm making it non-resizable.Originally posted by MstrBob
The problem you were having with quotes was because you were using them in the style attribute. You can't use double quotes in there, you'd have to use single quotes
Whoa, I must be getting lazy -- I didn't even catch that.