How can I add/create buttons with pic and menu items for a front page?
 

I am trying to work out how to set up a front page for a static website (not a blog) that has four largish rectangular rounded edge buttons (2 x 2 layout) and within each button I have a pic/graphic on the right and a submenu of hyperlinks to other pages on the left that I can edit if I need to. I've attached a shot of a draft button so you can see what I mean.

I am not sure if there are any widgets or options within Atahualpa or WP that I can use to do this, or whether it's a "you need to either go learn some more advanced html and css, or get someone to make it for you" situation.

I'm only basically literate in HTML (tables and stuff, not divs) and my limits in css are following instructions to paste code someone else has created.

I've searched the web for how-to's but am not finding anything at my level (it's either too basic and doesn't cover what I need or it's way over my head).

I've found rounded corner box generators, thought it would be progress if I could generate just one (then I could later try and figure out how to make more, at different places on a page), but part of the instructions say put these rounded corner images in the same folder as the html page, or if you don't, change the path in the css to reflect where you put them. So I put them in the images folder and changed the path to that (copied it off my FTP uploader), but I've obviously got that wrong because the border doesn't show up.

Anyway, FWIW here's what the HTML generator did:

<div class="roundedcornr_box_642855">
<div class="roundedcornr_top_642855"></div>
<div class="roundedcornr_content_642855">

insert content

</div>
<div class="roundedcornr_bottom_642855"></div>
</div>

and then I had to put some css into the style sheet,

which I did via ATO>>CSS inserts, as follows:

.roundedcornr_box_642855 {
background: url(/htdocs/wp-content/themes/atahualpa/images/roundedcornr_642855_tl.png) no-repeat top left;
}
.roundedcornr_top_642855 {
background: url(/htdocs/wp-content/themes/atahualpa/images/roundedcornr_642855_tr.png) no-repeat top right;
}
.roundedcornr_bottom_642855 {
background: url(/htdocs/wp-content/themes/atahualpa/images/roundedcornr_642855_bl.png) no-repeat bottom left;
}
.roundedcornr_bottom_642855 div {
background: url(/htdocs/wp-content/themes/atahualpa/images/roundedcornr_642855_br.png) no-repeat bottom right;
}
.roundedcornr_content_642855 {
background: url(/htdocs/wp-content/themes/atahualpa/images/roundedcornr_642855_r.png) top right repeat-y;
}

.roundedcornr_top_642855 div,.roundedcornr_top_642855,
.roundedcornr_bottom_642855 div, .roundedcornr_bottom_642855 {
width: 100%;
height: 15px;
font-size: 1px;
}
.roundedcornr_content_642855, .roundedcornr_bottom_642855 {
margin-top: -19px;
}
.roundedcornr_content_642855 { padding: 0 15px; }

Heaven knows what's wrong with it all, and I suppose if I was clever I'd just outsource it, but I am one of these people that likes to at least have some understanding of what my web pages are really doing in case anything goes wrong ...

:)

Please don't double post - see the answer in the other thread.