Putting DIVs inline

**Ben C** · Dec 6 '06, 09:05 AM

Re: Putting DIVs inline

On 2006-12-06, massic80 <TIENITILASPAMm assic80@gmail.c omwrote:

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!

**Martin Eyles** · Dec 6 '06, 03:35 PM

Re: Putting DIVs inline

"massic80" <TIENITILASPAMm assic80@gmail.c omwrote in message
news:45762ef5_2 @x-privat.org...

Do U think there is another way to show "icons"? I need a single ID for
the image+text!
>
<div id="boxresource s">
<div id="ciao" class="divcam"< !--It's a 32pxX32px picture-->
<img src="http://www.northview.o rg/images/client/2/videocamera.gif "
class="fotocam"/>
<br/>ciao
</div>
<div id="hi" class="divcam">
<img src="http://www.northview.o rg/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 "boxresourc es", 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.o rg/images/client/2/videocamera.gif )}
#hi
{background-image:url(http://www.northview.o rg/images/client/2/videocamera.gif )}
</style>

<ul id="boxresource s">
<li id="ciao">ciao </li>
<li id="hi">hi</li>
</ul>

**massic80** · Dec 6 '06, 06:32 PM

Re: Putting DIVs inline

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

**massic80** · Dec 6 '06, 06:50 PM

Re: Putting DIVs inline

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

**Martin Eyles** · Dec 7 '06, 09:55 AM

Re: Putting DIVs inline

"massic80" <TIENITILASPAMm assic80@gmail.c omwrote in message
news:457712b2_2 @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

**Ben C** · Dec 7 '06, 10:05 AM

Re: Putting DIVs inline

On 2006-12-06, massic80 <TIENITILASPAMm assic80@gmail.c omwrote:

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.

**Martin Eyles** · Dec 7 '06, 04:55 PM

Re: Putting DIVs inline

"Martin Eyles" <martin.eyles@N OSPAMbytronic.c omwrote in message
news:12nfqpc1uc ctq20@corp.supe rnews.com...

"massic80" <TIENITILASPAMm assic80@gmail.c omwrote in message
news:457712b2_2 @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.acu lo.us/javascripts/prototype.js"
type="text/javascript"></script>
<script src="http://wiki.script.acu lo.us/javascripts/scriptaculous.j s"
type="text/javascript"></script>
<script type="text/javascript" language="javas cript">
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.o rg/images/client/2/videocamera.gif )}
#hi
{background-image:url(http://www.northview.o rg/images/client/2/videocamera.gif )}
</style>
</head>
<body>
<ul id="boxresource s">
<li id="ciao">ciao </li>
<li id="hi">hi</li>
</ul>
</body>
</html>

Putting DIVs inline

Putting DIVs inline

Comment

Comment

Comment

Comment

Comment

Comment

Comment