CODEWITHSUNDEEP
htmlcss
Elysium
Elysium

Reputation: 173

How to move buttons to the middle of the 1st text column?

I'd like to move facebook and twitter buttons and make them more visible on my temporary site:

gaberivers.com

Now they are below the footer and no one can see them. I'd like to move it next to the 1st text column. Outside of that text box...that way people would see it much better.

Demo:

http://jsfiddle.net/ZWq8g/

Upvotes: 1

Views: 602

Answers (2)

Anthony Neace
Anthony Neace

Reputation: 26021

Okay, so if I understand correctly, you're trying to move your Facebook and Twitter images to the left of your columns. So lets make a new column, called columnSocial and in the CSS:

#columnSocial {
line-height:120px;
background-color:#394046;/*background: url(black.jpg) no-repeat 0 0;*/
width:64px;
height:250px;
float:left;
position:relative;}

I copied most of that from your existing columns -- be sure to edit one of the other columns width down to accommodate (your column container only allows 900px, so you need to shave off 36px somewhere else) this new column. The line-height attribute is useful to get some vertical spacing, since we can't use vertical-align on div elements.

In your HTML, you will need to add:

<div id="columnSocial">
     ...
</div>

After your container begins and before column1 begins. Feel free to toggle any of the numbers as you like, but that should get something similar to what you were asking for.

As a general design note, having good structure (like a container for your columns) takes a lot of the work out of changes like this -- it ended up being trivial to move the images, since all we had to do was make a new column.

Upvotes: 2

Satya Teja
Satya Teja

Reputation: 616

Here is what you need:- your footer should be like

<div id="footer" style="text-align: center;">
<p>&copy; 2012 Angloesfera. Todos los derechos reservados.</p>
<div id="snetworks">
        <a class="show" href="https://www.facebook.com/pages/Academ%C3%ADa-AngloEsfera/190496871000029"> <!--a http-vel kell a link...vagy          kulonben az en oldalamon belul fogja keresni a linket-->
        <img width="36" height="36" rel="" title="" alt="facebook" src="images/facebook.png"></a>

        <a class="show" href="https://twitter.com/GoE_Shop">
        <img width="36" height="36" rel="" title="" alt="facebook" src="images/twitter.png"></a>
</div>
</div>

and css for #snetworks

#snetworks {
    left: 100px;
    position: absolute;
    top: 2px;
}

Upvotes: 0

Related Questions