Nuovo problema con pagina web..

**Ghiso983** · 27-11-2013, 01:43

Ciao a tutti
La mia pagina web è la seguente....
ghiso983.altervista.org/index.html

Vorrei fare delle modifiche al sito.
(non sghignazzate troppo per la scelta dei colori mi hanno già pesantemente cassato sul forum di astronomia!

)
Comunque il problema è nella:

e nelle equivalenti delle altre pagine. (wrap_chi , wrap_foto .......)
Se nel css non dichiaro la dimensione esatta nel campo height nei vari wrap, e la metto invece auto, il software fa un disastro e non capisco sinceramente il motivo.
vi faccio vedere un esempio grafico di cosa esce nel caso metto auto nel campo wrap del css.
chenneso.jpg

E mi direte e che te importa? tanto se lo metti ti funziona no?
vero, però:
1) mi piacerebbe funzionasse con auto in modo da dichiarare un solo campo wrap e comunque non doverlo variare ogni volta che modifico la pagina.
2)visto che non capisco è molto probabile che non abbia capito a fondo come funzionino i div, e quindi è meglio che lo impari!

Chiunque mi possa aiutare è benvenuto!

**Nobody33** · 27-11-2013, 16:41

Quale software fa un disastro. di cosa parli? Link alla pagina?

p.s.: la scelta dei colori è a dir poco tremenda

**ac_socmel** · 27-11-2013, 18:28

togli l'altezza dal css e aggiungi overflow: hidden
questo dovrebbe risolver il tuo problema
comunque ho riscritto velocemente la tua pagina (senza stravolgerla)
per darti qualche spunto di riflessione

codice HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Il sito di astronomia amatoriale di Davide Ghiso</title>
<style type="text/css">
* {
	margin: 0;
	padding: 0
}
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 20px;
	text-align: center;
	color: rgb(50, 50, 50);
	background-color: rgb(0, 0, 0)
}
a img {
	border: none
}
.pagina {
	width: 900px;
	margin: 0 auto;
	font-size: 1em;
	padding: 262px 30px 30px;
	background: rgb(21, 99, 49) url(http://ghiso983.altervista.org/indeximm/header.jpg) no-repeat center 30px;
	border-radius: 30px
}
.pagina #menu {
	float: left;
	width: 210px;
}
.pagina #menu #bottoni {
	padding: 30px;
	background-image: url(http://ghiso983.altervista.org/indeximm/bottoni.jpg);
	border-radius: 30px
}
.pagina .contenuto {
	padding: 30px;
	margin-left: 240px;
	background-color: rgb(193, 197, 243);
	border-radius: 30px
}
.pagina .contenuto p {
	font-size: 0.7em;
	text-align: left;
}
.pagina .contenuto #fotostrum {
	width: 100%;
	margin-top: 30px;
}
</style>
</head>
<body>
<div class="pagina">
  <div id="menu">
    <div id="bottoni"><a href="index.html"><img src="http://ghiso983.altervista.org/indeximm/home.png" alt="Home" /></a> <a href="chi_sono.html"><img src="http://ghiso983.altervista.org/indeximm/chisono.png" alt="chi sono" /></a> <a href="foto.html"><img src="http://ghiso983.altervista.org/indeximm/foto.png" alt="foto" /></a> <a href="software.html"><img src="http://ghiso983.altervista.org/indeximm/software.png" alt="Software" /></a> <a href="strumentazione.html"><img src="http://ghiso983.altervista.org/indeximm/strumentazione.png" alt="strumentazione" /></a> <a href="siti amici.html"><img src="http://ghiso983.altervista.org/indeximm/siti_amici.png" alt="siti amici" /></a></div>
  </div>
  <div class="contenuto">
    <h3>Benvenuto nel mio sito</h3>
      <p>Questo sito ha lo scopo di condividere con quanti possono accedere alla rete questa grande passione che &#232; l'astronomia e sopratutto la fotografia astronomica, spero che lo possiate apprezzare.</p>
    <img src="http://ghiso983.altervista.org/indeximm/pag1.jpg" alt="pag1" id="fotostrum" />
  </div>
</div>
</body> </html>

**Ghiso983** · 27-11-2013, 23:42

Ti ringrazio ha funzionato...
ho un paio di domande:

cosa fa di preciso overflow: hidden?
La pagina costruita come l'hai costruita te è molto più semplice!

**carlomarangoni** · 27-11-2013, 23:46

Originariamente inviata da Ghiso983

....cosa fa di preciso overflow: hidden?....

Toglie le scrollbar

**Ghiso983** · 28-11-2013, 02:30

Mi son messo a maneggiare la tua versione del sito, ho capito tutto (credo) eccetto per quale motivo il div menù si sovrappone al div contenuto.
E come mai qualcuno lo hai definito come classe ed altri come id?
Che differenza c'è?

**ac_socmel** · 28-11-2013, 02:45

non dovrebbero sovrapporsi
puoi postare un link o uno screenshot?
ho copiato dal tuo codice così sono rimasti degli id, ma sono essenzialmente inutili
per esempio #bottoni e .contenuto sono sostanzialmente uguali e si poteva usare una sola classe

**Ghiso983** · 28-11-2013, 11:38

in pratica se modifico il parametro di margin-left mettendolo basso, succede questo:
chenneso.jpg

per essere preciso ho modificato il codice in questo modo:

.pagina .contenuto {
padding: 30px;
margin-left: 20px;
background-color: rgb(193, 197, 243);
border-radius: 30px
}

**ac_socmel** · 28-11-2013, 13:04

usando la proprietà "float" il "div" o qualsiasi elemento a cui viene applicato, si solleva leggermente
per cui un elemento di blocco che lo segue va ad occuparne lo spazio sottostante
quindi il margine di quest'ultimo viene calcolato dal bordo del contenitore precedente o dal "genitore"
ma testi o immagini o altri elementi non passano sotto
e si addossano all'elemento con il "float"

Discussione: Nuovo problema con pagina web..

Strumenti discussione

Ricerca discussione

Visualizza

Nuovo problema con pagina web..

Permessi di invio