- Home
- Categorie
- Coding e Sistemistica
- HTML e CSS
- Sidebar sotto il contenuto
-
Sidebar sotto il contenuto
Salve, sono impazzito una settimana intera a causa del mio blog. Fino a qualche tempo fa facevo i miei siti con le tabelle ma evidentemente un webdesigner dovrebbe usare i css per essere definito tale, cosi dicono tutti. In verità ora mi viene proprio da pensare che sia una fregatura in quanto credo che la causa del mio problema siano i css e le differenti versioni dei browser. Sul mio PC il blog si vede benissimo, vado a casa di un amico e mi trovo la sidebar sotto il contenuto. Disperato mi faccio prestare il monitor 4:3 in quanto io avendo quello 16:9 pensavo fosse quella la causa. Lo monto sul mio PC è si vede bene!!! Cosa c'è che non va allora mi dico!! Finalmente grazie ad un post letto su questo sito leggo che posso testare il mio blog su Total Validator su diverse versioni del browser e cosa scopro? Su Internet Explorer 7 e 8 è tutto ok mentre su quello 6 la sidebar è giù!! Complimenti ai CSS e ai browser!! Dobbiamo renderci la vita impossibile e non usare le tabelle? Va bè, lasciamo stare, visto che voglio essere un webdesigner vi chiedo aiuto, cosa fare ora per creare uno standard e non avere questo problema?
-
Premessa: il fatto di non usare le tabelle non è solo un semplice esercizio di stile o un modo per definirsi un web designer. Le tabelle rendono di fatto inaccessibile il contenuto di un sito (mai sentito parlare di accessibilità, legge Stanca, ecc.?) e dovrebbero essere usate solo per contenere dati tabellari, appunto, e non a scopo di impaginazione. Un layout fatto a tabelle è tuttavia più "stabile" ma si riesce comunque ad ottenere lo stesso effetto utilizzando i div e formattando bene con i CSS, stando attenti alle varie versioni dei browser.
Venendo al problema, è possibile vedere il codice?
-
Si è giusto ciò che dici riguardo la inaccessibilità che conosco ma è pazzesco pensare ci si debba rendere la vita più difficile, comunque grazie per la disponibilità, ecco il codice principale:
body
{
font-family: "Trebuchet MS", Arial, Verdana, Sans-Serif;
font-size: 76%;
background-color:#0033FF;
margin:0 auto;
background: URL(images/mare.jpg) no-repeat fixed top left; /*con la mancanza dell'attribut alla fine LEFT dico che se la foto è più grande della risoluzione dell' utente almeno me la centra anche se avrà i laterali scoperti */}
-
Si è giusto ciò che dici riguardo la inaccessibilità che conosco ma è pazzesco pensare ci si debba rendere la vita più difficile, comunque grazie per la disponibilità, ecco il codice principale, non metto altre cose superflue:
#headerimg /intestazione/
{
font-size: 1.2em;
height: 10em;
color: #FEF4DF;
margin: 0 auto;
}body
{
font-family: "Trebuchet MS", Arial, Verdana, Sans-Serif;
font-size: 76%;
margin:0 auto;
background: URL(images/mare.jpg) no-repeat fixed top left;
}#page /contenuto di tutto/
{
width:1000px;
margin-top:10px;
overflow:auto;
margin:0 auto;
}#wrapper /è il contenitore del contenuto content/
{
width: 780px;
float: left;
text-align:left;
border: 1px solid #ffffff;
}
#content
{
width: 99%;
text-align:left;
}#sidebar
{
margin-left:800px;
overflow:hidden;
width:198px;
color:;
border-left: 1px solid;
border-bottom: 1px solid;
border-right: 1px solid;
margin-bottom:0px;
}#footer
{
clear: both;
padding: 20px 20px 20px 7.5%;
margin-top: 9.5em;
height: 3em;
color:;
}
-
Chiedo scusa non mi ero accorto di aver mandato un messaggio quasi doppione