Problemi con i div per le "colonne"

Nasir

Nuovo Utente
29 Giu 2009
5
0
0
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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.046
150
63
PR
www.borgo-italia.it
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

Nuovo Utente
29 Giu 2009
5
0
0
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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.046
150
63
PR
www.borgo-italia.it
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

Nuovo Utente
29 Giu 2009
5
0
0
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

Nuovo Utente
29 Giu 2009
5
0
0
<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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.046
150
63
PR
www.borgo-italia.it
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

Nuovo Utente
29 Giu 2009
5
0
0
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 ;)
 
Discussioni simili
Autore Titolo Forum Risposte Data
C Dreamweaver cs4 problemi con div Ap HTML e CSS 0
T problemi con dati menu a tendina HTML e CSS 2
M Upload immagine con javascript problemi con FormData() Javascript 1
A Problemi con move_uploaded_file PHP 7
M Problemi con la stampa dei valori in php PHP 1
L Problemi con il login PHP 2
R Tutto su utf-8 ma ancora problemi con i caratteri speciali in mysql MySQL 1
Z problemi con foreach insert into PHP 10
B javascript per problemi con pdf e Safari Javascript 0
M Problemi con creazione maschere Presentati al Forum 1
M Problemi con query a più tabelle PHP 3
S Problemi delle funzioni eliminate con PHP e MySQL PHP 4
M Problemi con blog Grav CMS (Content Management System) 0
S incoerenza di stampa. problemi con il magenta Photoshop 3
A problemi con paypall Java 1
S Problemi con modulo upload video php (help!) PHP 0
felino [Windows 8.1] Problemi con connessione WiFi Windows e Software 0
E [PHP] problemi nuova riga con fwrite su piattaforma android PHP 5
O [HTML] problemi con la regola "background-attachment: fixed" in EDGE HTML e CSS 0
M [PHP] Problemi con query unione PHP 11
M [PHP] Problemi con select PHP 6
ANDREA20 [HTML] problemi con il footer HTML e CSS 1
D [MS Access] problemi con inserimento campo in una maschera MS Access 6
M [PHP] Problemi con il riconoscimento login. PHP 21
A [WordPress] problemi con xampp WordPress 2
M Problemi con database Apache/2.4.37 (Win32) OpenSSL/1.1.1a PHP/7.3.1 PHP 6
S [PHP] problemi con le sessioni PHP 3
T [PHP] problemi con il browser PHP 0
Andrea_Ventura [HTML] Problemi con effetto hover HTML e CSS 5
M [PHP] Problemi con login facebook PHP 0
Andrea_Ventura [HTML] Problemi con visualizzazione Navigation Bar HTML e CSS 10
andreas88 Creare file .htaccess per risolvere alcuni problemi con il tester SEO SEO e Posizionamento 0
Eugene [Joomla] Problemi con modulo per strutture alberghiere JHotelreservation starter Joomla 6
F [PHP] Problemi di base con bot di telegram PHP 9
M [Photoshop] Problemi con importazione immagini trasparenti in indesign Photoshop 0
E [Photoshop] Problemi con dimensioni immagini Photoshop 12
G [HTML] Problemi con inserimento immagini HTML e CSS 7
L Problemi con Javascript e Mustache Javascript 0
G Invio Mail con PHPMailer, problemi SMTP PHP 7
A [Javascript] problemi con javascrip e posizione GPS html5 Javascript 6
D Due problemi con Photoshop... Photoshop 1
G Problemi con pagina online.php di una chat in php PHP 38
S Problemi con impostazioni php PHP 3
P Problemi con AndroidStudio Sviluppo app per Android 0
S Problemi con Dell Precision T5400 Windows e Software 2
F ciao, sono ferro e ho bisogno di aiuto per problemi con la mail di alice.it Presentati al Forum 1
S [PHP] Problemi con Login e pagina Utente PHP 5
Z problemi con swf e chrome o sistemi portatili Webdesign e Grafica 5
N Problemi connettività con Tp Link EAP 110 Reti LAN e Wireless 0
S [HTML] Problemi con Blueimp image gallery su Chrome e Firefox HTML e CSS 2

Discussioni simili