resolvido [HTML] Dúvida...

Hemptt · Dezembro 23, 2017

Hello friends!

Eu comecei os meus estudos com hmtl, e css 2 dias atrás, e por esse motivo não tenho tanto conhecimento no assunto,

portanto, não sei resolver alguns erros/problemas, que dão nos códigos básicos...

Eu estou com o seguinte problema, tem um espaçamento entre a imagem e um background, e eu não consigo remover esse espaço nem ferrando, quem puder me ajudar, eu agradeço...

Print's:

Mostrar conteúdo oculto

html:

Mostrar conteúdo oculto



<!DOCTYPE html>

<html>

<head>

<title>Inicio - UnderMC!</title>

<link rel="icon" href="img/icone.png" >

<link rel="stylesheet" href="css/style.css" >

<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> 

<meta charset="utf-8">

<style>

body{

background-color: #DCDCDC;

}

    </style>

</head>

 

<!-- Construção da página -->

<body>

<header class="logo">

    <h1 class="icone">

        <a href="index.html" title="UnderMC">Inicio - UnderMC!</a>

        </h1>

        <ul class="menu">

         <li><a href="#">SOBRE</a></li>

         <li><a href="discord.html">DISCORD</a></li>

         <li><a href="loja.html">LOJA</a></li>

         <li><a href="#">INICIO</a></li>

        </ul>

</header>

<center><img style="width: 100%;" draggable="false" src="img/mineimg.png"/></center>

<div class="ip">

<p><strong>

JOGUE AGORA! 1.8x - IP: UNDERMC.COM.BR</strong>

</p>

</div><br><br>

<p><center>In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Duis sapien nunc, commodo et, interdum suscipit, sollicitudin et, dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam id dolor. Class aptent taciti sociosqu ad litora</center></p>

            <nav class="discord_links">

            <center><a href="https://discordapp.com/" target="_blank">Clique aqui para baixar!</a></center><br>

            <center><a href="#" target="_blank">Clique aqui para entrar em nosso servidor no <i>discord!</i></a></center>

</body>

</html>

CSS

Mostrar conteúdo oculto



/* RESET */

*{margin: 0; border: 0; padding: 0; font-size: 100%; font-family: 'Open Sans', sans-serif; font-weight: normal; box-sizing:

border-box;}

img{max-width: 100%;}

ul{list-style: none;}

a{text-decoration: none;}

h2{font-size: 1.5em; color:#333;}

p{font-size: 1em; color:#777;}

/* menu*/

.logo {width: 100%; height: 75px; float: left; padding: 10px 80px 10px; background-color:#0cae98;}

.icone a {width: 150px; height: 150px; float: left; background: url(../img/icone2.png) no-repeat; font-size: 0;}

/* links*/

.ip {width: 100%; float: left; background-color: #13c7ae; padding: 0px 150px; margin-top: 0;box-shadow: 2px 2px 2px #828282;}

.ip p {color: #fff;}

.menu li{width: 70px;float: right; padding: 40px 15px; margin-right: 50px;}

.menu a{color: #fff; margin-right: 30px;}

.menu li a:hover {color: #777;}

 

/*Discord info*/

.principal {padding: 20px 8%;}

.discord_info {width: 100%; padding: 150px 20px 20px 0px; color: #1C1C1C;}

.discord_links a {color: #1C1C1C;}

Se vocês, puderem ajudar, eu agradeço!

Editado Dezembro 23, 2017 por Haade

TequilAxBr · Dezembro 23, 2017

É esse espaço que você está falando? http://prntscr.com/hr8lji (O traçado vermelho que fiz)

Editado Dezembro 23, 2017 por TequilAxBr

Hemptt · Dezembro 23, 2017

Em 23/12/2017 em 00:46, TequilAxBr disse:
É esse espaço que você está falando? http://prntscr.com/hr8lji (O traçado vermelho que fiz)

Sim...

TequilAxBr · Dezembro 23, 2017

Tente trocar essa linha no CSS:

.ip {width: 100%; float: left; background-color: #13c7ae; padding: 0px 150px; margin-top: 0;box-shadow: 2px 2px 2px #828282;}

Por essa:

.ip {width: 100%; float: left; background-color: #13c7ae; margin-top: 0 !important; box-shadow: 2px 2px 2px #828282;}

Hemptt · Dezembro 23, 2017

Em 23/12/2017 em 00:52, TequilAxBr disse:

Tente trocar essa linha no CSS:

.ip {width: 100%; float: left; background-color: #13c7ae; padding: 0px 150px; margin-top: 0;box-shadow: 2px 2px 2px #828282;}

Por essa:

.ip {width: 100%; float: left; background-color: #13c7ae; margin-top: 0 !important; box-shadow: 2px 2px 2px #828282;}

Não funcionou ._.

TequilAxBr · Dezembro 23, 2017

Em 23/12/2017 em 00:55, Haade disse:
Não funcionou ._.

Arruma o seu código.. Tem tags sem fechar ai

TheSteven_ · Dezembro 24, 2017

Prezado,

Há codigos que não foram fechados.

Luiiiz · Dezembro 25, 2017

Tente colocar height 100% no background. Não estou entendendo muito seu code. Não dizer sei esta usando uma tag ou estilo para colocar a imagem de fundo.

Editado Dezembro 25, 2017 por Luiiiz

candidovitu · Dezembro 25, 2017

Coloca width 100%, e fecha as tags.. .-.

Hemptt · Dezembro 25, 2017

Em 25/12/2017 em 04:12, Viitor disse:
Coloca width 100%, e fecha as tags.. .-.

Funcionou não...

Dokitos · Dezembro 25, 2017

Troque o HTML por este:

<!DOCTYPE html>
<html>
<head>
<title>Inicio - UnderMC!</title>
<link rel="icon" href="img/icone.png" >
<link rel="stylesheet" href="css/style.css" >
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> 
<meta charset="utf-8">
<style>
body{
background-color: #DCDCDC;
}
    </style>
</head>
 
<!-- Construção da página -->
<body>
<header class="logo">
    <h1 class="icone">
        <a href="index.html" title="UnderMC">Inicio - UnderMC!</a>
        </h1>
        <ul class="menu">
         <li><a href="#">SOBRE</a></li>
         <li><a href="discord.html">DISCORD</a></li>
         <li><a href="loja.html">LOJA</a></li>
         <li><a href="#">INICIO</a></li>
        </ul>
</header>
<center><div id="background">
<img style="width: 100%;" draggable="false" src="img/mineimg.png"/>
</div>
</center>
<div class="ip">
<p><strong>
JOGUE AGORA! 1.8x - IP: UNDERMC.COM.BR</strong>
</p>
</div><br><br>
<p><center>In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Duis sapien nunc, commodo et, interdum suscipit, sollicitudin et, dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam id dolor. Class aptent taciti sociosqu ad litora</center></p>
            <nav class="discord_links">
            <center><a href="https://discordapp.com/" target="_blank">Clique aqui para baixar!</a></center><br>
            <center><a href="#" target="_blank">Clique aqui para entrar em nosso servidor no <i>discord!</i></a></center>
</body>
</html>

Adicione ao seu css:

#background {
    margin-bottom: -5px;
}

Hemptt · Dezembro 25, 2017

Em 25/12/2017 em 06:06, Dokitos disse:

Troque o HTML por este:

<!DOCTYPE html>
<html>
<head>
<title>Inicio - UnderMC!</title>
<link rel="icon" href="img/icone.png" >
<link rel="stylesheet" href="css/style.css" >
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> 
<meta charset="utf-8">
<style>
body{
background-color: #DCDCDC;
}
    </style>
</head>
 
<!-- Construção da página -->
<body>
<header class="logo">
    <h1 class="icone">
        <a href="index.html" title="UnderMC">Inicio - UnderMC!</a>
        </h1>
        <ul class="menu">
         <li><a href="#">SOBRE</a></li>
         <li><a href="discord.html">DISCORD</a></li>
         <li><a href="loja.html">LOJA</a></li>
         <li><a href="#">INICIO</a></li>
        </ul>
</header>
<center><div id="background">
<img style="width: 100%;" draggable="false" src="img/mineimg.png"/>
</div>
</center>
<div class="ip">
<p><strong>
JOGUE AGORA! 1.8x - IP: UNDERMC.COM.BR</strong>
</p>
</div><br><br>
<p><center>In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Duis sapien nunc, commodo et, interdum suscipit, sollicitudin et, dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam id dolor. Class aptent taciti sociosqu ad litora</center></p>
            <nav class="discord_links">
            <center><a href="https://discordapp.com/" target="_blank">Clique aqui para baixar!</a></center><br>
            <center><a href="#" target="_blank">Clique aqui para entrar em nosso servidor no <i>discord!</i></a></center>
</body>
</html>

Adicione ao seu css:

#background {
    margin-bottom: -5px;
}

Resolvi, com o margin-bottom= -5px; vlw

Leeow · Dezembro 25, 2017

Sua dúvida foi marcada como [Resolvido] e movido à área de dúvidas resolvidas.

Atenciosamente,
Gamer's Board

Entrar

resolvido [HTML] Dúvida...

Pergunta

Link para o comentário

Compartilhar em outros sites

12 respostass a esta questão

Posts Recomendados

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Conteúdo Similar

Popular Agora

Quem está navegando 0 membros estão online