You need to login to send post. No account yet? Create one:
Create account
Home › Forums › Design › CSS ›

Space between images and other objects

No replies
Sun, 01/24/2010 - 16:48
admin

In website design is essential to set up positions and sizes of objects properly. But if you will try use image in usual way as <img src="/SOMEWHERE/IMAGE">, you will maybe surprised, that code:

 

<!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" lang="en" dir="ltr">

<html>
<head>
<style type="text/css">

   body {
      background: url('http://www.seo-web-design-aberdeen.co.uk/sites/seo-web-design-aberdeen.co.uk/files/images/prime-background.jpg');
   }

   div.important-body {
      background: url('http://www.seo-web-design-aberdeen.co.uk/sites/seo-web-design-aberdeen.co.uk/files/images/prime-front-shader.png') repeat-y top left;
      color:red;
      font-weight:bold;
      text-align:center;
      width:180px;
   }

</style>
</head>

<body>

<img src="http://www.seo-web-design-aberdeen.co.uk/sites/seo-web-design-aberdeen.co.uk/files/images/prime-front-shader-top.png" alt="Prime Cuts restaurant Top shader" />

<div class="important-body">Attention!</div>

<img src="http://www.seo-web-design-aberdeen.co.uk/sites/seo-web-design-aberdeen.co.uk/files/images/prime-front-shader-bottom.png" />

</body>
</html>

 

Gives SUCH result:

Unexpected result of web design
 

It is because xhtml declaration in header of our document (try delete header and refresh your browser). If you want result like this:
 

Expected result of web design
 

you have to add small CSS into code:

 

...      text-align:center;
      width:180px;
   }

   img {
      display:block;
   }

</style> ...

 

Good luck!

Top