28220 sujets

CSS et mise en forme, CSS3

Problème positionnement entre ie et ff

Hello Smiley smile
- Je suis en train de refaire mon blog (Dotclear) et la je me heurte à quelques problèmes!!! J'ai déjà parcouru divers tutos et aide rien à faire, j'arrive pas régler mes problèmes c'est rageant!!! Smiley decu

Mes problèmes:

- J'ai un décalage important entre la fin des billets et le bas de la page?

- Un autre problème que je n'arrive pas comprendre et surtout résoudre c'est ma page elle touche pas le bas de mon navigateur, il reste toujours une bande grise?
pourtant si j'ai bien compris a ma page j'ai mis:
#page{
width: 512px;
margin: 0 auto;
text-align: left;
}

Voila en gros les problèmes qui font que je m'arrache les cheveux depuis 3/4 jrs Smiley bawling je laisse mes codes des fois qu'une âme charitable puisse m'aider et surtout m'apporter une réponse Smiley smile
regarder pas trop la gueule du blog il va encore changer au niveau de l'esthétique quand mes soucis seront régler Smiley langue






style css

@import "layout.css";
@import "layout-gauche.css"; 
 
/* Les éléments HTML en général
-------------------------------------------------------- */
body{
	background: #D9D9DA; /* modifie le fond de la page */
	color: #A7A5A5;/* modifie la couleur des messages dans commentaire et la selection de la pagination */
	font-size: 80%;
	line-height: 1.6em;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}

h1, h2, h3, h4, h5, h6{
	font-family: "Trebuchet MS", sans-serif;
}

h1{font-size: 1.5em;}
h2{font-size: 1.4em;}
h3{font-size: 1.3em;}
h4{font-size: 1.2em;}
h5{font-size: 1.1em;}
h6{font-size: 1em;}

pre, code{
	font-size: 1.2em;
}

pre{
	width: 100%;
	overflow: auto;
	border: 1px solid #FDFCFC;
}

fieldset{
	border: none;
}

label{
	cursor: pointer;
	cursor:  hand;
}

.field label{
	display: block;
}

input,textarea{
	border: 1px solid #8B8888; /* PAR: et le cadre des messages a ecrire*/
}

textarea{
	width: 100%;
	font-size: 1em;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}

a{
	color: #8B8888;  /* change la couleur de par: */
}

a:visited{
	color: #8B8888; /* modifie la couleur de commentaire et aucun commentaire */
}

a:hover{
	color: #3C3C3C; /* modifie la couleur au passage de la souris de commentaire et aucun commentaire */
}

.left{
	float: left;
	margin-right: 1em;
}

.right{
	float: right;
	margin-left: 1em;
}

/* La page
-------------------------------------------------------- */
#page{
	background: url(/dotclear/images/page1.gif) repeat-y center top;
	color: inherit;
     
       
}
 
/* L'entête
-------------------------------------------------------- */
#top{
	height: 199px;
        margin: 0 0 5px 0;
       
}

#top h1{
	height: 199px;
	margin: 0;
	padding: 0;
      text-align: center;
}

#top h1 a{
	text-decoration: none;
	color: #FFFFFF;
}

#top img {
border : 0;
margin : 0;
padding: 0;

}





/* Le prélude
-------------------------------------------------------- */ 
#prelude{
	background: transparent;
	color: #FFFFFF;
	text-align: center;
}

#prelude a{
	color: #8C8A8B;
	background: transparent;
}

#prelude a:hover{
	color: #8C8A8B;
	background: transparent;
}

#prelude{
position: absolute;
top: -10em;

}

/* Le contenu
-------------------------------------------------------- */
.day-date{
	padding-left: 20px;
	margin-left: -25px;
	color: #8C8A8B;
	background: transparent url(img/day-date.png) no-repeat left center;
	font-style: italic;
}
.day-date{
display : none; /* SUPPRIME LA DATE AU DESSUS DES BILLETS */
}

.post-title{
	color : #666;
	background: transparent;
	margin-bottom: 0;
      text-align: center;
      display: none; /* enleve le titre du billet*/
}

.post-title a{
	color: #666;
	background: transparent;
	text-decoration: none;
}

.post-info{
	margin-top: 0;
	color:  #000000;
	background: transparent;
      padding-bottom: 1ex;
	/*border-bottom: 1px solid #FAFAFA;*/
      text-align: center;
      display: none; /* enleve parphiling:: au dessus du billet */
}

.post-info a{
	color: #FAFAFA;
	background: transparent;
	text-decoration: none;
}


.post-content{
        text-align: justify;
}

.post-content blockquote{
	font-family: Georgia, serif;
	font-style: italic;
}

.post-info-co{
      text-align: right;
      margin-right: 80px;
      margin-top: -30px;
      height: 16px;
      background: transparent;
      font-size: 0.75em;  /* modifie la taille de aucun commentaire */
     
}

#trackbacks blockquote, #comments blockquote{
	border: 1px solid #666;
	margin: 1em 0;
	padding: 1ex 1.5em;
}
#trackbacks { display: none; } /* enleve trackbacks dans les commentaires */
.suite{
    margin-left: 50px;
    margin-bottom: 0;
    height : 16px;
}

.post-content img {
   border: 0; /* supprime la bordure autour du billet */
  
}
#content {
  height: 400px;
  overflow: auto;
}



/* La barre de navigation
-------------------------------------------------------- */
#sidebar div{
	border-bottom: 1px solid #F0F0F0;  /* CHANGE LES LIGNES ENTRE CHAQUE ELEMENTS DU SIDEBAR*/
	color: inherit;
}

#sidebar div ul{
	margin: 0;
	padding: 0;
	list-style: none;
}

#sidebar h2, #sidebar h3{
	color: #9ED200;
	margin: 0 0 1ex 0;
}

#sidebar h3{
	font-size: 1em;
	margin: 0;
}

#sidebar div#search{
	background: transparent;
	color: inherit;
	line-height: 2.3em;
}

#search fieldset, #search p{
	margin: 0;
	padding: 0;
}

#q{
	padding-left: 18px;
	background: url(img/q.png);
}

#sidebar div#calendar{
	/*border-top: 1px solid #F0F0F0;*/
}

#sidebar div#calendar table{
	font-size: 0.8em;
	text-align: center;
	margin: 0 auto;
	border-collapse: collapse;
}

#sidebar div#calendar table caption{
	margin: 0 auto;
}

#sidebar div#calendar table th{
	color: #493;
	background: transparent;
}

#sidebar div#calendar table td{
	width: 14%;
	line-height: 2em;
	border: 1px solid #EEE;
}

#sidebar div#calendar table td a{
	display: block;
	background: #EFA;
	color: #493;
	font-weight: bold;
	text-decoration: none;
}

#sidebar div#calendar table td a:hover{
	background: #DBB8DC;
	color: #636;
}

#navlist
{
padding-top: 250px;
padding-left: 0;
margin-left: 30px;
border-bottom: 1px solid gray;
width: 120px;
}

#navlist li
{
list-style: none;
margin: 0;
padding: 0.25em;
border-top: 1px solid gray;
}

#navlist li a { text-decoration: none; }





/* Le pied de page
-------------------------------------------------------- */

#footer{
        margin: 0;
	padding: 1em;
	border-top: 0px solid #CCC;
	background: transparent; /* CHANGE LA COULEUR DU FOOTER*/
	color: #666;
        padding-top: 6em;
        padding-left: 10em;
}

#footer a{
	color: #999;
}



layout

html, body{
	margin: 0;
	padding: 0;
	text-align: center;
}


#top{
	margin: 0;
}

#top h1{
	margin: 0;
}


#prelude{
	position: absolute;
	width: 500px;
	top:  7px;
	left: 50%;
	margin: 0 0 0 -226px;
	padding: 0 1em;
}

#page{  
	width: 512px;
	margin: 0 auto;
	text-align: left;
}

#main{
      text-align: center;
      width: 300px;
}

#content{
	  
      margin: 0 auto;
      padding: 5em 0 0 0; 
      text-align: left;
}

.post{
	margin-bottom: 5em;
      
}

#sidebar div{
	margin: 0 0 0 30px;
	padding: 1ex 1em;
}


#footer{
	padding:0;
	margin : 0;
	clear: both;
}


layout-gauche

#page{  
	width: 512px;
	margin: 0 auto;
	text-align: left;
}

#main{
	float: right;
	width: 300px;
     
      
}

#content{
        width: 280px;
	margin: 0 30px 0 0;
        padding: 1em 0 0 0;
}   


#sidebar{
	float: left;
	width: 120px;
	padding-bottom: 4em;
}

#sidebar div{
	margin: 0 0 0 30px;
	padding: 1ex 1em;
}



Merci d'avance Smiley smile
Modifié par philrig (03 Aug 2006 - 19:57)
Bonjour philrig et bienvenue sur Alsacréations Smiley smile ,


En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne
Oups! désolé je viens de rectifier Smiley confused

Comme j'y suis je me pause une question, j'ai surfé sur mon blog avec un écran de petite taille et je constate que je me retrouve avec une barre de défilement, alors que j'ai justement mis une barre sur mes billet résultat 2 barre c'est beaucoup moins cool!!! Smiley decu

Comment faire pour voir la page complète en permanence avec différent affichage d'écran, et pouvoir scroller uniquement les billets?

voila un lien qui montrera mieux le résultat que je recherche exemple en plus il y a une barre de défilement génial, exactement le genre de chose que je cherche d'ailleurs si quelqu'un a une piste pour la barre?

Merci Smiley cligne
Modifié par philrig (03 Aug 2006 - 22:22)
Sujet clos
Aller à