3 Replies - 1127 Views - Last Post: 12 September 2011 - 02:30 AM

#1 markyeoj  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 27
  • Joined: 11-September 11

Cannot arrange in horizontal list style.

Posted 11 September 2011 - 11:31 PM

Hello guys, I have some problem here, I managing a <ul>, I want it to arrange it in css for "inline" display. here is the code in html:
 <div class = "main-content">
				<div id "pagelink">
				<ul id = "main">
					<li>
						<h2><a href="#">Easy to Customize</a></h2>
						
						<img src="livello.jpg" alt="Easy to Customize"/>
							 
					</li>
					<li>
						<h2><a href="#">Your Corporate Site</a></h2>
						
						<img src="YourCorporateSite.jpg" alt="Corporate Site"/> 
							 
					</li>
					<li>
						<h2><a href="#">Porfolio</a></h2>
						
						<img src="porfolio.jpg" alt="Porfolio"/>
							 
					</li>
					</ul>
				</div>		
				</section>


and here is the code in css:
/*main content*/
#main li{
	display:inline;
	padding-right:20px;
	list-style-type:none;
}
#main li a{
	text-decoration:none;
	
}



sorry for this problem, I'm just a newbie.. what's wrong with my code?

Is This A Good Question/Topic? 0
  • +

Replies To: Cannot arrange in horizontal list style.

#2 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3541
  • View blog
  • Posts: 10,236
  • Joined: 08-June 10

Re: Cannot arrange in horizontal list style.

Posted 12 September 2011 - 12:04 AM

the width. the <h2> tag is a block element that uses all available space (i.e. the whole line). you better use inline-block or float with a set width (mind that all versions have their advantages/disadvantages)

This post has been edited by Dormilich: 12 September 2011 - 12:05 AM

Was This Post Helpful? 1
  • +
  • -

#3 markyeoj  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 27
  • Joined: 11-September 11

Re: Cannot arrange in horizontal list style.

Posted 12 September 2011 - 12:59 AM

Thanks, that was great the list is now arranged in inline-block but.. it attached in the left side, i want to set it in a center of the page, but it didn't work. heres my new code: in css
*main content*/
#main li{
	display:inline-block;
	padding-right:70px;
	list-style-type:none;
	width:200px;
}
#main li a{
	text-decoration:none;
}
#main{
	left:470px;
}


my html code

<div class = "main-content">
				<div id "pagelink1">
				<ul id = "main">
					<li>
						<img src="livello.jpg" alt="Easy to Customize"/>
						<a href="#">Easy to Customize</a>
								 
					</li>
					<li>
						<img src="YourCorporateSite.jpg" alt="Corporate Site"/> 
						<a href="#">Your Corporate Site</a>
						
					</li>
					<li>
						<img src="porfolio.jpg" alt="Porfolio"/>
						<a href="#">Porfolio</a>
						
					</li>
					</ul>
				</div>		


Was This Post Helpful? 0
  • +
  • -

#4 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3541
  • View blog
  • Posts: 10,236
  • Joined: 08-June 10

Re: Cannot arrange in horizontal list style.

Posted 12 September 2011 - 02:30 AM

centering a block element:
#the_element {
    width: 40em; /* or whatever width is feasible */
    margin: 0 auto; /* replace 0 with with your top/bottom margin */
}

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1