Position img différentes suivant résolution
Résolu
sho
Messages postés
181
Date d'inscription
Statut
Membre
Dernière intervention
-
Dalida Messages postés 6728 Date d'inscription Statut Contributeur Dernière intervention -
Dalida Messages postés 6728 Date d'inscription Statut Contributeur Dernière intervention -
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?
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
- Suivi position google - Guide
- Img burn - Télécharger - Gravure
- Historique Google Maps : retrouver tous les lieux et les trajets enregistrés - Guide
- Fichier img - Télécharger - Photo & Graphisme
- Partage position whatsapp - Guide
13 réponses
Salut,
j'ai la flemme de lire ton code et ta css, mais voici un exemple rapide qui devrait te convenir :
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>
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 ???
Je sens bien qu'il doit y avoir un truc entre position reletive et absolue, mais ???
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.
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.
Je suis là, ;
pour le code, je l'ai néttoyé la semaine dernière, sans aspiro, alors....
merci à toi DALIDA
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
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 &<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>
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!!!
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!!!
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)
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)
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, tu dois avoir six mains au moins pour intervenir dans tous ces codes et discutions en même temps!!!)
Merci à vous 2
"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...
Fais attention, moi, je tiens un rapport quotidien que j'envoie aux autorités compétentes...
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.
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.
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?
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?
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!!!!
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!!!!
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Ô
à 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Ô
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...)
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...)
