I want to make the links side to side in the header. I need help with the CSS part.
<body>
<nav>
<div class="wrapper">
<umg src="spaceship.png" alt="blogs logo">
<ul>
<li>Home</li>
<li>About us</li>
<li>Find Blogs</li>
<li>Sign up</li>
<li>Login</li>
</ul>
</div>
</nav>
That is my HTML code
Try this code
nav .wrapper{
display: flex;
justify-content: space-between;
}
nav ul{
display: flex;
}
Maybe something like this??
.wrapper {
display:flex;
flex-direction:row;
justify-content:space-evenly;
width:100%;
height:40px;
background-color:black;
padding-top:10px;
}
.wrapper > a{
color:white;
text-decoration:none;
}
a:hover {
text-decoration:underline
}
<body>
<nav>
<div class="wrapper">
<img src="spaceship.png" alt="blogs logo">
Home
About us
Find Blogs
Sign up
Login
</div>
</nav>
It should contain http
For example
href="https://classroom.udacity.com/nanodegrees/nd004-1mac-v2/dashboard/overview"
Related
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.
I've been trying to create a navbar, but when I load my website in localhost, I can't seem to see my logo on the navbar. So I went searching on the web to get an example to see if my logo was the problem. In this first example ( took from the web I can see their logo loading)
*{transition:all 0.3s ease-in-out;}
.container{
clear:both;
overflow:auto;
}
nav{float:right;}
.logo img{float:left;}
ul li{
display: inline-block; padding:10px;
font-size:20px; font-family:raleway;
}
ul li:hover{
color:orange;
}
<div class="container">
<div class="logo">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/Intel-logo.svg/2000px-Intel-logo.svg.png" alt="" width="130"/>
</div>
<nav>
<ul>
<li>Home</li>
<li>Services</li>
<li>Products</li>
<li>Clients</li>
</ul>
</nav>
</div>
<hr />
Then all I did is put the direct link of my imgur image to replace their logo by mine and when I load it, it doesn't show up. How come?
*{transition:all 0.3s ease-in-out;}
.container{
clear:both;
overflow:auto;
}
nav{float:right;}
.logo img{float:left;}
ul li{
display: inline-block; padding:10px;
font-size:20px; font-family:raleway;
}
ul li:hover{
color:orange;
}
<div class="container">
<div class="logo">
<img src="https://i.imgur.com/jSo9sj9.png" alt="logo" width="130"/>
</div>
<nav>
<ul>
<li>Home</li>
<li>Services</li>
<li>Products</li>
<li>Clients</li>
</ul>
</nav>
</div>
<hr />
Thank you for your help.
I put it in the body element and got rid of the </hr> and it’s working for me.
It also works on jsfiddle.net.
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>
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>
This is the html code for the hyperlinks. I wanted to have a slight gap between the texts. Like between 'Menu' and 'Contact Us' for instance. Thanks in advance.
<div id="navbar">
<a class="fb" href="menu.html">Menu</a></br>
Contact Us</br>
About Us</br>
Terms & Conditions</br>
Jobs</br>
Your Order
</div>
I set the line-height property in CSS as follows:
#navbar {
line-height:2em;
}
Don't use <br/> (which you've mistyped consistently) and line-height, use a list and adjust the margins on the list items.
Demo: http://jsfiddle.net/psP7L/
<ul id="navbar">
<li><a class="fb" href="menu.html">Menu</a></li>
<li>Contact Us</li>
<li>About Us</li>
<li>Terms & Conditions</li>
<li>Jobs</li>
<li>Your Order</li>
</ul>
#navbar { padding:0; margin:0 }
#navbar li { display:block; padding:0; margin:0.3em 0 }
Proper, semantic markup first; then get the styling right.
However, to answer your question, it does "work", it's just that line-height on display:inline elements behaves differently per the spec than it does for display:block elements.
You have to apply the style to the anchor, and add display:block; to your CSS to make this work:
#navbar a{
line-height: 2em;
display: block;
}
Amongst some other fixes in your code you should end up with something like in this JSFiddle.
you should define a line-height in anchor not in navbar id see the example code:-
HTML
<div id="navbar">
<a class="fb" href="menu.html">Menu</a></br>
Contact Us</br>
About Us</br>
Terms & Conditions</br>
Jobs</br>
Your Order
CSS
#navbar a {
color: red;
line-height: 33px;
text-decoration: none;
}
http://jsfiddle.net/8LFLd/50/
And the other proper method is i am mentioning below you should make navigation in proper ul li list items like mentioned below:-
HTML
<div id="navbar">
<ul>
<li><a class="fb" href="menu.html">Menu</a></li>
<li>Contact Us</li>
<li>About Us</li>
<li>Terms & Conditions</li>
<li>Jobs</li>
<li>Your Order</li>
</ul>
</div>
CSS
#navbar li {
display:block;
list-style-type:none;
line-height:25px;
}
#navbar li a {
text-decoration:none;
color:red;
}
#navbar li a.fb {
text-decoration:none;
color:green;
}
#navbar li a:hover {
text-decoration:none;
color:blue;
}
demo:- http://jsfiddle.net/XZ9w7/3/
#navbar a{ display:block;line-height:30px;}
Remove
demo http://jsfiddle.net/psP7L/1/