CODEWITHSUNDEEP
csshtml
Dano007
Dano007

Reputation: 1932

Display icons and text on the same line

I'm trying to get the text (Home, About Us, Cheese) etc to display to the right of the social media icons, so that the base of the text is aligned with the base of the icons and they appear on the same line.

How do I do this?

My code is in fiddle here http://jsfiddle.net/pnX3d/

    <div class="grid_5" id="social_icons">
        <a href="http://www.facebook.com/print3dexpert" target="blank"><img src="img/facebook.png" alt="Click to visit us on Facebook"></a>
        <a href="http://www.twitter.com/print3dexpert" target="blank"><img src="img/twitter.png" alt="Click to visit us on Twitter"></a>
        <a href="http://pinterest.com/print3dexpert" target="blank"><img src="img/pinterest.png" alt="Click to visit us on Pininterest"></a>
        <a href="#"><img src="img/email.png" title="Click to contact us" alt="Contact us"></a>

    </div>

    <nav class="topmenu omega">
        <ul>
        <li><a href="#">Home</a> |</li>
        <li><a href="#">About Us</a> |</li>
        <li><a href="#">Cheeses</a></li>
        </ul>
    </nav>

Upvotes: 13

Views: 119516

Answers (5)

Mamun
Mamun

Reputation: 68933

I have achieved that with the following code:

.container-header{
    line-height: 1.22;
}
#social_icons {
    padding: .5em;
    display: inline-block;
}

.topmenu li {
     display:inline-block;
     font-size: 1.5em;
     text-align: right;
}
.topmenu.omega{
     float:right;
}
ul{
     margin: 0;
}
li>a
{
    font-size: 20px;
}
<div class="container-header">
  <div class="grid_5" id="social_icons">
	<a href="http://fontawesome.io/icon/address-book/" target="blank"><img src="img/facebook.png" alt="Facebook"></a>
	<a href="http://www.twitter.com/print3dexpert" target="blank"><img src="img/twitter.png" alt="Twitter"></a>
	<a href="http://pinterest.com/print3dexpert" target="blank"><img src="img/pinterest.png" alt="Pininterest"></a>
	<a href="#"><img src="img/email.png" title="Click to contact us" alt="Contact us"></a>

  </div>

  <nav class="topmenu omega">
	<ul>
	<li><a href="#">Home</a> |</li>
	<li><a href="#">About Us</a> |</li>
	<li><a href="#">Cheeses</a></li>
	</ul>
  </nav>
</div>

Upvotes: 5

Dano007
Dano007

Reputation: 1932

Thanks for your input, but I actually ended up using the following. As this isn't a production site and I'm only experimenting I wanted to use flex columns. The below actually reduces the code required as well.

HTML

<div id="social_icons">
    <a href="http://www.facebook.com/print3dexpert" target="blank"><img src="img/facebook.png" alt="Click to visit us on Facebook"></a>
    <a href="http://www.twitter.com/print3dexpert" target="blank"><img src="img/twitter.png" alt="Click to visit us on Twitter"></a>
    <a href="http://pinterest.com/print3dexpert" target="blank"><img src="img/pinterest.png" alt="Click to visit us on Pininterest"></a>
    <a href="#"><img src="img/email.png" title="Click to contact us" alt="Contact us"></a>

    <nav class="topmenu omega">
        <ul>
            <li><a href="#">Home</a> |</li>
            <li><a href="#">About Us</a> |</li>
            <li><a href="#">Cheeses</a></li>
        </ul>
    </nav>
</div>

CSS

#social_icons {
    padding: .5em;
    line-height: 2.7;
    -webkit-columns: 150px 2;
    font-size: 1.2em;
}

.topmenu li { 
    display:inline-block;
}

Upvotes: 0

noob
noob

Reputation: 641

Float the .topmenu to right and #social_icons to the left. Give padding-left:0; for the ul and give display:inline-block for .topmenu. Please check it in fiddle http://jsfiddle.net/pnX3d/10/

Upvotes: 0

Kai Feller
Kai Feller

Reputation: 663

Add float: left to #social_icons and .topmenu li.

Here's a demo: http://jsfiddle.net/ZsJbJ/.

Hope that helps!

Upvotes: 3

DevlshOne
DevlshOne

Reputation: 8457

These changes in your CSS should do the trick:

#social_icons {
    padding: .5em;
    line-height: 1.22;
    float:left;
    vertical-align:bottom;
}

.topmenu li {
    display:inline-block;
    font-size: 1.5em;
    text-align: right;
    line-height: 1.22;
    float:left;
    vertical-align:bottom;
}

Upvotes: 0

Related Questions