Give help. Get 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 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:06 pm

    I posted it here [Example]( “Example”)

    I updated the codepen to

    # October 5, 2012 at 6:40 am

    I think I’ve worked out the basics.

    # 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..

    # 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 []( “”)

    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 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.