Using HTML5 nav element and nesting SASS properties. None of the properties are being applied to the html. Not sure where the issue is.
Here is my sass:
nav{height:4em;width:100%;position:relative;padding:10px;z-index:1000;
ul{list-style:none;}
li{display:inline;font-size:130%;"
a{color:#333;text-decoration:none; padding:5px;
&:hover{border-bottom:#f8a593 2px solid;}
&:active{border-bottom:#fd5d39 2px solid;}
}
And here is my html:
<nav>
<ul>
<li><a class="active-link" href="index.html">Home</a></li>
<li>Work</li>
<li>Le Me</li>
</ul>
</nav>
Isn't it because on that line:
li{display:inline;font-size:130%;"
the latest character should be }, not ". Once I changed it, your code is compiled to:
nav {
height: 4em;
width: 100%;
position: relative;
padding: 10px;
z-index: 1000; }
nav ul {
list-style: none; }
nav li {
display: inline;
font-size: 130%; }
nav li a {
color: #333;
text-decoration: none;
padding: 5px; }
nav:hover {
border-bottom: #f8a593 2px solid; }
nav:active {
border-bottom: #fd5d39 2px solid; }
Is that what you want to achieve?
Related
Can someone explain me how i need to set the css statements to get the navbar one after another, without any free spaces?
Also it would be handy to know, how i can set the navbar over the whole display, that its automaticly working on different screen resolutions.
I tried finding a solution on w3schools.
<div class="navbar">
<ul>
<li>Compacts</li>
<li>Coupes</li>
<li>Sedans</li>
<li>Sports</li>
<li>Sports Classics</li>
<li>Super</li>
<li>Muscle</li>
<li>Off-Road</li>
<li>SUVs</li>
<li>Vans</li>
<li>Industrial</li>
<li>Commercial</li>
<li>Utility</li>
<li>Motorcycles</li>
</ul>
</div>
/* css */
.navbar ul {
list-style-type: none;
padding: 0px;
margin: 0px;
}
.navbar li {
display: inline;
}
.navbar a {
border: none;
padding: 2px;
margin: 0px;
background-color: #000000;
color: #ffffff;
text-decoration: none;
}
.button:active {
background-color: #f0a041;
color: #ffff00;
}
.button:hover {
background-color: #f0a041;
color: #ffff00;
}
tr, th {
border: none;
text-align: right;
}
Add the negative margin and your problem will get solved .
Here is the snippet .
just change the css property of the following class .
.navbar li {
display: inline;
margin-right: -0.26rem;
}
This will definitely solve your problem .
Just add float: left to li.
.navbar li {
display: inline;
float: left;
}
Give ul a display: flex, and the a tags a white-space pre:
/* css */
.navbar ul {
list-style-type: none;
padding: 0px;
margin: 0px;
display: flex;
}
.navbar a {
padding: 2px 5px;
background-color: #000000;
color: #ffffff;
text-decoration: none;
white-space:pre;
}
.button:active,
.button:hover {
background-color: #f0a041;
color: #ffff00;
}
<div class="navbar">
<ul>
<li>Compacts</li>
<li>Coupes</li>
<li>Sedans</li>
<li>Sports</li>
<li>Sports Classics</li>
<li>Super</li>
<li>Muscle</li>
<li>Off-Road</li>
<li>SUVs</li>
<li>Vans</li>
<li>Industrial</li>
<li>Commercial</li>
<li>Utility</li>
<li>Motorcycles</li>
</ul>
</div>
I have the following html code:
<div class="nav">
<ul>
<li class="home">Home</li>
<li class="home2"><a class="active" href="#">Home2</a></li>
<li class="home3">Home3</li>
<li class="home4">Home4</li>
<li class="home5">Home5</li>
</ul>
</div>
<div class="post">
<div id="borders">
<ul>
<li>red border</li>
<li>red border</li>
<li>red border</li>
<li>red border</li>
<li>red border</li>
</ul>
</div>
</div>
and with that I have a css file:
body {
padding-top: 2rem;
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.nav {
min-width:100% !important;
}
.nav ul {
list-style: none;
background-color: rgba(0,0,0,0.6);
text-align: center;
position: absolute;
top: 0;
padding: 0;
margin: 0;
min-width: 100%;
}
.nav li {
font-size: 20px;
line-height: 30px;
height: 30px;
border-bottom: 1px solid #888;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
transition: .3s background-color;
}
.nav a:hover {
background-color: #919191;
}
.nav a.active {
background-color: #fff;
color: #444;
cursor: default;
}
#media screen and (min-width: 600px) {
.nav li {
width: 120px;
border-bottom: none;
font-size: 20px;
line-height: 30px;
height: 30px;
}
.nav li {
display: inline-block;
margin-right: -4px;
}
}
ul li { position: relative; border:1px solid red; display: inline-block; text-align: center; }
ul { text-align:center; }
And now when I run it in jsfiddle, I see there's a red border around every element. What I want to achieve is to remove the border from the top elements and just use it on the elements from div id = borders. I'm a little bit confused about CSS, because I tried to use the code .borders ui li , but it didn't work well... I thought that's the way how we should call the classes on the webpage? Anyway, could you help me with removing the red border from the top links and leave it only on the words containing "red border"?
Here's the jsfiddle for that http://jsfiddle.net/gfkPG/451/
Thanks!
Use #borders ul li (as # is an id selector, not . – class selector) instead of ul li.
JSFiddle
Your borders is an ID but you're referring to it as a class in your CSS.
Try #borders instead of .borders.
You could use a class here also:
.borders ul li {
border:1px solid red;
}
<div class="borders">
<ul>
<li>red border</li>
</ul>
</div>
I have created an unsorted list/list that I would like the lines in between each word to show... so far I have this:`
#header {
position: absolute;
width: 100%;
}
#navbar {
position: relative;
padding-top: 0.8em;
padding-left: 31em;
}
ul {
list-style-type: ;
margin: 0;
padding: 0;
float: left;
}
li {
display: inline;
padding: 0.4em;
}
a {
text-decoration: none;
color: #FFFFFF;
font-family: "Century Gothic";
font-size: 100%;
<img id="header" src="images/headerfit.png" />
<div id="navbar">
<ul>
<li>HOME
</li>
<li>CUCINA
</li>
<li>ESPRESSO
</li>
<li>BAR
</li>
<li>FUNCTIONS
</li>
<li>CONTACT
</li>
</ul>
</div>
How do I make it so there is a line between each word (the space)... thankyou.
you need border for your list:
li {
display: inline;
padding: 0.4em;
border-right: 1px solid #000;
}
li:last-child {
border-right: none;
}
http://jsfiddle.net/4s2ho1kj/2/
If i have understood you right (not sure that i have) what you want is space between each word you could do this by saying
li{
margin-left:10px;
}
li:first-child{
margin-left:0px;
}
This way you will make the line that you want by adding a border to the right side of each menu item except the last.
li { border-right: 1px solid #000000; }
li:last-child { border-right: none }
here in this jsfiddle you can see what you need and try adjusting it a little till how you want it:
http://jsfiddle.net/9qdefux6/
I'm asked to create a html/css menu such as the following picture:
This looks a simple menu to me, wasn't it by the fact that it has 'cut-out' sections between the menu items. I don't think it's clear from the image but the upper and lower part of the menu are connected with one another. Let me explain that with the use of a picture created in paint:
The grey area's are the 'cut-out' parts I was talking about. The upper and lower part are connected with each other.
I hope this is clear and I'm hoping for someone to help. Thanks in advance!
EDIT:
Herewith some code sample and JSFiddle, this is how far I got.
<div class="behandelingen-en-prijzen">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
.behandelingen-en-prijzen
{
}
.behandelingen-en-prijzen ul li
{
display: inline-block;
padding: 20px;
background-color: #000;
background-color:rgba(0,0,0,0.3);
}
.behandelingen-en-prijzen ul li a
{
text-transform: uppercase;
color: #000;
}
you can do it without using images
HTML
<ul class="cutout">
<li>
home
</li>
<li>
about
</li>
<li>
contact
</li>
</ul>
CSS
body{ background: url(https://i.imgur.com/lsoomRq.jpg); }
.cutout{ list-style: none; padding: 0; border: 3px solid rgba(235, 235, 235, 0.8); }
.cutout, .cutout li{ height: 40px; line-height: 40px; overflow: hidden; }
.cutout li{ float: left; width: 33.33%; text-align: center; }
.cutout a{ display: block; margin-right: 3px; background: rgba(235, 235, 235, 0.8); color: #555; text-transform: uppercase; font-family: sans-serif; text-decoration: none;}
.cutout a:hover{background: #fff}
.cutout li:last-child{ float: right; }
.cutout li:last-child a{margin-right: 0; }
Updated the fiddle: http://jsfiddle.net/a7d9v/3/
Removed padding from li and left 1px, added padding to a and floated the li - left.
<div class="behandelingen-en-prijzen">
<ul>
<li>Home</li>
<li>About</li>
<li><a class="no-border" href="#">Contact</a></li>
</ul>
</div>
.behandelingen-en-prijzen ul {
list-style: none;
width: 100%;
}
.behandelingen-en-prijzen ul li
{
float: left;
padding: 1px;
background-color: #000;
background-color:rgba(0,0,0,0.3);
}
.behandelingen-en-prijzen ul li a
{
text-transform: uppercase;
color: #fff;
display: block;
padding: 20px;
border-right: 1px solid #fff;
}
.behandelingen-en-prijzen ul li a.no-border {
border: none;
}
When I tried to create a button on which I have a link embedded with the functionality of you clicking the button even if it's outside of the exact string on navigation bar using HTML5 and CSS3, I can't create what I hoped. What am I missing on the following code?
HTML file
<nav>
<ul id='main_menu'>
<li><a href='/'>Home</a></li>
<li><a href='/l1'>Link1</a></li>
<li><a href='/l2'>Link2</a></li>
<li><a href='/l3'>Link3</a></li>
</ul>
</nav>
and, CSS file
ul#main_menu li{
display: inline-block;
background-color: red;
border: 5px solid;
list-style: none;
padding: 3px;
border-radius: 5px 5px;
}
When I opened my browser and accessed to it, the result is a crappy button, with no functionality of clicking outside of the string. How can it be feasible?
Thanks.
please try the following css
ul#main_menu li {
display:block;
list-style:none;
float:left;
}
ul#main_menu li a{
display: inline-block;
background-color: #fefefe;
border: 2px solid;
padding: 3px;
border-radius: 5px 5px;
color:rgb(40,40,40);
text-decoration:none;
}
ul#main_menu li a:hover {
background-color: #ff0000;
border: 3px solid;
}
Here is my solution.
HTML
<nav>
<ul id='main_menu'>
<li><a href='/'>Home</a></li>
<li><a href='/l1'>Link1</a></li>
<li><a href='/l2'>Link2</a></li>
<li><a href='/l3'>Link3</a></li>
</ul>
</nav>
CSS
ul#main_menu {
list-style:none;
}
ul#main_menu li {
display:inline-block;
}
ul#main_menu li a{
display: inline-block;
background-color: #fefefe;
border: 1px solid;
list-style: none;
padding: 3px;
border-radius: 5px 5px;
color:rgb(40,40,40);
text-decoration:none;
}
ul#main_menu li a:hover {
background-color: rgb(150,150,150);
}
Code it self is bit wrong, here is what you have to use.
place it in your css sheet
#main_menu ul{
list-style: none;
}
#main_menu li{
display: inline-block;
background-color: red;
border: 5px solid;
list-style: none;
padding: 3px;
border-radius: 5px 5px;
}
a{
text-decoration:none;
}
#main_menu li:hover{
background-color: green;
}
To create a button link it is very easy in html. The following code will give you html to make a button link very easily. You will also add a bit of css.
HTML
<body>
<nav>
<button onclick="window.location.href='https://example.com'">Example</button>
</nav>
</body>
CSS
body {
background-color: black;
}
nav {
background-color: white;
}
nav button {
background-color: red;
height: 30px;
}
nav button:hover {
cursor: pointer;
background-color: blue;
}