come allineare un icona

Il Capitano Hook

Nuovo Utente
11 Gen 2015
12
0
0
sto cercando di adattare un esempio postatomi alla mia idea ( piu che altro vado a tentativi )
ma ho un problema ho inserito un titolo (h4) che dovrebbe andare a sinistra del div e un icona ( di font awesome fa-leaf ) che dovrebbe andare a destra nel div ( poi dovrebbe ripetersi su ogni div ) , sulla stessa linea del titolo , ho provato diverse soluzioni ma o mi mettono l'icona sotto l'h4 o me la mettono al di fuori del div a destra ,come devo fare ?
 

WottaFacca

Utente Attivo
20 Mar 2015
134
0
0
Desenzano d/G
Per poter allineare un testo con un'immagine non ti basta usare il float, perchè il testo prendedelle dimensioni "proprie".

Io ti consiglio di usare il tag
HTML:
<p> </p>
per i testi e gli assegni una classe o un ID così da poterlo spostare a tuo piacimento con margin-(top-left-right-bottom)

WottaFacca
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.178
312
83
Devi farci vedere i tentativi che hai fatto altrimenti non possiamo capire il perchè del problema.
Se hai usato il float può essere che la pagina non è abbastanza larga per contenere tutto, ma è solo un'ipotesi visto che come detto non si sa cosa hai fatto
 

zorro

Utente Attivo
20 Ott 2014
234
10
18
ROMA
Quindi, se ho capito bene, le vorresti mettere a destra e a sinistra, ma all'nterno del DIV.
Secondo me, per poter usare FLOAT dovresti suddividere il div principale un 2 sottodiv: uno a detra (float: right)
e uno a sinistra (flòoat: left) o provare con una tabella


Zorro
 

Il Capitano Hook

Nuovo Utente
11 Gen 2015
12
0
0
scusate la mia assenza !

@criric ci sto provando , ma non mi allinea un benemato ciufolo o meglio lo allinea come dice lui ( vedi il link )!

@wottafacca , non posso usare i tag <p> perche sono icone o titolo quindi hanno il loro tag <i> e <h4>

@max 1 , questo è uno dei miei tentativi ( spero il link esterno sia tollerato ) dovrebbero trovarsi tutti e 2 sulla stessa linea uno a destra e l'altro a sinistra , invece !

@zorro, ho provato con i div ma non ci sono riuscito domani a mente lucida ci riprovo , usare le tabelle lo avevo scartato per non complicarmi la vita troppo !
 

zorro

Utente Attivo
20 Ott 2014
234
10
18
ROMA
E' questo (qualcosa di simile) quello che vuoi realizzare ??

Se si, ti posto il codice (nn c'è nemmeno bisogno di usare le tabelle)

HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
#maindiv {
	width:900px;
	height:300px;
	background-color:#9FF;
}	
#icona {
	width:120px;
	height:150px;
	background-image:url(facelogo.png);
	background-repeat:no-repeat;	
	float:left;
}	
#scritta {
	width:200px;
	height:50px;
	line-height:50px;
	float:right;
}	
</style>
</head>

<body>
<div id="maindiv ">
	<div id="icona">
	</div>
	<div id="scritta">
		<h1>SCRITTA</h1>
	</div>
</div>
</body>
</html>