Un div ridimensionabile per i dispositivi mobili

11-09-2015, 22.59.00

Ciao a tutti.

Sto creando un sito con wordpress e volevo metterci, all'interno di una pagina, un codice, creato con Dreamweaver, attraverso il quale, con dei "div", creare un contenuto con un'immagine di sfondo all'interno della quale, con altri "div" interni, cliccandoci sopra, ti porta a questo o quell'altro link.

La difficoltà che ho riscontrato è che visitando la pagina, in anteprima di bozza, sia i "div" che l'immagine non si adattano al mio dispositivo mobile (smartphone android).

Vi posto il codice:

Codice:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#primapagina {
	background-color: #999;
	background-image: url(http://latinmagazine.altervista.org/wp-content/uploads/2015/09/Sfondo-PrimaPagina-Num001-2015.png);
	padding: 10px;
	height: 750px;
	width: 500px;
	border: 4px double #009;
	clear: none;
	float: none;
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-position: center center;
}
#ArtNum001 {
	padding: 1px;
	height: 200px;
	width: 150px;
	border: 1px solid #000;
	position: absolute;
	left: auto;
	top: auto;
}
</style>
</head>

<body>
<div class="PrimaPagina" id="primapagina">
  <div class="ArtNum001" id="ArtNum001"></div>
</div>
</body>
</html>

So già che dovrei agire sulle dimensioni dei "width" e "lenght" ma non so come fare, ho provato anche a mettere il valore "100%" ma nulla...
Può dipendere anche dal fatto che uso Wptouch per adattarlo ai mobile?

Vi ringrazio anticipatamente

-MicheleCOS-

16-09-2015, 16.22.32

Ciao :)

Forse qui c'è la soluzione al tuo problema: http://www.w3schools.com/css/css_rwd_viewport.asp

Si tratta in pratica di adattare l'area del sito visibile dall'utente alle dimensioni del suo dispositivo. Però questa proprietà è supportata da HTML5, e il codice che hai inviato non è in HTML5. Devi usare questa struttura:

Codice HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>...</title>
    <style>
...
    </style>
</head>
<body>
...
</body>
</html>

Comunque Dreamweaver dovrebbe avere già di per sé un'opzione per creare pagine web responsive (io non lo so usare, ma sul sito di Adobe all'indirizzo http://www.adobe.com/products/dreamweaver.html è scritto bello grande

).

Discussione: Un div ridimensionabile per i dispositivi mobili

LinkBack

Strumenti discussione

Display

Un div ridimensionabile per i dispositivi mobili

Tags for this Thread

Regole di scrittura