Forum Moderators: not2easy
As of right now, my page is XHTML valid.
However when I try to space out two items in my menu box, it displays fine in all browsers, but is not valid XHTML.
My problem is simple...
I want the first item in my menu to have a little bit of space from the top. Right now it is way too close to the top of the menu. I want it to display like I used a <p> tag before the first menu item.
Then I would like to create one more space between the first and second list items..again as if I used a <p> tag.
Here is my coding for the first two items in my menu:
<div id="menu">
<ul>
<li><?php _e('Subscribe');?><form action="http:www.link.com" method="post" id="GRSubscribeForm">
<table><tr>
<td><label for="GRCategory2">Name</label>:</td>
<td><input type="text" name="category2" size="14" id="GRCategory2" /></td>
</tr><tr>
<td><label for="GRCategory3">E-Mail</label>:</td>
<td><input type="text" name="category3" size="14" id="GRCategory3" /></td>
</tr></table>
<input type="submit" value="Subscribe Now!" />
<input type="hidden" name="category1" value="elinks" />
<input type="hidden" name="confirmation" value="http://www.link.com" />
<input type="hidden" name="error_page" value="" />
<input type="hidden" name="misc" value="" />
<input type="hidden" name="ref" value="001" />
</form></li></ul>
<ul>
<li><?php _e('Categories');?>
<ul>
<?php list_cats(0, '', 'name', 'asc', '', 1, 0, 1, 1, 1, 1, 0,'','','','','')?>
</ul>
</li>
If not, can you post a version of the PHP output that would would actually get sent to a browser? Then it'd be easier to see what you are trying to accomplish. Or maybe someone who's been working with PHP for more than just a couple months can help...
PS - I noticed two errors in your code that I assume are just typos when you were converting to "postable" code. The first is the form action url, it's missing the // after the "http:". The second is the line that reads:
<label for="GRCategory3">
I assume you mean this, as I think "for" would be an invalid attribute:
<label form="GRCategory3">
I altered the form attributes because you can't post links on this forum. So the form is going to be a little off. Thx though.
"Based on your post, it seems like you need to create a separate css class of list items (<LI> tags) and give that class some top-padding, or additional line-height, but it's hard to say for sure because I can't tell what some of your PHP code is doing. If this sounds like a reasonable suggestion, say so, and i'll type out the details for you."
Yes that is exactly what I need to do.
I need a seperate class of list items, but I am not sure how to do it.
If you could type out the code for me that would be very helpful.
Thx
I have typed out what I believe is the code you are looking for. At the very least, I've shown you two options for a list item <LI> css class (line-height and padding-top) that you can use. I would suggest deleting whichever of the two you decide not to use. To increase the spacing on the line-height option, just use a percentage above 100. To fiddle with the padding option, just increase or decrease the number after padding-top.
Also, I added a closing tag </li> to the end of the line where I added the class="spaced-out", this code just didn't make any sense without that closing tag. sorry if that part is incorrect.
I'm not sure, but it also looks like you might have put <ul>'s in some places where you need <li>'s. are you sure you mean to have three unordered lists in this code?
Finally, I'm not sure which doctype you are using, that could make a difference here, and I couldn't test my solution to see if it validates because of the php stuff that I'm not sure what the output will look like.
<html>
<head>
<title>Test.</title>
<style type="text/css">
.spaced-out {
padding-top: 10px;
line-height: 100%;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><form action="http://www.link.com" method="post" id="GRSubscribeForm">
<table><tr>
<td><label form="GRCategory2">Name</label>:</td>
<td><input type="text" name="category2" size="14" id="GRCategory2" /></td>
</tr><tr>
<td><label form="GRCategory3">E-Mail</label>:</td>
<td><input type="text" name="category3" size="14" id="GRCategory3" /></td>
</tr></table>
<input type="submit" value="Subscribe Now!" />
<input type="hidden" name="category1" value="elinks" />
<input type="hidden" name="confirmation" value="http://www.link.com" />
<input type="hidden" name="error_page" value="" />
<input type="hidden" name="misc" value="" />
<input type="hidden" name="ref" value="001" />
</form></li></ul>
<ul>
<li class="spaced-out"><?php _e('Categories');?></li>
<ul>
<?php list_cats(0, '', 'name', 'asc', '', 1, 0, 1, 1, 1, 1, 0,'','','','','')?>
</ul>
</li>
</body>
</html>
Thank you for the help
I assume you mean this, as I think "for" would be an invalid attribute:
for is the correct attribute: reference [w3.org]
The for attribute associates a label with another control explicitly: the value of the for attribute must be the same as the value of the id attribute of the associated control element. More than one LABEL may be associated with the same control by creating multiple references via the for attribute.
Jasont your code in the first post seems to be ok apart from
<ul>
<?php list_cats(0, '', 'name', 'asc', '', 1, 0, 1, 1, 1, 1, 0,'','','','','')?>
</ul>
Anyhow the way to create space between the <li> (menu) items would be to use margins on the <li>'s themselves. The <form> element itself has default margins too so you may want to zero it's margins so you are working from a consistent base.
e.g.
form {margin: 0;}
li {margin: 40px 0;}
Suzy
