Footer su tutta la pagina e allineamento form

**utopie** · 03-01-2007, 00:50

Ciao,
Ho appena finito il nuovo layout del mio sito: http://www.utopie.it/k/.
Ora sto cercando di modificarlo nelle pagine con articoli lunghi eliminando la terza colonna e spostando il form cerca sulla prima colonna; sono arrivato a fare 'sta cosa: http://www.utopie.it/k/bilanci_di_giustizia.htm
Il risultato è quello che volevo tranne 2 problemini:
1) Il footer copre solo le tre colonne e non tutta la pagina come nel layout originario.
2) Il form cerca sotto il menù in IE è OK ma in mozilla mi risulta allineato a sinistra.
Sapete darmi una mano per la risoluzione?

**salasir** · 03-01-2007, 11:59

Nel sorgente della tua pagina, ho notato che il footer viene identificato come

codice:

<div id="topnavcontainer">
...

Ora, forse dovevi utilizzare l'id "footer" ? Anche perchè lo stesso id topnavcontainer viene già utilizzato per la barra in alto e due id identici non possono esistere.

Inoltre, ti consiglierei di eliminare tutte le definizioni di stile dal codice html per evitare confusioni sia a te sia soprattutto al browser, se dovesse trovare definizioni contrastanti.

Per il form, a parte suggerirti di semplificare le cose eliminando la tabella e definendo il form più pulito, dovresti mettere margin: 0 auto; per la tabella.

**utopie** · 03-01-2007, 14:21

grazie della risposta. In realtà è la prima volta che faccio un uso massiccio dei DIV e sto facendo confusione.

Riguardo al footer in effetti il richiamo e' al topnavcontainer già utilizzato per la barra in alto perche' il footer fatto nel css non mi piaceva. Non capisco però perchè i due id identici coabitano in http://www.utopie.it/k/ e non possano coabitare in http://www.utopie.it/k/bilanci_di_giustizia.htm... :master:

Riguardo al sitesearch google ci combatto da settimane.... (ho anche provato a eliminare la tabella e pulire il codice per fare una pagina tableless, ma poi non mi funzionava più il form...).
facendo la modifica che suggerivi risolvo il problema con mozilla, ma mi incasino con IE. Per capirci margin: 0 auto; dove lo metteresti all'interno del codice sitesearh google ?

grazie

**salasir** · 03-01-2007, 15:13

L'id è per definizione univoco. Poi se i browser (IE) non ti si rivoltano contro, ciò non vuol dire che sia corretto. Se ci sono due o più elementi con le stesse caratteristiche di solito si utilizza "class".

Normalmente, però, se ci si riferisce ad una sezione della pagina (header, footer, navigazione, ...) si utilizza "id" perchè così si definisce univocamente la sezione e le sue caratteristiche.

Per quanto riguarda il form prova a copiare questo codice e a lavorarci sopra.

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it">
<head>
<title>
	Home Page
</title>

<style type="text/css">
body {background-color: #fff;
color: black;
}

#container {background-color: #eee; text-align: center;
color: black; margin: 0 auto;
}
/*************************************/
/* Stile "form"                      */
/*************************************/
legend { font-weight:bold; font-style:normal; font-family:Verdana, sans-serif; 
	 font-size:14px; padding:5px; background: #deb887; border: 1px dashed #900;}
fieldset { padding: 1em; margin: 0.5em; border: 2px groove; }
form { border:1px dashed rgb(51,102,153); padding:10px; margin: 0 auto; 
	background: #FFFACD; width: 12em; }
input#sbi { display: block; margin: 0 auto; }
label { color: #333; font-size: 12px; }
</style>

</head>
<body>
<div id="container">

<form method="get" action="http://www.google.it/custom" target="_top">
<fieldset>
	<legend>Ricerca</legend>
<input type="hidden" name="domains" value="www.utopie.it" />
<label for="sbi" style="display: none">Inserisci i termini di ricerca</label>
<input type="text" name="q" size="20" maxlength="255" value="" id="sbi" />

<label for="ss0" title="Ricerca nel web">web</label>
<input type="radio" name="sitesearch" value="www.utopie.it" checked id="ss0" />
<label for="ss1" title="Cerca in www.utopie.it">utopie</label>
<input type="radio" name="sitesearch" value="" id="ss1" />


<label for="sbb" style="display: none">Invia modulo di ricerca</label>
<input type="submit" name="sa" value="Cerca con Google" id="sbb"></input>
<input type="hidden" name="client" value="pub-7155631127652552"></input>
<input type="hidden" name="forid" value="1"></input>
<input type="hidden" name="ie" value="ISO-8859-1"></input>
<input type="hidden" name="oe" value="ISO-8859-1"></input>
<input type="hidden" name="cof" value="GALT:#215670;GL:1;DIV:#3300CC;VLC:6C82B5;AH:center;BGC:FFFFFF;LBGC:336699;ALC:3300CC;LC:3300CC;T:333333;GFNT:3300CC;GIMP:3300CC;LH:48;LW:100;L:http://www.utopie.it/immagini/banner.../;LP:1;FORID:1"></input>
<input type="hidden" name="hl" value="it"></input>
</fieldset>
</form>

</div>
</body>
</html>

I colori li ho volutamente inseriti per vedere meglio i box.

**utopie** · 03-01-2007, 15:25

ok. grazie. Riguardo a allineamento e "stabellamento" del form google lavorando sopra il tuo esempio e smanettando un pò col codice spero di risolvere.

Il miei dubbi sono sul footer non avendo praticamente mai usato prima i DIV e non essendo un esperto di CSS. Che mi conviene fare a questo punto? Rifare completamente le impostazione dell'id footer nel foglio di stile e richiare l'id footer nel codice html? E come nel caso? Lo dico perchè ci ho provato con scarso successo (e per questo che ho ripreso l'id "topnavcontainer"...)

**salasir** · 03-01-2007, 15:30

Direi che la cosa più corretta è proprio di attribuire un id="footer" e poi di lavorarci sopra.
Tra l'altro, se non mi sbaglio, ci sono già definizioni per quell'id nel CSS.

Se riesci ad estrarre la porzione di codice CSS relativa al footer ci lavoriamo.

Un'altra cosa. Mi pare che anche nel footer ci sia gran uso di <font> <span> e simili per gestire i caratteri. Come hai visto nel form puoi eliminare tutto e lavorare solo con i CSS. Ti rimane un codice della pagina molto più pulito e semplice da rivedere.

**utopie** · 03-01-2007, 17:31

che il footer ora sia incasinato siamo d'accordo...

Se vuoi codici. ecco qua!
allora il vecchio id fotter (che ho lasciato nel foglio di stile ) era questo:
---
#footer{
clear:both;
padding:5px 0 5px 1px;
margin-top:1px; /* required for ie5.5 Mac */
height:30px;
background-color:#FFFFFF;
border-top:1px solid #EEE8DB;
text-align:left;
font-size:65%;
line-height: 130%;
color:#898989;
font-family: Verdana, Arial, Helvetica, sans-serif;
---

il vecchio codice dava vita a una pagina di questo tipo con un codice pulito ma con un aspetto grafico che non mi soddisfava... dato che preferivo anche nel footer una barra come quella in alto. Ho provato a inserire nell'id footer del foglio di stile il codice topnavcontainer:
---
#topnavcontainer{
background-image: url('http://www.utopie.it/images/design/navbg.jpg');
margin:0;
background-color:#3300CC;
height:19px;
\height:25px;/* IE5 HACK */
he\ight:19px;
border-top:1px solid #666666;
border-bottom:1px solid #131008;
font-size:75%;
text-align:right;
font-family: Verdana, Arial, Helvetica, sans-serif; padding-left:0px; padding-right:0; padding-top:4px; padding-bottom:0px
}
---

ma mi sballava tutto.

Pur non essendo tecnica molto ordossa ho trovato la quadratura del cerchio inserendo come footer direttamente il richiamo alla barra superiore (topnavcontainer). la cosa funziona con le 3 colonne, ma non mi appare appunto nel layout a 2 colonne ...

Se mi dai una mano a modificare il footer ti accendo un cero...

**salasir** · 03-01-2007, 17:56

OK!
Ora non ho tempo, ma se puoi aspettare fino a domattina lo guardo appena arrivo in ufficio.

**utopie** · 03-01-2007, 19:10

certo quando vuoi e puoi...

**salasir** · 04-01-2007, 10:50

Per ora cominciamo da qui:

codice:

HTML 
</div>                 <=== spostato sopra il footer

<div id="footer">
Copyleft
- 1997_2007 Utopie Onlus™ - 
Privacy Policy - 
Disclaimer - Testi e Grafica: 
Maurizio Pittau
</div>

</body>
</html>

CSS 
#footer { font: normal 65% Verdana, Arial, Helvetica, sans-serif;
	background: #fff url(navbg.jpg); text-align: center;
	padding: 5px 0 5px 1px; height: 30px; 
	clear: both; border-top: #eee8db 1px solid; margin-top: 1px; 
	color: #f5f5f5; line-height: 130%;
}
#footer a:link {
	color: #f5f5f5; text-decoration: underline;
}
#footer a:visited {
	color: #f5f5f5; text-decoration: underline;
}
#footer a:hover {
	color: #c85a3f; text-decoration: none;
}

(Colori dei link a scelta

)

Poi non ho capito una cosa:

codice:

<link rel="stylesheet" type="text/css" href="text/default.css" />
<style type="text/css">@import url(http://www.utopie.it/text/default.css);</style>

Perchè due include identici con due tecniche diverse?

Discussione: Footer su tutta la pagina e allineamento form

Strumenti discussione

Ricerca discussione

Visualizza

Footer su tutta la pagina e allineamento form

Permessi di invio