Hi all,
I'm something of a novice at CSS and I'm having trouble converting a PSD layout to HTML/CSS. Here is a link to an
image of the layout.
My problem is with the menu part. I'm going to rollover the oval in the background and want to vertically and horizontally align the labels to the center of the spaces where the ovals will be. Here is what I have so far:
relevant HTML:
Code:
<div class="main-menu">
<ul>
<li ><a href="#"><img alt="web design" src="images/web-design.png"></a></li>
<li ><a href="#"><img alt="editing" src="images/editing.png"></a></li>
<li ><a href="#"><img alt="writing" src="images/writing.png"></a></li>
<li ><a href="#"><img alt="translation" src="images/translation.png"></a></li>
</ul>
</div>
CSS:
Code:
* {
margin: 0;
padding: 0;
position: relative;
}
body { background-color: #FFFFFF;
font-family: Gill Sans, Gill Sans MT, Calibri, sans-serif;
font-size: 11px;
color:#000000;
}
...
div.main-menu {
left: 100px;
top: 200px;
width: 892px;
height: 230px;
position: relative;
}
div.main-menu ul{
list-style: none;
position: relative;
width: 892px;
height: 230px;
}
div.main-menu ul li{
display:inline;
height: 227px;
width: 218px;
margin-top: 30px;
padding-left: 10px;
padding-right: 10px;
}
I tried a number of things, but nothing seems to work. I'd appreciate your help!
Thanks,
polina