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.364
338
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
255
11
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
255
11
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>
 
Discussioni simili
Autore Titolo Forum Risposte Data
I Allineare due righe di testo in photoshop Photoshop 2
E [HTML] Allineare foto a un tag DIV verticalmente HTML e CSS 0
F Allineare immagine al centro HTML e CSS 6
S Come allineare tre immagini in linea al centro HTML e CSS 1
A Allineare il testo dentro una select composta da più campi pesi da un db PHP 5
M allineare due box(div) affiancati HTML e CSS 19
K allineare div al centro HTML e CSS 9
P Allineare data a sx dello schermo e titolo al centro HTML e CSS 16
K allineare controlli in un div HTML e CSS 3
A Allineare due colonne in una tabella HTML PHP 6
G Allineare Div in orrizzontale con cilo for PHP PHP 1
L Allineare 2 tools su sito web HTML e CSS 0
N Allineare numeri a destra. Classic ASP 2
B allineare le voci del menu con stile (Css) HTML e CSS 9
G Come allineare in alto una tabella? HTML e CSS 5
Shyson Far apparire le l'icona Back To Top in fondo jQuery 8
M [PHP] Tabella datagrid con icona di modifica che cambia in base a parametro PHP 0
P Problema icona app in sito responsive jQuery 0
M Favicon come icona della pagina .html HTML e CSS 2
E Pulsante con Icona - Vi prego Aiutatemi PHP 0
voldemort Marketplace: app senza icona Sviluppo app per Windows Phone 1
M Creare un'icona sul desktop che avvii 2 tasti Programmazione 0
voldemort Cyberduck icona divieto Mac e Software 1
G Cambiare icona del file fatto in flash Flash 0
catellostefano Riduci ad un icona SSH Linux e Software 7
N icona img prima del caricamento HTML e CSS 1
S icona videochiamata scomparsa su msn Windows e Software 1
D icona W3C CSS su pagina dinamica HTML e CSS 2
valens collegamento icona a "stampa questa pagina" HTML e CSS 1
rok icona sito web HTML e CSS 2
W Icona nel indirizzo web ? HTML e CSS 2
purno Icona personale compare tra i "Preferiti": HTML e CSS 2
G cambiare icona link url HTML e CSS 3
M Cambiare icona HTML e CSS 2
M icona nell'indirizzo HTML e CSS 9

Discussioni simili