aiuto! problema con la mia home avente jquery cycle

**yersinia** · 03-05-2014, 18:02

Ciao a tutti!

Sto facendo un semplice sito, ma sono alle prime armi.
Ho inserito la slideshow nella pagina "home" solo che si presentano due problemi:
1. a volte la colonna centrale con la slideshow viene caricata piccola, non alle proporzioni stabilite nel css
2. il div "slideshow" (non le foto in esso contenute) sborda dal suo div "col-cen", cioè non prende le proporzioni di max-height che gli ho dato

C'è qualche anima pia che sa aiutarmi?? non so proprio come fare

**br1** · 03-05-2014, 18:14

Fare una diagnosi e suggerire la cura senza vedere il malato ci viene un tantino difficile

Posta il codice o, meglio, un link alla pagina pubblicata

ps: benvenuto sul forum

**yersinia** · 03-05-2014, 18:22

Grazie mille!
hai ragione anche tu....

il ink del "malato" non l'ho ancora perché proprio per questi problemi non l'ho ancora pubblicato. comunque il codice è questo:
html:
<!DOCTYPE HTML>
<html>


<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript" src="jquery_cycle.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#slideshow').cycle ({
fx: 'fade',
speed: '700',
next: '#next',
prev: '#prev',

})
});
</script>

<head>
<title>Due fotografe-</title>

<link rel="stylesheet" type="text/css" media="only screen and (min-width:0px) and (max-width:320px)" href="indexphonep.css" />
<link rel="stylesheet" type="text/css" media="only screen and (min-width:321px) and (max-width:480px)" href="indexphonel.css" />
<link rel="stylesheet" type="text/css" media="only screen and (min-width:481px) and (max-width:768px)" href="indextabletp.css" />
<link rel="stylesheet" type="text/css" media="only screen and (min-width:769px) and (max-width:1024px)" href="indextabletl.css" />
<link rel="stylesheet" type="text/css" media="only screen and (min-width:1025px) and (max-width:2000px)" href="indexschermo1.css" />

<link rel="shortcut icon" href="logo rosso.ico" >

</head>

<body>

<div id="contenitore"><img src="sfondo.png" class="sfondo";"/></div>
<img src="stanghetta1.png" class="stanghetta1s" oncontextmenu="return false;"/></div>

<img src="stanghetta1.png" class="stanghetta1d" oncontextmenu="return false;"/></div>

<div id="testata">
<img src="scritta water 2f.png" class="titolo" oncontextmenu="return false;"/>

</div>

<div id="col-sx" class="sinistra">
<ul id="menusx">
<li class="Home"><a href="#">Home</a></li>
<li class="Chi"><a href="chi siamo.htm">Chi siamo</a></li>
<li class="Cosa"><a href="#">Cosa</a>
<ul id="sottomenu">
<li><a href="#">matrimonio</a></li>
<ul id="sottomatri">
<li><a href="servizio.htm">servizio</a></li>
<li><a href="#">Dvd e confezionamento</a></li>
<li><a href="#">Album</a></li>
</ul>
<li><a href="#">Ritratto</a></li>
</ul>
</li>

</ul>

<img src="stanghetta2.png" class="stanghetta2s" oncontextmenu="return false;"/></div>

</div>

</div>

<div id="col-dx" class="destra">
<ul id="menudx">
<li class="Galleria"><a href="galleria.htm">G alleria</a>
<ul id="sottomenu">
<li><a href="#">Foto</a></li>
<li><a href="#">Videoclip</a></li>
</ul>
</li>
<li class="Clienti"><a href="#">Clienti</a></li>
<li class="Info"><a href="info.htm">Info</a></li>
<li class="Contatti"><a href="contatti.htm">C ontatti</a></li>
</ul>
<img src="stanghetta2.png" class="stanghetta2d" oncontextmenu="return false;"/></div>
</div>
</div>

<div id="col-cen">

<div id="slideshow">
<img src="IMG.jpg" class="foto" oncontextmenu="return false;"/>
<img src="1.jpg" class="foto" oncontextmenu="return false;"/>
<img src="4.jpg" class="foto" oncontextmenu="return false;"/>
<img src="3.jpg" class="foto" oncontextmenu="return false;"/>
<img src="2.jpg" class="foto" oncontextmenu="return false;"/>
<img src="5.jpg" class="foto" oncontextmenu="return false;"/>
<img src="6.jpg" class="foto" oncontextmenu="return false;"/>
<img src="7.jpg" class="foto" oncontextmenu="return false;"/>
<img src="8.jpg" class="foto" oncontextmenu="return false;"/>
<img src="9.jpg" class="foto" oncontextmenu="return false;"/>
<img src="10.jpg" class="foto" oncontextmenu="return false;"/>
<img src="11.jpg" class="foto" oncontextmenu="return false;"/>
<img src="12.jpg" class="foto" oncontextmenu="return false;"/>
<img src="13.jpg" class="foto" oncontextmenu="return false;"/>
<img src="14.jpg" class="foto" oncontextmenu="return false;"/>
<img src="15.jpg" class="foto" oncontextmenu="return false;"/>
<img src="16.jpg" class="foto" oncontextmenu="return false;"/>
<img src="17.jpg" class="foto" oncontextmenu="return false;"/>
<img src="18.jpg" class="foto" oncontextmenu="return false;"/>
<img src="19.jpg" class="foto" oncontextmenu="return false;"/>
<img src="20.jpg" class="foto" oncontextmenu="return false;"/>
<img src="21.jpg" class="foto" oncontextmenu="return false;"/>
<img src="22.jpg" class="foto" oncontextmenu="return false;"/>
<img src="23.jpg" class="foto" oncontextmenu="return false;"/>
<img src="24.jpg" class="foto" oncontextmenu="return false;"/>
<img src="25.jpg" class="foto" oncontextmenu="return false;"/>
<img src="26.jpg" class="foto" oncontextmenu="return false;"/>
<img src="27.jpg" class="foto" oncontextmenu="return false;"/>
<img src="28.jpg" class="foto" oncontextmenu="return false;"/>
<img src="29.jpg" class="foto" oncontextmenu="return false;"/>
<img src="30.jpg" class="foto" oncontextmenu="return false;"/>

</div>

<div id="footer">Copyright-"Due fotografe" di Miriam Ruffolo ed Elena Laterza P. IVA</div>
</div>

</div>

</body>

</html>
css:
/*Sfondo*/
body {
margin: 0;
padding: 0;
overflow: hidden;
}

/*reset comune*/
div {
margin:0; padding:0;
}
.sinistra{
float:left;
}

/*contenitore*/
#contenitore {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
.sfondo
{
position:absolute;
height:100%;
width: 100%;
margin: 0;
padding: 0;
}
.stanghetta2s {
max-width:80%; margin:0; padding:0;
position:absolute;
top:96%;
left:12%;
}
.stanghetta2d {
max-width:80%; margin:0; padding:0;
position:absolute;
top:89%;
right:11%;
}
.facebook {
max-width:60px; margin:0; padding:0;
position: absolute;
top: 115%;
left: 37%;
}
.stanghetta1s {
max-width:14%; margin:0; padding:0;
position:absolute;
top:42%;
left:3%;
}

.logocs {
max-width:5%; margin:0; padding:0;
position:absolute;
top:33%;
left:7%;
}

.stanghetta1d {
max-width:14%; margin:0; padding:0;
position:absolute;
top:42%;
right:3%;
}

.logocd {
max-width:5%; margin:0; padding:0;
position:absolute;
top:33%;
right:7%;
}
/*contenitore testata*/
#testata{
background:#fff; max-width:100%; max-height:28.3%; padding:0;
}
.titolo {
max-width:28%; margin-top: 0.1%;
margin-left:37%;
position: absolute;
top: 0.6%;
}
.cornicettasx {
max-width:40%;
position:absolute;
top:0%;
left:2%;
}
.cornicettadx {
max-width:37%;
position:absolute;
top:5%;
right:0%;
}
/*contenitore sx*/
#col-sx {
background:ccc; width:15%; max-height:75%;
padding:1.56em 1.56em 1.25em 1em;
margin:0.93%;
position: absolute;
top: 43%;
left: 0%;
}

/*menu*/
#menusx {
font-family: adler-webfont, Bohemian, Prestige elite, Courier, Monotype; font-weight: 100;
}

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

.Home {
letter-spacing: 0.05em; font-size: 3em;
}
.Chi {
letter-spacing: -0.07em; font-size:1.8em;
}
.Cosa {
letter-spacing: -0.02em; font-size:4em;
}
.Galleria {
letter-spacing: -0.22em; font-size:2.6em;
}

ul#menusx li ul#sottomenu li:hover ul#sottomatri li {
display:block; float:left; font-size: 18pt; font-family: callani; color:#f8f4ee; background:#fff; margin:0.75em;
}
ul#menusx li a {
display:block; padding: 0.625%; color:#886856; text-align: center; text-decoration:none;
}
ul#menusx li a:hover {
font-size: larger; color:#6b493d
}
ul#menusx li ul#sottomenu {
display:none; color:#04475d;
}
ul#menusx li ul#sottomenu li {
float:none; color:#04475d;
}
ul#menusx li:hover ul#sottomenu li {
display:block; color:#04475d;
}
ul#menusx li ul#sottomenu li a:hover {
font-size: larger; color:#04475d;
}
ul#menusx li ul#sottomenu ul#sottomatri {
display:none;
}
ul#menusx li ul#sottomenu:hover ul#sottomatri {
display:block;
float:none;
font-family: callani;
}
ul#sottomatri li a:hover {
background-color: #04475d;
font-style: bold;
color:#f8f4ee;
font-family: callani;
}
ul#menusx li:hover ul#sottomenu {
display:block; font-size: 18pt; font-family: adler-webfont; background:#fff; margin:0.75em; color:#04475d;
}
ul#menusx li ul#sottomenu li ul#sottomatri{
display:none; font-family: callani;
}

/*contenitore dx*/
#col-dx {
background:ccc; width:15%; max-height:75%;
padding:1.56em 1.56em 1.25em 1em;
margin:0.93%;
position: absolute;
top: 43%;
right: 0%;
}

/*menu*/
#menudx {
font-family: adler-webfont, Prestige elite, Bohemian, Courier, Monotype; font-weight: 260;
}
@font-face{
font-family: 'adler-webfont';
src: url('adler-webfont.eot.eot');
src: url('adler-webfont.eot.eot?#iefix') format('embedded-opentype'),
url('adler-webfont.woff') format('woff'),
url('adler-webfont.ttf') format('truetype'),
url('adler-webfont.svg#webfont') format('svg');
}
font-weight: normal;
font-style: normal;
}

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

.Clienti {
letter-spacing: 0.02em; font-size:2em;
}
.Info {
letter-spacing: 0em; font-size:3.65em;
}
.Contatti {
letter-spacing:-0.2em; font-size:2.5em;
}

ul#menudx li a {
display:block; padding: 2px; color:#886856; text-align: center; text-decoration:none;
}
ul#menudx li a:hover {
font-size: larger; color:#6b493d;
}
ul#menudx li ul#sottomenu {
display:none;
}
ul#menudx li ul#sottomenu li {
float:none;
}

/*contenitore centrale*/
#col-cen {

max-width:62%; max-height:85%;

position: absolute;
top: 16%;
left: 19%;

}

#slideshow {
background-image: url('cornice.png');
background-size: contain;
background-repeat:no-repeat;
max-width:100%;
max-height:auto;
position:absolute;
top:0%;
left:0%;
float:left;

}

.foto {
max-width:98%;
max-height:auto;
margin:1%;
border:0;

}

.prev
{
max-width:2.5%; position: absolute;
top: 49%;
left: 17%;
}

.next
{
max-width:2.5%; position: absolute;
top: 49%;
right: 17%;
}

#footer {
margin:0px; margin-top:1px; text-align:center;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; color:#6b493d; font-size:10px;
}

**cavicchiandrea** · 03-05-2014, 19:01

Meglio se pubblichi, oltre ad agevolare chi ti potrebbe aiutare perché vede/testa i difetti o problemi, molto spesso i difetti riscontrati in locale non si rappresentano online

**yersinia** · 03-05-2014, 19:09

ok faccio così, grazie!!

**yersinia** · 05-05-2014, 19:10

Buonasera!!
Sono tornata, con il mio problema

il link della pagina di cui parlavo è questo http://www.duefotografe.it/index.htm , chiedo scusa che è da finire...
Il problema comunque è che il div slideshow non sta nel suo div chiamato cornice e non capisco proprio come mai!!

Se qualcuno sa darmi una mano, lo ringrazio già moltissimo...

**br1** · 05-05-2014, 19:31

Con chrome si vede bene, con IE no... direi che si tratta di un problema di CSS, ti sposto

**Prill** · 05-05-2014, 20:19

ho aspettato un paio di minuti che la pagina si caricasse, poi ho desistito

Peso della pagina 64 mega, ci sono immagini superiori a 9 mega, i tuoi visitatori scapperanno
Da ridurre le immagini che vanno salvate ottimizzate per il web, guarda anche qui http://gtmetrix.com/reports/www.duef...fe.it/wEuPHRpK

**yersinia** · 05-05-2014, 21:13

ok, grazie del consiglio, rimedierò al più presto

Discussione: aiuto! problema con la mia home avente jquery cycle

Strumenti discussione

Ricerca discussione

Visualizza

aiuto! problema con la mia home avente jquery cycle

Tag per questa discussione

Permessi di invio