467,915 Members | 1,643 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 467,915 developers. It's quick & easy.

Putting DIVs inline

Hi everybody!
I'm making a page for an exam at uni.
In two DIV blocks of it there should appear (and disappear) some
"icons", due to XML messages, so I dunno how many of them should I can
obtain; I want to show a small image, with its "icon name" under it, so
I thought to use a DIV where I put a small image, a <br/and the icon
name (and text-align:center as CSS). My page is fully liquid, so my DIVS
may be resized, and I wanted them to be distributed line-by-line until
filling the DIV line, and after it the next one.
I tried giving them a fixed width and weight, and giving display:inline
style to "divcam" class DIVs, but it didn't work... I can't find a way
to put them inline. I prepared a "copy" of that part to show U my
problem, and copied it here... can U help me? I hate those damn DIVs in
the middle there! :-)

Do U think there is another way to show "icons"? I need a single ID for
the image+text!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>How to put icons inline?</title>
<style type="text/css">

#boxresources{height:auto !important;
height:400px; /* For IE before 7*/
min-height:400px;
border: 3px dashed #FF9900;
}
..fotocam{margin:0px;
padding:0px;
}
..divcam{border:none; // width and height oversized, to be sure of giving
space to text;
/*width:100px;
height:100px;
display:inline;*/
margin:28px;
padding:0px;
text-align:center;
}
</style>
</head>

<body>
<div id="boxresources">
<div id="ciao" class="divcam"<!--It's a 32pxX32px picture-->
<img src="http://www.northview.org/images/client/2/videocamera.gif"
class="fotocam"/>
<br/>ciao
</div>
<div id="hi" class="divcam">
<img src="http://www.northview.org/images/client/2/videocamera.gif"
class="fotocam"/>
<br/>hi
</div>
</div>
</body>
</html>

This is my idea for the icon: |-------------|
| --------- |
| |fotocam| |
| |image | | <==divcam DIV
| --------- |
| "iconname" |
|-------------|

Thanks in advance for your help! ;-)
Massi
Dec 6 '06 #1
  • viewed: 5155
Share:
7 Replies
On 2006-12-06, massic80 <TI*******************@gmail.comwrote:
Hi everybody!
I'm making a page for an exam at uni.
In two DIV blocks of it there should appear (and disappear) some
"icons", due to XML messages, so I dunno how many of them should I can
obtain; I want to show a small image, with its "icon name" under it, so
I thought to use a DIV where I put a small image, a <br/and the icon
name (and text-align:center as CSS).
That should work.
My page is fully liquid, so my DIVS may be resized, and I wanted them
to be distributed line-by-line until filling the DIV line, and after
it the next one.
In that case you probably want the divs to be display: inline-block. But
since that's not supported by Firefox, leave them display: block but
make them float: left.

[snip]
.fotocam{margin:0px;
padding:0px;
}
.divcam{border:none; // width and height oversized, to be sure of giving
That C++ style comment (//) isn't legal in CSS, which causes the rest of
the properties in the selector to be discarded.
space to text;
/*width:100px;
height:100px;
display:inline;*/
And anyway, you seem to have commented out display: inline with this
time a proper CSS comment!
Dec 6 '06 #2
"massic80" <TI*******************@gmail.comwrote in message
news:45********@x-privat.org...
Do U think there is another way to show "icons"? I need a single ID for
the image+text!

<div id="boxresources">
<div id="ciao" class="divcam"<!--It's a 32pxX32px picture-->
<img src="http://www.northview.org/images/client/2/videocamera.gif"
class="fotocam"/>
<br/>ciao
</div>
<div id="hi" class="divcam">
<img src="http://www.northview.org/images/client/2/videocamera.gif"
class="fotocam"/>
<br/>hi
</div>
</div>
This is my idea for the icon: |-------------|
| --------- |
| |fotocam| |
| |image | | <==divcam DIV
| --------- |
| "iconname" |
|-------------|

Thanks in advance for your help! ;-)
Massi
I think that in reality you are dealing with a list of "boxresources", and
that displaying an icon to go with this is more a point of style than
content. Therefore I would suggest replacing your boxresources div with an
unordered list, and your divcam div with list items. You can then take the
images out, and put them in a stylessheet.

Something like this:

<style>
/* General Style for icon list */
#boxresources {height:auto !important;
height:400px; /* For IE before 7*/
min-height:400px;
border: 3px dashed #FF9900;
list-style-type: none; margin-left:0; padding-left: 0}

/* The first line makes the li elements flow left-to right
The second line provides vertical space for the icon
The third line provides horizontal space for the icon and text */
#boxresources li {display: block; float:left; text-align:center;
background-repeat: no-repeat; padding-top:50px;
width:auto !important; width:50px; /* For IE before 7*/
min-width:50px}

/* define icons for each list item id */
#ciao
{background-image:url(http://www.northview.org/images/client/2/videocamera.gif)}
#hi
{background-image:url(http://www.northview.org/images/client/2/videocamera.gif)}
</style>

<ul id="boxresources">
<li id="ciao">ciao</li>
<li id="hi">hi</li>
</ul>
Dec 6 '06 #3
Martin Eyles ha scritto:
Therefore I would suggest replacing your boxresources div with an
unordered list, and your divcam div with list items. You can then take the
images out, and put them in a stylessheet.
Hem... thanks Martin, but.. maybe it would be easier to be "used", but..
do U think it would be fine to be dragged, with scriptaculous library
(yes, I didn't tell U that ;-))?
Massi
Dec 6 '06 #4
Ben C ha scritto:
That should work.
;-)
In that case you probably want the divs to be display: inline-block.But
since that's not supported by Firefox
Does it exist? I tried it also with IE6, but it also didn't work! ;-)
make them float: left.
It works, THANKS!! :-) I neither tried it, cause I thought it would just
have put all the icons in the left side, one under the previous :-) Now,
just to be PERFECT, is there a way to make both margins equal? I mean,
if I give the image a margin, dunno why IE gives it a different one than
Firefox... but the "problem" is: how to "fill", or distribute the "extra
space" on the right, when I resize the window-resize the div? I'd like
(but it's not necessary) to have a sort of "justify" :-)
That C++ style comment (//) isn't legal in CSS, which causes the rest of
the properties in the selector to be discarded.
Whoopps! U're right... my new LCD screen showed me the Dreamweaver
textcolor color slightly different than comments'... and I didn't notice
it wasn't gray! :-) THANKS AGAIN!
And anyway, you seem to have commented out display: inline with this
time a proper CSS comment!
I did, cause I wanted to show U what I DIDN'T want, and to allow U to
quickly modify the code to try the "display:inline" version ;-)
I'll cite U in my file source! :-)
Massi
Dec 6 '06 #5
"massic80" <TI*******************@gmail.comwrote in message
news:45********@x-privat.org...
Martin Eyles ha scritto:
>Therefore I would suggest replacing your boxresources div with an
unordered list, and your divcam div with list items. You can then take
the images out, and put them in a stylessheet.

Hem... thanks Martin, but.. maybe it would be easier to be "used", but..
do U think it would be fine to be dragged, with scriptaculous library
(yes, I didn't tell U that ;-))?
Massi
From my (brief) look at the scriptaculous site I don't see how it will be
any different to using divs. You just use the id of the specific draggable
element in your script (in this case, the id of an li element), so that
should be the only reference it needs. Give it a try, and see how it works
before dismissing it outright.

Martin
Dec 7 '06 #6
On 2006-12-06, massic80 <TI*******************@gmail.comwrote:
Ben C ha scritto:
>That should work.
;-)
>In that case you probably want the divs to be display: inline-block.But
since that's not supported by Firefox

Does it exist? I tried it also with IE6, but it also didn't work! ;-)
It's in the CSS 2.1 spec and works in Opera and Konqueror.
>make them float: left.
It works, THANKS!! :-) I neither tried it, cause I thought it would just
have put all the icons in the left side, one under the previous :-) Now,
just to be PERFECT, is there a way to make both margins equal? I mean,
if I give the image a margin, dunno why IE gives it a different one than
Firefox... but the "problem" is: how to "fill", or distribute the "extra
space" on the right, when I resize the window-resize the div? I'd like
(but it's not necessary) to have a sort of "justify" :-)
This sounds like what neuneudr was just asking in the thread called
"variable-width spacer between fixed size pictures".

This is difficult, I made a not-very-good suggestion in that thread.
Dec 7 '06 #7

"Martin Eyles" <ma**********@NOSPAMbytronic.comwrote in message
news:12*************@corp.supernews.com...
"massic80" <TI*******************@gmail.comwrote in message
news:45********@x-privat.org...
>Martin Eyles ha scritto:
>>Therefore I would suggest replacing your boxresources div with an
unordered list, and your divcam div with list items. You can then take
the images out, and put them in a stylessheet.

Hem... thanks Martin, but.. maybe it would be easier to be "used", but..
do U think it would be fine to be dragged, with scriptaculous library
(yes, I didn't tell U that ;-))?
Massi

From my (brief) look at the scriptaculous site I don't see how it will be
any different to using divs. You just use the id of the specific draggable
element in your script (in this case, the id of an li element), so that
should be the only reference it needs. Give it a try, and see how it works
before dismissing it outright.
Put this together now, using the following code, and it works in IE6, IE7,
Firefox 2 & Opera 9. I like the scriptaculous thing btw, so thanks for
pointing it out. Could be very useful.
<html>
<head>
<script src="http://wiki.script.aculo.us/javascripts/prototype.js"
type="text/javascript"></script>
<script src="http://wiki.script.aculo.us/javascripts/scriptaculous.js"
type="text/javascript"></script>
<script type="text/javascript" language="javascript">
function initialise(){
new Draggable('ciao', {revert:true} );
new Draggable('hi', {revert:true} );
}

window.onload = initialise;
</script>
<style>
/* General Style for icon list */
#boxresources {height:auto !important;
height:400px; /* For IE before 7*/
min-height:400px;
border: 3px dashed #FF9900;
list-style-type: none; margin-left:0; padding-left: 0}

/* The first line makes the li elements flow left-to right
The second line provides vertical space for the icon
The third line provides horizontal space for the icon and text */
#boxresources li {display: block; float:left; text-align:center;
background-repeat: no-repeat; padding-top:50px;
width:auto !important; width:50px; /* For IE before 7*/
min-width:50px}

/* define icons for each list item id */
#ciao
{background-image:url(http://www.northview.org/images/client/2/videocamera.gif)}
#hi
{background-image:url(http://www.northview.org/images/client/2/videocamera.gif)}
</style>
</head>
<body>
<ul id="boxresources">
<li id="ciao">ciao</li>
<li id="hi">hi</li>
</ul>
</body>
</html>
Dec 7 '06 #8

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

20 posts views Thread by Firas D. | last post: by
30 posts views Thread by Adam Siler | last post: by
3 posts views Thread by Aaron | last post: by
4 posts views Thread by Aaron | last post: by
2 posts views Thread by Jamie Jackson | last post: by
10 posts views Thread by yawnmoth | last post: by
4 posts views Thread by Adam | last post: by
11 posts views Thread by yawnmoth | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.