HTML page with bad margins

Asked

Viewed 64 times

0

I’m trying to put a slideshow on my page, but for some reason, the images have some kind of left margin that doesn’t cover the entire page.

Here is the image: captura de tela da página

Here is the HTML:

<xmp><!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="content-language" content="en">
        <meta name="author" content="João Paixão">
        <meta name="keywords" content="">
        <meta name="description" content="InfoCE, Information of Criptocurrency & Entertainment. You'll find the information you're looking for here">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>InfoCE</title>
        <link rel="stylesheet" href="corpo.css" type="text/css">
        <link rel="stylesheet" href="cabecalho.css" type="text/css">
        <link rel="icon" href="images" type="image/icon">
    </head>
    <body>
<header>
             <ul>
                <li class="home"><a href="indexpt.htm">Ínicio</a></li>
                <li class="dropdown">
                    <a class="dropbtn">Criptomoedas</a>
                        <div class="dropdown-content">
                            <a href="wicriptopt.htm">O que são criptomoedas?</a>
                            <a href="mingpt.htm">Mineração</a>
                            <a href="fctpt.htm">Faucets</a>
                            <a href="wlltpt.htm">Carteiras</a>
                        </div>
               </li>
               <li class="dropdown">
                   <a>Entretenimento</a>
                       <div class="dropdown-content">
                           <a href="filmspt.htm">Filmes</a>
                           <a href="srispt.htm">Séries</a>
                           <a href="animespt.htm">Animes</a>
                       </div>
               </li>
               </ul>
               <div id="logosite">
                    <a href="indexpt.htm"><img src="image/logosite.png" width="100" height="51.5"></a>
               </div>
               <div id="top">
                   <li><a href="ctcuspt.htm">Contacte-nos</a></li>
                <img src="image/pt-icon.png" alt="icon-pt" width="25px" height="25px" style="margin-top:12px;margin-left:0px;">
                   <select onchange="location = this.value;">
                       <option value="indexpt.htm">Português</option>
                        <option value="indexen.htm">English</option>
                   </select> 
                </div>
       </header>
       <section>
       <div class="displayimg">
       <div class="w3-content" style="">
  <img class="mySlides" src="image/cryptocurrenciesalternative.jpg">
  <img class="mySlides" src="image/imgindexbtc.jpg">
  <img class="mySlides" src="image/bitcoin_1.jpg">
</div>
<div class="w3-center">
  <div class="w3-section">
    <button class="w3-btn" onclick="plusDivs(-1)">❮ Prev</button>
    <button class="w3-btn" onclick="plusDivs(1)">Next ❯</button>
  </div>
  <button class="w3-btn demo" onclick="currentDiv(1)">1</button> 
  <button class="w3-btn demo" onclick="currentDiv(2)">2</button> 
  <button class="w3-btn demo" onclick="currentDiv(3)">3</button> 
</div>

<script>
var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function currentDiv(n) {
  showDivs(slideIndex = n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("demo");
  if (n > x.length) {slideIndex = 1}
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
     dots[i].className = dots[i].className.replace(" w3-red", "");
  }
  x[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " w3-red";
}
</script>
</div>
       </section>
       <footer>
           <hr>
           InfoCE.com &copy; 2017 Todos os direitos reservados &#124; <a href="pdp.htm" target=_blank >Política de Privacidade</a>
       </footer>
   </body>
</html></xmp>

And here comes the CSS:

body{
    overflow-y: scroll;
    font-family: sans-serif;
    margin: 0 auto;
}
section{
    margin: 0px auto;
    background-color: red;
    width: auto;
    height: auto;
    padding: 20px 20px 0px 30px;
    margin-top: -20px;
}
section a:link{
    color: darkgreen;
    background-color:transparent;
    text-decoration:none;
}
section a:visited{
    color: darkgreen;
    background-color:transparent;
    text-decoration:none;
}
section a:hover{
    color: blue;
    background-color:transparent;
    text-decoration:none;
}
section a:active{
    color: darkorchid;
    background-color:transparent;
    text-decoration:none;
}
.cts{
    margin-left: 760px;
}
select{
    margin-left: 4px;
    margin-top: -15px;
    width: 20px;
}

ul {
    list-style-type: none;
    padding: 0;
    overflow: hidden;
    background-color: darkorange;
    width: auto;
    margin-top: 0px;
    padding-bottom: -10px;
}
#top li{
    list-style-type: none;
    text-align: center;
}
li {
    float: left;
    padding-bottom: -2px;

}
li.home {
    margin-left: 10px;
}
li a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
    background-color: dodgerblue;
}

li.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {background-color: dodgerblue;
color: white;}

.dropdown:hover .dropdown-content {
    display: block;
}

@media screen and (max-width: 1020px){
    ul.topnav li.right, 
    ul.topnav li {float: none;}
}
header{
    margin: 0 auto;
}
#top{
    margin-top: -71px;
    margin-bottom: 0px;
    text-align: left;
    width: 200px;
    height: 30px;
    float: right;
}
#top select{
    text-align: right;
    float: right;
    margin-top: 20px;
}
#logosite {
    position: relative;
    width: 100px;
    margin-top: -71px;
    height: 30px;
    margin-left: 750px;
}
header #logosite{
    float: left;
}
afinal nao kkk
footer{
    text-align: center;
    width: 100%;
    float: left;
    padding-bottom: 5px;
    margin: 0 auto;
    background-color: aqua;
}
footer a:link{
    color: darkgreen;
    background-color:transparent;
    text-decoration:none;
}
footer a:visited{
    color: darkgreen;
    background-color:transparent;
    text-decoration:none;
}
footer a:hover{
    color: blue;
    background-color:transparent;
    text-decoration:none;
}
footer a:active{
    color: darkorchid;
    background-color:transparent;
    text-decoration:none;
}
html css

  • Hey dude, this is stackoverflow in English, post your Question here http://stackoverflow.com

  • The curious thing is that his page is in Portuguese :)

  • What would be the afinal nao kkk lost in the middle of CSS?

1 answer

0

You can put in the class mySlides:

.mySlides {
    margin: auto;
}

This would center the images, since they have display: block;

Now, if you want to center all the content, I would recommend these changes:

.displayimg {
    text-align: center;
}
.w3-content {
    display: inline-block;
}

This would all be a very simple suggestion without greater knowledge of your page that seems to me to be in Wordpress. But it is launched the idea.

Browser other questions tagged html css

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