Html - how to make span take up entire height of div

ThiefBeatbox
October 15, 2024
223 views
3 votes
4 Answers

I have this group of spans that are supposed to serve as selectors, so I want them to take up the entire space around them when the user hovers over them, however I have no idea how and could not find an answer to this. please help, here’s my code

*
{
    margin:0;
    padding:0;
}
.selector  {
    cursor: pointer;
    padding-right: 40px;
    padding-left: 20px;
    display:inline-block;
}
.link  {
    background-color:LightGray;
    color:black;
    padding: 5px;
    font-size: 25px;
    overflow:hidden;
}

<div class="link"><b>
    
<span onmouseover= 'style="background-color:white;"' onmouseout= 'style="background-color:LightGray;"' style="color:black;" class="selector">Prehrana</span>
<span onmouseover= 'style="background-color:white;"' onmouseout= 'style="background-color:LightGray;"' style="color:black;" class="selector">Pica</span>
<span onmouseover= 'style="background-color:white;"' onmouseout= 'style="background-color:LightGray;"' style="color:black;" class="selector">Ciscenje  </span>
<span onmouseover= 'style="background-color:white;"' onmouseout= 'style="background-color:LightGray;"' style="color:black;" class="selector">Drugo</span>
<span onmouseover= 'style="background-color:white;"' onmouseout= 'style="background-color:LightGray;"' style="color:black;" class="selector">Akcija</span>

</b></div>

the text inside the span is croatian. This is also my first website that I am making with no assistance so don’t make fun of me please.

Answers

Chosen as BEST ANSWER
- ThiefBeatbox
- October 15, 2024 at 5:25 pm
- 0 votes
0
I solved it by adding

padding-top: 10px

padding-bottom: 10px

margin: -10;

to the selector class

(Edit)

The .link is like the container of all the .selectors, so give it a known height and make it a flex container by setting display to flex

Then make the span’s display be either block or inline-block because they are inline by default – with that you can set their width, height, and all.

You can then set the height of all the span to (100%) of the parent height

Like this

 <style>
        .selector {
            cursor: pointer;
            padding-right: 40px;
            padding-left: 20px;
            display: inline-block;
            height: 100%;
            box-sizing: border-box;
        }
    
        .link {
            background-color: LightGray;
            color: black;
            padding: 5px;
            font-size: 25px;
            overflow: hidden;
            height: 50px; 
            display: flex; 
            align-items: center; 
        }
    
        .selector:hover {
            background-color: white;
        }
    </style>
    
    <div class="link">
        <b>
            <span class="selector">Prehrana</span>
            <span class="selector">Pica</span>
            <span class="selector">Ciscenje</span>
            <span class="selector">Drugo</span>
            <span class="selector">Akcija</span>
        </b>
    </div>

Set link to have a fixed size.

Remove padding specified in link.

Set selector:hover to have 100% height.

I also moved your styles from the html into the css file.

*
{
    margin:0;
    padding:0;
}
.selector  {
    cursor: pointer;
    padding-right: 40px;
    padding-left: 20px;
    display:inline-block;

    /* EDIT Moved here from html */
    color: black;
}

/* EDIT Control hover (replaces your mouseover and mouseout) */
.selector:hover  {
  background-color: white;

  height: 100%;
}

.link  {
    background-color:LightGray;
    color:black;
    /* EDIT Remove padding here, so we can control spacing with margin in .selector */
    /* padding: 5px; */
    font-size: 25px;
    overflow:hidden;

    /* EDIT Need to have a fixed size */
    height: 3rem;
}

<div class="link"><b>
  <!-- EDIT Moved your style's to the .css file -->
  <span class="selector">Prehrana</span>
  <span class="selector">Pica</span>
  <span class="selector">Ciscenje  </span>
  <span class="selector">Drugo</span>
  <span class="selector">Akcija</span>
</b></div>

Try this

*
{
    margin:0;
    padding:0;
}
.selector {
    padding:20px;
    cursor: pointer;
    display: inline-block;
    height: 100%;
    box-sizing: border-box;
}

.link {
    background-color: LightGray;
    color: black;
    font-size: 25px;
    overflow: hidden;
    height: 50px; 
    display: flex; 
    align-items: center; 
}

.selector:hover {
    background-color: white;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <div class="link">
        <b>
            <span class="selector">Prehrana</span>
            <span class="selector">Pica</span>
            <span class="selector">Ciscenje</span>
            <span class="selector">Drugo</span>
            <span class="selector">Akcija</span>
        </b>
    </div>
        
</body>
</html>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – how to make span take up entire height of div

Answers