Ré,
Autant pour moi, je me suis précipité un peu trop vite. Après plusieurs tests, ca fonctionne sur mon écran mais pas sur un écran de plus grande taille (espace à gauche avant image) ou image gauche rognée sur écran de plus petite taille.
Je cherche effectivement à ce que l'image soit collée sur le bord gauche de l'écran quelle que soit sa taille.
Sur le header, j'ai 2 images : celle de gauche de 148 de large et celle qui la jouxte de 770.
J'ai crée dans le gabarit concerné une div "perso" et une zone perso dans la CSS.
Pour plus de clarté,
http://www.montalier.fr
1) Le gabarit
extrait concernant le header)
{* Start Header, with logo image that links to the default start page *}
<div id="perso" >
</div>
<div id="header" class="util-clearfix">
{* logo image that links to the default start page. Logo image is changed in the style sheet "Layout: NCleanBlue" *}
<div id="logo" class="core-float-left">
{cms_selflink lang='fr' dir="start" text="$sitename"}
</div>
{* Start Search, the input "Submit" is using an image, CSS: div#search input.search-button *}
<div id="search" class="core-float-right">
{search lang='fr_FR' submit='OK' search_method="post"}
</div>
{* End Search *}
<span class="util-clearb"> </span>
{* Start Navigation, style sheet "Layout: NCleanBlue", starting at Menu ROOT *}
<h2 class="accessibility util-clearb">Navigation</h2>
{* anything class="accessibility" is hidden for visual browsers by CSS *}
<div class="page-menu util-clearfix">
{menu template='cssmenu_ulshadow.tpl'}
</div>
<hr class="accessibility util-clearb" />
{* End Navigation *}
</div>
{* End Header *}
2) La css :extrait concernant le header
/* ------------ Header ------------ */
#header {
/*position: relative; */
height: 111px;
width: 960px;
}
#perso {
/* adjust according your image size */
position: absolute;
/* border-top: 0px; */
/*border-left: -100px; */
margin-left: -151px;
/*padding-left: 0px; */
height: 111px;
width: 148px;
/* forces full link size */
display: block;
/* this hides the text */
/* you can set your own image here, note size adjustments */
background: url(uploads/NCleanBlue/hebergement.jpg) no-repeat left top;
}
#logo a {
/* adjust according your image size */
height: 80px;
/* width: 215px; mis en commentaire par DSS pour agrandir à 700 px en tete ligne de dessous */
width: 770px;
/* forces full link size */
display: block;
/* this hides the text */
text-indent: -9999em;
margin-top: 0;
margin-left: 0;
/* you can set your own image here, note size adjustments */
background: url(uploads/NCleanBlue/logo.png) no-repeat left top;
}
/* ------------ Header - Search ------------ */
div#search {
width: 190px;
height: 28px;
margin-top: 31px;
margin-right: -20px;
}
div#search label {
text-indent: -9999em;
height: 0pt;
width: 0pt;
display: none;
}
div#search input.search-input {
/* specific size for image, your image may need these adjusted */
width: 143px;
height: 17px;
/* removes default borders, allows use of image */
border-style: none;
/* text color */
color: #999;
/* padding of text */
padding: 7px 0px 4px 10px;
float: left;
/* set all font properties at once, weight, size, family */
font: bold 0.9em Arial, Helvetica, sans-serif;
/* left input image, set your own here */
background: url(uploads/NCleanBlue/search.png) no-repeat left top;
}
div#search input.search-button {
/* specific size for image, your image may need these adjusted */
width: 37px;
height: 28px;
/* removes default borders, allows use of image */
border-style: none;
/* hides text, image has text */
text-indent: -9999em;
float: left;
margin: 0;
/* provides positive hover effect */
cursor: pointer;
/* removes default size/height */
font-size: 0px;
line-height: 0px;
/* submit button image, set your own here */
background: transparent url(uploads/NCleanBlue/search.png) no-repeat right top;
}
Merci de votre aide car je ne m'en sors pas alors que le site est pratiquement finalisé, à cette exception près...
Bonne journée
A+
