How can I remove these white bits from my website?

Question

How can I remove these white bits from my website?

Navigation

#1 by (3 votes)
#2 by (0 votes)

-1

Although I can not see the styles of your code well, I know why it does not work for you, the% HTML tag% handles some default margins which if you remove them will be the solution to your problem, the margin from above if I visualize solved the one below I can not distinguish it because the styles are not displayed well but visualize it with yours and you tell me.

#izenburua{
		width: 100%;
		text-align:   center;
		height: 50px;
		background-color: black;
		margin-top: 0px;
	}
	.navbar navbar-inverse{
		margin-top: 0px;
		margin-bottom: 0px;
	}
  
  h1{
    margin-top: 0;
    margin-bottom:0;
  }

	<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
		<header id="izenburua">
				<h1>ASK/ANSWER</h1>
		</header>
		<nav class="navbar navbar-inverse">
			<div class="container-fluid">
				<ul class="nav navbar-nav">
					<li class="active"><a href="#">Home</a></li>
					<li><a href="#">Page 1</a></li>
					<li><a href="#">Page 2</a></li>
				</ul>
				<ul class="nav navbar-nav navbar-right">
					<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
					<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
				</ul>
			</div>
		</nav> 
		
<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">
      <img src="http://silenttruth.co.uk/wp-content/uploads/2016/02/happy-people.jpg">
    </div>

    <div class="item">
      <img src="https://s-i.huffpost.com/gen/3866236/images/o-HAPPY-facebook.jpg" alt="Chicago">
    </div>

    <div class="item">
      <img src="https://s-i.huffpost.com/gen/1813932/images/o-HAPPY-facebook.jpg" alt="New York">
    </div>
  </div>

  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
		
		<footer>
		
		</footer>

html css

asked by Mikel Molinuevo 29.11.2017 в 17:49

source

2 answers

0

Although I can not see the styles of your code well, I know why it does not work for you, the% HTML tag% handles some default margins which if you remove them will be the solution to your problem, the margin from above if I visualize solved the one below I can not distinguish it because the styles are not displayed well but visualize it with yours and you tell me.

#izenburua{
		width: 100%;
		text-align:   center;
		height: 50px;
		background-color: black;
		margin-top: 0px;
	}
	.navbar navbar-inverse{
		margin-top: 0px;
		margin-bottom: 0px;
	}
  
  h1{
    margin-top: 0;
    margin-bottom:0;
  }

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta name="tipo_contenido" content="text/html;" http-equiv="content-type" charset="utf-8">
		<title>Home</title>
		<link rel="stylesheet" text="text/css" href="../CSS/polita.css" media="all"/>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
	</head>
	
	<body>
		<header id="izenburua">
				<h1>ASK/ANSWER</h1>
		</header>
		<nav class="navbar navbar-inverse">
			<div class="container-fluid">
				<ul class="nav navbar-nav">
					<li class="active"><a href="#">Home</a></li>
					<li><a href="#">Page 1</a></li>
					<li><a href="#">Page 2</a></li>
				</ul>
				<ul class="nav navbar-nav navbar-right">
					<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
					<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
				</ul>
			</div>
		</nav> 
		
<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">
      <img src="http://silenttruth.co.uk/wp-content/uploads/2016/02/happy-people.jpg">
    </div>

    <div class="item">
      <img src="https://s-i.huffpost.com/gen/3866236/images/o-HAPPY-facebook.jpg" alt="Chicago">
    </div>

    <div class="item">
      <img src="https://s-i.huffpost.com/gen/1813932/images/o-HAPPY-facebook.jpg" alt="New York">
    </div>
  </div>

  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
		
		<footer>
		
		</footer>
		
	</body>
</html>

answered by 29.11.2017 в 17:59

Select the names of employees who are not administrators How to export some fields with their records to a new postgres table

score 3 · Accepted Answer

If you use the element inspector, you can see the margins of the elements and you will know which element you should remove it from.

You have this line .navbar navbar-inverse{ which first of all is badly written (missing the . in navbar-inverse ) and secondly that everything does not make sense because .navbar and .navbar-inverse are the same element in your Node flow.

You could add a unique identifier to your .navbar that could be #menu_principal and apply the necessary styles on that identifier.

Now I tell you that it is not advisable to do this:

h1{
  margin-top: 0;
  margin-bottom:0;
}

You would be removing margins to all h1 of your site and it would be a problem if in some you need them, it is best to select the element's parent and then the element so that the styles are applied only to the element you need.

Here I leave your complete code:

#izenburua{
  width: 100%;
  text-align:   center;
  height: 50px;
  background-color: black;
  margin-top: 0px;
}

#izenburua h1{
  margin-top: 0px;
}

#menu_principal{
  margin-bottom: 0px;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta name="tipo_contenido" content="text/html;" http-equiv="content-type" charset="utf-8">
		<title>Home</title>
		<link rel="stylesheet" text="text/css" href="../CSS/polita.css" media="all"/>
		<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
	</head>
	
	<body>
		<header id="izenburua">
				<h1>ASK/ANSWER</h1>
		</header>
		<nav class="navbar navbar-inverse" id="menu_principal">
			<div class="container-fluid">
				<ul class="nav navbar-nav">
					<li class="active"><a href="#">Home</a></li>
					<li><a href="#">Page 1</a></li>
					<li><a href="#">Page 2</a></li>
				</ul>
				<ul class="nav navbar-nav navbar-right">
					<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
					<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
				</ul>
			</div>
		</nav> 
		
<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">
      <img src="http://silenttruth.co.uk/wp-content/uploads/2016/02/happy-people.jpg">
    </div>

    <div class="item">
      <img src="https://s-i.huffpost.com/gen/3866236/images/o-HAPPY-facebook.jpg" alt="Chicago">
    </div>

    <div class="item">
      <img src="https://s-i.huffpost.com/gen/1813932/images/o-HAPPY-facebook.jpg" alt="New York">
    </div>
  </div>

  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
		
		<footer>
		
		</footer>
		
	</body>
</html>