Partage

Problème pour centrer un élément - Media queries

Débutant en Responsive Design Web

3 janvier 2018 à 15:00:17

Bonjour,

Je débute en CSS et c'est une vraie galère pour moi... J'ai repris un tutoriel pour adapter un site web initialement prévu pour un affichage à 1024 pxs en site responsive (avec les media queries). Le résultat fonctionne assez bien mais j'ai un souci lorsque je passe le site à un affichage inf. à 1024 pxls.

En fait, le bloc du côté droit bascule bien au centre de la page si la résolution est inf. ou égale à 1024 pxls mais j'aimerais qu'il soit centré alors qu'il ne l'est pas (il est comme "collé" à une ligne invisible à gauche).

Est-ce que quelqu'un(e) pourrait m'éclairer ?

Voici le code HTML :

<!DOCTYPE html>
<html>
    <head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
		  <!--[if lt IE 9]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
		<title>Exercice</title>
		<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
    </head>
    
 <body>
        <div id="bloc_page">
            <header>
			
				<div id="titre_principal">
					<h1>Mon site</h1>
					<h2>bla, bla, bla</h2>
				</div>
                
                <nav>
                    <ul>
                        <li class="active"><a href="#">Accueil</a></li>    
                        <li><a href="#">Niveau 1</a></li>
						<li><a href="#">Niveau 2</a></li>
                        <li><a href="#">Contact</a></li>
						
                    </ul>
                </nav>
            </header>
            
            <div id="banniere_image">
                
            </div>
            
            <section>
                <article>
                    <h2>Présentation</h2>
						<p>Pandente itaque viam fatorum sorte tristissima, qua praestitutum erat eum vita et imperio spoliari, itineribus interiectis permutatione iumentorum emensis venit Petobionem oppidum Noricorum, ubi reseratae sunt insidiarum latebrae omnes, et Barbatio repente apparuit comes, qui sub eo domesticis praefuit, cum Apodemio agente in rebus milites ducens, quos beneficiis suis oppigneratos elegerat imperator certus nec praemiis nec miseratione ulla posse deflecti.</p>
						<p>Ibi victu recreati et quiete, postquam abierat timor, vicos opulentos adorti equestrium adventu cohortium, quae casu propinquabant, nec resistere planitie porrecta conati digressi sunt retroque concedentes omne iuventutis robur relictum in sedibus acciverunt.</p>
						<ul>
							<li>Hacque adfabilitate confisus cum eadem postridie</li>

						</ul>
						<p>Ibi victu recreati et quiete, postquam abierat timor, vicos opulentos adorti equestrium adventu cohortium, quae casu propinquabant, nec resistere planitie porrecta conati digressi sunt retroque concedentes omne iuventutis robur relictum in sedibus acciverunt.</p>
				</article>
				
				
				<aside id="sidebar">
					<section>	
						<ul>
							<li><a href="#">Bouteille</a></li>
							<li><a href="#">Apnée</a></li>
							<li><a href="#">Nitrox</a></li>
						</ul>
					</section>
				</aside>
                
            </section>
            
            <footer>
                <div id="copyright">
                    <h6>Copyright</h6>   
                </div>
            </footer>
        
		</div>
    </body>
</html>


Et voici la feuille de style CSS associée : 

body
{
    background: url('images/texture-fond.png');
    font-family:Arial;
    font-size:12px; 
}

#bloc_page
{
    width: 950px;
    margin: auto;
}

section h1, nav a, footer h1
{
    font-family: arial, serif;
    font-weight: normal;
    text-transform: uppercase;
}

/* Header */

header
{
    background: url('images/line.png') repeat-x bottom;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

#titre_principal
{
    display: flex;
    flex-direction: column;
}



header h1
{
    font-family: arial, serif;
    font-size: 3.5em;
	color:#007189;
    font-weight: normal;
    margin: 0 0 0 1px;
	
}

header h2
{
    font-family: arial, serif;
    font-size: 1.5em;
	color:#32331D;
    margin-top: 0px;
    font-weight: normal;
}

/* menu de navigation */

nav ul
{
    list-style-type: none;
    display: flex;
	font-size: 1.3em;
}

nav li
{
    margin-right: 30px;
}

nav a
{
    font-size: 1,1em;
    color:#32331D;
    padding-bottom: 3px;
    text-decoration: none;
}

nav a:hover
{
    color: #007189;
    border-bottom: 3px solid #007189;
}

/* Bannière avec l'image */

#banniere_image
{
    margin-top: 15px;
    height: 200px;
    border-radius: 5px;
    background: url('images/fins.png') no-repeat;
    position: relative;
    box-shadow: 0px 4px 4px #616161;
    margin-bottom: 25px;
}



/* Corps de la page */

section
{
    display: flex;
    margin-bottom: 2px;
}


article
{
    margin-right: 2px;
    flex: 3;
	text-align: justify;
}


article p
{
    font-size: 1em;
}

aside
{
    flex: 0,1; 
    position: relative; 
    border-radius: 10px;
    padding: 5px;
    color: #007189;
    font-size: 1,4em;
	text-align: justify;
}


/** Sidebar **/

#sidebar{
	float:left;
	width:17%;
	margin-left:1% 
}

#sidebar ul{
	margin:5;
	padding:10
}

#sidebar ul li{
	list-style:none;
	margin:1em 0;
	background:#007189;
	padding:1em;
	border-radius:0.5em
}

#sidebar ul li a{
	text-decoration:none;
	color:#fefefe;
	display:block
}

#sidebar ul li a:hover{
	text-decoration:underline
}


/* Bas de page */

footer
{
    background: url('images/separator.png') repeat-x top;
    display: flex;
}

#copyright
{
margin: auto;
color: #819c9c;
font-style: italic;

  } 
  
  
/* Media queries */


 @media all and (max-width: 1024px)
{ #bloc_page
{
	width: 98%;
	}
	}



@media all and (max-width: 1024px)
{
    nav
    {
        width: auto;
        text-align: left;
    }


	    nav ul
    {
        flex-direction: column;
    }

	    nav li
    {
        padding-left: 5px;
    }

    nav a:hover
    {
        border-bottom: 0;
    }
}


@media all and (max-width: 1024px)
{
    #banniere_image
    {
        display: none;
    }
}


@media all and (max-width: 1024px)
{
    section
    {
        flex-direction: column;
    }

    section, article, aside
    {
        width: auto;
		display: block;
        margin-bottom: 10px;
    }

	/* manip 08 */ 

	
	#sidebar 
	{
		float:none;
		width: 84%;  
		text-align: center;
    }

}



Je vous remercie par avance pour votre aide ! :ange:

Jorsen

-
Edité par JorsenRilke 3 janvier 2018 à 15:54:12

Vous êtes demandeur d'emploi ?
Sans diplôme post-bac ?

Devenez Développeur web junior

Je postule
Formation
en ligne
Financée
à 100%
4 janvier 2018 à 14:26:43

Merci beaucoup noopsy360 pour ton aide ! :)

Je m'aperçois que mes codes (html et css) sont bien trop bavards comparés aux tiens...ton code est très épuré, j'ai encore beaucoup de chemin à faire !

Par contre, est-ce normal que l'affichage en responsive ne fonctionne pas bien sous IE (version 11 testée) ? Ma question est peut-être stupide mais je me dis que sur les smartphones de type Lumia (avec windows intégré), j'imagine que le navigateur fourni est IE...???

Merci encore pour ce beau cadeau, c'est vraiment chouette ! :zorro:

Jorsen

Problème pour centrer un élément - Media queries

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
  • Editeur
  • Markdown