<hr sobe junto quando aumenta tela, como evitar?

Front-end CSS
#1

image
image.jpg1338×236 107 KB

Essa barrinha vermelha, de acordo com a variação do tamanho da tela do dispositivo ela vai subindo pra cima, junto com o nome, como fazer ela ficar fluida ao padding-top da imagem?
tipo, quando a imagem aumentar, ela ficar seguindo a imagem e não entrando dentro da imagem?

#2

Não use position absolute ou tamanho fixo

1 curtida
#3

Usar Relative em tudo?
Em quais casos uso Relative e absolute?

#4

Eu não uso absolute pra nada

Eu faço assim:
Relative para footer e conteúdo.
Fixed para header e utilitários.

Utilitários como ScrollUp, header fixo da tabela , dialog, etc

#5

Fica assim, usei só relative em tudo:

image
image.jpg1409×408 180 KB

fica tudo por cima da imagem e não tem como ajustar…

#6

Então o código ta errado, posta ele

1 curtida
#7

HTML
Início
Catálogo
Empresa
Representantes
Qualidade
Logística
Produtor
Meio Ambiente
2 via do Boleto

Carne Desossada

Cortes Nobres

Cortes Tradicionais

Carne Com Osso

Contra Filé

 
                       <a href="#"><div class="produto" id="galaxy">
                            <img src="img/cupim.png"/>
                            <h1>Cumpim A</h1>
                        </div></a>
						
						
						
                        <a href="#"><div class="produto" id="galaxy">
                            <img src="img/alcatra.jpg"/>
                        <h1>Alcatra</h1>
                        </div></a>
						
						
                        <a href="#"><div class="produto" id="galaxy">
                            <img src="img/patinho.jpg"/>
                         <h1>Patinho</h1>
                        </div></a></a>
						
						
                        <a href="#"><div class="produto" id="galaxy">
                            <img src="img/fraldinha.jpg"/>
                             <h1>Fraldinha</h1></a>
                             
                        </div>
						
						
                        <a href="#"><div class="produto" id="galaxy">
                            <img src="img/largato.png"/>
                             <h1>Largato</h1></a>
                           
                        </div>
						
						 <a href="#"><div class="produto" id="galaxy">
                            <img src="img/coxaomole.png"/>
                             <h1>Coxao Mole</h1></a>

                        </div>
						
						 <a href="#"><div class="produto" id="galaxy">
                            <img src="img/coxaoduro.jpg"/>
                             <h1>Coxao Duro</h1>
                        </div></a>
						
						 <a href="produtos/picanha.html"><div class="produto" id="galaxy">
                            <img src="img/picanha.png"/>
                             <h1>Picanha Grill</h1>  
                        </div></a>

                        </div>

Forte Boi Indústria de Alimentos LTDA
Todos os Direitos Reservados &copy 

<script src="js/jquery.flexslider.js"></script>
<script type="text/javascript" charset="utf-8">

$(window).load(function() {
$(’.flexslider’).flexslider({
touch: true,
pauseOnAction: false,
pauseOnHover: false,
});
});

#8

image
image.png876×651 31.7 KB

image
image.png687×662 14.9 KB

image

#9

Nao estou conseguindo postar o código

#10

.responsivecatalaogo{
max-width: 500x;
width: 100%;
height: auto;
}

#imgcatalogo{
position: absolute;
max-width: 100%; /* Máximo da largura da imagem /
width: 100%;
max-height: 90%; / Máximo da altura da imagem */
min-height: auto;
top: 260px;
}

}

/INICIO DO CATALOGO DE PRODUTOS/
#produtos{

border-radius: 8px;
width: 100%;
position:absolute;
top: 870px;

}
.produto{
width: 17%;
height: 235px;
margin-top: 25px;
border: 1.0px solid #ecf0f1;
border-radius: 8px;
float: left;
display: block;
margin-left: 85px;

}
.produto img{
margin: 15px;
position:relative;
left:10%;
max-width:200px;
max-height:150px;
width: auto;
height: auto;
}

.produto h1{
text-align:center;
font-size: 0.6em;
margin: 8px;
font-family:‘Arial’;
color: #2d3436;
margin-bottom: 5px;

}
.produto p{
text-align:left;
margin-left: 30%;
}
.produto h2{
text-align:center;
margin: 10px;
font-size: 17px;
}
/FIM DO CATALOGO DE PRODUTOS/

/INICIO RODAPE DO CATALOGO DE PRODUTOS/
#rodapecatalogo{
width: auto;
position: relative;
height: 60px;
top:2150px;
background: linear-gradient(to right,#05c46b,#27ae60 );
text-align: center;
font-size: 17px;
color:#fff;
font-family: ‘Calibri’;
padding: 2px;
padding-top: 40px;
}
/FIM RODAPE DO CATALOGO DE PRODUTOS/
#divisaocatalogo{
border: none;
width: 92%;
height: 5px;
background-color: #c0392b;
top: 750px;
position:absolute;
margin-left: 50px;

}
/INICIO TITULO DESOSSADO DO CATALOGO DE PRODUTOS/
#titulodessossado{
text-align:left;
font-size: 2em;
margin-left: 55px;
top: 710px;
font-family:‘Arial’;
color: #c0392b #e74c3c;
margin-bottom: 5px;
position:absolute;

}
/FIM TITULO DESOSSADO DO CATALOGO DE PRODUTOS/

/SUBTITULO CORTES NOBRES DO CATALOGO DE PRODUTOS/
#titulocortesnobres{
text-align:left;
font-size: 2.4em;
margin-left: 40%;
top: 740px;
font-family:‘Arial’;
color: #2d3436;
margin-bottom: 5px;
position:relative;

}
/FIM CORTES NOBRES DO CATALOGO DE PRODUTOS/

#galaxy:hover
{
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
#titulocortestradicionais{
text-align:left;
font-size: 2.4em;
margin-left: 40%;
top: 1600px;
font-family:‘Arial’;
color: #2d3436;
margin-bottom: 5px;
position:relative;

}

#titulocarnecomosso{
text-align:left;
font-size: 2em;
margin-left: 55px;
top: 1740px;
font-family:‘Arial’;
color: #c0392b #e74c3c;
margin-bottom: 5px;
position:relative;

}
#divisaocatalogocomosso{

border: none;
width: 92%;
height: 5px;
background-color: #c0392b;
top: 1800px;
position:relative;
margin-left: 50px;

}

#11

Colocando pra relative dá tudo no mesmo…
Estava lendo, sempre tem que colocar absolute no pai e na filha sempre relative, procede isso?

#12

Olha, o menu está como relativo, a foto do banner como absoluto e o restante abaixo como absoluto.

#13

O contrário…

Tira os seus top e muda para position: relative

Se você esta com dúvida sobre position, cria uma página sem nada e vai adicionando div com position relative e cores diferentes, ai você verá que vai ficar uma embaixo da outra, colada uma na outra, ai é só da margin

1 curtida
#14

seria apenas margin ou margin-top?

#15

Sim, apenas.

1 curtida
#16

posso utilizar no margin-top ou no margin um valor negativo? ex:

margin-top: -20px;?

#17

Pode sim.
O contrário de afastar é aproximar, ai ao invés de se afastar do topo, irá se aproximar mais.

1 curtida
#18

Cara, deu tudo certo, não sei nem como te agradecer, muito obrigado.

#19

Se não for pedir muito, me ajuda só em mais um problema…
o rodape tá assim…

image
image.jpg1421×122 15.4 KB

image
ja coloquei o text-align:center e nada de ficar no centro.

#20

image
o html…