etronicsrd 0 Posted March 8, 2013 Report Share Posted March 8, 2013 (edited) 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 March 8, 2013 by etronicsrd Quote Link to post Share on other sites
Ingolme 1,018 Posted March 8, 2013 Report Share Posted March 8, 2013 So why don't you want to use CSS? You already have some in your code. Quote Link to post Share on other sites
etronicsrd 0 Posted March 8, 2013 Author Report Share Posted March 8, 2013 Hi,Because Im trying to post an ad on a website where html editor eliminate all <head> part . Just let me use table or div layout. I just want to take out the spaces between images. May you help me? Quote Link to post Share on other sites
Ingolme 1,018 Posted March 8, 2013 Report Share Posted March 8, 2013 On each image element add style="vertical-align: middle" Quote Link to post Share on other sites
etronicsrd 0 Posted March 8, 2013 Author Report Share Posted March 8, 2013 I appreciate your help and time.Where I suppose to add style="vertical-align: middle"? inside DIV tag or inside img src?Thank you in advance Quote Link to post Share on other sites
etronicsrd 0 Posted March 8, 2013 Author Report Share Posted March 8, 2013 (edited) 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 March 9, 2013 by etronicsrd Quote Link to post Share on other sites
Ingolme 1,018 Posted March 9, 2013 Report Share Posted March 9, 2013 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 /> Quote Link to post Share on other sites
etronicsrd 0 Posted March 10, 2013 Author Report Share Posted March 10, 2013 Thank you again Quote Link to post Share on other sites
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.