altezza div e sfondo

[Yassassin]

Ciao a tutti. Sto realizzando il primo lavoro in xhtml + css


sito: http://www.edilbook.it/prova/

problema: la colonna di sinistra e quella centrale dovrebbero riempire la parte restante con il colore del proprio sfondo, come faccio (anche se a lavoro completo il 99% delle volte saranno le colonne esterne a doversi adattare)?

Poi, dando un'occhiata al codice, mi dite se sto lavorando bene o meno?

Grazie

[andrea.paiola]

innanzitutto complimenti per il buon lavoro svolto
per risolvere il tuo problema probabilmente basta dare height:100% ai div menu e contenuto
alcuni consigli:
1) non usare hr per "separare" graficamente i paragrafi... puoi usare nei CSS un padding-top e/o border-top(questo sempre nell'ottica di dividere contenuto e presentazione) oltretutto p è già di tipo block percui va a capo da solo
2) per i titoli usa i tags da h1 a h6 al posto di <span class="titoloservizi">
3) manca appunto il titolo principale della pagina (tag h1) che migliorerebbe l'indicizzazione nei motori di ricerca
4) vedi se puoi diminuire il numero di div con relative classi e id utilizzando selettori contestuali

[carp]

per estendere lo sfondo delle colonna sinistra e centrale, l'unico modo è dare un'immagine di background che si ripete in verticale a #contenitore;

puoi eliminare tutti gli <hr /> da qui:

<p class="testoservizi"><span class="titoloservizi">dizionario tecnico</span>

un contenitore di termini tecnici e giuridici accessibile a tutti.</p><hr />

con:

p {
border-bottom: 1px solid #ccc;
}

[pierofix]

Io avrei un commento da fare al volo. Guardando l'impaginazione noto la claustrofobia caratterizzante i siti di qualche anno fa: tutto stretto e compatto come sardine in un barattolo, senza spazi di respiro e una distinzione chiara delle aree tematiche.

Ecco, tutto qui: io darei più respiro.

[Yassassin]

Originariamente inviato da andrea.paiola
per risolvere il tuo problema probabilmente basta dare height:100% ai div menu e contenuto

no, non va

Originariamente inviato da andrea.paiola
1) non usare hr per "separare" graficamente i paragrafi... puoi usare nei CSS un padding-top e/o border-top(questo sempre nell'ottica di dividere contenuto e presentazione) oltretutto p è già di tipo block percui va a capo da solo
2) per i titoli usa i tags da h1 a h6 al posto di <span class="titoloservizi">

ok. Ho cambiato e va anche meglio così

Originariamente inviato da andrea.paiola
3) manca appunto il titolo principale della pagina (tag h1) che migliorerebbe l'indicizzazione nei motori di ricerca

va bene anche se lo metto in un div nascosto? O cosa mi consigli? Io non so dove ho visto un esempio dove con i css si vedeva un immagine, senza i css invece si vedeva il titolo tra i tag <h1>

Originariamente inviato da andrea.paiola
4) vedi se puoi diminuire il numero di div con relative classi e id utilizzando selettori contestuali

selettori contestuali? :master:

[Yassassin]

Originariamente inviato da carp
per estendere lo sfondo delle colonna sinistra e centrale, l'unico modo è dare un'immagine di background che si ripete in verticale a #contenitore;

puoi eliminare tutti gli <hr /> da qui:

<p class="testoservizi"><span class="titoloservizi">dizionario tecnico</span>

un contenitore di termini tecnici e giuridici accessibile a tutti.</p><hr />

con:

p {
border-bottom: 1px solid #ccc;
}

ho risolto come indicato da andrea.paiola aggiungendo per il titolo il tag h3

[Yassassin]

Originariamente inviato da pierofix
Io avrei un commento da fare al volo. Guardando l'impaginazione noto la claustrofobia caratterizzante i siti di qualche anno fa: tutto stretto e compatto come sardine in un barattolo, senza spazi di respiro e una distinzione chiara delle aree tematiche.

Ecco, tutto qui: io darei più respiro.

diciamo che per il momento deve somigliare molto al suo "superiore" (sito che ho in firma), e quindi uso misure fisse. Poi in futuro magari (rifacendo anche l'altro) cercherò di essere più largo

[Yassassin]

Originariamente inviato da carp
per estendere lo sfondo delle colonna sinistra e centrale, l'unico modo è dare un'immagine di background che si ripete in verticale a #contenitore;

scusa, non avevo visto questo. Ora provo. Però le colonne esterne devono avere uno sfondo diverso da quello centrale. Se lo do a contenitore lo sfondo sarà identico per tutte e tre le colonne... :master:



domanda per tutti:

che differenza c'è nel scrivere (nel css):

div#servizi

con

#servizi

?

[carp]

per la prima dipende dall'immagine,
per la seconda nessuna

[andrea.paiola]

incomincio dal fondo:
la differenza è che il secondo seleziona tutti i tag con quell'id, l'altro solo i div con quell'id

non puoi usare h3 senza usare h2 e h1 e mi raccomando vanno usati nell'ordine corretto
h1 io lo uso una sola volta per pagina (titolo principale) se non vuoi farlo vedere basta nel css:

h1{display:none;}

stessa cosa se vuoi assegnare proprietà di visualizzazione a h2

h2{proprietà}

per esempio
mi sa che mi sono dimenticato una cosa importante: misure dei caratteri in em