[CSatVTftw]

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

[Dormilich]

a little HTML demo code would be very useful here.

[CSatVTftw]

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