This is Interesting: Free Magazines for Graphics designers and webmasters  


Home > Archive > Stylesheets > December 2005 > span style





You are viewing an archived Text-only version of the thread. To view this thread in it's original format and/or if you want to reply to this thread please [click here]

Author span style
ste.paoletti@tiscali.it

2005-12-12, 10:33 pm

I have a problem with css
I have a this xhtml code:
<span>
<span>
<span/>
<input type="radio"/>
....
<span/>
<input type="button" onclick ="var s=document.createElement('span');
this.previousSibling.firstChild.appendChild(s); "/>


the first span is display:block
the second span is display:inline
the thirdth span is display:inline and have a background-image;

I want that when the button is pressed, the image appears without shift
left the radio button and the rest of elements(...).
I had tried by setting the width property of the second span but it
don't work. It should work in firefox and IE. Someone can help me
please?
thanks

Spartanicus

2005-12-12, 10:33 pm

ste.paoletti@tiscali.it wrote:

>I have a problem with css
>I have a this xhtml code:
><span>
> <span>
> <span/>
> <input type="radio"/>
> ....
><span/>


Invalid HTML, correct the errors.

--
Spartanicus
ste.paoletti@tiscali.it

2005-12-12, 10:33 pm

<span>
<span>
</span>
<input type="radio"/>
....
</span>

Spartanicus

2005-12-12, 10:33 pm

ste.paoletti@tiscali.it wrote:

><span>
> <span>
> </span>
> <input type="radio"/>
> ....
></span>


http://diveintomark.org/archives/20...e_wont_help_you
http://www.spartanicus.utvinternet....us_help_you.htm

--
Spartanicus
Adam Risser

2005-12-12, 10:33 pm

You cannont set the width of the second span because it is an inline
element. That's not valid.

Also, if the first span is block, then why not make it a div (which is
block automatically)?

Taking a guess at what you are trying to do... I would make the second
span a div (block element) and float it aside of what you want with a
set width.

Fix your code and post an example of your somewhere where everyone here
can look at it. Then we will be able to better help.

Adam

ste.paoletti@tiscali.it

2005-12-13, 6:52 pm

I'm sorry but I can't speeck and understand english very well.
All the xhtml code of my page came from an XML file with xsl
trasformation (<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="layout.xsl" type="text/xsl"?>.......).
I can obtain this xhtml code:
.....
<span>
<input type='radio' class='radio' />
<span>1</span> <!-- the number of choice-->
<span>some text</span> <!-- the content of choice-->
</span>
<input type='button' onclick='javascript code...;' />
.....
The radio-button, the number and the content should be in the same line
so I had set the display:inline property for theese elements.
when the button is clicked an arrow image( with click event for open a
new window with new content) should appears at the left of the
radio-button,in the same line, and the content of the line should not
move to the right when the image is visualized.
To do so it need to reserve a space for the image before the radio and
the rest of the line but I have some problems...

I tried in this way:
<span>
<span>
</span> <!--new span-->
<input type='radio' class='radio' />
<span>1</span> <!-- the number of choice-->
<span>some text</span> <!-- the content of choice-->
</span>
<input type='button' onclick='javascript code...;' />


when the button is pressed is created the onclick attribute for the new
span and is applied the background-image property (I can't use a anchor
tag with href attribute for js code because in this code I must have a
reference to the element that is clicked. With span and onclick
otherwise I can call a function in the way that follow:
"exampleFunction(this);".)
In this way the problem is that if the new span is display:inline the
content of the line(radio, number and content) move to the right when
the button is pressed( I can't use the width property), and if the new
span is display:block the conten of the line apperars in a new line.

How can I solve this prolem?
thanks

Sponsored Links


Copyright 2003 - 2008 forum4designers.com  Software forum  Computer Hardware reviews