I am creating my webpage, using HTML5 (but possibly what I am asking has nothing to do with 5 spicificaly).
I am trying to have a indent there, like,
<ol>
<li> <fontspec from css>title</fontspec from css> detail about title
</li>
<li>..</li>
...
</ol>
What I want is the "detail about title" should appear in the next line (I am using br for that), and will be intended; as
1. title
detail about title
I can have the effect using space   , but then I have to remember all the number of space I am entering, for all the page. Is there any tag in html that will do these things for me?
EDIT:
Thanks for your reply, indent is working, but as normal to <p>, this is not writing to the next line, but taking one line extra gap. Its now coming as:
1. title
detail about title
EDIT2
Here is the snippet from actual page:
In Html:
<ol>
<li>
<item>title</item><p class="indent">details about title</p>
</li>
</ol>
in css:
item{
font-size :120%;
color :#096cdb;
font-weight : bold;
}
.indent{
margin-left: 20px;
}
*EDIT as jukka's comment *
I have realized theat item is not html tag. w3c validator is giving error, though chrome is rendering it as my intention. I tried to put h4 instead of item, but it is also taking space of next line. So, what is the way out?
EDIT:
solved the job.
I have defined in css:
dt.item{
font-size :120%;
color :#096cdb;
font-weight : bold;
}
and then did:
<li>
<dl>
<dt class="item">title</dt>
<dd>details about title</dd>
</dl>
</li>
This has the output I am looking for, and is also validated by w3c.
There is. You could use definition list;
<ol>
<li>
<dl>
<dt><fontspec from css>title</fontspec from css></dt>
<dd>detail about title</dd>
<dl>
</li>
<li>..</li>
</ol>
Assuming that the real markup has something like
<li> <span class=title>title</span> detail about title</li>
and, for definiteness, that you wish to apply the same styling principle to all li elements, you can make the span element rendered as a block (causing line break after it) and set a negative first-line indent (text-indent property) and the corresponding positive left padding on the li elements. This means that in li elements, any lines except the first one will be indented by the amount you set. In the following example, the amount equals the size of the font:
<style>
.title { display: block; }
li { text-indent: -1em; padding-left: 1em; }
</style>
First, let's give it a class.
<p class="indent">detail about title</p>
Afterwards, we'll use CSS to set a margin to the left of the text.
.indent {
margin-left: 20px;
}
That should give you an indent. Adjust accordingly :)
Note that by using a paragraph element, there's no need for a line break anymore.
Related
I'm writing a code for my website in html.when I use < a tag as below its not working (bad).
<div id="column">
<div class="subnav">
<li>Introduction To File</li>
<li>File Access Mode</li>
<li>Error Handling</li>
<li>Closing File</li>
<li>End of File</li>
<li>fcloseall() vs exit()</li>
<li>getchar() and putchar()</li>
<li>getc() and putc()</li>
<li>fputc() and fgetc()</li>
<li>fgets()</li>
</div>
</div>
NOTE: when I click on Introduction To File i am not sent to Introduction To File.html page(bad) but, when i insert
<div class="clear"></div>
then i m sent to Introduction To File.html page and the problem is after adding "clear" some unwanted space seems to be added which is bad.
Please help to find where i went wrong?
Your HTML is invalid. <li> elements cannot be child elements of <div>. They must be enclosed within an <ul>
Also, you need to encode the spaces in your URL to %20. That is the character encoding for spaces. Otherwise it will be misinterpreted as you have found.
URL Encoding
After looking at the link you provided in the comment, The issue is simple. You have a div with id container and this div is overlaying on your left menu's. So its like a invisible wrapper above the left menu. So you will never be able to click the anchor tags. Place this CSS rule in your code and it must work
Here you already have this
#header, #topbar, #topnav, #breadcrumb, #container, #footer, #copyright {
position: initial;
margin: 0 auto 0;
display: block;
width: 96%;
}
Add this CSS rule to overwrite the above position:relative rule.
#container {
position: initial;
}
with the above code the overlapping is removed and you are able to click the links.
For a quick check, paste this in your browser console and you can see the links are clickable.
$('#container').css('position','initial');
I've looked at various solutions in regards to this question, but they don't seem to apply.
This is my simple HTML code:
<ul>
<li>Home</li>
<li>Games</li>
<li>Trivia</li>
</ul>
How do I increase the space between the text and the line underneath it?
Use <br> or line-height css rules or simply do that to <li> css:
li
{ display:block;
height:XXXX;
}
Add this to your css:
li {
margin-bottom:5px;
}
Change 5px accordingly.
There are actually three or more ways.. here are the best three:
1. make that will make a brake between them, like you just hitted enter key.
2. You can use li{padding-top:10px;padding-bottom:10px;} or just in html using
ul>
li style="padding-top:10px;padding-bottom:10px;">Home
You know what I mean, I cant write it correctly, cause it will do ul in that post..
now, the third should be same as padding, but use "margin" instead
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 7 years ago.
When writing clean and well-readable code in html, how to handle linebreaks and spaces
for example if i use break for the next line there is an extra space in between
<style type="text/css">
a {margin:0px; border:1px solid #666; padding:10px; text-decoration:none;}
</style>
<div>
Test 1Test 2 <!-- SAME LINE -->
Test 3 <!-- NEW LINE -->
Test 4
</div>
jsFiddle
so what should i do,
is there an standard way to handle this or i just should write all the html code in 1 line if i don't want the space and breaks between tags to act like this
EDIT:
Thanks guys but i already know extra spaces are shrinked into one and how (enter) acts, the problem is i don't want enter to act like that (put an space between my tags because then i have to hande that space in my style)
, so i don't have to write my code in the same line (i want to write it clean and readable)
EDIT 2:
I think i have to clear the question a bit more
I need this code:
<div>
Test 1
Test 2
Test 3
</div>
to be shown (seen by user) and act like this code: (no extra space in between because of the line breaks or spaces)
<div>
Test 1Test 2Test 3
</div>
this extra space makes me a lot of trouble,
is there a solution for this? maybe styling the body to don't count space and enters "between tags (not between the text inside tags of course)" as space in the result?
THE SOLUTION
By reading chiefGui's answer on the last part he mentioned float,
so just by adding float: left; to my code above my problem solved
Online: jsFiddle
Code:
<style type="text/css">
a {float:left; margin:0px; border:1px solid #666; padding:10px; text-decoration:none;}
</style>
<div>
Test 1Test 2 <!-- SAME LINE -->
Test 3 <!-- NEW LINE -->
Test 4
</div>
UPDATE (ANOTHER SOLUTION):
i tried another methods and i think display:table-cell; is an answer too and maybe its even better because we don't need to clear after that
the only downside is it will not work on IE 7 and earlier versions, although i think it is manageable with a simple lt IE 8 hack
jsFiddle
The most semantic way to break a line with pure HTML is using <br/> tag.
See:
<style type="text/css">
a {margin:0px; border:1px solid #666; padding:10px; text-decoration:none;}
</style>
<div>
Test 1Test 2<br />
Test 3<br />
Test 4
</div>
There is a lot of prejudice about <br/>, but in this case you can use without problems.
Updated
When you have a list of items like you showed to us, firstly, the right thing to do is put all the links in a list like this:
<ul>
<li>
Link 1
</li>
<li>
Link 2
</li>
<li>
Link 3
</li>
<li>
Link 4
</li>
</ul>
Secondly, to align them on the same line, use the display: inline; property. See:
ul li {
display: inline-block;
}
Or, if you wish, depending of your code, you can float the elements. Look:
ul li {
float: left;
}
Multiple whitespaces (space, enter, tab, etc.) are shrinked to a single space by browser. The only exceptions are:
Tag "pre":
<pre>
Your text with original spacing
</pre>
And &... things like:
A B(this will have two spaces between A & B)
So in your case: link1(no space)link2(enter)link3(enter)link4 is essentially link1link2 link3 link4
And if you want to force newline - use <br> tag.
There's no problem in writing the code on more than one line. Just take care if you set a block-element to something like:
div {
display:inline-block;
}
because then the whitespaces between the elements are shown in the browser.
Multiple whitespace characters are squashed together to one (if not specified otherwise).
So your only option is to write all links on a single line.
use ul li is good way to create tabs like
HTML
<div>
<ul>
<li>Test 1</li>
<li>Test 2</li>
<li>Test 3</li>
<li>Test 4</li>
</ul>
</div>
css
a {
margin: 0px;
border: 1px solid #666;
padding: 10px;
text-decoration: none;
background: #efefef;
font-size: 12px;
font-family: Arial, sans-serif;
color: #000;
}
ul li{
display:inline;
}
for manage space margin is better way
You can also use html comments:
<div><!--
-->Test 1<!--
-->Test 2<!--
-->Test 3<!--
--></div>
It's readable for humans and all whitespaces are commented out for html parsers.
I wrote my code here but it won't give space
<font color="red"><h3>Recommendation</h3></font>
<font color="red"><h3>Review Mining</h3></font>
<font color="red"><h3>Generate Graph</h3></font>
<font color="red"><h3>Sign out</h3></font>
i need a output like this
Recommendation Review Mining Generate Graph Signout
There are several problems in your code:
The font tag - Don't use this, it's ugly, deprecated and altogether useless. Style your elements with css.
A block-level element h3 inside an inline element a*. This is invalid HTML and makes no sense semantically.
A h3 is meant to be a headline, it does not logically fit into an anchor element.
h3 produce linebreaks and thus all your links are put on a single line each.
Depending on what exactly you want to do, this markup is more suited:
<!-- Use an unordered list for your anchor elements-->
<ul class="mylinks">
<li>Recommendation<li>
<li>Review Mining<li>
<li><a href="rank.jsp" >Generate Graph</a><li>
<li><a href="index1.jsp" >Sign out</a><li>
</ul>
and the css accordingly
<!-- put this in the <head> of your html document -->
<style type="text/css">
.mylinks li{
float:left; /* Fit all your links nicely in one line*/
margin:0 5px; /* Give them to the left and right a little room to breathe */
/* You can adjust the space by modifying the 5px value, */
/* the 0 modifies the top/bottom spacing */
}
.mylinks a{
color:red; /* fancy red color for your links*/
}
</style>
*: well at least in HTML4. The question still remains whether such a kind of tag nesting makes sense.
The problem is that you are using heading tags, which by default have a line wrap after them.
To change this, you can set the display CSS property which will align the element in with other elements:
h3 {
display: inline;
}
You might reconsider using the <h3> altogether. It is appropriate as a heading for other content, not for navigation, in general. I also recommend dropping the <font> tag. You don't need it. You can, and should, use CSS for styling.
Try Using: unordered listed inside a div.
<!--HTML-->
<div id="Navigation">
<ul>
<li>Recommendation</li>
<li>Review Mining</li>
<li>Generate Graph</li>
<li>Sign out</li>
</ul>
</div>
<!--CSS-->
#Navigation
{
color: #9000A1;
font-family:"Times New Roman", Times, serif;
}
Whenever I stick TextArea inside 'li' tag in ordered list, the number for that 'li' appears next to bottom-left corner of the TextArea instead of top-left. Is there any fix? Can't seem to find it anywhere on the net...
Example:
<ol>
<li>Coffee</li>
<li>
<TextArea></TextArea>
</li>
<li>Milk</li>
</ol>
Will output something like:
Thanks for help... I seriously don't have nerve to css^^
textarea {
vertical-align: top;
}
jsFiddle Example