table addiction! layout monolitico

**fatturi** · 20-10-2007, 21:37

ciao forum

sto facendo di tutto per abbandonare la mia dipendenza da tabella, e spero che con i buoni dottori che ci sono qui, di farcela!...

ho provato a leggere la guida che questo grande sito ha pubblicato sui CSS, e penso che il layout monolitico fa al caso mio, ma non riesco ad adattarlo alle mie esigenze:

vediamo, sono partito da qui: http://css.html.it/guide/lezione/60/layout-monolitico/

per le mie esigenze ho da mettere una gif 780x43 al top del sito;
poi ho da mettere una gif 780x102 sotto a questa;
quindi una barra di navigazione con colore gradiente di altezza 28;
ed infine una chiusura con una gif 780x18;

poi devo avere lo spazio "content"

ed infine chiudere il tutto con una gif footer 780x67.

dalla guida ho preso il minimale CSS ed ho dichiarato altri due div id rispetto all'esempio

<body>
<div id="container">
<div id="top"></div>
<div id="header"></div>
<div id="navigation"></div>
<div id="chiusura"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>

ho quindi provato a specificare le cose:

in accordo con l'esempio:

html,body{margin:0; padding:0}
body{font-family: arial,sans-serif; font-size: 76%}

div#container{ width: 780px; margin: 0 auto; text-align: left; }

div#top{background: url(images/top.jpg) no-repeat top center;}
div#header{background: url(images/header_it.jpg) no-repeat top center;}
div#navigation{background-color:#000; color: #fff}
div#chiusura{background: url(images/chiusura.jpg) no-repeat top center;}
div#footer{background:url(images/bottom.jpg) no-repeat bottom center;}

insomma, non so dove specificare le dimensioni, o meglio ci ho provato ma non ottengo alcun
risultato!

grazie per l'aiuto....

**Myaku** · 21-10-2007, 13:01

Originariamente inviato da fatturi

insomma, non so dove specificare le dimensioni, o meglio ci ho provato ma non ottengo alcun
risultato!

non ho capito a quali dimensioni ti riferisci.
se, presumo, ti riferisci all'altezza dei div per fare in modo che l'immagine di background sia visibile anche senza contenuti testuali, è sufficiente assegnare:

height: Npx;

N = altezza dell'immagine di background

Cyà

**fatturi** · 22-10-2007, 17:38

intervento D.E.T.E.R.M.I.N.A.N.T.E. perfetto Myaku!

era proprio quello che mancava, nn appena ho specificato l'altezza nelle dichiarazioni sono apparse in tutta la loro altezza!....(prima se ne vedeva una striscetta!)

adesso ho un altro problema, sempre con riferimento all'esempio di cui a questo post, in particolare alla barra "navigation" , a questo punto dovrei inserire tre piccole gif e altrettanto testo, del tipo "home page" "servizi" "contatti", nella barra e' già presente come puoi vedere dall'esempio un background a gradiente e quindi adesso io devo mettere questo testo con relativi collegamenti ipertestuali e queste tre gif, dunque, lo faccio sull'html o posso metterle anche nel foglio di stile e se si come fare?

infine, in generale, sul foglio di stile le immagini le posso mettere solo come backgrond?

grazie per la risposta.

**Myaku** · 22-10-2007, 18:59

Originariamente inviato da fatturi

adesso ho un altro problema, sempre con riferimento all'esempio di cui a questo post, in particolare alla barra "navigation" , a questo punto dovrei inserire tre piccole gif e altrettanto testo, del tipo "home page" "servizi" "contatti", nella barra e' già presente come puoi vedere dall'esempio un background a gradiente e quindi adesso io devo mettere questo testo con relativi collegamenti ipertestuali e queste tre gif, dunque, lo faccio sull'html o posso metterle anche nel foglio di stile e se si come fare?

codice:

ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
}

ul li {
   background: url(percorso/immagine.gif) 5px 5px no-repeat;
}

li {
......
}
ecc.ecc.

dove poi i valori per il posizionamento dell'immagine li setti come ti servono, idem per margin e padding in ul

anche questa discussione potrebbe esserti utile

infine, in generale, sul foglio di stile le immagini le posso mettere solo come backgrond?

grazie per la risposta.

se non fossero sfondi, sarebbero contenuti, e quindi di "competenza" dell'html (<img src=...)

**fatturi** · 22-10-2007, 19:39

myaku grazie...oggi pome ero così euforico che ci ero riuscito a far apparire le immagini sul sito, adesso mi è preso lo scoramento e' un po che studio sui tuoi suggerimenti ma non mi riesce proprio niente....sicuramente a te il codice dirà + di quanto io possa capire...

ti dispiace se focalizziamo l'attenzione sul "navigation" ?

ho provato ad inserire la prima gif che sarebbe una casetta di homepage nel menu, (tutte queste piccole gif sono 19x19 di dimensioni) accanto alle gif vorrei mettere il corrispondente testo, proviamo a farne una, le altre per analogia ci tentero' io...

grazie!

CSS

html,body{margin:0; padding:0}
body{font-family: verdana,arial,sans-serif; font-size: 76%}

div#container{ width: 780px; margin: 0 auto; text-align: left; }
div#top{background: url(images/top.jpg) no-repeat top center;height: 43px;}
div#header{background: url(images/header_it.jpg) no-repeat top center; height: 102px;}
h1{margin: 0;padding:0}

div#navigation{background: url(images/gradient.jpg) repeat top center; color: white; height: 28px;}

ul {
list-style-type: none;
margin: 0;
padding: 0;
}

ul li {
background: url(images/home.gif) 5px 5px no-repeat;
}

div#chiusura{background: url(images/chiusura.jpg) no-repeat top center; height: 18px;}
div#content{padding:0 1.5em}
div#content p{line-height:1.3em}
div#footer{background:url(images/bottom.jpg) no-repeat bottom center; height: 67px;}

--------------------------------------------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
<title>traduzioni inglese italiano francese tedesco translations </title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="HAPedit 3.0">
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
<div id="container">

<div id="top">
</div>
<div id="header">
</div>

<div id="navigation">

<ul>[*]Home page[/list]

</div>

<div id="chiusura">
</div>

<div id="content">

testo testo testo testo testo testo testo testo </p>
</div>

<div id="footer">
</div>

</div>
</body>
</html>

**Myaku** · 22-10-2007, 19:47

Originariamente inviato da fatturi

ti dispiace se focalizziamo l'attenzione sul "navigation" ?

ho provato ad inserire la prima gif che sarebbe una casetta di homepage nel menu, (tutte queste piccole gif sono 19x19 di dimensioni) accanto alle gif vorrei mettere il corrispondente testo, proviamo a farne una, le altre per analogia ci tentero' io...

mi rimane un po' difficile, non avendo gli elementi grafici. Puoi postare uno screenshot di come vedi il layout su Firefox?

ovviamente, nel css devi definire anche lo stile per gli elementi li e a (+pseudoclassi), altrimenti potresti non riuscire a posizionare bene l'icona

**fatturi** · 22-10-2007, 20:11

se ho capito la tua richiesta questo e' uno screen shot della parte superiore:

dapprima c'è una immagine di top, poi c'è l'header (che devo togliere da background perche' come mi dicevi tu non posso metterla come immagine, e poiche' le bandiere devo farle diventare link ho bisogno di usare la proprieta' di map image) e poi come ti dicevo c'è la barra navigation che ha il gradient blu a riempire....

dobbiamo inserire le gif in orizzontale su questa barra di navigazione, potrei anche mostrarti l'url originale con le non accettabili "tabelle" e che sto faticosamente cercando di debellare!

non lo posto questo indirizzo per non violare qualceh regola di questo buonissimo forum che mi ospita...

e allora grazie ancora per la dispo....

**Myaku** · 23-10-2007, 07:52

ok. Per non fare sovrapporre il testo all'icona devi dare un padding-left su li, di modo da distanziarlo dall'immagine di background.

Per allineare la lista in orizzontale puoi usare

li {
display: inline;
}

se hai la necessità di avere invece tutti gli elementi della stessa dimensione, il display-inline non è l'ideale. Fai invece riferimento alla discussione che ti avevo già postato e che ti
riposto

**fatturi** · 23-10-2007, 20:27

sono un paio di ore che cerco di leggere i tuoi suggerimenti myaku, ma sono ancora in alto mare....

ho letto + volte l'esempio su quel thread che gentilmente mi hai postato ed ho provato a fare qualche modifica, ma non riesco ad ottenere niente di quello che vorrei

forse perche' e' in php ma proprio nn riesco ad adattarlo alle mie esigenze??...

mi sarei accontentato anche di questo risultato che e' quello che si vede in questo momento nella versione "a tabelle" del sito che sto cercando di "ripulire da queste odiate tabelle"...

l'allineamento non e' perfetto, ma almeno riuscissi ad avere qualcosa di simile con il mio css e l'html....queste sono le modifiche che ho apportato nella sezione "navigazione-menu":

per il codice html in pratica ho fatto solo di inserire i links...

<div id="navigation">
<ul>[*]Home page [*]link2[*]link3[/list]
</div>

mentre per il CSS ho fatto numerosi tentativi ma infruttuosi

di cui questo a seguire e' l'ultima versione, sempre riguardando la parte "navigation"...

per il fatto che come mi hai detto non mi conviene usare il display in line perche' coem hai intuito sono tutti links della stessa dimensione non l'ho usato e mi sono concentrato sul tuo thread-esempio (di cui mi è piaciuto il fatto di commentare il codice, allora ho inserito anche quello nel mio)...

div#navigation{background: url(images/gradient.jpg) repeat top center; color: white; height: 28px;}

ul {
list-style-type: none; /* toglie il punto-elenco */
margin: 0 auto; /* per centrare */
padding: 0; /* pulisce i padding di default */
}
ul li {
background: url(images/home.gif) 5px 5px no-repeat;
}

ah infine, daccordo che non funziona, ma se testo questo codice con IE ottengo una cosa, DIVERSA da quella di mozilla firefox!! sempre + complicato....

**Myaku** · 24-10-2007, 07:55

riagganciandomi anche io a quel 3d, prova a fare come suggerito da mucu, ovvero di dare la dimensione a ul
se poi riesci a postare man mano degli screen, ci si rende conto meglio.

per quanto riguarda le differenze tra IE e FF, è un fatto noto. IE fa un po' a modo suo, intanto pensa a FF e browser "standard" (Opera, Safari), poi per Explorer rimedi utilizzando i commenti condizionali.

Discussione: table addiction! layout monolitico

Strumenti discussione

Ricerca discussione

Visualizza

table addiction! layout monolitico

Re: table addiction! layout monolitico

Permessi di invio