How can I make an horizontal menu in my website? I write this code and my menu appears in vertical. Thanks.
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
If you want, you could use an asp:menu
http://msdn.microsoft.com/en-us/library/ecs0x9w5%28v=vs.100%29.aspx
(This question was previously tagged with C#, so I'm assuming its asp.net - if its just html it won't work)
Otherwise if you just want a list of links, you could put them in a table in the same row
<table>
<tr>
<td>item1</td>
<td>item2</td>
..
</tr>
</table>
Use either li{display:inline-block;} or li {float:left} or that table method you've got in previous answer. All work.
Related
so i am trying to fetch news from an API, everything is working fine so far, except that i got some issues with the format.
From the API the News are in JSON format, i already got them visible on the page and it looks alright, except for <ul> and <li> items
When using a list, the dots will be over the text, since its closing the tags right after. I have been googling for a while and i haven't found a proper solution, using list-style didn't help.
Here is the preg_replace i use for the list items:
/*[list]*/
$tmpText = preg_replace('#\[list\](.*)\[/list\]#isU', '<ul>$1</ul>', $tmpText);
/*[*]*/
$tmpText = preg_replace('#\[[*]](.*)#isU', '<li>$1</li>', $tmpText);
And this is the output on the page i get with this:
<ul>
<li></li> Halloween content implementation
<li></li> Barber implementation and polishing
<li></li> Additional work on modular vehicles
<li></li> Finishing touches on the ATM interface
<li></li> Implementation of halloween gestures
<li></li> Final preparations for permadeath testing
<li></li> Creation and implementation of new admin commands
<li></li> Additional work on the farming system
<li></li> Bugfixing
</ul>
I am not really sure how to fix this, or how i would get the text between the tags, since its input is always different, i would appreciate some tips
Never mind I just solved my own issue, I had a huge brain fart here.
This is the solution I thought about
/*[list]*/
$tmpText = preg_replace('#\[list\](.*)\[/list\]#isU', '<ul>$1</li></ul>', $tmpText);
/*[*]*/
$tmpText = preg_replace('#\[[*]](.*)#isU', '<li>$1', $tmpText);
i have html code
<ul>
<li></li>
<li></li>
...
<li></li>
</ul>
How to create template list as picture
i.stack.imgur.com/9jTbC.jpg
Any idea, Thanks
I believe you're trying to achieve masonry template look. This is might be helpful for you: http://masonry.desandro.com/
How would I go about sanitizing nested lists away once a user submits some HTML markup.
The list is created with execCommand('insertUnorderedList',false,null)
For some reason, firefox will nest lists when this is used on a line within a li while other browsers simply remove the list (Which is what I want).
I would like to remove the nesting to prevent browser inconsistencies with the submitted html.
example:
<ul>
<li>
<ul>
<li></li>
</ul>
</li>
</ul>
I would like to remove the inner ul to get
<ul>
<li>
</li>
</ul>
EDIT: This is user input I need to sanitize.
$(function(){
$('li ul').remove();
})
I am in the process of creating two columns. In the first column will be a picture and in the second column will be a number associated with how many times the picture is clicked(basically). So I need the two to line up, but I also want the images to line up with one another as well as the number to line up with one another. So my questions is is it better to do this in a table or to create two divs, put the list items in each div and then float them left next to one another?
If there is a better way I am open.
Option 1
<div>
<div style="float:left">
<ul>
<li><img></li>
<li><img></li>
<li><img></li>
</ul>
</div>
<div style="float:left">
<ul>
<li><value></li>
<li><value></li>
<li><value></li>
</ul>
</div>
</div>
Option 2
<table>
<tr>
<td><img></td>
<td><value></td>
</tr>
<tr>
<td><img></td>
<td><value></td>
</tr>
<tr>
<td><img></td>
<td><value></td>
</tr>
</table>
I am sure there is a better way of doing this. I think these both would work, but it seems like there should be something better. Especially because I will have to so a bunch of CSS to line them all up and make them functionable.
Final result:
CSS
img{
float:left;
clear:left;
}
span{
clear:right;
float:right;
}
HTML
<ul>
<li><img /><span>value</span></li>
<li><img /><span>value</span></li>
<li><img /><span>value</span></li>
<li><img /><span>value</span></li>
</ul>
I would keep just one list with the images and values in the same list item, ie:
<li><img /><span>value</span></li>
<li><img /><span>value</span></li>
<li><img /><span>value</span></li>
This way the value will always be alongside the image, and can be styled directly using the span.
A table shouldn't be used for this. If the above method is unsuitable I can write you some jquery to line up two lists, but it would be much neater to use the above method imo.
Use the table. It is simpler to understand and maintain. Makes it easier to vertically align items if you images are of varing heights.
w3 html validator will tell me that this is wrong:
<a href="http://www.bla.com>
<div>something</div>
<ul>
<li>first</li>
<li>second</li>
</ul>
</a>
in order to get a validated as HTML 4 strict (or just for writing things correctly)
What is the better way to write it:
no div's and ul's - just span's with classes that I need to design:
<a href="http://www.bla.com>
<span class="div">something</span>
<span class="ul">
<span class="li">first</span>
<span class="li">second</span>
</span>
</a>
without <a>
<div id="actAsLink" onclick="javascript:window.open('http://www.bla.com')>
<div>something</div>
<ul>
<li>first</li>
<li>second</li>
</ul>
</div>
=========================
sorry that the code doesn't look at its best - I had troubles handling the "code sampler" on this website.
I vote for option 1: Anchor + descriptive class names:
The link will work, even when JavaScript or pop-ups are disabled. (this is the most important feature to me.)
The class attributes describe their role, as a substitute for the <ul>, <li> elements. These elements can be styled using CSS.
Your structure looks a bit odd though: Why do you want to nest a list in an anchor?
Really you should have <a> tags inside each of the div, ul and li tags:
<div></div>
<ul>
<li>first</li>
<li>second</li>
</ul>
This is valid markup, but obviously with the downside that you have three links instead of one. I'm not sure why you want to have a list inside a link though - it's more common to see a list of links.