Posizionare del testo sopra un immagine

**ciro_ciro_oi** · 20-02-2008, 11:57

Ciao a tutti...
Inizio questa discussione per sapere se qualcuno conosce qualche metodo alternativo al posizionamento assoluto o relativo di testo sopra un immagine di background.
Cerco di spiegarmi meglio, prendete il codice qui sotto riportato

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/trasitional.dtd">
<html>
<head>
<title>Pagina di esempio</title>
<link href="style_absolute.css" rel="stylesheet" type="text/css">

<style type="text/css">
#contenitore {
	margin-left: auto;
	margin-right: auto;
	width: 800px;
}

#contenuto {
	float: left;
	border: 1px solid green;
	left: 130px;
	padding: 15px;
}

#map {
	float: right;
	margin: 0 0 20px 20px;
}

#map ul,#map li {
	margin:0;
	padding:0;
	list-style:none;
}

#map ul {
	position:relative;
	width:230px;
	height:297px;
        background-image: url(europe_empty.jpg);
}

#map a {
	position:absolute;
	border: 1px solid black;
	background-color: white;
	font-size:11px; 
	font-weight: bold; 
	color:#1266AA;
	text-decoration: none;
	padding: 0 1px 0 1px;
}

#uk a {left:61px;top:119px;}
#germania a {left:127px;top:131px;}
#italia a {left:150px;top:225px;}
#spagna a {left:15px;top:235px;}
</style>

</head>

	<body>
		<div id="contenitore">
			<div id="contenuto">
				<div id="map">
					<ul>
						<li id="germania">Germania
						<li id="italia">Italia
						<li id="uk">UK
						<li id="spagna">Spagna
					[/list]
				</div>
				<h1>Titolo</h1>
				

Testo Testo Testo Testo Testo Testo. 
				Testo Testo Testo Testo Testo Testo Testo 
				Testo Testo Testo Testo Testo Testo Testo 
				Testo Testo Testo Testo Testo Testo Testo 
				Testo Testo Testo Testo Testo Testo Testo 
				Testo Testo Testo Testo Testo Testo Testo 
				Testo Testo Testo Testo Testo Testo Testo.</p>
				

Testo Testo Testo Testo Testo Testo. 
				Testo Testo Testo Testo Testo Testo Testo 
				Testo Testo Testo Testo Testo Testo Testo 
				Testo Testo Testo Testo Testo Testo Testo 
				Testo Testo Testo Testo Testo Testo Testo 
				Testo Testo Testo Testo Testo Testo Testo 
				Testo Testo Testo Testo Testo Testo Testo.</p>
				

Testo Testo Testo Testo Testo Testo. 
				Testo Testo Testo Testo Testo Testo Testo 
				Testo Testo Testo Testo Testo Testo Testo 
				Testo Testo Testo Testo Testo Testo Testo 
				Testo Testo Testo Testo Testo Testo Testo 
				Testo Testo Testo Testo Testo Testo Testo 
				Testo Testo Testo Testo Testo Testo Testo.</p>
				

Testo Testo Testo Testo Testo Testo. 
				Testo Testo Testo Testo Testo Testo Testo 
				Testo Testo Testo Testo Testo Testo Testo 
				Testo Testo Testo Testo Testo Testo Testo 
				Testo Testo Testo Testo Testo Testo Testo 
				Testo Testo Testo Testo Testo Testo Testo 
				Testo Testo Testo Testo Testo Testo Testo.</p>
			</div>
		</div>
	</body>
</html>

Nell'esempio faccio si che sopra l'immagine di background, dichiarata come sfondo della lista puntata, si posizionino le ancore attraverso position:absolute; (funziona anche con il relative ma in maniera leggermente differente).
La mia domanda è: vi viene in mente un altro modo per posizionare correttamente le ancore senza usare i posizionamenti assoluti o relativi?

Spero di essere stato abbastanza chiaro....ciao ciao!

**gengix** · 20-02-2008, 12:52

Mi alleghi quest'immagine per favore?:

'europe_empty.jpg',

perchè mi mancano i punti di riferimento.

**ricmanx** · 20-02-2008, 12:53

Scusa ma nel codice che posti come sono posizionate?
...A me si vedono "sparpagliate", tu come le volevi? Una sotto l'altra? Affiancate?

**gengix** · 20-02-2008, 13:00

Li vedi sparpagliate perchè di sfondo c'è quasi sicuramente l'immagine dell'europa, e i link sono posizionati sopra gli stati indicati. Gli ho chiesto di allegarmi l'immagine proprio per avere punti di riferimento.

**ciro_ciro_oi** · 20-02-2008, 13:15

Eccovi l'immagine.....me ne ero scordato.....sorry!

{MODIFICA}
Ma perchè non si vede l'immagine che ho caricato????

{MODIFICA 2}
HO capito perchè, al ritorno dall'anteprima perde l'immagine caricata...son proprio furbo!

**ciro_ciro_oi** · 20-02-2008, 13:18

Ci riprovo.....

**gengix** · 20-02-2008, 13:35

Ecco qua, compatibile anche con IE5 e IE 6, almeno sulla mia macchina va:

css:
#contenitore {
margin-left: auto;
margin-right: auto;
width: 800px;
}

#contenuto {
float: left;
border: 1px solid green;
left: 130px;
padding: 15px;
}

#map {
float: right;
margin: 0 0 20px 20px;
width:230px;
height:297px;
background-image: url(europe_empty.jpg);
border:solid 1px #000;
}
#map span {
display:block;
height:15px;
}

#map a {
background-color: white;
font-size:11px;
font-weight: bold;
color:#1266AA;
text-decoration: none;
}
#uk
{
padding-left:30px;
margin-top:100px;
}
#germania
{
padding-left:105px;
margin-top:9px;
}
#spagna
{
padding-left:70px;
margin-top:40px;
}
#italia
{
padding-left:140px;
margin-top:20px;
}

struttura:

<div id="contenitore">
<div id="contenuto">
<div id="map">
<span id="uk">UK</span>
<span id="germania">Germania</span>
<span id="spagna">Spagna</span>
<span id="italia">Italia</span>
</div>
<h1>Titolo</h1>

Testo Testo Testo Testo Testo Testo.
Testo Testo Testo Testo Testo Testo Testo
Testo Testo Testo Testo Testo Testo Testo
Testo Testo Testo Testo Testo Testo Testo
Testo Testo Testo Testo Testo Testo Testo
Testo Testo Testo Testo Testo Testo Testo
Testo Testo Testo Testo Testo Testo Testo.</p>

Testo Testo Testo Testo Testo Testo.
Testo Testo Testo Testo Testo Testo Testo
Testo Testo Testo Testo Testo Testo Testo
Testo Testo Testo Testo Testo Testo Testo
Testo Testo Testo Testo Testo Testo Testo
Testo Testo Testo Testo Testo Testo Testo
Testo Testo Testo Testo Testo Testo Testo.</p>

Testo Testo Testo Testo Testo Testo.
Testo Testo Testo Testo Testo Testo Testo
Testo Testo Testo Testo Testo Testo Testo
Testo Testo Testo Testo Testo Testo Testo
Testo Testo Testo Testo Testo Testo Testo
Testo Testo Testo Testo Testo Testo Testo
Testo Testo Testo Testo Testo Testo Testo.</p>

Testo Testo Testo Testo Testo Testo.
Testo Testo Testo Testo Testo Testo Testo
Testo Testo Testo Testo Testo Testo Testo
Testo Testo Testo Testo Testo Testo Testo
Testo Testo Testo Testo Testo Testo Testo
Testo Testo Testo Testo Testo Testo Testo
Testo Testo Testo Testo Testo Testo Testo.</p>
</div>
</div>

Se la posizione e leggermente imprecisa, gioca con i padding e con i margin.

**gengix** · 20-02-2008, 13:40

Visto che in geografia sono un beota =), ho messo la spagna al posto della francia, poco male, dai meno padding allo span che la contiene, tienila leggermete più alta dell'italia e allo span dell'italia togli il margin-top.

**gengix** · 20-02-2008, 13:45

Così è corretto:

css:

#contenitore {
margin-left: auto;
margin-right: auto;
width: 800px;
}

#contenuto {
float: left;
border: 1px solid green;
left: 130px;
padding: 15px;
}

#map {
float: right;
margin: 0 0 20px 20px;
width:230px;
height:297px;
background-image: url(europe_empty.jpg);
border:solid 1px #000;
}
#map span {
display:block;
height:15px;
}

#map a {
background-color: white;
font-size:11px;
font-weight: bold;
color:#1266AA;
text-decoration: none;
}
#uk
{
padding-left:50px;
margin-top:100px;
}
#germania
{
padding-left:105px;
margin-top:9px;
}
#italia
{
padding-left:130px;
margin-top:55px;
}
#spagna
{
padding-left:25px;
margin-top:15px;
}

struttura:
<div id="contenitore">
<div id="contenuto">
<div id="map">
<span id="uk">UK</span>
<span id="germania">Germania</span>
<span id="italia">Italia</span>
<span id="spagna">Spagna</span>
</div>
<h1>Titolo</h1>

Testo Testo Testo Testo Testo Testo.
Testo Testo Testo Testo Testo Testo Testo
Testo Testo Testo Testo Testo Testo Testo
Testo Testo Testo Testo Testo Testo Testo
Testo Testo Testo Testo Testo Testo Testo
Testo Testo Testo Testo Testo Testo Testo
Testo Testo Testo Testo Testo Testo Testo.</p>

Testo Testo Testo Testo Testo Testo.
Testo Testo Testo Testo Testo Testo Testo
Testo Testo Testo Testo Testo Testo Testo
Testo Testo Testo Testo Testo Testo Testo
Testo Testo Testo Testo Testo Testo Testo
Testo Testo Testo Testo Testo Testo Testo
Testo Testo Testo Testo Testo Testo Testo.</p>

Testo Testo Testo Testo Testo Testo.
Testo Testo Testo Testo Testo Testo Testo
Testo Testo Testo Testo Testo Testo Testo
Testo Testo Testo Testo Testo Testo Testo
Testo Testo Testo Testo Testo Testo Testo
Testo Testo Testo Testo Testo Testo Testo
Testo Testo Testo Testo Testo Testo Testo.</p>

Testo Testo Testo Testo Testo Testo.
Testo Testo Testo Testo Testo Testo Testo
Testo Testo Testo Testo Testo Testo Testo
Testo Testo Testo Testo Testo Testo Testo
Testo Testo Testo Testo Testo Testo Testo
Testo Testo Testo Testo Testo Testo Testo
Testo Testo Testo Testo Testo Testo Testo.</p>
</div>
</div>

**ciro_ciro_oi** · 20-02-2008, 15:17

Risposta interessante, però se voglio mettere il bordo allo span riscontro problemi di visualizzazione in IE7 e soprattutto, cosa più importante, se voglio mettere alla stessa altezze dal top due span non ce la faccio.....

mmmmm...... :berto:

Discussione: Posizionare del testo sopra un immagine

Strumenti discussione

Ricerca discussione

Visualizza

Posizionare del testo sopra un immagine

Permessi di invio