Adattamento width di una struttura CSS esistente

mercoledì 20 ottobre 2010 - 10.53

Elenco Threads

Stanze Forum

Aggiungi ai Preferiti

Cerca nel forum

dandi.box Profilo | Junior Member

178 messaggi | Data Invio: mer 20 ott 2010 - 10:53

Ciao a tutti, ho una pagina che visualizza correttamente una struttura

ma ora vorrei modificarla per fare in modo che il width sia automaticamente 90% dello schermo e per l'height la soluzione più facile (o percentuale anch'essa oppure che si riadatta automaticamente)

praticamente dovrebbe restare fissa la parte #menu ed #immagine

riaddattandosi la parte #area_contenent

mentre per l'altezza, come dicevo, la soluzione più semplice mi va bene ....

Grazie mille

#contenitore {
width: 950px;
margin: 0px auto;
}
#logo {
background-image: url('logo.png');
background-repeat: no-repeat;
width: 950px;
height: 93px;
top: 10px;
}
#menu {
background-image: url('menu.png');
background-repeat: no-repeat;
width: 230px;
height: 424px;
float: left;
}
#area_contenent {
background-image: url('content.png');
background-repeat: no-repeat;
width: 379px;
height: 424px;
float: left;
}
#immagine {
background-image: url('immagine.png');
background-repeat: no-repeat;
width: 338px;
height: 424px;
float: left;
}
#footer {
background-image: url('footer.png');
background-repeat: no-repeat;
height: 74px;
}
.clearfix {
clear: both;
}

<body>

<div id="contenitore">
<div id="logo">
</div>
<div id="menu">menu</div>
<div id="area_contenent">content</div>
<div id="immagine">img</div>
<div class="clearfix">
</div>
<div id="footer">Inserire qui i dati.</div>
</div>

</body>

TOPOAMORE Profilo | Expert

695 messaggi | Data Invio: mer 20 ott 2010 - 11:44

e se imposti il width a 90%???

#idelemento{
        width:90%;
}

nel tuo caso

#area_contenent {
background-image: url('content.png');
background-repeat: no-repeat;
width: 90%;
height: 424px;
float: left;
}

ciaooo
__.__.__.__.__.__

ASP 2.0 - VB 2008

dandi.box Profilo | Junior Member

178 messaggi | Data Invio: mer 20 ott 2010 - 14:38

Ho provato cambiare il valore da px a % (90%) ma mi si sballa tutta la struttura.... praticamente immagine e content vanno a capo :(

TOPOAMORE Profilo | Expert

695 messaggi | Data Invio: mer 20 ott 2010 - 15:03

tu hai un'immagine di fondo nei div giusto?

allora devi provvedere ad utilizzare un meccanismo di resize delle foto in base alle dimensioni del contenitore.

Ti do un aiuto non la soluzione:

il problema si puo semplicemente risolvere con 2 righe di codice con jquery

non so se conosci questo potentissimo framework javascript....

questo è il link
http://jquery.com/

Devistudiarti come modificare gli elementi css da questo framework.

Se ti serve una mano posta tranquillamente

Ciaoooo
__.__.__.__.__.__

ASP 2.0 - VB 2008

dandi.box Profilo | Junior Member

178 messaggi | Data Invio: mer 20 ott 2010 - 15:23

Purtroppo non saprei proprio come fare il resize, come dici tu delle immagini, usando jQuery :(

TOPOAMORE Profilo | Expert

695 messaggi | Data Invio: mer 20 ott 2010 - 15:51

Puoi cominciare da qui

http://api.jquery.com/category/css/

Informati solo sulle api di jquery.

Prova a scrivere due righe e posta dove non riesci.

Oltretutto su sangoogle trovi migliaglia di esempi.

Puoi fare anche senza jquery ma semplicemente con javascript ma sappi che con jquery puoi facilitarti le cose e puoi fare tante altre cose

Ciaooo
__.__.__.__.__.__

ASP 2.0 - VB 2008

dandi.box Profilo | Junior Member

178 messaggi | Data Invio: mer 20 ott 2010 - 16:23

Ora provo, grazie mille!!!

Ma nel dettaglio cosa dovrei fare esattamente con jQuery??

ridimensione le immagini??? in funzione di?? intendo dire: io adatto il width .... quindi devo ridimensionare ??*tutte*?? le immagini?? (solo alcune??)

TOPOAMORE Profilo | Expert

695 messaggi | Data Invio: mer 20 ott 2010 - 17:35

devi ridimensionare le immagini in base al loro elemento padre (parent())

in pratica:

$(immagini).css({width:$(padre)..innerWidth()});

In pratica quella di sopra e la riga di codice jquery che ti risolve il problema

Fai pratica e posta se hai problemi

__.__.__.__.__.__

ASP 2.0 - VB 2008

dandi.box Profilo | Junior Member

178 messaggi | Data Invio: mer 20 ott 2010 - 22:15

Scusa e grazie per la pazienza.... ho guardato gli esempi relativi ai CSS (.height, .innerWidth ecc...) ma non so proprio come applicarli :(((

ho creato la pagina ed ho incluso il CSS

http://www.nixor.it/tmp/demo/index.html

chiedo troppo se puoi applicarmi tu le modifiche?

Grazie infinite

dandi.box Profilo | Junior Member

178 messaggi | Data Invio: gio 21 ott 2010 - 14:47

Please help me!!!!!

TOPOAMORE Profilo | Expert

695 messaggi | Data Invio: gio 21 ott 2010 - 17:56

Ciao,

allora questo e quello che devi scrivere:

css:

#immagine{
position:absolute;
z-index:-1;
margin-top:0px;
margin-left:0px;
}

scripts:

$(document).ready(function(){
    $("#immagine").css({width: $("#contenitoreimmagine").innerWidth()});
});

#immagine = id dell'immagine da far fare il resize
#contenitoreimmagine = contenitore i ncui si trova la tua immagine.

supponiamo che tu hai l'immagine in un contenore in questo modo

<table width="100%">
    <tr>
          <td id="menu" style="width:20%">
          il tuo menu
          </td>
         <td id="contenitoreimmagine" style="width:80%">
                 <img src="urltuaimmagine" id="immagine" />
          </td>

   </tr>
</table>

la tua immagine verrà automaticamente dimensionata in width in base al suo contenitore

Saluti
__.__.__.__.__.__

ASP 2.0 - VB 2008

dandi.box Profilo | Junior Member

178 messaggi | Data Invio: gio 21 ott 2010 - 21:25

Ho provato a seguire il consiglio applicando la soluzione alla mia immagine... il risultato non sembra come voluto (ho salvato le modifiche al solito URL) ... tutto il layout ora è spostato a sinistra inoltre non è centrato adattato al 95% in altezza e larghezza :((((

ho provato anche a mettere

#area_contenent {
background-image: url('images/content.png');
background-repeat: no-repeat;
width: 424px;
height: 424px;
float: left;
}

con
width: 95%;
height: 95%;

ma nulla :(

Grazie per l'aiuto!!

Torna su

Stanze Forum

Elenco Threads

Partecipa anche tu! Registrati!

Hai bisogno di aiuto ?
Perchè non ti registri subito?

Dopo esserti registrato potrai chiedere
aiuto sul nostro Forum oppure aiutare gli altri

Consulta le Stanze disponibili.

Registrati ora !