il testo viene coperto dalle immagini

**EmoArt** · 31-10-2009, 13.58.21

Ciao a tutti, dà alcuni giorni ho riveduto la grafica del mio sito ma mi sono imbattuto in alcuni problemi, per esempio l'elenco dei vari menù viene nascosto dall'immagine successiva, mi aspettavo che l'immagina scendeva "spinta dal testo"

come posso fare per risolverlo? ho usato Image ready per creare la grafica e molta parte del codice html

mi riferisco a questa pagina: http://emoart.altervista.org/layout.html

**luca1962** · 31-10-2009, 20.00.01

In una mia pagina ho fatto cosi':

<div style="margin-left:...px; margin-top:...px"> (posizione immagine)
<IMG SRC="nome_immagine.JPG">
</div>

<div style="margin-left:...px; "> (posizione testo)
TESTO
</div>

01-11-2009, 00.51.43

In html usa i tag <div> o <span> per creare dei gruppi autonomi, poi usa il padding o border per distanziare immagini e testo.

**EmoArt** · 01-11-2009, 17.31.40

Grazie, sono riuscito a cambiare il menù (non fate caso alle immagini, non le ho ancora caricate) adesso le dimensioni si adattano al testo.
Mi sono accorto di un altro problema, visto che si è allungata la pagina...la pergamena è rimasta piccola, inizialmente pensavo di non fargli cambiare dimensione e far in modo che il testo gli scorresse sopra (magari con una barra di scorrimento laterale) ma adesso vedo che l'effetto è ridicolo, cosa potrei fare? forse non è una buona idea inserire il testo in una immagine, oppure cè un modo per far allungare l'immagine stessa in base al testo.....?

**luca1962** · 01-11-2009, 19.04.36

Tu vuoi allungare l'immagine: ma la deformi.

01-11-2009, 20.42.01

dovresti dividere l'immagine in tre parti:
i riccioli in alto
quelli in basso
il pezzo dove sta il testo

ora aggiungi questo al css:

p.pergamena {
background: url('immagine_del_pezzo_in_mezzo_rispetto_al_css.p ng');
}

ora per aggiungere un testo nella pergamena fai:

**EmoArt** · 02-11-2009, 22.40.45

non ci stò riuscendo, dove sbaglio?

Codice:

<HTML>
<HEAD>
<TITLE>layoutcopia</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<!-- ImageReady Styles (layoutcopia.psd) -->
<STYLE TYPE="text/css">
<!--



#layout-02 {
	position:absolute;
	left:20px;
	top:0px;
	width:720px;
	height:91px;
}
#menu {
	position:absolute;
	left:20px;
	top:91px;
	width:106px;
	height:38px;
}
#pergamena{
position:absolute;
	left:620px;
	top:93px;
	width:122px;
	height:509px;
}
	



#layout-04 {
	position:absolute;
	left:20px;
	top:91px;
	width:106px;
	height:37px;
}

#layout-05 {
	position:absolute;
	left:126px;
	top:91px;
	width:492px;
	height:70px;
}

#layout-06 {
	position:absolute;
	left:618px;
	top:91px;
	width:122px;
	height:509px;
}

#layout-07 {
	position:absolute;
	left:20px;
	top:128px;
	width:106px;
	height:33px;
	background-color: #F7C877;
}

#layout-08 {
	position:absolute;
	left:20px;
	top:161px;
	width:106px;
	height:38px;
	
}

#layout-09 {
	position:absolute;
	left:126px;
	top:161px;
	width:492px;
	height:29px;
	background-image: url(immagini/layout_09.gif);
}

#layout-10 {
	position:absolute;
	left:126px;
	top:190px;
	width:492px;
	height:4px;
}

#layout-11 {
	position:absolute;
	left:126px;
	top:194px;
	width:16px;
	height:59px;
}

#layout-12 {
	position:absolute;
	left:142px;
	top:194px;
	width:467px;
	height:59px;
}

#layout-13 {
	position:absolute;
	left:609px;
	top:194px;
	width:9px;
	height:59px;
}


#layout-15 {
	position:absolute;
	left:20px;
	top:233px;
	width:106px;
	height:38px;
}

#layout-16 {
	position:absolute;
	left:126px;
	top:253px;
	width:492px;
	height:59px;
}

#layout-17 {
	position:absolute;
	left:20px;
	top:271px;
	width:106px;
	height:41px;
	background-color: #D3B68C;
}

#layout-18 {
	position:absolute;
	left:20px;
	top:312px;
	width:106px;
	height:37px;
}




#layout-20 {
	position:absolute;
	left:166px;
	top:312px;
	width:388px;
	height:214px;
	background-image: url(immagini/layout_20.gif);
}

#layout-21 {
	position:absolute;
	left:554px;
	top:312px;
	width:64px;
	height:288px;
}

#layout-22 {
	position:absolute;
	left:20px;
	top:349px;
	width:106px;
	height:251px;
	background-color: #99E7C1;
}

#layout-23 {
	position:absolute;
	left:166px;
	top:526px;
	width:388px;
	height:74px;
}
.pergamena {
	background-image: url(immagini/pergamena%20centr.jpg);
}

-->
</STYLE>
<!-- End ImageReady Styles -->
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<!-- ImageReady Slices (layoutcopia.psd) -->

<DIV ID="layout-02">
	<IMG SRC="immagini/layout_02.gif" WIDTH="720" HEIGHT="91"></DIV>


<div id="menu">
<p><img src="file:///C|/Documents%20and%20Settings/Casa/Documenti/salvo/grafica%20nuova/immagini/layout_04.gif" ></p>
<p>Introduzione<br>
Paleolitico<br>
neolitico<br>
Et&agrave; del ferro<br>
Grecia e Roma<br>
Dal 5&deg;sec. al 11&deg; sec.<br>
Dal 12&deg;sec. al 14&deg;sec.<br>
Rinascimento
La maiolica<br>
  Evoluzione delle forme<br>
  Il declino </p>
<p><img src="file:///C|/Documents%20and%20Settings/Casa/Documenti/salvo/grafica%20nuova/immagini/layout_08.gif" ></p>
<p>link</p
><p>link</p>
<p><img src="file:///C|/Documents%20and%20Settings/Casa/Documenti/salvo/grafica%20nuova/immagini/layout_15.gif"></p>
<p>link </p>
<p>link</p>
<p><img src="file:///C|/Documents%20and%20Settings/Casa/Documenti/salvo/grafica%20nuova/immagini/layout_18.gif"></p>
<p>link</p>
<p>link</p>
</div>

<DIV ID="layout-05">
	<IMG SRC="immagini/layout_05.gif" WIDTH="492" HEIGHT="70"></DIV>
<DIV ID="layout-06">
	<IMG SRC="immagini/layout_06.gif" WIDTH="122" HEIGHT="509"></DIV>
<DIV ID="layout-09">
  <div align="center">Chi sono|Contatti|Download|Foto gallery|Negozio</div>
</DIV>
<DIV ID="layout-10">
	<IMG SRC="immagini/layout_10.gif" WIDTH="492" HEIGHT="4"></DIV>
<DIV ID="layout-11">
	<IMG SRC="immagini/layout_11.gif" WIDTH="16" HEIGHT="59"></DIV>
<DIV ID="layout-12">
	<img src="immagini/pergamena%20centr.jpeg" width="471" height="279"><IMG SRC="immagini/layout_12.gif" WIDTH="467" HEIGHT="59"></DIV>
<DIV ID="layout-13">
	<IMG SRC="immagini/layout_13.gif" WIDTH="9" HEIGHT="59"></DIV>
<DIV ID="layout-16">
	<IMG SRC="immagini/layout_16.gif" WIDTH="492" HEIGHT="59"></DIV>
	<DIV ID="pergamena"> 
	</div>
<DIV ID="layout-23">
	<IMG SRC="immagini/layout_23.gif" WIDTH="388" HEIGHT="74"></DIV>
<!-- End ImageReady Slices -->
</BODY>
</HTML>

mi si stà scombinando tutta la grafica

Discussione: il testo viene coperto dalle immagini

LinkBack

Strumenti discussione

Display

il testo viene coperto dalle immagini

Regole di scrittura