CSS - centrare i div

Ciao sto costruendo un sito per il mio negozio e vorrei sapere come centrare un div al centro della pagina...ho gia provato con il margin 0 auto ma non funziona...il mio problema sta nel fatto che il div contiene dei div flottanti. potete aiutarmi?

Ciao

[karl94]

Un div ha normalmente larghezza impostata su auto, quindi occuperà tutto lo spazio disponibile. Imposta la larghezza (width) su su un valore diverso da auto e imposta i margini come hai già provato.

non fa lo stesso
puoi fare un piccolo sorgente come esempio?

[karl94]

Puoi scrivere tu il tuo codice (o l'indirizzo della pagina) così cerco di correggerlo?

www.nonsolostoffa.altervista.org/index.html
ci provo da tanto tempo :S
la pagina è ancora in costruzione ma si possono vedere i div principali XD gli unici due :)

[karl94]

Hai impostato la larghezza del body, così il div viene centrato su quei 700px, elimina quel blocco e il div si posizionerà correttamente. Comunque ti consiglio di non usare il javascript per creare il layout, usa solo il CSS. Per i bordi arrotondati c'è una specifica proprietà CSS3, non è necessario ricorrere a questi stratagemmi.

funziona grazie!!

ciaoo

ah comunque lo stratagemma per gli angoli arrotondati senza immagini?

[karl94]

Nella bozza del CSS3 è stata introdotta una proprietà: border-radius, che permette di arrotondare i bordi degli angoli a forma di circonferenza e anche di ellisse.
Poiché è ancora una bozza ed è possibile che ci siano dei cambiamenti, alcuni browsers hanno introdotto questa proprietà con il prefisso (vendor prefix).
Su Firefox è -moz-border-radius, su Chrome o Safari -webkit-border-radius (questa implementazione non è però del tutto conforme), e per tutti gli altri che la supportano è border-radius.
Bisogna anche prestare attenzione all'ordine in cui mettere queste proprietà: va sempre messa dopo le altre quella ufficiale, così per esempio se con -webkit-border-radius non puoi fare alcuni bordi ma con border-radius sì, se il browser supporta entrambe le proprietà sceglierà l'ultima.

pragmatico ma riesco a capirlo abbastanza
dato che ho orribili gusti sui colori mi daresti dei consigli?(la home del sito linkata prima)

Ho utilizzato uno schema simile e ho visto che dà problemi
se durante l'allinemento su una stessa riga mettendo left (float left) e layout (float center) ed inserendo una terza come right..sbrocca..
ritrovo al suo posto right ma alla riga sottostante!
ovviamente i px erano sistamzti come voleva la pagina..padding e margin calcolati bene
per evitare sorprese!
Ho provato invece ad inserire nel div layout dei sotto div "subcenter" & "subright"
dando poi il risultato richiesto. 2 colonne distinte!
Ora chiedo se c'è un modo per ovviare a questa operazione..un sistema
cioè che mi permetta di centrare 3 o più div sulla stessa riga senza creare dei sottodiv!

[karl94]

Ho utilizzato uno schema simile e ho visto che dà problemi
se durante l'allinemento su una stessa riga mettendo left (float left) e layout (float center) ed inserendo una terza come right..sbrocca..
ritrovo al suo posto right ma alla riga sottostante!
ovviamente i px erano sistamzti come voleva la pagina..padding e margin calcolati bene
per evitare sorprese!
Ho provato invece ad inserire nel div layout dei sotto div "subcenter" & "subright"
dando poi il risultato richiesto. 2 colonne distinte!
Ora chiedo se c'è un modo per ovviare a questa operazione..un sistema
cioè che mi permetta di centrare 3 o più div sulla stessa riga senza creare dei sottodiv!

Scrivi i due codici delle pagine (se sono online, l'URL).

Modo 1. il right scala di riga!
http://rirracingteam.altervista.org/Help/Modo1.html

Modo 2. corretto ma con 2 sottodiv
http://rirracingteam.altervista.org/Help/Modo2.html

[karl94]

Ci sono alcune cose che non vanno bene: il Doctype che hai inserito dichiara che il documento è un documento XHTML, ma ci sono diversi errori: gli elementi vuoti (style, meta, img, input) non hanno tutti il tag di chiusura, usi le tabelle per il layout e usi degli script non presenti (angoli.js) e che non capisco a cosa ti servano. Inoltre non capisco perché il div#logo abbia un float: left e una larghezza fissa, peraltro molto inferiore a quella del contenuto. Infine, non riesco a visualizzare correttamente nessuna pagina di quelle da te scritte.
Se mi spieghi esattamente il risultato che vuoi ottenere (anche tramite un'immagine), posso aiutarti a sistemare il tutto al meglio (non solo per l'aspetto grafico, ma anche per l'ordine logico del documento HTML).

Allora ti faccio subito un esempio. http://etw-funzone.eu/index.php
mio vekkio clan..mi ispiravo ad un layot simile..con 2 colonne laterali riservate a menu/pannelli
informativi e la colonna centrale con news ed altro!
ora i div#logo nn sono in uso..
e volevo sistemarli come avrò una img decente da mettere! div#img scordato di eliminarla!
ho utilizzato i div per crere le aree..senza spazio..e ho inserito le tab nei div per dare un colore bianco ai bordi.
altre cose come script sugli angoli è da eliminare!
il meta era quello della index di inizio sito..mai toccato!

il codice odierno è :

<!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>
<link rel="stylesheet" type="text/css" href="http://rirracingteam.altervista.org/DerKaiserTest/Style.css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>rFactor Italia Racing</title>

<style type="text/css">

	div#menu{float: left; width: 960; height: 10px; background-color: #000; margin-bottom: 2px}
	div#navleft{float: left; width: 200px; height: 500px; background-color: #000; margin-bottom: 2px}
	div#center{float: center; width: 560px; height: 500px; background-color: #000; margin-bottom: 2px}
	div#right{float: right; width: 199px; height: 500px; background-color: #000; margin-bottom: 2px}
	div#subfooter{float: left; width: 900px; height: 100px; background-color: #000; margin-bottom: 2px}



</style>
</head>
<body>
	<div id="page">
		<div class="logo"><img src="http://i51.tinypic.com/a4uexc.png" alt="" /></div>
		<div id="vertmenu">
		<li><a href="">Home</a></li>
		<li><a href="">Community</a></li>
		<li><a href="#">Forum</a></li>
		<li><a href="#">Rulebook</a></li>
		<li><a href="">Reparto Corse</a></li>
		<li><a href="#">Account</a></li>
		<li><a href="#">Registrati</a></li>
		<li><a href="#">Search</a></li>
  		</ul>
	</div>
	<div id="navleft">
		<table float="center" width="195" height="248"  border="0" align="center" text-align="center" cellpadding="0" cellspacing="0" id="Tab_001">
		  <tr>
		    <td class="title1" height="25">
			<i>Login</i>
		    </td>
		  </tr>
		  <tr>
		    <td  height="25" background="#ff3300;">
			<i>REGISTRATI</i>
		    </td>
		  </tr>
		</table>

				<table float="center" width="195" height="248"  border="0" align="center" text-align="center" cellpadding="0" cellspacing="0" id="Tab_001">
		  <tr>
		    <td class="title1" height="25">
			<i>Login</i>
		    </td>
		  </tr>
		  <tr>
		    <td  height="25" background="#ff3300;">
			<i>REGISTRATI</i>
		    </td>
		  </tr>
		</table>
	</div>
	<div id="center">
		<table float="center" width="558" height="498"  border="0" align="top" text-align="center" cellpadding="0" cellspacing="0" id="Tab_001">
		  <tr>
		    <td>
			<p>News</p>
		    </td>
		  </tr>
		</table>
		</div>		
	<div id="right">
<table float="center" width="195" height="498"  border="0" align="center" text-align="top" cellpadding="0" cellspacing="0" id="Tab_001">
		  <tr>
		    <td>
			<p>TS</p>
		    </td>
		  </tr>
		</table>

	</div>
	</div>

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