Printable View
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
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:crycry:
puoi fare un piccolo sorgente come esempio?
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 :)
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?
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:shock: ma riesco a capirlo abbastanza:lol:
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!
Scrivi i due codici delle pagine (se sono online, l'URL).Citazione:
Originalmente inviato da RirRacingTeam
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
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 è :
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>
<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>