28173 sujets

CSS et mise en forme, CSS3

Voila mon probleme : Ma page s'affiche tres bien avec firefox, mais sous ie, les scollbars n'apparaissent pas et donc, impossible de descendre dans la page...

Ma page est de la forme

<div id="site">
<div id ="nav">contenant de la page</div>
</div>

Et le style de ma div :

#nav {
position: absolute;
width: 780px;
left: 50px;
top: 50px;
text-align: justify;
padding: 0px 10px;
}

Vous avez une idée d'ou vient le probleme ?

Pour etre plus precise, voila la page :
http://maelinn.jupiterii.com/ambragorn/conditionsdevente.htm

et le fichier css : http://maelinn.jupiterii.com/ambragorn/css2.css
Modifié par maelinn (11 Apr 2007 - 17:57)
Bonjour,

Pour une telle mise en page, il n'y a vraiment pas besoin d'absolute !!
C'est donner le bâton pour se faire battre...

Bon,
#site {/*contenant général*/
	position: relative;
	height: 1%;
}


Devrait régler ce problème, mais d'autres subviendront surement.
Ca marche merci !

Mais comment faire des marges si je mets les div en relative ?
Modifié par maelinn (11 Apr 2007 - 14:02)
maelinn a écrit :

Mais comment faire des marges si je mets les div en relative ?


en utilisant la propriété margin Smiley lol

Dit autrement tu devrais faire des tests en fonction des infos que l'on te donne Smiley cligne
Re,

Relative, ce n'est pas mieux ... (le bâton est plus petit ...)
Revois les positionnements avant de te lancer dans un beau projet, il y a d'excellent tutos ici.

Pour un idée
body {
	/*tout ce qui concerne la forme générale : police(type, couleur et taille), bg, forme du curseur*/
	font-family: "Tempus Sans ITC";
	font-size: 11pt;
	color: #ffcc99;
	cursor: crosshair;
	background-color: #483D8B;
	background-image: url(imagesite/fond3.jpg);
}

#site {/*contenant général*/
	width: 955px;
	margin: auto;
	border: 1px solid white;
}

a:link, a:visited { /*forme des liens quand inactifs et visités*/
	color: #AAA7F3;
	font-weight: bold;
	text-decoration: none;
}

a:active, a:hover {/*forme des liens quand survolés*/
color:#AAA7F3;
font-weight: bold;
text-decoration:none;
}

input { /*forme des cases de formulaire*/
font-family: Arial; 
font-size: 12px; 
color: #AAA7F3; 
background-color: #000000 ; 
} 

select { /*forme des menu déroulants*/
font-family: Arial; 
font-size: 12px; 
color: #AAA7F3; 
background-color: #000000; 
} 

img { /*forme des images*/
	margin: 5px;
}

.cadre {/*mise en forme des vignettes (avec bordure)*/
	border: 1px groove #fff;
}

.images {
	border: 4px double silver;
}

/***********************************************/
/*tableau                            */
/***********************************************/

.bijoux {/*forme des tableaux de commande des bijoux*/
	background-color: #000;
	border: 1px solid;
	text-align: center;
	width: 750px;
}

.bordure {/*forme des colonnes du tableau des bijoux (bordure apparente)*/
	border: 1px solid;
}

/***********************************************/
/*police                             */
/***********************************************/

h1{/*style du titre en page d'accueil*/
	font-weight: bold;
	font-size: 40px;
	color: #7b63be;
	text-align: center;
}

h4{/*style des titres dans les conditions de vente (bg violet)*/
	font-weight: bold;
	font-size: 12px;
	color: #000;
	background-color: #9370DB;
}

.important {/*style pour une ecriture en violet (nom des bijoux, sur commande etc...)*/
	color: #7b63be;
	font-weight: bold;
	font-size: 18px;
}

.dispo {/*style pour une ecriture bleu ciel (bijoux disponibles)*/
	color: #AAA7F3;
	font-weight: bold;
	font-size: 18px;
}

/***********************************************/
/*Divs                              */
/***********************************************/

#menu {
	/*bandeau de menu*/
	width: 800px;
	height: 25px;
	margin: auto;
	text-align: center;
	background-color: #000;
	border: 1px solid #fff;
}

#menubijoux {
	/*menu des bijoux en vignettes*/
	width: 800px;
	overflow: hidden;
	margin: auto;
	text-align: center;
	border: 1px solid white;;
}

#nav {
	/*contenant des pages du site*/
	width: 780px;
	margin: auto;
	text-align: justify;
}

#nav2 {
	/*contenant de la page d'accueil*/
	width: 780px;
	margin: auto;
	text-align: justify;
}

#nav3 {
	/*contenant de la page contact et conditions de vente*/

	width: 780px;
	margin: auto;
	text-align: justify;
}



#piedpage {
	/*contenant du pied de page*/
	
	width: 780px;
	margin: auto;
	height: 20px;
	text-align: center;
	font-weight: bold;
	border: 1px solid;
	bottom: 20px;
}