- Home
- Categorie
- Coding e Sistemistica
- HTML e CSS
- Pagina non cresce
-
Allora,
Purtroppo l'intera struttura del layout è a mio parere errata. Di base ti consiglierei di rivisitarla senza dare ad elementi e zone fondamentali come le due colonne laterali l'attributo "absolute". Gioca magari con i float e le percentuali.Anche perchè inversamente e come ti dicevo prima ti impossibileterebbe la tua richiesta.
Ciao!
-
come si fa?
-
Tu come mi consigli di fare?
-
Ho seguito la guida proposta in questo stesso sito:
http://www.giorgiotave.it/forum/css/54753-layout-izzatore.htmlMi aiuti ad applicarla per tre colonne?
Cioè invece di avere solo- sidebar
- main
Vorrei fare: - menubar
- extrabar
- main
Vanno entrambe prima di main nel codice XHTML?
Inoltre nella guida dice che se voglio la sidebar a destra devo applicare "left-sidebar-wide160" a content, se la voglio a sinistra "left-sidebar-wide160"
E se ne voglio una a destra e una a sinistra?
Grazie per l'aiuto!
-
Per Extrabar cosa intendi?
Innanzitutto devi avere ben in mente cosa far contenere alla tua "scatola".Racchiudi tutto il tuo lavoro in un div "container" , dagli una dimensione fissa o dinamica e al suo interno distribuisci tutto il resto.
Ad esempio:
[html]
<div id="container">
<div id="testa"></div>
<div id="corpo">
<div id="colonna_sinistra"></div>
<div id="contenuto"></div>
<div id="colonna_destra"
</div>
<div id="piede"></div>
</div>
[/html]
-
Per ExtraBar intendo la colonna di destra, quella dei contenuti extra.
Se io nella Testata, quindi div testa voglio mettere immagini sopra ad altre così com'è ora? Tipo il logo o il modulo di ricerca, come faccio?
-
Ponendo che nel div testa andremo a mettere loghi, moduli di ricerca, banner, elemento in flash di presentazione e quant'altro, allora dovremo semplicemente inserircelo in questo modo:
[html]
...
<div id="testa">
<a href="#"><img src="logo.jpg" alt="logo aziendale della ditta ABC" /></a>
<form method="post" id="search_module">
...
</form>
</div>
[/html]
-
Ma se io ho un'immagine di sfondo e voglio sovrapporre il logo e quant'altro, uso il position:absolute?
-
Allora ho fatto così:
Pagina XHTML:
[HTML]<div id="container" class="fixed1000">
<div id="testa"></div>
<div id="corpo">
<div id="menubar">Contenuto x MenuBar</div>
<div id="contenuto">
<div id="rivolto"></div>
Contenuto x Contenuto
</div>
<div id="extrabar">Contenuto x ExtraBar</div>
</div>
<div id="foot"></div>
</div>[/HTML]Codice CSS:
[HTML]body { font-size: 62.5% } /* set 1em to 10px */
#container { margin: 0 auto; text-align: left;}
.fixed1000 { width: 1000px; }#testa { width: 1000px; height: 194px; background: #ffffff url("../../images/header.jpg"); margin: 0 auto;}
#corpo { width: 1000px; background: url("../../images/body.jpg"); margin: 0px;}
#menubar { width: 151px; float: left; margin: 0px 0px 0px 52px;}
#extrabar { width: 151px; float: right; margin: 0px 52px 0px 0px;}
#contenuto { width: 570px; margin-left: 214px; position: relative;}
#rivolto { position: absolute; width: 79px; height: 64px; margin: 0px 0px 0px 501px; background: #FFFFFF url("../../images/rivolto.jpg") no-repeat;}
#foot{ width: 1000px; height: 80px; margin: 0px auto; background: url("../../images/footer.png");}[/HTML]Però si forma uno spazio bianco tra Testa e Corpo, poi, la extrabar si posiziona sotto Contenuto
-
Nada?
-
La pazienza è la virtù dei forti
Se puoi dovresti farci vedere una versione online di ciò che stai realizzando in modo da aiutarci , così è un pò troppo impraticabile.
-
Eccolo online:
http:// www.catanianuoto2000 .it/fin/nuovo/Fammi sapere...
Grazie!!!
-
Il Div contenuto può non avere l'attributo "relative".
Impostalo anch'esso in float:left e togligli il margine laterale.
Inoltre aggiungi nel div "contenuto" poco prima del suo tag di chiusura "</div>" questo tag:[html]
<br class="wrapper"/>
[/html]
con css:[html].wrapper{
clear:both;
width:100%;
}
[/html]Ciò dovrebbe risolverti anche i problemi di visualizzazione rimasti nel div "contenuto".
Il tuo box contenitore è di 1000px ciò vuol dire che le due colonne laterali più il contenuto devono andare a formare, sommando le loro larghezze, questo valore. Ciò è da considerarsi molto importante perchè altrimenti non utilizzeresti a pieno lo spazio da te assegnato tramite il box contenitore.- Ricordati innanzitutto che margini, padding e bordi sono da contare in tale somma.
- Al foot dagli l'attributo "clear:both" e così automaticamente si posizionerà ai piedi del contenuto precedente.
Inoltre un'altra regola: se il tuo container è grande 1000px, allora non importa ripetere questo valore anche per il foot, gli possiamo dare però "width:100%" che equivale al valore sopracitato anche se più dinamico.
-
Inizia a prendere forma...grazie
Ho messo il position:relative al contenuto perchè utilizzo il div rivolto con position:absolute.Ora tutto è in linea, ma come potrete vedere, non si vede più lo sfondo del div corpo
-
Niente, anche con il wrapper che mi hai consigliato non si vede lo sfondo del "corpo"
-
Scusa mi sono sbagliato, il wrapper va al "corpo" non al contenuto.
-
Ah ecco...già ci siamo!!!!
Grazie!!!!
Altro problemino.
Nel link postato prima manca un pezzo di grafica, che posto sotto...
Come potrei incorporarla?
Grazie[URL=http://img254.imageshack.us/my.php?image=headvz7.jpg]
-
Intanto cambia alcune cose:
- Dai delle dimensioni più logiche alle tre colonne. Attualmente non vanno a ricoprire per intero lo spazio che tu gli fornisci tramite il container principale (e cioè 1000px).
Suggerimento:
- Cambia il margine e sostituiscilo con del padding.
- Cambia i seguenti valori width: Menubar a 152px, Extrabar a 154px, Contenuto a 570px.
- Al div contenuto aggiungi **background: url(../../images/rivolto.jpg) top right; e rimuovi il div "rivolto"
** - Aggiungi tale regola in modo da far si che il testo all'interno del div "contenuto" non rimanga appiccicato al bordo della parte centrale:
[html]
#contenuto p{
padding:10px;
}
[/html]
- Dai delle dimensioni più logiche alle tre colonne. Attualmente non vanno a ricoprire per intero lo spazio che tu gli fornisci tramite il container principale (e cioè 1000px).
-
Intanto gentilissimo per gli aiuti che mi stai dando....
Allora il rivolto lì non va bene, tranne che ritaglio diversamente l'immagine, ma poi si vedrebbe l'ombra dell'immagine sottostante e non va bene...Per quanto riguarda quel pezzo mancante che ho postato prima?
Hai idea di come potrei risolvere?
Praticamente manca l'effetto acqua sulla destra e il top della menubar,extrabar e contenuto...
Ciao
Grazi!!
-
Non va bene perchè non hai aggiunto al div contenuto "padding:0 10px;". Aggiungendo questo vedrai che ti sistemerà perfettamente.
Se per quanto riguarda la parte mancante parli degli schizzi d'acqua sulla destra, allora ti basterebbe secondo me fare così:
Ritagli l'immagine dell'acqua mancante e l'aggiungi a quella zona
[html]
#extrabar{
background:url(immagineacqua.jpg) no-repeat top right;
}
[/html]