par
KeRR_@ » mer. 4 mars 2015 08:42
Bonjour Krupsa
Ne rajoute rien car tes modèles de boites sont déjà codé hein
Yo le lien ->>
http://babylon-design.com/centrer-horiz ... s-de-code/
Vérifie avec IE il en fait qu'a sa tête
Bonne journée.
Bonjour Krupsa
Ne rajoute rien car tes modèles de boites sont déjà codé hein
Yo le lien ->> http://babylon-design.com/centrer-horizontalement-son-site-en-css-en-4-lignes-de-code/
Vérifie avec IE il en fait qu'a sa tête :lol:
Bonne journée.
par
krupsa » mar. 3 mars 2015 22:55
Merci Kelp !
Par contre à quoi fait référence
#conteneur ? car je ne sais pas où l'ajouter dans mon code HTML
Edit : Bon pour le menu, c'est réglé ! J'avais bêtement mis le padding des puces de la liste à gauche, donc forcément le premier lien était décalé
Ta solution a à priori réglé le problème
le tout s'est légèrement décalé. Par contre pour les largeurs de différentes tailles, je ne comprends toujours pas
Merci Kelp ! :bisou:
Par contre à quoi fait référence [i]#conteneur[/i] ? car je ne sais pas où l'ajouter dans mon code HTML :?
Edit : Bon pour le menu, c'est réglé ! J'avais bêtement mis le padding des puces de la liste à gauche, donc forcément le premier lien était décalé :roll:
Ta solution a à priori réglé le problème ;) le tout s'est légèrement décalé. Par contre pour les largeurs de différentes tailles, je ne comprends toujours pas :|
par
KeRR_@ » mar. 3 mars 2015 18:35
Bonjour Krupsa
Ajoute ceci au début
Code : Tout sélectionner html, body {width:100%;} #conteneur { width:950px; margin:0 auto 0 auto; }
Bonjour Krupsa
Ajoute ceci au début
[code] html, body {width:100%;} #conteneur { width:950px; margin:0 auto 0 auto; }[/code]
:D
par
krupsa » mar. 3 mars 2015 16:12
Bonjour,
Je ne suis pas un expert en HTML / CSS, néanmoins avec quelques bases et les tutos d'Open Classroom, j'ai réalisé un site pour l'association dont je fais partie. Voici
le lien temporaire au passage.
Il n'est pas fini, mais je rencontre un problème avec le centrage des éléments. J'utilise pour cela :
Mais non seulement l'ensemble me parait légèrement décalé, mais il l'est surtout au niveau du menu horizontal en haut : c'est flagrant.
Voici ma page CSS :
Code : Tout sélectionnerbody
{
background-color: #2d2d37 ;
background-image: url("background.png");
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
font-family: "Trebushet MS", Verdana, Serif;
}
p
{
color: #2d2d37;
text-align: justify;
font-size: 15px;
padding: 1px;
}
h3
{
text-align: center;
color: #2d2d37;
padding: 7px;
}
h4
{
text-align: center;
color: #b5b5bf;
font-size: 11px;
}
figcaption
{
font-size: 10px;
}
header
{
background-image: url("backgrnd_header.png");
background-repeat: no-repeat;
background-position: top center;
background-attachment: scroll;
width: 954px;
height: 425px;
margin-left: auto;
margin-right: auto;
}
nav
{
background-color: #3a3a48;
border: 1px solid white;
width: 950px;
height: auto;
margin-left: auto;
margin-right: auto;
margin-top: 5px;
text-align: center;
font-size: 17px;
font-family: arial, serif;
color: white;
}
nav ul li {
display : inline;
padding : 24px;
}
nav ul{
margin-left: auto;
margin-right: auto;
list-style-type : none;
}
section
{
background-color: #b5b5bf;
border: 1px solid white;
width:800px;
height: auto;
margin-left: auto;
margin-right: auto;
margin-top: 8px;
padding: 75px;
}
footer
{
background-color: #3a3a48;
border: 1px solid white;
width: 850px;
height: 60px;
margin-left: auto;
margin-right: auto;
margin-top: 15px;
padding:50px;
padding-top: 5px;
}
a
{
color: white;
text-decoration: none;
font-weight: bold;
}
a:hover
{
color: #999999;
font-weight: bold;
}
p a
{
color: black;
font-weight: normal;
font-size: 14px;
text-decoration: underline;
}
p a:hover
{
color: #e00606;
font-weight: normal;
}
strong
{
text-decoration: none;
font-weight: bold;
font-size: 13px;
}
label
{
color: #2d2d37;
font-size: 15px;
}
img
{
border: 1px solid;
}
Mais le truc qui me parait bien bizarre, c'est surtout la largeur des blocs
nav,
section, et
footer. Pour qu'ils aient (a peu prêt) la même largeur, je dois leur assigner des valeurs carrément différentes : 950px, 800px, et 850px
.
Je pense avoir loupé quelque chose, si quelqu'un pouvait m'éclairer.
Merci
Bonjour,
Je ne suis pas un expert en HTML / CSS, néanmoins avec quelques bases et les tutos d'Open Classroom, j'ai réalisé un site pour l'association dont je fais partie. Voici [url=http://club-info-essey-beta.olympe.in/]le lien[/url] temporaire au passage.
Il n'est pas fini, mais je rencontre un problème avec le centrage des éléments. J'utilise pour cela :
[code]margin-left : auto;
margin-right: auto;[/code]
Mais non seulement l'ensemble me parait légèrement décalé, mais il l'est surtout au niveau du menu horizontal en haut : c'est flagrant.
Voici ma page CSS :
[code]body
{
background-color: #2d2d37 ;
background-image: url("background.png");
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
font-family: "Trebushet MS", Verdana, Serif;
}
p
{
color: #2d2d37;
text-align: justify;
font-size: 15px;
padding: 1px;
}
h3
{
text-align: center;
color: #2d2d37;
padding: 7px;
}
h4
{
text-align: center;
color: #b5b5bf;
font-size: 11px;
}
figcaption
{
font-size: 10px;
}
header
{
background-image: url("backgrnd_header.png");
background-repeat: no-repeat;
background-position: top center;
background-attachment: scroll;
width: 954px;
height: 425px;
margin-left: auto;
margin-right: auto;
}
nav
{
background-color: #3a3a48;
border: 1px solid white;
width: 950px;
height: auto;
margin-left: auto;
margin-right: auto;
margin-top: 5px;
text-align: center;
font-size: 17px;
font-family: arial, serif;
color: white;
}
nav ul li {
display : inline;
padding : 24px;
}
nav ul{
margin-left: auto;
margin-right: auto;
list-style-type : none;
}
section
{
background-color: #b5b5bf;
border: 1px solid white;
width:800px;
height: auto;
margin-left: auto;
margin-right: auto;
margin-top: 8px;
padding: 75px;
}
footer
{
background-color: #3a3a48;
border: 1px solid white;
width: 850px;
height: 60px;
margin-left: auto;
margin-right: auto;
margin-top: 15px;
padding:50px;
padding-top: 5px;
}
a
{
color: white;
text-decoration: none;
font-weight: bold;
}
a:hover
{
color: #999999;
font-weight: bold;
}
p a
{
color: black;
font-weight: normal;
font-size: 14px;
text-decoration: underline;
}
p a:hover
{
color: #e00606;
font-weight: normal;
}
strong
{
text-decoration: none;
font-weight: bold;
font-size: 13px;
}
label
{
color: #2d2d37;
font-size: 15px;
}
img
{
border: 1px solid;
}
[/code]
Mais le truc qui me parait bien bizarre, c'est surtout la largeur des blocs [b]nav[/b], [b]section[/b], et [b]footer[/b]. Pour qu'ils aient (a peu prêt) la même largeur, je dois leur assigner des valeurs carrément différentes : 950px, 800px, et 850px :suspect: .
Je pense avoir loupé quelque chose, si quelqu'un pouvait m'éclairer.
Merci ;)
FLTL_BYreeves42