Aiuto div con css

lostboy

Aiuto div con css

Salve a tutti, innanzitutto grazie per i consigli che mi darete se possibile, e ottimo forum, almeno dalle discussioni che lo tetto fin'ora.
Oltretutto me lo hanno consigliato da Netsons.org, che non sapevano come risolvere il probl.

Ho un layout con un header, una pagina centrale divisa in content e sidebar sul lato sinistro, e un footer.

Il mio problema è che non riesco, utilizzando il mio css, ad inserire una div in mezzo a content e a sidebar...
Qualcuno può aiutarmi?La div che voglio creare si chiama separa, ed ho già iniziato la dichiarazione..Solo che dovrei ridimensionare nel contempo le altre div ma non riesco a ottenere il risultato corretto..

Inoltre vorrei fare un contorno di div al mio layout, non solo tra la content e la sidebar, ma un bordo di div(contententi immagini) che circondi tutta la content (tutta la fascia centrale, compresa al sidebar), e i bordi esterni laterali dell'hader e del footer...

In pratica una cornice esterna laterale sinistra e laterale destra per l'intera lunghezza del sito, e cornice orizzontale per tutta la lunghezza del sito che separi la content sopra e sotto rispettivamente dall'header e dal footer..

Allego il codice del css, grazie sin d'ora per tutto il supporto

impostazionidi layout /
body,
html{
margin:0;
padding:0;
}
body {
min-width:720px; / Prevent content from becoming unreachable in Gecko /
}
/ position:absolute for all browsers - the whole page scrolls /
div#headerwrap {
position:absolute;
width:100%;
top:0;
left:0;
height:150px;
}
/ position:fixed for modern browsers - header and footer do not scroll */
body>div#headerwrap {
position:fixed;
}
div#header {

height:140px;
width:720px;
margin:0 auto;
}
div#separa {
}
/* set a left margin to compensate for IE/Win always making room for a scrollbar /
div#middlewrap {
/ set left margin and bottom padding for IE5/Win /
padding:140px 0 0 0;
margin-left:0;
/ set left margin and bottom padding for others /
voice-family: ""}"";
voice-family:inherit;
margin-left:16px;
padding-bottom:70px;
}
/ set left margin for modern browsers /
body>div#middlewrap {
margin-left:0;
}
div#middle {
width:720px;
margin:0 auto;
}
div#sidebar {
width:180px;
float:right;
}
div#content {
padding:0 10px;
margin-right:180px;
}
/ no positioning for IE5/Win - the whole page scrolls */
div#footerwrap {
width:100%;
p\osition:absolute;
bottom:0;
left:0;
height:70px;
}
body>div#footerwrap {
position:fixed;
}
div#footer {
height:70px;
width:720px;
margin:0 auto;
}

laburno

@lostboy said:

Ho un layout con un header, una pagina centrale divisa in content e sidebar sul lato sinistro, e un footer.

Il mio problema è che non riesco, utilizzando il mio css, ad inserire una div in mezzo a content e a sidebar...
Qualcuno può aiutarmi?La div che voglio creare si chiama separa, ed ho già iniziato la dichiarazione..Solo che dovrei ridimensionare nel contempo le altre div ma non riesco a ottenere il risultato corretto..

Non so se ho capito.

Vuoi un div tra due colonne per fungere da sepratore? Nel caso è molto più comodo utilizzare il padding e il margin di sidebar e content, no?

Oppure vuoi trasformare il tuo layout da bi-colonnare (:D) a tri-colonnare()?
Una soluzione potrebbe essere quella di includere sidebar dentro una div, diciamo "blocco_sinistra", dare a sidebar il float:left e inserire un altro div dentro "blocco_sinistra" (il tuo divisore) e dargli float:right.

lostboy

Allora : io vorrei fare un bordo di immagini tutto attorno al content e alla sidebar esterno, sia orizzonale, che verticale;Poi lo stesso vorrei fare col footer ( ma solo laterale sinistro e destro), e idem come per il footer anche per l'header..Ora la domanda era : mi conviene fare delle div, oppure fare uno sfondo apposta per gli elementi che simuli i bordi ecc.?

laburno

Allora vediamo di chiarire meglio...

Allego un immagine di esempio: tu vuoi ottenere una cornice come quella bordata di nero?

lostboy

Emh non sono bravo con Paint, :-), ma è così che se possibile vorrei che risultasse...

Ovviamente mantenendo tutto del css originale, che risulta compatibile con firefox, i.e. 7, (i.e. 6 e 5 in teoria)..

Grazie del supporto fin'ora, speriamo mi aiuti :-)...

laburno

Ok, vediamo di arrivare ad una soluzione.

Non conosco l'HTML delle tue pagine (se lo posti è meglio) quindi la soluzione che ti offrò potrà risultare approssimativa

Puoi provare a fare queste cose (sostituisci N con il relativo spessore che vuoi dare al bordo):

Dare border: Npx; agli oggetti div#header e *div#footer. *Questo contornerà il footer e l'header.
Dare border-left: Npx; all'oggetto *div#sidebar. *Questo mette il bordo solo a sinistra della sidebar, quindi sul lato sinistro del tuo layout.
Dare border-right: Npx; all'oggetto *div#content. *Come sopra, ma sul lato destro.Leggendo solo il CSS non posso dirti se il risultato è esatto al 100%. Non so ad esempio se ci sono elementi di spaziatura tra un div l'altro che potrebbero disconnettere i bordi.

Tu comunque prova, e se non va, postaci anche l'HTML

laburno

Mi sono accorto di una cosa sul CSS.... ma la sidebar è a sinistra come hai detto o a destra?

Perchè div#sidebar ha il float:right e div#content ha margin-right:180px

Nel caso inverti la posizione del border (mettilo a detsra sulla sidebar, e a sinistra sul content)!

lostboy

Mi sa che abbiamo frainteso..Io onn voglio dei brodi, ma delle div che facciano il bordo..Così poi le riempio con le immagini, e fanno la grafica di contorno

laburno

Gh

Allora la soluzione è un po più complicata, e comporterebbe la riscrittura di buona parte del CSS...

Ora sto uscendo, se ti interessa dopo posto qualche idea.

lostboy

Si, a me interessa infatti riammodernare il css, ma mantenendo la cmopatibilità, e le misure...Grazie mille se mi aiuti

laburno

Ti dico la prima soluzione che mi viene in mente, sicuramente ce ne sono altre migliori... ma vista l'ora

Dunque. Presumendo che i div Header, Sidebar, Content e Footer non abbiano un immagine di sfondo: l'idea è quella di applicare degli sfondi ripetuti, oppurtanamente posizionati, tali da apparire come cornici grafiche.
Ad esempio ti crei il pattern verticale della tua cornice (patternverticale.gif) e dai al div Content il seguente attributo:

background: #FFFFFF, patternverticale.gif, top left, repeat-y;

In questo modo si dovrebbe replicare l'effetto della cornice a sinstra. Lo stesso discorso, ma con posizioni scambiate, vale per Sidebar.

Invece per Header e Footer, che dovrebbero avere dimensioni fisse, crei un immagine di sfondo incorniciata con la tua cornice, delle stesse dimensioni delle div. Ad esempio se Header è 720x140px, crei un'imamgine 720x140px incorniciata e la imposti come background-image per Header.

Spero di avere finalmente centrato il problema!

lostboy

Anche io avevo fatto così, ma a 1280x1024 è perfetto, mentre le immagini alle altre risoluzioni fanno cesso..

lostboy

Mi puoi aiutare?

laburno

Ciao!
Mi ero perso la risposta.

Che significa che ad altre "risoluzioni fanno cesso"?

Hai una pagina online da vedere, per capire meglio?

lostboy

http://rapidshare.com/files/8420893/ex.rar.html

é di un po di gg fa, ma dovrebbe redere l'idea..Comunque a me servono proprio le div, non è che mi aiuteresti a farle per favore?

Intendo quelle in + al layout di adesso, quelle solo dedicate alla grafica...

lostboy

Un grande aiuto me lo daresti moltissimo se come prima cosa fossi in grado,gentilmente, di modificare il css in modo da non avere solo 2 div (conte e sidebar) orizzontalmente affiancate come adesso, ma a me servirebbero 5 div (bordo sx, content, bordo centrale,sidbar, bordo dx)..Mi aiuteresti una casino..
Grazie mille e scusa per lo scazzo ennesimo

lostboy

emh ci sei ankora?

lostboy

Help Me!!!!!

laburno

@lostboy said:

Un grande aiuto me lo daresti moltissimo se come prima cosa fossi in grado,gentilmente, di modificare il css in modo da non avere solo 2 div (conte e sidebar) orizzontalmente affiancate come adesso, ma a me servirebbero 5 div (bordo sx, content, bordo centrale,sidbar, bordo dx)..Mi aiuteresti una casino..
Grazie mille e scusa per lo scazzo ennesimo

Ok, allora fai un div che contenga le tue 5 cinque div (wrapper) e inserisci le 5 div con il float:left e dai le dimensioni in modo tale che la somma totale non superi il width del wrapper.

Faccio un esempio:


#wrapper {
    width:720px;
}
#uno {
    width:144px;
    float:left;
}
#due {
    width:144px;
    float:left;
}
#tre {
    width:144px;
    float:left;
}
#quattro {
    width:144px;
    float:left;
}
#cinque {
    width:144px;
    float:left;
}

E l'html:


<div id="wrapper">
  <div id="uno">1<br><br><br><br></div>
  <div id="due">2<br><br><br><br></div>
  <div id="tre">3<br><br><br><br></div>
  <div id="quattro">4<br><br><br><br></div>
  <div id="cinque">5<br><br><br><br></div>
</div>

Occhio che nella somma totale devi considerare i margini ed evntualmente il padding di ogni singolo div. Se al div uno dai width:144 e margin:3 la dimensione che ottieni è 144+3+3=150.

Se sfori la dimensione del wrapper, le div in eccesso vanno a capo.

Inoltre tieni presente che IE interpreta diversamente il Box Model rispetto agli standard e quindi dopo che hai calcolato le dimensioni, dovrai adattare il tuo foglio di stile. :bho:

Se permetti un consiglio non penso che usare 5 div in questa maniera sia una buona soluzione (considerando la noia di adattare il CSS a IE!). Secondo me, lavorare con il background come ti avevo suggerito prima è un idea migliore.

lostboy

No il mio css per fortuna funzia sia coin i.e. 7, sia con i.e. precedenti, sia con mozilla...

Avrei un po di consigli da chiederti se hai tempo..Grazie mille intanto per sopra...Alla fien ho capito che era per i padding ecc che sforavano a capo..

Ora ho 2 problemi : uno, come fare a fare si che le div bordo si riempiano dinamicamente in base alla risoluzione : es : a 1280x1024, devo mettere na decina di br (con lo sfondo che fa repeat-y), ma a 1024x768 invece quei 10 br sono troppi e fa apparire lo scollbar..Come faccioa fare si che, come per l'orizozntale, che invece funziona, anche il verticale ridimensioni la grafica ecc in base alla risoluzione?Perchè io, dopo avere l'header, il footer fissi, piacerebbe tenere bordo sx verticale fisso, content scrollabile, bordo centrale verticale fisso, sidebar scrollabile, bordo dx verticale fisso...

é possibile?

Grazie mille, se passi in trentino la birra di supporto è tua