I'm starting ton code and I have some struggles with this website. First, I made the header with a nabber in it but I can't align it to the right, if I try it with float:right it switches the links. And underneath all that I want a big picture but auto height and width doesn't work if I make the page bigger.
<!DOCTYPE html>
<style>
header{ background-color: white;
margin-left: 20px;
margin-top: 30px;
}
img.logo{ width: 200px;
height: 30px;
}
li{ display: inline;
}
ul{ position: fixed;
top: 20px;
}
a{ font-family: 'Open Sans', sans-serif;
font-size: 20px;
font-weight: 300;
letter-spacing: 0.5px;
}
img.picvp{margin-top: 20px;
width: auto;
height: auto;
}
</style>
<header>
<img class="logo" src="#">
<ul>
<li style="float:right;">Projecten</li>
<li style="float:right;">over</li>
<li style="float:right;"><a href='#'>Contact</a></li>
</ul>
</header>
<sec>
<img class="picvp" src="https://lh4.googleusercontent.com/G3M2vxtCatAm1yxWxUA0VVLZjtePu32ziMPd6TLL3wQhk53s4mokl5v_7Rx0crGBp_2Q6iZJnRU-lzQ=w1262-h905">
</sec>
Thank you!
Using display:flex will help with this.
.header{
background-color: white;
align-items: center;
display: flex;
margin-left: 20px;
margin-top: 30px;
}
.logo{
background-color: #0f0;
width: 200px;
height: 30px;
}
.nav {
font-family: 'Open Sans', sans-serif;
font-size: 20px;
font-weight: 300;
letter-spacing: 0.5px;
margin-left: auto;
}
.nav li{ display: inline-block; }
.nav a {
border-left: solid 1px;
display: block;
padding: 1em;
}
img.picvp{
margin-top: 20px;
width: auto;
height: auto;
}
<header class="header">
<img class="logo" src="#">
<ul class="nav">
<li>Projecten</li>
<li>over</li>
<li><a href='#'>Contact</a></li>
</ul>
</header>
<sec>
<img class="picvp" src="https://lh4.googleusercontent.com/G3M2vxtCatAm1yxWxUA0VVLZjtePu32ziMPd6TLL3wQhk53s4mokl5v_7Rx0crGBp_2Q6iZJnRU-lzQ=w1262-h905">
</sec>
Here is a link to the solution: Fiddle N1
You just needed to add: width: 100%; to the class img.picvp.
Another thing is that you should've set your ul elements like that:
ul{
position: relative;
display: inline;
text-align:right;
}
text-align:right automatically pulls the elements to the right side of the parent div. Also use relative positioning rather than fixed one. I have made some changes to the width of the background image as well. Compare the changes to the code so you can see what exactly has been changed.
hii i modify some of code but impornant i use parent and child an example in your i use as parent and as child see example as follow
(dont forgot to change img src)
header{ background-color: white;
margin-left: 20px;
margin-top: 30px;
}
img.logo{
width: 1100px;
height: 130px;
}
ul,li{ display: inline;
text-decoration:none;
}
a,li{
display: inline;
}
a{ font-family: 'Open Sans', sans-serif;
text-decoration:none;
display: inline;
}
img.picvp{margin-top: 20px;
width: auto;
height: auto;
}
<img class="logo" src="nows.jpg">
<ul>
<li style="float:right;">Projecten</li>
<li style="float:right;">over</li>
<li style="float:right;"><a href='#'>Contact</a></li>
</ul>
Related
I am trying to build a heading/nav bar and want to know the best way to build it. I feel like I wrote too much code and made it way more complicated than should be. I wasn't too sure how to change the space between the heading and menu. When I resize the window the menu text gets messed up.
body {
padding: 0;
margin: 0;
box-sizing: border-box;
}
#navbar {
width: 100%;
height: 10%;
position: fixed;
display: flex;
align-items: center;
background-color: #cae7df;
border-bottom: 1px solid black;
}
#heading {
font-family: comic sans ms;
font-size: 1.5rem;
width: 50%;
margin-left: 5%;
}
.sections {
font-family: comic sans ms;
font-size: 1rem;
}
#menu {
display: flex;
justify-content: space-between;
align-items: center;
width: 50%;
margin-right: 5%;
}
<div id="navbar">
<h1 id="heading">The Arena</h1>
<div id="menu">
<h2 class="sections">Games</h2>
<h2 class="sections">How Tt Works</h2>
<h2 class="sections">Team</h2>
</div>
You shouldn't use h2 tags in a navigation
It should be something like this:
.nav{
float:right;
}
.nav_list{
list-style:none;
padding:0;
margin:0;
}
.nav_item{
display: inline-block;
}
.nav_item a{
padding: 5px 15px;
background: #eee;
text-decoration: none;
color: #444;
}
.nav_item a:hover{
background: #E1ECF4;
color: blue;
}
<div class="nav">
<ul class="nav_list">
<li class="nav_item">
Some Link
</li>
<li class="nav_item">
Some Link
</li>
<li class="nav_item">
Some Link
</li>
</ul>
</div>
Well, I have a site and it's happening something that I just can't fix.
I have a code like this:
aside {
font-size: 150%;
font-family: fantasy;
font-variant: small-caps;
line-height: 2em;
background: rgba(187,219,136,0.75);
width: 90%;
height: 50px;
text-align: center;
}
aside {
margin: auto;
margin-top: 20px;
}
aside li {
float: left;
padding: 0 2%;
font-size: 100%;
}
<aside>
<ul>
<li id="matematica">Matemática</li>
<li>Geografia</li>
<li>Física</li>
<li>História</li>
<li>Português</li>
<li id="quimica">Química</li>
</ul>
</aside>
So, the problem is that I want to centralize the li elements inside the ul, and I can't use text align because li is not text!
Can anyone help me?
is this what you want?
aside {
font-size: 150%;
font-family: fantasy;
font-variant: small-caps;
line-height: 2em;
background: rgba(187,219,136,0.75);
width: 90%;
height: 100px;
text-align: center;
}
aside{
margin: auto;
margin-top: 20px;
}
aside li{
display: inline-block;
padding: 0 2%;
font-size: 100%;
}
<aside>
<ul>
<li id="matematica">Matemática</li>
<li>Geografia</li>
<li>Física</li>
<li>História</li>
<li>Português</li>
<li id="quimica">Química</li>
</ul>
</aside>
try to :
aside li{
display:inline-block;
padding: 0 2%;
font-size: 100%;
}
remove the float too ;
If I understood correctly what you want to achieve, you may try changing:
aside li{
float: left;
padding: 0 2%;
font-size: 100%;
}
to
aside li{
display: inline;
padding: 0 2%;
font-size: 100%;
}
See it on JSFiddle and, also, check the attribute list-style-type for your <ul> tag.
I don't think you can select that circle because it's not an element. You can see it yourself. Just go to inspect and try to find that element.
But you can make a custom list.
<center><div id="b">
<div class="a"><span></span> List 1</div>
<div class="a"><span></span> List 2</div>
<div class="a"><span></span> List 3</div>
</div></center>
<style>
span {
background:black;
height:10px;
width:10px;
border-radius:30px;
display:inline-block;}
</style>
So I'm working on a navigation bar for my website and I'm trying to space everything centred evenly in the bar, but for some reason, I can't get things to work out evenly. Either margins don't work, or they do but not all the way, and it's getting quite frustrating. Here's my code:
body {
margin: 0 px;
font - family: Helvetica;
}
.navbar {
background - color: grey;
width: 100 % ;
height: 70 px;
text - align: center;
}
.items li {
display: inline - block;
padding - left: 50 px;
}
.items a {
text - decoration: none;
color: #333;
font-weight: bold;
font-size: 20px;
padding-top: -25px;
}
<body>
<div class="navbar">
<div class="items">
<img src="logo1.png" style="height:55px;padding-top:7.5px;">
<li>Apparel</li>
<li>Equipment & Accessories</li>
<li>Contact Us</li>
</div>
</div>
</body>
To center vertically links with the logo, use vertical-align:middle;.
Also, If you set margin or padding don't set it to <a> because it's an item with inline properties but set it on li items which are inline-block.
In addition to that, it's strange to write li items without ul container.
body {
margin: 0px;
font-family: Helvetica;
}
.navbar {
background-color: grey;
width: 100% ;
height: 70px;
text-align: center;
}
.items img
{
vertical-align:middle;
}
.items li {
display: inline-block;
vertical-align:middle;
padding-left: 50px;
}
.items a {
text-decoration: none;
color: #333;
font-weight: bold;
font-size: 20px;
}
<body>
<div class="navbar">
<div class="items">
<img src="logo1.png" style="height:55px;padding-top:7.5px;">
<li>Apparel</li>
<li>Equipment & Accessories</li>
<li>Contact Us</li>
</div>
</div>
</body>
Note:See it in full page!
body {
margin: 0px;
font-family: Helvetica;
}
.navbar {
background-color: grey;
width: 100%;
height: 70px;
text-align: center;
position: relative;
}
.items {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.items li {
display: inline-block;
padding-left: 50px;
}
.items a {
text-decoration: none;
color: #333;
font-weight: bold;
font-size: 20px;
display: block;
}
<div class="navbar">
<div class="items">
<img src="logo1.png" style="height:55px;padding-top:7.5px;">
<li>Apparel</li>
<li>Equipment & Accessories</li>
<li>Contact Us</li>
</div>
</div>
I'm new to programming and I'm trying to make a website but I have a big problem. I want a navigation bar next to my logo and sticking to the top when i scroll, but I can't get it to work. The text is on top of each other and I don't know how to make it work.
<!DOCTYPE html>
<html>
<head>
<style>
body{ background-color: black}
img.logo{ margin-left: 20px;
margin-top: 10px;}
li{ display: inline}
a{ position: fixed;
width: auto;
height: 50px;
margin-left: 50px;
margin-top: 60px;
color: #DFDD7D;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
font-weight: 300;
letter-spacing: 0.5px
margin: 0px;
padding: px;}
</style>
</head>
<body>
<header>
<img class="logo" src="https://lh4.googleusercontent.com/7zZpeNiaANxK7CqDKwE2PdemWJFKoskKGKelsSmQSNmZQOBpKwMkOST3ucML162QIf3k5_ZclpFT_PE=w998-h1006" style="height: auto; width: 300px" >
<li>Projecten</li>
<li>over</li>
</header>
</body>
</html>
Welcome to the world of web development!
The first order of business is to fix your CSS so it is valid. We'll also tidy it up a little.
Add a semicolon after letter-spacing: 0.5px
You don't have any value assigned to padding: px; so just remove that line
It's not necessarily invalid, but I would remove the declarations for margin-left and margin-top on the a element because you are overriding them with margin: 0px; later on.
With that done, the CSS should look like this:
body {
background-color: black;
}
img.logo {
margin-left: 20px;
margin-top: 10px;
}
li {
display: inline;
}
a {
position: fixed;
width: auto;
height: 50px;
margin-left: 50px;
margin-top: 60px;
color: #DFDD7D;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
font-weight: 300;
letter-spacing: 0.5px;
}
Now, lets make the HTML valid and tidy it up, as well.
You can't have <li> elements directly under <header>. They only go inside <ol> or <ul> elements. <ul> (unordered list) makes the most sense here, so let's use that.
It's a good idea to place a value in the href attribute of your <a> element. If you're just prototyping and don't have a URL to use, yet, people typically use #.
The HTML now looks like this:
<header>
<img class="logo" src="https://lh4.googleusercontent.com/7zZpeNiaANxK7CqDKwE2PdemWJFKoskKGKelsSmQSNmZQOBpKwMkOST3ucML162QIf3k5_ZclpFT_PE=w998-h1006" style="height: auto; width: 300px" >
<ul>
<li>Projecten</li>
<li>over</li>
</ul>
</header>
Now, one issue is that you are applying a fixed position to each of your <a> elements separately. What you actually want to do is apply a fixed position to the whole navbar (the whole <ul>). So change your CSS like so:
ul {
position: fixed;
}
a {
width: auto;
height: 50px;
margin-left: 50px;
margin-top: 60px;
color: #DFDD7D;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
font-weight: 300;
letter-spacing: 0.5px;
}
This is just an excerpt. But notice that I moved position: fixed; from a to ul. Really, that is all that's needed. If you want to fine tune where the navbar appears, go ahead and use top and left like so:
ul {
position: fixed;
top: 5px;
left: 10px;
}
The whole page now looks like this:
body {
background-color: black;
color: white;
}
img.logo {
margin-left: 20px;
margin-top: 10px;
}
li {
display: inline;
}
ul {
position: fixed;
top: 5px;
left: 10px;
}
a {
width: auto;
height: 50px;
margin-left: 50px;
margin-top: 60px;
color: #DFDD7D;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
font-weight: 300;
letter-spacing: 0.5px;
}
<header>
<img class="logo" src="https://lh4.googleusercontent.com/7zZpeNiaANxK7CqDKwE2PdemWJFKoskKGKelsSmQSNmZQOBpKwMkOST3ucML162QIf3k5_ZclpFT_PE=w998-h1006" style="height: auto; width: 300px" >
<ul>
<li>Projecten</li>
<li>over</li>
</ul>
</header>
<li> elements should be in a <ul> or <ol>
In the example below, I used flexboxes for the layout. Please have a look here to learn about flexboxes.
body {
background-color: black
}
header {
display: flex;
align-items: center;
}
ul {
padding: 0;
margin: 0;
list-style: none;
display: flex;
}
img.logo {
margin-left: 20px;
margin-top: 10px;
}
li {
margin-left: 1em;
}
a {
color: #DFDD7D;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
font-weight: 300;
letter-spacing: 0.5px margin: 0px;
}
<header>
<img class="logo" src="http://placehold.it/300x100">
<ul>
<li>Projecten</li>
<li>over</li>
</ul>
</header>
Change the position to relative and add "vertical-align:top" to the anchor.
body{ background-color: black}
img.logo{ margin-left: 20px;
margin-top: 10px;}
li{ display: inline}
a{ position: relative;
width: auto;
height: 50px;
margin-left: 50px;
margin-top: 60px;
color: #DFDD7D;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
font-weight: 300;
letter-spacing: 0.5px;
vertical-align:top;
margin: 0px;
padding: px;}
<img class="logo" src="http://lorempixel.com/300/100" style="height: auto; width: 300px" >
<li>Projecten</li>
<li>over</li>
I think having <li> tags for horizontal links is a bit to complicated for nothing. You could simply use <a> tags without the <li>. Here is an exemple of how I think would be the best.
Codepen demo
If you want the content to be scrollable with the navbar on top (without it being fixed), you need to wrap it into a <div> too. This also has the very nice effect of allowing you a simple footer, should you eventually want one.
Since you didn't specify any browser support, I took the liberty of using flex to do so.
Put your li in a ul, display li inline-block, then float both the logo and the ul left, or float the ul right and put a margin-right on it if that is what you would prefer.
Make your header fixed and the logo and nav remain at the top while scrolling.
<style>
body{ background-color: black}
header#header {
position: fixed;
width: 100%;
}
div.logo {
margin-left: 20px;
margin-top: 10px;
float: left;
}
ul#nav {
float: left;
}
ul#nav li {
display: inline-block;
}
ul#nav li a {
margin-left: 50px;
margin-top: 60px;
color: #DFDD7D;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
font-weight: 300;
letter-spacing: 0.5px;
}
</style>
<header id="header">
<div class="logo">
<img class="logo" src="https://lh4.googleusercontent.com/7zZpeNiaANxK7CqDKwE2PdemWJFKoskKGKelsSmQSNmZQOBpKwMkOST3ucML162QIf3k5_ZclpFT_PE=w998-h1006" style="height: auto; width: 300px" >
</div>
<nav id="main_nav">
<ul id="nav">
<li>Projecten</li>
<li>over</li>
</ul>
</nav>
</header>
Well I have a navigation with a fixed position with a list inside, which I want to change color on a hover. But this doesn't work because of the fixed position of the navigation. Is there a way to get around this?
Here is my example
.nav {
position: fixed;
width: 100%;
height: 80px;
background-color: #ffffff;
box-shadow: 0px -2px 5px 1px;
}
.nav-inner {
position: relative;
width: 100%;
max-width: 1500px;
height: 80px;
margin-left: 50%;
transform: translate(-50%);
}
.nav-right {
float: right;
height: 100%;
}
.nav-menu {
position: relative;
top: 50%;
margin: -30px 130px 0px 0px;
height: 60px;
}
.nav-menu li {
list-style: none;
display: inline-block;
font-family: 'Open Sans', sans-serif;
font-size: 10pt;
padding: 20px;
}
.nav-menu li:last-child {margin: 0}
.nav-menu li:hover { cursor: pointer;}
.nav-left {
float: left;
color: #02c576;
font-family: 'Lato', sans-serif;
font-weight: 900;
font-size: 15pt;
letter-spacing: 4px;
height: 100%;
}
.logo {
position: relative;
height: 24px;
top: 50%;
margin: -12px 0px 0px 130px;
}
.nav-button {
display: none;
}
<div class="nav">
<div class="nav-inner">
<div class="nav-left">
<div class="logo">
<p>Company Name</p>
</div>
</div>
<div class="nav-right">
<div class="nav-menu">
<ol>
<li data-menu="Link1">Link1</li>
<li data-menu="Link2">Link2</li>
<li data-menu="Link3">Link3</li>
<li data-menu="Link4">Link3</li>
</ol>
</div>
</div>
<div class="nav-button">
<img src="Images/menu.png">
</div>
</div>
</div>
Thanks in advance!
Well after trying and trying I added a z-index in the .nav css and it worked... finally! I have no clear explanation for why it worked, but it worked for me.
There is no way currently in CSS alone to select a parent of a child.
The best way I can think of to do this, or at least the simplest would require a little JS.
Simple add a data attribute to your list items, and a JS event that on hover passes the value of the data attribute as a class to the fixed navigation. That class would control color.
Have a go yourself, if you struggle post some code and we can fix it.
Seems to work fine for me with your code (all I did was actually put the <a> tags inside the <li> elements, since that was what your code was targeting.)
.nav {
position: fixed;
width: 100%;
height: 80px;
background-color: #ffffff;
box-shadow: 0px -2px 5px 1px;
}
.nav-inner {
position: relative;
width: 100%;
max-width: 1500px;
height: 80px;
margin-left: 50%;
transform: translate(-50%);
}
.nav-right {
float: right;
height: 100%;
}
.nav-menu {
position: relative;
top: 50%;
margin: -30px 130px 0px 0px;
height: 60px;
}
.nav-menu li {
list-style: none;
display: inline-block;
font-family: 'Open Sans', sans-serif;
font-size: 10pt;
padding: 20px;
}
.nav-menu li:last-child {margin: 0}
.nav-menu li a:hover {
cursor: pointer;
color: red;
}
.nav-left {
float: left;
color: #02c576;
font-family: 'Lato', sans-serif;
font-weight: 900;
font-size: 15pt;
letter-spacing: 4px;
height: 100%;
}
.logo {
position: relative;
height: 24px;
top: 50%;
margin: -12px 0px 0px 130px;
}
.nav-button {
display: none;
}
<div class="nav">
<div class="nav-inner">
<div class="nav-left">
<div class="logo">
<p>Company Name</p>
</div>
</div>
<div class="nav-right">
<div class="nav-menu">
<ol>
<li data-menu="Link1"> <a href=#>Link1</a> </li>
<li data-menu="Link2"><a href=#>Link2</a></li>
<li data-menu="Link3"><a href=#>Link3</a></li>
<li data-menu="Link4"><a href=#>Link4</a></li>
</ol>
</div>
</div>
<div class="nav-button">
<img src="Images/menu.png">
</div>
</div>
</div>
well, you code works fine for me
js fiddle linke
I saw your code and if you don't want to use <a> tag you have to add
.nav-menu li:hover{
color:#fff;
}
simple code
nav { width: 100px; height: 80px; position: fixed; }
nav li { display: inline-block; }
nav li:hover { color: white; }
<nav>
<ul>
<li>dhh</li>
<li>fs</li>
<li>ss</li>
</ul>
</nav>
The simplest way I've tried is putting a filler element inside the first element, and target styling hover for that inner element.