Sujet Précédent Sujet Suivant

[css - html] comment faire pour que le ...

Fermé
boss0211 Messages postés 264 Date d'inscription lundi 13 février 2006 Statut Membre Dernière intervention 9 septembre 2007 - 4 janv. 2007 à 19:50
boss0211 Messages postés 264 Date d'inscription lundi 13 février 2006 Statut Membre Dernière intervention 9 septembre 2007 - 6 janv. 2007 à 15:45
bonjour!!!
comment je pourais faire (quel code css) pour mettre le contenu de la page à coté des menu (sans les tableau bien entendu)
car le contenu est en dessous des menu..
merci

style.css 
a:alink {
color:#000099;
}

a:link{
color:#000099;
}

a:vlink{
color:#990099;
}

a:hover {
color: red;
}

body {
PADDING-RIGHT: 0px; 
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px; 
MARGIN: 0px; 
PADDING-TOP: 0px; 
FONT-WEIGHT: normal;
TEXT-ALIGN: left;
TEXT-DECORATION: none;
background: #CCCCCC;
}

#cadre {
position:absolute;
width: 800px;
margin-left:10%;
margin-right:10%; 
text-align: left;
border-collapse: collapse;
border: 1px solid black;
background: #FFFFFF;
}

#centre  {
margin-left: 15%; 
margin-right: 15%; 
}

img {
border:0px;
}

#header {
padding: 0px;
background: url(../img/ban.gif) no-repeat left;
width: 800px;
height: 80px;
}

.menu_barre {
padding: 0px;  
background: url(../img/menu_bar.gif) repeat left;
height: 34px;
width: 800px;

}

.text_bar  {
padding-top: 6px;
color: #0EE010;
}
a.text_bar:link {
color: #0EE010;
}
a.text_bar:vlink {
color: #0DA504;
}

.menu_titre {
width: 15%;
padding-top: 2px;
background: #666666;
font-weight: bold;
text-decoration: none;
text-align: center;
color: white; 
border-collapse: collapse;
border: 1px solid black;
}

.menu_contenu {
width: 15%;
padding: 0px;
background: #C0C0C0;
font-weight: normal;
text-decoration: underline;
text-align: center;
border-collapse: collapse;
border: 1px solid black;
border-top: 0px;
}

.corps {
padding-left: 20%;
padding-right:auto;
padding-bottom: auto;
padding-top: 0%;
border-collapse: collapse;
border: 1px solid black;
font-weight: normal;
width:100%;
}


index.html 
<body>
<div id="cadre">
<div id="header"></div>
<div class="menu_barre"><div class="text_bar">
<img src="img/ico_home.png" /> <a href="#accueil" class="text_bar">Accueil</a>&nbsp; &nbsp;
<img src="img/livredor.png" /> <a href="#livredor" class="text_bar">Livre d'or</a>&nbsp; &nbsp;

</div> <!-- position text -->
</div> <!-- bar menu -->
<br />
<div class="menu_titre">Menu</div>
<div class="menu_contenu">
<a href="#" >Lien</a><br />
<a href="#" >Lien</a><br />
<a href="#" >Lien</a><br />
<a href="#" >Lien</a><br />
<a href="#" >Lien</a><br />
<a href="#" >Lien</a><br />
</div>
<br />
<div class="menu_titre">Menu n°2</div>
<div class="menu_contenu">
<a href="#" >Lien</a><br />
<a href="#" >Lien</a><br />
<a href="#" >Lien</a><br />
<a href="#" >Lien</a><br />
<a href="#" >Lien</a><br />
<a href="#" >Lien</a><br />
</div>
<div class="corps">
<h1>Ceci sera le contenu de la page le corps etc... J'essaye de faire une ligne grande pour voir les cent pourcent où il vont! voila je pence que c'est bon!!!</h1>
</div> <!-- corps -->
</div> <!-- cadre -->
</body>
A voir également:

6 réponses

Réponse 1 / 6
king
4 janv. 2007 à 22:51
Sans div référence, faut préciser la position avec "top:" et "margin-left :" pour ton contenu

Avec un conteneur (apparemment appelé ici "cadre"), suffit de mentionner le margin-left à autant de % ou px etc qui sera considéré depuis le bord gauche du cadre, dans ce cas.
0
Réponse 2 / 6
boss0211 Messages postés 264 Date d'inscription lundi 13 février 2006 Statut Membre Dernière intervention 9 septembre 2007 8
4 janv. 2007 à 22:54
je ne comprend pas bien.
Je vais te montrer une image
http://simplement.goldzoneweb.info/sdz/prblm.JPG
0
Réponse 3 / 6
Gihef Messages postés 5150 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 2 778
5 janv. 2007 à 00:18
Bonjour,

Pour mettre des blocs côte à côte, le plus simple est d'utiliser le float.

Comme tu as 2 menus dans 4 blocs à gauche, je les ai regroupés dans une <div id="bloc_menus"> (fond rose) et l'ai positionné en float:left;
J'ai ensuite positionné le #centre en float:right;
Je n'ai plus eu qu'à adapter les dimensions.

Et, pour que le #cadre englobe tout ça, j'ai ajouté un pied de page.
Il est actuellement à 0, mais tu pourras l'utiliser pour des infos de ton choix.

Voilà les modifications :
pour les styles
body {
padding: 0; 
margin: 0; 
font-weight: normal;
text-decoration: none;
background-color: #ccc;
text-align : center;
}

#cadre {
margin : 0 auto; 
width: 800px;
text-align: left;
border: 1px solid black;
background: #fff;
}

#centre  {
margin-left: 15%; 
margin-right: 15%; 
}

#bloc_menus {
    float : left;
    background-color : #faa;
    width: 120px;
    }

#pdp {
    clear : both;
    height : 0;
    background-color : 0;
    }

#corps {
float : right;
width : 638px;
padding: 0 20px;
border: 1px solid black;
}

#header {
padding: 0;
background: url(../img/ban.gif) no-repeat left;
width: 800px;
height: 80px;
}

.menu_barre {
padding: 0px;  
background: url(../img/menu_bar.gif) repeat left;
height: 34px;
width: 800px;
}

.text_bar  {
padding-top: 6px;
color: #0EE010;
}
a.text_bar:link {
color: #0EE010;
}
a.text_bar:vlink {
color: #0DA504;
}

.menu_titre {
margin-top : 1em;
padding-top: 2px;
background: #666666;
font-weight: bold;
text-decoration: none;
text-align: center;
color: white; 
border-collapse: collapse;
border: 1px solid black;
}

.menu_contenu {
padding: 0px;
background: #C0C0C0;
text-decoration: underline;
text-align: center;
border: 1px solid black;
border-top: 0;
}

a:alink {
color:#000099;
}

a:link{
color:#000099;
}

a:vlink{
color:#990099;
}

a:hover {
color: red;
}

img {
border:0px;
}

pour le HTML
<body>

<div id="cadre">
<div id="header"></div>
<div class="menu_barre"><div class="text_bar">
<img src="img/ico_home.png" /> <a href="#accueil" class="text_bar">Accueil</a>&nbsp; &nbsp;
<img src="img/livredor.png" /> <a href="#livredor" class="text_bar">Livre d'or</a>&nbsp; &nbsp;

</div> <!-- position text -->
</div> <!-- barre menu -->

<div id="bloc_menus"> <!-- conteneur des menus -->
    <div class="menu_titre">Menu</div>
    <div class="menu_contenu">
    <a href="#" >Lien</a><br />
    <a href="#" >Lien</a><br />
    <a href="#" >Lien</a><br />
    <a href="#" >Lien</a><br />
    <a href="#" >Lien</a><br />
    <a href="#" >Lien</a><br />
    </div>

    <div class="menu_titre">Menu n°2</div>
    <div class="menu_contenu">
    <a href="#" >Lien</a><br />
    <a href="#" >Lien</a><br />
    <a href="#" >Lien</a><br />
    <a href="#" >Lien</a><br />
    <a href="#" >Lien</a><br />
    <a href="#" >Lien</a><br />
    </div>
</div>

<div id="corps">
<h1>Ceci sera le contenu de la page le corps etc.
J'essaye de faire une ligne grande pour voir les cent pour-cent où il vont! Voilà, je pense que c'est bon!!!</h1>
<p>Et en plaçant du texte du texte du texte du texte du texte du texte du texte du texte du texte du texte du texte
 du texte du texte du texte du texte du texte du texte du texte du texte du texte du texte du texte du texte du texte
  du texte du texte du texte du texte du texte du texte du texte du texte du texte du texte du texte du texte du texte
 du texte du texte du texte du texte du texte du texte du texte du texte du texte du texte du texte du texte du texte
  du texte du texte du texte du texte du texte du texte du texte du texte du texte du texte du texte du texte du texte
 du texte du texte du texte du texte du texte du texte du texte du texte du texte du texte du texte du texte du texte
  du texte du texte du texte du texte du texte du texte du texte du texte du texte du texte du texte du texte du texte
 du texte du texte du texte du texte du texte du texte du texte du texte du texte du texte du texte du texte du texte
  du texte du texte du texte du texte du texte du texte du texte du texte du texte du texte du texte du texte du texte
 du texte du texte du texte du texte du texte du texte du texte du texte du texte du texte du texte du texte du texte
  du texte du texte du texte du texte du texte du texte du texte du texte du texte du texte du texte du texte du texte
 du texte du texte du texte du texte du texte du texte du texte du texte du texte du texte du texte du texte du texte
  du texte du texte du texte du texte du texte du texte du texte du texte du texte du texte du texte du texte du texte etc.
</p>
</div> <!-- corps -->
<div id="pdp"> <!-- pied de page -->
</div>
</div> <!-- cadre -->

</body>

Est-ce que c'est bien ça ?

On peut aussi faire autrement. Dans l'absolute.

+ À tester avec IE.
Attention à l'utilisation des %. Ça peut représenter beaucoup.
Essaye de faire tes menus à l'aide de listes.
0
Réponse 4 / 6
Utilisateur anonyme
5 janv. 2007 à 00:18
bonsoir

dans ton css à à la classe .corps enleve le 
padding-right : auto  ;
et le 
padding-bottom : auto  ;


ca donne : 
.corps 
{
    padding-left : 20% ;
    padding-top : 0% ;
    border-collapse : collapse ;
    border : 1px solid black;
    font-weight : normal ;
    width : 100% ;
}


et un conseil pour tester ton site web utilise Mozilla firefox et fie toi a lui d'ailleurs ton bug est peut etre du à IE
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 6
Gihef Messages postés 5150 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 2 778
6 janv. 2007 à 03:20
Je reprends cette discussion en repartant de cette autre.

Tu trouveras des explications qui tentent de répondre à <2> et à <5> :
– pour la <2>
– pour la <5>

Dis-nous si ça marche dans IE.

--
0
Réponse 6 / 6
boss0211 Messages postés 264 Date d'inscription lundi 13 février 2006 Statut Membre Dernière intervention 9 septembre 2007 8
6 janv. 2007 à 15:45
La première solution c'est a dire : http://gihef.bey.free.fr/CCM/goldzoneweb/solution1.html
celle ci est la mieux mais cela veut donc dire que ce n'est pas possible en mettant des pourcentage (car c'est la que sa plantait avec ta méthode.)
0

Discussions similaires

la balise <br> ou <br />
faamugol -
rwaness -

8 réponses
<br> ou <br /> ou </br>
corentin.93 -
jessy006 -

11 réponses
Saut de lignes sans <br/>
Rapi-shiny -
Rapi-shiny -

13 réponses
trait horizontal avec du css
tipi75 -
tipi75 -

8 réponses
Balise </br>
erf -
erf -

3 réponses