Place <span> items side by side

vini.m.oliveira 0
Viewed 51

I'm trying to create a sidebar div with icons and a 'top row' div with a image and texts displayed side-by-side. The sidebar is ok but my top row is displaying the image on top of both 'h1' and 'h3'. in it turn, h1 and h3 is displaying side by side.

The html's body:

    <div class="top-row">
        <span>
            <img class='fotoPerfil' src="images/foto.jpg" alt="">
        </span>
        <span>
            <h1>algum texto</h1>
        </span>
        <span>
            <h3>barra de progresso</h3>
        </span>
    </div>
    <!-- -->
    <div class="sidebar">
        <ul>
            <li><a href="index.html"><img class='botaoMenu' src="images/home.png" alt=""></a></li>
            <li><a href="perfil.html"><img class='botaoMenu' src="images/conta.png" alt=""></a></li>
            <li><a href="settings.html"><img class='botaoMenuFundo' src="images/engrenagem.png" alt=""></a></li>

        </ul>
    </div>

and the css:

      body {
        background-color: #FCFCFC;
        font: 12px Verdana, sans-serif;
    }
    
    .top-row {
        position: absolute;
        top: 0;
        left: 12%;
        right: 0%;
        height: 12%;
        margin: auto;
    }

    .top-row span {
        display: inline-block;
    }

    .sidebar{
        position: absolute;
        top: 0;
        left: 0;
        float: left;
        background-color: #EAF6F6;
        width: 11%;
        height: auto;
        border-style: groove;
    }
    
    .botaoMenu {
        max-height: 80%;
        max-width: 80%;
        width: auto;
        height: auto;
        border: none;
    }
    
    .botaoMenuFundo {
        max-height: 80%;
        max-width: 80%;
        width: auto;
        height: auto;
        border: none;
        padding-top: 200%;
    }
    
    .fotoPerfil {
        border-radius: 100%
        max-height:10%;
        max-width:10%;
        width: auto;
        height: auto;
    }

what is wrong with it?

css html
1 Answers

You are setting the 10% max width inside .fotoPerfil so it's calculating 10% of the span it's in.

You can set the max-width: 10% to that span that contains the image if you want the profile picture to take 10% of the top bar width.

To visualize these issues you can use Right click -> inspect element or just add background colors to each object until you find out what's taking all that space.

The reason the titles were showing up below the image is because the image (actually the span it's in) is so wide that is taking the whole first line of the top bar, pushing the other elements to a second line.

Something like this should do it:

.fotoPerfil {
    border-radius: 100%;
    max-width:100%;
}
.fotoPerfilContainer {
    max-width:10%;
}

I am not sure what you are trying to achieve without seeing it with all the images, but generally setting widths and heights as percentages of the entire screen end up with strange results that expand or contract too much in different browser sizes.

Alejandro Núñez0
Related