- Home
- Categorie
- Coding e Sistemistica
- HTML e CSS
- bizzarrie dei browser
-
Oltre alle immagini, ti conviene postare anche il codice (della pagina e i CSS), sennò non riusciamo a vedere bene i problemi.
ciaO
-
certo... ecco i codici del secondo problema:
xhtml:<p>Federico Prato matricola:296112</p> <a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a>
e questo il css:
div#footer{ padding: 0.5em 20px;/*allinea il testo con i link in navigation*/ background: url(footer.jpg) top left; background-color:#fff; color: #133156; clear:left; float:left; } div#footer p{ display:block; position:absolute; } div#footer a img{ display:block; float:right; border:0; }
-
e questo è quello relativo al primo.
xhtml:<div id="navigation"> <ul> <li id='activelink'>home</li> <li><a href='attivita.php' accesskey='A'>attività</a></li> <li><a href='cucina.php' accesskey='C'>cucina</a></li> <li><a href='sistemazione.php' accesskey='S'>sistemazione</a></li> <li><a href='immagini.php' accesskey='I'>immagini</a></li> <li><a href='prenotazioni.php' accesskey='P'>prenotazioni</a></li> <li><a href='negozio.php' accesskey='N'>negozio</a></li> <li><a href='registrazione.php' accesskey='R'>registrazione</a> </li><li><a href='contatti.php' accesskey='O'>contatti</a></li> <li><a href='arrivare.php' accesskey='M'>come arrivare</a></li> </ul> </div>
e css:
div#navigation{ float: left; margin:0; padding:1em 0; width: 200px; background: transparent; line-height:1.3em; text-align: left; } div#navigation ul{ list-style-type: none; padding:0 5px; } div#navigation li{ padding-left:15px;/*fa spazio all'icona che segnala l'activelink*/ } div#navigation a{ color:#133156; display:block; text-decoration: none; } div#navigation a:focus, div#navigation a:hover, div#navigation a:active{ background-color: #133156; color:#a1baab; } div#navigation li#activelink{ color:#133156; background: url(icona.gif) left center no-repeat; font-weight: bold; text-decoration: none; }
-
Io proverei così... non so se però può andare bene...
<p>Federico Prato matricola:296112</p> <a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict" height="31" width="88" align="right"/></a> ``` e questo il css:
div#footer{
padding: 0.5em 20px;/allinea il testo con i link in navigation/
background: url(footer.jpg) top left;
background-color:#fff;
color: #133156;
}
div#footer p{
text-align:left;
display:block;
}
div#footer a img{
display:block;
border:0;
}Poi ho accorciato anche il css. Mi sembrava ci fossero cose un poco inutili (secondo il mio parere, ma magari mi sbaglio, non conosco l'xhtml).
-
grazie mille... la visualizzazione non è ancora perfetta, ma almeno è la stessa su tutti i browser! il problema maggiore è che l'attributo align non si può usare in xhtml strict... ahimé, per passare l'esame il codice deve essere xhtml strict valido.
tenterò altre vie, se no al diavolo opera!
-
con questo codice funziona quasi bene il footer di cui dicevo prima, ma dà ancora problemi in opera.
<p>agriturismo villar - 2006</p> <a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict" height="31" width="88" align='right' /></a>
div#footer{ padding: 0.5em 20px;/*allinea il testo con i link in navigation*/ background: url(footer.jpg) top left; background-color:#fff; color: #133156; float:left; } div#footer p{ display:block; float:left; } div#footer a img{ display:block; border:0; float:right; }
in pratica il paragrafo è flottante a sx, l'immagine a destra ed il div che le contiene flotta a sinistra per espandersi e contenerle. In firefox ed IE funziona bene, come da standard, ma opera fa questa strana cosa...
[URL=http://imageshack.us]
cioé non carica l'immagine di sfondo del div footer e non fa flottare a destra l'immagine... perché??cry:
-
Magari perchè pensa che il dv deve essere corto.
Prova ad aggiungere width:100% in div#footer.
Un'idea:
Per l'immagine, prova a mettere
margin-left:80% (o un numero in px)
Così, anche se è un espediente, il margine sposterà l'immagine fino a destra. Dovrebbe funzionare, che ne pensi??
-
ottima idea!
così va meglio, in FF e IE funziona, ma opera continua a dare problemi... vabbé, fatti suoi... al limite chiederò al mio prof in sede d'esame.
Grazie!
-
hai provato a metterci nel cod HTML il tag [HTML]<div align="left">[/HTML]:?
-
niente da fare... neanche con div align="right" mi sposta 'sta roba a destra!
è un mistero. oltretutto opera non dovrebbe essere uno dei browser standard per eccellenza?