coolgirl1 Posted May 26, 2012 Share Posted May 26, 2012 Hello!I have been learning CSS for a while and enjoy it very much. I am baffled by something though. I want to align images side by side on the bottom of my webpage. They are a facebook icon, twitter icon, google plus icon, and so on. I hyper linked them so people can click them to get to my pages. However, doing this seems hard. I have heard many different ways to do it but it doesn't work well.What I did myself was this code in CSS. Here is what I have. CSS PART img.center{margin-left:15cm;} img.center1{margin-right:14cm;} HTML PART <a href="http://www.facebook.com"> <img class="center" src="facebook.ico"> </a><a href="http://www.twitter.com"> <img class="center1" src="twitter.ico"> </a> While that did indeed work, it put a small blue line in between the two icons. I think it is part of the hyperlink.Any ideas on how to do this or if there is a right way? I would appreciate any help. If you want, I would be happy to email a copy of my website to show you the icons.Thanks. Link to comment Share on other sites More sharing options...
niche Posted May 26, 2012 Share Posted May 26, 2012 you need positioning. please read http://w3schools.com/cssref/default.asp#positioning then check back Link to comment Share on other sites More sharing options...
coolgirl1 Posted May 26, 2012 Author Share Posted May 26, 2012 Hi, thank you for getting back to me. I appreciate your time.I have been learning from that website. Great site! I re-did the code and it seemed to come out right but I wanted to double check with you. I did this. img.fbook{position:absolute;middle:0px;margin-left:16cm;} img.twitter{position:absolute;middle:0px;margin-left:14cm;} img.googleplus{position:absolute;middle:0px;margin-left:12cm;} html <a href="http://www.facebook.com"> <img class="fbook" src="facebook.ico"> </a><a href="http://www.twitter.com"> <img class="twitter" src="twitter.ico"> </a><a href="http://www.plus.google.com"> <img class="googleplus" src="google.ico"> </a> Link to comment Share on other sites More sharing options...
Don E Posted May 26, 2012 Share Posted May 26, 2012 Are you just trying to get them centered at the bottom of your site? Take a look at the following and see if it helps you: <!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title><style type="text/css"> div {text-align: center; } div a {text-decoration: none;} </style></head> <body><div><a href="http://www.facebook.com"> <img src="facebook.ico" /> </a><a href="http://www.twitter.com"> <img src="twitter.ico" /> </a></div> </body></html> Just place your links/images in a div container and apply text-align: center to it. They should center since they're inline elements. To get rid of any under lines from lines, apply text-decoration: none to the a element that's inside the div container. Link to comment Share on other sites More sharing options...
niche Posted May 27, 2012 Share Posted May 27, 2012 Also, If you define a width , you can use margin: 0 auto; Link to comment Share on other sites More sharing options...
eTianbun Posted May 27, 2012 Share Posted May 27, 2012 Position property, should not be used that way! Here is an example, on how to do it:HTML: <ul id='Social'><li><a href="facebook.com/username"> <img src="facebook.ico"/></a></li><li><a href='twitter.com/username'> <img src='twitter.ico'/></a></li></ul> CSS: ul#social li{float:left; list-style-type:none; margin-left:10px;} Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.