Placer image en haut d'une page web par Theweb - page 1

D'accord !
C'est un script que j'ai acheté. Mais je vous préviens le codage est mal organisé (selon les dire d'un codeur).

je fait les modification dans un ficher templates avec une extension .tpl

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>{$PAGE_TITLE}{if $PAGE_TITLE} : {/if}{$SITE_NAME}</title>

        <meta name="description" content="{$PAGE_TITLE|replace:'"':''} - {$SITE_META} {$PAGE_TITLE}" />

        <meta name="keywords" content="{$PAGE_TITLE|replace:'"':''} {$SITE_KEYWORDS}" />

        <link href="{$BASE_URI}templates/{$THIS_TEMPLATE}/style.css" rel="stylesheet" type="text/css" />
        <link href="{$BASE_URI}templates/{$THIS_TEMPLATE}/colors.css" rel="stylesheet" type="text/css" />

        <meta name="Author" content="Developed by plusPHP.com / PK" />

        <script type="text/javascript" src="{$BASE_URI}env/js/jquery.js"></script>

        {if $URL_FORM}

        <script type="text/javascript" src="{$BASE_URI}env/js/webtoolkit.aim.js"></script>
        <script type="text/javascript" src="{$BASE_URI}env/js/jquery.corner.js"></script>


        <script type="text/javascript">
        previousLinks = '<p class="resultsBottom"><strong><a href="{$BASE_URI}?module=ShortURL">all submitted links</a></strong></p>';
        emptyAnswer = '<h3>Server returned empty string!</h3>';
        </script>
        <script type="text/javascript" src="{$BASE_URI}templates/{$THIS_TEMPLATE}/short.js"></script>

        <link rel="stylesheet" type="text/css" media="all" href="{$BASE_URI}env/jscalendar/calendar-win2k-cold-1.css" title="win2k-cold-1" />
        <script type="text/javascript" src="{$BASE_URI}env/jscalendar/calendar.js"></script>
        <script type="text/javascript" src="{$BASE_URI}env/jscalendar/lang/calendar-en.js"></script>
        <script type="text/javascript" src="{$BASE_URI}env/jscalendar/calendar-setup.js"></script>

        {/if}

        <!--[if lte IE 6]>
        <script type="text/javascript"> var shim='{$BASE_URI}env/pix/x.gif';</script>
        <script type="text/javascript" src="{$BASE_URI}env/js/pngfix.js"></script>
        <![endif]-->

<div class="wide">{$COUNTERS}</div>

       <script type="text/javascript" src="{$BASE_URI}templates/{$THIS_TEMPLATE}/textarealimite.js"></script>
       
       
</head>
{if $SHORT_FRAME}

<body style="overflow:hidden;" scroll="no">
<div id="header">
<div class="wide">

<div id="nav1">
			<ul>
				<li>{if $LOGGED_IN}
				<a href="{if $BASE_DOMAIN}http://{$BASE_DOMAIN}{/if}{$BASE_URI}?module=Authorization&file=logout" title="{$INTERFACE_logout}"><span>{$INTERFACE_logout}</span></a>
                <a href="{if $BASE_DOMAIN}http://{$BASE_DOMAIN}{/if}{$BASE_URI}?module=Profiles&file=Edit"><span>{$PROFILE_HERE}</span></a>
                {else}<a href="{if $BASE_DOMAIN}http://{$BASE_DOMAIN}{/if}{$BASE_URI}?module=Registration"><span>{$REGISTRATION_HERE}</span></a>{/if}</li>
                {foreach item=curr_row from=$TOP_NAV}
                {foreach item=curr_cell from=$curr_row}
                {if !$curr_cell.link}{/if}
                {if $curr_cell.link}
                {if $curr_cell.url}
                <li><a href="{if $BASE_DOMAIN}http://{$BASE_DOMAIN}{/if}{$curr_cell.url}"><span>{$curr_cell.link}</span></a></li>
                {/if}
                {if !$curr_cell.url}
                <li><span><strong>{$curr_cell.link}</strong></span></li>
                {/if}
                {/if}
                {/foreach}
                {/foreach}

   			</ul>
		</div>

<a href="{if $BASE_DOMAIN}http://{$BASE_DOMAIN}{/if}{$BASE_URI}"><img src="{$BASE_URI}templates/{$THIS_TEMPLATE}/logo1.png" id="logo" alt="{$SITE_NAME}" /></a>
<div id="removeFrame">&raquo; <a href="{$REDIRECT_URL}">remove this frame</a> &laquo;</div>
<div id="topFrame">{$FRAME_ADS_TOP}</div>
</div>
</div>

<div class="box5">
<div class="top"></div>

<div class="spacer">
<div id="container">




</div>

</div>

<div class="bot"></div>
</div> 


<iframe id="frame" src="{$REDIRECT_URL}" width="100%" height="1200px" frameborder="0" marginheight="0" marginwidth="0"></iframe>
<script type="text/javascript">
function resizeIframe() {ldelim}
    var height = document.documentElement.clientHeight-5;
    height -= document.getElementById('frame').offsetTop;

    // not sure how to get this dynamically
    height -= {if $LOWER_FRAME_HEIGHT}{$LOWER_FRAME_HEIGHT}{else}0{/if}; /* whatever you set your body bottom margin/padding to be */

    document.getElementById('frame').style.height = height +"px";

{rdelim};
document.getElementById('frame').onload = resizeIframe;
window.onresize = resizeIframe;
</script>
{if $FRAME_ADS_BOTTOM} <div id="lowerFrame">{$FRAME_ADS_BOTTOM}</div>{/if}
<!-- End of Frame Code -->
{else}

<body>

<div id="header">
<div class="wide">
<a href="{if $BASE_DOMAIN}http://{$BASE_DOMAIN}{/if}{$BASE_URI}"><img src="{$BASE_URI}templates/{$THIS_TEMPLATE}/logo1.png" id="logo" alt="{$SITE_NAME}" /></a>

<div id="nav1">
			<ul>
				<li>{if $LOGGED_IN}
				<a href="{if $BASE_DOMAIN}http://{$BASE_DOMAIN}{/if}{$BASE_URI}?module=Authorization&file=logout" title="{$INTERFACE_logout}"><span>{$INTERFACE_logout}</span></a>
                <a href="{if $BASE_DOMAIN}http://{$BASE_DOMAIN}{/if}{$BASE_URI}?module=Profiles&file=Edit"><span>{$PROFILE_HERE}</span></a>
                {else}<a href="{if $BASE_DOMAIN}http://{$BASE_DOMAIN}{/if}{$BASE_URI}?module=Registration"><span>{$REGISTRATION_HERE}</span></a>{/if}</li>
                {foreach item=curr_row from=$TOP_NAV}
                {foreach item=curr_cell from=$curr_row}
                {if !$curr_cell.link}{/if}
                {if $curr_cell.link}
                {if $curr_cell.url}
                <li><a href="{$curr_cell.url}"><span>{$curr_cell.link}</span></a></li>
                {/if}
                {if !$curr_cell.url}
                <li><span><strong>{$curr_cell.link}</strong></span></li>
                {/if}
                {/if}
                {/foreach}
                {/foreach}

   			</ul>
		</div>

{if $ADMIN_IN}

<div id="nav1">
<span id="adminNav">
<ul>
{foreach item=curr_row from=$ADMIN_NAV}
{foreach item=curr_cell from=$curr_row}
{if !$curr_cell.link}&nbsp;{/if}
 {if $curr_cell.link}
    {if $curr_cell.url}
    <li><a href="{$curr_cell.url}">{$curr_cell.link}</a></li>
    {/if}
    {if !$curr_cell.url}
    <strong>{$curr_cell.link}</strong>
    {/if}
 {/if}
{/foreach}
{/foreach}
</ul>
</span>
</div>

{/if}
</div>
</div>

<div class="box5">
<div class="top"></div>

<div class="spacer">
<div id="container">


<div id="content">
<div class="wide">

{if $PAGE_TITLE}<h1 title="{$PAGE_TITLE}">
{if $ADD_LINK}<A href="{$BASE_URI}?module={$THIS_MODULE}&file=Add"><img src="{$BASE_URI}templates/{$THIS_TEMPLATE}/icons/add.png" class="itemIcons" alt="{$INTERFACE_addListing}" /></A>{/if}
{if $EDIT_LINK || ($THIS_USER_ID == $MAIN_ITEM->user_id && $MAIN_ITEM->user_id) || ($THIS_USER_ID == $MAIN_ITEM->owner_id && $MAIN_ITEM->owner_id)}<A href="{$BASE_URI}?module={$THIS_MODULE}&file=Edit&id={$THIS_ID}"><img src="{$BASE_URI}templates/{$THIS_TEMPLATE}/icons/edit.png" class="itemIcons" alt="{$INTERFACE_editListing}" /></A>{/if}
{if $VIEW_LINK && $EDIT_ITEM->id}<A href="{$BASE_URI}?module={$THIS_MODULE}&id={$THIS_ID}"><img src="{$BASE_URI}templates/{$THIS_TEMPLATE}/icons/search.png" class="itemIcons" alt="{$INTERFACE_seeListing}" /></A>{/if}
{if $DELETE_LINK || ($THIS_USER_ID == $MAIN_ITEM->user_id && $MAIN_ITEM->user_id) || ($THIS_USER_ID == $MAIN_ITEM->owner_id && $MAIN_ITEM->owner_id)}<A href="{$BASE_URI}?module={$THIS_MODULE}&file=Delete&id={$THIS_ID}" onClick="return confirm('{$INTERFACE_deleteConfirm}');" ><img src="{$BASE_URI}templates/{$THIS_TEMPLATE}/icons/delete.png" class="itemIcons" alt="{$INTERFACE_deleteListing}" /></A>{/if}
{$PAGE_TITLE}</h1>{/if}


{if $USER_ERROR}
<H3 class="error">{$USER_ERROR}</H3>
{elseif !$ADMIN_MODULES}
  {if $THIS_FILE == 'index'}
    {if $THIS_ID > 0 && !$MAIN_ITEM}
    <H3 class="error">{$ITEM_NOT_FOUND}</H3>
    {elseif !$THIS_ID && !$MAIN_LIST}
    <H3 class="error">{$ITEMS_NOT_FOUND}</H3>
    {/if}
  {elseif $THIS_FILE == 'Edit' && !$EDIT_ITEM}
    <H3 class="error">{$ITEM_NOT_FOUND}</H3>
  {/if}
{/if}


{if $ADDED_ID}
<H3 align="center"><FONT color="red">{$ADDED_LISTING}<br />
<a href="http://{$smarty.server.HTTP_HOST}{$BASE_URI}{$THIS_MODULE}/{$ADDED_ID}/{$smarty.post.title|regex_replace:"/[^a-zA-Z]/":"-"|replace:'--':"-"}/">
http://{$smarty.server.HTTP_HOST}{$BASE_URI}{$THIS_MODULE}/{$ADDED_ID}/{$smarty.post.title|regex_replace:"/[^a-zA-Z]/":"-"|replace:'--':"-"}/</a>
<!--
<br /><br />Do you want to <A href="{$BASE_URI}?module={$THIS_MODULE}&file=Edit&id={$ADDED_ID}">edit listing</A> or <A href="{$BASE_URI}?module={$THIS_MODULE}&file=Add">add more</A>?
//--></FONT></H3>
<CENTER>{$AFTER_ADD}</CENTER>
{/if}

{if !$ADDED_ID}
<!--CONTENT-->
{/if}

{if $PAGES || $TO_FIRST_LINK}

<div class="search-nav" style="clear:both;">
<p class="paging">

{if $TO_PREVIOUS_LINK}
<A href="{$STATIC_STRING}/?{$PAGE_STRING}{if $TO_PREVIOUS_LINK != 'yes'}&start={$TO_PREVIOUS_LINK}{/if}">{$INTERFACE_prevPage}</a>
<!--
<A href="{$STATIC_STRING}/{if $TO_PREVIOUS_LINK != 'yes'}{$TO_PREVIOUS_LINK}/{/if}{if $smarty.server.QUERY_STRING}?{$smarty.server.QUERY_STRING}{/if}">{$PREVIOUS_PAGE}</A>
<A href="{$BASE_URI}{$THIS_MODULE}/{if $TO_PREVIOUS_LINK != 'yes'}{$TO_PREVIOUS_LINK}/{/if}{if $smarty.server.QUERY_STRING}?{$smarty.server.QUERY_STRING}{/if}">{$PREVIOUS_PAGE}</A>
<A href="{$BASE_URI}?{$PAGE_STRING}&start={$TO_PREVIOUS_LINK}" >prev</A>
-->
{/if}

{if $TO_FIRST_LINK}
<A href="{$BASE_URI}?{$PAGE_STRING}" {if !$smarty.get.start or $smarty.get.start == "yes"}class="current"{/if}>1</a>
<!--
<A href="{$BASE_URI}{$THIS_MODULE}/{if $smarty.server.QUERY_STRING}?{$smarty.server.QUERY_STRING}{/if}" {if !$smarty.get.start}class="current"{/if}>1</A>
-->

{/if}

{section name=sec1 loop=$PAGES}

{if %sec1.rownum% != 1 && %sec1.rownum% != $TOTAL_PAGES}
<A href="?{$PAGE_STRING}&start={$PAGES[sec1].START}" {if $PAGES[sec1].START == $smarty.get.start}class="current"{/if}>{$PAGES[sec1].ID}</A>
<!--
<A href="{$BASE_URI}{$THIS_MODULE}/{$PAGES[sec1].START}/{if $smarty.server.QUERY_STRING}?{$smarty.server.QUERY_STRING}{/if}" {if $PAGES[sec1].START == $smarty.get.start}class="current"{/if}>{$PAGES[sec1].ID}</A>
<A href="{$STATIC_STRING}/{$PAGES[sec1].START}/{if $smarty.server.QUERY_STRING}?{$smarty.server.QUERY_STRING}{/if}" {if $PAGES[sec1].START == $smarty.get.start}class="current"{/if}>{$PAGES[sec1].ID}</A>
-->
{/if}
{/section}

{if $TO_LAST_LINK}
<A href="{$BASE_URI}?{$PAGE_STRING}&start={$TO_LAST_LINK}" {if $TO_LAST_LINK == $smarty.get.start}class="current"{/if}>{$TOTAL_PAGES}</A>
<!--
<A href="{$BASE_URI}{$THIS_MODULE}/{$TO_LAST_LINK}/{if $smarty.server.QUERY_STRING}?{$smarty.server.QUERY_STRING}{/if}" {if $TO_LAST_LINK == $smarty.get.start}class="current"{/if}>{$TOTAL_PAGES}</A>
<A href="{$STATIC_STRING}/{$TO_LAST_LINK}/{if $smarty.server.QUERY_STRING}?{$smarty.server.QUERY_STRING}{/if}" {if $TO_LAST_LINK == $smarty.get.start}class="current"{/if}>{$TOTAL_PAGES}</A>
-->
{/if}


{if $TO_NEXT_LINK}

<a href="{$BASE_URI}?{$PAGE_STRING}&start={$TO_NEXT_LINK}">{$INTERFACE_nextPage}</a>

<!--
<A href="{$STATIC_STRING}/{$TO_NEXT_LINK}/{if $smarty.server.QUERY_STRING}?{$smarty.server.QUERY_STRING}{/if}">{$NEXT_PAGE}</A>
<A href="{$BASE_URI}{$THIS_MODULE}/{$TO_NEXT_LINK}/{if $smarty.server.QUERY_STRING}?{$smarty.server.QUERY_STRING}{/if}">{$NEXT_PAGE}</A>
-->
{/if}

</p>
</div>

{/if}

</div>
</div>

{if $FIRSTPAGE_TEXT}<div id="contentStart"><div class="wide">{$FIRSTPAGE_TEXT}</div></div>{/if}



</div>
</div>

<div class="bot"></div>
</div> 
<div id="footer"><div class="Box6">
	<div class="top"></div>
		<div class="spacer">   
         <div class="wide">{$COORDS}</div>

		</div>
	<div class="bot"></div>
</div>           
            </div>



{/if}
</body>
</html>

Le code CSS :

body {
background-color:#1E1D1C;
font-family: Trebuchet MS, Tahoma, sans-serif;
}


#container {
margin: 0;
padding: 0;
}

form {
margin: 0;
padding: 0;
}

input, textarea {
font-family: Trebuchet MS, Tahoma, sans-serif;
}

a {

}

li{ list-style: none
	    
}

h1, h2, h4 {
margin-top: 0;
padding-top: 0;
}

h4 {
font-size: 1.5em;
}

a:hover {

}

.red {
color: red;
}

.wide {
width: 940px;
margin: 0 auto;
padding: 0px;
}

#header {
margin: 0;
overflow: hidden; padding-left:0; padding-right:0; padding-top:0; padding-bottom:10px
}

#header strong {
font-weight: normal;
}

#logo {
float: left;
border: 0;
margin: 0;
}

#header ul {
float: right;
margin: 0;
padding: 0;
padding-top: 1.5em;
list-style-type: none;
}

#header li {
float: left;
padding: 0;
margin: 8px;
}

#adminNav {
float: left;
margin-top: 0px;
margin-right: 0px;
}

#content {
overflow: hidden;

}

.textIcons {
/* margin-right: 5px; */
border: 0;
}

.itemIcons {
margin-right: 5px;
border: 0;
}

#texts {
float: left;
width: 640px;
}

#offers {
float: right;
margin: 10px;
width: 250px;
}

#offers h4 {
margin-bottom: 0px;
}

.floatRight {
float: right;
text-align: right;
}

/* Start Page Blocks */

#contentStart {
overflow: hidden;
position: relative;
padding-top: 25px;padding-bottom:25px

}

.startLeft {
float: left;
width: 430px;
margin-right: 30px;}

.startLeft h2{
color: #232323;
font-size: 16px; margin-top:1px; margin-bottom:4px; font-weight:bold
}

.startLeft h2 span{
color: #000000;
}

.contourblan {
float: left;
width: 430px;
margin-right: 30px; text-align:justify}

.contourblan h2{
color: #232323;
font-size: 16px; margin-top:1px; margin-bottom:4px; font-weight:bold
}

.contourblan h2 span{
color: #889B16;
}

.contourblan a {
color: #0EA0CB;text-decoration:none
}

.contourblan a:Hover {
color: #889B16; text-decoration:none
}


.contourblanright {
float: left;
width: 430px;
margin-right: 30px; text-align:justify}

.contourblanright h2{
color: #232323;
font-size: 16px; margin-top:1px; margin-bottom:4px; font-weight:bold
}

.contourblanright h2 span{
color: #889B16;
}

.contourblanright a {
color: #0EA0CB;text-decoration:none
}

.contourblanright a:Hover {
color: #889B16; text-decoration:none
}

.page {
width: 94%; 
text-align:justify;
}

.page a {
color: #0EA0CB;text-decoration:none
}

.page a:Hover {
color: #889B16; text-decoration:none
}


.startRight {
float: left;
width: 430px;
}

.startContainer {
padding: 1em;
margin: 0.2em;
}

#toolbarButton {
cursor: move;
}

#footer {
clear: both;
padding: 0;
padding-top: 15px;

}

#footer a {
color: white;
}

#footer a:Hover {
color: #889B16;
}


/* short URL interface */

.taginput {
color: #0B0B0B;
font-size: 15px; 
font-weight:bold; font-family:Tahoma
}

#siteStats {
padding-bottom: 1em;
}

.shortColor {
background: #1E1D1C;
padding: 1px
}

#shortURL {
float: left;
padding: 3px;
width: 475px;
}

#shortURL input {
width: 98%;
border-style:none;
border:none;
border-width: 0px;
font-size: 1.2em;
background: url(bg-input.gif) top left no-repeat;
padding: 5px;
}

#shortSpacer {
float: left;
width: 10px;
height: 30px;
}

#shortSubmit {
border: black;
padding: 3px;
width:120px;
text-align: center;
float: left;

}

#shortSubmit input {
font-weight: 600;
width: 99%;
border-style: none;
border: none;
border-width: 0px;
font-size: 1.4em;
padding: 2px;
#padding: 0px;
cursor: pointer;
}

#shortSubmit a {
text-decoration:none
}
#shortSubmit a:Hover {
text-decoration:none
}

#advancedTrigger {
clear: left;
float: left;
margin-top: 15px;
padding-top: 0px;
font-weight: 600;
font-size: 1.2em;
width: 270px;
}

#shareTrigger {
float: left;
margin-top: 15px;
padding-top: 0px;
font-weight: 600;
font-size: 1.2em;
width: 270px;
text-align: right;
}

.shortInput {
background: url(bg-input.gif) top left no-repeat;
padding: 5px;
font-size: 1em;
width: 95%;
}

#shortTag {
width: 180px;
font-size: 1em;
vertical-align: left;
}

#shareOpt {
float: left;
clear: left;
display: none;
padding: 10px;
width: 462px;
font-weight: 600;
margin-top: 3px;
}

#advancedOpt {
float: left;
clear: left;
display: none;
padding: 10px;
width: 462px;
font-weight: 600;
margin-top: 3px;
}

#bulkSubmit {
font-weight: 600;
font-size: 1.2em;
}

#resultsContainer {
width: 340px;
margin-left: auto; 
margin-right: auto;
margin-bottom: 25px;
top: 0;
padding: 5px;

}

#resultsInner {
padding: 10px;
}

#shortResults {
}

#shortResults p {
margin-top: 5px;
padding-top: 5px;
margin-bottom: 0;
padding-bottom: 0;
}

#shortResults input {
width: 95%;
background: url(bg-input.gif) top left no-repeat;
padding: 5px;
font-size: 1em;
font-weight: 600;
}

#shortResults textarea {
width: 95%;
height: 80px;
font-weight: 600;
color: red;
}

.resultsBottom {
text-align: right;
font-weight: 600;
}

/* site admin interface */
#configTabs {

}

#configTabs div {
padding: 10px; width:90%

}

.configTab label {
padding-top: 10px;
}

#configTabs input {

}

#configTabs textarea {
width: 95%;
height: 10em;
}

.configResults {
font-weight: 600;
color: #702edd;
padding-left: 20px;
}

.numberField {
width: 5em;
}

.textField {
width: 95%;
}

/* page navigation */

.search-nav {
height:20px;
margin: 20px;
text-align: center;
font-weight: 600;
}

.search-nav a {
vertical-align:top;
display: inline-block;
margin: -5px 0 0 0;
position:relative;
padding: 3px 7px 3px 7px;
background: white;
border: solid 1px #939598;
border-top: 1px solid #DDD;
border-left: 1px solid #DDD;
text-decoration:none;
color: #702edd;
}

.search-nav a:hover, .search-nav a.current{
color: white;
background: #702edd;
border: 1px solid #8faf0a;
}

/* frame & redirect style */

#redirectBlock {
text-align: center;
}

#countdown {
font-weight: 600;
color: red;
}

#removeFrame {
float: right;
text-align: right;
margin-right: 10px;
font-weight: 600;
clear: right;
width: 200px;
}

#topFrame {
clear: both;
text-align:center;
}

#lowerFrame {
text-align:center;
}

/*=== Navigation ===*/
/*- Nav1 -*/
#nav1{
	color: #555555;
	line-height:1.8em;
	font-size:14px;
	font-weight:bold;
	height:30px;
	letter-spacing:-0px;
	text-transform:uppercase;
	font-style:normal; font-family:Trebuchet MS; list-style-type:none; margin-left:0; margin-right:0; margin-top:1px; margin-bottom:0
	}
	
#nav1 li{
   
	float: left;
	line-height: 30px;
	margin: 0 4px 0 0

}
#nav1 li a{
    color: #bfbfbf;
	display: block;
	float: left;
	text-decoration: none;
	color: #FFFFFF;
	padding-left:13px; padding-right:0; padding-top:0; padding-bottom:0

}

#nav1 li a:Hover {
    color: #889B16;
	text-decoration: none

}

#nav1 li a:Active {
    color: #E2E2E2;
	text-decoration: none
}


/* ================================================================ 
Cadre
=================================================================== */
body{

background-image: url('logo/logo.php'); background-repeat: no-repeat; background-position: left bottom }
/*=== Styling Boxes ===*/

/*- Box4 -*/
.box4{
    font-family:Trebuchet MS, Arial, Helvetica; 
	color: #ffffff;
	font-size: 14px;
	width: 430px;
	
}
.box4 h2{
color: #232323;
font-size: 16px; margin-top:1px; margin-bottom:4px; font-weight:bold
}

.box4 h2 span{
color: #000000;
}

.box4 .top,.box4 .bot{
	background: url(box4-top.gif) no-repeat top;
	clear: both;
	height: 10px;
	overflow: hidden
}
.box4 .bot{
	background: url(box4-bot.gif) no-repeat top
}
.box4 .spacer{
	background: #879B17;
	height: 10%;
	padding-left:10px; padding-right:10px; padding-top:5px; padding-bottom:5px
}

/*- Box5 -*/
.box5{
    font-size:14px; 
    font-family:Trebuchet MS;
 	width: 940px; 
 	margin-left: auto; 
    margin-right: auto;
 	color:#000000;
	}
.box5 .top,.box5 .bot{
	background: url(box5-top1.gif) no-repeat top;
	clear: both;
	height: 10px;
	overflow: hidden
}
.box5 .bot{
	background: url(box5-bot1.gif) no-repeat top
}
.box5 .spacer{
	background: url(box5-bgr1.gif) repeat-y top;
	padding-left:25px; padding-right:25px; padding-top:15px; padding-bottom:15px;     

}

/*- Box6 -*/
.Box6{
    font-family:Trebuchet MS, Arial, Helvetica; 
    color: #bfbfbf;
	font-size: 14px;
	margin-left: auto; 
    margin-right: auto;
	width: 940px; 
}

.Box6 .top,.Box6 .bot{
	background: url(box6-top.gif) no-repeat top;
	clear: both;
	height: 10px;
	overflow: hidden
}
.Box6 .bot{
	background: url(box6-bot.gif) no-repeat top
}
.Box6 .spacer{
	background: #33322F;
	padding-left:10px; padding-right:10px; padding-top:5px; padding-bottom:5px
}

/* style pour le case de décompte de caractères possible à saisir */
.decompte
{
width: 30px;
position: absolute;
border: 1px solid FF0000;
font-size: 11px;
font-family: Verdana, sans-serif;
}

.limiter

{
width: 97%;

}

/* Tableux */

.tabl {
border:2px solid #8E8A88; 
border-collapse:collapse;
width:94%;
margin-left: 4px;
margin-top:0px; 
margin-bottom:5px
 }

.tabl a {
color: #1E1D1C;text-decoration:none
}

.tabl a:Hover {
color: #889B16; text-decoration:none
}
 
.grise {
 border:1px solid #928E89; 
 background-color: #F9F9F9;
 font-family: Verdana,
 font-size: 12px
 }
 
.grise p {
color: #232323;
font-size: 16px; margin-top:1px; margin-bottom:4px; font-weight:bold
}

Je peux vous passer le lien par MP, si vous le souhaitez ?

Merci pour votre aide.

Theweb

4 octobre 2010 à 4:06:08

Salut,

Je cherche à placer une image au fond tout en haut-gauche d'une page web, l'image est incluse par CSS dans le fond d'écran d'un DIV. dans le code Html j'ai :

<div class="imagehaut"></div>

Que dois-je mettre dans le code CSS pour que ça marche ?

Merci pour votre aide.

lifaon74

4 octobre 2010 à 8:46:54

avec position:absolute
mais je te conseiles d'utiliser la balise image:
<img src="img.png" style="position:absolute;top:0px;left:0px;">

Derzone

4 octobre 2010 à 9:42:10

Je pense qu'il parlait d'une image de background à placer en haut à gauche de sa div...

Et dans ce cas, dans ton CSS il faudra que tu utilises l'attribut background-position (ou que tu inclues le tout dans l'attribut background ) :

#taDiv{
	width: 500px; /* A remplacer par la taille de ta div */
	height: 500px; /* Pareil qu'au-dessus */
	background: url(image_de_fond.jpg) top left no-repeat; /* top left revient au même que 0 0 */
}

5 octobre 2010 à 1:07:33

Merci à vous,
En faite il faut que je positionne mon div au dessous de tous les autres et de façon a ce que j'aurais ce div en haut à gauche de la page web.
Cela dans le but d'avoir l'images de fond de ce div en haut à gauche de ma page web.

Dans ma page juste après <body> j'ai insérer :

Dans le code CSS :

.imagehaut
{
top:0px;
left:0px;
width: 200px; 
height: 350px;
background-image: url('logo.png'); 
background-repeat: no-repeat; 
background-position: left bottom ;
position:absolute;
}

Normalement ça devrais marché ?
Mais j'ai toujours mon images au dessus et dissimule le contenu de la page !

à votre avis ça peux provenir de quoi ?
Merci.

5 octobre 2010 à 1:18:23

Hello,

est-ce que l'on pourrait avoir ton code HTML et CSS ? (ou à défaut une URL pour voir le site en ligne)

5 octobre 2010 à 17:58:23

6 octobre 2010 à 4:40:58

En effet le codage laisse à désirer, tu as des <div> dans la partie <head> , plusieurs balises <body> ouvertes, la balise <center> qui est obsolète...
Bref il faudrait déjà que tu corriges ces fautes de base.

Sinon je suis intéressé par le lien en MP, cela sera plus simple de corriger l'erreur en voyant la page PHP générée.

7 octobre 2010 à 14:11:54

je t'ai envoyer un MP !

merci d'avoir jeter un coup d'oeil

7 octobre 2010 à 14:19:36

Sur le lien que tu m'as envoyé par MP (et dans le CSS donné ci-dessus), tu as 2 fois la déclaration body dans ton CSS.

Supprimes l'un des deux et, pour caler ton image en haut à droite, remplaces :

body{
    background-image: url("*****/logo/logo.php");
    background-position: left bottom; /* C'est là que ça va pas */
    background-repeat: no-repeat;
    background-color: #1E1D1C;
    font-family: Trebuchet MS,Tahoma,sans-serif;
}

par :

body{
    background: url("*****/logo/logo.php") left top no-repeat #1e1d1c;
    font-family:Trebuchet MS,Tahoma,sans-serif;
}

Voilà voilà

7 octobre 2010 à 16:56:55

Merci Derzone,

j'ai enlever le <div> dans la partie <head>, la balise <center> et j'ai remplacer la <body> ! et l'images est bien en haut et à droite de la pages.

Mais je veux aussi mettre une autre images en arrière plan mais cette fois il doit être caler en bas à droit ?

Maintenant qu'on a déjà utilisé le background du body, comment va-on faire ?

7 octobre 2010 à 19:57:01

Placer image en haut d'une page web

Placer image en haut d'une page web

Supprimer

Modérer

Signaler le message aux modérateurs