Aller au contenu

PB : Positionnement...

Hells_Dark

Par Hells_Dark
dans (X)HTML et CSS

 Partager

Sujets conseillés

Hells_Dark

Hells_Dark

Posté
Posté (modifié)

Bijour à tous !!! ;) Je suis new dans la communauté !

C'est étonnant, mais je n'arrive pas à mettre mon site dans un tableau...

En fait ce que je veux, c'est que le site soit dans un tableau (quand je dis tableau, c'est 100% css, pas de table, de td et tt... ;) ) sans marge en haut ou en bas mais juste sur les cotés...

Mais étonnemment je n'arrive pas... :blink:

Un petit exemple (simple) siouplait, messieurs ? :rolleyes:

(comme sur ce site par ex : http://www.alistapart.com/articles)

Moi, j'avais fait un truc type :

#contour {

border-top : 0px ;

border-bottom : 0px

border-left : 50px ;

border-right : 50px ;

}

mais ça ne mlarche pas du tt...

Merci ! :P

Modifié par Hells_Dark
Lien vers le commentaire
Partager sur d’autres sites
Monique

Monique

Posté
Posté

Bonjour Hells_Dark,

Et bienvenue sur le Hub :)

Le principe général, pour obtenir ce que tu souhaites, est de placer l'ensemble de la page dans un bloc conteneur auquel on attribue ce style

.conteneur {
  text-align: center;
}

et de rétablir l'alignement à gauche dans le bloc ainsi centré avec le style

.centre {
  text-align: left;
}

Le style du bloc centre sera complété en fonction du but recherché, une boîte élastique ou de largeur fixe.

Tu trouveras les différentes solutions expliquées sur cette page Initiation au centrage CSS

Lien vers le commentaire
Partager sur d’autres sites
Hells_Dark

Hells_Dark

Posté
  • Auteur
Posté (modifié)

HEu....pour bien comprendre, je vais vous donner ce que j'ai fait (enfin..testé...)

Voilà pr la page...

<!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" xml:lang="fr">
  <head>
    <title>HELLSPLAYERS TESTS CSS</title>
    <meta http-equiv="Content-Type" content="text/HTML; charset=iso-8859-1" />
  
<link href="styles/hells_css.css" rel="stylesheet" type="text/css" />
</head>
<body>
  
<div id="ensemble">
<div id="center"
<div id="logo"><img src="images/hp3.gif" alt="Hellsplayers © 2004" /></div>
<div id="menu"> 
  <ul>
    <img src="images/menu_menu.gif" alt="Menu" /> 
    <li><a href="#">Accueil</a></li>
    <li><a href="#">Accueil</a></li>
  </ul>
  <ul>
    <img src="images/menu_membre.gif" alt="Zone membre" /> 
    <li><a href="#">Accueil</a></li>
    <li><a href="#">Accueil</a></li>
  </ul>
  <ul>
    <img src="images/menu_plus.gif" alt="Plus" /> 
    <li><a href="#">Accueil</a></li>
    <li><a href="#">Accueil</a></li>
  </ul>
</div>
</div>
</div>

</body>
</html>

Voilà pr la page...

Et le css :

body {
background-color : #F3F3F3;
border-top : 5px solid #C00;
}

p, div, h1, h2, h3 {position : absolute;}

* {
font-size : 12px;
font-family :  Verdana, Arial, Helvetica, Geneva, sans-serif; 
color : black;
font-weight : bold;
margin:0; /* suppression de toutes les marges */
padding:0;
}

#ensemble {
background-color : #FFFFF;
border : 1px solid #C00;
height : 100%;
width : 800px;
text-style : center;
}

#centre {
text-style : left;
}

#logo {
float : left;
margin-top : 10px;
margin-left : 20px;
margin-bottom : 10px;
}

#menu {
width : 100px;
float : left;
margin-top : 80px;
margin-left : 20px;
}

#menu ul {
margin-top : 10px;
border : thin dotted #E1D6CE;
list-style-type : none;
}

#menu li {
padding-left : 10;
}

#menu li a {
color : #CC0000;
text-decoration : none;
}

#menu li a:hover {
color : #FF0000
}

...help :unsure:

Modifié par Hells_Dark
Lien vers le commentaire
Partager sur d’autres sites
Monique

Monique

Posté
Posté

Attention aux erreurs d'écriture !

text-style : center; n'existe pas

=> text-align: center;

<div id="center" la balise n'est pas fermée et le nom de l'identificateur ne correspond pas à celui de ta feuille de style

=> <div id="centre">

Pourquoi ces positions absolues ?

p, div, h1, h2, h3 {position : absolute;}

Tu peux les supprimer et, eventuellement, jouer avec des valeurs de margin ou padding pour positionner tes blocs.

Les styles à appliquer

#ensemble {
 text-align: center;
}

#centre {
 margin-left: auto;
 margin-right: auto;
 text-align: left;
 width: 800px;
 border: 1px solid #C00;
 height: 100%;
}

Lien vers le commentaire
Partager sur d’autres sites
Hells_Dark

Hells_Dark

Posté
  • Auteur
Posté (modifié)

Désolé pour ces fautes d'inattention.... :blush:

En fait, le truc des absolus...c'était quand j'utilisais des positions absolues, sinon, IE s'y perdait...mais je devrais l'enlever maintenant.... :blink:

Je vais faire des essais.... :lol:

Modifié par Hells_Dark
Lien vers le commentaire
Partager sur d’autres sites
Monique

Monique

Posté
Posté
Désolé pr ces fautes d'inattention.... :blush:

Cela peut arriver à tout le monde ;)

C'est pourquoi il est important de soumettre ton code aux validateurs, même quand il s'agit seulement d'essais.

Si ta page n'est pas encore en ligne, tu peux coller directement ton code dans ceux-ci

validateur HTML

validateur CSS

Lien vers le commentaire
Partager sur d’autres sites
Hells_Dark

Hells_Dark

Posté
  • Auteur
Posté

J'ai corrigé le tout, tout est validé... :P

cependant, ce n'est pas ce que je voulais... :unsure:

1) le menu est à droite (???)

2) le contenu du menu est centré ...

3) le tout n'a pas le contour que je voulais...

Mon code :

<!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" xml:lang="fr">
  <head>
    <title>HELLSPLAYERS TESTS CSS</title>
    <meta http-equiv="Content-Type" content="text/HTML; charset=iso-8859-1" />
  
<link href="styles/hells_css.css" rel="stylesheet" type="text/css" />
</head>
<body>
  
<div id="ensemble"><div id="center">

  <div id="logo"><img src="images/hp3.gif" alt="Hellsplayers © 2004" /></div>
  <div id="menu"> 
    <ul>
      <li><img src="images/menu_menu.gif" alt="Menu" /></li>
      <li><h1><a href="ghd">Accueil</a></h1></li>
      <li><h1><a href="hrtf">Accueil</a></h1></li>
    </ul>
    <ul>
      <li><img src="images/menu_membre.gif" alt="Zone membre" /></li>
      <li><h1><a href="hrt">Accueil</a></h1></li>
      <li><h1><a href="rht">Accueil</a></h1></li>
    </ul>
    <ul>
      <li><img src="images/menu_plus.gif" alt="Plus" /></li>
      <li><h1><a href="rth">Accueil</a></h1></li>
      <li><h1><a href="thr">Accueil</a></h1></li>
    </ul>
  </div>
  
</div>
</div>

</body>
</html>

mon css :

body {
background-color : #F3F3F3;
border-top : 5px solid #C00;
}

* {
font-size : 12px;
font-family :  Verdana, Arial, Helvetica, Geneva, sans-serif; 
color : black;
font-weight : bold;
margin:0; /* suppression de toutes les marges */
padding:0;
}

#ensemble {
text-align : center;
}

#centre {
background-color : #FFFFFF;
border : 1px solid #C00;
text-align : left;
margin-top: 10px;
margin-left : auto;
margin-right : auto;
width : 800px;
height : 100%;
}

#logo {
float : left;
margin-left : 20px;
margin-bottom : 10px;
}

#menu {
float : left;
margin-top : 80px;
margin-left : 20px;
width : 100px;
}

#menu ul {
margin-top : 10px;
border : thin dotted #E1D6CE;
list-style-type : none;
}

#menu li {
padding-left : 0px;
}

#menu li h1 {
padding-left : 10px;
}

#menu li a {
color : #CC0000;
text-decoration : none;
}

#menu li a:hover {
color : #FF0000
}

...hem :whistling:

Lien vers le commentaire
Partager sur d’autres sites
Monique

Monique

Posté
Posté
J'ai corrigé le tout, tout est validé... :P

cependant, ce n'est pas ce que je voulais... :unsure:

1 : :up:

2 : :rolleyes:

Tu as oublié de corriger <div id="center">

Essaie en supprimant les float : left; pour le logo et le menu.

Lien vers le commentaire
Partager sur d’autres sites
Hells_Dark

Hells_Dark

Posté
  • Auteur
Posté

mmm, en effet !

Cela m'a l'air beaucoup mieux !!! :D

Gràce à toi Monique, je suis sur la bonne voie !

J'ai commandé un bouquin vendredi sur les css sur eyerolles.com , je vais me perfectionner encore un peu (j'en ai bien besoin) !

Merci ;)

Lien vers le commentaire
Partager sur d’autres sites
Hells_Dark

Hells_Dark

Posté
  • Auteur
Posté

Bon, tout m'a l'air bon mais...

Maintenant je voudrais mettre encore un cadre à droite du menu pour mettre...he ben, le contenu du site pardis !

J'avais pensé faire ainsi :

#contenu {
float : left;
margin-left : 120px;
margin-right : 10px;
margin-bottom : 10px;
border : 1px solid #E1D6CE;
}

Mais ça ne marche pas....

Le "contenu" se place après tout (après le tableau contenantn le logo et le menu...)

Une idée ? :blink:

CSS :

body {
background-color : #F3F3F3;
border-top : 5px solid #C00;
}

* {
font-size : 12px;
font-family :  Verdana, Arial, Helvetica, Geneva, sans-serif; 
color : black;
font-weight : bold;
margin:0; /* suppression de toutes les marges */
padding:0;
}

#ensemble {
text-align : center;
}

#center {
background-color : #FFFFFF;
border : 1px solid #C00;
text-align : left;
margin-top: 10px;
margin-left : auto;
margin-right : auto;
width : 800px;
}

#logo {
margin-left : auto
margin-right : auto;
border-bottom : 1px solid #C00;
}

#menu {
margin-top : 10px;
margin-bottom : 10px;
margin-left : 10px;
width : 102px;
}

#menu ul {
margin-top : 10px;
border : 1px solid #E1D6CE;
list-style-type : none;
}

#menu li {
padding-left : 0px;
}

#menu li h1 {
padding-left : 10px;
}

#menu li a {
color : #CC0000;
text-decoration : none;
}

#menu li a:hover {
color : #FF0000
}

#contenu {
float : left;
margin-left : 120px;
margin-right : 10px;
margin-bottom : 10px;
border : 1px solid #E1D6CE;
}

PAGE :

<!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" xml:lang="fr">
  <head>
    <title>HELLSPLAYERS TESTS CSS</title>
    <meta http-equiv="Content-Type" content="text/HTML; charset=iso-8859-1" />
  
<link href="styles/hells_css.css" rel="stylesheet" type="text/css" />
</head>
<body>
  
<div id="ensemble"><div id="center">

    <div id="logo"><img src="images/hp3.gif" alt="Hellsplayers © 2004" width="670" height="70" /></div>
  <div id="menu"> 
    <ul>
      <li><img src="images/menu_menu.gif" alt="Menu" /></li>
      <li><h1><a href="ghd">Accueil</a></h1></li>
      <li><h1><a href="hrtf">Forum</a></h1></li>
    </ul>
    <ul>
      <li><img src="images/menu_membre.gif" alt="Zone membre" /></li>
      <li><h1><a href="hrt">Accueil</a></h1></li>
      <li><h1><a href="rht">Accueil</a></h1></li>
    </ul>
    <ul>
      <li><img src="images/menu_plus.gif" alt="Plus" /></li>
      <li><h1><a href="rth">Team</a></h1></li>
      <li><h1><a href="index.php?page=liens">Liens</a></h1></li>
    </ul>
  </div>
  <div id="contenu">5555</div>
  
</div>
</div>

</body>
</html>

(codes validés bien sur (pas 2 fois les même erreurs ;) ))

Lien vers le commentaire
Partager sur d’autres sites
LaurentDenis

LaurentDenis

Posté
Posté

Il y a une erreur de conception et d'utilisation du float.

Tu fait flotter ton <div id="contenu"> qui est placé après ton menu.

Il faut faire l'inverse :

- conserver cet ordre HTML "menu" puis "contenu", mais appliquer le float au menu;

- ou bien inverser l'ordre HTML (mieux) "contenu" puis "menu", et faire flotter le contenu.

En effet, le float extrait l'élément concerné de l'affichage normal (ce qu'on appelle le flux) pour permettre à ce qui le suit de le "flanquer" sur le côté.

Voir http://openweb.eu.org/articles/initiation_float/ où tu trouveras un gabarit HTML CSS minimal de ce type.

Lien vers le commentaire
Partager sur d’autres sites
Hells_Dark

Hells_Dark

Posté
  • Auteur
Posté (modifié)

Oui, cette fois le menu se retrouve bien à gauche du contenu ! :)

Cependant ce qu''il ya à l'intérieur du contenu dépasse de la boite contenu...

Pourtant j'ai mis height : 100%; pour cette boite... :o

body {
background-color : #F3F3F3;
border-top : 5px solid #C00;
border-bottom: 5px solid #C00;
}

* {
font-size : 12px;
font-family :  Verdana, Arial, Helvetica, Geneva, sans-serif; 
color : black;
font-weight : bold;
margin:0; /* suppression de toutes les marges */
padding:0;
}

#ensemble {
text-align : center;
margin-bottom : 10px;
}
#center {
background-color : #FFFFFF;
border : 1px solid #E1D6CE;
text-align : left;
margin-top: 10px;
margin-left : auto;
margin-right : auto;
width : 900px;
}

#tribune {
margin-top: 10px;
margin-left: 0px; /* on place ce bloc à droite du bloc menu de 180px de large */
width: 200px;
height: 150px;
overflow: auto; /* cette propriété va permettre le scroll de ce bloc */
font-size: 12px;
background-color: #EEE7E5;
border: solid 1px #003388;
}
#intribune {
margin-left: 10px;
}

#news {
width : 300px;
font-size : 12px;
border : 1px solid #C00;
margin-top : 10px;
margin-bottom : 10px;
padding-left : 10px;
}

#posts {
width : 300px;
font-size : 12px;
border : 1px solid #C00;
margin-top : 10px;
margin-bottom : 10px;
padding-left : 10px;
}

#edito {
width : 300px;
font-size : 12px;
border : 1px solid #C00;
margin-top : 10px;
margin-bottom : 10px;
padding-left : 10px;
}

#citation {
width : 300px;
font-size : 12px;
border : 1px solid #C00;
margin-top : 10px;
margin-bottom : 10px;
padding-left : 10px;
}

span {
color : #CC0000;
}

#logo {
border-bottom : 1px solid #E1D6CE;
}

#menu {
margin-top : 10px;
margin-bottom : 10px;
margin-left : 10px;
width : 102px;
}

#menu ul {
margin-top : 10px;
border : 1px solid #E1D6CE;
list-style-type : none;
}

#menu li {
padding-left : 0px;
}

#menu li h1 {
padding-left : 10px;
}

#menu li a {
color : #CC0000;
text-decoration : none;
}
#menu li a:hover {
color : #FF0000
}

#menu li h2 {
font-size : 10px;
padding-left : 10px;
}
#menu li h2 span {
font-size : 10px;
color : #CC0000;
}

.linka {
color : #CC0000;
text-decoration : none;
}
.linka a:hover {
color : #FF0000;
}

.linkb{
font-size:11px;
text-decoration : none;
color: #003388;
}
.linkb:hover {
color: #666666;
}
.linkb:visited {
color: #003388;
}


#contenu {
float : right;
width : 766px;
height: 100%;
margin : 5px;
margin-top : 10px;
margin-bottom : 10px;
border : 1px solid #E1D6CE;
}

#incontenu {
padding-left : 10px;
padding-top : 10px;
}

(problème uniquement avec Mozilla)

De plus la boite contenu n'a pas une marge de 10 pixel à droite par rapport à la boite "ensemble".... Sous Mozilla, si, mais sous IE, elle est plus grande :angry:

Modifié par Hells_Dark
Lien vers le commentaire
Partager sur d’autres sites
Hells_Dark

Hells_Dark

Posté
  • Auteur
Posté

Je commence à en avoir un peu marre... :(

J'ai essayé avec la boite contenu en position relative et le menu en float cette fois...

C'est poarfait avec Mozilla, un désastre avec IE...

:blink:

Je commence à me dire que j'aurais jamais exactement ce que je veux...snif

:nono:

Lien vers le commentaire
Partager sur d’autres sites
Hells_Dark

Hells_Dark

Posté
  • Auteur
Posté (modifié)

Finalement, je crois que je vais tout positionner en absolu...

Ce sera surement plus simple :hypocrite:

Absolute est bien censé se faire par rapport à la boite dans lequel nos trucs sont ?

PArce que chez moi, ça soirt de partt, rien n'est respécté....

:yoot:

Modifié par Hells_Dark
Lien vers le commentaire
Partager sur d’autres sites
Hells_Dark

Hells_Dark

Posté
  • Auteur
Posté (modifié)

En faitle pb, c'est que quand je met par exemple :

#menu {

position : absolute;

top : 10px;

left : 10px;

width : 102px;

}

Pour le menu, et bien, le menu se positionne à 10 pixel du bord de la fenêtre et pas à 10 pixel du bord de la boite "ensemble" dans laquelle le menu (et tout le reste du site...) est....

Je commence à désésperer... :unsure:

personne ne comprend mon pb ? DItes le moi, faut pas hésiter :P

Modifié par Hells_Dark
Lien vers le commentaire
Partager sur d’autres sites
MissMonde

MissMonde

Posté
Posté

Bonjour Hells-Dark,

un élément en position absolue se place par rapport, soit au body, soit à un contenant lui-même positionné.

ce qui veut dire que si tu ajoutes une position relative au contenant de ton menu, il se positionnera comme tu veux et le fait de mettre "position : relative" au contenant, ne change rien pour lui.

dis-moi si ce n'est pas clair !! ;)

Lien vers le commentaire
Partager sur d’autres sites
Hells_Dark

Hells_Dark

Posté
  • Auteur
Posté (modifié)

Bijour MissMonde et Merci :lol:

Heu, a lire comme ça, ça parait clair...mes éléments ne se positionnent comme je veux....i mais...

C'est vraiment bizarre ! En fait, la boite du menu est correctement positionné ainsi que la boite du contenu par rapport au contenant !

Le problème, c'est que ces 2 boites ne sont pas vraiment dans le contenant (sur la page,bien sur, dans le code, elles y sont).

En effet, le contenant a un fond blanc et celui ci ne vas pas plus loin que le logo qui se situe en haut du contenant.... :wacko:

Et j'ai exactement le même problème pour le contenu de la boite "contenu" ! Il dépasse largement de la boite en bas !

Que dois je faire ? J'ai pourtant mis height : 100% pour la boite "ensemble" (celle qui contient l'ensemble du site) et idem pr la boite "contenu" (qui contient le... ;) ).

Modifié par Hells_Dark
Lien vers le commentaire
Partager sur d’autres sites
MissMonde

MissMonde

Posté
Posté

voici ce que j'ai compris:

apparemment, tu as un body dans lequel il y a ton background que tu veux appliquer à toute ta page.

à l'intérieur il y a un contenant (div#ensemble), dans lequel tu as mis un menu à gauche en position absolue et un contenu à droite en position float.

voici ce que je ferais :

si tu appliques une position relative au div "ensemble", ton menu va se positionner par rapport à lui.

si tu enlèves la position float au contenu de droite, il va revenir dans le flux et le background du body va s'appliquer à lui. il ne faut pas oublier de laisser une marge à gauche pour le menu;

attention : comme le menu est en position absolue, le background ne s'appliquera à lui qu'à concurrence de la hauteur du contenu de droite. c'est l'inconvénient de la position absolue.

Est-ce que c'est mieux maintenant ?

Lien vers le commentaire
Partager sur d’autres sites
Hells_Dark

Hells_Dark

Posté
  • Auteur
Posté (modifié)

Et bien...heu... merci !

Voici ce que j'ai fait :

J'ai enlevé le position : absolute du contenu (j'avais pas mis float mais absolu...enfin au début, c'était float mais avec les modifs...bref !)

J'ai mis une marge à celui ci pour laisser la place au menu !

Et...ça a l'air de marcher ! C'est pas encore exactement ça au pixel près mais ça viendra ! Bon, bah je pars continuer !

Encore merci l'amie... :)

Modifié par Hells_Dark
Lien vers le commentaire
Partager sur d’autres sites
Hells_Dark

Hells_Dark

Posté
  • Auteur
Posté (modifié)

Pendant que j'y suis :D ,

1) j'ai un espace de 2 px spous mon logo (sous mozilla pas sur IE) qui est contenu dans la boite "ensemble" et la boite "header" suivante :

#header {
border-bottom : 1px solid #E1D6CE;
}

Entre le bord du bas de la boite header et l'image, il ya 2px, ça peut venir d'ou ?

2) Si le contenu est plus petit en largeur que le menu, celui ci dépasse alors de la boite ensemble en bas...comment y remédier ? :whistling:

Modifié par Hells_Dark
Lien vers le commentaire
Partager sur d’autres sites
MissMonde

MissMonde

Posté
Posté

bon, j'arrive à mes limites :

1. sur les 2 px je n'ai pas assez de renseignements sur la disposition de tes blocs dans la feuille html et de leurs marges, paddings, borders et positions dans la css.

2. il y a un excellent article sur Alsacréations à propos du choix du positionnement des blocs dans une mise en page :

http://www.alsacreations.com/blog/index.ph...nnement-choisir

pour ce qui est de ce problème du positionnement absolu, j'espère pouvoir le résoudre grâce à un article de Pompage.net sur le pied de page, mais je n'ai pas réussi à reproduire le cas exposé (il y a du Javascript et j'ai du mal avec ce language).

http://pompage.net/pompe/pieds/

Désolée :(

Lien vers le commentaire
Partager sur d’autres sites
Hells_Dark

Hells_Dark

Posté
  • Auteur
Posté

Et bien, merci pour ces adresses ! Je vais les lire avec attention... ;)

Et si tu veux mon css actuel, le voilà :

body {
background-color : #F3F3F3;
border-top : 5px solid #C00;
}

* {
font-size : 12px;
font-family :  Verdana, Arial, Helvetica, Geneva, sans-serif; 
color : black;
font-weight : bold;
margin:0; /* suppression de toutes les marges */
padding:0;
}

#ensemble {
text-align : center; /* centre la boite */
}
#center {
text-align : left; /* remet le texte à gauche */
position : relative;

background-color : #FFFFFF;
border : 1px solid #E1D6CE;
margin-top: 10px;
margin-left : auto;
margin-right : auto;
margin-bottom : 10px;
width : 900px;
}

span {
color : #CC0000;
}

#header {
margin : 0px;
border-bottom : 1px solid #E1D6CE;
}

#menu {
position : absolute;
top : 70px;
left : 10px;
width : 102px;
}
#menu ul {
margin-top : 10px;
border : 1px solid #E1D6CE;
list-style-type : none;
}
#menu li {
padding-left : 0px;
}
#menu li h1 {
padding-left : 10px;
}
#menu li a {
color : #CC0000;
text-decoration : none;
}
#menu li a:hover {
color : #FF0000
}
#menu h2 {
font-size : 10px;
padding-left : 10px;
}
#menu span {
font-size : 10px;
color : #CC0000;
}

#contenu {
width : 766px;
height: 100%;
margin-top : 10px;
margin-bottom : 10px;
border : 1px solid #E1D6CE;
margin-left : 122px;
}

#incontenu {
padding-left : 10px;
padding-top : 10px;
padding-bottom : 10px;
}


.linka {
color : #CC0000;
text-decoration : none;
}
.linka a:hover {
color : #FF0000;
}
.linkb {
font-size:11px;
text-decoration : none;
color: #003388;
}
.linkb:hover {
color: #666666;
}

#tribune {
width : 300px;
border : 1px solid #C00;
padding-left : 10px;
padding-bottom : 10px;
}
#tribune h1 {
text-align : center;
}
#scroll {
margin-top: 10px;
margin-left: 0px; /* on place ce bloc à droite du bloc menu de 180px de large */
width: 280px;
height: 150px;
overflow: auto; /* cette propriété va permettre le scroll de ce bloc */
font-size: 12px;
background-color: #EEE7E5;
border: solid 1px #003388;
}
#inscroll{
margin-left: 10px;
}

#news {
width : 300px;
font-size : 12px;
border : 1px solid #C00;
margin-bottom : 10px;
padding-left : 10px;
}

#posts {
width : 300px;
font-size : 12px;
border : 1px solid #C00;
margin-top : 10px;
margin-bottom : 10px;
padding-left : 10px;
}

#edito {
width : 300px;
font-size : 12px;
border : 1px solid #C00;
margin-top : 10px;
margin-bottom : 10px;
padding-left : 10px;
}

#citation {
width : 300px;
font-size : 12px;
border : 1px solid #C00;
margin-top : 10px;
margin-bottom : 10px;
padding-left : 10px;
}

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...