www.MegaLab.it

da **ssjx** » ven ott 27, 2006 10:43 pm

Ragazzi ho un piccolo problema che nn riesco a risolvere

Nell'immagine (fatta alla meno peggio) allegata ecco il layout che dovrei realizzare il tutto senza tabelle ma usando solo css

In breve è composto da un header che occupa sempre una larghezza del 100% così come la barra di navigazione sottostante (verdina), mentre il container grigio debe avere delle dimensioni fisse di 760px
Infine il footer deve stare sempre in fondo alla pagina attaccato al fondo del browser ed occupare una larghezza del 100%

Il problema (almeno per adesso) sta nell'header o meglio nel suo contenuto: come potete vedere ci sono 2 div (quello rosso contiene il logo del sito mentre quello blu i form per il login)
Questi dovrebbero in teoria restare attaccati ai poli opposti della finestra e non toccarsi mai visto che il div dei contenuti ha una dimensione fissa di 760px, eppure se la si ridimensiona eccessivamente (basta già un 640x480) si sputtana tutto e si accavallano come se fossero indipendenti dal div content [boxed]

Credo che il problema sia che l'header e la barra di navigazione vedono come 100% la finestra del browser soltanto mentre il div dei contenuti va oltre)

help [cry+]

da **ssjx** » ven ott 27, 2006 10:54 pm

ah dimenticavo di dire che ovviamente il problea si presenta con IE visto che nn supporta min-width [:(!]

da **Pacopas** » sab ott 28, 2006 1:36 am

Premetto che ho fatto delle ipotesi; per la precisione

Box header width:100%; height: 100px;
Box logo width: 150px; height: 90px;
Box login width: 150px; height: 80px;
Box menu width: 10%; height: 30px;

detto questo se ho compreso bene

Codice: Seleziona tutto: <html><head><title></title> <style type="text/css">  </style></head><body> <div id="header"> <div id="logo"><div align="center"><br>LOGO</div></div> <div id="login"><div align="center"><br>LOGIN</div></div> </div> <div id="menu"></div> </body></html>

da **ssjx** » sab ott 28, 2006 4:59 pm

No purtroppo non ci siamo

Oggi ho lavorato un po' e sono riuscito a risolvere svariati altri problemini ed a semplificare tutta la struttura

Ecco dunque che adesso il problema che mi tocca risolvere è molto semplicemnte come fare, con IE che non vede la proprietà min-width, ad impostare una larghezza minima per un div che normalmente occupa il 100%

Qualcuno sa come si potrebbe aggirare l'ostacolo?

da **ssjx** » sab ott 28, 2006 5:45 pm

Allora .............. girando su HTML.it ho trovato una scappatoia ovvero assegnare una regola speciale solo per IE con il seguente codice

Codice: Seleziona tutto:

Solo che ho notato un nuovo problema: ovvero il footer dovrebbe rimanere sempre attaccato in fondo alla finestra del browser (se la pagina è più corta) e in fondo alla pagina senza che i contenuti e la barra laterale lo coprano se questi superano la lunghezza della finestra

A tal fine avevo usato questo codice nel CSS

Codice: Seleziona tutto: html, body { margin: 0; padding: 0; width: 100%; height: 100% } div#container { position: relative; height:100%; width: 100%; min-width: 760px; } div#footer { position:absolute; bottom: 0; width: 100%; clear: right; }

quel clear doveva risolvere il problema della sovrapposizione della barra laterale (che ha la proprietà float: right) e dei contenuti in teoria, eppure non capisco perché se la finestra del browser è più corta il problema si presenta

Idee?

da **Pacopas** » sab ott 28, 2006 7:15 pm

comincio a non capire bene perché ancora non ho compreso totalmente come hai impostato tutta la pagina.

puoi postare l'intero codice così cerchiamo di modificare il tuo senza trovare nuove soluzioni

poi cosa importante per il footer (già trattato in un'altra discussione) se vuoi che quest'ultimo si "appiccichi" al fondo della pagina per qualunque risoluzione devi lasciare le altezze tutte in percentuale.

questo metodo è molto diffuso tra i webmaster perché rende il layout della pagina elegante però in pratica crea svariati problemi di visualizzazione a risoluzioni molto basse rispetto a quella che usa il webmaster poiché le immagini inserite hanno bene o male una dimensione fissa quindi prima o poi collasseranno.

purtroppo i css sono stati creati per una impaginazione fluida come quella della home di MegaLab (anche se nello specifico quest'ultima ricorre al table)

per farmi comprendere bene ti posto due pagine. fammi sapere ma soprattutto postami il tuo codice se ti va.

da **Pacopas** » sab ott 28, 2006 7:29 pm

dimenticavo non so se si adatti al tuo codice per questo ti chiedevo di allegarlo ma forse basta questo

Codice: Seleziona tutto: min-width: 760px; width: auto !important; width: 760px;

Usavo IE e mi lamentavo...

dovresti lascire che si lamentino anche gli altri chissa se anche loro
cambiano browser [fischio]

[/quote]

da **ssjx** » sab ott 28, 2006 8:42 pm

Allora ................. non avendo la pazienza necessaria ho continuato imperterrito a fare prove e controprove senza aspettare la tua risposta [:-D]

risultato: ho effettuato svariate modifiche e per il momento tutti i problemi di cui parlavo nei post precedenti non mi interessano più (sospiro [:-D]

) e grazie alla soluzione trovata su HTML.it ho risolto anche il problema della larghezza minima con IE quindi dimentica pure tutto il panico sopra esposto ma grazie comunque x l'aiuto

Ora invece la cosa che non sto riuscendo davvero a capire (ma spero davvero che l'errore sia mio perché sennò IE è più chiavica di quel che pensavo) è se realmente in IE non è possibile impostare una altezza di 10px per un div [?]

............... in Opera e FF tutto OK ma in IE sembra che l'altezza minima x un div sia sui 30px (cioè anche se io imposto 10px lui me lo visualizza più grande)

Mi potete dare una qualche conferma in merito?

Pacopas ha scritto:
Usavo IE e mi lamentavo...

dovresti lascire che si lamentino anche gli altri chissa se anche loro
cambiano browser

non sai quanto è forte la tentazione [fischio]

da **Boo** » dom ott 29, 2006 9:36 am

Codice: Seleziona tutto: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html dir="ltr"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta name="language" content="en-us" /> <meta name="author" content="" /> <meta name="abstract" content="" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <style type="text/css"> html, body { height: 99%; } div#logo { background: url(immagine;); border: 1px solid #f00; margin-bottom: 10px; height: 30px; width: 75px; } div#form { border: 1px solid #00f; float: right; height: 40px; margin-bottom: 10px; width: 150px; } div#head { background: #0f0; margin: 0 auto 10px; width: 100%; } div#main { border: 1px solid #ccc; height: 85%; margin: 0 auto 10px; padding: 10px; width: 760px; } div#cosoviolachenoncapiscocosasia { background: #f0f; float: right; height: 300px; width: 80px; } div#foot { background: #008080; clear: both; float: bottom; width: 100%; } </style> </head> <body> <div id="form">form</div> <div id="logo">logo</div> <div id="head">head</div> <div id="main">main <div id="cosoviolachenoncapiscocosasia">coso viola che non capisco cosa sia</div> </div> <div id="foot">footer</div> </body> </html>

da **ssjx** » dom ott 29, 2006 9:49 pm

grazie Boo per l'aiuto ma mi sa che non hai letto l'ultimo messaggio [fischio]

Ricapitolando: tutti i problemi del layout tableless li ho risolti.

Adesso mi interessa sapere questo

ssjx ha scritto:Ora invece la cosa che non sto riuscendo davvero a capire (ma spero davvero che l'errore sia mio perché sennò IE è più chiavica di quel che pensavo) è se realmente in IE non è possibile impostare una altezza di 10px per un div ............... in Opera e FF tutto OK ma in IE sembra che l'altezza minima x un div sia sui 30px (cioè anche se io imposto 10px lui me lo visualizza più grande)

Mi potete dare una qualche conferma in merito?

da **Boo** » dom ott 29, 2006 10:03 pm

Allora per IE6 dovrebbe essere

Codice: Seleziona tutto: * html .classe {height: 30px;}

Per IE7 semplicemente min-height

Codice: Seleziona tutto: .classe {min-height: 30px;}

da **ssjx** » lun ott 30, 2006 10:38 am

no Boo non mi hai capito

io non devo impostare un'altezza minima, voglio semplicmente che un determinato div abbia una altezza di 10px

Eppure anche se imposto .classe {height: 10px;} IE non riesce a visualizzarlo più piccolo di 30px (mentre Opera e FF lo visualizzano correttamente alto 10px)

Quindi come si fa in IE a visualizzare un div alto 10px?

da **Boo** » lun ott 30, 2006 12:00 pm

Quello è un bug di IE6 che in IE7 è stato risolto, prova ad impostare un max-height per il momento.

da **Pacopas** » lun ott 30, 2006 12:23 pm

Per prima cosa scusa il ritardo comunque io non sono riuscito a trovare il modo per ovviare a questa mancanza di ie, a dire il vero non me ne sono mai accorto visto che ho abbandonato da tempo la spazzatura e non essendo un web master posso ignorare le sue pecche.

credo che non esista un metodo comunque come sempre aspetto smentite.

[:-D]

ps.

posso chiederti un piacere personale? mi mandi il codice finale del tuo layout? curiosità e poi sono sicuro che potrei imparare cose nuove da te. sempre se ti va puoi farlo in pm se non vuoi pubblicamente grazie.

da **ssjx** » lun ott 30, 2006 3:54 pm

Boo ha scritto:Quello è un bug di IE6 che in IE7 è stato risolto, prova ad impostare un max-height per il momento.

azz allora è davvero più chiavica di quanto pensassi [:p]

............. a questo punto mi sa che dovrò risolvere annidandolo in un altro div e dando un padding di 10px (nn ho ancora provato ma forse funziona)

Pacopas ha scritto:posso chiederti un piacere personale? mi mandi il codice finale del tuo layout? curiosità e poi sono sicuro che potrei imparare cose nuove da te. sempre se ti va puoi farlo in pm se non vuoi pubblicamente grazie.

mi sa che mi stai davvero sopravvalutando comunque nessun problema a postare il codice (per altro piuttosto semplice ed ancora essenziale visto che sto solo realizzando il layout generale)
Prima di arrivare a qualcosa di decente comunque mi sa che passerà parecchio visto il tempo limitato che riesco a dedicare alla cosa

Codice: Seleziona tutto: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link href="css/style.css" rel="stylesheet" type="text/css" />  </head> <body> <div id="container"> <div id="header"> <div id="top"></div> <div id="logo"> <div id="login">Form per il login</div> </div> </div> <div id="navigation"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Forum</a></li> <li><a href="#">About</a></li> </ul> </div> <div id="container2"> <div id="menu"> <div> <div class="label">Label</div> <ul> <li><a href="#">link</a></li> <li><a href="#">link2</a></li> <li><a href="#">link3</a></li> </ul> </div> </div> <div id="content">Contenuti</div> </div> <div id="footer">footer</div> </div> </body> </html>

Ed ecco il foglio di stile:

Codice: Seleziona tutto: html, body { margin: 0; padding: 0; width: 100%; height: 100% } body { font-family: Verdana,Arial,Helvetica,Lucida,sans-serif; text-align: left; background-color: #EFF0F2; } div#container { height:100%; width: 100%; min-width: 760px; } div#header { width: 100%; height: 100px; background-color: #EFF0F2; } div#top { width: 100%; } div#logo { background-color: transparent; background-image: url(../images/logo.jpg); background-repeat: no-repeat; width: 100%; height: 100px; } div#login { float: right; width: 350px; } div#navigation { clear: right; text-align: center; width: 100%; height: 28px; background-color: #f7f8f9; background-image: url(../images/bg_nav.gif); } div#navigation ul { margin: 0; padding: 0; list-style-type: none; } div#navigation li { display: inline; padding-left: 5px; padding-right: 5px; } div#navigation a { color: #003333; text-decoration: none; } div#container2 { width: 760px; margin: auto; } div#menu { float: right; width: 130px; margin: 30px 40px auto auto; } div#menu ul { list-style-type: none; padding: 0 0 0 0; margin: 0 0 0 0; } div#menu li { border-bottom: 1px solid #C20000; background-color: #EEEEEE; font-size: 13px; text-align: left; } div#menu li:hover { background-color: #C20000; } div#menu .label { color: #C20000; } div#menu a { text-decoration: none; color: #ffffff } div#content { background-color: #ffffff; } div#footer { bottom: 0; width: 100%; clear: right; text-align: center; }

Se hai qualche suggerimento ovviamente è sempre ben accetto [:-D]

PS
il div a cui volevo assegnare una altezza di 10px è il TOP

da **Pacopas** » lun ott 30, 2006 6:30 pm

grazie del codice
a dire la verità credo andrebbe testato (cosa che ancora non ho potuto fare)

forse c'è qualche warning sui colori di sfondo ma non sono certo di questo ma facilmente modificabile non ricordo bene le specifiche a riguardo.

probabilmente il footer non ti andrà in fondo alla pagina

Codice: Seleziona tutto: bottom: 0;

non basta, dovresti aggiungere

Codice: Seleziona tutto: position: absolute; bottom: 0;

sei sicuro che non ti collassi il label a risoluzioni minori?

per il div top e i problemi con ie (che dio me ne scampi) non saprei proprio

con buona probabilità sbaglio io ma ho dato una lettura molto veloce.
ciao e grazie ancora

da **ssjx** » lun ott 30, 2006 7:02 pm

Pacopas ha scritto:forse c'è qualche warning sui colori di sfondo ma non sono certo di questo ma facilmente modificabile non ricordo bene le specifiche a riguardo.

No vabbè questa è una cosa di cui sono consapevole ............. tieni conto che al momento quello che mi interessa è creare una struttura completa e stabile e compatibile con tutti i browser e con le specifiche W3C ............. dei dettagli me ne occuperò alla fine

Pacopas ha scritto:probabilmente il footer non ti andrà in fondo alla pagina
Codice: Seleziona tutto
bottom: 0;

non basta, dovresti aggiungere
Codice: Seleziona tutto
position: absolute; bottom: 0;

No per il moemnto con quel codice funziona grossomodo come volevo ............ però lo devo ancora testare a fondo con i vari browser e cambiando il contenuto della pagina per vedere come si comporta ............ tieni conto comunque che quel position: absolute; l'ho dovuto eliminare perché mi dava troppi problemi (in effetti pensavo anch'io che andava messo ma provandolo non va [boxed]

)

Pacopas ha scritto:sei sicuro che non ti collassi il label a risoluzioni minori?

per il div top e i problemi con ie (che dio me ne scampi) non saprei proprio

con buona probabilità sbaglio io ma ho dato una lettura molto veloce.
ciao e grazie ancora

In che senso? ........... la classe label l'ho creata solo per assegnare un colore via CSS al testo di un elemento, nn è un contenitore

PS
comunque tieni conto che già questo pomeriggio ho fatto svariate modifiche e quel codice è ormai molto diverso da quello attuale .............. quando finisco (nn vedo l'ora) magari posto tutto il risultato finale per vedere cosa si può cambiare

da **Pacopas** » lun ott 30, 2006 7:26 pm

ho copiato e incollato il codice e sul portatile (1024x768) lo vedo così (allegato)

per il footer lo risolvo con il pezzetto di codice il "label" intendo il pezzetto del menu con la scritta label mi va sotto contenuti ma forse e lì che deve stare.

fammi sapere
(forse ti sto creando più problemi che altro [boxed]

)

da **ssjx** » lun ott 30, 2006 9:15 pm

si per il momento Label mi va bene così ............... x adesso sono molto più concentrato sull'impostazione generale della pagina (Header, Footer, Conteiner2 e Navigation)

Quando riuscirò a finalizzare questi elementi per una resa ottimale su qualsiasi piattaforma/browser/risoluzione/echipiùnehapiùnemetta passerò al corpo centrale (che poi a quel punto si tratterebbe solo di personalizzarne la grafica)

Per il footer devo fare un po' di test per vedere se fa quello che penso che faccia o no

Pacopas ha scritto:(forse ti sto creando più problemi che altro )

skerzi? magari avessi sempre qualcuno così disponibile [beer]

da **Pacopas** » lun ott 30, 2006 10:07 pm

no problem [:-D]

www.MegaLab.it

Problemi layout tableless

Problemi layout tableless

Chi c’è in linea