Putting DIVs inline - HTML / CSS

massic80

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"
<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

Subscribe Post Reply

5418

Ben C

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

Martin Eyles

"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"
<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

massic80

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

massic80

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

Martin Eyles

"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

Ben C

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

"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

Similar topics

Manipulating divs

by: Firas D. | last post by:

http://firasd.org/ The divs of the 'box' class seem to have the effect I want in IE (namely: consistent height and horizontal alignment along the set of divs), but it totally falls apart in...

HTML / CSS

Inline DIVs Under Netscape/Opera

by: Adam Siler | last post by:

i want to display a series of inline, fixed-width DIVs that will wrap into columns - a table, basically. i can do it under Internet Explorer, but the same code under Netscape or Opera does not...

HTML / CSS

Nested divs need to be inline, not block

by: Aaron | last post by:

Hi, I'm trying to use style sheets instead of tables for layout, but I'm not sure on how to do something... I have a div (100% width) containing 3 other divs. Each needs to be lined up next to...

HTML / CSS

Making empty divs appear side by side

by: Aaron | last post by:

I have the following divs: <div style="background-image: url(images/house_01.jpg); width: 249px; height: 346px;"></div> <div style="background-image: url(images/house_02.jpg); width: 251px;...

HTML / CSS

Center two side-by-side divs within a container?

by: Jamie Jackson | last post by:

I'd like to get a couple of divs centered in a container (let's say the container is a td, but it could also be a div). Here's what I have now (div2 and div3 are floated left):...

HTML / CSS

problems with inline divs

by: yawnmoth | last post by:

http://www.frostjedi.com/terra/dev/test.html I'd like to have the colored boxes appear on the same line as "Test" does. The div containing the colored boxes is defined as being inline, yet...

HTML / CSS

HELP | How can I display DIVs block by block INLINE? | key: div display:inline

by: txican | last post by:

the HTML is: ---------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"> <html> <head> <title>foo</title>...

HTML / CSS

Lining up four DIVs horizontally

by: Adam | last post by:

I have four roughly square DIVs, all the same height, which I need to line up horizontally across the page. What would be the best way to do this? At the moment I have a very botched solution where...

HTML / CSS

floating divs and 100% width

by: yawnmoth | last post by:

How do you get both of these div's to have a 100% width? (1): <div style="float: left; background: black; color: white">Hello, world! </div> <div style="clear: both; background: blue; color:...

HTML / CSS

Batch import of multiple excel files into the database

by: ryjfgjl | last post by:

If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...

Data Management

Merging data from multiple Excel files

by: ryjfgjl | last post by:

In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...

Data Management

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing