This is my html code
This is the style.cssCode:<html> <head> <title>XXX company</title> <link rel='stylesheet' media="screen" type='text/css' href='style.css' /> </head> <body> <div id="container"> <div id="header"> <div id="logo"> <h1>XXX company</h1> </div> <div id="menu_bar"> <ul> <li><a href="#"><img src="img/but_home.jpg"></a></li> <li><a href="#"><img src="img/but_company.jpg"></a></li> <li><a href="#"><img src="img/but_service.jpg"></a></li> <li><a href="#"><img src="img/but_calculation.jpg"></a></li> <li><a href="#"><img src="img/but_news.jpg"></a></li> <li><a href="#"><img src="img/but_message.jpg"></a></li> <li><a href="#"><img src="img/but_partner.jpg"></a></li> <li><a href="#"><img src="img/but_contact.jpg"></a></li> </ul></div> /div> </body> </html>
The result is there is a gap between each button image as show belowCode:body { text-align:center; } div { margin:0; padding:0; outline:1px solid red; } #header { height:174px; padding:0px; } #logo { height:140px; background:url(img/top.jpg) no-repeat; } .spacer { clear:left; } #menu_bar { float:left; height:34px; padding:0px; margin:0px; text-align:left; } li img { border:0px; margin:0px; padding:0px; } #lang_bar { float:left; text-align:left; } #menu_bar ul { list-style:none; margin:0px; padding:0px; } #menu_bar li { display:inline; margin:0px; padding:0px; } #menu_bar li a:link, #menu_bar li a:visited { text-decoration:none; font-weight:bold; } #lang_bar ul { list-style:none; margin:0px; padding:0px; } #lang_bar li { display:inline; margin:0px; padding:0px; } #content { float:right; width:711px; text-align:left; } #left_col { float:right; width:291px; height:400px; background:url(img/left_col.jpg) no-repeat; text-align:left; } #address { text-align:left; } #container { width:1024px; margin:20px auto; } #footer { clear:both; height:56px; background:url(img/footer.jpg) no-repeat; text-align:left; }
I have set all stuffs related to element spacing and positioning like margin , padding to zero px.





Reply With Quote