2 Replies - 645 Views - Last Post: 16 October 2013 - 08:16 PM

#1 CSatVTftw  Icon User is offline

  • New D.I.C Head

Reputation: 4
  • View blog
  • Posts: 42
  • Joined: 16-April 13

moving an inline row of li's to the right

Posted 16 October 2013 - 09:18 AM

I'm doing my first web dev project and I'm getting stuck on the CSS. I have a row of list elements, display block and inline, and I am trying to shift the entire row to the right. I've tried doing position: absolute; and giving it a left: value but then it stacks all the blocks on top of each other. Is there a way to do it without adding another div in front of the blocks, or without formatting the location of each one?

Thanks

This post has been edited by CSatVTftw: 16 October 2013 - 09:25 AM


Is This A Good Question/Topic? 0
  • +

Replies To: moving an inline row of li's to the right

#2 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3567
  • View blog
  • Posts: 10,399
  • Joined: 08-June 10

Re: moving an inline row of li's to the right

Posted 16 October 2013 - 12:14 PM

a little HTML demo code would be very useful here.
Was This Post Helpful? 0
  • +
  • -

#3 CSatVTftw  Icon User is offline

  • New D.I.C Head

Reputation: 4
  • View blog
  • Posts: 42
  • Joined: 16-April 13

Re: moving an inline row of li's to the right

Posted 16 October 2013 - 08:16 PM

Excuse my horrid class and ID names. This is my first website ever. I'm using JQuery for effects so if there are solutions there too, I guess that would help. So far all I know in JQuery tho is simple mouse hover and click things (hence the class="hidden").

    <div>
        <ul id="school" class="secondDeets">
            <li class="hidden"><a href-"#">
                    <span class="blue" id="VT"></span>
                </a></li>
            <li class="hidden"><a href="#">
                    <span class="blue" id="Germ"></span>
                </a></li>
            <li class="hidden"><a href="#">
                    <span class="blue" id="LoCoHS"></span>
                </a></li>
        </ul>
        <ul id="portfolio" class="secondDeets">
            <li class="hidden"><a href="#">
                    <span class="lightBlue" id="cSoon"></span>
                </a></li>
        </ul>
        <ul id="languages" class="secondDeets">
            <li class="hidden"><a href="#">
                    <span class="orange" id="java"></span>
                </a></li>
            <li class="hidden"><a href="#">
                    <span class="orange" id="html"></span>
                </a></li>
            <li class="hidden"><a href="#">
                    <span class="orange" id="javaS"></span>
                </a></li>
            <li class="hidden"><a href="#">
                    <span class="orange" id="jQue"></span>
                </a></li>
            <li class="hidden"><a href="#"> 
                    <span class="orange" id="matlab"></span>
                </a></li>
            <li class="hidden"><a href="#">
                    <span class="orange" id="go"></span>
                </a></li>
        </ul>
        <ul id="contact" class="secondDeets">
            <li class="hidden"><a href="#">
                    <span class="pink" id="email"></span>
                </a></li>
            <li class="hidden"><a href="#">
                    <span class="pink" id="phone"></span>
                </a></li>
            <li class="hidden"><a href="#">
                    <span class="pink" id="linkedin"></span>
                </a></li>
        </ul>
    </div>



And the CSS

.hidden {
	display: none;
}

.secondDeets {
    list-style: none;
    display: inline;
}

.bump {
    float: left;
    left: 50px;
    margin: 0 20px 0 0;
    display: block;
    width: 75px;
    height: 75px;
    color: #fff;
    font-family: "Dosis", sans-serif;
    font-size: 20px;
    overflow: hidden;
}

.lightBlue {
    background-color: #58ebd3;
    display: block;
    width: 75px;
    height: 75px;
}

.orange {
    background-color: #ffa659;
    display: block;
    width: 75px;
    height: 75px;
}

.pink {
    background-color: #ff7a85;
    display: block;
    width: 75px;
    height: 75px;
}

.blue {
    background-color: #5bb2fc;
    display: block;
    width: 75px;
    height: 75px;
}


This post has been edited by CSatVTftw: 16 October 2013 - 08:18 PM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1