Is the issue of Padding Overlap with Sidebar Item List getting in the way?

Question

Is the issue of Padding Overlap with Sidebar Item List getting in the way?

I am currently new to coding in HTML and CSS, so please bear with me if my code seems outdated or unconventional. I am working on creating a basic test website with a sidebar, but I'm encountering an issue where the items in my list are overlapping due to padding.

Check out my JSFiddle here: https://jsfiddle.net/w82akt0v/

HTML:

<!DOCTYPE html> <html lang="en"> <head>
      <!--Default Stuff--> <meta charset="utf-8">
      
      <title>Abyss</title>
      
      <!--Script Links--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
      
      <script src="js/script.js"></script>
      
      <!--Stylesheet Links--> <link rel="stylesheet" text="text/css" href="css/style.css">
      
      <link rel="stylesheet" text="text/css" href="css/font-awesome.min.css">
      
      <!--Font Links--> <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> </head>
      
      <body> <!--Website Sidebar--> <div id="sidebar"> <ul> <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> <li><a href="#">Test</a></li

CSS:

* Default Stuff */ body { margin:0px; padding:0px; font-family:"Open Sans", sans-serif; }
 
 /* Website Sidebar */
 #sidebar { background:rgb(41,41,41); width:180px; height:100%; position:absolute; left:0px; top:0px; }
 
 ul { margin:0px; padding:0px; }
 
 ul li { list-style:none; }
 
 ul li a { background:rgb(41,41,41); color:#ccc; border-bottom:2px solid #111; width:160px; padding:10px; text-decoration:none; }
 
 ul li:before { content:'\f1ce'; font-family:'FontAwesome'; }

html css

Answer 1

Answer №1

Adjust the styling of li tag by removing padding from the a tag and adding it to li instead.

ul li {
  list-style: outside none none;
  padding: 10px; /* Adjusted padding value */
}

Feel free to test using the snippet below:

body {
margin:0px;
padding:0px;
font-family:"Open Sans", sans-serif;
}

/* Website Sidebar */
#sidebar {
background:rgb(41,41,41);
width:180px;
height:100%;
position:absolute;
left:0px;
top:0px;
}

ul {
margin:0px;
padding:0px;
}

ul li {
list-style:none;
  padding:15px;
  border-bottom:2px solid #111;
  display: block;
}

ul li a {
background:rgb(41,41,41);
color:#ccc;

width:160px;
text-decoration:none;
}

ul li:before {
content:'\f1ce';
font-family:'FontAwesome';
}

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <script src="js/script.js"></script>

    <!--Stylesheet Links-->
    <link rel="stylesheet" text="text/css" href="css/style.css">

    <link rel="stylesheet" text="text/css" href="css/font-awesome.min.css">

    <!--Font Links-->
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
</head>

<body>
    <!--Website Sidebar-->
    <div id="sidebar">
        <ul>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
        </ul>
    </div>
</body>

Answer 2

Adjust the styling of li tag by removing padding from the a tag and adding it to li instead.

ul li {
  list-style: outside none none;
  padding: 10px; /* Adjusted padding value */
}

Feel free to test using the snippet below:

body {
margin:0px;
padding:0px;
font-family:"Open Sans", sans-serif;
}

/* Website Sidebar */
#sidebar {
background:rgb(41,41,41);
width:180px;
height:100%;
position:absolute;
left:0px;
top:0px;
}

ul {
margin:0px;
padding:0px;
}

ul li {
list-style:none;
  padding:15px;
  border-bottom:2px solid #111;
  display: block;
}

ul li a {
background:rgb(41,41,41);
color:#ccc;

width:160px;
text-decoration:none;
}

ul li:before {
content:'\f1ce';
font-family:'FontAwesome';
}

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <script src="js/script.js"></script>

    <!--Stylesheet Links-->
    <link rel="stylesheet" text="text/css" href="css/style.css">

    <link rel="stylesheet" text="text/css" href="css/font-awesome.min.css">

    <!--Font Links-->
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
</head>

<body>
    <!--Website Sidebar-->
    <div id="sidebar">
        <ul>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
        </ul>
    </div>
</body>

Answer 3

Answer №2

To ensure the anchor tag takes on the given padding, add display:block; to it.

ul li a{display:block;}

Check out the code snippet below for reference:

/* Default Styles */
body {
margin:0px;
padding:0px;
font-family:"Open Sans", sans-serif;
}

/* Sidebar Styling */
#sidebar {
background:rgb(41,41,41);
width:180px;
height:100%;
position:absolute;
left:0px;
top:0px;
}

ul {
margin:0px;
padding:0px;
}

ul li {
list-style:none;
}

ul li a {
background:rgb(41,41,41);
color:#ccc;
border-bottom:2px solid #111;
width:160px;
padding:10px;
text-decoration:none;
  display:block;
}

ul li:before {
content:'\f1ce';
font-family:'FontAwesome';
}

<!DOCTYPE html>
<!--Default Styles-->
<title>Abyss</title>

<!--Script Links-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script src="js/script.js"></script>

<!--Stylesheet Links-->
<link rel="stylesheet" text="text/css" href="css/style.css">

<link rel="stylesheet" text="text/css" href="css/font-awesome.min.css">

<!--Font Links-->
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
</head>

<body>
<!--Sidebar Content-->
<div id="sidebar">
<ul>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
</ul>
</div>
  </body>
</html>

Answer 4

To ensure the anchor tag takes on the given padding, add display:block; to it.

ul li a{display:block;}

Check out the code snippet below for reference:

/* Default Styles */
body {
margin:0px;
padding:0px;
font-family:"Open Sans", sans-serif;
}

/* Sidebar Styling */
#sidebar {
background:rgb(41,41,41);
width:180px;
height:100%;
position:absolute;
left:0px;
top:0px;
}

ul {
margin:0px;
padding:0px;
}

ul li {
list-style:none;
}

ul li a {
background:rgb(41,41,41);
color:#ccc;
border-bottom:2px solid #111;
width:160px;
padding:10px;
text-decoration:none;
  display:block;
}

ul li:before {
content:'\f1ce';
font-family:'FontAwesome';
}

<!DOCTYPE html>
<!--Default Styles-->
<title>Abyss</title>

<!--Script Links-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script src="js/script.js"></script>

<!--Stylesheet Links-->
<link rel="stylesheet" text="text/css" href="css/style.css">

<link rel="stylesheet" text="text/css" href="css/font-awesome.min.css">

<!--Font Links-->
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
</head>

<body>
<!--Sidebar Content-->
<div id="sidebar">
<ul>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
</ul>
</div>
  </body>
</html>

Answer 5

Answer №3

Apply a line-height of 30px to the #sidebar element.

/* Default Styles */
body {
margin:0px;
padding:0px;
font-family:"Open Sans", sans-serif;
}

/* Styling for Website Sidebar */
#sidebar {
background:rgb(41,41,41);
width:180px;
height:100%;
position:absolute;
left:0px;
top:0px;
line-height:30px;
}

ul {
margin:0px;
padding:0px;
}

ul li {
list-style:none;
  padding:15px
}

ul li a {
background:rgb(41,41,41);
color:#ccc;
border-bottom:2px solid #111;
width:160px;
text-decoration:none;
}

ul li:before {
content:'\f1ce';
font-family:'FontAwesome';
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script src="js/script.js"></script>

<!--Stylesheet Links-->
<link rel="stylesheet" text="text/css" href="css/style.css">

<link rel="stylesheet" text="text/css" href="css/font-awesome.min.css">

<!--Font Links-->
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
</head>

<body>
    <!--Website Sidebar-->
    <div id="sidebar">
        <ul>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
        </ul>
    </div>
</body>

Answer 6

Apply a line-height of 30px to the #sidebar element.

/* Default Styles */
body {
margin:0px;
padding:0px;
font-family:"Open Sans", sans-serif;
}

/* Styling for Website Sidebar */
#sidebar {
background:rgb(41,41,41);
width:180px;
height:100%;
position:absolute;
left:0px;
top:0px;
line-height:30px;
}

ul {
margin:0px;
padding:0px;
}

ul li {
list-style:none;
  padding:15px
}

ul li a {
background:rgb(41,41,41);
color:#ccc;
border-bottom:2px solid #111;
width:160px;
text-decoration:none;
}

ul li:before {
content:'\f1ce';
font-family:'FontAwesome';
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script src="js/script.js"></script>

<!--Stylesheet Links-->
<link rel="stylesheet" text="text/css" href="css/style.css">

<link rel="stylesheet" text="text/css" href="css/font-awesome.min.css">

<!--Font Links-->
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
</head>

<body>
    <!--Website Sidebar-->
    <div id="sidebar">
        <ul>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
        </ul>
    </div>
</body>

Is the issue of Padding Overlap with Sidebar Item List getting in the way?

Answer №1

Answer №2

Answer №3

Similar questions

Saving the index.html file to disk when the button is clicked

Styling Options for Material-UI Tables: Enhancing the Look of Your Table Components

The serialize() function in jQuery is not functioning as expected

Ensure that Mathjax underscores are consistent with the height of other characters

How can we use jQuery to extract an HTML element's external stylesheet and add it to its "style" attribute?

Tips for utilizing the .clone() method within a loop or for each individual element of an array

When touch-triggered on IOS, HTML5 Web SQL Transactions were smoothly bypassed without any errors

When the menu active item is clicked, the header will automatically scroll to the top

A guide on extracting checkbox value from a database in PHP through the use of the explode function

Working with radio buttons in a loop using PHP

How can I align those 3 divs in the center of the body?

Issue with changing the height of a textarea in a mobile browser when it is

What is the best way to link multiple select tags in an HTML document?

Certain components display with greater height on Internet Explorer

Preserve the timestamp of when the radio query was chosen

How do I utilize AJAX and HTML to invoke a RESTful web service in Java?

Element not found: {"method":"name","selector":"markUp"}

Changing color of entire SVG image: a step-by-step guide

Adjusting the letter spacing of individual characters using HTML and CSS

What are the steps to restrict the scope of a <style> declaration in HTML?