Div: px o % ?

Ceck2

Nuovo Utente
8 Ott 2012
6
0
0
Ciao a tutti, attualmente sto costruendo (se questo è il termine giusto) una pagina web, sono ancora all'inizio ed il codice che vi riporto è semplificato al massimo togliendo le cose che non interessano al momento.
Per stabilire la posizione dei DIV ho scelto di utilizzare top e left e di esprimere le "misure" in px.
All'inizio ero molto contento del risultato poichè nel mio pc, riempiva tutto lo schermo e i DIV si trovavano nelle posizioni che mi aspettavo, ma poi, trasferendo i file nel computer della scuola e riaprendo le pagine mi sono accorto che le "misure" in px non andavano bene perchè su uno schermo con risoluzione maggiore le "misure" top e left non andavano bene perchè non avevo i div centrati ma spostati a sinistra :incazz:
A quel punto ho pensato bene di sostituire le "misure" in px con dati in %, risultato eccellente, la pagina si apriva correttamente su ogni risoluzione, MA quando ho provato a ridimensionare la finestra è sorto un altro problema, ovvero, più rimpicciolivo la finestra e più un div mi andava sopra l'altro, come avvine su questo sito http://www.dalcero.it/

Come posso fare per risolvere questo problema? :cool:
HTML:
<!DOCTYPE html>
<html>
    <head>
        <title>Sito</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style type="text/css">
            #container {
                position: absolute;
                width: 1400px;
                height: 1200px;
            }
            #header {
                position:absolute;
                left: 250px;
                top: 30px;
                width: 800px;
                height: 80px;
                border: 2px solid black;
            }
            #menu {
                position: absolute;
                left: 250px;
                top: 130px;              
                width: 800px;
                height: 100px;
                background-color:#631723;
                border: 2px solid black;
            }
            #content {
                position: absolute;
                left: 250px;
                top: 250px;
                width: 620px;
                height: 800px;
                background-color:#890054;
                border: 2px solid black;
            }
            #pubblicita {
                position:absolute;
                left: 900px;
                top: 250px;
                width: 150px;
                height: 800px;
                background-color:springgreen;
                border: 2px solid black;                
            }
	    #footer {
		position:absolute;
		left:250px;
		top:1080px;
		width:800px;
		height:100px;
		background-color:#332907;
		border: 2px solid black;
	    }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="header">
            </div>
            <div id="menu">
                <ul>
                    <li>Pagina 1</li>
                    <li>Pagina 2</li>
                    <li>Pagina 3</li>
                </ul>
            </div>            
            <div id="content">
                Contenuto della Home
            </div>
            <div id="pubblicita">
                Ipotetico spazio per pubblicità
            </div>
	    <div id="footer">
		<font color="white"> Footer </font>
	    </div>
        </div>
    </body>
</html>
 

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.046
150
63
PR
www.borgo-italia.it
ciao
ti do l'indicazione per il div header

HTML:
            #header {
                margin-left: 250px;
                margin-top: 30px;
                width: 800px;
                height: 80px;
                border: 2px solid black;
            }
dovrebbe rimanere centrato sul container indipendentemente dalla risuluzione. poi eventualmente al contauner dagli
margin-left: auto;
margin-right: auto;
 
Discussioni simili
Autore Titolo Forum Risposte Data
E Creare un testo trasparente dietro un div HTML e CSS 5
F Div position: fixed si deve fermare quando raggiunge un altro div, oppure deve scomparire. Soluzioni? Javascript 0
M Accordion menu e posizione div HTML e CSS 0
P jquery refresh div non funziona Javascript 0
P refresh div + scrittura/lettura dal db Javascript 1
napuleone div centrato alla pagina posto sopra ai contenuti HTML e CSS 1
M Unire 2 funzioni per l'invio di un form e con l'apertura di un div Javascript 0
Cosina Nascondere div di default jQuery 2
napuleone modificare il contenitore di un div Javascript 2
napuleone modificare il contenitore di un div Javascript 1
A inserire variabile php colore in div html PHP 2
J Far comparire e scomparire un div con un select Javascript 1
T Far sparire dalla pagina div che saranno inseriti successivamente jQuery 0
E Div che scompare con scroll jquery Javascript 0
G Aiuto HTML, collegamento con un bottone a una <div> di un' altra pagna HTML e CSS 5
Stefano Migotto Creazione di un div con php o js PHP 9
felino Bootstrap alert: usare lo stesso div per due messaggi consecutivi jQuery 1
S Visibilità div in PHP PHP 1
L [Javascript]Scorrere div con frecce avanti-indietro Javascript 0
P [Javascript] Aprire Link in Div e pagina Dinamica Javascript 0
ANDREA20 [HTML] problema con i div HTML e CSS 10
Giacomo Boccherini [HTML] il div non si ottimizza HTML e CSS 1
Cosina [PHP] Scrivere dati in un div specifico PHP 3
R [PHP] [Javascript] Link a DIV id di un' altra pagina PHP 4
trattorino [Javascript] onclick su piu div insieme Javascript 1
trattorino ritornare al div precedente jQuery 2
L [Javascript]Aprire div con click e chiuderlo con altro pulsante Javascript 2
V [Javascript] Visualizzare o nascondere div figlio Javascript 4
E [HTML] Allineare foto a un tag DIV verticalmente HTML e CSS 0
E [HTML] Allineamento immagine agli angoli inferiori di un div HTML e CSS 12
A JAVASCRIPT ELIMINAZIONE DIV DINAMICO SU SITO Offerte e Richieste di Lavoro e/o Collaborazione 3
Andrea_Ventura [HTML] Creare un DIV con slideshow HTML e CSS 5
M [HTML] Invertire DIV su dispositivi mobile HTML e CSS 2
A Javascript Nascondere Div con id numerico dinamico Javascript 18
I [HTML] Slideshow si sovrappone a <div> HTML e CSS 14
paloppa Div che appare appena due form sono compilati jQuery 16
S [javascript] visualizzare/nascondere div Javascript 3
S [HTML] Centrare verticalmente il testo in div HTML e CSS 2
G [HTML] Modificare ordine dei div in mobile responsive HTML e CSS 5
D [HTML] Frameset e Div HTML e CSS 8
G [HTML] Impostare dimensione immagini in un div HTML e CSS 2
L php - pulsante premuto che mostra #div PHP 3
S [HTML] Div visibile o nascosto al passaggio del mouse HTML e CSS 3
C [Javascript] Mostrare un div cliccando una checkbox Javascript 0
M Ottenere i valori di una proprietà su un array di oggetti (es. DIV) in JavaScript Javascript 7
C Nascondere un div al click di una casella Ajax 1
S [HTML] Distanza esatta tra due div HTML e CSS 7
G [HTML] Posizionamento testo in un div HTML e CSS 5
trattorino css solo se richiama un class di un div HTML e CSS 1
G [HTML] Bordo bianco sotto immagine in un Div HTML e CSS 1

Discussioni simili