28172 sujets

CSS et mise en forme, CSS3

[Résolu] Problème de positionnement d'un block avec le zoom navigateur

Bonjour à tous,

Je suis toute nouvelle sur le forum. Je viens de me lancer dans l'écriture de mon site internet en autodidacte. Je suis sous ubuntu 14.04 et je bosse sous sublimtext. Je n'y suis que depuis deux jours et je bloque déjà !!!!

Du coup, sûrement une question simple mais j'ai pas trouvé ma solution sur le net (sûrement parce que je n'ai pas les bons mots clés).

Je souhaite positionner un block de texte au sein de la page, toujours légèrement à gauche de l'image de poisson en background (voir sur pj copie d'écran du haut).
Tant que je centrais mon block avec 
margine: auto
, le zoom du navigateur n'avait pas d'effet délétère sur la mise en forme. Ca allait nickel.
Mais je voudrais que le block soit légèrement décentré. Et la patatra, le zoom du navigateur change toute la mise en page avec même un block qui sort de l'image.

J'ai essayé toutes les solutions de 
position: fixed
, absolute, et relative... rien n'y fais, je n'y comprends plus goutte..!!!!
Est-ce que quelqu'un pourrait m'aider là dessus car je sèche (déjà! lol )

Merci beaucoup d'avance,

CHa

(mon code,

<!DOCTYPE html>
<html>
	<HEAD>
		<meta charset = "utf-8" />
		<title> Coucou </title>

		<link rel="stylesheet" type="text/css" href="style.css">


	</HEAD>
	
	<BODY>
		<h2> Hi !! </h2>
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		
<div id = "cadre1"> 
 
 blablablablablablab blablabla  blablablablablablab blablabla blablablablablablab blablabla blablablablablablab blablabla blablablablablablab blablabla blablablablablablab blablabla blablablablablablab blablabla  blablablablablablab blablabla  blablablablablablab blablabla blablablablablablab blablabla blablablablablablab blablabla blablablablablablab blablabla blablablablablablab blablabla blablablablablablab blablabla
  blablablablablablab blablabla  blablablablablablab blablabla blablablablablablab blablabla blablablablablablab blablabla blablablablablablab blablabla blablablablablablab blablabla blablablablablablab blablabla
   blablablablablablab blablabla  blablablablablablab blablabla blablablablablablab blablabla blablablablablablab blablabla blablablablablablab blablabla blablablablablablab blablabla blablablablablablab blablabla
    blablablablablablab blablabla  blablablablablablab blablabla blablablablablablab blablabla blablablablablablab blablabla blablablablablablab blablabla blablablablablablab blablabla blablablablablablab blablabla
    

</div>

	</BODY>
</HTML>


body {

	
   background-image: url("image1.JPG");
   background-repeat: no-repeat;
   background-position: top center; 
   background-color: rgba(0, 0, 18,1);
}

#cadre1{
	background-color: rgba(255,255,255,0.3);
	margin-left: 400px;
	position: fixed;
	width:750px;

}




) upload/59416-aide.JPG
Modifié par boubchat (17 Jul 2015 - 01:48)
Salut,
j'ai pas bien compris le truc du zoom la ... Pourquoi est ce que tu zoom/dezoom ?

Pour ce qui est des positionnements : http://www.alsacreations.com/tuto/lire/608-initiation-positionnement-css.html

J'avais pas ton image du coup j'en ai pris une autre.
J'ai mis une margin-right qui dépasse la moitié (margin-right:60% ; ) pour jamais être dans la partie noir des serviettes.
http://jsfiddle.net/bm8fm9hp/

Mais encore une fois sans comprendre le truc du zoom, je réponds peut être a coté ^^
Bonjour à tous

Merci beaucoup Mathieu de ta réponse. J'avais consulté cette doc sans succès.

oui je pense que tu as bien compris ma question quant au zoom (controle + ou - du nav). Sur ton exemple, le cadre de texte n'est pas toujours proportionnel à ta page "blanche" selon que tu zooms plus ou moins (au départ, il occupe un tiers et si tu zooms, il va prendre toute la place sur la page blanche). C'est ce que j'essaie d'éviter. Mais j'ai encore eu beau chercher aujourd'hui, j'ai encore pas de solution.

En fait ce que je cherche a faire c'est comme sur le template de wix :

http://fr.wix.com/website-template/view/html/1327?originUrl=http%3A%2F%2Ffr.wix.com%2Fwebsite%2Ftemplates%2Fhtml%2Fall%2F7&bookName=create-master-new&galleryDocIndex=0&category=all&metaSiteId=

où le texte central ("Relocalisation, déménagement ...") est légèrement décentré par rapport au centre de la page mais reste bien toujours à la même place (toujours légèrement à gauche de la famille) lors du zoom/dezoom. De même dans mon site, je souhaite que le block de texte soit légèrement à gauche du poisson et y reste, toujours en conservant les mêmes proportions comme sur le template de wix.

Moi sur mon script, le texte ne conserve pas sa place et pars à perpet du poisson !!

J'ai regardé les html et css du template de wix mais je vous avoue que je suis perdue et que je vois pas comment ils ont fait :'(

avez vous une idée pour faire cela ?

Merci encore mille fois de vos réponses!!
Bon après une lutte acharnée, j'ai enfin trouvé la solution.

Je vais faire part de ce que j'ai compris (ou cru comprendre), ça peut toujours servir pour les prochain(e)s.

Pour faire un cadre de texte décentré, j'ai cru comprendre qu'il fallait d'abord créer un cadre qui va borner notre page (moi j'ai mis des div) puis là on est à même de positionner le cadre de texte où on veut grâce à des marges (margin). Enfin des petits paddings pour faire choli !!!

et le zoom in et out c'est NICKEL !!

voili voilou

donc mon code en dessous et l'aperçu final !!

Merci en tout cas de votre accueil et à très bientôt !

Mon html

<!DOCTYPE html>
<html>
	<HEAD>
		<meta charset = "utf-8" />
		<title> Coucou </title>

		<link rel="stylesheet" type="text/css" href="style.css">

	</HEAD>
	
	<BODY>

<div class = "cadre1"> 
	<p id = "youpi">
  		hdkshgsjgdfhjgf hdgfdhgdgjfgjk xghkfhgj rhfjkhd jhf djghfdkhgk dghkdhj khkdhfgkdh kjfdhg kjfdhgjk fdwhkj wdhkgjh jdwgh ikwdrhjh gjkhlgdw jkglhdrksjk hdkshgsjgdfh jgfhdgfdh gdgjfgjkxghkfhgjrhfjkhdjhfdjghfd khgkdghkdhjk hkdhfgk dhkjfdhgkj fdhgjk fdwhkjwdhk gjhjdwghik wdrhjhgjkh lgdwjkglhdrksjk   hdkshgsjgdfhjg fhdgfdhgdgjfg jkxghkfhgjrhf j khdjhfdjghf dkhgkdghkdhjk hkdhfgkdh kjfdhgkjfdhgjkf dwhkjwdhkgjhjd wghikwdrhj hgjkhlgdw jkglhdrksjk
	
  </p>

	</div>

	</BODY>
</HTML>



et mon CSS

body {
    
   background-image: url("image1.JPG");
   background-repeat: no-repeat;
   background-position: top center; 
   background-color: rgba(0, 0, 18,1);
   
}

.cadre1{
    background-color: none;
    width:1600px;
    height: 1060px;
    margin:auto;
    border-style: solid;
    
}


#youpi{
    background-color: rgba(0,0,0,0.3);
    color: white;
    margin-left: 200px;
    margin-top: 500px;
    width:400px;
    word-wrap: break-word;
    padding: 20px;

}



upload/59416-imagefinal.jpg
Sujet clos
Aller à