aiuto allineamento immagini

18-07-2008, 16.54.54

oddio oggi vado a mille per la creazione di un sito... sto impazzendo con l'allineamento di un'immagine vi spiego, ho caricato dei bottoni disegnati da me nella parte sinistra della pagina e vorrei inserire un'immagine al centro senza sfondare il loro ordine non so se mi spiego... vorrei mettere una foto li dove ho segnato quel cerchio rosso come faccio?

18-07-2008, 20.34.40

Praticamente la vuoi mettere a centro pagina ? Se è cosi basta che aggiungi agli attributi dell' immagine un align="center".

**orbito** · 18-07-2008, 21.28.50

Codice HTML:

<!--codice bottone--><a href=""><img src="" alt=""></a><!--fine codice bottone--><!--codice immagine centrata--> <p align="center"><img src=""alt=""></p><!--fine codice immagine centrata-->

eccoti il codice html!
@pcexperiment: il tag <img> non supporta l'allineamento centrale!

18-07-2008, 23.54.21

Originalmente inviato da orbito

Codice HTML:

<!--codice bottone--><a href=""><img src="" alt=""></a><!--fine codice bottone--><!--codice immagine centrata--> <p align="center"><img src=""alt=""></p><!--fine codice immagine centrata-->

eccoti il codice html!
@pcexperiment: il tag <img> non supporta l'allineamento centrale!

ho provato ma non ci riesco l'immagine me la carica dietro i bottoni aiuto...

puoi aiutarmi se posto il codice? puoi riscrivermelo come mi serve? mi faresti un grandissimo favore!! se puoi scrivimi link immagine dove serve poi ci penserò io a upparla

considerando che è grande più o meno quanto il cerchio che ho disegnato sopra e questi sono i bottoni

Codice HTML:

<html>
<body>

<h2><p align="center">TITOLO</p></h>
<a href=""><img 
<body background="http://img165.imageshack.us/img165/8013/sfondoxy2.jpg">
<img src="http://img515.imageshack.us/img515/5165/biografiapc2.png"><br>
<img src="http://img91.imageshack.us/img91/619/chartssn0.png"><br>
<img src="http://img515.imageshack.us/img515/2242/curiositks6.png"><br>
<img src="http://img91.imageshack.us/img91/2088/discografiaod4.png"><br>
<img src="http://img142.imageshack.us/img142/5350/immaginijb4.png"><br>
<img src="http://img91.imageshack.us/img91/7149/newsog4.png"><br>
<img src="http://img300.imageshack.us/img300/3395/testish9.png"><br>
<img src="http://img148.imageshack.us/img148/2228/videografiaem4.png"><br>



</body>
</html>

19-07-2008, 00.20.28

Prima di tutto hai il tag <body> doppio, quindi cancella il primo, scrivi in questo modo:

Codice HTML:

<html>
<head>
<tilte>Titolo Pagina</title>
</head>
<body background="http://img165.imageshack.us/img165/8013/sfondoxy2.jpg">
<h2><p align="center">TITOLO</p></h2>
<p style="margin: 0 auto;">
<img src="http://img515.imageshack.us/img515/5165/biografiapc2.png"><br>
<img src="http://img91.imageshack.us/img91/619/chartssn0.png"><br>
<img src="http://img515.imageshack.us/img515/2242/curiositks6.png"><br>
<img src="http://img91.imageshack.us/img91/2088/discografiaod4.png"><br>
<img src="http://img142.imageshack.us/img142/5350/immaginijb4.png"><br>
<img src="http://img91.imageshack.us/img91/7149/newsog4.png"><br>
<img src="http://img300.imageshack.us/img300/3395/testish9.png"><br>
<img src="http://img148.imageshack.us/img148/2228/videografiaem4.png"><br></p>
</body>
</html>

Dimmi se risolvi

**acsocmel** · 19-07-2008, 04.28.09

natalie4ever ti devi spigare, non si capisce se il problema è di un'immagine o di uno sfondo
in ogni caso senza i contenuti, un corretto markup e un po' di css non si può
il codice di jcdesign farà ripetere lo sfondo per tutta la pagina
:-)

19-07-2008, 13.25.37

Prova con questo, ho capito dopo quello che volevi fare. prova questo codice, sostituisci quello che avevi:

Codice HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.menu_sinistra{
	float: left; /* posizione del menù */
	width:178px; /* larghezza del menù */
	background-color: #FFFFF; /* colore sfondo menu */
	border-right: 1px solid #cccccc; /* colore bordo destro menù */
	border-bottom: 1px solid #cccccc; /*colore bordo basso del menu */
	text-align: center; /* allineamento contenuto, scegli tra right, left e center */
}
.contenuto_centrale{
	margin: 0px 0px 10px 10px; /* dai bordi, rispetivvamente: dall'alto, da destra, dal basso e da sinistra */
	font-size: 13px; /* grandezza font espressa in pixel*/
	min-height: 200px; /* altezza per i browser moderni */
	height: 200px; /* altezza del <div> */
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento senza titolo</title>
</head>
<body background="http://img165.imageshack.us/img165/8013/sfondoxy2.jpg">
<h2><p align="center">TITOLO</p></h2>
<div class="menu_sinistra">
<a href=" "><img src="http://img515.imageshack.us/img515/5165/biografiapc2.png"></a><br />
<a href=" "><img src="http://img91.imageshack.us/img91/619/chartssn0.png"></a><br />
<a href=" "><img src="http://img515.imageshack.us/img515/2242/curiositks6.png"></a><br />
<a href=" "><img src="http://img91.imageshack.us/img91/2088/discografiaod4.png"></a><br />
<a href=" "><img src="http://img142.imageshack.us/img142/5350/immaginijb4.png"></a><br />
<a href=" "><img src="http://img91.imageshack.us/img91/7149/newsog4.png"></a><br />
<a href=" "><img src="http://img300.imageshack.us/img300/3395/testish9.png"></a><br />
<a href=" "><img src="http://img148.imageshack.us/img148/2228/videografiaem4.png"></a>
</div>
<div class="contenuto_centrale">
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </div>
</body>
</html>

19-07-2008, 13.26.54

niente ancora no...
@ acsocmel: il problema consiste nell'inserire un'immagine lì dove ho cerchiato a destra dei bottoni SENZA sfondare la disposizione dei bottoni. perche se provo a inserirla col tag align center mi mette alcuni bottoni in cima all'immagine e gli altri sotto lasciando uno spazio di 600 pixel (altezza immagine)

19-07-2008, 13.44.26

Devi sostituire text con quello che vuoi!

**Ufobm** · 19-07-2008, 14.21.16

Uhm... non è che tu sia molto chiara... comunque non mi pare nemmeno che tu abbia molte conoscenze di css, quindi come primo sito la cosa migliore è sempre utilizzare delle tabelle... Cerca una guida con google!

In ogni caso verrebbe una cosa di questo genere (tutto senza css

):

Codice:

<html>
<head>
<tilte>Titolo Pagina</title>
</head>
<body background="http://img165.imageshack.us/img165/8013/sfondoxy2.jpg">
<h2><p align="center">TITOLO</p></h2>
<table width="100%">
<tr>
<td>
<img src="http://img515.imageshack.us/img515/5165/biografiapc2.png">
</td>
<td rowspan="8">
<center><img src="http://farm1.static.flickr.com/159/346531099_352977cece.jpg"></center>
</td>
</tr>
<tr>
<td>
<img src="http://img91.imageshack.us/img91/619/chartssn0.png">
</td>
</tr>
<tr>
<td>
<img src="http://img515.imageshack.us/img515/2242/curiositks6.png">
</td>
</tr>
<tr>
<td>
<img src="http://img91.imageshack.us/img91/2088/discografiaod4.png">
</td>
</tr>
<tr>
<td>
<img src="http://img142.imageshack.us/img142/5350/immaginijb4.png">
</td>
</tr>
<tr>
<td>
<img src="http://img91.imageshack.us/img91/7149/newsog4.png">
</td>
</tr>
<tr>
<td>
<img src="http://img300.imageshack.us/img300/3395/testish9.png">
</td>
</tr>
<tr>
<td>
<img src="http://img148.imageshack.us/img148/2228/videografiaem4.png">
</td>
</tr>
</table>
</body>
</html>

Spero di aver capito bene cosa volevi...

**Ufobm** · 19-07-2008, 14.58.35

@orbito: ehhh? Guarda che non ho capito, o forse non hai capito tu... in pratica tu hai messo un'immagine di fianco ad un'altra... o l'ha fatto Natalie? Boh non ho capito! In ogni caso è sbagliato! In quel modo la riga assume l'altezza dell'immagine e dopo alcune "immagini stanno sopra e altre sotto" come ha detto lei...

19-07-2008, 16.49.54

Originalmente inviato da Ufobm

Uhm... non è che tu sia molto chiara... comunque non mi pare nemmeno che tu abbia molte conoscenze di css, quindi come primo sito la cosa migliore è sempre utilizzare delle tabelle... Cerca una guida con google!

In ogni caso verrebbe una cosa di questo genere (tutto senza css

):

Codice:

<html>
<head>
<tilte>Titolo Pagina</title>
</head>
<body background="http://img165.imageshack.us/img165/8013/sfondoxy2.jpg">
<h2><p align="center">TITOLO</p></h2>
<table width="100%">
<tr>
<td>
<img src="http://img515.imageshack.us/img515/5165/biografiapc2.png">
</td>
<td rowspan="8">
<center><img src="http://farm1.static.flickr.com/159/346531099_352977cece.jpg"></center>
</td>
</tr>
<tr>
<td>
<img src="http://img91.imageshack.us/img91/619/chartssn0.png">
</td>
</tr>
<tr>
<td>
<img src="http://img515.imageshack.us/img515/2242/curiositks6.png">
</td>
</tr>
<tr>
<td>
<img src="http://img91.imageshack.us/img91/2088/discografiaod4.png">
</td>
</tr>
<tr>
<td>
<img src="http://img142.imageshack.us/img142/5350/immaginijb4.png">
</td>
</tr>
<tr>
<td>
<img src="http://img91.imageshack.us/img91/7149/newsog4.png">
</td>
</tr>
<tr>
<td>
<img src="http://img300.imageshack.us/img300/3395/testish9.png">
</td>
</tr>
<tr>
<td>
<img src="http://img148.imageshack.us/img148/2228/videografiaem4.png">
</td>
</tr>
</table>
</body>
</html>

Spero di aver capito bene cosa volevi...

si!! esattamente quello che mi serviva grazie mille!!!

se invece volessi ridurre un pò lo spazio tra foto e bottoni? (non mi picchiateXD lo lascerei anche così ma volevo fare delle prove)
cmq il nick dimenticatelo sono un ragazzo

di conoscenze è vero ne ho poche ma del resto se mai inizi mai impari

qualcuno sa suggermi qualche guida affidabile sulla rete da seguire per l'html?

19-07-2008, 18.42.40

Non avendo conoscenze di HTML poi potresti incasinarti nell'editare la pagina perchè con le tabelle devi modificare l'attributo rowspan mentre con i <div> e il codice postato non devi cambiare niente mai, solamente il contenuto!

Usa questa pagina ( sempre se vuoi, non dico che sia migliore, assolutamente

) e non dovresti avere problemi in futuro:

Codice HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.menu_sinistra{
	float: left; /* posizione del menù */
	width:178px; /* larghezza del menù */
	background-color: #FFFFF; /* colore sfondo menu */
	text-align: center; /* allineamento contenuto, scegli tra right, left e center */
}

.menu_sinistra img{
	border: none; /* indica quanti pixel deve avere come bordo, none per nessuno */
}

.contenuto_centrale{
	margin: 0px 0px 10px 10px; /* dai bordi, rispetivvamente: dall'alto, da destra, dal basso e da sinistra */
	font-size: 13px; /* grandezza font espressa in pixel*/
	min-height: auto; /* altezza per i browser moderni */
	height: auto; /* altezza del <div> */
	text-align: center; /* allineamento contenuto, scegli tra right, left e center */
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento senza titolo</title>
</head>
<body background="http://img165.imageshack.us/img165/8013/sfondoxy2.jpg">
<h2><p align="center">TITOLO</p></h2>
<div class="menu_sinistra">
<a href=" "><img src="http://img515.imageshack.us/img515/5165/biografiapc2.png"></a><br />
<a href=" "><img src="http://img91.imageshack.us/img91/619/chartssn0.png"></a><br />
<a href=" "><img src="http://img515.imageshack.us/img515/2242/curiositks6.png"></a><br />
<a href=" "><img src="http://img91.imageshack.us/img91/2088/discografiaod4.png"></a><br />
<a href=" "><img src="http://img142.imageshack.us/img142/5350/immaginijb4.png"></a><br />
<a href=" "><img src="http://img91.imageshack.us/img91/7149/newsog4.png"></a><br />
<a href=" "><img src="http://img300.imageshack.us/img300/3395/testish9.png"></a><br />
<a href=" "><img src="http://img148.imageshack.us/img148/2228/videografiaem4.png"></a>
</div>
<div class="contenuto_centrale"><img src="http://img514.imageshack.us/img514/9601/imghomeui0.jpg" /></div>
</body>
</html>

naturlmente, come già scritto usa il codice che preferisci

**Ufobm** · 20-07-2008, 13.45.26

Originalmente inviato da Natalie4ever

si!! esattamente quello che mi serviva grazie mille!!!

se invece volessi ridurre un pò lo spazio tra foto e bottoni? (non mi picchiateXD lo lascerei anche così ma volevo fare delle prove)
cmq il nick dimenticatelo sono un ragazzo

di conoscenze è vero ne ho poche ma del resto se mai inizi mai impari

qualcuno sa suggermi qualche guida affidabile sulla rete da seguire per l'html?

No ma infatti immaginavo fossi maschio! Sennò avresti fatto la pagina rosa

! Comunque se vuoi trovare informazioni vai su html.it c'è un pò di tutto! Inserendo ad esempio la larghezza delle varie colonne potresti spostare l'immagine! Altrimenti togli il <center> e sostituiscilo con un <p style="padding: XXpx"> dove al posto delle XX ovviamente metterai la distanza che vuoi che ci sia in pixel dal menù!

La soluzione di jc è forse migliore ma dovresti capirla per poi sfruttarla bene! Anche la mia ovviamente, ma credo sia più facile! Se vuoi prova l'altra soluzione e scegli quella che ti sembra più facile!

Discussione: aiuto allineamento immagini

LinkBack

Strumenti discussione

Display

aiuto allineamento immagini

Regole di scrittura