28172 sujets

CSS et mise en forme, CSS3

Problème de positionnement en fonction de la résolution

Bonjour à tous.

Voila je suis actuellement en cours de formation en Développement WEB et je travaille sur un petit projet.

J'ai donc réalisé ma maquette et commencé l'intégration de celle-ci. Tout se passe bien hormis pour deux éléments de mon site.

En fait j'ai un bloc central d'une largeur de 800px de largeur et sur le côté droit deux petits blocs (réseaux sociaux etc) et une flèche de retour haut de page Jquery.

Mon problème c'est lorsque je réduis la largeur de ma fenêtre, je m'aperçois que les deux menus de droite et la flèche finissent par chevaucher le bloc central.

J'ai bien prévu l'utilisation de media queries pour coller aux résolutions smartphones et tablettes, mais ça me chiffonne, il doit y avoir un soucis pour que mes blocs se chevauchent.

Voila qui vous fera mieux comprendre ce que je veux dire.

Résolution "normal" : http://hpics.li/b3e228c
"Petite" résolution : http://hpics.li/c3f156f

Voici le code html et css :

<!DOCTYPE HTML>
<html lang="fr">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="viewport" content="width=device-width, target-densitydpi=device-dpi, initial-scale=1"/>
		<meta name="robots" content="index, follow" />
		<link rel="stylesheet" href="backend/style.css" type="text/css" media="screen">
		<script type="text/javascript" src="backend/jquery-1.3.2.min.js"></script>
		<script type="text/javascript" src="backend/jquery.oembed.js"></script>
		<script type="text/javascript" src="backend/scrolltop.js"></script>  
		<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /> 
	</head>
<body>
	<!-- DIV de mise en page du site -->
	<div id="wrapper"> 
	<!-- DIV de mise en page du site -->
		<header id="banniere"><img src="images/banner.png" alt="bannière du site" /></header> 
			<!-- début du contenu centré -->
			<div id="leftcontent">
				<nav id="menu">
					<ul>
						<li><a href="index.html" class="menucaseselected">Home</a></li>
						<li><a href="programmation.html"  class="menucase">Test 1</a></li>
						<li><a href="linux.html"  class="menucase">Test 2</a></li>
						<li><a href="web.html"  class="menucase">Test 3</a></li>
					</ul>
				</nav>
				<!-- Bloc blanc principal -->
				<section id="main_content"> 
				<!-- Bloc blanc principal -->
					<div id="filariane"> <!-- gère le fil d'ariane (lien de localisation) -->
						<a href="index.html">Accueil</a>
					</div>		
					<article id="contenu">
						 <!-- contenu du site -->
						

					</article>
				</section>
				<footer id="bottom">
					<p id="copy">Copyright .....</p>
					<p id="bottomlinks"><a href="#">Plan du site</a> - <a href="#">Mentions légales</a> - <a href="#">Contact</a></p>
				</footer>
			</div>
			<!-- fin du contenu centré -->
	</div>
		<!-- contenu de droite -->
		<div class="rightcontent">
				<!-- Réseaux sociaux -->
				<aside class="socialtop">Suivez moi</aside>
				<aside class="socialcontent">
					<p id="tweet"><a href="#"><img src="images/twitter_logo.png" alt="logo twitter" /> Twitter</a></p>
					<p id="boobook"><a href="#"><img src="images/facebook_logo.png" alt="logo facebook" /> Facebook</a></p>
					<p id="google"><a href="#"><img src="images/googleplus_logo.png" alt="logo google +" /> Google +</a></p>
				</aside>
				<!-- Bloc a propos -->
				<aside class="abouttop">A propos</aside>
				<aside class="aboutcontent">
					<p>Lorem ipsum etc .....................</p> <br />
					<p><a href="#">En savoir plus...</a></p>
				</aside>
	</div>
	<!-- fin du contenu de droite -->
</body>
</html>


Code css : 


/* Styles resets */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, menu, header, section {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}

body {
	line-height: 1;
}

ol, ul {
	list-style: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*****************************************************************************/

/* Contenu central du site */
#wrapper {
	width:800px;
	margin: 0 auto;
}

#banniere {
	margin-top:15px;
	margin-bottom:20px;
}

#main_content {
	background-color:#FFFFFF;
	border:1px solid #F57421;
	min-height:675px;
}

#filariane {
	padding-top:15px;
	padding-left:10px;
	font-weight:bold;
}

#filariane a {
	text-decoration:none;
}

#contenu {
	background-color:#efefef;
	border:2px solid #b8b8b8 ;
	min-height:600px;
	border-radius:10px;
	margin-left:40px;
	margin-right:40px;
	margin-top:20px;
	margin-bottom:25px;
	padding-top:10px;
	font-size:14px;
}

#contenu p {
	margin-left:35px;
	margin-right:35px;
	margin-bottom:8px;
}

#bottom {
	background-image:url(../images/footer_bg.png);
	background-repeat:repeat-x;
	height:61px;
}


/* styles généraux */

#hautdepage {
		margin-top:50px;
		font-size:12px;
		margin-right:125px;
}

a {
	color:#D7820A;
}

body {
	 background-image:url(../images/background.jpg); 
	background-repeat:no-repeat;
	font-family:Arial, Helvetica, sans-serif;
}


/* Rangement de la div central avec les div du coté */
#leftcontent {

	float:left;
	width:800px;
}

.rightcontent {
	float:left;
	margin-left:60px;
}

/* Div des blocs de droite */



.socialtop {
	position:absolute;
	background-image:url(../images/menu_bg.png);
	background-repeat:repeat-x;
	width:175px;
	height:50px;
	text-align:center;
	color:#FFFFFF;
	top:144px;
	font-size:20px;
	padding-top:11px;
}

.socialcontent {
	position:absolute;
	min-height:170px;
	background-color:#FFFFFF;
	border:1px solid #F57421;
	width:173px;
	margin-bottom:50px;
	top:194px;
}

.abouttop {
	position:absolute;
	background-image:url(../images/menu_bg.png);
	background-repeat:repeat-x;
	width:175px;
	height:50px;
	text-align:center;
	color:#FFFFFF;
	top:419px;
	font-size:20px;
	padding-top:11px;
}

.aboutcontent {
	position:absolute;
	min-height:150px;
	background-color:#FFFFFF;
	border:1px solid #F57421;
	width:153px;
	font-size:13px;
	padding:10px;
	padding-top:15px;
	top:469px;
}

/* footer */

#copy{
	color:#FFFFFF;
	text-align:center;
	font-size:16px;
    font-weight:bold;
	padding-top:12px;
}

#bottomlinks {
	text-align:center;
	color:#D7820A;
	font-size:12px;
	padding-top:6px;
}

/* réseaux sociaux */

#tweet {
	color:#00ACEE;
	font-size:24px;
}

#tweet a {
	text-decoration:none;
	color:#00ACEE;
}

#boobook {
	color:#52659D;
	font-size:24px;
}

#boobook a {
	text-decoration:none;
	color:#52659D;
}

#google {
	color:#C53B2B;
	font-size:24px;
}

#google a {
	text-decoration:none;
	color:#C53B2B;
}

#tweet img, #boobook img, #google img {
	font-weight:bold;
	vertical-align:-15px;
}

/* menu */

#menu {
	background-image:url(../images/menu_bg.png);
	background-repeat:repeat-x;
	height:50px;
}

#menu li {
	float:left;
}

#menu a {
	text-decoration:none;
	color:#FFFFFF;
	font-size:20px;
	padding-top:13px;
}

.menucase {
	text-align:center;
	display: block;
	width:200px;
	color:#FFFFFF;
	height:46px;
}

.menucaseselected {
	text-align:center;
	display: block;
	width:200px;
	color:#FFFFFF;
	height:46px;
	background-color:#F57421;
	height:35px;
}

.menucase:hover {
	background-color:#F57421;
	height:35px;
}


Pour info, la div #hautdepage contient la flèche en Jquery.

Voila si une âme charitable peut me donner un coup de main ça serait sympa.

Cordialement
Bonjour shupi,

En fait si je regarde ton code css, ta div de gauche a une valeur width fixe de 800px, du coup même si tu redimensionnes la fenêtre la valeur reste 800px. En revanche tu as une valeur float pour ton .rightcontent qui fait qu'elle se positionnera en fonction du bord de l'écran... Résultat = ta div de gauche reste la même et ta div de droite garde sa place par rapport a l'écran donc ça se chevauche...

Alors deux approches possibles:

Soit tu appliques un width relatif: exemple max-width : 800px ou width : 65%
Soit tu ne met de valeur float sur ta div de droite.

voilà j'espère t'avoir bien aiguillé Smiley cligne
Bonjour et merci pour ta réponse.

Donc dans un premier temps j'ai modifié comme ceci :

#wrapper {
	max-width:800px;
	margin: 0 auto;
}

#leftcontent {
	float:left;
	max-width:800px;
}

.rightcontent {
	float:left;
	margin-left:60px;
}


Puis

#wrapper {
	width:800px;
	margin: 0 auto;
}

#leftcontent {
	float:left;
	width:800px;
}

.rightcontent {
	margin-left:60px;
}


Sans que ça ne change quelque chose, j'ai toujours le chevauchement, donc j'ai peut être mal compris ton explication Smiley eek

merci encore
Ok bon du coup j'ai essayé de mon côté... en fait tu mets bien tes #leftcontent et .rightcontent en float left et tu rajoutes position : relative;

#leftcontent {
    float:left;
	position:relative;
	width:800px;
}

.rightcontent {
    float:left;
	position:relative;
	margin-left:60px;
}


ça a marché pour moi...
Merci, effectivement maintenant ça marche. Je te remercie pour le coup de main.

Il ne me reste plus qu'à trouver une solution pour la compatibilité pour Internet Explorer, sur les versions antérieurs à la 9 c'est une cata pour certains objets :

http://hpics.li/60d73a7

J'ai ajouté déjà le SHIV Html5 qui règle en partie certains problèmes mais pas tous comme visible sur le screen.

Le footer est de taille réduite et non collé au bloc précédent et le bloc réseaux sociaux qui devrait être à droite à côté du bloc principal se retrouve en bas à gauche.

Si quelqu'un à une solution (je sais j'abuse).

Encore merci Smiley smile
Modifié par shupi (24 Nov 2013 - 19:48)
Alors oui ce Fameux internet explorer qui fait rager les web designers Smiley cligne alors ce que je te conseille de revoir peut être ta partie "reset de ton fichier css" ... Sinon moi j'utilise en un fichier css normalize.css que l'on peut trouver avec l'html5 boilerplate ou encore ici ... Après t'as toujours la solution de créer un fichier css spécial internet explorer...
J'étais justement parti sur faire une feuille de style spécial IE, mais en fait ça ne fonctionne pas pour l'instant, exemple je veux lui préciser que le footer fait 800px de largeur mais il ne prend pas.

Bon faut que je regarde tout ça plus en détail Smiley smile
Sujet clos
Aller à