ok the code is listed below, and when I adjust the css as follows:
.Nav {
color:red;
float:left;
display:inline;}
It wont display inline? What Am I doing wrong? Im sure this is a stupid question.
<head></head>
<body>
<div class="Nav">
<ul>
<li>Home</li>
<li>Sign Up</li>
<li>About</li>
<li>Contact Us</li>
</ul>
</div>
</body>
dont use float and dislay inline at the same time just use `
display:inline-block;
and it will work perfectly fine
i would also recommend you to read this article, it's a short article but helps a lot
click this to read the article
atleast it did help me a lot and cleared my concepts of float and display
It will. Your div is the one with the .Nav class so that div will be displayed inline. Try:
.Nav li{
display:inline;
}
Here is a jsfiddle example
.Nav ul li{
color:red;
display:inline;}
You can put display: inline on li elements, all they will be on a unique line.
As you can see here: http://jsfiddle.net/b31krn9b/
CSS:
.Nav {
color:red;
float:left;
}
.Nav li {
display:inline;
}
Another ways to align:
Using float: http://jsfiddle.net/b31krn9b/1/
Or even display: inline-block (this is better because you can use margin-right and left): http://jsfiddle.net/b31krn9b/2/
The div itself is displayed inline, but since it's the only element inside the body, it has no visible effect.
You need to set it on the li elements:
CSS
div.nav ul li {
float: left; /* All li elements inside the div.nav are floated to left... */
display: inline; /* ...and displayed inline – but it does not make sence,
since a floating element cannot be inline. */
}
HTML
<div class="nav">
<ul>
<li>Home</li>
...
Related
I'm trying to create a drop-down menu. I had it working for a minute.
My code is as follows:
<nav id="nav">
<ul>
<li class="subNav">Some Page1
<ul>
<li>Related Page1<li>
<li>Related Page2<li>
</ul>
<li>
</ul>
</nav>
My CSS is as follows:
#nav li.subNav ul{
display: none;
}
#nav li.subNav:hover ul{
display: block;
}
I have three CSS files that relate to this page. One is basically a web-kit for font, and the other two are bowlerplate.css and my custom file customFile.css. The tag <#nav li.subNav:hover ul> show up in customFile.css, and <#nav li.subNav ul> diplays in bout custom and boilerplate when I check computed styles.
There are two things I wish to fix; the submenu lines up horizontally (I need it to go vertical) and the submenu isn't hidden. I had to nest /li tag around the ul, so that took care of one problem (they're now aligned under the parent tag).
I also noticed that the height and width have changed on my parent li. I understand it expanding to accommodate the list items, but the increased height seems a little odd.
Here's my solution to the above problem
#nav li.subNav:hover ul li {
visibility: visible;
width: 171px;
padding: 0;
cursor: pointer;
float: none !important;
display: block !important;
}
The title probably doesn't actually describe the issue properly. I want to create a menu for my website that is a vertical menu on the left side, and when you hover over an option with sub-options those sub-options pop out to the side (doesn't really matter at the moment). The issue I'm having is that when they pop out they push down all the other options, and I get this navigation bar that doesn't look good at all. If someone could help me fix this so I don't shove everything else out of the way even though they aren't overlapping, that would be appreciated.
The HTML I use.
<ul id="nav">
<li>Work</li>
<li>Imaging
<ul>
<li>Photoshop
<ul>
<li>Link</li>
<li>Link</li>
</ul>
</li>
<li>Illustrator</li>
</ul>
</li>
<li>Home</li>
The CSS I use.
ul {
list-style-type:none;
margin:0;
padding:0;
}
a {
display:block;
width:60px;
}
#nav ul {
display: none;
}
#nav li:hover > ul {
display: block;
position: relative;
float: left;
}
Thanks in advance if someone can help me with this.
that is because your document is having all the elements in a line and will always show them one after the other!
So my advice for you would be to just use
position: absolute;
This way you can align the elements over the document without interefering the current document style and element alignment!
For more: https://developer.mozilla.org/en-US/docs/Web/CSS/position
I would position the ul inside your li absolute.
position:absolute;
When you do this the element will hover above the li-parent. When you try a little with positive and negative margin you will be able to put the hover element next to it parent.
It will be something like this:
#nav li:hover > ul {
display: block;
position: absolute;
float: left;
margin-left:60px;
}
Forgive me if this is incredibly basic, but after researching online for a few minutes, I can't find how to remove the natural indentation from an HTML list. Here is what I have tried with the CSS:
(check out my fiddle)
CSS
ul li {
list-style: none;
margin-left:0;
padding-left:0;
}
HTML
<ul>
<li>There</li>
<li>is</li>
<li>still</li>
<li>an</li>
<li>indent</li>
</ul>
In most browsers, a ul has a padding-left of 40px to allocate spacing for the bullet points.
Simply overwrite the padding. jsFiddle example
ul {
padding:0px;
}
Okay so here is the link to the page I'm working on:
http://students.thenet.ca/jlandon/
As you can see, the list is still displaying vertically instead of horizontally.
CSS:
li { display:inline;
list-style-type:none;
}
#nav { background-color:#c6c7c3;
height:50px;
margin-top:120px;
z-index:2;
}
HTML
<div id="nav">
<ul>
<li><h2>Home</h2></li> <li><h2>About</h2></li> <li><h2>School</h2></li> <li><h2>Workshop</h2></li> <li><h2>Contact</h2></li>
</ul>
</div>
Okay now I see why that wasn't working (H1-6 are blocks) so here is the specifics of what I want the navigation to look like (please help me):
site design http://students.thenet.ca/jlandon/images/sitedesign.png
Why are you using H2 for the navigation elements?
Change them to also display inline, or use an inline element.
h2 is a block element by default, which is what's breaking your lines.
You can fix it by either setting display: inline on the h2s (probably not a great idea) or by replacing the h2s with something else (like just styling the a tag to be the size and font etc you want).
I think a float: left would fix this:
li
{
display:inline;
float: left;
list-style-type:none;
}
You should consider using semantic classes instead of using block elements like h2 in your navigation. If by using the h2 element, you want a bold font with a certain size then you should consider this:
.nav-text, #nav li a {
font-size: 1.25em;
font-weight: bold; }
#nav {
background-color: #c6c7c3;
height: 50px;
margin-top: 120px;
z-index: 2; }
Also notice that I use em instead of pixels. This will help in responsive design if you decide in the future to extend the page to mobile sites.
Your html will something like this:
<div id="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>School</li>
<li>Workshop</li>
<li>Contact</li>
</ul>
</div>
I would like to align the text and input in the LI to be horizontaly aligned with the menu on the left. Here how it looks.
I need the newsletter to be align with the menu on the left.
CSS
#footer .div1{
float:left;
}
#footer ul{
list-style:none;
}
#footer li{
float:left;
padding-left:20px;
font-size:18px;
}
#footer li:first-child{
padding-left:0px;
}
HTML
<div id="footer">
<div class="div1">
<ul>
<li><b>WE ♥ TO NETWORK</b></li>
<li>FACEBOOK</li>
<li>BLOG</li>
<li>CONTACT</li>
<li>NEWSLETTER : <input type="text" name="email" id="emailNl" style="font-family:arial; width:200px; margin:0px; padding:0px;"/> <span id="submitNl" style="cursor:pointer">OK</span></li>
</ul>
</div>
<div style="clear:both"></div>
</div>
Thanks
IMAGE UPDATED!
With padding and margin 0px it's almost there but you can notice a slight difference. :S
UPDATE 2
By changing the float:left of my LI to display:inline-block, now the text is align but the input seems to be like padding-top 2px too much ... I think i'll tweak this to make it fit and see through each browsers.
Your problem is caused by float: left;. Replace it with display: inline-block; and you'll be fine.
Try it yourself: inline-block vs float:left
Try putting it in a jsfiddle. It looks to me like the input tag is trying to put some padding/margin (oh how I always forget which is which) around itself. Try setting those to 0px.
try reset the padding and margin of the element and try vertical-align property - http://www.w3schools.com/cssref/pr_pos_vertical-align.asp
although, I tested, they align just perfectly as it is. below is the preview from firefox
You can try
#footer ul {
list-style: none outside none;
margin: 0;
overflow: auto;
padding: 0;
}
input[type=text]{
padding:0;
margin:0;
}
see if it works.
Don't know if this will look good but this sure does the job.
#emailNl{
margin-top:-3px;
}