(Résolu) ajustement automatique de l'image sur coin gauche du header

Note de ce sujet :
  • Moyenne : 0 (0 vote(s))
  • 1
  • 2
  • 3
  • 4
  • 5
#1
Bonjour,

J'utilise Ncleanblue comme gabarit et feuille de style (layout).

Je voudrais que l'image en haut et à gauche du header s'ajuste automatiquement sur le bord gauche du header quelle que soit la taille de l'écran utilisé : Est ce possible ?
j'ai crée un div au niveau du header juste en dessous de {* Start Header, with logo image that links to the default start page *}dans gabarit et dans le CSS j'ai mis le code qui suit :

#perso {
/* adjust according your image size */
position: absolute;
border-top: -100px;
border-left: -100px;
margin-left: -151px;
border-left: 0px;
padding-left: 0px;
height: 111px;
width: 161px;
/* forces full link size */
display: block;
/* this hides the text */
/* you can set your own image here, note size adjustments */
background: url(uploads/NCleanBlue/logo.png) no-repeat left top;

En bidouillant comme ci-dessus, ça marche sur mon écran, mais dès que j'utilise un écran plus large, l'image n'est plus collée sur le bord gauche.

J'ai essayé plusieurs combinaisons : position relative, absolue etc... mais rien n'y fait...

Merci de votre aide



Citation :#~~~~~ NE PAS SUPPRIMER CE BLOC ~~~~~
#~ Version du CMS : 1.6.6
#~ Version du MLE si existante :
#~ Informations Système :
#~ ----------------------------------------------
#~ Cms Version: 1.6.6
#~ Installed Modules:
#~ * CMSMailer: 1.73.14
#~ * FileManager: 1.0.1
#~ * MenuManager: 1.6.2
#~ * ModuleManager: 1.3.1
#~ * News: 2.10.3
#~ * nuSOAP: 1.0.1
#~ * Printing: 1.0.4
#~ * Search: 1.6.1
#~ * ThemeManager: 1.1.1
#~ * TinyMCE: 2.5.5
#~ Config Information:
#~ * php_memory_limit:
#~ * process_whole_template: false
#~ * max_upload_size: 10000000
#~ * default_upload_permission: 664
#~ * assume_mod_rewrite: false
#~ * page_extension:
#~ * internal_pretty_urls: false
#~ * use_hierarchy: true
#~ Php Information:
#~ * phpversion: 4.4.9
#~ * md5_function: On (Vrai)
#~ * gd_version: 2
#~ * tempnam_function: On (Vrai)
#~ * magic_quotes_runtime: Off (Faux)
#~ * memory_limit: 64M
#~ * max_execution_time: Illimité
#~ * safe_mode: Off (Faux)
#~ * session_save_path: /var/tmp (1777)
#~ * session.use_cookies: On (Vrai)
#~ Server Information:
#~ * Server Api: cgi
#~ * Server Db Type: MySQL (mysql)
#~ * Server Db Version: 5.0.88
#~ ----------------------------------------------
#~~~~~ NE PAS SUPPRIMER CE BLOC ~~~~~
#1
Bonjour,

J'utilise Ncleanblue comme gabarit et feuille de style (layout).

Je voudrais que l'image en haut et à gauche du header s'ajuste automatiquement sur le bord gauche du header quelle que soit la taille de l'écran utilisé : Est ce possible ?
j'ai crée un div au niveau du header juste en dessous de {* Start Header, with logo image that links to the default start page *}dans gabarit et dans le CSS j'ai mis le code qui suit :

#perso {
/* adjust according your image size */
position: absolute;
border-top: -100px;
border-left: -100px;
margin-left: -151px;
border-left: 0px;
padding-left: 0px;
height: 111px;
width: 161px;
/* forces full link size */
display: block;
/* this hides the text */
/* you can set your own image here, note size adjustments */
background: url(uploads/NCleanBlue/logo.png) no-repeat left top;

En bidouillant comme ci-dessus, ça marche sur mon écran, mais dès que j'utilise un écran plus large, l'image n'est plus collée sur le bord gauche.

J'ai essayé plusieurs combinaisons : position relative, absolue etc... mais rien n'y fait...

Merci de votre aide



Citation :#~~~~~ NE PAS SUPPRIMER CE BLOC ~~~~~
#~ Version du CMS : 1.6.6
#~ Version du MLE si existante :
#~ Informations Système :
#~ ----------------------------------------------
#~ Cms Version: 1.6.6
#~ Installed Modules:
#~ * CMSMailer: 1.73.14
#~ * FileManager: 1.0.1
#~ * MenuManager: 1.6.2
#~ * ModuleManager: 1.3.1
#~ * News: 2.10.3
#~ * nuSOAP: 1.0.1
#~ * Printing: 1.0.4
#~ * Search: 1.6.1
#~ * ThemeManager: 1.1.1
#~ * TinyMCE: 2.5.5
#~ Config Information:
#~ * php_memory_limit:
#~ * process_whole_template: false
#~ * max_upload_size: 10000000
#~ * default_upload_permission: 664
#~ * assume_mod_rewrite: false
#~ * page_extension:
#~ * internal_pretty_urls: false
#~ * use_hierarchy: true
#~ Php Information:
#~ * phpversion: 4.4.9
#~ * md5_function: On (Vrai)
#~ * gd_version: 2
#~ * tempnam_function: On (Vrai)
#~ * magic_quotes_runtime: Off (Faux)
#~ * memory_limit: 64M
#~ * max_execution_time: Illimité
#~ * safe_mode: Off (Faux)
#~ * session_save_path: /var/tmp (1777)
#~ * session.use_cookies: On (Vrai)
#~ Server Information:
#~ * Server Api: cgi
#~ * Server Db Type: MySQL (mysql)
#~ * Server Db Version: 5.0.88
#~ ----------------------------------------------
#~~~~~ NE PAS SUPPRIMER CE BLOC ~~~~~
#2
deux choses :
- normalement on est pas là pour former au css car nous n'en avons pas les capacités.
- sans lien de ta part pour tester nous même ca va être dur te donner une réponse

donc première chose à faire si tu souhaite de l'aide efficace : donne nous de quoi travailler
#2
deux choses :
- normalement on est pas là pour former au css car nous n'en avons pas les capacités.
- sans lien de ta part pour tester nous même ca va être dur te donner une réponse

donc première chose à faire si tu souhaite de l'aide efficace : donne nous de quoi travailler
#3
Ré,

Avant de poster, j'ai parcouru le forum et sauf mauvaise recherche de ma part, je n'ai rien trouvé, ni même sur internet de façon directement accessible sur l'ajustement automatique sur le bord gauche du header.

Le CSS, certes je ne connais pas dans le détail le plus fin, mais j'ai fait un effort pour m'y mettre. Seulement là, je coince malgré le fait d'avoir vainement tenté de multiples combinaisons.
J'ai donc pensé, peut-être à tort, qu'une subtilité m'échappait au niveau du CMS par rapport à un lien parent éventuel.
Merci, si vous en connaissez un, de m'indiquer un site qui pourrait me venir en aide.

adresse du site : http://www.montalier.fr
#3
Ré,

Avant de poster, j'ai parcouru le forum et sauf mauvaise recherche de ma part, je n'ai rien trouvé, ni même sur internet de façon directement accessible sur l'ajustement automatique sur le bord gauche du header.

Le CSS, certes je ne connais pas dans le détail le plus fin, mais j'ai fait un effort pour m'y mettre. Seulement là, je coince malgré le fait d'avoir vainement tenté de multiples combinaisons.
J'ai donc pensé, peut-être à tort, qu'une subtilité m'échappait au niveau du CMS par rapport à un lien parent éventuel.
Merci, si vous en connaissez un, de m'indiquer un site qui pourrait me venir en aide.

adresse du site : http://www.montalier.fr
#4
Tu vires ta div perso et sa css.
Étant donné que ton pagewrapper fait 960px, tu n'as pas la place pour tout mettre.
Le plus simple est de faire une seule image en incluant logo.png et hebergement.jpg.
Sinon, tu écris ceci dans ta css :
#logo {background:transparent url(uploads/NCleanBlue/hebergement.jpg) no-repeat scroll left top;}
#logo a {transparent url(uploads/NCleanBlue/logo.png) no-repeat scroll 148px top;}
Restera à modifier la css pour la heigth de l'image et le formulaire de recherche.

En passant, un lien de site ne se fait pas avec un mailto Wink.
#4
Tu vires ta div perso et sa css.
Étant donné que ton pagewrapper fait 960px, tu n'as pas la place pour tout mettre.
Le plus simple est de faire une seule image en incluant logo.png et hebergement.jpg.
Sinon, tu écris ceci dans ta css :
#logo {background:transparent url(uploads/NCleanBlue/hebergement.jpg) no-repeat scroll left top;}
#logo a {transparent url(uploads/NCleanBlue/logo.png) no-repeat scroll 148px top;}
Restera à modifier la css pour la heigth de l'image et le formulaire de recherche.

En passant, un lien de site ne se fait pas avec un mailto Wink.
#5
j'ai corrigé la borne mailto Wink
#5
j'ai corrigé la borne mailto Wink
#6
Ré,

Merci de ta réponse, Jean. J'essaierais demain et tiendrai au courant le forum.
J'ai rapidement essayé pour l'instant de faire une image de 800px de large mais j'ai toujours le souci sur la gauche du header; j'essaierais demain avec une de 960px de large.

Merci encore
#6
Ré,

Merci de ta réponse, Jean. J'essaierais demain et tiendrai au courant le forum.
J'ai rapidement essayé pour l'instant de faire une image de 800px de large mais j'ai toujours le souci sur la gauche du header; j'essaierais demain avec une de 960px de large.

Merci encore
#7
Ré,

Merci Jean pour tes conseils : j'ai finalement opté pour une seule image en créant un dédoublement de l'image d'origine en conservant la "div perso et sa css.

http://www.montalier.fr

Encore merci pour l'aide que tu m'as apportée.

Cordialement
#7
Ré,

Merci Jean pour tes conseils : j'ai finalement opté pour une seule image en créant un dédoublement de l'image d'origine en conservant la "div perso et sa css.

http://www.montalier.fr

Encore merci pour l'aide que tu m'as apportée.

Cordialement


Atteindre :


Utilisateur(s) parcourant ce sujet : 1 visiteur(s)