-1

I'm quite a novice in css and I'm stuck with something that is probably super easy and don't know where to ask! - in Wordpress support I've been gently rejected because they don't do css help.. :(

Here's my problem- I just can't get the two ul items to get inline:

http://cssdesk.com/Wm8yb

Josh Crozier
  • 233,099
  • 56
  • 391
  • 304
domdom
  • 11
  • 1
  • 7
  • The parent - `.social` has a width of 60px.. remove that and either float the `li`, or set them to `inline-block`. – Josh Crozier Nov 04 '13 at 17:22
  • 1
    THANK YOU SO MUCH! I used both your and Jonathan's comment below and it worked.. thank you! Can I +1 your reply? - new here so not sure how it works exactly.. but thank you! :) – domdom Nov 04 '13 at 17:29
  • oh no I can't vote cause I haven't got 15rep. One day when I collect 15, I'll come back here and vote! Thanks again :) – domdom Nov 04 '13 at 17:31

6 Answers6

0

The <ul> element is the one with the socialicons class.

Try:

ul.socialicons li
Jonathan Wood
  • 65,341
  • 71
  • 269
  • 466
  • THANK YOU SO MUCH! I joined your and JoshCs reply above and it worked! Thanks a lot both, much much appreciated! :) – domdom Nov 04 '13 at 17:30
0

Here is your answer:

http://cssdesk.com/mJjJE

You'll need to increase the .social div's width to 90px to let it fit both images, also you need to remove any **ul** because .socialicons belongs to the ul or just change the rules from:

.socialicons ul

to:

ul.socialicons
Skatox
  • 4,237
  • 12
  • 42
  • 47
0

use the display:inline

or 

float:left
Diego Claudiu
  • 332
  • 1
  • 9
0

I made a few changes to your css http://cssdesk.com/LAfFN

I hope that helps.

roofdog
  • 361
  • 1
  • 9
0

There are some good responses in this stack overflow thread: CSS: display:inline-block and positioning:absolute

You should also take note of Jonathan's reply that .socialicons is the ul.

With that said, if make the two following changes it will make the li elements inline.

.socialicons {
  list-style: none; 
  display: inline-block;
  padding-left: 0; 
  padding-bottom: 0;
}  


.socialicons li {
    width:15px;
    display: inline-block;
    padding: 0.3em;
}
Community
  • 1
  • 1
dev_rybo
  • 11
  • 1
0

There are a few issues with your CSS. You did not close your <ul> element and the width of the <ul> is so small that it is squeezing the <li> elements into a single column. You have also mixed up your CSS selector syntax. Instead of .socialicons ul it looks like what you want is .socialicons.

There are really only rare cases that you should use descendant selectors. CSS is parsed from right to left. See here for more about this: http://css-tricks.com/efficiently-rendering-css/

http://cssdesk.com/D8xrT

HTML

<div class="social">
      <ul class="socialicons">
        <li id="facebook"><a href="#"><img alt="Facebook" src="http://placekitten.com/g/24/50" width="24" height="50" /></a></li>
        <li id="twitter"><a href="#"><img alt="Twitter" src="http://placekitten.com/g/30/50" width="30" height="50" /></a></li>        
      </ul>
</div>

CSS

.social {
  position: absolute; 
  right: 1.5%;
  top: 5px;
  width: 75px;
}

.socialicons {
    list-style: none; 
  display: inline;
  padding-left: 0; 
  padding-bottom: 0;
}  


.socialicons li {
     display: inline-block;
   padding: 0.3em;
   float:left;
}  

.socialicons ol, ul {
list-style: none;
display: inline-block;
}

.socialicons ul a {
    display: inline-block; 
    text-decoration: none; 
}


.socialicons img {
  max-width: 50%;
  height: auto;
}
Joshua Robinson
  • 3,430
  • 1
  • 27
  • 35