- Home
- Categorie
- Coding e Sistemistica
- HTML e CSS
- Con explorer nulla è al suo posto
-
Ciao LippoR1, scusa ma io invece al contrario di te non sono molto pratico !
Poichè ho problemi con il footer perchè non mi allinea il contenuto con il contenitore (sempre con explorer) cosa mi consigli di fare? Eliminando i margini mi si sballa tutto; secondo te se inserisco un contenitore vuoto al di sotto, e al posto del margin, in modo da creare spessore, potrebbe andare bene? :bho:
-
Questo è il link: http://www.cignolo.com/FD2000
Come potete notare, il testo nel footer scende più in basso, e la colonna di sinistra comincia a ripetersi.
Grazie
-
Io generalmente per ovviare a questo tipo di problemi strutturo le pagine in modo diverso. Quando mi trovo in queste situazioni tendo a creare una serie di box - eventualmente incapsulati tra loro - in modo da posizionare il tutto come voglio e in ogni tipo di browser. C'è poi solo da fare un attimo di pratica con dimensioni e posizionamento quale il float. I tag tipo <p>, <span> sono trattati in modo troppo personalizzato da explorer per renderli utilizzabili con facilità, altrimenti dovresti gestire il tutto con CSS specifici per browser aumentando notevolmente il lavoro
-
Allora io te l'ho risolto modificandoti qualcosa.
Intanto tieni sempre presente una cosa:
Oggetti come "img", "p", "H" hanno un margine automatico e devi sempre settarlo a "margin:0;" se non vuoi riscontrare spiacevoli discompensi nella distribuzione degli oggetti.Io ti ho risolto così:
[html]<div id="footer">
<div id="divimg"> <a href="http://creativecommons.org/licenses/by/2.5/it/"> <img src="somerights20.gif" alt="Creative Commons Licensed"/></a> </div>
<div id="contDiv">
<p>Figli Del 2000 Onlus - Piazza Mazzini, 9 - 84100 - Salerno - Cod. Fisc. 95107910655<br/>
<a href="http://www.gaetano.contaldi.name">Developed by Gaetano Contaldi</a></p>
</div>
</div>
</div>[/html]Ti ho aggiunto due "scatole" interne che contenessero l'immagine e la zona di testo.
Ho l'abitudine continuamente di distribuire ogni blocco di oggetti differenti (in questo caso immagine e testo) in div personali.Quindi adesso hai una "scatola" chiamata footer che contiene altre due scatole.
Così attraverso il padding puoi sistemare questi due oggetti come meglio credi.Ah conta sempre questo:
come ti hanno detto explorer "sente" i bordi, padding e margini diversamente da Firefox.
Se ad esempio hai una cella di 150px e aggiungi successivamente dei bordi laterali di 1px l'uno, conta che la cella originaria dovrà diventare 148px poichè IE incorpora i bordi come se sommasse alla grandezza originaria.
Stessa cosa per i margini e i padding.
Se ad esempio vuoi creare all'interno di un div di 100px di altezza un ulteriore div con margin-top:20px, conta che devi metterlo a 80px di height poichè il valore del margin viene incorporato nella grandezza totale del div da te inserito: 80 + 20px;Ah ecco il css modificato:
[html]
#footer {
background:transparent url(BottomBody.png) no-repeat scroll 0%;
height:80px;
text-align:right;
width:800px;}
p {
margin:0;
color:#818181;
font-family:Verdana;
font-size:x-small;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:normal;
padding-top:0px;
text-align:center;}
#contDiv{
padding-top:10px;
width:100%;
height:30px;
}
#divimg{
height:40px;
}[/html]
-
Ah una cosa:
Firefox può incorporare un plugins "indispensabile" per la creazione di pagine web: Firebug.
Ti permette di visualizzare i singoli elementi e poterli interrogare , ti evidenzia i div e i blocchi di testo e ti consente di poter visualizzare script, html, css e DOM separatamente in un'ottima visuale.
Inoltre , almeno cn me, ti permette facilmente di "scovare" quei margini , padding e div che non sono correttamente impostati.
-
@Laburno said:
In alternativa, potresti usare <em>.. nel tuo caso penso che sia ugualmente corretto anche se devo ammettere che non ho le idee molto chiare riguardo le differenze tra questi tag.
il tag <em> dovrebbe avere una funzione più complessa ma poco utilizzata nell'uso di emettitori vocali.
-
Grazie tante Karedas, sei stato davvero chiarissimo!
Ho sostituito il codice, e dal tuo suggerimento, impostando il padding, ho posizionato il contenuto del footer in maniera impeccabile, sia per explorer che per firefox ;unico problema in explorer mi viene dato dalla colonna di sinistra che continua al di sotto del footer anche se di poco; cercherò però di risolvere questo problema giocando di nuovo con il padding di tutto il div (nn so se sto sparando sciocchezze)!
Ti volevo chiedere una sola cosa sulla quale, se puoi, vorrei una delucidazione: il padding viene interpretato allo stesso modo dai due browser, mentre il margin no? dico questo perchè impostando il padding, il contenuto di prima mi si spostava allo stesso modo in tutti e due i browser; poi, inserire più div non appesantisce la pagina?Grazie ancoraaaaa
-
Padding e margin non hanno la stessa funzione ma vengono interpretati allo stesso modo. Devi tenere comunque presente che è l'insieme di margin+border+padding+box che cambia se il browser non rispetta gli standard.
L'inserimento di molti div non appesantisce la pagina, basta che guardi siti con pagine molto complesse che sono pieni di div per gestire bene il posizionamento
-
@karedas said:
il tag <em> dovrebbe avere una funzione più complessa ma poco utilizzata nell'uso di emettitori vocali.
Si, alla fine mi sono informato Grazie.
@MrKid said:
Grazie tante Karedas, sei stato davvero chiarissimo!
Ho sostituito il codice, e dal tuo suggerimento, impostando il padding, ho posizionato il contenuto del footer in maniera impeccabile, sia per explorer che per firefox ;unico problema in explorer mi viene dato dalla colonna di sinistra che continua al di sotto del footer anche se di poco; cercherò però di risolvere questo problema giocando di nuovo con il padding di tutto il div (nn so se sto sparando sciocchezze)!
Ti volevo chiedere una sola cosa sulla quale, se puoi, vorrei una delucidazione: il padding viene interpretato allo stesso modo dai due browser, mentre il margin no? dico questo perchè impostando il padding, il contenuto di prima mi si spostava allo stesso modo in tutti e due i browser; poi, inserire più div non appesantisce la pagina?Grazie ancoraaaaa
Ho provato a spiegare velocemente l'interpretazione del box model in questo post:
http://www.giorgiotave.it/forum/css/44231-non-capisco-dove-sbaglio-aiuto-please.html#post300666In ogni caso cercare box-model qua sul forum o su google dovrebbe fugarti ogni dubbio
@LippoR1 said:
Padding e margin non hanno la stessa funzione ma vengono interpretati allo stesso modo. Devi tenere comunque presente che è l'insieme di margin+border+padding+box che cambia se il browser non rispetta gli standard.
L'inserimento di molti div non appesantisce la pagina, basta che guardi siti con pagine molto complesse che sono pieni di div per gestire bene il posizionamentoCiao LippoR1! Con Karedas hai salvato la giornata a MisterKid e ancora nessuno che ti ha dato il benvenuto come si deve
Beh... benvenuto!
-
@Laburno said:
Ciao LippoR1! Con Karedas hai salvato la giornata a MisterKid e ancora nessuno che ti ha dato il benvenuto come si deve
Beh... benvenuto!
Per la miseria è vero... non me n'ero reso conto...
[CENTER]:lamu6qf:BENVENUTO:lamu6qf:[LEFT]Hai ragione Laburno, in giro si trova molto materiale, però a dir la verità, forse è anche troppo, talmente tanto che ti rincitrullisce !
Io ho scaricato le specifiche e me le sono lette tutte, il problema ora è metterle in pratica man mano.
Dopo aver sistemato le pagine, infatti, mi toccherà leggere le specifiche per i browser dei non vedenti, e già temo :zanichelli4mc:@LippoR1 e @Karedas : :00017010: (ma chi fa la mamma?)
[/LEFT]
[/CENTER]
-
Grazie del benvenuto!!!
Tanto donna non mi sento quindi lascio l' "onore" a @Karedas
-
Probabilmente hai qualche margine che ti spinge il container verso il basso allungandotelo e distanziando il footer dal piede-pagina.
Se non hai risolto puoi rilinkare ricontrolliamo al volo. Forse ho dimenticato di scrivere qualcosa io copiando e incollando qui dentro =pSarò l'amante io =|