Today's Posts Follow Us On Twitter! TFL Members on Twitter  
Forum search: Advanced Search  
Navigation
Marketplace
  Members Login:
Lost password?
  Forum Statistics:
Forum Members: 24,255
Total Threads: 81,199
Total Posts: 566,929
There are 31 users currently browsing (tf).
 
  Our Partners:
 
  TalkFreelance     Design and Development     HTML/XHTML/DHTML/CSS :

Help with CSS layout

Thread title: Help with CSS layout
     
    Thread tools Search this thread Display Modes  
Prev Previous Post   Next Post Next
08-18-2012, 05:03 AM
#1
designbee is offline designbee
Status: I'm new around here
Join date: Aug 2011
Location:
Expertise: design, writing, html
Software:
 
Posts: 2
iTrader: 0 / 0%
 

designbee is on a distinguished road

  Old  Help with CSS layout

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

     


Thread Tools
Display Modes

  Posting Rules  
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump:
 
  Contains New Posts Forum Contains New Posts   Contains No New Posts Forum Contains No New Posts   A Closed Forum Forum is Closed