CODEWITHSUNDEEP
htmlcsswordpress
Dronebutikken.dk
Dronebutikken.dk

Reputation: 5

How do i align this <ul> to the right?

I'm currently trying to align an <ul>-tag to the right on my blog, but i have a lot of problems with it. I've tried to float it right in the css, but it didn't work. I'm obviously not an advanced coder, and as you can see it's in wordpress, so i'm almost certain i'm doing something wrong. The <ul>-tag i'm trying to align to the right is the "GPS Status:" along with the gif of the gps status. This is the page i'm doing it on: blog.dronebutikken.dk

I would honestly prefer it without the li-tags, to avoid the spacing between. Thank you very much in advance!

HTML:

<div class="trending-articles">
    <ul>
       <li class="firstlink"><?php _e('Mest populære','mythemeshop'); ?>:</li>
        <?php $i = 1; $my_query = new wp_query( 'cat='.$mts_options['mts_trending_articles_cat'].'&posts_per_page=4&ignore_sticky_posts=1' ); ?>
        <?php if ($my_query->have_posts()) : while ($my_query->have_posts()) : $my_query->the_post(); ?>
            <li class="trendingPost <?php if($i % 4 == 0){echo 'last';} ?>">
                <a href="<?php the_permalink() ?>" title="<?php the_title(); ?>" rel="bookmark"><?php mts_short_title('...', 24); ?></a>
            </li>                   
        <?php $i++; endwhile; endif;?>
    </ul>
    <ul class="gps">
        <li>GPS Status</li>
        <li>
            <a href="http://blog.dronebutikken.dk/k-indeks/"><img src="http://altigator.com/wp-content/uploads/gps/gps_kpstatus.gif" align="right" width="100px"></a>
        </li>
    </ul>
</div>

CSS

Trending articles and my uneffective gps class attempt at aligning it right

.trending-articles {
  background: #2A2A2A;
  border-bottom: 1px solid #000;
  float: left;
  width: 100%;
  position: relative;
  z-index: 100;
}
.trending-articles ul {
  list-style: none
}
.trending-articles li {
  border-right: 1px solid #7D7D7D;
  color: #fff;
  float: left;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2em;
  margin: 10px 0 9px;
  padding: 0 13px;
  text-transform: uppercase;
}
.trending-articles li.firstlink {
  border: none;
  padding-left: 20px;
}
.trending-articles li.last {
  border: none
}
.trending-articles li a {
  color: #7D7D7D;
  display: block;
}
.trending-articles li a:hover {
   color: #fff
}
.gps ul {
  float="right"
}

Upvotes: 0

Views: 397

Answers (3)

Amulya Dhilip
Amulya Dhilip

Reputation: 13

There is a syntax error in your css code. Just replace .gps ul { float: "right" } withul.gps { float: right; }

Upvotes: 0

Underfrog
Underfrog

Reputation: 1317

You should use flexbox, see below: http://codepen.io/anon/pen/XmKxOr?editors=110

Get rid of the list elements

<div class="trending-articles">
  <div>
    <a href="" title="" rel="bookmark">lala</a>
  </div>
  <div>
    <a href="" title="" rel="bookmark">lala</a>
  </div>
  <div>
    <a href="" title="" rel="bookmark">lala</a>
  </div>
  <div>
    <a href="" title="" rel="bookmark">lala</a>
  </div>
  <div>
    <a href="" title="" rel="bookmark">lala</a>
  </div>
  <div>
    GPS Status
  </div>
  <div>
    <a href="http://blog.dronebutikken.dk/k-indeks/"><img src="http://altigator.com/wp-content/uploads/gps/gps_kpstatus.gif"></a>
  </div>
</div>

flex it

.trending-articles {
  background: #2A2A2A;
  border-bottom: 1px solid #000;
  padding-top:5px;
  margin:0;
  display: flex;
  justify-content: space-around
}

.trending-articles > div{
  list-style: none;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2em;
  text-transform: uppercase;
  margin: 8px 0;
  flex: 1 0 auto;
  text-align:center;
  padding-top:2px
}

.trending-articles > div:not(last-child) {
  border-right: #555 solid 1px;
}


.trending-articles > div > a {
  color: #7D7D7D;
}

.trending-articles > div > a:hover {
  color: #fff
}

Upvotes: 0

saeraphin
saeraphin

Reputation: 435

You are trying to apply the style to a <ul> inside the gps class, but your class is applied to the <ul>. :)

Oh, and there is a mistake in the CSS syntax.

Go for:

ul.gps { float: right; }

Please note that the ul may be dropped in the selector.

Upvotes: 1

Related Questions