Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 7 years ago.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Improve this question
body {
font-family: verdana;
}
ul {
list-style-type: none;
margin: 0px;
padding: 0px;
overflow: hidden; /*1.Why after deleting this line the menu diappear？*/
background-color: #666;
}
ul li {
float: left; /*2.Why after deleting the menu become a column shape？*/
}
ul li a {
display: inline-block; /*3.Why after deleting the menu become smaller？*/
color: white;
padding: 14px 16px;
text-decoration: none;
text-align: center;
}
ul li a:hover {
background-color: #111;
}
<!DOCTYPE html>
<html>
<body>
<h2>Menu Demo 2:</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>Contact</li>
</ul>
</body>
</html>
I am a newbie in CSS. This is just a very simple menu demo, but I thought for 3 hours and still didn't understand it. I have put my 3 questions in the code, that is:-
[1] Why did I delete that line 'overflow: hidden;' in 'ul' tag and then the menu just disappear?
[2] Why after deleting the line 'float: left;' in 'li' tage then the whole menu become a column shape？I think below that line I set 'a' tag as 'display:- inline-block'...... And what is the use for 'float: left' here?
[3] Why did I change 'display: inline-block' to 'display: inline', and then the whole menu become smaller and padding-top & padding-bottom for every 'a' tag doesn't work?
The overflow: hidden contains the floated lis inside the ul by creating a blocking context, there is a in-depth explanation here:
Adding CSS border changes positioning in HTML5 webpage
The float: left pulls everything over to the left hand side, and in your case in a line, without a float: left or right the default is none which means elements will just stack which is why you're getting a column style layout.
The inline-block, or a block in other uses, makes the element incorporate the padding, in the example you provided, into its height. For example, if you had text 10px high and 20px padding on the top and bottom, the element would be 10px as the padding would get ignored, with adding a display type of block or inline-block this takes it into account and renders at a height of 50px.
Related
This question already has answers here:
Why is this inline-block element pushed downward?
(8 answers)
Closed 1 year ago.
My problem and the reason of it:
I have this html:
<div class="container">
List of anchors:
First child
Second child
</div>
and these styles:
.child {
text-decoration: none;
color: red;
overflow: hidden;
display: inline-block;
}
But, for some reason, the anchors it strangely moves up, you can see it here.
And, I found out that this problem happens because of the overflow property, i tried to remove it and this is what I get, which also what I expected. But of course, I really need the overflow property, so I can't move on without it.
The reason I need to use the overflow property:
I want to use it because I want to make the effect, when I hover each anchor, there will be a line under it moves from left to right.
So I will use the ::after pesudo element, translate it 100% (transform: translateX(-100%)) to the left and when hover it, it would move back to 0% (transform: translateX(0%)). So the overflow property would hide the ::after pesudo element when it translate 100% to the left.
What I tried:
I tried to use the ul element instead, an wrap each anchors into each li element:
<ul class="list">
List of anchors:
<li class="child-list">First child</li>
<li class="child-list">Second child</li>
</ul>
.child-anchor {
text-decoration: none;
color: red;
display: inline-block;
overflow: hidden;
}
.child-list {
display: inline-block;
list-style-type: none;
}
But, that it still moves up.
What I want to know:
I want to know why this weird problem happens, and also the way to fix it, or some other ways to make the effect that I mentioned in the The reason I need to use the overflow property section. So hopefully, you guys can help me with this and thank you so much for spending time reading this question!
Have you tried :
vertical-align: middle;
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 2 years ago.
Improve this question
I'm quite new to html/css/js so apologise in advance if this is a newbie question.
Every time I see a navigation bar people tend to use ul/li. However I think you can achieve the exact same result just by using and formatting the 'a' tags thus reducing the html code, like the example below:
html:
<body>
<header>
<nav class="top-nav">
About me
Education
Work
Interests & Hobbies
Contact
</nav>
</header>
</body>
css:
body {
margin: 0px;
padding: 0px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
/* Header section.*/
header {
text-align: center;
color: white;
}
/* Navigation */
.top-nav {
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
background-color: black;
padding: 20px 0;
width: 100%;
}
.top-nav a {
text-decoration: underline;
color: white;
}
.top-nav a:hover {
font-style: italic;
}
Is there anything wrong with doing this in terms of semantics, etc? If so, why and what are the advantages of using the ul/li tags?
Here's the fiddle for this.
Thank you!
I understand that your question is about semantics.
There is no explicit precision about the form of the content of the navigation element <nav> (whether it use <li> <ol> or just <a>).
If you have a peek at the nav element you can see how it relates to the accessibility navigation role.
Likewise, you can look at the ul element and how it related to the accessibility list role.
So the semantic difference would be that a series of <a> is more related to plain text entries that link somewhere. When encapsulated in a <ul> it takes the meaning of a list of links. The latter is probably more explicit to define the concept of a navigation menu.
If you want to add a dropdown below every item the you will need to have ul tags to achieve that result. You just cannot simply add a dropdown menu by using anchor a tags thats why you will see most of the people using ul tags followed by li tags inside to make the dropdown menu. If you just want to show the items on your navbar and dont want to have a dropdown then this approach may be okay..:)
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
Hello I am making a dummy promotion page and I am not sure why I have so much
spacing under my h1 tags.
Also for my footer, my li's dont seem to inherit the hover effect?
My li:hover works locally but not when I transfer it over on ftp.
Poking around on your site I found some problems (Chrome inspect is a powerful tool)
In your css/style.css you're setting the hover style on the < li> element, but it's the < a> element you should change the styling of. Change nav li:hover and h1 to this:
nav a:hover {
background: #222; // Looks better
color: #1CDFED;
text-decoration: underline;
}
h1 {
display: inline-block;
margin: 0;
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I've seen a fair amount asked about this in certain areas, but the answers I found didn't resolve my problem. I'm trying to make a nav menu, and can't get the list style set to none, nor will it display inline. Here is the HTML/CSS I had written:
<div class="nav">
<ul>
<li>About</li>
<li>Dream Series</li>
</ul>
</div>
.nav ul {
list-style-type: none;
}
.nav li {
display: inline;
}
I don't know if it's interfering elements elsewhere on the page, but I tried creating it both inside and outside my header with the same result...which was basically none. I'm wanting to remove the bullet points, center the elements and/or add padding between them, and style the text with the font on the res tof the page, but after getting the element to appear, any stylization I add via CSS isn't applying.
I'm editing because apparently the post was labelled 'off-topic', so I reworded the above text a bit. Also wanted to point out I'm not using embedded css, I'm applying it from an external .css file, which has cooperated just fine until this issue. Thanks for the help guys.
Your css is correct. However, did you enter the code exactly the way you display it above?? Your css needs to go inside a <style> tag if you want it on the same file as your markup. Like so:
<div class="nav">
<ul>
<li>About</li>
<li>Dream Series</li>
</ul>
</div>
<style>
.nav ul {
list-style-type: none;
}
.nav li {
display: inline;
}
</style>
Demo
What you have written above should work.
I took your code and plugged it in fiddle and it displayed just fine.
<div class="nav">
<ul>
<li>About</li>
<li>Dream Series</li>
</ul>
</div>
.nav ul {
list-style-type: none;
}
.nav li {
display: inline;
}
http://jsfiddle.net/uL3sonrx/1/
You must have something affecting it in your css. Try inspecting it through Firebug or Chrome developer tools to see all the styles applied to it.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I have a bit of a spacing problem with a superfish drop down menu. You can see the issue here:
http://screencast.com/t/V8g5ZrDXDZV
You can see it live here: http://goo.gl/kzImjK
Basically all of the submenu items are floated left with a 50% width. I need to remove that big space and basically have the items get right underneath the sub menu items.
Regarding your big space problem:
Ok, based on our exchange, and using jQuery, you could:
Append all your secondary submenu li items to the primary submenu, right after the primary submenu li item that used to contain them.
Add a css class to said items to be able to target them (if need be).
Add a menu-changed class to your #navigation div, and add a custom set of styles to it (so that they only work if the JS did).
jQuery:
$(document).ready(function() {
$("#navigation li ul li ul").each(function() {
$(this).children("li").each(function() {
$(this)
.addClass("was-submenu-item")
.insertAfter($(this).closest("ul").parent());
});
$(this).closest("li").removeClass("menu-item-has-children");
$(this).remove();
});
$("#navigation").addClass("menu-changed");
console.log($(".was-submenu-item"));
});
CSS:
#navigation .was-submenu-item a {
/* some styles here */
}
#navigation.menu-changed ul li {
/* some styles here */
}
Fiddle:
Here's a working JSFiddle for reference.
Regarding your alignment problem:
Look for the following style selector inside your theme's main.css style sheet: #navigation li ul li ul li a, and get rid of the margin and customize the padding, like so:
#navigation li ul li ul li a {
padding: 5px 4px;
/* margin-left: 20px; */
width: 100%;
font-size: 11px;
}