Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I am in HTML, and I'm making a header for my website. I have a website title, followed by some links to various pages. By default, they are right next to each other, and I want them to be apart. I've tried the simple option of just adding multiple spaces, but it puts it as just 1 space.
If they are separate links then you should put padding on the link or some margin
`Link text`
Please add your code here so that you will get more help at SO.
Is this what you are trying? See if this helps.
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: inline;
}
</style>
</head>
<body>
<ul>
<li>link1</li>
<li>link2</li>
<li>link3</li>
<li>link4</li>
</ul>
</body>
</html>
Here's the code and I test it. if you want to change the spacing between elements just change the padding of the li element
<style type="text/css">
* {
padding: 0;
margin: 0;
}
h1 {
float: left;
}
ul {
list-style: none;
padding: 0;
margin: 0;
float: left;
}
li {
display: inline;
padding-left: 10px; // this is the space between elements you can add whatever you like
}
<h1>The website title</h1>
<ul>
<li>link 1</li>
<li>link 2</li>
<li>link 3</li>
<li>link 4</li>
</ul>
Related
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 2 years ago.
Improve this question
I have this bullet when using <li> tag with list-style: circle:
How can I change the border of the circle with css? Like this:
You cannot change the styling of that circle, but you can apply list-style: none; to the list to hide the list icon and add circle elements using li: before pseudo elements, having the settings as below or similar:
ul {
list-style: none;
}
li {
position: relative;
}
li:before {
position: absolute;
left: -1.2em;
bottom: 0.3em;
content: ' ';
display: block;
width: 0.45em;
height: 0.45em;
border: 2px solid lightblue;
border-radius: 50%;
}
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
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 4 years ago.
Improve this question
I have used the < div > tag to create a navigation menu bar but it only displays in a vertical fashion. However, I then changed the < div > tag into a < nav > tag, but still receive the same results in a vertical orientation.
On the ul add display: flex;
nav {
padding: 0;
width: 100%;
background: #262626;
overflow: hidden;
}
li a {
color: white !important;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: gray;
}
li {
list-style: none;
}
ul {
display: flex;
}
<nav>
<ul>
<li>HOME</li>
<li>SERVICES</li>
<li>ABOUT US</li>
<li>CONTACT</li>
<li>NEWS</li>
<li>FAQ</li>
</ul>
</nav>
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
I'm currently learning and practicing by coding my own website (so I'm a newbie), but I can't figure out why I have an extra link to the left of my first navigation links.
It only goes away if I delete my navigation links (HTML side) or if I taken away padding under the navigation in CSS, which I need to style.
This is an image of the page when rendered. The extra link is purple due to my mouse hovering: http://i.imgur.com/vEv32n5.png
<style>
body {
background-color: cadetblue;
font-size: 1em;
}
.siteheader {
display: inline;
}
.sitelogo {
float:left;
margin-left: 10px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.sociallinks {
display: inline;
float: right;
margin-right: 10px;
margin-top: 53px;
margin-bottom: 53px;
}
.sitenav {
display: inline;
text-align: center;
}
.sitenav a {
background: red;
text-decoration: none;
padding: 5%;
}
li a:hover {
background-color:#5d77dd;
}
</style>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Site Name Homepage</title>
</head>
<body>
<nav role="navigation">
<div class="siteheader">
<img src="../Img/TestingLogo.png" alt="Site Logo">
<ul>
<li class="sociallinks"><img src="../Img/IconGrayToneByAlfredo/facebook.jpg" alt="Facebook"></li>
<li class="sociallinks"><img src="../Img/IconGrayToneByAlfredo/twitter.jpg" alt="Twiiter"</li>
<li class="sociallinks"><img src="../Img/IconGrayToneByAlfredo/instagram.jpg" alt="Instagram"</li>
<li class="sociallinks"><img src="../Img/IconGrayToneByAlfredo/pinterest.jpg" alt="Pinterest"</li>
<li class="sociallinks"><img src="../Img/IconGrayToneByAlfredo/tumblr.jpg" alt="Tumblr"</li>
</ul>
<ul>
<li class="sitenav">Home</li>
<li class="sitenav">Work
<li class="sitenav">Blog</li>
<li class="sitenav">About</li>
<li class="sitenav">Store</li>
</ul>
</div>
</nav>
</body>
</html>
Please help me get rid of the extra link and thanks for any help!
It would be helpful if you could copy paste the code.
I did notice line 61 is missing a closing li tag, so maybe you can try that.
I've add ">" and it works, as suggested by Immortal Dude (it shows up as a comment instead of an answer so I don't know how to mark it as such).
Thanks everyone for your input!
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I'm trying to update on of my company's website menu and i've managed to do everything except when the menu's extend their width on mouse hover, level 2 and level 3 lists stack up on top of each other. I understand its because i made the positioning of absolute rather than relative to avoid level 1 menus from moving up and down on hover. Anyone has any suggestion on how i can manage to show submenus and keep the main menu not move around on mouse hove?
here's the my jsfiddle code, http://jsfiddle.net/#&togetherjs=hyRjkxLPGH.
thanks!
There were a number of issues with your Fiddle. First of all, the only element that should be inside a <ul> tag is an <li> tag, not text. Secondly, you were using absolute positioning nearly correctly, but you need to give each li a relative position.
I've included a basic (somewhat stripped down) solution for you below. You can also find this at this fiddle.
You can reinsert your styles pretty easily I'm sure, perhaps use more classes and less CSS selectors (have you ever used SCSS?)
HTML
<ul class="menubar">
<li>menu1
<ul>
<li>submenu1
<ul>
<li>submenu11</li>
<li>submenu12</li>
<li>submenu13</li>
</ul>
</li>
<li>submenu2
<ul>
<li>submenu21</li>
<li>submenu22</li>
<li>submenu23</li>
</ul>
</li>
<li>submenu3
<ul>
<li>submenu31</li>
<li>submenu32</li>
<li>submenu33</li>
</ul>
</li>
</ul>
</li>
<li>menu2
<ul>
<li>submenu1
<ul>
<li>submenu11</li>
<li>submenu12</li>
<li>submenu13</li>
</ul>
</li>
<li>submenu2
<ul>
<li>submenu21</li>
<li>submenu22</li>
<li>submenu23</li>
</ul>
</li>
<li>submenu3
<ul>
<li>submenu31</li>
<li>submenu32</li>
<li>submenu33</li>
</ul>
</li>
</ul>
</li>
</ul>
CSS
.menubar, .menubar ul {
list-style: none;
margin: 0;
padding: 0;
}
.menubar > li {
display: inline-block;
position: relative;
}
.menubar li ul {
display: none;
}
.menubar li:hover > ul {
display: block;
position: absolute;
width: 100px;
}
.menubar li:hover > ul > li {
position: relative;
}
.menubar > li > ul > li ul {
position: absolute;
top: 0;
left: 100px;
}
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
I need to align my submenu to the left with some margin and remove the border from the right side... but if I remove it, the border in the menu is also removed and I don't want this...
<nav>
<ul class="fancyNav">
<li id="quemsomos" class="menlog"><img src="imgs/Logo.png" width="37" height="45" />
</li>
<li id="quemsomos"><font face="din" size="4">QUEM SOMOS</font>
<!--start of sub menu-->
<ul>
<li>link the zone 1
</li>
<li>link2
</li>
<li>l for example
</li>
</ul>
<!--end of sub menu-->
http://jsfiddle.net/RHCn7/2/
DEMO
#quemsomos ul {
padding: 0;
margin-left: 5px;
}
#quemsomos ul li {
border: none;
}
EDIT(answer to the request in the comment):
DEMO
#quemsomos ul li {
border: none;
width: 100%;
text-align: left;
}
Add padding
ul li ul {
display: block;
border: 0;
position: absolute;
background-color: #D5D5D7;
opacity: 1;
padding: 8px;
}
Check this : http://jsfiddle.net/RHCn7/6/