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

[ARCScripting]

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

• Home
• Our Food
• About Hopewell
• Our Deal & Offers
• Contact Us

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;

}

[ARCScripting]

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

[ARCScripting]

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.

[ARCScripting]

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

I updated the codepen to

[Paulie_D]

I think I’ve worked out the basics.

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

[cnwtx]

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

[Paulie_D]

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

[ARCScripting]

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

[Paulie_D]

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.

[ARCScripting]

Ah got it great work thanks fo the help..

[Author]

Posts