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;
}
Related
can any body explain me the out put, which my code is genrating, as it
driving me nuts, there is no syntax error, i am following the tutorial
on you tube and i was able to genrate the right out put with this
code, but today i decided that i will understood this code fully, and
it driving me crazy
**Note: No syntax error, just looking for explanation about the out put, and please read the comment in the code
First look at the code html**
<html>
<head>
<title>TODO supply a title</title>
<link rel="stylesheet" href="menu.css"></link>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<label for="show-menu" class="show-menu">Show Menu</label>
<input type="checkbox" id="show-menu" >
<ul id="menu">
<li >Home</li>
//This section is giving me trouble, please see below i explain my problem in detail there
<li >about
<ul class="hidden">
<li >who are we</li>
<li >what we do</li>
</ul>
</li>
//This section is giving me trouble, please see below i explain my problem in detail there.
<li >portfolio
<ul class="hidden">
<li >photography</li>
<li >web & interface design</li>
<li >illustration</li>
</ul>
</li>
<li >news</li>
<li >contacts</li>
</ul>
</body>
</html>
and this is my css
/*strip styling from the list*/
ul{
margin:0;
padding:0;
list-style-type:none;
position:absolute;
}
li{
display:inline-block;
float:left;
margin-right:1px;
}
//only this section of the code is driving me crazy, and in the explanation i type this section again and again. Please see below in there i explain my problem in detail.
li a {
display:block;
}
Problem if you look at the out put in this link
https://codepen.io/arif_suhail_123/pen/pwdYXp
i am confused about this-- look at the about section, i was expecting who we are and what we do, to appear as block element, as i gave li a {display:block} but they dont, they are appearing as inline block element or inline element, i am not sure,
but i get more confused when i see the next portion portfolio, as in there, all the li are appearing as block element, means photography, web & interface design and illustration appear on the next line, which i was accepting, after giving this style li a {display:block}
and after that i completly lost my mind when i added min-width property,
see the link https://codepen.io/arif_suhail_123/pen/ZyaZEj i changed nothing, i only added in li a {} min-width, so my style is this li a {display:block; min-width:140px;}
i still have the problem, what we do appear under the portfolio, this problem i desribed already(in the last paragraph), but after adding min-width:140px; i have new problem; if you look at the out put, web & interface design appear under the news, first of all i did not expected it to appear there, and second of all if you read the html code web & interface design is second li means why it appearing in this order first li -- photography, than third li -- illustration and second li -- web & design, under the news??
Can any body please explain me,
and last of all, what i understand about the absolute positioning is this, that it take the element out of normal flow, and put it back at the given position, i ran one example, and it confirm what i think may be i am wrong but have look https://codepen.io/arif_suhail_123/pen/LLOaXv
on this link third box did not appear, as i was expecting it, not to appear,
and about the block element, i understand that they suppose to appear on the new line.
see these two picture i think my question will become more clear.
Absolute Positioning - Take the Width of Parent
Ok so I looked through your code and I made a small example out of it. I took out some things to make the example more clear (and because of width limitations in these posts).
Ok, first, look at the background colors I put on both of the <ul> lists. Your sub-lists are in red. Your main <ul> is in yellow.
Now you are correct in saying that position: absolute; takes the element out of the "flow" of other elements in order to display them as usual. Absolute positioning takes a lot of special attention.
Run the code and look at the words "Who are we". Now this makes you think, why does "photograpy" appear next to it? What happened to "what we do"? Its behind it. The reason this occurs is because both of those lists are positioned absolutely under their parent element. Without giving anything like top or left they are just going to overlap eachother and the latter ends up displaying ontop of the previous list. Absolutely positioned elements don't care what is next to them or if they overlap something. They go where ever you tell them to and thats typically what absolute positioning is for. You tell it to break away from normal flow, and you give it a specific location to appear.
Play around with the code, delete "photography" and "illustration" and run it again. You'll see that "what we do" was there all along, just behind it.
Also see Russell's Answer.
ul{
margin:0;
padding:0;
list-style-type:none;
position:absolute;
background-color: yellow;
}
ul ul{
display: block;
padding: 5px;
background-color: red;
}
#secondList{
background-color: pink;
}
ul li{
float:left;
margin: 5px;
width: 120px;
}
ul ul li a{
display: block;
}
<ul id="menu">
<li>Home</li>
<li>about
<ul class="hidden">
<li>who are we</li>
<li>what we do</li>
</ul>
</li>
<li >portfolio
<ul class="hidden" id="secondList">
<li>photography</li>
<li>illustration</li>
</ul>
</li>
<li>news</li>
</ul>
i am confused about this-- look at the about section, i was expecting who we are and what we do, to appear as block element, as i gave li a {display:block} but they dont, they are appearing as inline block element or inline element, i am not sure,
They do appear as block elements. I think the 'problem' is that you have li declared as inline-block elements. So you have block elements in a container set to inline block which effectively makes them display as inline-block.
but i get more confused when i see the next portion portfolio, as in there, all the li are appearing as block element, means photography, web & interface design and illustration appear on the next line, which i was accepting, after giving this style
This is being displayed the same, but the pen you entered has some kind of arbitrary width assigned to it. I'm not sure if it's because of the viewport settings or not, but try shortening some of the link names and you'll see it's actually displaying them the same as the other list. IE inline-block just like was specified.
Can any body please explain me, and last of all, what i understand about the absolute positioning is this, that it take the element out of normal flow, and put it back at the given position
Absolute positioning takes the element out of normal flow and positions it relative to it first positioned parent. The browser does not set aside space for the element either.
https://developer.mozilla.org/en-US/docs/Web/CSS/position
I'm not 100% sure if I understood the problem but I'll give it a shot:
position: absolute;
makes the element ignore every single element. That is what makes them on top of each others. It just displays whereever you tell it to display. Wich is in the top left corner by default. And that's also why there is an
z-index: ...;
the z-index indicates wich layer the element is displayed on, for example z-index: -10; makes it on layer -10 and an element with z-index -9 would display on top I think(pretty sure, otherwise its the opposite) there are infinite layers btw
Hope this is what you were looking for
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 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.
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.
How can I style one line of text in u nav bar with two different font sizes??
In my html I have:
<nav>
<ul>
<li><a heref="#">Home</a></li>
<li><a heref="#">About</a></li>
<li><a heref="#">Products</a></li>
<li><a heref="#">Stockists</a></li>
<li><a heref="#">Blog <em>(a pinch of psalt)</em></a></li>
<li><a heref="#">Contact</a></li>
</ul>
</nav>
Where I have
<li><a heref="#">Blog <em>(a pinch of psalt)</em></a></li>
I want Blog to be 35px and (a pinch of psalt) to be say 15px. I have used child selectors to target each of the nav elements to style for colour, font size etc but am unsure of how to target two separate elements on this one line in my css.
Just .nav ul li a and .nav ul li a em . If this is what you are looking for
Add a <span> to your HTML and give it a class which will allow you to target it with CSS. For example:
<li><a heref="#"><span class="big">Blog</span> <em>(a pinch of psalt)</em></a></li>
And CSS:
nav li .big {
font-size: 35px;
}
You already have an <em> tag around the remaining text (or you can target nav li a with a "default" text size), so that's the only HTML you will need to add. Just keep in mind that you should be consistent.
On another note.
Answer to my google search for other non situations.
The below CSS class definition
font.yellow {
color:yellow
}
works seamlessly when used like:
<p class"blue">
blue text here
<font class="yellow">yellow text</font>
still blue text here
</p>