?
Solved

Class for a UL

Posted on 2012-08-17
12
Medium Priority
?
352 Views
Last Modified: 2012-08-20
I have my UL  structured this way..

div#Navigation ul
{
list-style:none;
margin:5x 0;
padding:0;
height: 204px;
}

How would I create a class that would differ from above that I can use in another UL with fewer list? about 80px and how to implement it
0
Comment
Question by:zachvaldez
  • 7
  • 3
  • 2
12 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 38306604
You can extend the css with additional properties, change from id to a class name to identify them.

<div class="navigation"><ul><li></li></ul></div>
<div class="navigation small_list"><ul><li></li></ul></div>

div#Navigation ul,div#Navigation ul.small_list
{
...
...
}
div#Navigation ul.small_list {
css specific for this list
}
0
 

Author Comment

by:zachvaldez
ID: 38307058
why are these 2 together...

div#Navigation ul,div#Navigation ul.small_list
0
 

Author Comment

by:zachvaldez
ID: 38307064
The reason why Im asking this is because in the original CSS...

div#Navigation ul

If I have only 2 list(li), it leaves a an unused spaced before the next UL.
Is there a way for  the height of the UL to be be controlled . I can't call
div#Navigation ul again because, it  creates a large blank space between this  UL and new UL
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 58

Expert Comment

by:Gary
ID: 38307115
My mistake
div#Navigation ul,div#Navigation ul.small_list
should just be
div#Navigation ul

Don't follow your second question. If a UL list is floated then the height is the height of the text contained within.
To remove space between two ul just set padding and margin to 0 (zero)
0
 

Author Comment

by:zachvaldez
ID: 38307219
Set the list. As floated?
0
 
LVL 45

Expert Comment

by:Chris Stanyon
ID: 38307556
If you set a height on a ul, it will be that height no matter how many LIs it contains. You set your UL to a height of 204px so it will be that height even if it only has 1 LI. If you are likely to have several ULs with a different number of LIs, then leave the height out and they will auto adjust their own height (based on the height of the LIs) - this is the normal way of doing things.
0
 

Author Comment

by:zachvaldez
ID: 38307721
If that's the case,all I have to do is remove the height ?
0
 
LVL 45

Expert Comment

by:Chris Stanyon
ID: 38308079
Unless you specifically need it :)
0
 

Author Comment

by:zachvaldez
ID: 38308340
In between ULs and LI, I place a subtitle for that group.. For example roughly just to get the idea..
<div ID = "leftmenu">
<div ID="Navigation">

<h4>
       Students </h4>
<h3> New Students<h3>
  <UL>
  < LI>.....<LI>
 < LI>.....<LI>
<UL>
<h3>Former Students<h3>
  <UL>
      here maybe 10 LI's
<UL>

</div>

</div>

What is the best way to CSS this ? I have 2 divs, the navigation div is inside the leftmenu div.
Is this a design flaw? what can you recommend so I can have better control and spacing issues resolve?
0
 
LVL 45

Accepted Solution

by:
Chris Stanyon earned 1040 total points
ID: 38308349
It's not a design flaw. There may be no need for two divs to wrap the content, but that will depend on what else is going in your code, but it's certainly not wrong.

I can't tell you precisely how to CSS it because I don't know the 'design look' you're after, but as I said earlier, a UL will automatically grow to contain it's LIs. So if you set some CSS like so:

ul { border-top: 1px red; padding:5px; margin-bottom: 20px; }

Open in new window

That will apply a 1px red border and a bottom margin to all ULs on your page. If you only want to target the ones in your #navigation DIV, then you would use this:

#navigation ul { border-top: 1px red; padding:5px; margin-bottom: 20px; }

Open in new window

You don't need to set a height, because they'll already be the height needed to contain the LIs - no matter how many there are.

Hope that makes sense.
0
 

Author Comment

by:zachvaldez
ID: 38312122
Thanks for your help. It opened several opportunites there. By accident, I set the height of UL to Auto and it seemed to picked up correctly.
0
 

Author Closing Comment

by:zachvaldez
ID: 38312141
Pure excellence!
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

621 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question