Problema livelli (si forma una specie di bordo)

[Shinji 89]

Salve a tutti questo è il mio primo topic e spero di non sbagliare niente . Da qualche tempo ho deciso di rendere il mio sito xhtml 1.1 corretto. Ho letto qualche guida sul sito ma ho comunque riscontrato alcuni problemi in particolare 2:

- Questo codice

<div id="Last">
[img]immagini/index_02.jpg[/img]
<div id="Manga">
[img]manga.jpg[/img]
</div>
<div id="Sub">
Ciau
</div>
</div>

(con questo css):
div#Last{
width: 603px;
height: 132px;
}

div#Sub{
width:388px;
height:66px;
padding-left: 115px;
padding-top: 23px;
float:right;
}
div#Manga{
width:97px;
height:64px;
padding-left: 7px;
padding-top: 30px;
float:left;
}

Non produce l'effetto che desidero cioè posiziona soltanto il primo lvl (manga) invece sub viene spostato sotto è non c'è modo di metterlo al suo posto

- Il secondo problema, è che si crea un effetto "bordo invisibile" tra il livelli contenuti,navagiazione,footer.

Per farvi capire bene quali sono i problemi vi lascio il link alla pagina così potrete dare un'occhiata al codice e magari darmi qualche suggerimento:

http://www.advancedkiller.it/Altro/divlay/index.php

Vi chiedo scusa se ho commesso errori

[OFF] PS ma perchè il sito è diventato così lento per aprire una pagina ci metto 20 secondi[/OFF]

[webdemo]

sposto in CSS

ciak

[Mich_]

Prima di sistemare il CSS, devi pero` sistemare il codice XHTML.

La pagina e` dichiarata XHTML 1.1, ma il codice e` adatto a HTML 4 Pero`, se usi XHTML 1.1, non potrai far visualizzare correttamente in IE6 (per incompatibilita` di tale browser con la DTD suddetta).

Ti conviene quindi:
- usare una DTD che conosci (oppure studiare bene le specifiche della DTD);
- fare una validazione del codice (X)HTML.

[Shinji 89]

Con XHTML 1.0 strict invece ? Ho comunque problemi di incompatibilità con IE 6? Con l'xhtml 1.1 ho fatto la validazione è mi da tutto ok ma se mi dici che avrò incompatibilità con ie 6 con il suddetto DTD allora uso qualcos'altro....

Per i problemi che ho con il codice invece ? Qualche suggerimento ?

[Mich_]

Non ha senso correggere il CSS finche` ci sono errori (X)HTML. (validatore HTML)
E non riesci neppure a far girare il validatore CSS.

Comunque il problema di XHTML 1.1 e` che e` obbligatorio il prologo XML (che tu hai saltato), altrimenti non viene riconosciuto nei browser standard.
Invece IE6 interpreta in quirks mode (cioe` non interpreta il DOCTYPE) se c'e` qualsiasi cosa prima del DOCTYPE.

In XHTML 1.0 Strict il prologo e` opzionale, quindi se non lo si mette si riesce a far interpretare (quasi) allo stesso modo tutti i browser (salvo IE5).

---
Tornando al problema della validazione: lo so che il validatore non sempre trova tutti gli errori, ma nel tuo codice salta subito all'occhio che hai inserito del testo e dei tag legati al testo (
) direttamente nei <div>: questo non e` permesso dalla sintassi: occorre un

o altro tag che possa contenere del testo.

----
Altri errori:
1. manca il CSS per il tag html, e manca il width:100% nel html e nel body: vuol dire che il margin:auto del #Container non sa a che margini riferirsi

2. nel #Footer c'e` il clear:right; ma nei blocchi sopra usi anche il float:left: significa che il footer non tiene conto dei blocchi flottati a sinistra

3. mi pare di vedere una struttura semantica molto approssimata: in pratica la suddivisione dei blocchi e` fatta in base a qualche considerazione grafica, non strutturale: al momendo di sistemare i CSS il lavoro diventa molto piu` difficile. Per sistemare i CSS e` molto importante che si rispettata la semantica, altrimenti il lavoro diventa molto difficile, e il risultato cambia da browser a browser

[Shinji 89]

Ho fatto quello che hai detto a parte l'ultima voce...ho tagliato il lay in base a delle esigenze grafiche...non ho idea di come farlo in base alla semantica...magari mi puoi consigliare tu qualcosa.... Dopo aver corretto gli errori che mi hai detto di correggere però il risultato non cambia ci sono gli stessi problemi anzi se ne è aggiunto uno, ho dovuto rinominare la pagina da .php in .html perchè mi dava un'errore php T_STRING (immagino sia dovuto al fatto che interpreta <?xml version="1.1" encoding="UTF-8"?> come a una chiamata al php e non trovando codice php da errore... sarà per questo che nella guida di questo sito dice:
Non è obbligatoria, ma è il suo uso è consigliato dal W3C per tutti i documenti XML.)

Hai idea di degli altri cambiamenti che potrei fare per correggere quei due errori ?

http://www.advancedkiller.it/Altro/divlay/

(il codice aggiornato lo trovi sempre qui)

[Mich_]

Speravo che avessi corretto, ma c'e` ancora:
border="0"
Che roba e`? Non esiste in XHTML Da 1.0 Strict in poi.

Se devi mettere il prologo tramite PHP, dovrai mettere un escape (di solito la backslash) davanti ad alcuni caratteri, tipo <, > ? e sim.
Tieni pero` presente che se metti il prologo XML IE6 interpreta in quirks mode: come dire che tutto lo sforzo di realizzare una pagina moderna serve a poco.

In XHTML 1.0 Strict il prologo e` opzionale, da 1.1 inpoi e` obbligatorio.

Per quanto riguarda la semantca: e` una cosa che si costruisce assieme alla pagina: correggerla e` uno sforzo enorme (occore ripensare daccapo le relazioni che ci sono tra i vari blocchi).

Comuqnue ecco alcuni errori di semantica:
Il menu inserito nelle immagini (come fai poi a metterci un link?)
Gli sfondi che vengono resi con il tag <img> (se sono sfondi, cioe` immagini di abbellimento, che non portano contenuto, devono essere incluse nel CSS con background)

Comunque in quella pagina io ci vedo:
- un container (che racchiude il tutto - e che servira` poi per centrare)
- un header (largo come tutto il container, contenente il menu in alto, il NiponuFanSUb e l'immagine)
- due colonne (vedi dopo)
- un footer (largo 100%)

La colonna destra probabilmente conterra` il menu, mentre la colonna a sinistra e` il contenuto vero. Forse a sua volta e divisa in tre colonne, ma la cosa e` appena abbozzata.

La programmazione semantica richeide che cisacun elemento descritto sopra sia un blocco (<div>), che a sua volta conterra` altri blocchi.
Ogni blocco avra` un nome (identificato dall'attributo id) che dovra` corrispondere al signifiato che ha il blocco stesso.

Se invece imposti la pagina con elementi diversi (nel tuo caso le immagini), non fornisci il corretto significato semantico, e tra l'altro studi un CSS che poi sara` da rifare: un blocco che contiene un'immagine si formatta in modo diverso da un blocco che contiene testo o link.

[Shinji 89]

Grazie mille per l'aiuto che mi stai dando finalmente inizio ad avere qualche risultato! Il problema dei "bordi invisibili" l'ho risolto semplciemento dichiarando nel css che quei livelli che contengono solo immagini hanno come sfondo l'immagine (naturalmente poi dalla pagina ho eliminato il tag <img...). Rimane solo l'ultimo problema non riesco a posizionare il livello sub idee??

Ho aggiornato la pagina come al solito....se ci sono magari altri errori fammi sapere

Per farti capire più o meno come verrà il sito ti do il link alla versione precedente del sito (non xhtml):

http://www.narutofansubber.it

[Mich_]

Come sara` il sito l'avevo intuito.

Pero` stai attento che il sito vecchio risponde male se aumenti il carattere: e` una prova che puoi fare semplicemente, usando le caratteristiche dei browser: basta che batti control + una o due volte.
[nel mio caso, io devo aumentare il carattere didefault del browser, dato che ho impostato il pixel molto piccolo]

Dato che non ti e` dato di conoscere il font che usera` l'utente (il browser puo` sovrascrivere le impostazioni), devi lavorare in modo che aumentando il carattere non ne risenta la formattazione.

Nel tuo sito nuovo, devi anche togliere dalla grafica i menu e tutti i link: questo perche` se uno non carica le immagini non puo` muoversi nel sito: le mappe vanno usate solo in caso di link grafici; non hanno senso incaso di link testuali.
E non puoi aspettare a togliere i link dalla grafica: altrimenti poi ti tocca "metterci pezze", che non e` mai facile.
Il layout va organizzato bene da subito: ti sembra di metterci di piu`, ma il tempo speso ora e` meno della meta` di quello che spenderesti poi.

[Shinji 89]

Dato che non ti e` dato di conoscere il font che usera` l'utente (il browser puo` sovrascrivere le impostazioni), devi lavorare in modo che aumentando il carattere non ne risenta la formattazione.

E na parola....mica posso cambaire tutto il lay non sono manco io il grafico...purtroppo quelli che aumentano la grandeza dei caratteri si dovranno accontentare....(se no ne va della mia salute menatale asd)

Nel tuo sito nuovo, devi anche togliere dalla grafica i menu e tutti i link: questo perche` se uno non carica le immagini non puo` muoversi nel sito

E perchè scusa non dovrebbero caricare le immagini ? e cmq è navigabile anche se non ci sono immagini...e se levo il menù come fanno gli utenti a girare il sito ?

le mappe vanno usate solo in caso di link grafici; non hanno senso incaso di link testuali.

Non capisco...perchè non avrebbe senso?...Ho bigogno che cliccando su determinare immagini si possa andare su altri siti/pagine cosa c'è di male ?


Cmq ho ancora quel problema del livello Sub non è che puoi dirmi dove sbaglio ?