Grow your CSS skills. Land your dream job.

Blarghh…. Cant get this stacked the way I want please help..

  • # October 2, 2012 at 9:49 pm

    So I have this little page I’m working on and I want a very specific look…. But I cant get my elements to overlap correctly… I am also not sure the way I am going about this is the “correct way” I like my code to be easily accessible by anyone.

    here is the page

    And the CSS

    #mast-head {
    background: url(file:///C:/Users/Allen%20Laptop/Documents/Work/ARC/Web%20Sites/HopeWell%20Pizza/Web%20Site/images/2.jpg) no-repeat;
    padding-top: 400px;
    padding-bottom: 255px;
    width: 100%;
    position: absolute;
    z-index: 0;
    }

    nav.home {
    margin: 418px 0 0 40px;
    z-index: 1;
    position: absolute;
    }

    nav.home ul li{
    margin: 0px 25px 0 10px;
    background: #fff;
    width: 8em;
    height: 8em;
    -webkit-border-radius: 5em;
    -moz-border-radius: 5em;
    float: left;
    list-style: none;
    border: dashed;
    z-index: 3;
    position: relative;
    overflow: visible;

    }

    nav.home ul li span.navbox {
    background: #fff;
    height: 130px;
    width: 160px;
    margin: 60px 3px 0 -18px;
    display: block;
    z-index: 2;
    position: relative;
    }

    nav.home ul li span.navbox span.linktext {
    display: block;
    margin: 0 0 0 10px;
    position: relative;
    z-index: 2;

    }

    # October 2, 2012 at 11:34 pm

    Okay. . . I’ve started by putting this into a codepen, and cleaning up the html. http://codepen.io/cnwtx/pen/AmlBE. I’ll work on cleaning the css tomorrow. In the mean time, I’ll really need an image of what you want in order to try to get going.

    # October 3, 2012 at 8:40 pm

    Whats the best way to get you an image of what I am trying? I have been doing it offline until I am ready.

    # October 3, 2012 at 9:02 pm

    I put it in the codepen I will upload the images and you ca ave a look. its still really rough… Just conceptualizing everything when I started.

    # October 4, 2012 at 11:08 am

    I’d post it on a photo/file sharing site like photobucket or dropbox. Can you post the link to your codepen?

    # October 4, 2012 at 11:06 pm

    I posted it here [Example](http://www.arcscripting.com/?p=18 “Example”)

    I updated the codepen to

    # October 5, 2012 at 6:40 am

    I think I’ve worked out the basics.

    http://codepen.io/Paulie-D/pen/eatwn

    # October 5, 2012 at 9:56 am

    @Paulie_D: You beat me! But that does look about right.

    # October 5, 2012 at 12:40 pm

    It’s not perfect…the link is only the the ‘red box’ and not the image.

    Perhaps putting the pseudo element on the ‘a’ link rather than the ‘li’ would be better.

    EDIT: Oh, yes..

    http://codepen.io/Paulie-D/pen/eatwn

    # October 8, 2012 at 3:21 pm

    Great Stuff… Thanks.. I made a few changes and I like it a lot but I couldnt figure out how to best move the text down in the box…

    Here is the pen [http://codepen.io/anon/pen/iuqrg](http://codepen.io/anon/pen/iuqrg “”)

    That should just about do it.

    (Well I may include some other text in each box… little descriptions.)

    # October 8, 2012 at 5:36 pm

    To get the text to move you have to play with the line height on the ‘a’ element.

    This will also move the image but that can be shifted by changing the ‘top’ value on the ‘after’ element.

    Alternatively wrap the text in a ‘p’ tag and style that. It might break initially but one can always tweak the css.

    # October 9, 2012 at 10:23 pm

    Ah got it great work thanks fo the help..

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".