Ci sei ?
ci sonoOriginariamente inviato da pcf
Ci sei ?
allora per chiarirci per fare le colonne apparentemente della stessa altezza con i css,devi fare per forza come ho detto prima (ci sarebbe un altro sistema ma IE non lo supporta)
quindi annidi nelle colonne un tag div a cui assegni lo stile che ti ho dato (scusami ma ho saltato una lettere il css corretto è questo)
codice:sfondoBianco{width :100%;margin:0px;} <div id="sidebar_left"> <div id="sfondoBianco"> </div> </div>
Grazie Antos,
anche se non capisco come With possa influire sull'altezza essendo questa una larghezza, proverò come dici....
In ogni caso domani pubblicherò la pagina come viene su un link che si appoggierà (cartella di prova ) sul sito in firma.
Spero che per il forum non sia un problema dato che ne indicherò l'indirizzo.
.sfondoBianco {
background-color:#FFFFFF;
/* width: 100%; */
/* margin: 0px; */
width: 100%; e margin: 0px le ho commentato per farti vedere come era prima la pagina di queste correzione come potrai vedere in http://www.bisceglieweb.it/bari/prova_css/prova.htm
Con le correzioni che mi hai comunicato, nelle colonne laterali sotto l'ultimo link il filetto grigio effettivamente non c'è più.
Ma non era questo quello che volevo fare, vorrei invece portare (mantenendo lo sfondo bianco a partire dall'header fino all'ultimo link) quel filetto grigio fino giù, alla stessa altezza della colonna centrale, ossia dove sono riportati le immagini che nell'ultimo post visualizzano:
(commenti: 4) Invia ad un amico Stampa articolo
Esattamente qui e prima del footer che riporta -->
--> Disclaimer | Contattaci
Puoi vedere il risultato come vorrei (ma qui vengono usate le tabelle) nelle colonne laterali di http://blog.tiscali.it
Si può fare con i CSS quello che tiscali ha fatto con le tabelle ?
ho vito la pagina che hai fatto è c'è qualche problemino (per notarlo apri la pagina con mozilla)
provo a fare un qualcosa di veloce:
codice:<div id="container"> <div id="header"></div> <div id="colonne" style="background-color:#codicegrigio;"> <div id="sidebar_left" style="float:left;" > <div class="sfondoBianco">...</div> </div> <div id="content" style="float:left;background-color:#FFFFFF;">...</div> <div id="sidebar_right" style="float:left;"> <div class="sfondoBianco">...</div> </div> <div id="footer" style="clear:both;"></div> </div> </div>
>> ho visto la pagina che hai fatto è c'è qualche problemino (per notarlo apri la pagina con mozilla)
Magari fosse compatibile con tutti i Browser !
(Mozilla non c'è l'ho per vedere il problema)
Ma con il codice che mi hai listato:
- risolvo il problema che dici ?
- risolvo il problema dello sfondo grigio fino a giù ?
L'hai per caso testato ?
Perchè ripetere in "sidebar_left" , "right" e "content" style="float:left; .. l'avevo già messo nel foglio esterno in realtà anche con float:right?
ho riscritto gli stili inline per farti un esempioOriginariamente inviato da pcf
>> ho visto la pagina che hai fatto è c'è qualche problemino (per notarlo apri la pagina con mozilla)
Magari fosse compatibile con tutti i Browser !
(Mozilla non c'è l'ho per vedere il problema)
Ma con il codice che mi hai listato:
- risolvo il problema che dici ?
- risolvo il problema dello sfondo grigio fino a giù ?
L'hai per caso testato ?
Perchè ripetere in "sidebar_left" , "right" e "content" style="float:left; .. l'avevo già messo nel foglio esterno in realtà anche con float:right?
ecco un altro esempio che calza perfettamente con quello che vuoi fare, personalizzati lo stile sostitutisci gli stili inlinea con il css eterno ed hai fatto
codice:<html> <head> <title>prova</title> <style> .sfondoBianco{width:100%;margin:0px;background-color:#FFFFFF;} </style> </head> <body style="height:100%;text-align:center;"> <div id="container" style="width:730px;border:1px solid #333333;margin:auto;" > <div id="header" style="margin:10px;border:1px solid #333333;background-color:#FF0000;"> header </div> <div id="colonne" style="background-color:#666666;text-align:left;margin:10px;border:1px solid #000000;"> <div id="sidebar_left" style="float:left;width:110px;" > <div class="sfondoBianco">...</div> </div> <div id="content" style="float:left;background-color:#FFFFFF;width:488px;"> </div> <div id="sidebar_right" style="float:left;width:110px;"> <div class="sfondoBianco">...</div> </div> <div id="footer" style="clear:both;"></div> </div> </div> </body> </html>
Grazie infinite antos, avevo già preparato una risposta prima del tuo post sulla base di quel codice che avevi scritto velocemente.
Riproverò con quello che mi hai inviato adesso.
Questo è quello che avevo provato prima del tuo ultimo post
(non tenerne conto): Ho applicato il div colonne con lo sfondo grigio che racchiude le due colonne laterali con il footer ma lo sfondo grigio riempe i soliti interstizi tra le colonna centrale e quelle laterali e tra la colonna centrale e il footer come puoi vedere da
www.bisceglieweb.it/bari/prova_css/prova.htm
Se inserisco style="float:left alle due sidebar e clear:both al footer come mi hai indicato, ancora peggio, la colonna laterale dx si sposta tutta al centro e spinge giù quella centrale
<div id="colonne" style="background-color: rgb(235, 235, 235);">
<DIV id=sidebar_left style="float:left;" >
<div class="sfondoBianco">...</div>
</DIV>
<DIV id=sidebar_right style="float:left;">
<div class="sfondoBianco">...</div>
</DIV>
<div id="footer" style="clear:both;"></div>
</DIV>
Grazie Antos penso di essermi avvicinato alla soluzione !
Bisognerebbe capire solamente come risolvere il problema del bordo di "div=colonne"
Infatti, dai tuoi preziosissimi suggerimenti,
(correggendo lo spazio tra "puntino" e "sfondoBianco" di ".sfondoBianco" e back ground-color in background-color )
ho riscontrato che con border:1px solid #000000 di "colonne ":
- che il bordo destro di <div id="colonne"> non c'è, eppure sono corrette le dimensioni totali (488+110+110=708 +1+1px di bordo +10+10 di margine di "colonne" sono uguali a width:730px del "container" )
- togliendo il bordo da <div id="colonne"> (che poi è quello che mi serve per quello che sto realizzando ) come puoi vedere con border:0px solid #000000; di "colonne" lo sfondo grigio arriva oltre la fine delle due colonne laterali invadendo lo spazio compreso tra questo punto e quello fino al footer
-->Ho provato a capire dove posso risolvere il problema ma senza successo, dov'è l'errore?
Non sò quale problema tu abbia avuto con Mozilla (e forse all'articolo premeva più risolvere il problema con Explorer 5.0 e 5.5) ma in relazione alla compatibilità dei browser volevo chiederti:
- nel tuo esempio <div id="colonne"></DIV> racchiude "sidebar_left", "content" e "sidebar_right" nell'ordine appena indicato e non come riportato nell'articolo di HTML.IT (http://pro.html.it/articoli/id_383/idcat_8/pro.html), ossia "sidebar_left" "sidebar_right" e "content"
- inoltre nello stesso esempio, sia "sidebar_left" che "sidebar_right" hanno entrambi float:left e non il primo float:left e il secondo float:right come riportato dallo stesso articolo.
L'articolo di HTML.IT http://pro.html.it/articoli/id_383/idcat_8/pro.html alla pagina 4 immediatamente prima della "conclusione" riporta testualmente che con il metodo del float siamo obbligati a rispettare un ordine preciso nella definizione della struttura:
colonna sinistra;
colonna destra;
colonna centrale.
Ecco cosa succede spostando nel codice la colonna destra dopo quella centrale (esempio).
http://pro.html.it/esempio/383/layout_spostafloat.html
-->Mi sembra che tu non abbia rispettato queste regole, funzionerà lo stesso con quanto ho realizzato io seguendo i criteri dell'articolo considerando anche il fatto che io non ho dato quelle dimensioni che hai stabilito tu nell'esempio postato ?
Infatti io ho usato:
* gli hack per far leggere il layout anche con Explorer 5.0
* lo spazio centrale è stato ricavato direttamente dai margin del "content"
* "float:right" per "sidebar_right" e "float: left" per "sidebar_left"
Mio codice:
#container {
width: 760px;
\width: 780px;
w\idth: 760px;
#sidebar_left {
float: left;
width: 144px;
\width: 154px;
w\idth: 144px;
#sidebar_right {
float: right;
float: right;
width: 144px;
\width: 154px;
w\idth: 144px;
#content {
MARGIN-LEFT: 163px;
MARGIN-RIGHT: 163px;
puoi pubblicare la tua pagina ?
Permessi di invio
Rispondi quotando