photo d'article qui s'adapte au body selon taille d'écran utilisé

Statut : non résolu

Ce sujet contient 14 réponses, 3 participants et a été mis à jour pour la dernière fois par wasicu, le il y a 13 années et 7 mois.

15 sujets de 1 à 15 (sur un total de 15)

Auteur

Messages
19 juin 2011 à 16 h 44 min #496449

ty.blot
Membre

Padawan WordPress
74 contributions

Bonjour,

j’ai un big problème …

j’ai inséré une photo dans ma page d’accueil.

Lorsque je fais varier la taille de la page à l’écran (comme si je disposais d’un écran plus petit), cette photo fini par recouvrir mon menu placé dans la sidebar à droite . En effet, la photo ne suit pas la réduction du boby et fini par en déborder.

Pas facile à expliquer : le mieux est de voir le site :mon site

super sympa celui qui me sortira de ce pétrain.

signé: un vrai débutant !

19 juin 2011 à 20 h 44 min #777439

ty.blot
Membre

Padawan WordPress
74 contributions

ohé du bateau ….

j’en appelle à votre dévouement pour m’apporter une solution à mon problème …

Please HELP ME please, please !!!

merci beaucoup par avance.

20 juin 2011 à 11 h 01 min #777440

wasicu
Membre

Maître WordPress
2752 contributions

Salut ty.blot

Pas trop de possibilité de s’en sortir. Tu donnes des marges pour ton div id content et ton image a une largeur fixe.
Tu devrais te renseigner sur les design fluides en css qui sont basés sur les % et ou les em plutôt que de donner du pixel. Sinon tu peux attribuer un overflow:hidden; à ton div #content dans style.css, c’est pas très beau mais au moins l’image ne dépasse plus.

20 juin 2011 à 13 h 52 min #777441
ty.blot
Membre

Padawan WordPress
74 contributions
hello !

merci de l’aide.

peux tu me guider pas à pas à propos de tes propositions, je suis encore débutant . Et si tu le veux, commençons par la deuxième solution.

merci encore

thierry

Voici mon CSS
```
/*
Theme Name: picture-perfect_child
Description: Thème enfant pour picture perfect
Author: Thierry BLOT
Template: picture-perfect
*/

* { 
	list-style: none outside none;
	margin: 0;
	padding: 0;  
}

body {
	text-align: center;
	color: #521c3f;
	font-family: Arial, »Lucida Grande »,Tahoma, »Lucida Sans Unicode »,Verdana,sans-serif;
	background-color: #521c3f;
	 min-width:1024px; 
}

body a {
		color: #5F518A;
	text-decoration: none;
}

body a:hover{
	color: white;
	text-decoration: underline;
}

#upperBar {
	height: 0px;
	background: #01bcff;
}

#wrapper {
	
text-align: left;
position: relative;
	margin: 20px auto 0;
	width: auto;
}    

#welcomeheading a {
	margin-bottom: 10px;
	padding-bottom: 15px;
	font: 12pt « Trebuchet MS », « Lucida Grande », Lucida, Vernada, sans-serif;
	padding-top: 30px;
	color: #EBEDFF;
	text-decoration: none;
}

#welcomeheading {
	text-align: center;
	position: absolute;
	margin-left: 300px;
	margin-right: 0;
	margin-top: -14px;
}

#welcomeheading a:hover {
	color: #999;

}

#middleword {
	color: #909090;
}

#welcomeheading a:hover #middleword {
	color: #fff;
}
 
 
#description {
	text-align: center;
	font: 57px Garamond, Verdana, Helvetica, Sans-serif;
	color: #EBEDFF;
	margin-top: 27px;
	padding-bottom: 5px;
	padding-top: 10px;
	position:inherit;
}  

                
#content {
	margin-left: 290px;
	margin-right: 310px;
	float: none;
	padding-top: 180px;
	display: block;
	
}

	#content .notice p {
		border-top: 1px solid #bbb;
		border-bottom: 1px solid #bbb;
		padding: 5px 0px;
		font-size: 12px;
	margin: 1px;
	
}
		#content .notice {

	margin-bottom: 20px;

}

    #content .post {

	padding-top: 10px;
		-webkit-border-radius: 6px;
	-khtml-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	background-color: #B6B7BF;
	border: 1px solid #521c3f;
	padding: 10px;
	margin-top: 20px;
	margin-bottom: 20px;
	
}

   #content form  {
	padding-right: 5px;
	padding-left: 5px;
}
	#content h1 {
	color: #FFF;
	text-decoration: none;
	font-size: 32px;
	font-weight: bold;
	padding-bottom: 20px;
}

#content h1, #content h2, #content h3 {
	padding-bottom: 8px;
}

	#content .post h2 a {
	color: #FFF;
	text-decoration: none;
	padding: 3px 0 8px;
	font-size: 24px;
	font-weight: bold;
}

	#content .post h2 a:hover {
		color: #999;
	}
	
	#content .post h3 {
		font-size: 12px;
		font-weight: normal;
		color: #999;
			margin-bottom: 0px;
	margin-top: 5px;
	padding-bottom: 8px;
}


	#content .post h3 a {
		color: #999;
	}              
	
	#content .post h3 a:hover {
		text-decoration: underline;
	color: white;
}
	
	#content .post img {
	margin-bottom: 10px;
	margin-top: -5px;
}     

#content .post .gallery {
	overflow: auto;
}

.aligncenter,
div.aligncenter {
   display: block;
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 7px;
}

.alignleft {
   float: left;
}

.alignright {
   float: right;
}


.wp-caption {
   border: 1px solid #ddd;
   text-align: center;
   background-color: #f3f3f3;
   padding-top: 4px;
   margin: 10px;
   /* optional rounded corners for browsers that support it */
   -moz-border-radius: 3px;
   -khtml-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px;
}

.wp-caption img {
   margin: 0;
   padding: 0;
   border: 0 none;
}

#content p.wp-caption-text  
   {
   font-size: 11px;
   line-height: 17px;

   margin: 10px;
	color: #000;
	text-align: center;
}
	
	#content .post a img {
	}
		
	#content .post ul {
		margin-left: 20px !important;
	}
	
	#content .post ul li {
		list-style-type: disc !important;
	}
	
	#content p,
	#content .post ul li {
		font: normal 15px/20px Verdana, Helvetica, Sans-serif;
		margin-bottom: 10px;
		margin-top: 0px;
	color: #521c3f;
	margin-right: 0px;
	text-align: justify;
}
	
	#content blockquote {
	margin-left: 10px;
	padding-left: 10px;
	font-style: italic;
	color: #888;
	background: #333;
	padding: 2px 6px;
	
}
	
	#content p a {
}
	
	#content p a:hover {
		text-decoration: underline;
	color: #521c3f;
} 
	
	#content small {
	    margin: 0 auto;
	    text-align: center;
	    display: block;
	    border-top: 3px solid #333;
	    border-bottom: 1px solid #333;
	    font-size: 11px;
	    color: #999;
	}
	
	#content ol {
	line-height: 1.6;
}
	#content ol.commentlist {
		margin-top: 10px;
	}
	
	#content ol.commentlist li {
		margin-bottom: 10px;
		display: inline-block;
	margin-top: 20px;
} 
	
		#content ol.commentlist li .commentMeta {
			width: 140px;
			float: left;
			margin-top: 5px;
		} 
		
		    #content ol.commentlist li .commentMeta span {
				display: block;
			}
			
			#content ol.commentlist li .commentMeta span.author,
			#content ol.commentlist li .commentMeta span.author a {
				color: #CCC;    
				text-decoration: none;
				margin-bottom: 5px;
			}                     
			
			#content ol.commentlist li .commentMeta span.date a {
				color: #666;
				text-decoration: none;
				font-size: 11px;
			}

		
		#content ol.commentlist li .commentText {
			width: 400px;
			float: right;
			font-size: 12px;
	padding-left: 20px;
}
	
	
	#content ol.commentlist .avatar {
float: left;
}


	#content h3 {
		color: #999;

	}
	
	#content #commentform input {
		padding: 5px;
		font-family: Arial, Helvetica, Sans-serif;
	}
	
	#content #commentform textarea {
		width: 410px;
		padding: 10px;
		font-family: Arial, Helvetica, Sans-serif;
	}
	
	#content .nextprevious {
	height: 40px;
	display: block;
	margin-top: 20px;
	font: normal 13px/20px Verdana, Helvetica, Sans-serif;
}	


	#content .nextprevious a {
	color: white;
}               
	
	#content .nextprevious .left {
		float: left;
	}              
	
	#content .nextprevious .right {
		float: right;
	}
	
	#content .adBrite {
		display: block;
		margin-bottom: 20px;
		border: 1px solid #333;
	}

#sitemeter {
	text-align: center;
	width: 160px;
		font-size: 11px;
		color: #999;
}
#sitemeter img{
	padding-bottom: 8px;
	padding-top: 8px;
}

#sidebar {
	width: 210px;
	float: right;
	text-align: left;
	margin-right: 60pt;
	padding-top: 190px;
	display: inline;
} 

#sidebar li{
	padding-left: 11px;

}

div#sidebar > li {
	-webkit-border-radius: 6px;
	-khtml-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	margin-top: 10px;
	background-color: #B6B7BF;
	border: 1px solid #424242;
	padding: 0px;
	width: 265px;
	text-align: left;
	font-size: 15px;

}


	#sidebar h2 {
		font-weight: bold;
		font-size: 17px;
		text-align: center;
		text-transform: uppercase;
		margin-bottom: 10px;
	    padding-top: 8px;
}
	
	#sidebar a img {
		border: none;
	}
	

	#sidebar ul {
		margin-top: 10px;
		margin-bottom: 10px;

	text-decoration: none;
}
	
	#sidebar ul li {
		font-size: 15px;
	
		padding: 0 10px;
		margin: 0 0 5px 5px;
			text-decoration: none;
	}
	
	#sidebar ul li a {
		color: #999;
		text-decoration: none;
	}
	
	#sidebar ul li span {
		color: #C8F70C;
		margin-left: 5px;
	}
	
	#sidebar ul li a:hover {
		color: #521c3f;
	text-decoration: none;
}
	
	#sidebar ul#nav {
		margin: 10px 0 20px 0;
	}
	
	#sidebar ul#nav li {
		margin: 0;
		padding: 0;
	}
		
	#sidebar ul#nav li a {
		display: block;
		height: 17px;
		padding: 7px 10px;
		background: url(img/nav_off.png) 0 0 no-repeat;
		margin-bottom: 5px;
		text-decoration: none;
		font-size: 12px;
		text-transform: uppercase;
		font-weight: bold;
		color: #999;
	}
	
	#sidebar ul#nav li a:hover {
		background: url(img/nav_off.png) 0 -31px no-repeat;
	}        
	
	#sidebar ul#nav li a.active {
		background: url(img/nav_on.png) 0 0 no-repeat;
		color: #FFF;
	}


#footer hr {
height: 1px;
}


div#footer {
    font-size: 11px;
	float: none;
	clear: left;
	-moz-border-radius: 6px;
   -khtml-border-radius: 6px;
   -webkit-border-radius: 6px;
   border-radius: 6px;
	border: 1px solid #4d4d4d;
	background-color: #B6B7BF;
	padding: 5px 0 2px;
	position: relative;
	margin: 10px 310px 20px 290px;
}
#footer p {
        margin-bottom: 5px;
        color: #eee;
	text-align: center;
}
    
#footer a {
        color: #521c3f;
	text-decoration: none;
}
    
#footer a:hover {
        text-decoration: none;
        color: #fff;
    }

.clearfix {
	clear: both;
}	

.ctc {
text-align: center;
	text-decoration: none;
	line-height: 80%;
	background-color: #000;
	margin-bottom: 10px;
	padding-right: 10px;
	padding-top: 0px;
	padding-bottom: 10px;
}	


.ctc a {
	text-decoration: none;
	text-transform: lowercase;
	font-family: « Lucida Grande »,Tahoma, »Lucida Sans Unicode »,Verdana,sans-serif;
	margin: 4px;
	border: thin none #060606;
}
.ctc a:hover{
	color: #fff;
	margin: 3px;
	border: thin solid #8acef3;
	background-color: #0c0c0c;
}

[disabled] {

	color:#dddddd;

	border-color:#dddddd!important;

	background:none!important;

}

 #upperBox {
	margin-bottom: 10px;
	text-align: center;
	position: absolute;
	right: 0;
	padding-top: 5px;
}
	
 #upperBox a img {
		display: block;
		margin: 0 auto;
		border: none;
	}
	

	 #upperBox p {
		margin: 5px 0;
		font-size: 10px;
		text-align: center;
	}
	
	 #upperBox input {
		height: 18px;
		padding: 5px 5px 5px 25px;
		background: url(img/upperBox_search.png) top left no-repeat;
		border: 0;
		width: 100px;
		color: #999;
		margin-top: 5px;
	}
	
	 #upperBox input:focus {
		color: #FFF;
	}




.clear {
	clear: both;
}

h3 {
		color: #EBEDFF;
		font-family: Garamond, »Lucida Grande »,Tahoma, »Lucida Sans Unicode »,Verdana,sans-serif;
		font-size: 22px;
		margin-left: 382px;
		margin-top: 168px;
		position: absolute;
	}
```
20 juin 2011 à 15 h 06 min #777442

wasicu
Membre

Maître WordPress
2752 contributions

#content {
margin-left: 290px;
margin-right: 310px;
float: none;
padding-top: 180px;
display: block;
overflow:hidden;

}

20 juin 2011 à 15 h 32 min #777443

Li-An
Participant

Maître WordPress
28916 contributions

Le plus simple est de prévoir une image correspondant à une taille d’écran standard (genre 800 px ou 960 px en largeur).

20 juin 2011 à 15 h 39 min #777444

wasicu
Membre

Maître WordPress
2752 contributions

Yes Li-An. Ce qui signifie pour ty.blot de réduire considérablement la largeur de son image qui est de 680px à l’heure actuelle. Rien que ses marges droite et gauche ça fait déjà 600px.

20 juin 2011 à 15 h 46 min #777445

Li-An
Participant

Maître WordPress
28916 contributions

Ben oui, c’est ça faire un thème 🙂

20 juin 2011 à 15 h 51 min #777446

ty.blot
Membre

Padawan WordPress
74 contributions

Problème résolu. et grand merci …

effectivement, cette solution marche. Mais je reste curieux sur ta première solution, qui, à te lite serait , quant au résultat, plus esthétique.

Pourrais -tu me guider à nouveau et en espérant que ce process puisse en aider d’autres.

Pour cela, as tu besoin d’une de mon site ? ou tout ce joue encore sur la feuille de style CSS?

En tout cas, c’est sympa de faire profiter les débutants de tes compétences. merci encore

Thierry (wpman désireux d’apprendre …)

20 juin 2011 à 16 h 04 min #777447

wasicu
Membre

Maître WordPress
2752 contributions

Euh t’aider à faire passer ton design de fixe à fluide ? Ben non, c’est un boulot de fou, mieux vaudrait te documenter en passant par google sur les design fluides et de tout refaire à zéro parce qu’à voir ton css actuel…
Va visiter le site d’alsacréations par exemple et puis si l’anglais ne te fait pas peur, il y a des tonnes de tutos sur le sujet.
Bon courage.

20 juin 2011 à 16 h 10 min #777448

wasicu
Membre

Maître WordPress
2752 contributions

Li-An wrote:

Ben oui, c’est ça faire un thème 🙂

Sourire. Ben oui…

20 juin 2011 à 16 h 19 min #777438

ty.blot
Membre

Padawan WordPress
74 contributions

hello !, je prends bonne note de ton conseil.

En , fait, tout refaire, non non … par pour l’instant . Mon seul souci, c’est de savoir comment sera vu mon site sur des écran type ipad, iphone …

Mais avec la première solution, ça ne détruit pas le site. Ok, la photo est rognée, mais je pense aussi que celui qui veut réserver depuis son Iphone n’attend pas de se décider grâce à la largeur de cette photo …

Mais je vais tout de même m’intéresser au « deesign fluide et truc much …. »

Thierry

ps: merci encore !

20 juin 2011 à 16 h 24 min #777437

wasicu
Membre

Maître WordPress
2752 contributions

De rien. Normalement il existe des plugins pour les portables. Tu fais une recherche sur wordpress plugins iphone et tu seras comblé.

✅

20 juin 2011 à 16 h 28 min #777436

ty.blot
Membre

Padawan WordPress
74 contributions

je fais ma recherche, et si je bug, j’écris

bye !

thierry

20 juin 2011 à 16 h 38 min #777435

ty.blot
Membre

Padawan WordPress
74 contributions

Me voili, me revoilà…

tout d’abord, je suis une bille en anglais …

J’ai trouvé ça sur le forum; WPTouch

Qu’en penses tu ?

maintenant, si tu as une autre suggestion je suis preneur.

A savoir que le but est d’avoir la meilleure adaptation possible de mon site sur Iphone.

Merci d’avance

Thierry
Auteur

Messages