Layout con CSS In sito Php-Nuke

**capsula** · 21-04-2006, 15:40

Non capisco... ho letto tutto provato ma i due errori rimangono... anzi peggiorano. Aiuto!!!!!

**thomas_anderson** · 21-04-2006, 15:56

div#container {background-color:#FFC; padding-left:50px; padding-right:50px;}
div#header {height:80px; line-height:80px; margin:0; padding-left:10px; background-color:#CFF; color:#3C6; font-size:25px; }
div#col2{float:right; width:100%; margin-right:-33%; padding: 10px 10px}
div#content{float:right;}
div#navigation{background:#B9CAFF; float:left; width:32.9%}
div#extra{background:#FF8539; float:left;clear:left;width:32.9%}
div#footer{background: #333;color: #FFF; clear:both; width:100%; margin:0; padding:5px 10px

Riscriviamo l'XHTML, che è un pò incasinato:

<div id="container">
<div id="header">...</div>
<div id="col2">
<div id="navigation"></div>
</div>

<div id="content"></div>
<div id="extra"></div>
<div id="footer"></div>
</div>

CSS:

#container {
width: 100%;
margin: 0;
padding: 0;
}
#header {
width: 100%;
margin: 0;
padding: 0;
}
#col2 {
float: left;
margin-left: 0;
margin: 0;
padding: 0;
width: 20%;
}
#navigation {
margin: 0;
padding: 0;
width: 100%;
}
#content {
float: left;
margin-left: 0;
margin: 0;
padding: 0;
width: 50%;
}
#extra {
float: left;
margin-left: 0;
padding: 0;
width: 25%;
}
#footer {
width: 100%;
clear: left;
margin: 0;
padding: 0;
}

Questo per iniziare.

**capsula** · 21-04-2006, 17:14

Ecco ho aggiunto dei colori di sfondo e le scritte così si capisce la divisione in sezione e del padding in container

codice:

<html>
<head><title>Layout Sito - Prova 2</title>

<style type="text/css">
#container {
width: 100%;
margin: 0;
padding: 20;
background-color:#FF9;
}
#header {
width: 100%;
margin: 0;
padding: 0;
background-color:#FCF;
}
#col2 {
float: left;
margin-left: 0;
margin-top: 3;
padding: 0;
width: 20%;
background-color:#CCF;
}
#navigation {
float:left;
margin: 0;
padding: 0;
width: 100%;
}
#extra {
float: left;
margin: 0;
padding: 0;
width: 100%;
}
#content {
float: right;
margin-left: 0;
margin: 0;
padding: 0;
width: 75%;
background-color:#3F6;
font-size:50px;
}
#footer {
width: 100%;
clear: both;
margin: 0;
padding: 0;
background-color:#6FF;
}
</style>

</head>
<body>

<div id="container">
<div id="header">HEAD</div>
<div id="col2">
	<div id="navigation">NAV</div>
	<div id="extra">EXTRA</div>
</div>

<div id="content">CONT</div>
<div id="footer">FOOT</div>
</div>

</body>
</html>

La foto del risultato è:

Manca un pezzetto di pagina, che sfora, casomai copiate il codice in una pagina html e capite subito

Il problema ora è questo: io voglio mettere il padding in container così da creare le due fasce laterali ma anche se faccio questo il layout completo deve restare dentro lo schermo, invece sfora, c'è una barra di scorrimento orizzontale.

Inoltre a sinistra lascia uno spazio bianco (anche sopra) cosa che a destra non accade. Voglio eliminare gli spazi bianchi. Ma non so farlo.

Non capisco come risolvere questi due errori, il resto va ok.
Ciao, grazie

**thomas_anderson** · 21-04-2006, 18:42

bè, cominciamo a ragionare, anche se:

1) perchè hai aggiunto margin ai <div>? tieni presente che il margin-top sposta il <div>. i <div> come te li ho scritti io servono solo per l'intelaiatura di base. poi inserirai il contenuto al loro interno che fomatterai con padding e margin, ma non i contenitori.

2) hai aggiunto padding al container. anche questo influisce sul corretto posizionamento.

3) ti avevo dato delle misure precise. tu hai dichiarato 100% ad #extra. ciò significa che #extra occuperà tutto lo spazio disponibile, facendo slittare gli altri, riprendi il codice come te lo avevo postato, quando fai delle modifiche, devi sempre calcolare quanto spazio hai, sennò sballa tutto.

**capsula** · 21-04-2006, 19:26

Allora:
1- Margin li ho messi per un fattore estetico diciamo... comunque li ho tolti. Li avevo messi su col2 ad esempio solo per staccarla un attimo dall'header. Margin e padding dici che li devo usare sul contenuto e non sui contenitori... quindi che tag uso x il contenuto? Lo <span>?

2- Il padding al container lo ho messo per formare le due fasce laterali che con il tuo codice non si formano.

3- Non so se ti sei accorto ma io i div li ho spostati rispetto a come li avevi messi tu. Ora extra sta sotto navigation, come voglio che stia. Gli ho dato 100% per il fatto che 100% lo hai dato anche tu a navigation...

4- Ho fatto queste modifiche:
#content { float: right; width: 75%; ... } : ho cambiato il float perchè voglio che si allinei a destra e non sti appiccicato alla prima colonna, ho modificato il width perchè 50% era poco, vorrei che lo spazio tra la prima e la seconda colonna fosse stretto, così da nn mangiarmi spazio da usare...

Fammi sapere, grazie mille ciao

**capsula** · 21-04-2006, 19:28

Ah scusami ho modificato anche #footer { clear:both; ... } per far si che il footer sia sotto a tutto se no metà footer era occupato dal content che lo sovrastava. Scusa se non lo ho scritto prima.

**thomas_anderson** · 21-04-2006, 19:59

Quando dai un 100% a qualcosa ti devi chiedere: 100% di cosa? nel nostro caso era il 100% di larghezza della colonna più a sinistra. tu mettendolo fuori hai ottenuto l'effetto opposto. I marcatori per il contenuto sono gli headers (h1.... h6), paragrafi (p), eccetera.

**capsula** · 21-04-2006, 21:35

Quindi come è ora va bene?
Mi diresti come posso formare le due fasce laterali senza far si che tutto il layout sfori dallo schermo? Deve restare tutto in"schermata" diciamo.
La colonna di destra, quella content per capirci che larghezza massima posso dargli?
Aspetto risposta, grazie ciao

**thomas_anderson** · 22-04-2006, 12:54

http://gabrieleromanato.altervista.o...e-colonne.html

Il CSS: http://gabrieleromanato.altervista.o...o/articolo.css

E' un layout a tre colonne base. osserva come ho posizionato gli elementi all'interno delle colonne. devi sempre calcolare la larghezza complessiva. se vuoi creare un layout centrato devi dare:

body {
text-align: center;
}

#contenitore {
width: 50%;
margin: 1em auto;
}

Poi devi aver chiaro il concetto di elemento in linea (a, span, ecc) e di blocco (div, p, h1...h6, ecc.). se vuoi creare un nuovo settore devi usare un elemento di blocco. tieni presente che bordi, margii e padding influenzano la larghezza finale dell'elemento. leggi nella guida di HTML.it queste nozioni di base.

**capsula** · 22-04-2006, 15:31

Ho visto....io ho centrato il mio layout dopo aver letto questo topic: http://forum.html.it/forum/showthrea...hreadid=974889 a cui ho proposto una soluzione, visto che ho fatto delle prove.

Ho modificato il CSS così:

#corpo {
text-align:center; /* allineamento centrale, per IE */
background:#D6D6C6 url(linea2.gif) repeat;
}
#sito {
text-align:left; /* riporta il testo a sinistra, per IE */
width:70%;
margin:auto auto; /* allineamento centrale, per FF */
}

E il testo XHTML modificato è:

<div id="corpo">
<div id="sito">
<div id="container">
<div id="header">HEAD</div>

<div id="col2">

<div id="navigation">NAV</div>
<div id="extra">EXTRA</div>
</div>

<div id="content">CONT</div>
<div id="footer">FOOT</div>
</div>
</div>
</div>

Ho dovuto aggiungere due div con due relativi id nel css per far si di poter avere layout centrato sia per IE che per Firefox

e quello che produce è questo:

C'è sempre quello spazio bianco che non riesco a togliere anche se stavolta non ho messo nè margini nè padding.
Fammi sapere, grazie mille, ciao

Discussione: Layout con CSS In sito Php-Nuke

Strumenti discussione

Ricerca discussione

Visualizza

Permessi di invio