I am fairly new to CSS and I'm trying to make my second website. My problem is that the entire navbar is clickable. The navbar items, on the other hand, is okay and it should have clickable fields.
The navbar should be set on the right side of the screen and it should display (portfolio, about me, contacts, and resume) from left to right.
I have tried messing the setting between "display: inline" and its padding to see if that fixed the issue but I'm still getting clickable fields around the entire navbar. I don't know how to fix this issue.
CSS:
* {
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
body {
background-color: #fff;
overflow: hidden;
}
ul.menu {
padding: 20px 8px;
margin: auto 0px;
color: #fff;
font-family: arial, helvetica, sans-serif;
list-style: none;
cursor: default;
text-align: center;
}
.menu li {
display: inline;
}
.menu a {
text-align: center;
padding: 8px 25px;
background: #fff;
color: #272727;
text-decoration: none;
float: right;
border: 1px solid grey;
border-radius: 80px;
margin: 10px;
}
.menu a:hover {
background: #272727;
color: #fff;
transition: all 0.3s;
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Beta Portfolio</title>
<link rel="stylesheet" href="CSS/styles.css">
</head>
<body>
<nav class="main-nav">
<ul class="menu">
<li>Resume</li>
<li>Contacts</li>
<li>About Me</li>
<li>Portfolio</li>
</ul>
</nav>
</body>
</html>
Again, the fields around each of the navbar items should be clickable not the entire navbar section. I'm aware of the jsfiddle website but I'm trying not to alter my style too much because I might not like the end result.
[EDIT]
Here is the revised CSS code with minor changes:
CSS (New):
ul.menu {
padding: 20px 8px;
margin: auto 0px;
color: #fff;
font-family: arial, helvetica, sans-serif;
list-style: none;
cursor: default;
text-align: center;
float: right;
justify-content: space-between;
}
.menu li {
display: inline-block;
background: red;
}
.menu a {
text-align: center;
padding: 8px 25px;
background: #ccc;
color: #272727;
text-decoration: none;
border: 1px solid grey;
border-radius: 80px;
margin: 10px;
display: inline-block
}
Padding is clickable in anchors. Use margin instead. Display: inline-block is a mess when items are floated.
li a {margin: 15px; line-height: 40px;} /* just text clickable */
OR
li a {margin: 15px 0; padding: 0 15px; line-height: 40px;} /* text and left/right neighborhood clickable */
See this JSFiddle to see the differents. 1st is your code, 2nd and 3rd are my variants used in the answer. Red background shows you what area is clickable.
With a few suggestions from the community, the final CSS code is the following: (its the same as the [EDIT] version, but I'll post it here just in case)
ul.menu {
padding: 20px 8px;
margin: auto 0px;
color: #fff;
font-family: arial, helvetica, sans-serif;
list-style: none;
cursor: default;
text-align: center;
float: right;
justify-content: space-between;
}
.menu li {
display: inline-block;
background: red;
}
.menu a {
text-align: center;
padding: 8px 25px;
background: #ccc;
color: #272727;
text-decoration: none;
border: 1px solid grey;
border-radius: 80px;
margin: 10px;
display: inline-block
}
You have set the cursor to look like it's clickable.
ul.menu {
cursor: pointer;
}
This will always make it look like it is clickable. Just get rid of that completely or use default instead.
ul.menu {
cursor: default;
}
Check this out to look at the different types of cursors
Related
I am trying to create an extremely simple navbar. I have added bootstrap to my project as well as my own style sheet. I have included only 1 bootstrap class on my page (I think). I have added a custom hover effect but for some reason, I get the hover animation plus another animation playing with the color changing and other stuff.
Here is how the hover is right now:
No Hover
Hover
I want the text to stay white on hover and not have the black underline.
Here is my code:
HTML/EJS
<head>
<meta charset="utf-8">
<title>Madhose</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/styles.css">
<nav>
Madhose
<ul>
<li>Home</li>
<li>Poems</li>
<li>Recipes</li>
<li>Posts</li>
</ul>
</nav>
<body>
<div class="container-fluid">
<h1>Posts</h1>
<p><%= postText %></p>
<% posts.forEach(function(post){ %>
<h1><%= post.title.substring(0,200) %></h1>
<p><%= post.content.substring(0,200) %>...
Read More</p>
<%}); %>
</div>
</div>
</body>
</html>
CSS
#import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');
.container-fluid {
padding-top: 70px;
padding-bottom: 70px;
}
.navbar {
padding-top: 15px;
padding-bottom: 15px;
border: 0;
border-radius: 0;
margin-bottom: 0;
font-size: 12px;
letter-spacing: 5px;
}
.footer-padding {
padding-bottom: 60px;
}
.footer p {
margin-top: 25px;
font-size: 12px;
color: #fff;
}
nav {
width: 100%;
position: fixed;
z-index: 2;
display: flex;
align-items: center;
padding: 0;
margin-top: -7px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
position: fixed;
width: 100%;
background-color: rgb(0, 120, 255);
height: auto;
display: flex;
justify-content: flex-end;
}
li a {
color: rgb(235, 222, 222);
text-align: center;
padding: 16px;
text-decoration: none;
font-size: 19px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
display: flex;
align-items: center;
justify-content: flex-end;
display: block;
}
li a::after {
content: '';
display: block;
width: 0;
height: 2px;
background-color: rgb(235, 222, 222);
transition: width .3s;
}
li a:hover::after {
width: 100%;
transition: width .3s;
}
.logo {
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
font-size: 25px;
font-family: 'Oswald';
display: flex;
z-index: 3;
}
.logo:hover{
color:white;
text-decoration: none;
}
h1{
font-family: 'Oswald';
}
Im almost 100% sure this problem is happening from bootstrap but if its anything else please tell me!
Your styling will only override bootstraps if you have your cascading correctly written. If you use a tool like devtools in chrome and inspect the CSS of an element, you can see that there are multiple levels of CSS targeting an element, but not all are actively applied, as some are overwritten. Your styles may not take precedence if their cascading value does not come out to equal more than Bootstrap's value.
As such, if you want to override the values more consistently, use psuedo-namesapacing:
nav#topNavigation ul li a {}
nav#topNavigation ul li a:hover {}
By adding a unique ID to the element, we are increasing the cascade value for this selector, and our css is applied rather than Bootstrap's.
I wanted to reduce the space between my links for the navigation on the left side. I tried padding but it messes with my float.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>projekt</title>
</head>
<body>
<header>
<nav>
<ul>
<li class="home">home</li>
<li class="nav">contact</li>
<li class="nav">list</li>
<li class="nav">office</li>
<li class="nav">projects</li>
<li class="nav">plans</li>
</ul>
</nav>
</header>
<div class="navline"></div>
</body>
</html>
CSS:
body{
margin: 0;
padding: 0;
}
nav ul{
margin: 0;
padding: 0;
font-family: proxima-n-w01-reg,sans-serif;
list-style-type: none;
}
.navline
{
border-bottom:1px solid rgb(226, 223, 223);
padding-bottom:80px
}
nav li.home{
display: flex;
margin: 30px 0 0 160px;
float: left;
font-size: 20px;
font-weight: 400;
text-transform: uppercase;
}
nav li.nav{
display: flex;
margin: 30px 100px 0 0px;
float: right;
font-size: 18px;
}
nav li a{
display: flex;
text-decoration: none;
color: black;
}
Should I not use float to position my navigations on the left and right side and rather display:flex and also to reduce the space?
Solution would be like:
plans projects office ....
But it's more like this:
plans projects office...
Try changing your CSS file, this is the example css file for a nav bar. You can add the missing attributes for the specific class in your css file. This would solve your purpose.
ul.nav {
width:100%;
margin:0 auto;
padding:0;
list-style:none;
background-color:#62564A;
text-align:center;
font-family: sans-serif;
}
.nav li {
display:inline-block;
width:33%;
margin:0;
padding:0;
}
.nav a {
text-align:center;
padding:12px 0 13px 0;
margin:0;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
display:block;
}
.nav a:hover {
background:#A26A42;
border:none;
}
You have to decrease the size of the margin ..
nav li.nav{
display: flex;
margin: 30px 20px 0 0px;
float: right;
font-size: 18px;
}
There's no point of adding display:flex on li. Logically, I would say this css code for li as incorrect. Instead modify your css this way:
nav ul{
margin: 30px 0 0 0;
padding: 0;
font-family: proxima-n-w01-reg,sans-serif;
list-style-type: none;
display: flex;
justify-content: space-evenly; /* You may also play around this css attribute for evenly distributed spacing instead of applying margin or so on li tag */
}
nav ul > li{
margin: 0 10px; /* You may change this spacing as per your need */
font-size: 20px;
font-weight: 400;
text-transform: uppercase;
}
nav ul > li > a{
display: block;
}
I'll usually suggest applying margin-top on ul instead of individual li but that depends on you also.
I'm trying to make scroll nav like youtube nav
I want to make the scroll-horizontal div get the width of the inline-block elemtns which is <li>
I want someway to make the scroll-horizontal div get the current width automatically even if I added more <li> elements to the nav later
<body>
<nav>
<div class="scroll-horizontal">
<li class=" menu-item"><a class="active" href="">Home</a></li>
<li class=" menu-item">Models</li>
<li class="menu-item">Photos</li>
<li class="menu-item">Videos</li>
<li class="menu-item">Youtube</li>
<li class="menu-item">Links</li>
</div>
</nav>
<style type="text/css">
*{
margin: 0;
padding: 0
}
/*NAV*/
nav{
width: 100% !important;
background: red;
overflow: auto;
}
.scroll-horizontal{
min-width: 300%;
}
nav li{
list-style: none;
display: inline-block;
}
nav a{
text-align: center;
text-decoration: none;
color: #444;
display: block;
padding: 0 20px;
width: 100px;
}
</style>
</body>
the nav that youtube has:
youtube nav
you can see that the nav that they had don't have empty space at the end of the nav like what I have
this might partly answer your question:
As I understand it, the horizontal scroll arrows for the tab menu on youtube are shown, depending on the window width. So I would use the css '#media' rule to specify the width, when the arrows should be displayed. Here is a solution that displays both left and right arrows as soon as the window gets too narrow to display the complete menu:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
*{
margin: 0;
padding: 0;
}
body {
font-family: Arial;
background-color: #eee;
}
div.scrollmenu {
padding: 0 38px 0 38px;
overflow: hidden;
white-space: nowrap;
background-color: #fff;
}
div.scrollmenu a {
display: inline-block;
color: #000;
text-align: center;
padding: 14px;
text-decoration: none;
background-color: #fff;
}
div.scrollmenu a:hover {
background-color: #aaa;
}
#btn-scroll-lft {
position: absolute;
top: 0;
left: 0;
background-color: #fff;
padding: 15px;
border: 0px;
height: 46px;
font-weight: bold;
display: none;
}
#btn-scroll-rgt {
position: absolute;
top: 0;
right: 0;
background-color: #fff;
padding: 15px;
border: 0px;
height: 46px;
font-weight: bold;
display: none;
}
#media only screen and (max-width: 600px) {
#btn-scroll-lft {
display: block;
}
#btn-scroll-rgt {
display: block;
}
}
</style>
</head>
<body>
<button id="btn-scroll-lft" onclick="scrollWinLeft()"><</button>
<div class="scrollmenu" id="scrollmenu">
one
two
three
four
five
six
seven
eight
nine
</div>
<button id="btn-scroll-rgt" onclick="scrollWinRight()">></button>
<script>
function scrollWinLeft() {
document.getElementById('scrollmenu').scrollBy(-100,0);
}
function scrollWinRight() {
document.getElementById('scrollmenu').scrollBy(100, 0);
}
</script>
</body>
</html>
I have made a list of links in html for a prototype of a website:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="stuffy_stylesheets.css">
<title> INF </title>
</head>
<body>
<div id= "content">
<p>More Stuff</p>
<p>Even More Stuff</p>
</div>
<div id= "list">
<ul id = "menu">
<li> wad</li>
<li> wad</li>
<li> wad</li>
<li> wad</li>
</ul>
</div>
</body>
</html>
These pages so far mean absolutely nothing, however,I wanted to style and format the links so that they are towards the top left of the web page and inline with each other, to do this, I have experimented with display: inline-block, however, for some odd reason that doesn't seem to work. So I was wondering what code I would need to add to format it this way. My CSS is below:
body{
font-family: "Times New Roman", Times, serif;
margin: 0px;
padding: 0px;
background: #434447;
}
#content
{
color: #eaeaea;
text-align: center;
}
#list{
display:flex;
}
#menu
{
padding: 10px;
float:left;
margin: 0px;
width: 15%;
}
#menu li
{
list-style: none;
width:10em;
display: block;
border-width:1px;
border-style:outset;
border colour: black;
padding: 3px 2px 3px 2px;
color: #545456;
background: #babbc1;
text-decoration: none;
text-align: center;
}
#menu a
{
color:#545456;
background: #babbc1;
text-decoration: none;
text-align:center;
display:block;
cursor:pointer;
}
#menu li:hover
{
border-style:inset;
}
The only thing you seem to be doing wrong here is the width: 15% that you've applied on the #menu.
Skipping that property and adding display: inline-block on your li elements should solve this.
Here's a fiddle for the same.
P.S. - While you're at it, change border colour to border-color.
Change your css code to something like this.
body {
font-family: "Times New Roman", Times, serif;
margin: 0px;
padding: 0px;
background: #434447;
}
#content {
color: #eaeaea;
text-align: center;
}
#list {
display: flex;
}
#menu {
padding: 10px;
margin: 0px;
}
#menu li {
list-style: none;
width: 10em;
display: inline-block;
border-width: 1px;
border-style: outset;
border colour: black;
padding: 3px 2px 3px 2px;
color: #545456;
background: #babbc1;
text-decoration: none;
text-align: center;
}
#menu a {
color: #545456;
background: #babbc1;
text-decoration: none;
text-align: center;
display: block;
cursor: pointer;
}
#menu li:hover {
border-style: inset;
}
I have a navbar on my webpage, I have also got information on my webpage. When I remove the information (paragraph and headings) the navbar functions perfectly. However when I place the information back, the navbar doesn't work whatsoever. Why does a website do this? Thanks.
JSFiddle - With Information
JSFIDDLE - Without Information
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="homepage.css">
<title>CSGOMarble</title>
</head>
<body>
<h3 style="float: right; margin-right: 25px;">SIGN IN WITH STEAM</h3>
<div class="logo">
<img src="logo.png" alt="LOGO" height="60px" width="200px">
</div>
<hr>
<div class="navbar">
<ul>
<li style="background-color: #D9D9D9; font-size: 20px; padding: 12px 0 12px 0;">MENU</li>
<li>COINFLIP</li>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
</div>
<div class="container">
<h2>CSGOMarble</h2>
<u><h3 style="font-size: 20px; margin-right: 750px; margin-top: 75px;">What is CSGOMarble?</h3></u>
<p style="font-size: 15px; margin-left: 478px; margin-right: 1000px; margin-top: 25px; text-align: justify;">CSGOMarble is a website which enables you to gamble your Counter-Strike skins so that you can try and turn a profit. We have many gamemodes, such as Coinflip, Roulette and Jackpot. Why not SIGN IN to test your luck?</p>
</div>
</body>
</html>
CSS:
body {
font-family: Arial, Verdana, sans-serif;
background-color: white;
}
.logo {
margin-left: 25px;
}
.navbar {
margin-top: 50px;
margin-left: 25px;
padding: 0;
font-size: 15px;
float: left;
display: inline-block;
}
.container {
width: 100%;
margin-top: 20px;
font-size: 25px;
display: inline-block;
position: fixed;
text-align: center;
}
a {
text-decoration: none;
color: black;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 175px;
background-color: #f1f1f1;
border: 2px solid #555;
}
li a {
display: block;
color: #000;
padding: 12px 0 12px 0;
text-decoration: none;
}
li a:hover {
background-color: #555;
color: white;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
li:last-child {
border-bottom: none;
}
When you added position fixed to container , you can add z-index on both container and nav divs for fix this in your way as you want.
.navbar {
margin-top: 50px;
margin-left: 25px;
padding: 0;
font-size: 15px;
float: left;
display: inline-block;
z-index: 2;
position: fixed;
}
.container {
width: 100%;
margin-top: 20px;
font-size: 25px;
display: inline-block;
position: fixed;
text-align: center;
z-index: 1;
}
Change this Css Hope it helps
Do not use position:fixed unless you want the element to NOT SCROLL with the page. This css settings is great for headers (navbars) that remain fixed to the screen/window and are always visible.
The other one that is similar to position:fixed is position:absolute, except that it will scroll up as the user scrolls down the page. However, both absolute and fixed allow you to use top left right bottom to precisely position the element on the screen. (One tip: the parent element must be either position:absolute or position:relative (relative is common).
Change position:fixed to position:relative for the <div class="container">