Problème de décentrage de certains éléments CSS

10 octobre 2018 à 13:22:42

Bonjour,

J'ai un problème de centrage de certains éléments sur un site web test que je suis en train de faire pour m'entraîner.

Il s'agit du titre et sous-titre, du menu, et du footer (les icones et le texte ne sont pas centrés de la même manière..)

Je ne sais pas si c'est dû aux listes ? Est-ce que le fait d'enlever les puces est juste esthétique mais l'espace qui leur est dédié existe toujours ?

ça n'expliquerait pas pourquoi j'ai aussi un décentrage sur les titres en haut

Si quelqu'un peut m'aider, merci beaucoup

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />
        <link rel="stylesheet" href="style.css" />
        <title>Fainst - Dj & Producer</title>

    </head>


    <body>
        <div id="global">
    		<header>
    			<h1 id="titrentete"><a href="index.html">FAINST</a></h1>
    			<h2 id="soustitreentete">Electronic Music DJ & Producer</h2>
                <div class="banhome"><img class="imgbanhome" src="images/banhome.jpg" alt="fainst dj banner" title="© Cedric Berruti" /></div>
    		</header>

            <nav>
                <ul id="menu">
                    <li class="listmenu"><a href="index.html">Accueil</a></li>
                    <li class="listmenu"><a href="agenda.html">Agenda</a></li>
                    <li class="listmenu"><a href="infos.html">Infos</a></li>
                    <li class="listmenu"><a href="music.html">Music</a></li>
                    <li class="listmenu"><a href="videos.html">Videos</a></li>
                    <li class="listmenu"><a href="contact.html">Contact</a></li>
                </ul>
            </nav>
            <div>
                <ul id="social-icons">
                    <li><a href="http://www.facebook.com/fainst" target="_blank"><img src='ico/fb.svg' /></a></li>
                    <li><a href="http://www.instagram.com/fainst" target="_blank"><img src='ico/is.svg' /></a></li>
                    <li><a href="http://www.twitter.com/fainst" target="_blank"><img src='ico/tw.svg' /></a></li>
                    <li><a href="http://soundcloud.com/fainst" target="_blank"><img src='ico/mc.svg' /></a></li>
                    <li><a href="http://www.mixcloud.com/fainst" target="_blank"><img src='ico/sc.svg' /></a></li>
                    <li><a href="http://www.youtube.com/user/fainst" target="_blank"><img src='ico/yt.svg' /></a></li>
                </ul>
            </div>

            <section>
                <h3>NEWS</h3>
                <section id="page">
                    <article class="news">
                        <h1>DJ SET @ ORLÉANS</h1>
                        <h4>09.10.2018</h4>
                        <p>Prochaine date : à Orléans ! Apparemment pour un défilé  With Ben Agd et DJ TRACKWORKS, 3 ambiances</p>
                        <img src="images/3d.jpg">
                    </article>

                    <article class="news">
                        <h1>REPORT DJ SET @ LOVE BOAT #2</h1>
                        <h4>28.09.2018</h4>
                        <p>Dernier DJ Set sur un Catamaran ! Avec In'oubliables, le Report arrive bientôt ainsi que l'enregistrement des sets.</p>
                        <img src="images/catanews.jpg">
                    </article>

                    <article class="news">
                        <h1>REPORT YINYANG MUSIC FESTIVAL</h1>
                        <h4>16.06.2018</h4>
                        <p>Une date à l'étranger : Sur la muraille de Chine ! Une des dates les plus mémorables de ma vie</p>
                        <img src="images/yyfm.jpg">
                    </article>
                </section>
            </section>

            <section>
                <h3>AGENDA</h3>
                <section id="page">
                    <article class="dates">
                        <h1>DJ SET @ ORLÉANS</h1>
                        <h4>09.10.2018</h4>
                        <p>Prochaine date : à Orléans ! Can't wait, apparemment pour un défilé je savais pas  With Ben Agd et DJ TRACKWORKS, 3 ambiances</p>
                        <img src="images/dates/silent.jpg">
                    </article>

                    <article class="dates">
                        <h1>DJ SET @ LOVE BOAT #2</h1>
                        <h4>28.09.2018</h4>
                        <p>Dernier DJ Set en date : Sur un Catamaran ! Avec les potos d'IN'OUBLIABLES, DYSK, OSCH. Malgré le vent ce fût incroyable.</p>
                        <img src="images/dates/cata.jpg">
                    </article>

                    <article class="dates">
                        <h1>DJ SET @ YINYANG MUSIC FESTIVAL</h1>
                        <h4>16.06.2018</h4>
                        <p>Une date à l'étranger : Sur la muraille de Chine ! Une des dates les plus mémorables de ma vie<br /><br /></p>
                        <img src="images/dates/dj.jpg">
                    </article>

                    <article class="dates">
                        <h1>DJ SET @ YINYANG MUSIC FESTIVAL</h1>
                        <h4>16.06.2018</h4>
                        <p>Une date à l'étranger : Sur la muraille de Chine ! Une des dates les plus mémorables de ma vie<br /><br /></p>
                        <img src="images/dates/dj.jpg">
                    </article>

                    <article class="dates">
                        <h1>DJ SET @ YINYANG MUSIC FESTIVAL</h1>
                        <h4>16.06.2018</h4>
                        <p>Une date à l'étranger : Sur la muraille de Chine ! Une des dates les plus mémorables de ma vie<br /><br /></p>
                        <img src="images/dates/dj.jpg">
                    </article>

                    <article class="dates">
                        <h1>DJ SET @ YINYANG MUSIC FESTIVAL</h1>
                        <h4>16.06.2018</h4>
                        <p>Une date à l'étranger : Sur la muraille de Chine ! Une des dates les plus mémorables de ma vie<br /><br /></p>
                        <img src="images/dates/dj.jpg">
                    </article>
                </section>
            </section>

            <footer>
                <ul id="social-icons-f">
                    <li><a href="http://www.facebook.com/fainst" target="_blank"><img src='ico/fb.svg' /></a></li>
                    <li><a href="http://www.instagram.com/fainst" target="_blank"><img src='ico/is.svg' /></a></li>
                    <li><a href="http://www.twitter.com/fainst" target="_blank"><img src='ico/tw.svg' /></a></li>
                    <li><a href="http://soundcloud.com/fainst" target="_blank"><img src='ico/mc.svg' /></a></li>
                    <li><a href="http://www.mixcloud.com/fainst" target="_blank"><img src='ico/sc.svg' /></a></li>
                    <li><a href="http://www.youtube.com/user/fainst" target="_blank"><img src='ico/yt.svg' /></a></li>
                </ul>
                <p>Tous droits réservés  ©  Fainst - Ziris Music 2018</p>
            </footer>
        </div>
    </body>

</html>

@font-face
{
	font-family: 'nowaltbold';
	src: url('typo/now-alt/NowAlt-Bold.otf');
}

@font-face
{
	font-family: 'nowaltregular';
	src: url('typo/now-alt/NowAlt-Regular.otf');
}

*
{
	font-family: 'nowaltregular', Helvetica, Arial, sans-serif;
}

header
{
	text-align: center;
}

body
{
	background-color: #161519;
	margin: 0;
}

#global
{
	margin-left: auto;
	margin-right: auto;
	max-width: 60%;
}

nav
{
	color:white;
	text-transform: uppercase;
	border-top: 0.1em grey solid;
	border-bottom: 0.1em grey solid;
	margin-bottom: 25px;
	margin-top:25px;
}

footer
{
	color:rgb(240,240,240);
	margin-top: 25px;
	margin-bottom: 25px;
	padding-bottom: 25px;
	padding-top: 35px;
	text-align: center;
}

footer p
{
	margin-top: 20px;
	font-size: 0.75em;
	margin-left: 0;
	padding-left: 0;
}

#menu
{
	display: flex;
	flex-wrap : wrap ;
	flex: 1;
  justify-content: space-around;
	align-items:center;
}

.listmenu
{
	padding:10px;
}

ul, ol
{
	list-style: none;
	margin-left: 0;
	padding-left: 0;
}

p
{
	padding: 12px;
}

h1
{
	font-family: 'nowaltbold', Helvetica, Arial, sans-serif;
	color: #7b76ff;
}

h2
{
	font-family: 'nowaltbold', Helvetica, Arial, sans-serif;
}

h3
{
	font-size: 2.5em;
	color: #7b76ff;
	text-align: center;
	border-radius: 5px;
	background-color: rgba(50,50,50,0.75);
	margin:0 auto;
	padding: 18px;
}
h4
{
	color:#f92472;
}

nav a:link, nav a:visited
{
    color: white;
    text-decoration: none;
}

p a:link, a:visited
{
    color: #7b76ff;
}
nav a:hover {
    color: #f92472;
}
nav a:active {
    color: #7b76ff;
}

#titrentete {
	color: white;
	font-family: 'nowaltbold', Helvetica, Arial, sans-serif;
	font-size: 3em;
	text-transform: uppercase;
	margin-top:25px;
	margin-bottom: 0;
	letter-spacing: 15px;
}
#titrentete a {
	color: white;
	font-family: 'nowaltbold', Helvetica, Arial, sans-serif;
	text-decoration: none;
}
#titrentete a:hover {
	color: rgb(46,63,103);
	letter-spacing: 25px;
}

#soustitreentete
{
	color: rgb(225,232,232);
	font-size: 1.2em;
	font-family: 'nowaltregular', Helvetica, Arial, sans-serif;
	margin-top: 5px;
	margin-bottom: 25px;
}

.imgbanhome
{
	max-width: 100%;
  height: auto;
}

#social-icons
{
  display:flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: flex-end;
}
#social-icons-f
{
  display:flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
}
#social-icons ul li, #social-icons-f ul li
{
  list-style:none;
	margin-left: 0;
	padding-left: 0;
  }
#social-icons li a, #social-icons-f  li a
{
  text-decoration: none;
}
#social-icons li a:hover, #social-icons-f li a:hover
{
  text-decoration: none;
  opacity: 0.7;
}
#social-icons li img, #social-icons-f li img
{
  width:30px;
  height:30px;
  margin-right: 20px;
}

#page
{
	display:flex;
	flex-wrap : wrap ;
  justify-content: space-around;
	align-items:center;
	background-color: rgba(50,50,50,0.75);
	border-radius: 5px;
	margin-top: 18px;
	margin-bottom: 18px;
	margin-left: 2px;
	margin-right: 2px;
	padding: 18px;
}

.dates
{
	text-align: left;
	background-color: rgb(230,230,222);
	padding: 15px;
	margin-top:15px;
	margin-bottom:15px;
	max-width: 320px;
	min-height: 465px;
}

.articles
{
	text-align: left;
	background-color: rgb(230,230,222);
	padding: 15px;
	margin-top:15px;
	margin-bottom:15px;
	width: 100%;
}

.news
{
	text-align: center;
	background-color: rgb(230,230,222);
	padding: 15px;
	margin-top:15px;
	margin-bottom:15px;
	max-width: 350px;
	min-height:350px;
}

.bio
{
	margin:2px;
}

-
Edité par SautGui 10 octobre 2018 à 14:20:51

Frogweb

10 octobre 2018 à 13:30:42

Salut,

sans avoir testé ton code pour l'instant, je peux te dire que tu as une grosse erreur : <footer> doit être dans <body>

Et effectivement il ne suffit pas d'enlever les puces, une <ul> à despadding/margin par défaut.
Donc mets lui padding:0 et marghin:0. Ce qui te permettra d'enlever les padding-ledft et right des <p>.

Malgré tout ça ne sera pas centré correctement à cause du margin-right sur les images d'icônes.

-
Edité par Frogweb 10 octobre 2018 à 13:41:37

Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !

SautGui

10 octobre 2018 à 14:21:25

Hello,

J'ai vu l'erreur, j'ai essayé de réduire mon code pour ne pas tout poster ici ça aurait été trop long (j'avais aussi oublié de fermer une balise article) mais du coup j'ai raté des choses

J'ai en effet un meilleur résultat avec padding et margin 0 sur les ul li, MERCI

Mais pour mes titres tout en haut je n'arrive pas à comprendre.. J'ai l'impression qu'il centre sur le N, au lieu de centrer sur tout le bloc de texte..

J'ai mis à jour le code dans mon message initial, en mettant toute ma page index pour éviter les erreurs, ça fait long mais bon ...

MERCI encore

-
Edité par SautGui 10 octobre 2018 à 14:26:53

Frogweb

10 octobre 2018 à 16:52:57

Une erreur ici :

#social-icons ul li, #social-icons-f ul li
{
  list-style:none;
    margin-left: 0;
    padding-left: 0;
  }

#social-icons et #social-icons-f sont déjà les <ul> que tu veux cibler.
Donc enlève le ul.

Pour tes titres c'est letter-spacing qui vient perturber le centrage.
Si tu veux garder cet espace je ne vois pas de solution...

Pour le footer remplace ta CSS par celle-ci :

*, *::before, *::after {
    box-sizing: border-box;
}
html, body {
    height:100%
}
 @font-face
{
    font-family: 'nowaltbold';
    src: url('typo/now-alt/NowAlt-Bold.otf');
}
 
@font-face
{
    font-family: 'nowaltregular';
    src: url('typo/now-alt/NowAlt-Regular.otf');
}
header
{
    text-align: center;
}
 
body
{
    background-color: #161519;
    margin: 0;
    font-family: 'nowaltregular', Helvetica, Arial, sans-serif;
}
 
#global
{
    margin-left: auto;
    margin-right: auto;
    max-width: 60%;
}
 
nav
{
    color:white;
    text-transform: uppercase;
    border-top: 0.1em grey solid;
    border-bottom: 0.1em grey solid;
    margin-bottom: 25px;
    margin-top:25px;
}
 
footer
{
    color:rgb(240,240,240);
    margin-top: 25px;
    margin-bottom: 25px;
    padding-bottom: 25px;
    padding-top: 35px;
    text-align: center;
}
 
footer p
{
    margin-top: 20px;
    font-size: 0.75em;
    margin-left: 0;
    padding-left: 0;
}
 
#menu
{
    display: flex;
    flex-wrap : wrap ;
    flex: 1;
  justify-content: space-around;
    align-items:center;
}
 
.listmenu
{
    padding:10px;
}
 
ul, ol
{
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}
 
p
{
    padding: 12px;
}
 
h1
{
    font-family: 'nowaltbold', Helvetica, Arial, sans-serif;
    color: #7b76ff;
}
 
h2
{
    font-family: 'nowaltbold', Helvetica, Arial, sans-serif;
}
 
h3
{
    font-size: 2.5em;
    color: #7b76ff;
    text-align: center;
    border-radius: 5px;
    background-color: rgba(50,50,50,0.75);
    margin:0 auto;
    padding: 18px;
}
h4
{
    color:#f92472;
}
 
nav a:link, nav a:visited
{
    color: white;
    text-decoration: none;
}
 
p a:link, a:visited
{
    color: #7b76ff;
}
nav a:hover {
    color: #f92472;
}
nav a:active {
    color: #7b76ff;
}
 
#titrentete {
    color: white;
    font-family: 'nowaltbold', Helvetica, Arial, sans-serif;
    font-size: 3em;
    text-transform: uppercase;
    margin-top:25px;
    margin-bottom: 0;
    letter-spacing: 15px;
}
#titrentete a {
    color: white;
    font-family: 'nowaltbold', Helvetica, Arial, sans-serif;
    text-decoration: none;
}
#titrentete a:hover {
    color: rgb(46,63,103);
    letter-spacing: 25px;
}
 
#soustitreentete
{
    color: rgb(225,232,232);
    font-size: 1.2em;
    font-family: 'nowaltregular', Helvetica, Arial, sans-serif;
    margin-top: 5px;
    margin-bottom: 25px;
}
 
.imgbanhome
{
    max-width: 100%;
  height: auto;
}
 
#social-icons
{
  display:flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: flex-end;
}
#social-icons-f
{
  display:flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  margin:0;
  padding:0
}
#social-icons li, #social-icons-f li
{
  list-style:none;
    margin: 0 10px;
    padding-left: 0;
}
#social-icons li a, #social-icons-f  li a
{
  text-decoration: none;
}
#social-icons li a:hover, #social-icons-f li a:hover
{
  text-decoration: none;
  opacity: 0.7;
}
#social-icons li img, #social-icons-f li img
{
  width:30px;
  height:30px;
}
footer p {
    margin-top: 20px;
    font-size: 0.75em;
    margin-left: 0;
    padding: 12px 0;
}
#page
{
    display:flex;
    flex-wrap : wrap ;
  justify-content: space-around;
    align-items:center;
    background-color: rgba(50,50,50,0.75);
    border-radius: 5px;
    margin-top: 18px;
    margin-bottom: 18px;
    margin-left: 2px;
    margin-right: 2px;
    padding: 18px;
}
 
.dates
{
    text-align: left;
    background-color: rgb(230,230,222);
    padding: 15px;
    margin-top:15px;
    margin-bottom:15px;
    max-width: 320px;
    min-height: 465px;
}
 
.articles
{
    text-align: left;
    background-color: rgb(230,230,222);
    padding: 15px;
    margin-top:15px;
    margin-bottom:15px;
    width: 100%;
}
 
.news
{
    text-align: center;
    background-color: rgb(230,230,222);
    padding: 15px;
    margin-top:15px;
    margin-bottom:15px;
    max-width: 350px;
    min-height:350px;
}
 
.bio
{
    margin:2px;
}

-
Edité par Frogweb 10 octobre 2018 à 16:58:34

Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !

SautGui

10 octobre 2018 à 20:54:33

Merci beaucoup je vais analyser tout ça pour bien comprendre

Seul truc que je vois direct, que je ne connais pas et ne comprends pas :

*, *::before, *::after {

box-sizing: border-box;

}

au tout début

Merci encore !! Bonne soirée

Frogweb

11 octobre 2018 à 10:29:23

SautGui a écrit:

Merci beaucoup je vais analyser tout ça pour bien comprendre

Seul truc que je vois direct, que je ne connais pas et ne comprends pas :

*, *::before, *::after {

box-sizing: border-box;

}

au tout début

Merci encore !! Bonne soirée

Un article sur le sujet :

https://la-cascade.io/box-sizing-pour-les-nuls/

Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !