etronicsrd Posted March 8, 2013 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 Link to comment Share on other sites More sharing options...
Ingolme Posted March 8, 2013 Share Posted March 8, 2013 So why don't you want to use CSS? You already have some in your code. Link to comment Share on other sites More sharing options...
etronicsrd Posted March 8, 2013 Author 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? Link to comment Share on other sites More sharing options...
Ingolme Posted March 8, 2013 Share Posted March 8, 2013 On each image element add style="vertical-align: middle" Link to comment Share on other sites More sharing options...
etronicsrd Posted March 8, 2013 Author 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 Link to comment Share on other sites More sharing options...
etronicsrd Posted March 8, 2013 Author 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 Link to comment Share on other sites More sharing options...
Ingolme Posted March 9, 2013 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 /> Link to comment Share on other sites More sharing options...
etronicsrd Posted March 10, 2013 Author Share Posted March 10, 2013 Thank you again Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now