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

OceanWP Theme with a Fixed Navigation Bar

What is the most effective method for preserving RichText (WYSIWYG output)?

Optimizing the position of the datepicker dropdown in Boostrap 4

Issue with overlay functionality after updating to jQuery version 1.12.1

Update the HTML weather icon with data from JSON

Always keep your phone in landscape orientation for optimal website viewing

Altering data in a concealed dynamic HTML form

Is it considered fashionable to utilize HTML5 data attributes in conjunction with JavaScript?

Output text in Javascript (not to the console)

What is the best way to position an image behind textboxes?

Sticky positioning causes elements to stick to the window as the

Having trouble getting custom select to work with CSS in Firefox?

JQuery displays 'undefined' on checkbox loaded via Ajax

Rearrange the order of divs dynamically to prevent wrapping/overflow, no need for media queries

Numerous CSS/JS Dropdown Menus

"Modify the MySQL database each time a user changes the value in a

Enhance the appearance of Google Maps by incorporating gradient effects, box shadows, or other similar visual

Attempting to position items within a container

Showcasing all elements of an xml through jquery while implementing a filter

The intervals in hooks seem to be malfunctioning and not updating the date and time as expected