Salve a tutti, sul mio sito: http://virtualgames.altervista.org/index.php ho inserito un menu con il suo relativo CSS, ma non riesco a centrarlo nella skin, come mai?
Sapete darmi consigli? :roll:
Printable View
Salve a tutti, sul mio sito: http://virtualgames.altervista.org/index.php ho inserito un menu con il suo relativo CSS, ma non riesco a centrarlo nella skin, come mai?
Sapete darmi consigli? :roll:
che intendi per centrarlo? io vedo tutto al centro <_<
Sono d'accordo con te Dharlet anche io vedo tutto al centro della pagina, per favore virtualgames puoi spiegarti meglio, magari anche con un esempio?Citazione:
Originalmente inviato da Dharlet
Eccovi uno screen per farvi capire cosa intendo. :wink:
http://virtualgames.altervista.org/vg.bmp
In effetti non è proprio centrato... come hai impostato i margini del div contenente il menù?
Puoi postare il pezzo del css interessato?
Ciao
Ecco il CSS del menu:
Codice:#menu {
width: 450px;
margin: 0 auto;
}
#menu li {
list-style-type: none;
float: left;
margin-right: 1px;
}
#menu a {
font-size: 11px;
text-decoration: none;
float: left;
font-weight: normal;
letter-spacing: 0;
color: #2B2B2B;
background: #E6E6E6;
display: block;
width: 70px;
text-align: center;
padding: 2px 0;
}
#menu a:hover {
background: #787878;
color: #E6E6E6;
}
A parte margin-right: 1px; prova con margin-left
Sembra che non ci sia niente che non và...
Prova a controllare il codice per gli altri div poichè alcune proprietà vengono ereditate...
Prova magari a giocare un pò con i margini...
Ciao
Però, il menu è centrato, c'è qualcosa nel CSS credo che fa si che non si veda bene..
Ho provato ad aumentare la larghezza del menu, per vedere se quando andava a capo, si adattava a tutta la skin, ma niente, guardate:
http://virtualgames.altervista.org/vg2.bmp
Ecco tutto il CSS del sito:
Sapete aiutarmi?Codice:padding: 0;
}
body {
font: 100%/110% Verdana;
background: #5b5b5b;
color: #FFFFFF;
}
p {
margin-top: 0.5em;
}
a {
color: white;
font-weight: bold;
letter-spacing: 1px;
text-decoration: none;
}
a:hover {
color: #787878;
}
blockquote {
padding: 0.1em 0.3em;
color: #9b9b9b;
}
/************* Container *************/
#wrapper {
width: 520px;
margin: 0 auto;
text-align: left;
}
/************* Header *************/
#header {
margin-top: 20px;
height:222px;
width: 518px;
background: url(imgs/header.jpg) no-repeat;
}
#insideHeader {
width: 450px;
height: 90px;
margin: 0 auto;
padding: 47px 32px 23px 32px;
}
html>body #insideHeader {
padding-top: 32px;
height: 104px;
}
#insideHeader h1, #insideHeader p {
margin: 10px 15px;
}
#insideHeader h1 {
margin: 20px 0 0 15px;
font-weight: bold;
font-size: 2.3em;
}
#menu {
width: 450px;
margin: 10 auto;
}
#menu li {
list-style-type: none;
float: left;
margin-right: 1px;
}
#menu a {
font-size: 11px;
text-decoration: none;
float: left;
font-weight: normal;
letter-spacing: 0;
color: #2B2B2B;
background: #E6E6E6;
display: block;
width: 70px;
text-align: center;
padding: 2px 0;
}
#menu a:hover {
background: #787878;
color: #E6E6E6;
}
/************* Content *************/
#main {
height: 700px;
}
html>body #first h2 {
margin-top: 0;
padding-top: 10px;
}
#content {
width: 550px;
background: url(imgs/mainBg.gif) repeat-y;
}
#footer {
position: absolute;
width: 518px;
height: 82px;
background: #2B2B2B url(imgs/mainBottom.gif) top no-repeat;
}
.post {
width: 428px;
padding: 0 45px;
font-size: 0.71em;
}
.post h2 {
margin-top: 0.5em;
padding: 0.55em 0 0.4em;
border-top: 1px solid #eaeaea;
}
.post ul {
margin-left: 17px;
padding: 0.1em 0;
}
#first { /* Top of the content part in first post*/
background: url(imgs/mainTop.gif) top no-repeat;
}
#first h2 {
margin-top: 5px;
border-top: none;
}
#footer p {
text-align: center;
margin: 45px auto 0;
font-size: 0.65em;
}
#footer a:hover {
color: #2B2B2B;
}
Prova a nmodificare questo:
#menu {
width: 450px;
margin: 10 auto;
}
Modifica quel 10 con 100 e con 0 vedi cosa succede...
Ciao
Scusate, ma ora che ci penso è un fatto di immagini :lol:
Infatti, se vedete in alto alla skin c'è un'immagine.. proprio per questo il menu non si vede correttamente ;)
Vedrò come aggiustare e vi farò sapere come ho fatto (sempre se ci riuscirò :lol:)
EDIT: Non è un fatto di immagini -.-''
PS: Ho provato come mi hai suggerito, ma niente...
Provato anche con margini negativi?
Non si sà mai...
Ciao
Prova così:
Codice:#menu {
position: relative;
width : 450px;
margin-left: -225px;
left: 50%;
}
Ragazzi, ho risolto semplicemente inserendo un nuovo menù, creato da me, che a mio parere, si addice maggiormente al sito.
Guardate voi stessi: http://virtualgames.altervista.org/index.php
Com'è?
PS: Grazie comunque del supporto :wink: