Horizontal image on Top

Question

Ismatus3 13 Junior Poster in Training

14 Years Ago

Hello every body , I just need to put an horizontal image on the top of my page from the right side to the left side , how could i modify this code to get the result :

<img style="width: 2000px; height: 80px;" alt="txt" src="images/image2865%20%28copie%29.png">

, thank you fro your replies :) .

graphics:image web-design

2 Contributors
2 Replies
102 Views
1 Day Discussion Span
Latest Post 14 Years Ago Latest Post by Ismatus3

Dani AI

Generated 10 Months Ago

Short answer: the gaps come from the browser default body margin plus the fact an image is inline by default; float:right (as suggested) and valign in a style attribute won't give you a full‑bleed header. Using absolute positioning can work but is brittle when the rest of the page uses lots of absolute coordinates. The simplest, most robust fixes are (1) remove the body margin, and (2) make the banner either a block <img> or a background on a header wrapper so it always spans the viewport.

Example CSS (put in a stylesheet or a style block):

/* remove default page gap */
html, body {
  margin: 0;
  padding: 0;
}

/* banner as a background so it always fills the top */
#banner {
  height: 80px; /* visible banner height */
  background: url("images/banner.png") center top no-repeat;
  background-size: cover; /* scales to fill—see MDN below */
}

/* or, if you prefer an <img>, make it block-level */
#banner img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover; /* preserves crop if you fix height */
}

Troubleshooting tips and cautions: remove any fixed body height (that will truncate or shift layout), give the banner a lower z‑index than the form inputs (so inputs sit above it) or move the banner before other elements in the DOM, and change absolute top values for the labels so they start below the banner (or better: avoid so many absolute positions and use normal flow/margins). For cropping/cover behavior see MDN on background-size and object-fit: background-size on MDN and object-fit on MDN. This approach is forward‑compatible and avoids the “left/top space” problem you saw after ’s float suggestion.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

wetube 0 Newbie Poster · Answer 1 · 2012-01-24T22:57:41+00:00

Try this

<img style="width: 2000px; height: 80px; float:right; valign:top;" alt="txt" src="images/image2865%20%28copie%29.png">

Ismatus3 13 Junior Poster in Training · Answer 2 · 2012-01-25T16:50:09+00:00

Hello , thank you very much wetube for your answer , but it doesn't work , it leave space in the left and in the top too , I tried position absolute too , but it fielt , this all my code html :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
  
  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
  <title>Formulaire d'accès</title>

  
  
  <style type="text/css">
p {
}

  </style>
</head><body style="color: rgb(0, 0, 0); background-color: rgb(169, 193, 255); height: 172px;" alink="#000099" link="#000099" vlink="#990099">&nbsp; <label style="position: absolute; z-index: 10; top: 315px; left: 290px; font-weight: bold;">LOGIN</label>
<label style="position: absolute; z-index: 10; top: 315px; left: 68px; font-weight: bold;">Ressources</label>
<label style="position: absolute; z-index: 10; top: 305px; left: 428px; font-weight: bold;">Chef
Hiérarchique</label> <label style="position: absolute; z-index: 10; top: 322px; left: 470px;">(Création)</label>
<label style="position: absolute; z-index: 10; top: 305px; left: 663px; font-weight: bold;">Chef
Hiérarchique</label> <label style="position: absolute; z-index: 10; top: 322px; left: 687px;">(Suppression)</label>
<table style="position: absolute; z-index: 10; top: 300px; left: 51px; width: 831px; height: 241px;" border="1" cellpadding="2" cellspacing="2">

  <tbody>
    <tr>
      <td style="vertical-align: top; width: 179px; height: 41px;"><br>
      </td>
      <td style="vertical-align: top; width: 155px; height: 41px;"><br>
      </td>
      <td style="vertical-align: top; width: 203px; height: 41px;"><br>
      </td>
      <td style="vertical-align: top; width: 258px; height: 41px;"><br>
      </td>
    </tr>
    <tr>
      <td style="vertical-align: top; width: 179px;"><input name="DU" type="checkbox">Domaine Ubuntu<br>
      </td>
      <td style="vertical-align: top; width: 155px;"><br>
      </td>
      <td style="vertical-align: top; width: 203px;"><br>
      </td>
      <td style="vertical-align: top; width: 258px;"><br>
      </td>
    </tr>
    <tr>
      <td style="vertical-align: top; width: 179px;"><input name="DW" type="checkbox">Domaine Windows<br>
      </td>
      <td style="vertical-align: top; width: 155px;"><br>
      </td>
      <td style="vertical-align: top; width: 203px;"><br>
      </td>
      <td style="vertical-align: top; width: 258px;"><br>
      </td>
    </tr>
    <tr>
      <td style="vertical-align: top; width: 179px;"><input name="OE" type="checkbox">OpenERP<br>
      </td>
      <td style="vertical-align: top; width: 155px;"><br>
      </td>
      <td style="vertical-align: top; width: 203px;"><br>
      </td>
      <td style="vertical-align: top; width: 258px;"><br>
      </td>
    </tr>
    <tr>
      <td style="vertical-align: top; width: 179px;"><input name="SP" type="checkbox">Système Pointage<br>
      </td>
      <td style="vertical-align: top; width: 155px;"><br>
      </td>
      <td style="vertical-align: top; width: 203px;"><br>
      </td>
      <td style="vertical-align: top; width: 258px;"><br>
      </td>
    </tr>
    <tr>
      <td style="vertical-align: top; width: 179px;"><input name="VPN" type="checkbox">VPN MonteBlanco<br>
      </td>
      <td style="vertical-align: top; width: 155px;"><br>
      </td>
      <td style="vertical-align: top; width: 203px;"><br>
      </td>
      <td style="vertical-align: top; width: 258px;"><br>
      </td>
    </tr>
    <tr>
      <td style="vertical-align: top; width: 179px;"><input name="Em" type="checkbox">E-Mail<br>
      </td>
      <td style="vertical-align: top; width: 155px;"><br>
      </td>
      <td style="vertical-align: top; width: 203px;"><br>
      </td>
      <td style="vertical-align: top; width: 258px;"><br>
      </td>
    </tr>
    <tr>
      <td style="vertical-align: top; width: 179px;"><input name="WWW" type="checkbox">WWW<br>
      </td>
      <td style="vertical-align: top; width: 155px;"><br>
      </td>
      <td style="vertical-align: top; width: 203px;"><br>
      </td>
      <td style="vertical-align: top; width: 258px;"><br>
      </td>
    </tr>
  </tbody>
</table>

<label style="position: absolute; z-index: 10; top: 152px; left: 671px;">
Signature :</label>
<form style="width: 115px; height: 70px; background-color: white; position: absolute; z-index: 10; top: 120px; left: 770px;" name="signature"><br>
</form>

<input size="10" name="DU" style="position: absolute; z-index: 10; top: 348px; left: 270px;"><input size="10" name="DW" style="position: absolute; z-index: 10; top: 377px; left: 270px;"><input size="10" name="OE" style="position: absolute; z-index: 10; top: 406px; left: 270px;">   1.
      <img style="width: 100%; position: absolute; z-index: 10; top: 0px; left: 0px;" alt="txt" src="images/image2865%20%28copie%29.png"><br>

<form style="height: 943px;" method="post" action="form11111.php" name="monformulaire"><br>
  <label style="position: absolute; z-index: 10; top: 73px; left: 50px;">Nom
:</label> <input size="10" name="Nom" style="position: absolute; z-index: 10; top: 70px; left: 170px;"> <input size="10" name="Prenom" style="position: absolute; z-index: 10; top: 70px; left: 417px;"><label style="position: absolute; z-index: 10; top: 73px; left: 330px;">Prénom
:</label> <input size="10" name="Fonction" style="position: absolute; z-index: 10; top: 110px; left: 417px;"><label style="position: absolute; z-index: 10; top: 113px; left: 330px;">Fonction
:</label> <input size="10" name="Datedemande" style="position: absolute; z-index: 10; top: 70px; left: 783px;"><label style="position: absolute; z-index: 10; top: 73px; left: 610px;"> Date
de la demande :</label> <label style="position: absolute; z-index: 10; top: 113px; left: 50px;">Département
:</label> <input size="10" name="Departement" style="position: absolute; z-index: 10; top: 110px; left: 170px;"><label style="position: absolute; z-index: 10; top: 603px; left: 50px;">Téléphone
:</label> <input size="10" name="phone" style="position: absolute; z-index: 10; top: 600px; left: 160px;"> <label style="position: absolute; z-index: 10; top: 603px; left: 370px;">N1</label>
  <label style="position: absolute; z-index: 10; top: 603px; left: 470px;">N2</label>
  <label style="position: absolute; z-index: 10; top: 603px; left: 570px;">N3</label>
  <label style="position: absolute; z-index: 10; top: 603px; left: 670px;">N4</label>
  <input name="n1" style="position: absolute; z-index: 10; top: 603px; left: 350px;" type="checkbox"> <input name="n2" style="position: absolute; z-index: 10; top: 603px; left: 450px;" type="checkbox"><input name="n3" style="position: absolute; z-index: 10; top: 603px; left: 550px;" type="checkbox"> <input name="n4" style="position: absolute; z-index: 10; top: 603px; left: 650px;" type="checkbox"><input value="Envoyer" style="position: absolute; z-index: 10; top: 603px; left: 750px;" type="submit"><br>
</form>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

&nbsp;&nbsp;&nbsp;&nbsp;
<table style="position: absolute; z-index: 10; top: 716px; left: 53px; width: 827px; height: 113px;" border="1" cellpadding="2" cellspacing="2">

  <tbody>
    <tr>
      <td style="vertical-align: top;"><br>
      </td>
    </tr>
  </tbody>
</table>

<input size="10" name="autres" style="position: absolute; z-index: 10; top: 640px; left: 160px;">
<table style="position: absolute; z-index: 10; top: 856px; left: 53px; width: 827px; height: 113px;" border="1" cellpadding="2" cellspacing="2">

  <tbody>
    <tr>
      <td style="vertical-align: top;"><br>
      </td>
    </tr>
  </tbody>
</table>

&nbsp;<small><label style="position: absolute; z-index: 10; top: 870px; left: 80px; font-weight: bold;">
Autorisation de la Direction des Systèmes d'Information :</label></small><label style="position: absolute; z-index: 10; top: 785px; left: 120px;">
Date :</label>&nbsp; <br>

<form style="width: 216px; height: 70px; background-color: white; position: absolute; z-index: 10; top: 747px; left: 590px;" name="signature"><br>
</form>

<label style="position: absolute; z-index: 10; top: 785px; left: 480px;">
Signature :</label><label style="position: absolute; z-index: 10; top: 643px; left: 50px;">
Autres :</label><input size="10" name="datedg" style="position: absolute; z-index: 10; top: 782px; left: 180px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br>

<form style="width: 216px; height: 70px; background-color: white; position: absolute; z-index: 10; top: 887px; left: 590px;" name="signature"><br>
</form>

<input size="10" name="datedsi" style="position: absolute; z-index: 10; top: 922px; left: 180px;">
<label style="position: absolute; z-index: 10; top: 925px; left: 480px;">Signature
:</label>
<label style="position: absolute; z-index: 10; top: 925px; left: 120px;">Date
:</label>
<small><label style="position: absolute; z-index: 10; top: 730px; left: 80px; font-weight: bold;">Autorisation
de la Direction Générale :</label>
</small><br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

</body></html>