Jump to content

Help on HTML layout with images using div tags without CSS


Recommended Posts

Hi there,PLEASE HELP ME ASAPI used the HTML layout example using div tags. I tried to replace each part with a image. I mean, the header with a image, menu I replace each word with a button image and did the same with the content part. The problem is that they not look as an unique image because every image have a space around them.I dont want to use CSS, just HTML layout using div tags.Here is the code Im using is the same as HTML layout example on this website: <!DOCTYPE html> <html> <body> <div id="container" style="width:625px"> <div id="header" style="width:625px height:309px"> <img src="http://www.l-tronicscity.com/ml/secciones/1.gif" alt="" width="625" height="274"><img src="http://www.l-tronicscity.com/ml/secciones/boton-1.gif" alt="" width="208" height="35"><img src="http://www.l-tronicscity.com/ml/secciones//boton-2.gif" alt="" width="209" height="35"><img src="http://www.l-tronicscity.com/ml/secciones/boton-3.gif" alt="" width="208"; height="35"></div> <div id="menu" style="height:990px;width:213px;float:left;"> <img src="http://www.l-tronicscity.com/ml/secciones/categoria-1.gif" alt="" width="213" height="200"><br> <img src="http://www.l-tronicscity.com/ml/secciones/categoria-2.gif" alt="" width="213" height="196"><br> <img src="http://www.l-tronicscity.com/ml/secciones/categoria-3.gif" alt="" width="213" height="196"><br> <img src="http://www.l-tronicscity.com/ml/secciones/categoria-4.gif" alt="" width="213" height="196"><br> <img src="http://www.l-tronicscity.com/ml/secciones/categoria-5.gif" alt="" width="213" height="202"></div> <div id="content" style="height:990px;width:412px;float:left;"> <img src="http://www.l-tronicscity.com/ml/pl3/2r.gif" alt="" width="412" height="990"></div> <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;"> Copyright © W3Schools.com</div></div> </body> </html>

Edited by etronicsrd
Link to post
Share on other sites

Hi Foxy,Are you a freelancer? Im asking because Im willing to pay for your time if you want so.style="vertical-align: middle;" worked perfect but it didnt worked for horizontal images as navigation buttons and still have a horizontal space between DIV header, including navigation images, and DIV menu content. Here is the code: <!DOCTYPE html> <html> <body> <div id="container" style="width:625px"><div id="header" style="width:625px; height:309px; float:left; margin:0;"> <img style="vertical-align: middle;"src="http://www.l-tronicscity.com/ml/secciones/1.gif" alt=""width="625" height="274"><img style="margin-right:-4px;"src="http://www.l-tronicscity.com/ml/secciones/boton-1.gif" alt=""width="208" height="35"><img style="margin-right:-4px;"src="http://www.l-tronicscity.com/ml/secciones//boton-2.gif" alt=""width="209" height="35"><img style="margin-right:-4px;" src="http://www.l-tronicscity.com/ml/secciones/boton-3.gif"alt="" width="208" height="35"></div><div id="menu" style="height:990px; width:213px; float:left; margin:0;"><img style="vertical-align: middle;"src="http://www.l-tronicscity.com/ml/secciones/categoria-1.gif" alt=""width="213" height="200"><br> <img style="vertical-align: middle;"src="http://www.l-tronicscity.com/ml/secciones/categoria-2.gif" alt=""width="213" height="196"><br> <img style="vertical-align: middle;"src="http://www.l-tronicscity.com/ml/secciones/categoria-3.gif" alt=""width="213" height="196"><br> <img style="vertical-align: middle;"src="http://www.l-tronicscity.com/ml/secciones/categoria-4.gif" alt=""width="213" height="196"><br> <img style="vertical-align: middle;"src="http://www.l-tronicscity.com/ml/secciones/categoria-5.gif" alt=""width="213" height="202"></div><div id="content" style="height:990px; width:412px; float:left; margin:0;"> <img style="vertical-align: middle;" src="http://www.l-tronicscity.com/ml/pl3/2r.gif" alt="" height="990" width="412"></div><div id="seccion4" style="height:285px;width:625px;float:left; margin:0;"><img src="http://www.l-tronicscity.com/ml/secciones/4.gif" alt="" width="625" height="285" /></div><div id="seccion5" style="height:442px;width:625px;float:left; margin:0;"><img src="http://www.l-tronicscity.com/ml/secciones/5.gif" alt="" width="625" height="442" /></div><div id="seccion6" style="height:566px;width:625px;float:left; margin:0;"><img src="http://www.l-tronicscity.com/ml/secciones/6.gif" alt="" width="625" height="566" /></div><div id="seccion7" style="height:274px;width:625px;float:left; margin:0;"><img src="http://www.l-tronicscity.com/ml/secciones/1.gif" alt="" width="625" height="274" /></div></div> </body> </html>

Edited by etronicsrd
Link to post
Share on other sites

To remove horizontal spaces you'll have to put all the image tags in a row without spaces or line breaks between them:

<img /><img /><img />

rather than

<img /><img /><img />

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...