Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS class background image horizontal positioning? [closed]

Tags:

html

css

So I'm trying to position a facebook/youtube/twitter button on a div that is 318 pixels across (so about 106 pixels per button).

Expected Ouput

expected layout
(source: iforce.co.nz)

I'm using float and display:inline on each button as its being rendered. I've provided my code below.

CSS CODE

#socialController{
width: 318px;
background-color:#fff;
display: inline;
}
.socialmedia
{
width:106px;
height:20px;
float:left;
vertical-align:middle;
background-position:center center;
background-repeat:no-repeat;
background-color:#373737;
}
.socialmedia:hover{
background-color:#444
}
#sm_fb{
background-image:url(../img/fb.png)
}
#sm_tw{
background-image:url(../img/tw.png)
}
#sm_yt{
background-image:url(../img/yt.png)
}

HTML CODE

<div id="socialController">
<a href="#" class="socialmedia" id="sm_fb" title="CSGONZ Facebook"></a>
<a href="#" class="socialmedia" id="sm_yt" title="CSGONZ Youtube"></a>
<a href="#" class="socialmedia" id="sm_tw" title="CSGONZ Twitter"></a>
</div>

But the problem is I'm not reaching my expected Horizontal positioning.. but instead I'm getting a vertical positioning of the buttons.

Actual Output

actual output
(source: iforce.co.nz)

What is the problem? and what am I missing? to achieve a horizontal layout?

like image 549
classicjonesynz Avatar asked Jun 11 '12 07:06

classicjonesynz


People also ask

What is the default position for a background image repeat horizontally?

Definition and Usage Tip: By default, a background-image is placed at the top-left corner of an element, and repeated both vertically and horizontally.

Which CSS property is used to change the position of the background image?

The background-position CSS property sets the initial position for each background image. The position is relative to the position layer set by background-origin .

Which property specifies whether the background image is positioned?

The background-attachment CSS property sets whether a background image's position is fixed within the viewport, or scrolls with its containing block.

How many ways background picture can be positioned?

You can give background-position up to four values in modern browsers: If you declare one value, that value is the horizontal offset. The browser sets the vertical offset to center . When you declare two values, the first value is the horizontal offset and the second value is the vertical offset.


2 Answers

Let's try this:

#socialController {
width: 318px;
background-color:#fff;
display: block;
}

Like this:

http://jsfiddle.net/CQTus/

like image 126
skywlkr Avatar answered Nov 15 '22 12:11

skywlkr


display: inline-block; should be applied to socialmedia, not socialController

like image 35
Softnux Avatar answered Nov 15 '22 12:11

Softnux