Allineare due elementi a livello di blocco di cui uno ha: position:relative

**dori88** · 29-09-2008, 19:02

Salve.. Ho un grandissimo problema...
Ecco la mia pagina Pagina

Bene come potete vedere ho attribuito a #home position:relative e anche display:block per poterne determinare le dimensioni e quindi inserire lo sfondo (la scritta home)

Bene, adesso vorrei inserire un altro pulsante accanto a quello home come posso fare?

Solitamente se voglio mettere due elementi block accanto imposto lo faccio con il float.. Questa volta però il primo block è spostato dal normale flusso infatti ho provato ad aggiungere il secondo pulsante e inserendo float:left non si ottiene nulla..
Come posso ovviare?

Il codice è:

codice:

<html>
	<head>
		<style type="text/css">
		
		body{margin:0;}
		
		
		#testa{ margin:auto; width:990px; height:180px; background:url(http://www.gruppowebazar.com/svilup.jpg) top left no-repeat;}
		
		#home{position:relative; top:150px; left:33px;}
		
		#home{ display:block; background:url(http://www.gruppowebazar.com/homeR.jpg) center center no-repeat; width:90px; height:35px; }
	
	
		</style>
	</head>
		
	<body>	
	<div id="testa"> 
		  	
	</div>	
	</body>
</html>

Grazie a chiunque voglia aiutarmi

**dori88** · 29-09-2008, 19:50

Nessuno può darmi una mano?
Sto uscendo pazza..

**fcaldera** · 29-09-2008, 20:10

crea una lista di link dentro il tuo div (<ul>[*]<a...>)
alla lista (ul) dai solo margin-top, margin-left (il posizionamento relativo non sarebbe necessario)
e togli i punti elenco (list-style-type: none)

poi dai float: left e display: inline ai list-item e anche ai link

P.S la prossima volta continua sul thread che avevi già aperto visto che praticamente parli dello stesso codice....

.. chiudo l'altro.

**dori88** · 29-09-2008, 21:25

Originariamente inviato da fcaldera
crea una lista di link dentro il tuo div (<ul>[*]<a...>)
alla lista (ul) dai solo margin-top, margin-left (il posizionamento relativo non sarebbe necessario)
e togli i punti elenco (list-style-type: none)

Ok semplice fatto.

poi dai float: left e display: inline ai list-item e anche ai link

Se do display ai link, non posso poi impostare l'altezza e la larghezza, per cui lo sfondo non sarà più visibile.. o no?
Inoltre se sono inline, che senso ha fare i float left?

P.S la prossima volta continua sul thread che avevi già aperto visto che praticamente parli dello stesso codice....

.. chiudo l'altro.

Pensavo che fosse più utile fare così perchè erano due argomenti diversi nonostante il codice fosse lo stesso..

Grazie..

**fcaldera** · 29-09-2008, 21:28

Originariamente inviato da dori88
Se do display ai link, non posso poi impostare l'altezza e la larghezza, per cui lo sfondo non sarà più visibile.. o no?

no, perchè un elemento con float diventa automaticamente elemento blocco anche se si specifica display: inline

Originariamente inviato da dori88
Inoltre se sono inline, che senso ha fare i float left?

display: inline serve solo ad explorer 6 per evitare il "double margin bug"
nel tuo caso se non devi usare margini puoi omettere display: inline;

**dori88** · 29-09-2008, 21:45

Originariamente inviato da fcaldera
no, perchè un elemento con float diventa automaticamente elemento blocco anche se si specifica display: inline

Questo se float:left viene scritto dopo il display:inline giusto?

Ho fatto i cambiamenti, ma il margin-top ha effetto anche sul div contenitore..
Ho risolto con il position:relative. Secondo i miei calcoli si sarebbero posizionati bene se il primo fosse stato spostato da sx di circa 30px.. Se visiti la pagina potrai invcece vedere che sono posizionati bene (per come li avevo ideati) ma.. CON LEFT:0PX... Come è possibile? Inspiegabile..

Ah, dimenticavo.. affinchè il contenitore possa contenere correttamente i float non devo mettere nel div principale:

overflow:hidden

?

**fcaldera** · 29-09-2008, 23:16

scusa ti ho modificato il messaggio senza volerlo

ad ogni modo

Questo se float:left viene scritto dopo il display:inline giusto?

no è indipendente dall'ordine. Float left vince comunque, display viene ignorato ma non da IE6
che gli permette di correggere un bug. Qualsiasi sia l'ordine delle due regole in presenza di float,. l'elemento si comporta sempre come se fosse blocco.

Ho fatto i cambiamenti, ma il margin-top ha effetto anche sul div contenitore..
Ho risolto con il position:relative. Secondo i miei calcoli si sarebbero posizionati bene se il primo fosse stato spostato da sx di circa 30px.. Se visiti la pagina potrai invcece vedere che sono posizionati bene (per come li avevo ideati) ma.. CON LEFT:0PX... Come è possibile? Inspiegabile..

riposta il codice, non so come lo hai modificato ora

Ah, dimenticavo.. affinchè il contenitore possa contenere correttamente i float non devo mettere nel div principale:

overflow:hidden

si, assieme ad height: auto

**dori88** · 29-09-2008, 23:33

In questa maniera il margin non lavora bene.. Anche se metto margin-left:0px infatti i bottoni si trovano spostati a sx..

Ecco il codice:

codice:

<html>
	<head>
		<style type="text/css">
		
		#testa{ margin:auto; width:990px; height:180px; background:url(http://www.gruppowebazar.com/svilup.jpg) top left no-repeat; overflow:hidden; }
		
		#menu{margin-top:140px; margin-left:10px; list-style:none;}
						
		#home:link, #home:visited{ display:block; background:url(http://www.gruppowebazar.com/homeR.jpg) center center no-repeat; width:90px; height:35px; float:left;}
		
		#home:hover, #home:focus{display:block; background:url(http://www.gruppowebazar.com/homeS.jpg) center center no-repeat; width:90px; height:35px; float:left;}
	
	
	#home3:link, #home3:visited{display:block; background:url(http://www.gruppowebazar.com/lavR.jpg) center center no-repeat; width:102px; height:35px;  float:left; }

#home3:hover, #home3:focus{display:block; background:url(http://www.gruppowebazar.com/lavS.jpg) center center no-repeat; width:102px; height:35px; float:left; }
		</style>
		
	</head>
		
	<body>	
	<div id="testa"> 
		<ul id="menu">
		[*]   	
		[*] 
	[/list]
	</div>	
	</body>
</html>

La pagina è: pagina

Ps. Se imposto height:auto il contenitore viene tagliato a metà..

**fcaldera** · 30-09-2008, 08:15

Ti taglia a metà il contenuto perchè era spostato in relative probabilmente
usa questo.

codice:

<html>
	<head>
		<style type="text/css">
		
		#testa{ 
                       margin:auto; width:990px; height:180px; 
                       background:url(http://www.gruppowebazar.com/svilup.jpg) top left no-repeat;   }
		
		#menu{margin-top:140px; margin-left:10px; list-style-type: none; height: auto; overflow: hidden;  
                              width: 194px; border: 1px solid red; /* giusto per vedere se l'ul non viene tagliato... */ 
                }

		#menu li, #menu a { float: left; display: inline; } /* raggruppa lo stile */
                #home { width:90px; height:35px; } /* non vorrai scrivere le dimensioni per ogni psudoclasse... */
                #home3 { width:102px; height:35px; } /* non devi scrivere display: block sui float */

		#home:link, #home:visited{ 
                     background:url(http://www.gruppowebazar.com/homeR.jpg) center center no-repeat;
                }
		
		#home:hover, #home:focus{
                      background:url(http://www.gruppowebazar.com/homeS.jpg) center center no-repeat;
               }
	
	
  	       #home3:link, #home3:visited{
                    background:url(http://www.gruppowebazar.com/lavR.jpg) center center no-repeat;
                }

               #home3:hover, #home3:focus{
                    background:url(http://www.gruppowebazar.com/lavS.jpg) center center no-repeat;
               }
		</style>
		
	</head>
		
	<body>	
	<div id="testa"> 
		<ul id="menu">
		[*] link   	
		[*]link3  
	[/list]
	</div>	
	</body>
</html>

ciao

**dori88** · 30-09-2008, 15:34

Grazie intanto per il codice..
L'ho provato, ma anche qui.. il margin-top non ha effetto...
Non riesco proprio a capire il motivo..

Discussione: Allineare due elementi a livello di blocco di cui uno ha: position:relative

Strumenti discussione

Ricerca discussione

Visualizza

Allineare due elementi a livello di blocco di cui uno ha: position:relative

Permessi di invio