immagini

**Liiuk** · 15-11-2012, 15:13

Salve....potreste aiutarmi? La home del mio sito è formata da due colonne laterali ed una piu grande centrale (verticali). Nella testa della pagina ho un header che corrisponde ad una striscia ORIZZONTALE lungo tutta la larghezza della pagina...ora in questa striscia ho messo il nome del sito che mi spunta a sinistra...(esempio: la home di facebook) , per inserire delle icone o immagini sulla stessa riga del nome come posso fare? se metto immagini mi spuntano sempre a sinistra pero sotto il nome del sito. ..

**codencode** · 15-11-2012, 17:50

Il nome del sito lo hai posizionato absolute? Se si, posiziona absolute anche le immagini/icone ed utilizza le coordinate per spostarle dove vuoi. Altrimenti puoi utilizzare position:relative sia per il nome del sito che per le immagini/icone, combinato con l'uso del float left e dei margini per assegnare le posizioni desiderate.
Per fornire una risposta adeguata, comunque, sarebbe meglio vedere il codice o il sito direttamente.

**Liiuk** · 15-11-2012, 18:21

codice:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Mio sito</title>


<style type="text/css">
/*stili per il layout fluido*/
html,body{margin: 0;padding:0}
body{background-image:url(tv.gif);font-family: Klavika,sans-serif;font-size: 76%}
div#container{/*nessuna regola necessaria*/}

/*stili generici, su header e footer*/
div#header{background-color:#000000;color: #FFFFFF; height: 40px;}
h1,h2{margin: 0;padding:0}
h1{padding-left:5px;font: bold 2.5em/40px Klavika,sans-serif}
h2{color: #69f;font-size: 1.5em font-family: Times New Roman;}
div#footer a{color:#fff;font-weight: bold;text-decoration: underline}

/*stili specifici per il layout*/
div#navigation{float: left;width: 360px; padding: 1em 0 0 10px}
div#extra{float: right; width: 260px;padding: 1em 5px}
div#content{background-color: 
#FFF; margin: 0 300px;padding: 1em 70px;
    border-width: 0 1px; border-style:solid; border-color: #FFBF18;}
div#footer{clear:both; text-align:center; padding: 5px 0;
    background-color: #69c; color: #000}

/*stili per la navigazione*/
div#navigation ul{margin: 0;padding: 0; list-style-type: none}
div#navigation li{margin: 0;padding: 0}
div#navigation a{color:#369;font: normal bold 1.2em/1.4em arial,sans-serif;text-decoration: none}
div#navigation a:hover{color: #033;text-decoration: underline}
div#navigation a#activelink{color: #033;text-decoration: none}
div#navigation p{font-size: 90%}

/*stili per la sezione extra*/
div#extra div.newsbox{font-size: 90%;margin-bottom: 2em}
div#extra div.newsbox h2{color: #999;font-size: 1.2em}
div#extra div.newsbox p{margin: 0}
</style>



</head>
<body>

<div id="container">
    <div id="header">
        <h1><mio sito</h1>    
		
      
  
		
    </div>
    <div id="navigation">
	
[img]logo.gif[/img]
<hr size="1" width="289" align="left" color="#FFBF18"  >

	
 
  [*]Home[*]Vita[*]Aforismi[*]Esperimenti[*]Attualità[*][*]
           [/list]
    </div>
    <div id="extra">
       
<h2>Eventi</h2>
            

BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA [...]</p>
       
        
            <h2>BLA BLE BLI BLO BLU</h2>
            

Bla bla bla bla bla bla bla bla bla bla bla bla bla bla
Bla bla bla bla bla bla bla bla bla bla bla bla bla bla Bla bla bla bla bla bla bla</p>

 
 
 

       
	  
    </div>
    <div id="content">
	
 
 
 

	<hr size="1" width="600" align="center" color="#ccc" >
	
	
	

        <h2>Scrivere cio che si vuole</h2>
        

Bla bla bla bla bla bla bla bla bla bla bla bla bla bla.</p>
        

Bla bla bla bla bla bla bla bla bla bla bla bla bla blaBla bla bla bla bla bla bla bla bla bla bla bla bla bla
Bla bla bla bla bla bla bla bla bla bla bla bla bla bla
Bla bla bla bla bla bla bla bla bla bla bla bla bla bla Bla bla bla bla bla bla bla bla bla bla bla bla bla bla
Bla bla bla bla bla bla bla bla bla bla bla bla bla bla Bla bla bla bla bla bla bla bla bla bla bla bla bla bla
Bla bla bla bla bla bla bla bla bla bla bla bla bla bla
Bla bla bla bla bla bla bla bla bla bla bla bla bla blaBla bla bla bla bla bla bla bla bla bla bla bla bla bla
Bla bla bla bla bla bla bla bla bla bla bla bla bla bla
Bla bla bla bla bla bla bla bla bla bla bla bla bla bla Bla bla bla bla bla bla bla bla bla bla bla bla bla bla
Bla bla bla bla bla bla bla bla bla bla bla bla bla bla Bla bla bla bla bla bla bla bla bla bla bla bla bla bla
Bla bla bla bla bla bla bla bla bla bla bla bla bla bla
Bla bla bla bla bla bla bla bla bla bla bla bla bla blaBla bla bla bla bla bla bla bla bla bla bla bla bla bla
Bla bla bla bla bla bla bla bla bla bla bla bla bla bla
Bla bla bla bla bla bla bla bla bla bla bla bla bla bla Bla bla bla bla bla bla bla bla bla bla bla bla bla bla
Bla bla bla bla bla bla bla bla bla bla bla bla bla bla Bla bla bla bla bla bla bla bla bla bla bla bla bla bla
Bla bla bla bla bla bla bla bla bla bla bla bla bla bla
Bla bla bla bla bla bla bla bla bla bla bla bla bla blaBla bla bla bla bla bla bla bla bla bla bla bla bla bla
Bla bla bla bla bla bla bla bla bla bla bla bla bla bla
Bla bla bla bla bla bla bla bla bla bla bla bla bla bla Bla bla bla bla bla bla bla bla bla bla bla bla bla bla
Bla bla bla bla bla bla bla bla bla bla bla bla bla bla Bla bla bla bla bla bla bla bla bla bla bla bla bla bla
Bla bla bla bla bla bla bla bla bla bla bla bla bla bla		</p>

 

<hr size="1" width="600" align="center" color="#ccc" >

 

        

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
		aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
		aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
		aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
		aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
		aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
		aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
		aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
		aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
		aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
		aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
		aaaaaaaaaaaaaaaaaaaaaaaaaaaaa
		aaaaaaaaaaaaaaaaaaaaaaaaaaaa
		aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
		aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
		aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
		aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
		aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
		aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
		aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
		aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
		aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
		aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
		aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
		aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
		aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
		aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
		aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
		aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
		aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
		

        
    </div>
</body>
</html>

**Vincent.Zeno** · 15-11-2012, 20:04

Liiuk,
[CODE][/CODE]
non
<CODE>

codice:

div#header h1 {float:left;}

**Liiuk** · 15-11-2012, 20:28

Grazie !

**Liiuk** · 15-11-2012, 20:33

Con questo codice quindi, se metto un immagine [img][/img] dopo H1, me la fa apparire accanto? cioe titolo e immagine sulla stessa riga?

**Vincent.Zeno** · 15-11-2012, 20:50

hai provato?

**Liiuk** · 15-11-2012, 21:06

Grandissimo funziona ! Grazie ancora...un'ultima cosa.. per spostarla ulteriormente a destra nella riga....o per creare distacco dal margine superiore cosa posso usare?

**Vincent.Zeno** · 15-11-2012, 21:57

usa i margini
http://www.w3schools.com/css/css_margin.asp

**Liiuk** · 15-11-2012, 22:15

Nel mio caso da applicare dove? nel tag img?

Discussione: immagini

Strumenti discussione

Ricerca discussione

Visualizza

immagini

Permessi di invio