Position img différentes suivant résolution

Résolu/Fermé

sho Messages postés 181 Date d'inscription jeudi 18 octobre 2007 Statut Membre Dernière intervention 11 février 2010 - 5 nov. 2007 à 23:03
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 - 9 nov. 2007 à 00:40

Bonjour,
arrrg, je coince sur la page d'accueil de
http://aada.chez-alice.fr/index.html
site créé avec écran 1024*768,
et à une résolution supérieure, l'image en fond bouffe les 2 logos rouges à gauche; pas beau et pas top!
J'ai dû louper qqchose dans le positionnement (ou) et le css, mais quoi?.......
Pliz, y a t'il un grand manipulateur(trice) de css et html dans la salle qui pourrait m'aiguiller?

A voir également:

Position img différentes suivant résolution
Img burn - Télécharger - Gravure
Suivi position google - Guide
Position gps - Guide
Historique Google Maps : retrouver tous les lieux et les trajets enregistrés - Guide
Partage de position whatsapp - Guide

13 réponses

Réponse 1 / 13

gryzzly Messages postés 4608 Date d'inscription lundi 7 novembre 2005 Statut Contributeur Dernière intervention 24 octobre 2020 1 334
5 nov. 2007 à 23:26

Salut,

j'ai la flemme de lire ton code et ta css, mais voici un exemple rapide qui devrait te convenir :

<html>
<head>
<style type="text/css">
#page, #header, #conteneur_global, #img_Gauche, #Centre, #img_Droite
{border: 1px solid black;}
#page
{width:1000px;margin:auto;}
#header
{background-image:url("lien_vers_image");height:100px;width:1000px;}
#conteneur_global
{position:absolute;width:1000px;}
#img_Gauche
{position:relative;width:10%;height:500px;float:left;background-image:("url_vers_img")}
#Centre
{position:relative;width:79%;height:500px;float:left;background-image:("url_vers_img")}
#img_Droite
{position:relative;width:10%;height:500px;float:left;background-image:("url_vers_img")}
</style>
</head>
<body>
<div id="page">page
<div id="header">header</div>
<div id="conteneur_global">conteneur
    <div id="img_Gauche">img_G</div>
    <div id="Centre">le texte...</div>
    <div id="img_Droite">img_D</div>
</div>
</div>
</body>
</html>

Réponse 2 / 13

sho Messages postés 181 Date d'inscription jeudi 18 octobre 2007 Statut Membre Dernière intervention 11 février 2010 49
6 nov. 2007 à 22:08

Je coince dans le code et la css, tous ce décale, et pour couronner le tout, affichage différent sur le pc et une fois en ligne;
Je sens bien qu'il doit y avoir un truc entre position reletive et absolue, mais ???

Réponse 3 / 13

Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 921
6 nov. 2007 à 22:20

salut,

le problème c'est que ton code html est "sale".
difficile de démêler tout ça.

il faudrait en premier ordonner un peu ton code.
ensuite et très rapidement tu pourra mettre en œuvre la technique que te propose Gryzzly, c'est la mieux.

tu veux tenter ?
je te mets le code d'aplomb si tu veux.

Réponse 4 / 13

sho Messages postés 181 Date d'inscription jeudi 18 octobre 2007 Statut Membre Dernière intervention 11 février 2010 49
6 nov. 2007 à 22:23

Je suis là, ;
pour le code, je l'ai néttoyé la semaine dernière, sans aspiro, alors....
merci à toi DALIDA

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 13

Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 921
6 nov. 2007 à 22:45

une version organisée de ton code, ça attirera surement plus de réponses :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
	
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
		<meta name="title" content="academie d'aikido d'aurillac aada" />
		<meta name="description" content=" aikido et aikitaiso a aurillac cours-enfants et cours-adultes" />
		<meta name="keywords" content="aurillac,aikido,sports,aikitaiso,aada,art-martial,cantal,loisirs,association,dojo,cours,kanji" owner="aada,academie d'aikido d'aurillac" /><meta name="robots" content="index,follow" />
		<meta name="revisit_after" content="14" /><meta name="robots" content="All" /><link href="css/styles.css" rel="stylesheet" type="text/css" />
		
	</head>

	<body>
		<a name="top" id="top"></a>
		<div id="topMenu">
			<ul>
				<li style="border-left: medium none;"><a href="#">Plan du site</a></li>
				<li><a target="_blank" href="http://3aikido.org/">3A</a></li>
				<li><a href="mailto:aada@aliceadsl.fr">Email</a></li>
			</ul>
		</div>
		<div id="header">
		</div>
		<div id="menuPrincipal">
			<table align="center" border="0" cellpadding="0" cellspacing="0">
				<tbody>
					<tr>
						<td>
								<ul>
								<li class="imageSeparateur"></li>
								<li><a class="pageActive">accueil</a></li>
								<li><a href="pratiquer-aikido-a-aurillac.html">Pratiquer</a></li>
								<li><a href="aikido_aikido-enfants.html">Aïkido</a></li>
								<li><a href="aikitaiso.html">Aïkitaïso</a></li>
								<li><a href="photos.html">photos</a></li>
								<li><a href="Dojo_des_camisieres.html">Accès</a></li>
								<li><a href="liens.html">liens</a></li>
								<li><a href="contact.html">contact</a></li>
							</ul>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
		<div id="SousMenu">
		</div>
		<div id="contenuBg">
			<div id="zoneTexte">
				<span>
					<img title="logo 3a" style="position: absolute; top: 220px; width: 100px; height: 52px;" alt="Académie Autonome d'Aikido Kobayashi" src="images/logo3a.gif" />
					<img title="logoKAKKHH" style="position: absolute; top: 370px; width: 100px; height: 94px;" alt="Aïkido Kenshukai Kobayashi Hirokazu Ha" src="images/KAKKH.gif" />
				</span>
				<span>
					<img style="position: absolute; top: 200px; left: 180px; width: 650px; height: 316px;" alt="" src="images/entrees.jpg" />
				</span>
				<span>
					<img title="Kanji Aïkido" style="position: absolute; top: 200px; left: 820px; width: 95px; height: 265px;" src="images/kanji_aikido.gif" alt="kanji aikido" hspace="30" />
				</span>
				<p style="position: absolute; font-style: italic; height: 184px; top: 221px; text-align: center; left: 212px; width: 609px; font-weight: bold; font-size: 15px;">Bienvenue sur le site de l'Académie d'Aikido d'Aurillac,<br /> nouvelle Association créée en Janvier 2007 .<br /><br />Notre club est membre de l'Académie Autonome d'Aikido (3A). <br /><br />L'enseignement est assuré par
				Marie-Agnès Gomez (Kuraï Ni)<br /> et Jérôme Marchand (Kuraï Go), élèves de Cognard Shihan, fondateur de 3A.</p>
			</div>
			<p><a href="#top"><br /></a></p>
		</div>
		<div>
		</div>
		<p class="spacer"></p>
		<div id="footer">
			<p align="center">Copyright © 2007 Académie d'Aîkido d'Aurillac. Tous droits réservés. Design par DJI &amp;<a href="mailto:sho.db1@gmail.com"> SHÔd'B</a></p>
		</div>
	
	</body>
	
</html>
<script language="javascript"><!--
	CM_CLIENT = "tiscali";
	CM_SECTION1 = "PagesPersoTiscali";
	CM_RUBRIQUE = "general";
// --></script>
<script language="javascript" src="http://js.cybermonitor.com/tiscali.js"></script>
<noscript><img src="http://stat3.cybermonitor.com/tiscali_v?R=general&S=total;PagesPersoTiscali"></noscript>
<!-- /Cyberestat -->
<script language="JavaScript" type="text/javascript">
<!--
portal_category="/PagesPerso/";
portal_pagename="Abonne";
document.write('<scr'+'ipt language="javascript1.1" src="http://static.aliceadsl.fr/comportemental/Tagcomportemental.js"></sc'+'ript>');
-->
</script>

Réponse 6 / 13

sho Messages postés 181 Date d'inscription jeudi 18 octobre 2007 Statut Membre Dernière intervention 11 février 2010 49
6 nov. 2007 à 22:55

Je regarderais le code propre et le sale, pour voir ce qu'il me restait à nettoyer;( et en tirer les conséquences!!)
je viens de tester le "propre" illico", rendu nickel en 1024*768, mais sitot dépassé les 1200, hop, l'mage de fond chevauche à nouveaux les 2 p'tits logos rouges à gauche (elle doit les couver)
Bref, la css doit y être pour qqchose!!!

Réponse 7 / 13

Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 921
6 nov. 2007 à 23:01

oui bien sûr que c'est la css.

pour ton code je n'ai pas touché une seule virgule !!! (sauf peut être des caractères insécables)
je l'ai juste aéré et indenté !

mais maintenant tu peux voir clairement qu'il y a des balises inutiles…
et comme ça Gryzzly ne pourra plus faire la fine bouche !
-;o)

gryzzly Messages postés 4608 Date d'inscription lundi 7 novembre 2005 Statut Contributeur Dernière intervention 24 octobre 2020 1 334
6 nov. 2007 à 23:08

Facile le pic 8-/

grrrR!

Pour reprendre le fil, je viens de voir que j'ai des

&quot

qui sont apparus au milieu de mon exemple --> il faut bien sûr les remplacer par des guillemets doubles "

Réponse 8 / 13

sho Messages postés 181 Date d'inscription jeudi 18 octobre 2007 Statut Membre Dernière intervention 11 février 2010 49
6 nov. 2007 à 23:15

Je m'en vais dès demain (au taf) regarder de bcp plus près cette css et ces balises suivant vos conseils et interventions
(DALIDA, tu dois avoir six mains au moins pour intervenir dans tous ces codes et discutions en même temps!!!)
Merci à vous 2

Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 921
6 nov. 2007 à 23:20

DALIDA, tu dois avoir six mains au moins pour intervenir dans tous ces codes et discutions en même temps!!!
oui mais tu n'as pas compté le nombre de con***ies que je peux taper !!!
-:oD

gryzzly Messages postés 4608 Date d'inscription lundi 7 novembre 2005 Statut Contributeur Dernière intervention 24 octobre 2020 1 334 > Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016
6 nov. 2007 à 23:25

"oui mais tu n'as pas compté le nombre de con***ies que je peux taper !!! "

Fais attention, moi, je tiens un rapport quotidien que j'envoie aux autorités compétentes...

Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 921 > gryzzly Messages postés 4608 Date d'inscription lundi 7 novembre 2005 Statut Contributeur Dernière intervention 24 octobre 2020
6 nov. 2007 à 23:28

moi, je tiens un rapport quotidien que j'envoie aux autorités compétentes...
tu vois que t'as rien à faire de tes journées !!!

bon allez, stop the flood, c'est vraiment pas sérieux tout ça !!!

Réponse 9 / 13

gryzzly Messages postés 4608 Date d'inscription lundi 7 novembre 2005 Statut Contributeur Dernière intervention 24 octobre 2020 1 334
6 nov. 2007 à 23:20

Lol, nan, il a just eencore le temps (et le courage de lire des idioties -- et dire -- - ooops... les deux vont ensemble ... ' me manque le temps ou j'étais étudiant tiens...)

Plus sérieusement, penses à un truc supplémentaire qui me dérange :

Tu cumules une css externe et des attributs style dans la page html... évites autant que possible. Soit tu mets toute ta css dans le <head> de ta page, si elle est spécifique à la page en cours, soit tu mets tout en externe, ce qui permet de motiver en un clin d'oeil le design complet du site.
En aucun cas cumules les deux méthodes. C'est chiant à déboguer, on ne sait plus où donner la tête.

Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 921
6 nov. 2007 à 23:22

Tu cumules une css externe et des attributs style dans la page html... évites autant que possible
+ 1 000

d'autant que les styles n'ont pas la même priorité si ils sont embarqués ou non, d'où une source d'erreurs introuvables…

Réponse 10 / 13

sho Messages postés 181 Date d'inscription jeudi 18 octobre 2007 Statut Membre Dernière intervention 11 février 2010 49
8 nov. 2007 à 12:50

Je m'arrache la perruque; j'te fais un nettoyage du code, fais un css exprès pour l'intro, j'en ch.. un tantinet,
je commence à utiliser Notepad++, je positionne mes 3 div d'images horizontalement,
je perd puis retrouve le footer avec une manip de sagouin (vu avec Webdevelopper),
je regarde sous IE et FF en 1024, .............nickel!!!
Résolution supérieure...............PAS NICKEL!!
J'y retourne !!!! je veux comprendre!
mais siouplé, ceux qui bossent tard et qui disent pas que des con...ies, z'êtes dans le coin?

Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 921
8 nov. 2007 à 12:54

salut,

ceux qui bossent tard et qui disent pas que des con...ies
moi, il m'arrive de me coucher tard, pour le reste : pas de certitudes !!!

je ne suis pas là cette après-midi mais je regarderai ce soir, en attendant suis sûr que quelqu'un d'autre t'aura répondu !!!

(lè pas là l'ourson ?)

Réponse 11 / 13

sho Messages postés 181 Date d'inscription jeudi 18 octobre 2007 Statut Membre Dernière intervention 11 février 2010 49
8 nov. 2007 à 15:04

Problème du footer résolu (grace à la lecture d'un précédent post)
Affichage de la page d'accueil quasi-identique (? IE!!!?) sous FF, IEet Opera en 1024;
mais tjrs décalage en résolution suppérieure;
c'est ici : http://aada.chez-alice.fr/1/index.html
que je m'arrache la perruque!!!!

Réponse 12 / 13

sho Messages postés 181 Date d'inscription jeudi 18 octobre 2007 Statut Membre Dernière intervention 11 février 2010 49
8 nov. 2007 à 17:12

ENFIN!!!!
à priori, le résultat escompté (affichage des images de la page d'accueil correct qqsoit la résolution...enfin, faut pas pousser non plus!)est arrivé; non sans mal ( 3 jours et 3 nuits ou presque d'intense activité pour les quelques neuronnes qui me restent ),
et tout ça pour une simple page d'accueil!!!....Pas très rentable;
Il me reste à peaufiner bcp d'autres erreurs dans le code et la css,
mais je crois que je vais adopter un ours, me remettre à la chanson des 70ies, et avec un peu de CH4NCE, et bcp de neuronnes grillés, je pourrais passer mon 1er grade de W3C....
Petit canon et toasts fromagers pour tous les 3, en attendant
Merci
SHÔ

Réponse 13 / 13

gryzzly Messages postés 4608 Date d'inscription lundi 7 novembre 2005 Statut Contributeur Dernière intervention 24 octobre 2020 1 334
8 nov. 2007 à 19:06

Bon bah je vois que le travail a porté ses fruits :-)
Plus de balise style... le corps qui reste centré sans disparition d'images... voilà qui est bien ! Une page toute propre. Bravo

>Dalida... bah non, pas la l'ourson... il était parti à 5 heures ce matin pour aller faire des comptages d'oiseaux :-) J'viens tout juste de rentrer... (la nuit, un peu dur de compter...)

Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 921
9 nov. 2007 à 00:40

il était parti à 5 heures ce matin pour aller faire des comptages d'oiseaux
rrrrrrrrrrrrrroh !
mais t'aurais dû en parler !!!
mon p'tit chat passe des heures à regarder les oiseaux !
j'te l'prête si t'as besoin d'un coup d'patte !!!
-;o)

Discussions similaires

Impossible de télécharger photos messenger

dual channel : 2 paires de ram de capacité différente

Qu'est ce que la résolution native

code ascii