GUJ Discussões   :   últimos tópicos   |   categorias   |   GUJ Respostas

Imagem com CSS - manipulação imagem e título


#1

Olá! Estou com um problema.

Quero colocar uma imagem atrás do título no topo da página, colocando o título pra direita e centralizado e um parágrafo a esquerda contendo alguns dizeres, porém estou com um problema:
Não consigo colocar a imagem atrás do título sem usar a propriedade “position: absolute;” o que faz com que não dê pra colocar o título a direita.

Segue o código HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="icon" href="img/favicon.png" type="image/x-icon">
        <link rel="stylesheet" href="arquivo.css" type="text/css" />
        <title>titulo</title>
    </head>
    <header>
        <h1>título</h1>
        <p>blá blá blá blá blá blá blá blá blá blá blá blá</p>
        <p>blá blá blá bláblá blá blá bláblá blá blá blá </p>
    </header>
    <div id="imagemtopo"  style="width:30%">
        <img src="img/imagemtopo.png" alt="Logotipo">
    </div>
    <body> 
    </body>
</html>

Segue código CSS:

.h1 {
    position: right;
    
}

#imagemtopo{
    width: 120em;
    height: 20em;
    min-height: auto;
    position: absolute;
}

Obrigado!


#2

A tags div e header estão fora do body.


#3

Opa, bem observado!
Será que só de incluir corretamente no html vai resolver o problema?

Obrigado!


#4

Para Colocar seu Titulo em Cima da imagem adicionada, use isso:
Exemplo >>>

<body>
<img src="adicione_uma_imagem.jpg" width="600px" height="300px">
<legend>Seu Titulo</legend>

<style type="text/css">

legend {
position: absolute;
margin-top: -40px;
margin-left: 100px;
font-family: arial;
font-size: 25px;
color: red;
}

</style>
</body>

:slight_smile: :slight_smile: