Problemi di allineamento

**Neptune** · 12-02-2010, 19:20

Salve a tutti,
sto cercando di creare "la mai prima" grafica in css, utilizzando un pò di guide qua e la oltre che con l'ausilio di dreamweaver.

Ora il punto è che benchè non ci siano altri oggetti, l'intestazione che ho appena creato non me la posiziona nella parte alta della pagina, e nemmeno attaccata allo schermo. Non riesco a capire come fare, vi posto il codice:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
<!--
#intestazione {
	height: 250px;
	widht: 100%;
	background: repeat-x url(images/page_bg.png) center top;
	margin-top: 0px;
	top: 0px;
	position: inherit;
}
#logo {
	height: 250px;
	widht:250px;
	background: no-repeat url(images/wrapper.png) center top;
	margin-top: 0px;
}
-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
</head>
<body>
<div id="intestazione">
  <center>
  <div id="logo">[img]images/headerimg.jpg[/img]</div>
  </center>
  

</p>
</div>
</body>
</html>

Detto in pratica il div "intestazione" deve essere l'inizio della pagina, senza lasciare bordi bianchi, e deve estendersi da un margine all'altro dello schermo. Mentre, il div logo, dove ci sarà dentro anche il logo vero e proprio, deve rimanere sempre centrato.

Vi ringrazio in anticipo per la cortesia,
Neptune.

**fcaldera** · 12-02-2010, 19:33

annulla margini e padding di tutti gli elementi come prima regola

* { margin: 0; padding: 0; }

**Neptune** · 12-02-2010, 19:59

Originariamente inviato da fcaldera
annulla margini e padding di tutti gli elementi come prima regola

* { margin: 0; padding: 0; }

Ottimo, se posso rubarti un'altro consiglio, e credo di essere arrivato quasi alla fine, dovrei ricreare delle colonne subito dopo l'intestazione, il codice che ho è questo:

codice:

#menu{
	float:left;
	width:160px;
	padding: 1em 10px1px 1px;
}

#testo{
	margin:0 170px;
	padding:1em 10px1px 1px;
}

Praticmaente devono essere un menu a sinistra e subito dopo il corpo della pagina, allineati sotto il logo, quello che vorrei fare (a parte che per l'allineamneto ancora non mi sono posto il problema) è che entrambe le parti siano della stessa lunghezza, presupponendo però "una lunghezza variabile".

Insomma due colonne che se si allunga una si allunga anche l'altra (perchè successivamente dovrò metterci uno sfondo, e se non si allungano entrambe mi lascia lo spazio bianco).

Come potrei fare?

**Neptune** · 12-02-2010, 20:22

Cioè se metto due div che devono essere uno affianco all'altro in un terzo div che fa da contenitore, detto in parole povere, come gli dico che entrambi devono arrivare "sempre alla fine del contenitore" in quanto all'altezza?

**Neptune** · 12-02-2010, 21:44

Dopo varie prove sono arrivato a questo:

codice:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
<!--
#intestazione {
	height: 250px;
	widht: 100%;
	background: repeat-x url(images/page_bg.png) center top;
	padding-bottom: 0px;
	padding-right: 0px;
	padding-left: 0px;
	position:relative;;
	margin:0 auto;
}
#logo {
	height: 250px;
	widht:250px;
	background: no-repeat url(images/wrapper.png) center top;
}
#corpo {
	margin: 0; 
	padding: 0;
	background: #EFF4F7;
	width: 900px;
}
body {
	font-family: Tahoma, Verdana, Arial, sans-serif;
	line-height: 1.3em;
	margin: 0;
	padding: 0;
	font-size: 11px;
	color: #666;
	background: #fff;
}

#menu{

	float: left;
	width:190px;
}

#testo{
	margin:0px 0px 0px 220px;
	padding:1px 0px0px 0px;
	float:inherit;
	background: white;
	text-align: left;
	color: #39F;
}	

div#footer{clear:both} 

-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
</head>
<body topmargin=0 leftmargin=0 rightmargin=0>
<div id="intestazione" >
  <center>
  <div id="logo">[img]images/headerimg.jpg[/img]</div>
  </center>
</div>

<center>
<div id="corpo">
<div id="menu">
  

men</p>
</div>
<div id="testo">

  

TESTO TES+</p>
    

 </p>
  </div>
</div>
</center>
</body>
</html>

Ovvero il div "corpo" è tutto del colore della colonna di sinistra, il corpo centrale ha sfondo bianco, in questo modo anche se la colonna non "si allunga" assieme al corpo, rimane lo sfondo celestino.

Ora il punto è come posizionare al centro della pagine il div "corpo" ? tra l'altro centrato e senza spazio dal div di sopra.

Con il codice che ho io me lo piazza inanzi tutto staccato dagli altri div, per quanto abbia dato zero di padding..

**Prill** · 13-02-2010, 11:52

Prova così

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<style type="text/css">
<!--
* {
	margin:0;
	padding:0;
}
body {
	font-family: Tahoma, Verdana, Arial, sans-serif;
	line-height: 1.3em;
	font-size: 11px;
	color: #666;
	background: #fff;
	text-align:center;
}
#contenitoreGenerale {
	width:100%;
}
#intestazione {
	width:100%;
	height: 250px;
	background: repeat-x url(images/page_bg.png) center top;
}
#logo {
	width:956px;
	height: 250px;
	background: no-repeat url(images/wrapper.png) center top;
	margin:0 auto;
}
#corpo {
	background: #eff4f7;
	width: 900px;
	margin:0 auto;
}
#menu{
	float: left;
	width:190px;
}

#testo{
	width:710px;
	margin-left:190px;
	background: #fff;
	text-align: left;
	color: #39f;
}	
* html #testo{ /* solo per explorer6 */
	width:707px;
}	
div#footer{clear:both} 

-->
</style>
</head>
<body>
<div id="contenitoreGenerale">
	<div id="intestazione">
	  <div id="logo">[img]images/headerimg.jpg[/img]</div>
	</div>
	<div id="corpo">
		<div id="menu">
		  

men</p>
		</div>
		<div id="testo">
		  

TESTO TES+</p>
		</div>
    </div>
  <div id="footer"></div>
</div>
</body>
</html>

Discussione: Problemi di allineamento

Strumenti discussione

Ricerca discussione

Visualizza

Problemi di allineamento

Permessi di invio