Jump to content

Help on HTML layout with images using div tags without CSS


etronicsrd
 Share

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 comment
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 comment
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 comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...