CSS Codage

Vladimok

Vladimok

Membre expert
Club iGen
12 Septembre 2007
2 359
52
Normandie
Bonjour,

Comment faire pour que les 4 icones soient centré sur la page ?
Voici le code:
Merci

#barre {
background-image: url("background_barre.png");
background-repeat: repeat-x;
height: 46px;
width: 100%;
}

#barre1,#barre2,#barre3,#barre4
{
border:1px solid red;
display:inline;
/*padding: 5px;*/
float: left;
width:25%;
text-align:center;
/*position: fixed;*/
}
#barre {
position: relative;
float: left;
clear:left;
width: 100%;
height: 50px;
z-index: 1;
}
#barre1 {
background-image: url(logo/load%20on.png);
background-repeat: no-repeat;
}
#barre2 {
background-image: url(logo/load%20on.png);
background-repeat: no-repeat;
}
#barre3 {
background-image: url(logo/load%20on.png);
background-repeat: no-repeat;
}
#barre4 {
background-image: url(logo/load%20on.png);
background-repeat: no-repeat;
}
--------------------------------------------
<body>
<div id="barre">
<div id="barre1"></div>
<div id="barre2"></div>
<div id="barre3"></div>
<div id="barre4"></div>
</div>
 
Quelles icônes ?
Centrées comment ? Verticalement, horizontalement ? Les 2 ?
Fais nous un schéma. Parce que le code que tu donnes ne correspond pas à ta demande ou est très inabouti.

N-B
  • Si c'est un menu il vaut mieux utiliser <ul><li></li></ul> que <div><div></div></div>
  • Si ce sont des icônes que tu veux afficher, il vaudrait sans doute mieux les insérer en tant qu'image (<img>) que comme fond de div.
 
Je veux un menu de 4 icones avec un changement d'icone au survol de la souri centré en horizontal par rapport à la largeur du navigateur.
les icones font 50x50px
Dans mon code je n'est pas integré les a:hover

Voila le code que j'ai réécri:
#barre {
position: relative;
width: 100%;
height: 50px;
display: block;
}
#barre1 a {
display:block;
width:50px;
height: 50px;
border: 5px solid #FFF;
float:left;
background-repeat: no-repeat;
background-image: url(logo/load%20off.png);
}
#barre1 a:hover {
display: block;
width: 50px;
height: 50px;
float: left;
background-repeat: no-repeat;
background-image: url(logo/load%20on.png);
border: 5px solid #FFF;
}
#barre2 a {
display:block;
width:50px;
height: 50px;
border: 5px solid #FFF;
float:left;
background-repeat: no-repeat;
background-image: url(logo/load%20off.png);
}
#barre2 a:hover {
display: block;
width: 50px;
height: 50px;
float: left;
background-repeat: no-repeat;
background-image: url(logo/load%20on.png);
border: 5px solid #FFF;
}
#barre3 a {
display:block;
width:50px;
height: 50px;
border: 5px solid #FFF;
float:left;
background-repeat: no-repeat;
background-image: url(logo/load%20off.png);
}
#barre3 a:hover {
display: block;
width: 50px;
height: 50px;
float: left;
background-repeat: no-repeat;
background-image: url(logo/load%20on.png);
border: 5px solid #FFF;
}
#barre4 a {
display:block;
width:50px;
height: 50px;
border: 5px solid #FFF;
float:left;
background-repeat: no-repeat;
background-image: url(logo/load%20off.png);
}
#barre4 a:hover {
display: block;
width: 50px;
height: 50px;
float: left;
background-repeat: no-repeat;
background-image: url(logo/load%20on.png);
border: 5px solid #FFF;
}
</style>





<body>
<div id="barre">
<div id="barre1"><a href="Logo.html"/></a></div>
<div id="barre2"><a href="Logo.html"/></a></div>
<div id="barre3"><a href="Logo.html"/></a></div>
<div id="barre4"><a href="Logo.html"/></a></div>
</div>
</body>
 
Dernière édition:
Un petit nettoyage pour commencer :

Tu peux enlever les <div> autour des <a> (elles ne servent à rien puisque tu peux styler directement les a) et mettre les id (barre1, barre2, etc.) directement dans la balise <a> :

Bloc de code: 
<div id="barre">
    <a id="barre1" href="Logo.html"/></a>
    <a id="barre2" href="Logo.html"/></a>
    <a id="barre3" href="Logo.html"/></a>
    <a id="barre4" href="Logo.html"/></a>
</div>

Là vue de nez, je vois déjà deux approches possibles :

A - Puisque tu sais le nombre d'icônes (4) et leur largeur (50px). Si tu règle #barre à 200px de large (4x50) et que tu le centre horizontalement avec un margin-left:auto et un margin-right:auto, tes icônes seront centrées horizontalement.

B - Sinon tu peux régler barre1, barre2, etc. en display:inline-block. Ce qu'il fait qu'ils se comporteront comme une div au niveau de leurs attributs propres mais comme un <span> ou au niveau de leur placement. Ensuite il faut demander à centrer le texte dans #barre (text-align:center)

Mais personnellement je te conseillerais d'appliquer ça plutôt à une liste <ul> c'est plus logique sémantiquement parlant et ça te permet même d'ajouter, éventuellement, une div au dessus de tout ça et d'avoir une cascade d'objets (div > ol > li > a) tous stylables indépendamment tout en étant sémantiquement impeccable (au lieu d'une cascade de divs) :

Bloc de code: 
<div id="menu">
    <ul class="barre">
        <li class="barre1"><a href="Logo.html"/></a></li>
        <li class="barre2"><a href="Logo.html"/></a></li>
        <li class="barre3"><a href="Logo.html"/></a></li>
        <li class="barre4"><a href="Logo.html"/></a></li>
    </ul>
</div>

J'ai aussi remplacé des ID par des CLASS. C'est plus pour montrer qu'on n'est pas obligé de mettre des ID à tout… sauf si nécessaire.
 
Dernière édition:
Merci.
J'ai pris la partie avec UL, mais maintenant chaque icones s'affiche avec un point et en quinconce, je pense qu'il faut définir le type de UL mais je ne sais pas comment.
 
J'ai réussi, mais il me reste une marge en haut que je n'arrive pas à supprimer

<div id="menu">
<ul class="barre" style="list-style-type : none;">
<li class="barre1"><a href="Logo.html"/></a></li>
<li class="barre2"><a href="Logo.html"/></a></li>
<li class="barre3"><a href="Logo.html"/></a></li>
<li class="barre4"><a href="Logo.html"/></a></li>
</ul>
</div>
 
Dernière édition:
Bon j'ai réussi à peu près.
J'ai modifié mon code, je voudrais que l'ID page affiche un fond vert, mais voilà le vert ne s'affiche pas jusqu'en bas de ma page !!!!!

Si vous pouvez m'aider, je vous en remercie

body {
margin-left: 20px;
margin-top: 20px;
margin-right: 20px;
margin-bottom: 20px;
}
#page {
background-color: #9F9;
position: relative;
z-index: 90;
}
#conteneur {
position: relative;
z-index: 91;
margin-top: auto;
margin-right: 50px;
margin-bottom: auto;
margin-left: 50px;
background-color: #FFF;
border-top-width: 10px;
border-top-style: solid;
border-top-color: #F90;
}


.colgauche {
text-align: left;
font-size: 24px;
padding-bottom: 10px;
font-family: Verdana, Geneva, sans-serif;
width: 45%;
display: block;
padding-top: 10px;
position: relative;
float: left;
z-index: auto;
padding-left: 5%;
}
.coldroite {
top: 0px;
text-align: right;
font-size: 24px;
padding-top: 10px;
padding-bottom: 10px;
font-family: Verdana, Geneva, sans-serif;
width: 40%;
float: right;
display: block;
clear: right;
padding-right: 5%;
}
---------------------------------------------------------
<div id="page">
<div id="conteneur">
<div class="colgauche">G1<br />
G2<br />
G3
</div>
<div class="coldroite">D1<br />
D2<br />
D3
</div>
</div>
</div>
 
Merci tu me sauves, l'iMac aller passer par la fenêtre !!!
 
J'ai réussi à créé ma page, ça s'affiche bien sur les navigateurs principaux, ipad et android, mais comment savoir sur Internet explorer ???

Merci
 
Merci, j'ai essayé le 2ème lien, ça passe bien.

J'aimerai savoir comment faire (une solution pas trop compliqué), pour que mon site s'adapte correctement sur tous les supports ?
Merci
 
Il n'y a pas plus simple que le responsive ?

Dans le code suivant, pourquoi le cadre jaune ne s'aligne pas avec le violet ?


.gridContainer {
width: 88.2%;
max-width: 1232px;
padding-left: 0.9%;
padding-right: 0.9%;
margin: auto;
}
#LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 38.7755%;
display: block;
background-color: #F0F;
}
#LayoutDiv2 {
clear: none;
float: left;
margin-left: 2.0408%;
width: 28.5714%;
display: block;
background-color: #00F;
}
#LayoutDiv3 {
clear: both;
float: left;
margin-left: 0;
width: 18.3673%;
display: block;
background-color: #FF0;
}
</style>
</head>

<body>
<div class="gridContainer">
<div id="LayoutDiv1">cadre 1
cadre 1
cadre 1</div>
<div id="LayoutDiv2">Il s'agit du contenu de la balise Div de disposition "LayoutDiv2"</div>
</div>
<div id="LayoutDiv3">Il s'agit du contenu de la balise Div de disposition "LayoutDiv2"</div>
</div>
 
daffyb a dit:
Tu peux utiliser les media queries. C'est simple.
Cliquez pour agrandir...
Heu, oui enfin c'est plutôt simple… lorsque l'on comprend comment fonctionne le flux HTML, les imbrications de styles et leur parentés, le comportement des positionnements, les marges fluides, les points de ruptures du responsif, bref, c'est simple mais… faut pas pousser Vladimok dans les orties.
:rolleyes: :p :D :cool:
 
  • J’aime
Réactions: daffyb
Vladimok a dit:
Dans le code suivant, pourquoi le cadre jaune ne s'aligne pas avec le violet ?
Cliquez pour agrandir...
Si tu veux qu'il soit aligné à gauche du violet (fushia plus exactement) présent au dessus il faut l'englober d'une div "gridContainer" comme lui, gridContainer possède des attributs de padding left-right de 0.9%.

La question que je me pose c'est : est-ce que gridContainer et l’élément englobant premier (celui qui définit le corps de la page) ou un élément comme une section (HTML5) ?

Si il est premier la div jaune dois être insérée avant la fermeture de gridContainer, là elle est placée après la fermeture (hors de gridContainer).

Peut-être que ton code n'est pas bon car il y a une fermeture de div au final qui n'a pas lieu d'être (dans ce contexte).

Essai ceci :
Bloc de code: 
    <div class="gridContainer">
        <div id="LayoutDiv1">cadre 1 cadre 1 cadre 1</div>
        <div id="LayoutDiv2">Il s'agit du contenu de la balise Div de disposition "LayoutDiv2"</div>
        <div id="LayoutDiv3">Il s'agit du contenu de la balise Div de disposition "LayoutDiv2"</div>
    </div>

Ou encore ceci :
Bloc de code: 
    <div class="gridContainer">
        <div id="LayoutDiv1">cadre 1 cadre 1 cadre 1</div>
        <div id="LayoutDiv2">Il s'agit du contenu de la balise Div de disposition "LayoutDiv2"</div>
    </div>
     <div class="gridContainer">
        <div id="LayoutDiv3">Il s'agit du contenu de la balise Div de disposition "LayoutDiv2"</div>
    </div>

A toi de voir si c'est assez clair pour toi… :) :rolleyes: :cool:

PS : lorsque l'on code le HTML il faut indenter ton code, j'utilise des outils de styling de code automatique qui me présente le code de manière à comprendre visuellement la structure des éléments et repérer éventuellement une balise orpheline.
 
Dernière édition:
Merci pour votre aide.
Aujourd'hui une journée complète sur les média query, une fonction super !!!!

Par contre, une chose que je n'ai pas très bien compris, remplacer un DIV ou son contenu en fonction de la resolution ?
 
Par contre, une chose que je n'ai pas très bien compris, remplacer un DIV ou son contenu en fonction de la resolution ?
Je créé ma DIV pour mobile avec un display:none, puis dans la media query je la réaffiche avec un display:block.
Mais cela ne fonctionne pas.
 

Sujets similaires

benG
Mail : signature HTML
Réponses
1
Affichages
2K
Web et e-mail
julienboost
J
balance
code CSS
Réponses
1
Affichages
3K
Développement web
momo-fr
momo-fr
phcm64100
Signature HTML pour mail
Réponses
2
Affichages
1K
Web et e-mail
phcm64100
phcm64100
symbol
scrolling qui coupe le texte
Réponses
2
Affichages
1K
Développement web
symbol
symbol
omzen
personnalisation css > centrer block
Réponses
4
Affichages
2K
Développement web
omzen
omzen
Haut Bas