20 replies [Last post]
nvent
nvent's picture
Offline
Regular
Last seen: 15 years 2 weeks ago
Joined: 2005-09-10
Posts: 35
Points: 0

Hello,
I am styling a nested list for a content manager.
I'm having trouble with padding, margin, and vertical alignment.

See this example.
XHTML and CSS Validate.

Part 1 of the problem:
To get the child to center in the background image, I'm adding padding to the top- which forces it down. The unwanted part of this is that it also adds space below, despite the height being set. I could set the height to be the true height minus the top padding... but that would seem improper...

I understand what's happening with the padding problem, and would like to find some other way to center the child link within the block - in a way that does not alter the percieved height.

Part 2 of the problem:
Since the grandchildren's UL is a proper nested list, the grandchild link takes on the child's attribute - it's parent. I have forced the height to be 10px, but that only works is a link doesn't wrap to two lines. There may be a solution involving clever conditional class definitions, but I haven't found it.

Here's the html:

<!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" xml:lang="en" >
<head>

<title></title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="Keywords" content="" />


<style type="text/css" media="all">
body {
   color: #053b81;
   margin:0;
   padding:0;
   font: 11px Arial, Helvetica, sans-serif;
   background-color: #fff;
   min-width:770px;
   text-align: center;
	}
img{
   border: 0px;
	}
#wrapper{
   width: 780px;
   max-width: 780px;
   margin: 0 auto;
}
#page{
   width: 780px;
   height: 505px;
   max-width: 780px;
   text-align: left;
   margin: 0 auto;
}
#page:after{
   content: ".";
   display: block;
   height: 0;
   clear: both;
   visibility:hidden;
   } 
#menu{
  float: left;
   position: relative;
   width: 165px;
  top: 45px;
   left: 45px;
   padding: 0;
   margin: 0;
	}
#menu ul{
   list-style-type: none;
   padding: 0;
   margin: 0;
}

/* This defines the child level */
.LSM_0 li{
   text-align: center;
}
.LSM_0 a{
	vertical-align: middle;
   color: #053b81;
   display: block;
   padding: 12px 0 0 0;
   height: 36px;
   width: 165px;
   text-decoration: none;
   background-repeat: no-repeat;
   background-image: url(http://www.n-vent.com/devtest/menulev2.png);
   border: 1px solid gray;
}
.LSM_0 a:hover{
   text-decoration: underline;
}

/* This defines the grandchild level */
.LSM_1{
   text-align: center;
   padding: 0;
   margin: 0;
   border: 1px solid Lime;
}
.LSM_1 a{
	width: 150px;
   text-align: left;
   color: #053b81;
   text-decoration: none;
   padding: 0 0 0 10px;
   margin: 0;
   height: 10px;
   background: none;
   border: 1px dashed Fuchsia;
}
.LSM_1 a:hover{
   text-decoration: underline;
}
</style>	
</head>

<body>

<!-- The actual list  is here -->

   <div id="menu">
      <ul class="LSM_0">
         <li><a href="index.php?id=26">Child</a>
            <ul class="LSM_1">
               <li><a href="index.php?id=28">Grandchild</a></li>
               <li><a href="index.php?id=29">Grandchild</a></li>
            </ul></li>
         <li><a href="index.php?id=27">Child</a></li>
      </ul>
   </div>


</body>
</html>

nvent
nvent's picture
Offline
Regular
Last seen: 15 years 2 weeks ago
Joined: 2005-09-10
Posts: 35
Points: 0

List Styling Conundrum

No replies... that's ok if it's not possible, but if it is... please tell me Smile

nvent
nvent's picture
Offline
Regular
Last seen: 15 years 2 weeks ago
Joined: 2005-09-10
Posts: 35
Points: 0

List Styling Conundrum

Ok, let's do an excersize, because my mind is *bending* on this one, someone who is really good with child, descendant, granchild, etc selectors could do it.
I feel half retarded sometimes Smile

I am trying to figure out the proper descendant selector syntax to style this:

<div id="menu">
  <ul class="LSM_0">
    <li><a>a list item</a></li>
    <li><span class="LSM_currentPage"></span></li>
    <li>
      <ul class="LSM_1">
        <li><span class="LSM_currentPage"></span></li>
        <li><a>a list item</a></li>
      </ul>
    </li>
  </ul>
<div>

Here are styles I need to define:

1) a within li within ul.LSM_0
the same as
2) span.LSM_currentPage within li within ul.LSM_0

3) a within li within ul.LSM_1 within ul.LSM_0
the same as
4) span.LSM_currentPage within li within ul.LSM_1 within ul.LSM_0

Ug... I hope that makes sense? I feel like I still may be missing something here.

larmyia
Offline
Elder
London
Last seen: 12 years 1 week ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

List Styling Conundrum

sorry, reading through your op I'm a bit confused about what you're trying to achieve here. as for your last post is this what you're looking for??:

1)

#menu ul.LSM_0 li a {
    color: red;
    }

2)
#menu ul.LSM_0 li span.LSM_currentPage {
    color: green;
    }

3)
#menu ul.LSM_0 li ul.LSM_1 li a {
    color: blue;
    }

4)
#menu ul.LSM_0 li ul.LSM_1 li span.LSM_currentPage {
    color: yellow;
    }

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 29 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

List Styling Conundrum

to answer the first question(?) in the OP, lose the padding on the anchors and make the line-height:36px in upper level anchors.

nvent
nvent's picture
Offline
Regular
Last seen: 15 years 2 weeks ago
Joined: 2005-09-10
Posts: 35
Points: 0

List Styling Conundrum

I really appreciate the lession in descendant selectors!

What was my obtuse css above is now *working* and looks like this:

#menu{
	float: left;
	position: relative;
	width: 165px;
	top: 45px;
	left: 45px;
	list-style-type: none;
	}
#menu ul, #menu li, ul ul{
   padding: 0;
   margin: 0;
   list-style-type: none;
	}

/* Child level links, both current page and non-current page */
#menu ul.LSM_0 li a, #menu ul.LSM_0 li span.LSM_currentPage {
   vertical-align: middle;
   color: #053b81;
   display: block;
   padding: 0 0 0 0;
   margin: 10px 0 0 0;
   height: 37px;
   line-height: 36px;
   width: 165px;
	text-align: center;
   text-decoration: none;
   background-repeat: no-repeat;
   background-image: url(images/menulev2.png);
   }
   
/* Grandchild level links, both current page and non-current page */
#menu ul.LSM_0 li ul.LSM_1 li a, #menu ul.LSM_0 li ul.LSM_1 li span.LSM_currentPage{
   width: 150px;
   text-align: left;
   color: #053b81;
   height: 14px;
   line-height: 11px;
   text-decoration: none;
   padding: 0 0 0 1em;
   margin: 0;
   background: none;
   }
#menu ul.LSM_0 li span.LSM_currentPage, #menu ul.LSM_0 li ul.LSM_1 li span.LSM_currentPage{
	color: Black;
}
#menu ul.LSM_0 li a:hover, #menu ul.LSM_0 li ul.LSM_1 li a:hover{
	text-decoration: underline;
	color: black;
	}

http://www.n-vent.com/devtest/

I owe a few people a beer.

larmyia
Offline
Elder
London
Last seen: 12 years 1 week ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

List Styling Conundrum

always a pleasure. just remember if something's not working you might need to drill down further into your code. depending on the rest of your code:

<div id="main">
  <ul id="list">
    <li>item 1</li>
  </ul>
</div>

you might be able to use just

li {color: red;}

or you might need to go further to

ul#list li {color: red;}

or even further

#main ul#list li {color: red;}

on the web dev toolbar the "view style information" under the "css" tab comes in very handy for this.

ps. I'll hold you to that beer Smile

nvent
nvent's picture
Offline
Regular
Last seen: 15 years 2 weeks ago
Joined: 2005-09-10
Posts: 35
Points: 0

List Styling Conundrum

Thanks man! If you want that beer pm me an email addy and i'll paypal you some beer-currency Cool

larmyia
Offline
Elder
London
Last seen: 12 years 1 week ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

List Styling Conundrum

nvent wrote:
Thanks man! If you want that beer pm me an email addy and i'll paypal you some beer-currency Cool

no probs and Laughing out loud thanks.

larmyia

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 29 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

List Styling Conundrum

but she's a girl

larmyia
Offline
Elder
London
Last seen: 12 years 1 week ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

List Styling Conundrum

:oops:

i still like a tipple now and then wolf Smile

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 29 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

List Styling Conundrum

who doesn't? I was just correcting the 'Thanks man' to perhaps Thanks ma'am! Wink

edit: I'm guessing a tipple is a drink...

larmyia
Offline
Elder
London
Last seen: 12 years 1 week ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

List Styling Conundrum

re: tipple - it is indeed.

actually I was rather touched. you always come to my rescue Smile thanks. I obviously need a more feminine nic.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 29 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

List Styling Conundrum

or an avatar, like T's old one Laughing out loud

Anonymous
Anonymous's picture
Guru

List Styling Conundrum

wolfcry911 wrote:
or an avatar, like T's old one Laughing out loud
Quiet you! Wink

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 39 weeks 5 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Re: List Styling Conundrum

Quote:
Hello,
See this example.
XHTML and CSS Validate.

The verstion that's up there now doesn't. There are 5 html errors on the version I just looked at. One of them is invalid use of <ul>

Quote:
Part 2 of the problem:
Since the grandchildren's UL is a proper nested list,

No it's not. The nested list has to be *inside* a <li> element.

You've got:
<ul>
<li></li>
<ul>
<li></li>
</ul>
<li></li>
</ul>

I believe that's wrong. Is should be

<ul>
<li></li>
<li>
<ul>
<li></li>
</ul>
</li>
<li></li>
</ul>

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

nvent
nvent's picture
Offline
Regular
Last seen: 15 years 2 weeks ago
Joined: 2005-09-10
Posts: 35
Points: 0

List Styling Conundrum

Hey I didn't know she was a woman! With all the crazy usernames and avatars these days... I can't keep up Smile

Anonymous
Anonymous's picture
Guru

List Styling Conundrum

nvent wrote:
Hey I didn't know she was a woman! With all the crazy usernames and avatars these days... I can't keep up Smile
That's quite alright, miss. Wink

nvent
nvent's picture
Offline
Regular
Last seen: 15 years 2 weeks ago
Joined: 2005-09-10
Posts: 35
Points: 0

List Styling Conundrum

My apologies.

larmyia
Offline
Elder
London
Last seen: 12 years 1 week ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

List Styling Conundrum

hey no offence taken Smile

larmyia (off to check out pics of bollywood actresses)

larmyia
Offline
Elder
London
Last seen: 12 years 1 week ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

Re: List Styling Conundrum

Ed Seedhouse wrote:

I believe that's wrong. Is should be

<ul>
<li></li>
<li>
<ul>
<li></li>
</ul>
</li>
<li></li>
</ul>

yes, well spotted ed.