+- Twitist Forums (http://twitist.com)
+-- Forum: Twitter forums (/forum-1.html)
+--- Forum: Twitter General help (/forum-6.html)
+--- Thread: How can I get my website icons in the same row? (HTML)? (/thread-4989.html)
How can I get my website icons in the same row? (HTML)? - Ace Kevlar - 10-03-2012 04:43 PM
I'm building a website but I'm a total novice. I am looking to use integrated buttons from places like facebook and twitter in the footer of my website, but I'm trying to get them all on the same line in a row. Unfortunately, when I copy the code into the footer, this is what I get:
https://dl.dropbox.com/u/2268811/Footer.jpg
They're all on top of each other by default. I need to be able to find a way to get them all in a row. Any ideas? I did try putting them in tables which actually worked, but I removed it for two reasons: (1) apparently tables are a poor coding choice for some reason and (2) I couldn't get them left justified, they were all centered.
Do I need to make changes in the css file or the footer file? Or both? How can I keep it from breaking my site?
Anyway, any html/coding help would be appreciated. Please be clear, as I'm a dummy. Lol.
- Ace Kevlar - 10-03-2012 04:51 PM
<div id="Fter">
<div class="ShareBttn"><span class='st_facebook_large' ></span></div>
<div class="ShareBttn"><span class='st_twitter_large' ></span></div>
<div class="ShareBttn"><span class='st_google_large' ></span></div>
</div>
Here I have contained each button within a div and then all of those within a container div "Fter". The container div will be what you use to position the footer on the page and relative to other page content rather than each button separately. Its then easier to line them up within this div using their div class. Here is the CSS which is what controls the positioning:
#Fter {
width: 210px;
height: 50px;
border: 0;
margin: 0;
margin-left: 321px;
padding: 0;
padding-left: 50px;
position: relative;
background-color: #666;
}
.ShareBttn {
width: 40px;
height: 40px;
border: 0;
margin: 0;
padding: 0;
padding-top: 10px;
padding-left: 10px;
position: relative;
float: left; ------------- this is what actually pulls them all inline.
}
This is what you get in situ: http://www.robcampdriving.co.uk/
- Mr Ed - 10-03-2012 04:51 PM
1) Your link is invalid. It returns the usual 404 error message.
2) Try going back to using a table. Tables are NOT a poor coding choice. I use tables on my website ALL the time, although you wouldn't know it because the tables usually have no visible borders. (Unless I want them to.) And no matter what GUI you are using, it should have a button to align the text or image in the table, to what you want. (left justified, centered, right justified, etc.)