Salve a tutti, ciao moderatori.
sono nuovo, mi sono appena iscritto. Sono contento di entrare nel forum.
Sono un autodidatta e sto upgradando il sito ripulendolo dalle vecchie tabelle.
Ho qualche problema con i css in cui mi sono imbattuto. Perdonatemi se scrivo qualche cavolata.
Vorrei realizzare un div contenitore (con uno sfondo colorato visibile) di altri due div (con sfondo colorato diverso da quello dello sfondo del contenitore) che piu avanti vorrei che fossero tre o quattro.
Ho realizzato la seguente struttura:
HTML:
CSS:
Il problema è che non riesco a vedere il colore di fondo del div contenitore WhoIam, o meglio non risulta visibile il rettangolo del div WhoIam, anche modificando il relativo attributo background-color.
Per poter vedere il rettangolo di WhoIam, che con il codice sopra risulta non visibile (e vederlo quindi inglobare i due div interni) devo mettere un "float: left;" anche all'interno della classe .WhoIam; così facendo però il div di WhoIam risulta sì visibile ma si sposta tutto a sinistra (ovviamente), mentre io vorrei mantenerlo al centro.
Qualcuno può aiutarmi a capire dove sbaglio?
grazie anticipatamente
sono nuovo, mi sono appena iscritto. Sono contento di entrare nel forum.
Sono un autodidatta e sto upgradando il sito ripulendolo dalle vecchie tabelle.
Ho qualche problema con i css in cui mi sono imbattuto. Perdonatemi se scrivo qualche cavolata.
Vorrei realizzare un div contenitore (con uno sfondo colorato visibile) di altri due div (con sfondo colorato diverso da quello dello sfondo del contenitore) che piu avanti vorrei che fossero tre o quattro.
Ho realizzato la seguente struttura:
HTML:
Codice:
<body>
<div id="container_gen_body">
<div class="container_cen_all"> <!-- contenitore di tutte le sezioni (es: WhoIAm, News, etc.) -->
<!-- WHO I AM -->
<div class="WhoIAm"> <!--WhoIAm-->
<div class="split2">
<div> <!-- 1a colonna -->
<h1> titolo </h1>
<p> testo 2
bla bla bla
</p>
</div> <!-- fine 1° split2 -->
<div> <!-- 2° split-->
<h1>titolo 2</h1>
<p> testo 2 w wwe wefdsafasdf dfs<br>
bla bla bla <br>
bla bla bla
</p>
</div>
<div class="wide2">ciao </div>
</div>
</div> <!-- close WHO I AM -->
<div class="spazio"></div>
<!--NEWS-->
<div class="News">
NEWS
</div><!-- News-->
</div><!--container_cen_all-->
</div> <!-- container_gen_body-->
</body>CSS:
Codice:
html, body { /* impostazioni generali - lasciare */
margin:0;
padding: 0;
width: 100%;
height: 100%;
text-align: center; */ /* IE5.x */
}
body {
background-color: #333333; /* colore del body */
}
#container_gen_body {
min-height: 100%;
height: auto !important;
height: 100%;
width: 100%;
margin:0 auto -250px; /* centra il contenitore nello spazio a destra della fascia sx*/
}
.container_cen_all { /* contenitore delle varie sezioni */
visibility: visible;
position: absolute;
top: 60px;
left: 290px;
right: 0px; /* distanza del contenitore dal bordo del browser */
margin: 0 auto; /* centra su FireFox */
text-align: center; /* centra su IE .. ma non funziona*/
background: #FFFFFF;
}
.WhoIAm {
visibility: visible;
background-color: #CC00CC;
width:95%; /* rispetto al contenitore CENTRALE ALL*/
text-align:center; /* IE */
margin: 0 auto; /* FX */
z-index: 1000;
}
.News {
come WhoIAm
ma con colore di sfondo diverso
}
.spazio { /* riga di separazione */
visibility: visible;
background: #DDDDDD; /* BIANCO */
height:40px;
text-align:center;
z-index: 1000;
clear:left;
}
.split2 div { /* riquadro che contiene TITOLO e TESTO */
float: left;
background-color: #66CC66; /* fondo del riquadro */
width: 45%; /* \width: 49%; w\idth: 45%; */
padding: 0 2%; /* top ..*/
height: auto;
z-index: 400000;
}
.split2 h1 { /* titolo */
font-family: Verdana, sans-serif;
font-style: normal;
font-size: 2.0em;
font-weight: 400;
color:#000000; /* colore TITOLO */
text-align: justify;
line-height: 1.7em;
letter-spacing: 0.1em; /* spazio tra le lettere delle parole */
}
.split2 p { /* paragrafo */
font-family: Verdana, sans-serif;
font-style: normal;
font-size: 1.0em;
font-weight: 400;
color:#000000; /* colore TESTO */
text-align: left;
line-height: 1.6em;
letter-spacing: 0.2em; /* spazio tra le lettere delle parole */
z-index: 400000;
}
.wide2 { /* chiusura */
clear: both;
padding: 0 2%;
z-index: 400000;
}Il problema è che non riesco a vedere il colore di fondo del div contenitore WhoIam, o meglio non risulta visibile il rettangolo del div WhoIam, anche modificando il relativo attributo background-color.
Per poter vedere il rettangolo di WhoIam, che con il codice sopra risulta non visibile (e vederlo quindi inglobare i due div interni) devo mettere un "float: left;" anche all'interno della classe .WhoIam; così facendo però il div di WhoIam risulta sì visibile ma si sposta tutto a sinistra (ovviamente), mentre io vorrei mantenerlo al centro.
Qualcuno può aiutarmi a capire dove sbaglio?
grazie anticipatamente
Ultima modifica di un moderatore:
