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/
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 am trying writing some useful snippets for me,i had already written some basics one in my element.sublime-snippet,but i found in emmet-sublime they have some snippet which multiply the elements.
eg : ul>li*3
Result:
<ul>
<li></li>
<li></li>
<li></li>
</ul>
how can i apply logics in my simple snippet xml code.
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.
I've been watching some 'codecasts' on CSSDeck.com, and I frequently see people typing things like this: ul>li*7>a to create a large amount of HTML very quickly. That code would generate this:
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
As seen on: http://cssdeck.com/labs/creating-sweet-3d-pagination
What plugin is this?
It used to be called Zen Coding, but is now called Emmet.
There are plugins for most editors, including Sublime Text 2 (which I'd recommend if you aren't already sorted for one!)
For Sublime Text if you are using Package Control, it's a simple package install emmet away.
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.