I want to make the links clickable only on text. The problem is that the links can be clicked on anywhere on the right to the text as well. How do I make it such that the link can be clicked on text only? I have included a part of my website where the problem lies in the links at the bottom of the navigation bar. Thanks for the advice!
<head>
<style>
.topnav {
background-color: #F2C369;
overflow: hidden;
max-width: 70%;
margin-left: auto;
margin-right: auto;
}
.topnav a {
float: left;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
font-weight: bold;
}
.topnav a:hover {
background-color: red;
color: white;
}
.topnav a.active {
background-color: #e3ef34;
color: black;
}
.sidebar {
background-color: #FCEFDC;
width: 20%;
display: inline-block;
box-sizing: border-box;
float: left;
position: absolute;
left:0px;
}
.links-box {
background-color: none;
width: 100%;
border: 1px solid black;
display: inline-block;
box-sizing: border-box;
float: left;
padding: 10px;
}
.links-box a {
display: block;
}
</style>
</head>
<body>
<div class="topnav">
Main
All
About
Gallery
Contact
</div>
<div class="content-container">
<div class="sidebar">
<div class="links-box">
<div class="link-header">Header</div>
Link 1
Link 2
</div>
</div>
</div>
</body>
Update your .links-box a with:
.links-box a {
display: block;
float: left;
clear: both;
}
Wrap your link(<a href="">) in the div and removed .links-box a { display: block;} from css
<head>
<style>
.topnav {
background-color: #F2C369;
overflow: hidden;
max-width: 70%;
margin-left: auto;
margin-right: auto;
}
.topnav a {
float: left;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
font-weight: bold;
}
.topnav a:hover {
background-color: red;
color: white;
}
.topnav a.active {
background-color: #e3ef34;
color: black;
}
.sidebar {
background-color: #FCEFDC;
width: 50%;
display: inline-block;
box-sizing: border-box;
float: left;
position: absolute;
left:0px;
}
.links-box {
background-color: none;
width: 100%;
border: 1px solid black;
display: inline-block;
box-sizing: border-box;
float: left;
padding: 10px;
}
</style>
</head>
<body>
<div class="topnav">
Main
All
About
Gallery
Contact
</div>
<div class="content-container">
<div class="sidebar">
<div class="links-box">
<div class="link-header">Header</div>
<div>Link 1</div>
<div>Link 2</div>
</div>
</div>
</div>
</body>
Change this part of your css:
.topnav {
padding: 14px 16px;
}
a {
float: left;
color: black;
text-align: center;
margin: 10px;
text-decoration: none;
font-size: 17px;
font-weight: bold;
}
replace anchor tags which includes "Link 1" and "Link 2" with the following un-ordered list.
<ul>
<li>
Link 1
</li>
<li>
Link 2
</li>
</ul>
and then add following CSS as well.
ul li{
list-style: none;
}
ul{
margin:0px;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 0px;
}
finally remove the following css block
.links-box a {
display: block;
}
This should done your work.
Related
I got this sidebar but I wonder how can I add an item to the bottom of the sidebar. here is the current code.
body {
margin: 0;
font-family: "Lato", sans-serif;
}
.sidebar {
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
}
.sidebar a {
display: block;
color: black;
padding: 16px;
text-decoration: none;
}
.sidebar a.active {
background-color: #04AA6D;
color: white;
}
.sidebar a:hover:not(.active) {
background-color: #555;
color: white;
}
div.content {
margin-left: 200px;
padding: 1px 16px;
height: 1000px;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="sidebar">
<a class="active" href="#home">Home</a>
News
Contact
About
</div>
<div class="content">
Dummy
</div>
</body>
</html>
Currently, when I add an item to the sidebar it comes just below the last item, I want it to be at the bottom end even when the content side has a scroll bar, like the profile icon seen in most apps
The first thing to to is actually put your extra element inside the sidebar then leverage flexbox column layout,
body {
margin: 0;
font-family: "Lato", sans-serif;
}
.sidebar {
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
position: fixed;
min-height: 100vh;
overflow: auto;
display: flex;
flex-direction: column;
}
.sidebar a {
display: block;
color: black;
padding: 6px;
text-decoration: none;
}
.sidebar a.active {
background-color: #04AA6D;
color: white;
}
.sidebar a:hover:not(.active) {
background-color: #555;
color: white;
}
div.content {
margin-top: auto;
padding: 6px;
background: rebeccapurple;
color: white;
}
<div class="sidebar">
<a class="active" href="#home">Home</a>
News
Contact
About
<div class="content">
Dummy
</div>
</div>
I'm attempting to create a navbar with two dropdown menus and after lots of fiddling with the dropdown menu I've got it sorta working. But it's made the rest of the items out of order.
https://jsfiddle.net/o5pcs1y7/
body {
font-family: Arial;
background-color: #FAFAFA;
}
.container {
width: 960px;
position: relative;
margin-left: auto;
margin-right: auto;
background-color: #FAFAFA;
padding: 10px 10px 10px;
}
.header h1 {
border-bottom: solid 2px #2c3840;
text-transform: uppercase;
color: #2c3840;
}
.header img {
float: right;
position: relative;
width: 90px;
margin-top: -60px;
}
.nav {
background-color: #2c3840;
position: relative;
width: 100%;
float: left;
height: 41px;
margin-top: -22px;
}
.nav a {
font-family: Arial;
float: left;
display: inline-block;
color: #FAFAFA;
text-align: center;
padding: 10px 14px;
text-decoration: none;
font-size: 18px;
}
.nav a:hover {
background-color: #6d4b4f;
}
.projects {
position: relative;
display: inline-block;
}
.projects-content {
display: none;
position: absolute;
background-color: #FAFAFA;
min-width: 160px;
padding: 10px 14px;
z-index: 1;
text-decoration: none;
}
.projects:hover .projects-content {
display: block;
}
.services {
position: relative;
display: inline-block;
}
.services-content {
display: none;
position: absolute;
background-color: #FAFAFA;
min-width: 160px;
padding: 12px 16px;
z-index: 1;
text-decoration: none;
}
.services:hover .services-content {
display: block;
}
<!doctype html>
<title>Werribee Roadworthy Centre</title>
<link rel="shortcut icon" type="image/png" href="favicon.png" />
<body>
<div class="container">
<div class="header">
<h1>Werribee Roadworthy Centre</h1>
<img src="car.png">
</div>
<div class="nav">
Home
<div class="services">
Services
<div class="services-content">
1
2
3
</div>
</div>
<div class="projects">
Projects
<div class="projects-content">
1
2
3
</div>
</div>
Photo Gallery
Contact Us
</div>
<div class="section">
</div>
<div class="aside">
</div>
</div>
</body>
This is the code. The ordering of the navbar is correct in the HTML just not in the finished product. Also don't mind the broken dropdown.
Since the parent .nav could have a child of div or either a, you didn't float the div to left like you float a and that what was making the mess:
you just have to add:
.nav > div {
float: left;
}
body {
font-family: Arial;
background-color: #FAFAFA;
}
.container {
width: 960px;
position: relative;
margin-left: auto;
margin-right: auto;
background-color: #FAFAFA;
padding: 10px 10px 10px;
}
.header h1 {
border-bottom: solid 2px #2c3840;
text-transform: uppercase;
color: #2c3840;
}
.header img {
float: right;
position: relative;
width: 90px;
margin-top: -60px;
}
.nav {
background-color: #2c3840;
position: relative;
width: 100%;
float: left;
height: 41px;
margin-top: -22px;
}
.nav a {
font-family: Arial;
float: left;
display: inline-block;
color: #FAFAFA;
text-align: center;
padding: 10px 14px;
text-decoration: none;
font-size: 18px;
}
.nav > div {
float: left;
}
.nav a:hover {
background-color: #6d4b4f;
}
.projects {
position: relative;
display: inline-block;
}
.projects-content {
display: none;
position: absolute;
background-color: #FAFAFA;
min-width: 160px;
padding: 10px 14px;
z-index: 1;
text-decoration: none;
}
.projects:hover .projects-content {
display: block;
}
.services {
position: relative;
display: inline-block;
}
.services-content {
display: none;
position: absolute;
background-color: #FAFAFA;
min-width: 160px;
padding: 12px 16px;
z-index: 1;
text-decoration: none;
}
.services:hover .services-content {
display: block;
}
<!doctype html>
<title>Werribee Roadworthy Centre</title>
<link rel="shortcut icon" type="image/png" href="favicon.png" />
<body>
<div class="container">
<div class="header">
<h1>Werribee Roadworthy Centre</h1>
<img src="car.png">
</div>
<div class="nav">
Home
<div class="services">
Services
<div class="services-content">
1
2
3
</div>
</div>
<div class="projects">
Projects
<div class="projects-content">
1
2
3
</div>
</div>
Photo Gallery
Contact Us
</div>
<div class="section">
</div>
<div class="aside">
</div>
</div>
</body>
Hope this helps :)
I have a nav i made that works just as i want.. my only issue is the button drop down is to display to the right of the first 2 links how ever it displays first and forces the links to display last.
it displays the links after the drop down so instead of
logo --------------------- Home- News- Dropdown
it displays
logo --------------------- Dropdown- Home- News
drop down should be on the end
CODE
#siteHeader {
padding-top: 22px;
height: 90px;
background-color: black;
}
.logo {
display: block;
height: 45px;
width: auto;
float: left;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width: auto;
display: block;
float: right;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
float: left;
}
li a:hover {
background-color: #000;
}
.dropbtn {
background-color: #000;
color: white;
padding-top: 16px;
padding-bottom: 33px;
font-size: 12px;
text-transform: uppercase;
border: none;
cursor: pointer;
min-width: 100px;
}
.dropdown {
position: relative;
display: inline-block;
float: right;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #434343;
min-width: 185px;
right: 0;
text-transform: uppercase;
}
.dropdown-content a {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
font-size: 12px;
}
.dropdown-content a:hover {
background-color: #000000
}
.dropdown:hover .dropdown-content {
display: block;
float: left;
}
.dropdown:hover .dropbtn {
background-color: #434343;
color: white;
}
<div id="siteHeader">
<div class="container-fluid">
<img src="../content/images/official_logo_white.png" class="logo">
<ul>
<li>Home
</li>
<li>News
</li>
</ul>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
</div>
just switch them
#siteHeader {
padding-top: 22px;
height: 90px;
background-color: black;
}
.logo {
display: block;
height: 45px;
width: auto;
float: left;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width: auto;
display: block;
float: right;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
float: left;
}
li a:hover {
background-color: #000;
}
.dropbtn {
background-color: #000;
color: white;
padding-top: 16px;
padding-bottom: 33px;
font-size: 12px;
text-transform: uppercase;
border: none;
cursor: pointer;
min-width: 100px;
}
.dropdown {
position: relative;
display: inline-block;
float: right;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #434343;
min-width: 185px;
right: 0;
text-transform: uppercase;
}
.dropdown-content a {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
font-size: 12px;
}
.dropdown-content a:hover {background-color: #000000}
.dropdown:hover .dropdown-content {
display: block;
float: left;
}
.dropdown:hover .dropbtn {
background-color: #434343;
color: white;
}
<div id="siteHeader">
<div class="container-fluid">
<img src="../content/images/official_logo_white.png" class="logo">
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<ul>
<li>Home</li>
<li>News</li>
</ul>
</div>
</div>
If I were you I would remove those floats and simplify by using flexbox
#siteHeader {
padding-top: 22px;
height: 90px;
background-color: black;
}
.container-fluid {
display: flex
}
.nav {
flex: 1;
display: flex;
justify-content: flex-end
}
.logo {
flex: 0 50px
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width: auto;
display: block;
}
li {
display: inline-block
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #000;
}
.dropbtn {
background-color: #000;
color: white;
padding-top: 16px;
padding-bottom: 33px;
font-size: 12px;
text-transform: uppercase;
border: none;
cursor: pointer;
min-width: 100px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #434343;
right: 0;
text-transform: uppercase;
}
.dropdown-content a {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
font-size: 12px;
}
.dropdown-content a:hover {
background-color: #000
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #434343;
color: white;
}
<div id="siteHeader">
<div class="container-fluid">
<img src="../content/images/official_logo_white.png" class="logo">
<div class="nav">
<ul>
<li>Home
</li>
<li>News
</li>
</ul>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
</div>
</div>
In <ul> I have changed its css property display: block to display: inline-block and for <div class="dropdown"> I have also made it display: inline-block as by default div is block level of element so both can fit in same line and I have wrap both <div> and <ul> to one <div> that will put them on right side by using float: right
see answer in below snippet.
#siteHeader {
padding-top: 22px;
height: 90px;
background-color: black;
}
.logo {
display: block;
height: 45px;
width: auto;
float: left;
}
.nav {
float: right;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width: auto;
display: inline-block;
float: left;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
float: left;
}
.dropdown {
display: inline-block;
float: left;
}
<div id="siteHeader">
<div class="container-fluid">
<img src="../content/images/official_logo_white.png" class="logo">
<div class="nav">
<ul>
<li>Home</li>
<li>News</li>
</ul>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
</div>
</div>
I am recreating the Google homepage for an assignment on TheOdinProject. I am almost finished, but the problem I am having is that I can't seem to get the hyperlink to be visible within the footer container. I tried changing the text color, and I checked the properties within the list item selector and I should be able to see the hyperlink "About Google" but I can't. What am I doing wrong?
body {
font-family: Arial;
}
#logo {
display: block;
width: 350px;
margin : 0 auto;
margin-top: 100px;
position: relative;
text-align: center;
}
input {
margin-top: -50;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
position: relative;
line-height: 2;
display: block;
width: 500px;
}
#logo img {
max-width: 100%;
}
.search_button {
margin-left: 800px;
margin-top: 5px;
display: inline;
float: left;
}
.feeling_lucky_button {
margin-right: 800px;
margin-top: 5px;
float: right;
display: inline;
}
#navbar {
background-color: #2d2d2d;
width: 100%;
height: 30px;
position: fixed;
left: 0;
top: 0;
}
#navbar ul {
margin-top: 5px;
padding-left: 8px;
}
li {
font-size: 13px;
padding: 5px 8px 5px 8px;
display: inline;
list-style-type: none;
}
#navbar ul li a {
font-weight: bold;
color: #BBBBBB;
text-decoration: none;
}
#navbar ul li a:hover {
color: white;
text-decoration: none;
}
#footer {
width: 100%;
height: 30px;
position: fixed;
border-top: 1px solid rgba(0, 0, 0, 0.1);
bottom: 0;
left: 0;
}
#footer li {
margin-bottom: 5px;
padding-left: 8px;
}
#footer ul li a {
font-weight: bold;
color: red;
text-decoration: none;
}
#footer ul li a:hover {
color: red;
font-weight: bold;
text-decoration: none;
}
#footer ul li a:link {
color: red;
}
#footer ul li a:visited{
color: red;
}
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Google Homepage Project</title>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
</head>
<body>
<div id="navbar">
<ul>
<li>Home</li>
</div>
<div id="logo">
<img src="http://fineprintnyc.com/images/blog/history-of-logos/google/google-logo.png">
</div>
<div id="searchbar">
<form action="#" method="POST">
<input type="text" name="searchbar">
</div>
<button class="search_button">Google Search</button>
<button class="feeling_lucky_button">I'm feeling lucky</button>
<div id="footer">
<ul>
<li><a href="http://www.google.com>About Google</a></li>
</ul>
</div>
</body>
</html>
Try this in footer. You missed double quote.
<li>About Google</li>
Fiddle:https://jsfiddle.net/ywu325mw/1/
In your footer:
<a href="http://www.google.com>About Google</a>
should be:
About Google
You forgot to close " the href attr
So I'm building a website in html and css. I have made a navigation bar with the links, but when I zoom out, the links go underneath one another instead of inline. If someone can give me some pointers, that'd be great. Thanks
<html>
<head>
<link rel="stylesheet" href="style/style.css" />
</head>
<body>
<div class="wrap">
<div class="logo"><img src="img/logo.png"></div>
<div class="nav">
<ul>
<li>HOME</li>
<li>PRODUCTS</li>
<li>SHOPS</li>
<li>FAQ</li>
<li>ABOUT US</li>
</ul>
</div>
<div class="main">
</div>
</div>
</body>
</html>
body {
padding: 0;
margin: 0;
background: #1b1b1b url('../img/bg.jpg') no-repeat fixed top center;
}
.logo {
margin-bottom: 10px;
margin: auto;
width: 524px;
}
.wrap {
width: 960px;
margin: auto;
}
.nav {
height: 37px;
background-color: rgba(26,26,26,0.8);
border: 1px solid black;
margin-bottom: 10px;
}
ul {
margin: 0;
padding: 0;
text-align: center;
line-height: 38px;
}
ul li {
display: inline;
color: #828282;
padding: 2px 40px;
background: #595959;
border:1px solid #828282;
margin: 0 10px;
}
ul li a {
text-decoration: none;
color: white;
font-family: arial;
}
ul li a:hover {
}
.main {
min-height: 300px;
height: auto;
background-color: rgba(26,26,26,0.8);
border: 1px solid black;
}
"the links go underneath one another instead of inline"
To fix this, you will want to add the float: left; property to your li like so:
ul li {
display: inline-block;
float: left;
color: #828282;
padding: 2px 40px;
background: #595959;
border:1px solid #828282;
margin: 0 10px;
}