Jump to content

Unordered List


soozyq
 Share

Recommended Posts

I have created a unordered list with each item being a link, but have been unable to increase the space between each item on the list (vertically). At the moment it looks like the spacing below. I want to basically create a space of about 30px between each item. Item 1 Item 2 Item 3 How do I create the space? The list is enclosed in a div.Im sure this is very simple but I would appreciate any input.Thanks

Link to comment
Share on other sites

give the ul a class or id, say 'spacelist' for the purposes of demonstration:#spacelist li {margin: 15px 0;}

Link to comment
Share on other sites

give the ul a class or id, say 'spacelist' for the purposes of demonstration:#spacelist li {margin: 15px 0;}
I tried this but I am obviously doing something wrong as the distance has not changed.
<div class="spacelist_li" id="projectTitles">		<li><a href="young.html" class="li"><span class="li">Young Library</span></a></li>				<li><span class="spacelist_li"><a href="stapleton.html" class="spacelist_li">Stapleton House</a></span></li>				<li><span class="spacelist_li"><a href="towncentre.html" class="spacelist_li">Town Centre Living</a></span></li>

Can you tell from this what I am doing wrong?

Link to comment
Share on other sites

I tried this but I am obviously doing something wrong as the distance has not changed.
<div class="spacelist_li" id="projectTitles">		<li><a href="young.html" class="li"><span class="li">Young Library</span></a></li>				<li><span class="spacelist_li"><a href="stapleton.html" class="spacelist_li">Stapleton House</a></span></li>				<li><span class="spacelist_li"><a href="towncentre.html" class="spacelist_li">Town Centre Living</a></span></li>

Can you tell from this what I am doing wrong?

take the class off the div, and apply it directly to each <li>. And you need to have a tag to open and close the list too. Also, why do you have span's with the same classes as the <a href=>? You could try cleaning it up a bit like this...
<div id="projectTitles"><ul>		<li class="spacelist_li"><a href="young.html">Young Library</a></li>				<li class="spacelist_li"><a href="stapleton.html">Stapleton House</a></li>				<li class="spacelist_li"><a href="towncentre.html">Town Centre Living</a></li></ul>

what does your .li look like?

Edited by thescientist
Link to comment
Share on other sites

take the class off the div, and apply it directly to each <li>. And you need to have a tag to open and close the list too. Also, why do you have span's with the same classes as the <a href=>? You could try cleaning it up a bit like this...
<div id="projectTitles"><ul>		<li class="spacelist_li"><a href="young.html">Young Library</a></li>				<li class="spacelist_li"><a href="stapleton.html">Stapleton House</a></li>				<li class="spacelist_li"><a href="towncentre.html">Town Centre Living</a></li></ul>

what does your .li look like?

#spacelist_li {	margin: 300px 0;	list-style-position: inside;	list-style-type: disc;}

Im still trying to learn this so sorry for the silly questions.

Link to comment
Share on other sites

sorry, try it like this

<div id="projectTitles"><ul id="spacelist">		<li class="spacelist_li"><a href="young.html">Young Library</a></li>				<li class="spacelist_li"><a href="stapleton.html">Stapleton House</a></li>				<li class="spacelist_li"><a href="towncentre.html">Town Centre Living</a></li></ul>

Link to comment
Share on other sites

You don't need to give the li the class spacelist_, because we only use spacelist to grab the right ul and then select the li that are children of it with#spacelist li {margin: 15x 0;}

Link to comment
Share on other sites

sorry, try it like this
<div id="projectTitles"><ul id="spacelist">		<li class="spacelist_li"><a href="young.html">Young Library</a></li>				<li class="spacelist_li"><a href="stapleton.html">Stapleton House</a></li>				<li class="spacelist_li"><a href="towncentre.html">Town Centre Living</a></li></ul>

I have changed to the above and thanks for the help. This still doesn't seem to have affected the spacing in the list however. The margin I has shown simply increases the space to the top of the div based on the css
#spacelist li {margin: 15px 0;}

I think he css is still the problem.

Link to comment
Share on other sites

Can you post a link, that would help a lot

Link to comment
Share on other sites

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><title>test</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css">#spacelist{}#spacelist li {margin: 15px 0;} </style></head><body><div id="projectTitles"><ul id="spacelist">		<li><a href="young.html">Young Library</a></li>				<li><a href="stapleton.html">Stapleton House</a></li>				<li><a href="towncentre.html">Town Centre Living</a></li></ul></div></body></html>

Link to comment
Share on other sites

as a small, you will want to keep your style's (the code in between the <style></style> tags) seperate from your HTML code. it keeps content separate from styles, keeps load times down, and when you want to change a style to your entire site, you only have to change the code in one file. if you want, i can show you how to set it up with this example so you can start getting in the habit right away! trust me, as your sites get bigger, you'll want to, and its dead simple to do. :)

Link to comment
Share on other sites

as a small, you will want to keep your style's (the code in between the <style></style> tags) seperate from your HTML code. it keeps content separate from styles, keeps load times down, and when you want to change a style to your entire site, you only have to change the code in one file. if you want, i can show you how to set it up with this example so you can start getting in the habit right away! trust me, as your sites get bigger, you'll want to, and its dead simple to do. :)
I have started using CSS but only just. I am trying to teach myself all of this so it is certainly taking me time. I would appreciate any help you can give. I have to sign off now so thanks for all your help.
Link to comment
Share on other sites

to seperate CSS from HTML, using this example.1) Create a separate text file and save it with the extension .css. For example, style.css. For simplicity, keep this file in the same folder as your .html pages.2) Put only style elements in this page. So using this example, this is the ONLY code you will want in your .css file

#spacelist{}#spacelist li{margin: 15px 0;}

3) Modify your HTML page to remove the style code and instead replace it with a link to the .css file, using this<link rel="stylesheet" type="text/css" href="style.css">So your final HTML code would look like this

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><title>test</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><link rel="stylesheet" type="text/css" href="style.css"></head><body><div id="projectTitles"><ul id="spacelist">		<li><a href="young.html">Young Library</a></li>				<li><a href="stapleton.html">Stapleton House</a></li>				<li><a href="towncentre.html">Town Centre Living</a></li></ul></div></body></html>

that's it!oh yeah, always make sure to use doctype (the first line of code in the above HTML code) in all your pages and validate often while developing. A good rule of thumb is to always use a strict doctype and test with Firefox. There are really good developer add-ons for FF; especially the one that lets you validate right off the page, both HTML and CSS. Good luck in your HTML adventures! :)

Edited by thescientist
Link to comment
Share on other sites

The best thing about FireFox is that you can right click on a page and view and change the source and the CSS of your or any other site. You can't save the changes from there automatically, but you can mess around endlessly and just copy and paste the code to your editor. It makes solving problems much much quicker. This is a feature of most new browsers, but it is most user friendly in FF.

Link to comment
Share on other sites

It appears you have this sorted out, but I think the more appropriate approach would have been to use line-height in your list item tag style.(but that's just a technicality - as long as it's working in the browsers you need to support) :)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...