Salve a tutti.
Avrei bisogno di realizzare una pagina con un layout come questo:
in cui c'e' un rettangolo grigio che contiene un rettangolo nero ed uno giallo. A sua volta il rettangolo nero contiene un rettangolo rosso con dentro del testo.
Tre cose sono importanti:
1. il rettangolo rosso deve avere le barre di scorrimento qualora il testo ecceda:
2. il rettangolo rosso deve essere allineato a destra rispetto a quello nero.
3. La larghezza del rettangolo rosso deve essere 50 pixel inferiore rispetto a quella del rettangolo nero, INDIPENDENTEMENTE dalla larghezza del rettangolo nero e dalle dimensioni del contenuto del rettangolo rosso
sono riuscito ad ottenere il risultato di cui ho bisogno con il seguente codice:
codice:<html> <body style="margin:0"> <div style="position:relative; background-color:#DDD; width:450; height: 450; overflow:hidden"> <div style="position:relative; background-color:#000; width:80%; height: 150; overflow:hidden"> <div style="position:absolute; top:100px; left:50px; right:0px; bottom:0px; overflow:auto; background-color:#F00;"> testo lungo testo lngo testo lungo testo lungo testo lngo testo lungo testo lungo testo lngo testo lungo testo lungo testo lngo testo lungo testo lungo testo lngo testo lungo testo lungo testo lngo testo lungo testo lungo testo lngo testo lungo testo lungo testo lngo testo lungo </div> </div> <div style="position:relative; background-color:#FF0; width:90%; height: 150; overflow:hidden"> </div> </div> </body> </html>
Questo codice funziona bene con google chrome e con firefox, ma da' problemi con Internet explorer. In particolare, ottengo un layout come quello qui sotto, in cui scompaionole barre di scorrimento e la larghezza del rettangolo rosso si adatta al contenuto.
Che cosa dovrei fare per ottenere il layout desiderato anche su IE8?
Rispondi quotando
