I have a list of href links that I want to center.
<div id="top-nav">
<ul>
<style>
ul li,
ul li a {
color:black;
font-size:20px;
}
</style>
<li>How Does it Work?</li>
<li>FAQ</li>
<li >Discord Server</li>
</ul>
</div>
So far I've tried
<li style="text-align:center;>Discord Server</li style="text-align:center;>
and
<li><a style="text-align:center;href="Discordserver.html">Discord Server</a style="text-align:center;></li>`
Neither of these worked
Since there are three, is there a way of centering one of the lists and having one on the left and one on the right of the centered one?
Try writing the attached code, it will surely work. And if it doesn't let me know in the comments I will try my best to help you. I have added margin-left: 50%; corrected a bit of CSS.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
li{
color:black;
font-size:20px;
margin-left: 50%;
}
</style>
</head>
<body>
<div id="top-nav">
<ul>
<li>How Does it Work?</li>
<li>FAQ</li>
<li >Discord Server</li>
</ul>
</div>`
</body>
</html>
You can try
I think it will help
.top-nav , ul {
display:flex;
flex-direction:column;
justify-content: center;
align-items: center;
}
It's unclear what exactly you're trying to achieve based on the question, but try this:
ul {
align-items: center;
display: flex;
flex-direction: row;
justify-content: center;
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
ul li {
margin: 0 20px;
}
<div id="top-nav">
<ul>
<li>How Does it Work?</li>
<li>FAQ</li>
<li >Discord Server</li>
</ul>
</div>
I also want to note something else since you've said you're new to lists and maybe HTML – you don't need to apply inline styles to both the opening and closing tags, just the opening tags.
Incorrect:
<li style="text-align:center;>Discord Server</li style="text-align:center;>
Correct:
<li style="text-align:center;>Discord Server</li>
This won't actually cause any issues, but it's not valid HTML.
Related
<style>
.footer h3 {
width: fit-content;
margin: 15px 30px;
display: inline;
}
.footermenu nav {
display: inline;
}
</style>
<body>
<footer class="footer">
<h3>© ALL RIGHTS RESERVED </h3>
<nav class="footermenu">
<ul>
<li>ABOUT US</li>
<li>MORE ABOUT</li>
</ul>
</nav>
</footer>
</body>
community! I'm doing basic training on WebDev and ran into a problem with inline positioning.
I created a footer with H3 and nav (ul>li*2). I want H3 to be positioned on the left and li anywhere, but on the same line as H3, in principle (haven't questioned the position relative to the center of the page yet).
Solved the problem through display: inline;, but for each element, but could not find a more elegant solution and without duplication
.class footer {
display: inline;
}
.class h3 {
display: inline;
}
and so on.
Please help me find a competent and elegant solution. Thank you!
<footer class="footer">
<h3>© ALL RIGHTS RESERVED </h3>
<nav class="footermenu">
<ul>
<li>ABOUT US</li>
<li>MORE ABOUT</li>
</ul>
</nav>
</footer>
.footer h3 {
width: fit-content;
margin: 15px 30px;
display: inline;
}
.footermenu nav {
display: inline;
}
Try to use flex in order to set the position of elements
footer {display: flex;}
More info here
As said #KristiK, flex is a good way.
But you have a wrong.
.footermenu nav doesn't have sense in your code. It points to nav elements inside .footermenu. So these are appropriate selectors for styling to nav in your code:
nav or .footermenu or nav.footermenu.
<style>
.footer h3 {
width: fit-content;
margin: 15px 30px;
}
ul {
margin-top: 20px;
display: flex;
}
a {
padding-left: 20px;
}
</style>
<body>
<footer class="footer" style="display: flex">
<h3>© ALL RIGHTS RESERVED </h3>
<nav class="footermenu">
<ul style="list-style: none;">
<li>ABOUT US</li>
<li>MORE ABOUT</li>
</ul>
</nav>
</footer>
</body>
I am making a website and I want to make a drop-down list but I have a trouble.
I want to do something like this:
Option A Option B Option C Option D Option E
and a dropdown list to B with 4 options but when I do it, it looks like that:
Option A Option B
.....................Option 1
.....................Option 2
.....................Option 3
.....................Option 4
...........................................Option C Option D Option E
this is my code:
.option {
display: inline-block;
}
.option>li {
display: inline;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<nav>
<ul>
<div class="option">
<li>Home</li>
<li>Services
<ul>
<li>3D
<li>2D
<li>Websites
<li>IT help
</ul>
</li>
</div>
<div class="option">
<li>Gallery
<li>Contact
<li>About Me
</div>
</ul>
</nav>
</body>
</html>
</nav>
Restructure your HTML
Close your li tags. Make sure you are closing them properly like
this:
<li>Home</li>
Nest all of the top level menu items (Home, Services, Gallery, Contact, About Me) in a single ul
Your HTML should look something like this
<nav>
<ul>
<li>Home</li>
<li>Services
<ul>
<li>3D</li>
<li>2D</li>
<li>Websites</li>
<li>IT help</li>
</ul>
</li>
<li>Gallery</li>
<li>Contact</li>
<li>About Me</li>
</ul>
</nav>
Add style
Add a class to the Services li to indicate that it is a dropdown. I am calling mine dropdown
Remove those pesky dots on each list item using list-style: none; padding: 0;
To arrange the top level ul horizontally, make it a flexbox by applying display: flex; on the ul. I would also add flex-wrap: none; to make sure the list does not try to wrap its elements on small screens.
I recommend giving each element of the flexbox a constant width and aligning the text how you like like. I used width: 80px; text-align: center;
Lastly, hide the elements of your dropdown by setting the inner ul's display to none. And show the dropdown by setting display to block. I did this using the class open
ul {
list-style: none;
padding: 0;
}
nav > ul {
display: flex;
flex-wrap: none;
}
nav > ul > li {
width: 80px;
text-align: center;
}
nav > ul > li.dropdown > ul > * {
display: none;
}
nav > ul > li.dropdown.open > ul > * {
display: block;
}
<nav>
<ul>
<li>Home</li>
<li class="dropdown">Services
<ul>
<li>3D</li>
<li>2D</li>
<li>Websites</li>
<li>IT help</li>
</ul>
</li>
<li>Gallery</li>
<li>Contact</li>
<li>About Me</li>
</ul>
</nav>
Add interaction
Now if you want to actually make the submenu expand, I recommend using JavaScript. In the code snippet above, all you need to do is toggle the class open on any li with the dropdown class.
There are infinite possibilities, but a good place to start is this W3 Schools tutorial on building clickable dropdown menus. Be mindful of accessibility features as well by reading this W3 tutorial on building accessible flyout menues.
Here is a tutorial on building a CSS only accessible dropdown menu; although I recommend sticking to JS solutions, because they are more versatile.
Rudimentary example using JS
const dropdownMenuItems = document.querySelectorAll("li.dropdown");
const toggleDropdown = (e, el) => {
if (e.target.classList.contains("dropdown-control")) {
el.classList.toggle("open");
}
};
dropdownMenuItems.forEach((el) => {
el.addEventListener("click", (e) => toggleDropdown(e, el));
});
ul {
list-style: none;
padding: 0;
}
nav > ul {
display: flex;
flex-wrap: none;
}
nav > ul > li {
width: 80px;
text-align: center;
}
nav > ul > li.dropdown > ul > * {
display: none;
}
nav > ul > li.dropdown.open > ul > * {
display: block;
}
<nav>
<ul>
<li>Home</li>
<li class="dropdown">Services
<ul>
<li>3D</li>
<li>2D</li>
<li>Websites</li>
<li>IT help</li>
</ul>
</li>
<li>Gallery</li>
<li>Contact</li>
<li>About Me</li>
</ul>
</nav>
Closing thoughts
I kept the styling really barebones. You can of course style however you like. It seems like you are mostly asking about how to get the arrangement right.
It probably makes sense to change the Services a tag to a button if it does not behave like a link. This is important for screen readers to know how to treat that element.
Here's how I would do it: It's a little bare, but it works. I would make each li have the class of option and get rid of the divs so that it is more consistent and simpler. Also, you were missing all of your closing li tags, which messed some things up. I also added a simple :hover mechanism so that it will hide and show when you hover over it.
.option {
display: inline-block;
vertical-align: top;
width: 75px;
margin: 0;
padding: 0;
}
.dropdown {
display: none;
padding: 0;
list-style-type: none;
}
.contains-dropdown:hover > .dropdown{
display: block
}
option>li {
display: inline;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<nav>
<ul>
<li class="option">Home</li>
<li class="option contains-dropdown">
Services
<ul class="dropdown">
<li>3D</li>
<li>2D</li>
<li>Websites</li>
<li>IT help</li>
</ul>
</li>
<li class="option">Gallery</li>
<li class="option">Contact</li>
<li class="option">About Me</li>
</ul>
</nav>
</body>
</html>
</nav>
I'm just barely learning how to code. I know there is more than one way to skin a cat, but what is the most efficient way to create a typical menu with lists, search fields, etc.?
I've been able to create all of the elements. I am having a very hard time getting the CSS correct to look the way I want.
Here is what my current project looks like.
This is what I am trying to achieve.
Thanks for the help! Any tips for a beginner would also be appreciated. Thank you!
Here is my HTML
<!DOCTYPE html>
<html lan="en">
<head>
<meta charset ="UTF-8">
<link href = "racemonster.css" rel="stylesheet" type="text/css">
<title>Home</title>
</head>
<body>
<div class="headerLeft">
<h1>Name</h1>
</div>
<div class="headerRight">
<ul>
<li>Cart</li>
<li>Help</li>
<li>Sign In</li>
<li>Sign Up</li>
</ul>
</div>
<div class="menu">
<ul>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
Here is the css
.headerLeft{color:#C4D82D;font-family:sans-serif;background-color:#323232;width:100%;margin:0;padding:20px;top:0;left:0;}
.headerRight{color:#B1B3B5;font-family:sans-serif;background-color: #323232;width:100%;margin:0;padding:20px;top:0;left:0;}
.headerRight ul {list-style-type: none;}
.headerRight ul li{display: inline;margin-right: 20px}
.headerRight ul li a{text-decoration: none;font-family: sans-serif;color: #898B8E;background-color:#323232;}
.headerRight ul li a:hover{color:#B1B3B5;}
.menu ul {list-style-type: none;width:100%; margin:0; padding-top:40px; padding-bottom:40px; background-color: #C4D82D}
.menu ul li {display:inline;margin-right: 20px;}
.menu ul li a {text-decoration: none;font-family: sans-serif;color:#323232;background-color: #C4D82D;}
.menu ul li a:hover {color:#999B9D;}
Updated Answer
Here is a solution... first check out my code (http://jsfiddle.net/ProgrammerKid/s01yuzm1/)
HTML
<div class="headers">
<div class="headerLeft">
<h1>Name</h1>
</div>
<div class="headerRight">
<ul>
<li>Cart
</li>
<li>Help
</li>
<li>Sign In
</li>
<li>Sign Up
</li>
</ul>
</div>
<div class="header-padding"> </div>
</div>
<div class="menu">
<ul>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
</ul>
</div>
CSS
.headers {
width: 100%;
position: static;
}
.headerLeft {
width: 50%;
float: left;
box-sizing: border-box;
height: 120px;
}
.headerRight {
width: 50%;
box-sizing: border-box;
float: right;
height: 120px;
}
.header-padding {
height: 120px;
}
What I like to do is group the two headers into one big <div> so that they both share a common parent (disregarding the <body>)... Then I added a CSS float property, and set their width to 50%. This will align them...
The <div class="header-padding">[...]</div> element is to provide the links sections with enough padding... Since we float the two div's (.headerRight, and .headerLeft) the links sections would appear underneath the headers... therefore by placing the header padding element, we are providing the links section with enough space.
Old Answer
There is no "correct" way to make a header
That being said, it would be really helpful to the people answering your question if you included the HTML/CSS/JS code...
For now I will use a very abstract method of conveying my tips to you...
If we said the element with the word "NAME" inside it was a <div id="1"></div> and the element in which your menu items are in would be <div id="2"></div>, and the links were <div id="3"></div>
Then here is what your CSS should look like:
#1 {
width: 40%;
float: left;
}
#2 {
width: 50%;
float: left;
}
the above will align both the elements together
and below we will reduce the padding to around 10px;
#3 {
padding: 10px;
}
and that's all I can help you with for now until you upload your code
I have created css as you required it is very straightforward and easy to understand.
enter link description here
.container {
background-color:#323232;
}
.title {
color:#C4D82D;
margin-left:40px;
}
.headerLeft {
width:50%;
float:left;
height:100px;
display:inline-block;
}
.headerRight {
width:50%;
height:100px;
display:inline-block;
}
.headerRight ul li {
display:inline;
color:#B1B3B5;
}
.headerRight ul li a {
color:#b1b3b5;
}
.headerRight ul li a:hover {
color:#B1B3B5;
}
.menu {
background-color:#C4D82D;
height:50%;
position:relative;
padding-top:20px;
margin:(auto, auto, 0, 0);
}
.menu ul li {
display:inline;
}
.menu ul li a {
color:#323232;
}
.menu ul li a:hover {
color:#999B9D;
}
<body>
<div class="container">
<div class="headerLeft">
<h1 class="title">Name</h1>
</div>
<div class="headerRight">
<ul>
<li>Cart |
</li>
<li>Help |
</li>
<li>Sign In |
</li>
<li>Sign Up |
</li>
</ul>
</div>
<div class="menu">
<ul>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
</ul>
</div>
</div>
</body>
HTML
<ul style="padding-left:0;">
<li>A journey in to the digital</li>
<li>Global thought leaders</li>
</ul>
HTML browser support this ul padding-left. So there is no issue in browser. But in Gmail that padding-left style not working. How to fix that issue.
try Float:left or give margin-right: % or padding-right: %;
Wrap each bullet in a table-cell using a pseudo element.
ul{
display: table;
margin-left: 0;
padding-left: 0;
list-style: none;
}
li{
display: table-row;
}
<head>
<style type="text/css">
ul.c1 {padding-left:0;}
</style>
</head>
<body>
<ul class="c1">
<li>A journey in to the digital</li>
<li>Global thought leaders</li>
</ul>
</body>
I am having troouble centering my nav bar to the middle of my page. I have not done any css as of yet.
HTML
<div class = "menu-wrap">
<nav class = "navMenu">
<ul class = "ulMenu">
<li>Home</li>
<li>
Products<span class="arrow">▼</span>
<ul>
<li>#</li>
<li>#</li>
</ul>
</li>
<li>Contact Us</li>
<li>About </li>
</ul>
</nav>
You need to add some CSS to specify the class properties, which will define the properties of the elements you have defined as members of those classes.
Something like this
#menu-wrap {
width:750px;
margin:0 auto;
list-style:none;
}
You can refer to this tutorial
Add align= "center"
<div class = "menu-wrap" align="center">
So in order to align layout elements. You'll want to use CSS. Hopefully this will get you started:
When making a horizontal nav element, we usually use the float or display:inline properties to force the individual links on one line. To center the whole nav element you could give it a width as I've done here, which allows us to set its margin to auto which horizontally centers the whole div.
nav ul li{
list-style:none;
float:left;
margin:5px;
}
nav{
height:50px;
display:table;
background:#eee;
margin:auto;
}
<div class = "menu-wrap">
<nav class = "navMenu">
<ul class = "ulMenu">
<li>Home</li>
<li>
Products<span class="arrow">▼</span>
<ul>
<li>#</li>
<li>#</li>
</ul>
</li>
<li>Contact Us</li>
<li>About </li>
</ul>
</nav>
Still, it looks horrible. With a little more CSS styles, you can turn this menu into something great.
.ul {
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
width: 100%;
height: auto;
background-color: lightgrey;
}
.li {
background-color: white;
padding: 0.5rem;
margin: 0.5rem;
-webkit-align-self: center;
align-self: center;
}
a .li:hover {
color: #000000;
background-color: lightgreen;
cursor: pointer;
}
<div class = "menu-wrap">
<div class="ul">
<a><div class="li">Home</div></a>
<a><div class="li">Products</div></a>
<a><div class="li">Contact Us</div></a>
<a><div class="li">About</div></a>
</div>
</div>