suckerfish problem, list not centered

problem with basic html n css

Page 1 of 1

5 Replies - 1196 Views - Last Post: 24 January 2010 - 07:45 AM

#1 matyus  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 29
  • Joined: 22-February 09

suckerfish problem, list not centered

Posted 23 January 2010 - 07:02 AM

i want create a suckerfish menu (when hover cursor on a certain word,a list of menu appear), and this is my html n css coding :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<style type="text/css">
<!--
ul {
  padding: 0;
  margin: 0;
  list-style: none;
  }
li {
  display:inline-table;
  position: relative;
  width: 10em;
  }
li ul {
  display: none;
  position: absolute; 
  top: 1em;
  left: 0;
  }
li > ul {
	top: auto;
	left: auto;
	}
li:hover ul { 
	display:block; 
	clear:right;
	}
-->
</style>

</head>

<body>

<center>
<ul>
  <li>Photography
	<ul>
	  <li><a href="/#">Wedding</a></li> | 
	  <li><a href="/#">Function</a></li> | 
	  <li><a href="/#">Candid</a></li> | 
	  <li><a href="/#">Model</a></li>
	 </ul>
	</li> | 

  <li>Training
	<ul>
	  <li><a href="/#">Amateur</a></li> | 
	  <li><a href="/#">Profesional</a></li> | 
	  <li><a href="/#">World Class</a></li>
	</ul>
  </li>
</ul>
</center>

</body>
</html>


my problem is when i hover my cursor to the Photography or Training, the list appear not centered, the head of the list appear under their parent and followed by the others appear at the right side, so what should i do to make the list appear at center of their parent?
(i.e : when hover the cursor on the Training, new list appear at the bottom :
Amateur at the left, Profesional under the Training and World Class at the right)

Is This A Good Question/Topic? 0
  • +

Replies To: suckerfish problem, list not centered

#2 JackOfAllTrades  Icon User is offline

  • Saucy!
  • member icon

Reputation: 5667
  • View blog
  • Posts: 22,509
  • Joined: 23-August 08

Re: suckerfish problem, list not centered

Posted 23 January 2010 - 08:10 AM

Moved to HTML and CSS
Was This Post Helpful? 0
  • +
  • -

#3 matyus  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 29
  • Joined: 22-February 09

Re: suckerfish problem, list not centered

Posted 23 January 2010 - 08:18 AM

View PostJackOfAllTrades, on 23 Jan, 2010 - 07:10 AM, said:

Moved to HTML and CSS


upss.. sory, i did not see the web development :P my bad..
thanks :)
Was This Post Helpful? 0
  • +
  • -

#4 Elbrus  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 4
  • View blog
  • Posts: 107
  • Joined: 22-July 08

Re: suckerfish problem, list not centered

Posted 23 January 2010 - 03:54 PM 

 
li > ul <!-- never seen > before --> {
    top: auto;
    left: auto;
    }


Also as far as I know, and have done when you are nesting elements or grouping you need a "," in between them. Or that is just what I been told.

and here you got nothing 
li ul {
  display: none;
  position: absolute;
  top: 1em;
  left: 0;
  }

This post has been edited by Elbrus: 23 January 2010 - 03:59 PM

Was This Post Helpful? 0
  • +
  • -

#5 matyus  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 29
  • Joined: 22-February 09

Re: suckerfish problem, list not centered

Posted 23 January 2010 - 10:42 PM

owh, i just copy from another tutorial website, i also did not understand about "li >ul"..
hmm.. do you mean nesting elements is this?
  display: none;
  position: absolute;

should be like this?
  display: none,
  position: absolute

Was This Post Helpful? 0
  • +
  • -

#6 Elbrus  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 4
  • View blog
  • Posts: 107
  • Joined: 22-July 08

Re: suckerfish problem, list not centered

Posted 24 January 2010 - 07:45 AM

View Postmatyus, on 23 Jan, 2010 - 09:42 PM, said:

owh, i just copy from another tutorial website, i also did not understand about "li >ul"..
hmm.. do you mean nesting elements is this?
  display: none;
  position: absolute;

should be like this?
  display: none,
  position: absolute


Nope that is fine... The nest elements are like this

This is the html code

<h1>text for header</h1>
<p>some paragraph here</p>
<form>
some form
</form>


and this is nesting with css...

h1, p, form{<!-- the code here is considered nesting elements of an html page --->

code here

}


With class and id it is different, an id and class you just need to call them consider this...

<div class="container">
       <ul id="nav">
              <li></li>
              <li></li>
              <li></li>
       </ul>
</div>

Now this is how you would call the class and id together in css
.container #nav{
code here...
}

Was This Post Helpful? 0
  • +
  • -
Page 1 of 1