Menu
i have a website with some links on them, and the links are clickable for longer than the actual link.
As seen on the picture I am able to click the links way out to the right.
I tried searching for answers, but i didnt really know how to formulate my answer, or just no answer seem to be there.
So is there a way that i can make the links to be the exact size of the text?
html {
scroll-behavior: smooth;
}
body {
margin: 0;
display: grid;
grid-template-columns: min-content 1fr;
font-family: 'Work Sans';
background-color: white;
/* this breaks position sticky in Firefox */
/* overflow-x: hidden; */
}
header {
grid-column: 1 / 3;
background: #5D5C61;
background-image: url("../Assets/Images/headerImage.jpg");
color: white;
padding: 4rem;
text-align: center;
font-family: 'Chivo';
font-size: 22px;
}
header a {
padding-right: 20px;
}
nav {
white-space: nowrap;
background: #252E39;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
/* Only stick if you can fit */
@media (min-height: 300px) {
nav ul {
position: sticky;
top: 0;
}
}
nav ul li a {
display: block;
padding: 0.5rem 1rem;
color: white;
font-size: 20px;
text-decoration: none;
}
nav ul li a.current {
background: #51656E;
}
main {
padding-top: -30px;
}
section {
padding: 2rem;
margin: 0 0 2rem 0;
}
#section-1 {
background-color: white;
}
footer {
grid-column: 1 / 3;
background: #37474F;
padding: 5rem 1rem;
}
a {
color: black;
text-decoration: none;
}
main a {
display: block;
padding-bottom: 20px;
}
a:hover {
color: #6B7B83;
text-decoration: underline;
}
a:active {
color: #6B7B83;
}
.socialIcon {
height: 20px;
width: 20px;
}
#socialMedia {
text-align: center;
}
.CALink:hover {
color: #202F36;
}
.container {
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
font-family: 'Alegreya Sans', sans-serif;
}
.control-group {
display: inline-block;
vertical-align: top;
background: #FFFFFF;
text-align: left;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
padding: 30px;
width: 65%;
height: 100%;
margin: 1%;
align-items: center;
}<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="CSS/StyleSheet.css" rel="stylesheet" type="text/css"/>
<link href='https://fonts.googleapis.com/css?family=Work Sans' rel='stylesheet'>
<link rel="icon" href="Assets/Images/faviconTTT.png"/>
<title>Silverflame</title>
</head>
<body>
<header>
<div id="socialMedia">
<a href=""><img class="socialIcon" src="Assets/Images/mark-github.svg" alt="logo" /></a>
<img class="socialIcon" src="Assets/Images/twitterSVG.svg"/>
</div>
<h1>SilverFlame</h1>
<a target="headerLink" href="https://www..dk/">Home</a>
<a target="headerLink" href="https://www..dk/CA.html">CA</a>
<a target="headerLink" href="">About</a>
</header>
<nav>
<ul>
<li><a href="#section-1">Studypoint exersice 3</a></li>
<li><a href="#section-2">Maven</a></li>
<li><a href="#section-3">Network and HTTP</a></li>
<li><a href="#section-4">JS and CA1</a></li>
<li><a href="#section-5">MODUL 2</a></li>
<li><a href="#section-5">Section 5</a></li>
<li><a href="#section-6">Section 6</a></li>
<li><a href="#section-7">Section 7</a></li>
<li><a href="#section-8">Section 8</a></li>
<li><a href="#section-9">Section 9</a></li>
</ul>
</nav>
<main>
<section id="section-1">
<div class="container">
<div clasS="control-group">
<h1>Study Point Exercise 3 - JPA, JPQL and Testing </h1>
<h3>Part 1</h3>
<a href="https://github.com///tree/master">Exercise
- JPA Entity Mappings - 1</a>
<a href="https://github.com///tree/master">Exercise
- Java Persistence - Querying - 3</a>
<h3>Part 2</h3>
<a href="#">Studypoint part two</a>
<h3>Part 3</h3>
<a href="https://github.com//ExamPrepOneJPQL">Exam Preparation
Exercise on relations and queries</a>
<a href="https://github.com//ExamPrepTwoJPQL">Exam Preparation
Exercise on JPQL</a>
<a href="#">Object Relational Mapping and Inheritance</a>
</div>
</div>
</section>
</main>
</body>
765
It's because you have those links set to display: block - you should set them to be display: inline or display: inline-block. Block level elements will automatically fill 100% of the available space horizontally.
See https://codeburst.io/block-level-and-inline-elements-the-difference-between-div-and-span-2f8502c1f95b
Edit: As someone commented, setting the links to be inline will cause them to appear on the same line. Put those links inside of some kind of wrapper (like a list <ul> with <li>s) and then the links inside of each list item.
63
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
