posizionare icone nei 4 angoli di un contenitore div

**guidino** · 29-06-2013, 12:28

Ciao a tutti,
su un contenitore div vorrei visualizzare nei 4 angoli delle icone come riportato in allegato.

ho cercato in rete e ho visto che occorre la libreria
http://code.jquery.com/ui/1.10.3/jquery-ui.js
ma non so come procedere

Se c'è qualcuno che ha già fatto qualcosa di simile potrebbe indicarmi come si fa?

Grazie

**Deathlok** · 29-06-2013, 12:45

Io probabilmente me la giocherei sui css

basta regolare i margini delle 4 immagini in modo che sforino dal contenitore div, ovviamente le devi dichiarare come position:absolute e metterle dentro un div a loro volta

Diciamo ti eviti dei casini

**guidino** · 29-06-2013, 14:54

Però io sposto il contenitore con il drag.
se uso position: absolute che succede?

Puoi darmi una dritta?
Non sono un mago di css

**Deathlok** · 29-06-2013, 19:13

In che senso sposti il contenitore con il drag?

**guidino** · 29-06-2013, 20:16

in questo senso

http://www.gflash.it/test/drag/rotazione.html

**guidino** · 29-06-2013, 22:24

c'è nessuno che sa darmi un aiuto?

**Deathlok** · 30-06-2013, 00:34

Ma devi mettere le immagini al posto dei quadrati blu agli angoli dell'immagine?

**badaze** · 30-06-2013, 01:23

Puoi utilizzare "table" è più semplice.

Esempio

codice:

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

<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!--
.horizontal {background-image: url(horizontal.jpg);background-repeat: repeat-x;height:50px}
.vertical   {background-image: url(vertical.jpg);background-repeat: repeat-y}
.topLeft    {height:50px;width:50px;background-image: url(1.jpg);}
.topRight   {height:50px;width:50px;background-image: url(2.jpg);}
.botLeft    {height:50px;width:50px;background-image: url(3.jpg);}
.botRight   {height:50px;width:50px;background-image: url(4.jpg);}
-->
</style>

<script language="JavaScript" type="text/javascript">
<!--
function r() {
 var a = document.getElementById("f");
 alert(a.className);
}
//-->
</script>


</head>
<body>

<table cellpadding="0" cellspacing="0" style="background-color: yellow" border="0" >
<tr>
 <td class="topLeft">

 </td>
 <td class="horizontal" style="height:45;">
 </td>
 <td class="topRight">

 </td>  
</tr>

<tr>
 <td class="vertical">
 </td>
 <td >
  <div id="myDiv" style="height:200px;width:200px;background-color: green">
	 SONO UNA DIV
	</div>
 </td >
 <td class="vertical" >
 </td>  
</tr>

<tr>
 <td class="botLeft">
 </td>
 <td class="horizontal">
 </td>
 <td class="botRight">
 </td>  
</tr>

</table>


</body>
</html>

**guidino** · 30-06-2013, 15:40

Ciao Deathlok,
si devo mettere delle icone al posto dei quadratini blu in modo che la loro posizione segua la dimensione del div (che è resizable)

La soluzione di badaze di usare una tabella è corretta perchè risponde alla mia domanda ma vorrei fare tutto con css

Deathlok sapreste come fare con i css?

**br1** · 30-06-2013, 18:52

Originariamente inviato da guidino
La soluzione di badaze di usare una tabella è corretta perchè risponde alla mia domanda ma vorrei fare tutto con css

Deathlok sapreste come fare con i css?

Ti sposto

Discussione: posizionare icone nei 4 angoli di un contenitore div

Strumenti discussione

Ricerca discussione

Visualizza

posizionare icone nei 4 angoli di un contenitore div

Permessi di invio