Add title next to your corresponding image

Asked

Viewed 316 times

0

I’m learning HTML and CSS and I’m making a site to practice and I’m having a doubt.

I want to put the title of the images next to each other.

"The best Cookie’s" on the side right of the corresponding image.

"The best coffee" on the side left of its corresponding image.

I was able to put the first text in the right place, but by adding the other one I simply can’t put the left side of the second image.

HTML below:

<body>
    <header>
        <div class="container">
            <div id="logo">
                <img src="logo.png">
            </div>
        </div>
    </header>

    <div class="container">
        <div id="title1">
            <h1> Os melhores Cookie's!</h1>
        </div>

        <div id="title2">
            <h1> O melhor Café!</h1>
        </div>

        <div id="foto1">
            <img src="cookie.jpg">
        </div>


        <div id="foto2">
            <img src="cafe.jpg">
        </div>

    </div>

CSS BELOW

#container{
    width: 1000px;
    margin:0 auto;
}
#foto1{
    width: 500px;
    height: 500px;
}

#foto1 img{
    max-width: 100%;
    padding-top: 250px;
    margin-left: 100px;
}

#foto2{
    width: 500px;
    height: 500px;
}

#foto2 img{
    margin-left: 450px;
    padding-top: 150px;
    max-width: 100%;
}

#title1 {
    text-align:center;
    width: 370px;
    max-height: 45px;
    background-color: tan;
    border-radius: 10px 20px;
    font-family: Comic Sans MS;
    margin-top: 265px;
    float: right;
}


#title2 {
    text-align:center;
    width: 370px;
    max-height: 45px;
    background-color: tan;
    border-radius: 10px 20px;
    font-family: Comic Sans MS;
    float: left;
}
html css tags

2 answers

1

Use pseudo selectors instead of H1.

:before and after:

Example:

.classedaimagem1:before {
float: right;
content: "seu texto";
}
.classedaimagem2:before {
float: left;
content: "seu texto";
}

if necessary, for better positioning and formatting of colors, sizes, etc. use parameters: Padding, margin, Top, left, right, etc.

See the source code of this link -> https://tympanus.net/Tutorials/PseudoElementsImageCaptions/

  • Just a note, when you use the text as content vc could not select it with the mouse...

  • But from what I understand in his code, he wants to assign LINK, and this achieves both with HTML5 and with Javascript or Jquery.

1


Face the way you set up your HTML is not very cool... My suggestion is to place each Image+Title pair inside a container, and use flex to align them.

Take this example

.title{
    text-align:center;
    background-color: tan;
    border-radius: 10px;
    font-family: Comic Sans MS;
}

.box {
    display: flex;
    align-items: flex-start;
}
</style>
</head>
<body>
<header>
    <div class="container">
        <div id="logo">
            <img src="https://placecage.com/50/50">
        </div>
    </div>
</header>

<div class="container">

    <div class="box">
        <img src="https://placecage.com/100/100">
        <h1 class="title">Os melhores Cookie's!</h1>
    </div>

    <div class="box">
        <h1 class="title">O melhor Café!</h1>
        <img src="https://placecage.com/100/100">
    </div>

</div>

Browser other questions tagged html css tags

You are not signed in. Login or sign up in order to post.