Printable View
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
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>
In html usa i tag <div> o <span> per creare dei gruppi autonomi, poi usa il padding o border per distanziare immagini e testo.
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.....? :???:
Tu vuoi allungare l'immagine: ma la deformi.
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:
ora per aggiungere un testo nella pergamena fai:Citazione:
p.pergamena {
background: url('immagine_del_pezzo_in_mezzo_rispetto_al_css.p ng');
}
Citazione:
<img src="il_pezzo_sopra.png">
<p class="pergamena">bla bla bla</p>
<img src="il_pezzo_sotto">
:cry: non ci stò riuscendo, dove sbaglio?
mi si stà scombinando tutta la graficaCodice:<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à del ferro<br>
Grecia e Roma<br>
Dal 5°sec. al 11° sec.<br>
Dal 12°sec. al 14°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>