Strano comportamento di position

**Dennis** · 14-10-2004, 15:34

Il mio intento è di mettere un insieme di div 1*1 px un linea orizzontale, all'interno di un contenitore:

<script>
function paintLine(){
p=document.getElementById("prova");
for(i=0;i<30;i++){
p.innerHTML+="<div style='height:1px;width:1px;background-color:black;position:relative;top:100px;left:"+i+" px'></div>";
}
}
</script>
<body onClick="paintLine()">
<span>Testo</span>

<div id="prova" style="width:30px;height:200px;background-color:aqua"></div>
</body>

la linea va pendente (m<0), mentre dovrebbe andare orizzontale.

se setto position:absolute, la linea va diritta.

Ora, evidentemente prende qualche rifermimento del top errato...

:master:

**Mich_** · 14-10-2004, 16:33

Un <div> e` per default un oggetto con "display:block;" .
Vuol dire che ce ne puo` stare solo uno per ogni riga.

Prova ad aggiungere nel CSS "display:inline;" .

**Dennis** · 14-10-2004, 17:16

sai, ci sto provando...

<html>
<head>
<style>
#prova{
display:inline;
width:30px;
height:200px;
background-color:aqua;
}
.line{

height:1px;
width:1px;
background-color:black;
position:relative;
top:100px;
}
</style>

<script>
function paintLine(){
p=document.getElementById("prova");
for(i=0;i<30;i++){
p.innerHTML+="<div class=\"line\"style=\"left:"+i+"px\"></div>";
}
}
</script>
</head>
<body onClick="paintLine()">
<span>Testo</span>

<div id="prova">c</div>
</body>
</html>

**badaze** · 14-10-2004, 17:39

Prova questo

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
</head>
<body>
<script language="JavaScript" type="text/javascript">
<!--
var dati = new Array(100,25,10,33,56,77,55,5);
var colonne = new Array('col1','col2','col3','col4','col5','col6','col7','col8');
for (i=0;i<dati.length;i++) {
 document.write('<div style="width:'+dati[i]+'px;background-color:red"></div>');
} // for (i=0;i<dati.length;i++)
//-->
</script>
<script language="JavaScript" type="text/javascript">
<!--
var dati2 = new Array(100,25,10,33,56,77,55,5);
document.write('<table><tr>');
for (i=0;i<dati2.length;i++) {
 document.write('<td valign="bottom">');
 document.write('<DIV style="height:'+dati2[i]+'px;background-color:red;writing-mode:tb-rl;">'+dati2[i]+'</DIV>');
 document.write('</td>');
} // for (i=0;i<dati2.length;i++)
document.write('</tr><tr>');
for (i=0;i<dati2.length;i++) {
 document.write('<td valign="bottom">');
 document.write('<DIV style="writing-mode:tb-rl;">'+colonne[i]+'</DIV>');
 document.write('</td>');
} // for (i=0;i<dati2.length;i++)
document.write('</tr></table>');
//-->
</script>

</body>
</html>

**Dennis** · 14-10-2004, 17:55

Originariamente inviato da badaze
Prova questo

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
</head>
<body>
<script language="JavaScript" type="text/javascript">
<!--
var dati = new Array(100,25,10,33,56,77,55,5);
var colonne = new Array('col1','col2','col3','col4','col5','col6','col7','col8');
for (i=0;i<dati.length;i++) {
 document.write('<div style="width:'+dati[i]+'px;background-color:red"></div>');
} // for (i=0;i<dati.length;i++)
//-->
</script>
<script language="JavaScript" type="text/javascript">
<!--
var dati2 = new Array(100,25,10,33,56,77,55,5);
document.write('<table><tr>');
for (i=0;i<dati2.length;i++) {
 document.write('<td valign="bottom">');
 document.write('<DIV style="height:'+dati2[i]+'px;background-color:red;writing-mode:tb-rl;">'+dati2[i]+'</DIV>');
 document.write('</td>');
} // for (i=0;i<dati2.length;i++)
document.write('</tr><tr>');
for (i=0;i<dati2.length;i++) {
 document.write('<td valign="bottom">');
 document.write('<DIV style="writing-mode:tb-rl;">'+colonne[i]+'</DIV>');
 document.write('</td>');
} // for (i=0;i<dati2.length;i++)
document.write('</tr></table>');
//-->
</script>

</body>
</html>

nn capisco :master: per ora devo solo tirare una riga orizzontale, formata da div 1*1 pixel...

**Dennis** · 14-10-2004, 18:49

ok, problema risolto.

bisogna settare perforza il float:left; ad ogni singolo mini-div.

ora, pongo un altro quesito:

*** edit: l'hai posto in un'altra discussione... ***

Discussione: Strano comportamento di position

Strumenti discussione

Ricerca discussione

Visualizza

Strano comportamento di position

Permessi di invio