How can i use newlines in editor without having annoying spaces in my template?
There is an example of what i mean:
<nav id="navbar">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</nav>
Fiddle1: newlines = annoying spaces
<nav id="navbar">
<ul><li></li><li></li><li></li><li></li></ul>
</nav>
Fiddle2: no newlines = perfect result
You could add float: left;
#navbar ul li {
float: left;
}
Fiddle: http://jsfiddle.net/zo492g3y/1/
A complete guide removing white space between inline-blocks could be found at: Fighting the Space Between Inline Block Elements.
use HTML comment, is another option if you want your code to be readable
<nav id="navbar">
<ul>
<li></li><!--
--><li></li><!--
--><li></li><!--
--><li></li>
</ul>
Pressing the enter key is the same as pressing space, as long as their is no float:left. Hope this helps!
I know this doesn't leave your HTML pretty to read, but will solve the problem without resorting to css hacks etc...
<nav id="navbar">
<ul>
<li></li><li>
</li><li>
</li><li>
</li><li>
</ul>
</nav>
Try it with margin-left: an a negative value
Related
As illustrated in the following screenshot, the <p> element is being displayed on the same level as the <ul> which precedes it. I wish the <p> element to be diplayed underneath the <ul>:
Is there a way that I can control all the elements inside divMain at once? I want all the three <ul> elements and the <p> element to be displayed underneath each other to the left-most side.
HTML code:
<div class="container" id="divMain">
<form method="post" action="add.php">
<ul class = "verticalList">
<li></li>
<li></li>
<li></li>
</ul>
<ul class = "horizontalList">
<li></li>
<li></li>
<li></li>
</ul>
<p>This sentence should appear on a separate line. </p>
<ul class = "verticalList">
<li></li>
<li></li>
<li></li>
</ul>
</form>
</div>
CSS code:
.horizontalList{
float: left;
display: inline;
margin:0px;
padding: 0;
width: 20%;
}
you need a clear:both after the floating elements or display:inline-block for the horizontal elements
You can use the relative position with CSS.
http://www.w3schools.com/css/css_positioning.asp
But if you want an responsive page, use Bootstrap or Foundation. I hope to have helped you with the relative position...
<div class="container" id="divMain">
<form method="post" action="add.php">
<ul class = "verticalList">
<li></li>
<li></li>
<li></li>
</ul>
<ul class = "horizontalList">
<li></li>
<li></li>
<li></li>
</ul>
<p style="display:inline-block; overflow: hidden; clear: both;">This sentence should appear on a separate line. </p>
<ul class = "verticalList">
<li></li>
<li></li>
<li></li>
</ul>
</form>
I dont know the css of the classes but I think the code above will work. Just for debugging you might want to use !important.
form {
display: block
}
this will set the DOM elements inside form one below eachother
http://fiddle.jshell.net/stealthpancakes/jvrqhxdk/5/
I tried to put text in div, but everything after Subtext_1 is displayed in block.
Upper_text_1
Subtext_1
Upper_text_2 Upper_text_3
<nav>
<ul>
<li><div>Upper_text_1</div><div>Subtext_1</div></li>
<li>Upper_text_2</li>
<li>Upper_text_3</li>
</ul>
</nav>
I want something like this:
http://i.imgur.com/rAe2i6H.png
That is because div is a block level tag, you can try sub instead
<nav>
<ul>
<li>Upper_text_1<br /><span>Subtext_1</span></li>
<li>Upper_text_2<br /><span>Subtext_2</span></li>
<li>Upper_text_3<br /><span>Subtext_3</span></li>
</ul>
</nav>
Try this :
<nav>
<ul>
<li><div>Upper_text_1<span>Subtext_1</span></div></li>
<li>Upper_text_2</li>
<li>Upper_text_3</li>
</ul>
</nav>
Div is a block level element. You want an inline element for this case. Try <em> tag (emphasis) or the more generic <span> tag instead. There is a lot of different semantic elements for different purposes - you should find one that fits your content type and use that.
See this page for a full list:
https://developer.mozilla.org/en/docs/Web/Guide/HTML/HTML5/HTML5_element_list#Text-level_semantics
I believe this is what you need, correct me if am wrong or mistaken.
<nav>
<ul>
<li><p>Upper_text_1<br/><sub>Subtext_1</sub></p></li>
<li><p>Upper_text_2</p></li>
<li><p>Upper_text_3</p></li>
</ul>
</nav>
Also add the below CSS code:
nav ul li{
margin: 5px;
display:inline;
}
li p
{
display:inline;
float:left;
margin: 10px;
}
span{
font-size:0.7em;
}
Check the fiddle: http://jsfiddle.net/fu66c6b4/
Hope this helps.
<nav>
<ul>
<li>Upper_text_1</li>
<sub>Subtext_1</sub>
<li>Upper_text_2</li>
<sub>Subtext_2</sub>
<li>Upper_text_3</li>
<sub>Subtext_3</sub>
</ul>
</nav>
I am newbie and I've got a trouble. I have element with four elements and I can't put one on the right side.
My code is here:
<body>
<header>
<div id="topmenu" class="navigation">
<ul class="navul">
<li>FAQ</li>
<li>ABOUT</li>
<li>Next</li>
<li class="rightbutton"><div>Log In/Sign Up</div></li>
</ul>
</div>
</header>
And css is on jfiddle ( I was not able to attach it correctly)
http://jsfiddle.net/EGxWy/2/
Try putting float:right on one li element and display:inline-block on all li elements.
I have some markup and I would like to know if it is proper to surround <li> tags with <div> tags.
<div class="round3">
<ul>
<div class="top"><li class="winner first"></li></div>
<div class="bottom"><li class="winner last"></li></div>
</ul>
</div><!--end round3-->
Thank you for helping.
No, it is not, the only tags that can go directly inside ul elements are li elements.
You can however, place a div inside a li element if you wish.
<ul>
<li><div>Example</div></li>
</ul>
For more information about HTML lists, see the relevant W3 specification section.
It is not possible.
I propose such correction:
<div class="round3">
<ul>
<li class="winner first top"></li>
<li class="winner last bottom"></li>
</ul>
</div><!--end round3-->
I am using HTML Tidy to output pretty HTML source and as a final encoding check.
However it is taking a very simple list such as:
<ul id="navigation">
<li>Summary</li>
<li>Upload</li>
<li>Accounts</li>
</ul>
and converting it to this monstrosity:
<ul id="navigation">
<li style="list-style: none">
</li>
<li id="active">Summary
</li>
<li style="list-style: none">
</li>
<li>Upload
</li>
<li style="list-style: none">
</li>
<li>Accounts
</li>
</ul>
How do I gracefully tell it to leave my list alone?
I have searched these configuration options, however I often find they are not named intuitively or explained properly.
It's actually trying to correct your markup to make it conform to standards, your <li> tags should be around the <a> tags, not the other way around, maybe if you fix up that then it won't try to add extra items to the list.
You can remove the style part though, just modify your css to have:
ul.navigation li
{
list-style: none;
}
The only answer: give it valid markup to start with. The only legal child element of a ul is an li. An a element cannot be a child of a ul.
<ul id="navigation">
<li>Summary</li>
<li>Upload</li>
<li>Accounts</li>
</ul>
If you want the whole li to be clickable, style the a element as display: block:
#navigation li a {
display: block;
}
Your list is invalid markup; an ul element may only contain li elements. Tidy is actually applying the most sensible general approach to fixing such broken markup: it turns any non-li content to an li element for which the list bullter is suppressed.
So manually change markup like
<li>Summary</li>
to
<li>Summary</li>
which is probably what you want. This may require changes to CSS or JavaScript code, if they expect the current markup.
Move your <a> tags into <li>-s:
<li>Summary</li>