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.dt d">
<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{h eight:auto !important;
height:400px; /* For IE before 7*/
min-height:400px;
border: 3px dashed #FF9900;
}
..fotocam{margi n: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="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>
</body>
</html>
This is my idea for the icon: |-------------|
| --------- |
| |fotocam| |
| |image | | <==divcam DIV
| --------- |
| "iconname" |
|-------------|
Thanks in advance for your help! ;-)
Massi 7  5433 
On 2006-12-06, massic80 <TI************ *******@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!
"massic80" <TI************ *******@gmail.c omwrote 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="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>
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
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
"massic80" <TI************ *******@gmail.c omwrote 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
On 2006-12-06, massic80 <TI************ *******@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" <ma**********@N OSPAMbytronic.c omwrote in message
news:12******** *****@corp.supe rnews.com...
"massic80" <TI************ *******@gmail.c omwrote 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.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> This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics | |
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 Firebird, like the p's inside teh
divs are independent of the div's properties... (looked okay until I
applied "display: inline;")
What would be the proper way (I'm assuming that Firebird is displaying
the proper behaviour)?
|
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 behave as expected. the DIVs
"collapse" into small rectangles (i put a border around them so i could
see), but their contents (some middle-aligned text) span the width of the
page. if not for the borders that i added, it would appear that each DIV was...
|
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 one another inside the first div. Whenever I nest these divs
inside the first, it always treats each of them like a block element and
puts them on the next line down. If I try to define 'block: inline' for
each of them, the ones without images...
|
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;
height: 346px;"></div>
Since by default, the display property is set to block, they show up on
different lines. Since each div contains half of a complete background
image, I need then to show up side-by-side. The thing is, when I set the
|
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):
+---------------------------+
|+----+ +-------+ |
||div2| | div3 | |
|| | | | |
|| | | | |
|| | | | |
| | |
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 doesn't seem to be acting as an inline element. I suspect the
floats in the images within the div may be contributing to the problem,
but I don't know what to do about it if that's the case. Any ideas?
|
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>
<style type="text/css">
<!--
..b {
|
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 I have
display:table-cell set on each of the DIVs. This works as far as
lining them up is concerned, however to get any spacing between them
the only thing I could do was to put some in between each one
(margin had no effect).
This...
|
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: white">Hello, world!
</div>
You could set the width inside the floated div to 100% but if you do
that and if you have a floated fixed width div, the 100% width div
will appear on a new line, as demonstrated (2):
|
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, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look !
Part I. Meaning of...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it.
First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
| | |
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 tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth.
The Art of Business Website Design
Your website is...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own....
Now, this would greatly impact the work of software developers. The idea...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules.
He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms.
Adolph will...
|
by: 6302768590 |
last post by:
Hai team
i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
|
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
| | |
by: bsmnconsultancy |
last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...
| |
