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,256
Total Threads: 81,169
Total Posts: 566,839
There are 54 users currently browsing (tf).
 
  Our Partners:
 
  TalkFreelance     Design and Development     HTML/XHTML/DHTML/CSS :

Help with CSS layout

Thread title: Help with CSS layout
Reply    
    Thread tools Search this thread Display Modes  
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

08-18-2012, 09:49 PM
#2
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

I was actually able to resolve this using several div's instead of the ul, but would appreciate a more elegant solution, if you have one (would also be happy to share code if anyone is interested).

Reply With Quote
08-19-2012, 11:29 AM
#3
Trustworthy is offline Trustworthy
Status: Junior Member
Join date: May 2012
Location:
Expertise:
Software:
 
Posts: 98
iTrader: 2 / 100%
 

Trustworthy is on a distinguished road

  Old

Add top and bottom padding to the li elements? I would need a screenshot to fully understand what the problem is tough

Reply With Quote
Reply    


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