Problemi con i div per le "colonne"

[Nasir]

Salve ragazzi è la prima volta che scrivo e proprio oggi mi sono registrato, vi ringrazio anticipatamente e vi pongo subito il mio problema:

Sto realizzando il mio sito personale in html/CSS e sto avendo ora un pò di difficoltà coi div ed eccovi il foglio di stile:

body, html {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: oblique;
color: #000000;
background-image:url(images/background.gif);
background-repeat:repeat-x;
background-attachment:fixed;
margin: 0px;
}

#contenitore {
background-color: #FFFFFF;
margin: auto;
padding-top:5px;
height:100%;
width: 800px;
}

#content {
background-color: #ccc;
background-position:center;
position:relative;
height: 100%;
width: 780px;
margin:auto;
margin-top:15px;
}

#header {
background-color: #FFFFFF;
background-position:center;
position:relative;
height: 250px;
width: 760px;
margin:auto;
}

#Contenuto1 {
color: #000;
background-color: #FFFFFF;
margin:0px;
padding-top:20px;
padding-left:20px;
padding-right:5px;
float: left;
height: 850px;
width: 550px;
}

#Contenuto2 {
color: #000;
background-color: #FFFFFF;
margin:0px;
padding-top:20px;
padding-left:20px;
padding-right:5px;
float: right;
height: 850px;
width: 550px;
}

#footer {
position:relative;
background-color: #666666;
clear:left;
margin:0px auto;
height: 125px;
width: 760px;
padding:0px;
background-position:bottom;
background-attachment:fixed;
background-repeat:no-repeat;
}

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

Volevo sapere come gestire il "Contenuto1" e il "Contenuto2" visto che sono due colonne che devono scorrere in verticale affiancate alla "colonnasx" che è un'immagine che sfuma nel bianco mentre nei "contenuti 1 e 2" ci sono immagini che vanno una sotto l'altra e che sono anteprime dei due siti che ho realizzato e con i collegamenti <a href> ai link, così come è scritto il codice dei fogli di stile mi trasforma tutto il layout facendo un macello assurdo...quindi per ora sn riuscito solo a posizionare come volevo io il "Contenuto1"...

Scusate se ho scritto troppo e spero di essere stato chiaro!

 

[borgo italia]

ciao
posso dirti come faccio io, anche se non so se è il sistema migliore.
io utilizzo le dimensioni assolute in px, evitando il mergin e il padding che spesso fanno quello che vogliono tra ie e fire.
a parte body e html ti faccio un es.

#contenitore{
position: absolute;
width: 1000px;
height:100%; /* o misura in px*/
left: 50%;
/*se height non 5 metto top 50%*/
margin-letf: -500px;/* meta della largezza negativo*/
/* margin-top: -1/2 height se non %*/
/*
in questa maniera centro il contenitore nello schermo,
è l'unico punto i cui uso margin
....tutti gli altri parametri....
*/
#testata{
position:absolute;
width=1000px;/*se larga come il contenitore*/
heght:60px;
top: 0px;
left:0px;
/*a filo del contenitore*/
}

#colSx{
position: absolute;
width: 200px;
heght: 400px;
top: 60 px;/*posiziona sotto testata*/
left: 0px; /*tutta aSx*/
owerflow:auto;/*se contenuto più lungo barre scorrimento*/
}

ecc..ecc. posizionando tutto a px

(errori di ortografia perdonati)

 

[Nasir]

Ciao grazie per l'aiuto solo che non ne riesco a venire a capo e non ho capito alcune cose che hai scritto, scusami potresti farmi capire meglio, grazie ancora per l'aiuto e per la collaborazione!

 

[borgo italia]

ciao
il concetto che uso è questo, all'inteno del div contenitore (ipotesi 100x500px centrato sempre sullo schermo)
#contenitore{
position: absolute;
width: 1000px;
height:500px;
left: 50%;
top:50%
margin-letf: -500px;/* meta della largezza negativo*/
margin-top: -250px;;/* meta dell'altezza negativo*/
/*
in questa maniera centro il contenitore nello schermo,
è l'unico punto i cui uso margin
....tutti gli altri parametri....
*/
}
#testata{
position:absolute;
width=1000px;/*larga come il contenitore*/
heght:60px;
top: 0px;
left:0px;
/*a filo del contenitore, spigolo alto sx coincide co spigolo alto sx del contenitore*/
}

#colonnaSX{
position:absolute;
width: 300px;
height: 380px;/*alt cont - alt testata - alt piede*/
left: 0px; /*appoggiata a sx sul bordo del contenitore*/
top: 60px;/*a 60 px del bordo alto contenitore spazio per testata*/
}
gli altri div contenuti e colonna dx, la somma delle laghezze dei tre div colonna sx contenuti e colonna dx = larghezza contenitore, tutti con stessa altezza mettendo ove serve owerflow auto per far apparire la barra di scorrimento se necessaria

finisco co
#piede{
position:absolute;
width: 1000px;
height= 60 px;
left 0px;
top 540px;/* 6o per testata e 380 per resto
}





al suo inteno metto tutti gli altri

<div id="contenitore">
<div id=testata">
bla...bla...bla...
</div>
<div id="colonnaSx">
bla...bla...bla...
bla...bla...bla...
bla...bla...bla...
</div>


<div id="piede>
bla...bla....bla...
</div>
</div>

l'unica cosa che serve è molta pazienza per calcolare la posizione di un div in funzione degli altri in modo che non si sovrappongano

non so se mi sono spiegato, casomai sono qui

 

[Nasir]

Ciao borgo italia scusami se ti risp ora ma non ho avuto la connessione in questi giorni per cui sono stato fermo, cmq ho risolto a modo mio, sono stato lì a sbatterci la testa però ci sono riuscito grazie mille ancora e se avrò problemi non esiterò a contattarti!

A presto :fonzie:

 

[Nasir]

<br> strani tra internet explorer e mozilla firefox

Ciao ragazzi ora però ho un problema per quanto riguarda le miei immagini e in particolar modo la spaziatura tra un'immagine e l'altra, nel senso che i due browser non corrispondono uniformemente, vi spiego:

Es.
<div id="Contenuto2"><img src="img nuove/titoloprogetti.film.jpg" alt="progetti film">
<br>
<br>
<div class="immaginiLavoro2">
<img src="lavori grafica/L'altro-per-web2.jpg" alt="L'altro (storia di ordinaria xenofobia)_regia di Ciro D'Emilio">
</div>
<div class="immaginiLavoro2">
<img src="lavori grafica/strade-parlano-locandina_A3.jpg" alt="E' strade parlano video_regia di Ciro D'Emilio">
</div>
<div class="immaginiLavoro2">
<img src="lavori grafica/prossimafermata.jpg" alt="Prossima fermata_regia di Giuseppe Tuccillo">
</div>

</div>

In questo caso explorer mi legge entrambi i "<br>" come spazio a capo tra il "titolo" e le "immagini", mozilla invece no, è come se leggesse solo un "a capo" invece che due rispetto al codice.

Se qualcuno può rispondermi mi fa molto piacere e ne sono grato!

 

[borgo italia]

ciao
prova nel css a dare alla classe mmaginiLavoro2 un

margin-top: XYpx;
margin-bottom: XYpx;

se non funzia sia su ie che ff prova a dargli anhe il padding
s'intende togliendo i <br>

 

[Nasir]

Ciao borgo grazie mille ho risolto creando un nuovo div class "titoloLavoro" e con un attributo "margin-bottom" e ho risolto cmq sempre gentile e disponibile