problema di visualizzazione CSS

[1riky1]

ciao a tutti
ho un grossissimo problema da risolvere:
se visualizzo il mio sito con explorer mi si vede tutto sballato con chrome invece o altri è perfetto come posso risolvere?

inoltre non sono pratico nell'uso css mi potreste dare una mano a posizionare bene in modo più ordinato e consono i banner in header?

grazie 1000

http://www.seratereggiane.it

[MaxSimon]

Purtroppo ora non ho IE sottomano (per fortuna!), quindi non riesco a capire il problema.
Guardando un po' il tuo css però vedo due float dei banner, ma non vedo clear.
Prova a mettere un clear:both alla riga 76 (#header).

Oppure se vuoi prova a spiegare cosa significa "tutto sballato", magari capisco meglio come aiutarti.

Ciao

[1riky1]

ti ringrazio per la tua risposta e la tua disponibilità! sei molto gentile

allora i problemi sono 2:
1) l'header.htm del sito è composto da banner pubblicitari come puoi vedere sono stati inseriti dentro tabelle perchè non so usare i css e non ho fatto un gran lavoro anzi è un lavoraccio ...

qui ti allego lo sshoot dove puoi vedere i banner non ordinati (mi piacerebbe che fossero alla stessa altezza dall'alto come il primo sulla destra e occupassero in modo consono tutti gli spazi insomma che fosse bella la testata ...sono disposto anche a ridimensionarli però mi paicerebbe fare tutto con i css di modo che se volessi cambiare qualcosa o aggiungerne sia possibile in poco tempo. inoltre mi piacerebbe che se uno ha un monitor piccolo vadano a capo da soli senza però sballarsi come fanno ora che sn fissi in tabelle.

2) il problema con explorer è di visualizzazione delle 3 righe sotto la testata. si vedono in colonna con 2 parole per riga e quindi diventa obrobrioso ....non capisco il motivo sembra che ci sia un crash nel javascript che definisce gli allineamenti....non so come risolverlo...

mi faresti cosa gradita se riuscissi a darmi una soluzione purtroppo io al momento non sono riuscito a fare di meglio

Grazie1000!!!

[1riky1]

ecco

[MaxSimon]

Beh, c'è un po' di lavoro da fare e devi aver bene chiaro in mente (e sulla carta) cosa vuoi ottenere.
I tre banner hanno dimensioni diversissime: a mio avviso quello a destra è troppo ingombrante (ma è una mio opinione).
Poi due sono float:left e uno float:right: hai provato a visualizzare il sito sullo schermo di un portatile? A me pare che a destra ci sia molto più spazio che a sinistra (anche su tutta la pagina), tu che dici?
Sul fatto che "devono andare a capo" su monitor più piccoli, te lo sconsiglio: andresti a rovinare tutta l'impaginazione del sito; anzi, potresti impostare la proprietà min-width per fare in modo che più di tanto non possa scendere.

Le soluzioni possibili sono diverse.
1 - Se vuoi utilizzare un layout fluido devi fare i conti con le risoluzioni degli schermi: su un monitor 1024x768 i tuoi banner potrebbero anche andare bene, ma se la risoluzione aumenta?
Potresti dimensionare il larghezza il body o il div#container per fare in modo che i tre banner siano centrati anche su monitor con risoluzione più grande: sul mio schermo io vedo fra il secondo ed i terzo uno spazio enorme; quindi:

#container {
   width:auto; /* layout fluido - oppure imposti una dimensione */
   margin:0 auto;
}

2 - Potresti mettere i tre banner nella stessa tabella (ora ne utilizzi due), alla quale assegni un id, poi nel css imposterai:

table#TuaTabella td {
   border: none;
   width: 33%;
   margin: 0;
}

in questo modo la larghezza dello schermo viene divisa in tre colonne di uguale larghezza.

3 - Per allineare i tre banner in alto:

#table#TuaTabella td img {
   vertical-align:top;
}

Questa è una soluzione.
Altra soluzione potrebbe essere quella di utilizzare, invece della tabella, dei div che andrai a mettere nel div#container2, al posto delle due tabelle (fra l'altreo le tabelle sono già contenute in due div!):

<div id="MioHeader">
<div id="banner1">
   
<div>
<div id="banner2">
   
<div>
<div id="banner3">
   
<div>
</div>

e nel css imposti le dimensioni e la posizione di ognuno richiamandolo con il proprio id; in questo modo se un domani ne aggiungi un altro devi solamente aggiungere poche righe nel html e css.

Fai qualche prova e soprattutto controlla le tue pagine anche su monitor con risoluzioni differenti, oltre che su browser differenti!
Se poi ti serve aiuto chiedi pure.
Ciao.

[1riky1]

grazie mille! allora ho provato la soluzione 3 cosa ne dici del risultato mi sembra abbastanza buono hai dei suggerimenti in rigurado per migliorare l'estetica ?

#banner1{
float: left;
margin-left: 5px;
margin-top: 5px;
}

#banner2{
float: left;
margin-left: 30px;
margin-top: 5px;
}

#banner3{
float: right;
margin-right: 15px;
margin-top: 5px;
}

#banner4{
float: right;
margin-right: 15px;
margin-top: 5px;
}

#MioHeader{
float: left;
margin-left: 5px;
margin-top: 0px;
}

ora resta solo il problema con explorer che è quello forse piu importante perchè molta gente usa ancora explorer

Grazie mille cmq per la velocità con cui mi hai risposto! Gentilissimo

[MaxSimon]

I problemi con IE sono tanti!
A me da un errore di "memory limit at line 9" (IE7).
A parte questo (anche negi altri browser) i banner sono secondo me troppo "ballerini": a seconda dello schermo si posizionano uno sopra l'altro con un effetto poco piacevole; in IE, inoltre, il menu appare allineato/ammucchiato a destra. Allego un'immagine per farti capire.

Io farei così:
- ridimensiona i banner per farlo stare in uno chermo con risoluzione 1024px;
- #MioHeader {width:980px; margin:0 auto;} in questo modo il contenitore dei banner rimane sempre posizionato al centro della pagina;
- nelle regole dei banner #banner {display:inline; vertical-align:top; margin: 5px 5px 0;} e togli il float left;
- #Header {clear:both;}

Io farei qualche prova in questa direzione.
E' una mia opinione, magari poi a te piace così!

Ciao.

[1riky1]

ti ringrazio sei sempre molto gentile!
cmq si qualche prova la farò per sistemare con le tue dritte i banner il problema piu grosso che mi preoccupa adesso però è il discorso di explorer e li non ho idee di come risolverlo

tu mi potresti dare qualche dritta ?

grazie!

[MaxSimon]

Magari no, ma magari se sistemi i banner anche il menu sotto va a posto o per lo meno migliora un po'...
Potresti dare una dimensione anche al contenitor del menù: #header-bottom {width:980px; text-align:left; margin:0 auto;}.
Però io partirei dall'alto a sistemare il layout.

Per il memory limit: usi wordpress, vero? C'è un modulo aggiuntivo per Facebook?
Ti ho copiato il messaggio di errore nelle prime due righe, dalla linea tratteggiata in poi è il modulo in questione (è un file .css): se guardi all'ultima riga vedrai che ci sono un paio di asterischi in mezzo alle dichiarazioni (sono evidenziate in rosso); prova a toglierli.

Prevista una dichiarazione, invece è stato rilevato un "*". Saltato alla dichiarazione successiva. 
http://static.ak.connect.facebook.com/connect.php.it IT/css/bookmark-button-css/connect-button-css/share-button-css/FB.Connect-css/connect-css
-------------------------------------------------------------  

/*1303255523,169560177,JIT Construction: v368160,it_IT*/  
.FB_UIButton{background-image:url(/images/ui/UIActionButton_ltr.png);border-style:solid;border-width:1px;display:-moz-inline-box;display:inline-block;outline:none;padding:3px 6px;vertical-align:bottom}
.FB_UIButton:hover,
.FB_UIButton:active{text-decoration:none}
.FB_UIButton:active{-moz-box-shadow:0 1px 0 rgba(0,0,0,.05);-webkit-box-shadow:0 1px 0 rgba(0,0,0,.05)}
.FB_UIButton_Text{font-family:"lucida grande",tahoma,verdana,arial,sans-serif;font-size: 11px;background-color:transparent;border:none;cursor:pointer;display:block;font-size: 11px;font-weight:bold;line-height:14px;*line-height:13px;margin:0;overflow:visible;padding:0;* padding-bottom:1px;width:auto}