centrare un div in orizzontale

**kosta** · 04-10-2004, 15:47

ciaoa tutti, probabilmente sono molto rinco ma non riesco a centrare un div orrizontale.
il codice html è il seguente:

<!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" xml:lang="it">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="master3.css" type="text/css" />
<title>::. settima onda strict .::</title>
</head>
<body>
<div id="container">
<div id="fascia"></div>
</div>

</body>
</html>

i CSS variano a seconda della nevrosi:

body {
background-color : #A3B2CC;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
margin: 0px;
width:100%;
height:100%;
}

#container {

padding: 0 0 0 0;
margin: 0px;
border: solid 0px #000;
height:100%;

}

#fascia{
background-image:url(img/onda.jpg);
background-position: bottom left;
background-repeat:no-repeat;
background-color: #153983;

border-top:solid 1px #B5C3DC;
border-bottom:solid 1px #B5C3DC;
position: absolute;

width: 100%;
height:390px;
margin: -25%,0,-25%, 0;
}

non trovo l'errore! il div "fascia dovrebbe essere centrato in altezza!!!

ciao e grazie
c

**Federix** · 04-10-2004, 17:36

codice:

#container {

padding: 0 0 0 0;
margin: auto;
border: solid 0px #000;
height:100%;

}

**kosta** · 04-10-2004, 17:42

grazie ci avevo provato ma non funziona il bas*****!!!
grazie 1000
c

**marcorai** · 05-10-2004, 16:42

Hai trovato la soluzione???

Ho anch'io lo stesso problema con

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Documento senza titolo</title>
<style>/* MENU ORIZZONTALE */
#menuoriz {padding: 0; height: 20px; margin-bottom:18px}
#menuoriz ul {border: 0; margin: 0; padding: 0; list-style-type: none; text-align: center;}
#menuoriz ul li {display: block; float: left; }
#menuoriz ul li a {
background: #FBEFE1; /* colore sfondo menu */
width: 110px; height: 18px; /* larghezza e altezza cella menu */
border-top: 1px solid #f5d7b4; border-left: 1px solid #f5d7b4; border-bottom: 1px solid #f5d7b4; border-right: none; /* bordi celle */
padding: 0; margin: 0;
color: #660000; /* colore testo */
text-decoration: none; /* effetto link */
display: block; text-align: center;
font: normal 10px/18px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif; /* font */
}
#menuoriz ul li a:hover {
color: #930; /* colore testo hover */
background: #f5d7b4; /* sfondo cella hover */
text-decoration: underline /* effetto testo */
}
#menuoriz a:active {
background: #c60; /* sfondo cella link */
color: #fff; /* colore testo link */
}</style>
</head>

<body>

<div id="menuoriz">
<ul>[*]Home Page[*]Chi è[*]Il negozio[*]I prodotti[*]Offerte speciali[*]Scelta misure[*]Info vendita[/list]
</div>

</body>
</html>

(http://www.clickandbuy.it/menu-orizz.html)

**marcorai** · 05-10-2004, 16:43

Cioè non riesco a centrare quel maledetto menù in orizzontale...
Grrrrrrr

Marco

**pacovox** · 05-10-2004, 16:59

Dovresti dare una larghezza a #menuorz e applicare il solito margin: auto;

**kosta** · 06-10-2004, 09:16

ho risolto così:
html

codice:

<!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" xml:lang="it">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="master3.css" type="text/css" />
<title>::. settima onda strict .::</title>
</head>
<body>
	<div id="container">
		<div id="fascia"></div>
			<div id="secondo">
			<div id="terzo">testo bla bla
			</div>
			</div>
		</div>
	</div>
</body>
</html>

CSS

codice:

body, html {
	background-color : #A3B2CC;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
        margin: 0px;
	border: 0px;
	padding: 0px;
	height: 100%;
weight:100%;
}

}

#container { 
	
	padding: 0 0 0 0;  
	margin: auto;
	border: solid 0px #000;
	height:100%;
	width:100%;
	

	}



#fascia{
	position: absolute;
	top:50%;
	bottom:50%;

	width: 100%;
	height:390px;
	margin: -195px 0 0 0;
	


	} 

#secondo{

	border:solid 0px;
	position:absolute;
	top:50%;
	left:266px;
	width:280px;
	height:390px;
	margin: -194px 0 0 0;
	
}
#terzo{
	position: absolute;
	margin: 0px 0 0 280px;
	width:300px;
	height:182px;
	border:solid 0px
}

funziona su expolorer6, mozilla, opera e netscape 7
ciaU!

**marcorai** · 06-10-2004, 14:22

Ahimè ci dev'esser qualche altro baco nel css, perché anche mettendo margin-left:0, il menù non si allinea a sx

http://www.clickandbuy.it/layout.html

può darsi che dipenda dal rientro automatico della lista indentata <ul>[*]???

Marco

Discussione: centrare un div in orizzontale

Strumenti discussione

Ricerca discussione

Visualizza

centrare un div in orizzontale

Ma ora funziona?

Permessi di invio