Problema impaginazione sito. Sul Software è corretto ma sul browser no!

**Sauron_x** · 23-03-2011, 21:09

Salve a tutti!

Dopo tante illustrazioni sul vostro sito e un pò altrove ho deciso di provare a farmi un sito.

Solo che ho un problema:

In pratica l'impaginazione del sito sul software è tutto ok, sul browser è completamente diversa invece. Come editor HTML uso PHP designer 7, dopo averne provati svariati questo mi è sembrato quello più buono

.

Infatti se vedete qui: http://94.36.51.98/sito/index.html

Vedrete la mia impaginazione tutta sballata. Voi mi direte: "E vabbè giocherella un pò sui margini" L'ho fatto! Il problema è che sul software risulta tutto ok, ma sul browser no, ho provato sia su Internet Explorer che su Firefox.

Non fateci caso al risultato, è una prova che volevo fare per capire i margini come funzionassero

Per fare questo ho utilizzato l'html con i div e il css.

Questo è il codice html che ho usato:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<meta name="author" content="FreeUser" />
    <link href="style.css" rel="stylesheet" type="text/css" />

	<title>Vanishing Point - Home</title>
</head>

<body>

    <div id="testata">
    </div>
    
    <div id="lato">
    </div>
    
    <div id="corpo">
    </div>
    
    <div id="piede">
    </div>

</body>
</html>

Mentre quest'altro è il css:

codice:

body {
    
    background-color: black;

}


*{
    margin: 0;
    padding: 0;
    
}


#testata {
   
    width: 900px;
    height: 150px;
    background-color: #E0281F;
    margin-right: auto;
    margin-left: auto;
    
    }
    
#lato {
    
    
    width: 150px;
    height: 900px;
    background-color: #FF8000;
    margin-right: 0px;
    margin-left: 332px 
    
    
} 


#corpo {
    
    
    width: 750px;
    height: 900px;
    background-color: #00FF40;
    margin-top: -900px;
    margin-right: 332px;
    float: right;
}


#piede {
    
    
    width: 900px;
    height: 75px;
    background-color: #8000FF;
    margin-top: auto;
    margin-right: auto;
    margin-left: 332px;
    float: left;
    
}

Come posso risolvere?

Vi ringrazio molto

**Myaku** · 23-03-2011, 21:40

Originariamente inviato da Sauron_x

Come posso risolvere?

in primo luogo, lasciando perdere le anteprime dell'editor, non sono affidabili. Quello che conta è il browser.

Inoltre, secondo me stai facendo un po' di casino con il css. Se quello che devi creare è un layout a due colonne centrato nella pagina, non ha senso usare i margini in quella maniera e il modo in cui hai usato i float.
Ti basta inserire tutto il layout in un div padre di larghezza dichiarata e a cui applichi "margin: 0 auto".
Le due colonne avranno rispettivamente float left e right, ed al footer passi un clear: both (e non ti stai ad impazzire con i margini).

**Sauron_x** · 23-03-2011, 22:06

Originariamente inviato da Myaku
in primo luogo, lasciando perdere le anteprime dell'editor, non sono affidabili. Quello che conta è il browser.

Inoltre, secondo me stai facendo un po' di casino con il css. Se quello che devi creare è un layout a due colonne centrato nella pagina, non ha senso usare i margini in quella maniera e il modo in cui hai usato i float.
Ti basta inserire tutto il layout in un div padre di larghezza dichiarata e a cui applichi "margin: 0 auto".
Le due colonne avranno rispettivamente float left e right, ed al footer passi un clear: both (e non ti stai ad impazzire con i margini).

Innanzitutto grazie per la risposta

Allora ho appena agito sui margini e sembrerebbe che ora vada bene:

http://94.36.51.98/sito/index.html

Cosa ne pensi?

Il bello è che ora sul browser sembra ok, ma sul editor c'è un casino bestiale, è tutto sballato.

Quindi mi assicuri che è normale o c'è un problema?

Al momento il css è così:

codice:

body {
    
    background-color: black;

}


*{
    margin: 0;
    padding: 0;
    
}


#testata {
   
    width: 899px;
    height: 150px;
    background-color: #E0281F;
    margin-right: auto;
    margin-left: auto;
    
    }
    
#lato {
    
    
    width: 150px;
    height: 900px;
    background-color: #FF8000;
    margin-right: 0px;
    margin-left: 502px 
    
    
} 


#corpo {
    
    
    width: 750px;
    height: 900px;
    background-color: #00FF40;
    margin-top: -900px;
    margin-right: 502px;
    float: right;
}


#piede {
    
    
    width: 899px;
    height: 75px;
    background-color: #8000FF;
    margin-top: auto;
    margin-right: auto;
    margin-left: 502px;
    float: left;
    
}

C'è del codice inutile che forse può causare problemi e che si puà togliere?

In alternativa non ho bene capito il metodo che mi hai spiegato tu che sembrerebbe anche meno macchinoso.

Perdonami, sono un neofita. Non ho molto la mente aperta al HTML/css, spero di averla con il tempo grazie a voi

Se la tua alternativa è migliore potrei provarla. Saresti così gentile però da spiegarti meglio o eventualmente farmi un esempio di sintassi?

Ti ringrazio

**Myaku** · 23-03-2011, 22:21

Originariamente inviato da Sauron_x
Allora ho appena agito sui margini e sembrerebbe che ora vada bene:

no, non va bene. cambia risoluzione e te ne accorgi (io su un 1280 lo vedo tutto sballato), perché stai continuando ad usare i margini in riferimento alla finestra del browser.

Quindi mi assicuri che è normale o c'è un problema?

il motore di rendering dell'editor non detto che sia quello usato dal browser. Se poi consideri che ogni browser ha un motore diverso, capirai che quello che vedi sull'editor è inaffidabile. I test andrebbero fatti direttamente sui browser.

In alternativa non ho bene capito il metodo che mi hai spiegato tu che sembrerebbe anche meno macchinoso.

Se la tua alternativa è migliore potrei provarla. Saresti così gentile però da spiegarti meglio o eventualmente farmi un esempio di sintassi?

qui: http://blog.html.it/layoutgala/
trovi gli esempi. vai direttamente a fondo pagina, dove ci sono i layout a 2 colonne fissi (n.33 e seguenti)

**Sauron_x** · 23-03-2011, 23:16

Allora, intanto grazie per il link

Ma purtroppo non ne vengo a capo.

Ti spiego:

Ho un pò letto il codice di quei template e ho anche cercato qualcosa su internet per allineare due colonne.

Mettiamo ad esempio questo codice:

codice:

#testata {
width: 760px;
height: 150px;
margin-left: auto;
margin-right: auto;
background-color: #FF0000;
} 



#lato {
    
    width: 100px ;
    height: 760px;
    margin-left: auto;
    margin-right: auto;
    background-color: #FF8000;
    
}

Non sono messi proprio come li avevo messi io, sono configurati in maniera diversa. Li ho presi da internet.

Io ho solo modificato il width, l'height e il colore delle riga e della colonna.

Se noti però dovresti vedere il tutto senza problemi ora:

http://94.36.51.98/sito/index.html

La testata è centrata e anche il lato della colonna lo è, questo però non lo deve essere.

Il problema è che se provo a modificare i px dei margini sballa tutto come al solito.

Non è che potresti dirmi come comportarmi?

Scusa abbi pazienza

**Myaku** · 24-03-2011, 08:23

Originariamente inviato da Sauron_x
La testata è centrata e anche il lato della colonna lo è, questo però non lo deve essere.

in questo momento il tuo server non va, comunque, come già detto il concetto è che
non devi centrare nella pagina i singoli elementi (colonne comprese) sennò poi ti incasini con i float. quello che devi centrare con margin: 0 auto è un div padre a cui dichiari width: TOTpx e dentro cui ci metti tutti i tuoi #testata, #colonna, #altracolonna, #footer, #ecceteraeccetera.

**Sauron_x** · 24-03-2011, 17:29

Originariamente inviato da Myaku
in questo momento il tuo server non va, comunque, come già detto il concetto è che
non devi centrare nella pagina i singoli elementi (colonne comprese) sennò poi ti incasini con i float. quello che devi centrare con margin: 0 auto è un div padre a cui dichiari width: TOTpx e dentro cui ci metti tutti i tuoi #testata, #colonna, #altracolonna, #footer, #ecceteraeccetera.

Il server non andava perchè sono con apache e di notte chiaramente spengo il pc e il server torna a funzionare non appena lo riaccendo. Ora cmq va.

Cmq, credo di avere capito cosa intendi.

Il problema che se provo a mettere il, chiamiamolo "menu" all'interno del div dove c'è anche l'header, questo mi va nella riga dell'header, io invece lo voglio sotto e questo lo ottengo creando un altro div. Se poi non ho capito niente perdonami.

Se infatti vedi qui: http://94.36.51.98/sito/index.html

Vedrai l'header che è perfetto ma il "menu" è allineato a sinistra. Io invece lo voglio appena sotto l'header allineato a sinistra.

Il problema è che come già detto se provo a regolare i margini viene su un casino come prima.

Se tu intendi di creare un div e metterci tutto dentro mi crea header e colonne appicicate, io li voglio uno sotto l'altro e questo lo ottengo creando una serie di div.

Al momento ho fatto così:

HTML

codice:

     <div id="testata">
     </div>
     
     <div id="lato">
     </div>

CSS

codice:

#testata{
width: 900px;    
height: 160px;
margin: 0 auto;    
background-color: red;;

}

    
#lato {
float: left; 
width: 256px; 
height: 640px; 
background: black;
}

Il punto è che non capisco che attributo usare per allineare il tutto sotto l'header.

Lo so, sono di coccio ma non sei la prima che mi insulta in un forum

**Myaku** · 24-03-2011, 17:43

Originariamente inviato da Sauron_x
Cmq, credo di avere capito cosa intendi.

Il problema che se provo a mettere il, chiamiamolo "menu" all'interno del div dove c'è anche l'header, questo mi va nella riga dell'header,

e quanto lo fai largo, sto benedetto div contenitore di tutto?

Se infatti vedi qui: http://94.36.51.98/sito/index.html

Vedrai l'header che è perfetto ma il "menu" è allineato a sinistra. Io invece lo voglio appena sotto l'header allineato a sinistra.

Il problema è che come già detto se provo a regolare i margini viene su un casino come prima.

continui a non usare un div padre
continui a voler usare i margini dove nel modo sbagliato (se segui le mie indicazioni e quelle dell'esempio n.33 di layoutgala. Guarda che l'esempio è pronto e finito da utilizzare, ti basta nel caso cambiare larghezze, girare le colonne e/o rimuovere gli elementi che non ti servono)

**Sauron_x** · 24-03-2011, 23:40

Allora, in parte ci sono riuscito.

Proprio tramite il div padre che dicevi tu, inizialmente non capivo a cosa ti riferissi, ora si

Infatti se da un occhio sembrerebbe ok: http://94.36.51.98/sito/index.html

Infatti sia dal browser che dal editor non vedo sballamenti.

Resta però un problema se noti, il footer.

Quello chiaramente deve essere allineato in basso, la larghezza è giusta, ma non ho capito come alinearlo in basso, ho provato con diversi attributi ma non funziona.

Potresti aiutarmi a sistemarlo per bene?

Ti ringrazio

**Myaku** · 25-03-2011, 08:16

porta il footer fuori dal div #corpo (ma sempre dentro il #contenitore), e al posto di float: left dagli clear: both;

Discussione: Problema impaginazione sito. Sul Software è corretto ma sul browser no!

Strumenti discussione

Ricerca discussione

Visualizza

Problema impaginazione sito. Sul Software è corretto ma sul browser no!

Re: Problema impaginazione sito. Sul Software è corretto ma sul browser no!

Re: Re: Problema impaginazione sito. Sul Software è corretto ma sul browser no!

Re: Re: Re: Problema impaginazione sito. Sul Software è corretto ma sul browser no!

Permessi di invio