2 css per un sito

PinkBetta

Utente Attivo
21 Lug 2009
1.414
0
0
www.pinkbetta.com
Ciao, nel sito che voglio realizzare ho in mente di dare all'index una struttura completamente diversa dal resto del sito, e cioè di mettere l'header, il footer e uno spazio centrale e basta (per il menù devo ancora vedere come si fa perchè lo vorrei mettere al centro dello spazio centrale). Il resto del sito invece ha lo spazio centrale diviso in 2 colonne. Ho provato a fare 2 diversi fogli di stile (li allego qua sotto) ma il problema è che la index non funziona, non si vede niente! Il resto delle pagine (quelle con associato il css "Style") invece funziona bene.

Cosa sbaglio? Non si può fare come ho fatto io?

Css che va:

body {
font-family:Comic Sans MS, Times New Roman, Verdana;
background-color:white;
background-position:center;
margin-bottom:20px;
margin-left:0px;
margin-right:0px;
margin-top:10px;
text-align:center;
font-size:14px;
scrollbar-3dlight-color:#f3d841;
scrollbar-face-color:#f3d841;
}

h1 {
font-size:14px;
font-style:italic;

}

h3 {
font-size:18px;
font-style:italic;

}

p {

text-align:justify;
padding:10px;

}

#container {

margin:0px auto;
text-align:left;
width:800px;
height:auto;
background-color:black;
border:1px solid;
}


#header {

background-image:url(img/header.jpg);
width:800px;
height:200px;
background-repeat:no-repeat;
background-position:center;
margin:0px auto;
}

#cdx {
width:500px;
height:703px;
overflow:auto;
margin:10px 0px 10px -10px;
text-align:center;
float:right;
background-image:url(img/back2.gif);

}

#csx {
width:300px;
height:450;
margin:10px 0px 0px 0px;
background-image:url(img/backmenu.gif);
float:left;

}
#menu {
width:230px;
height:450px;
float:left;
margin:0px 0px 0px 10px;
}

#menu ol {

list-style-type:none;
font-weight:bold;
font-size:14px;
padding:50px 0px 0px 20px;

}

#menu ol li {

margin:0px 0px 50px 0px;
border:1px solid;
border-color:#efba46;
text-align:center;

}

#menu ol li a{

text-decoration:none;
color:black;
}


#menu a:hover {

text-decoration:none;
color:#efba46;

}


img {

border:none;
}

#footer {

background-image:url(img/footer.jpg);
background-position:center;
background-repeat:no-repeat;
width:800px;
height:90px;
clear:both;

}


Css che non va per la index senza le due colonne:

body {
font-family:Comic Sans MS, Times New Roman, Verdana;
background-color:white;
background-position:center;
margin-bottom:0px;
margin-left:0px;
margin-right:0px;
margin-top:10px;
text-align:center;
font-size:14px;

#container {

margin:0px auto;
text-align:left;
width:800px;
height:auto;
background-color:black;
}

#back {

margin:0px auto;
text-align:center;
width:800px;
height:800px;
background-image:url(img/back.jpg);
}


#header {

background-image:url(img/header.jpg);
width:800px;
height:100px;
background-repeat:no-repeat;
background-position:center;
margin:0px auto;
}



#footer {

background-image:url(img/footer.jpg);
background-position:center;
background-repeat:no-repeat;
width:800px;
height:70px;
clear:both;

}



Grazie!
 
Presupponendo che tu usa dei CSS esterni, altrimenti ti consiglio di farlo (basta inserire il codice di ogni uno in un file e dargli estensione .css), basta che tu ne inserisca il collegamento tra i tag <head></head> così:
Codice:
<link rel="stylesheet" href="style1.css" type="text/css" media="screen" />
<link rel="stylesheet" href="style2.css" type="text/css" media="screen" />
 
Si si uso dei fogli di stile esterni, solo che nel foglio della index metto il link al foglio per solo quella pagina (quello senza le due colonne), mentre per le altre pagine metto il link all'altro foglio di stile.
Ma perchè devo sempre metterli tutti e due?
 
Codice:
Css che non va per la index senza le due colonne:

body {
font-family:Comic Sans MS, Times New Roman, Verdana;
background-color:white;
background-position:center;
margin-bottom:0px;
margin-left:0px;
margin-right:0px;
margin-top:10px;
text-align:center;
font-size:14px;

manca la parentesi graffa } di chiusura
 

Discussioni simili