Big white gap in HTML & CSS

html css

107 просмотра

2 ответа

So I am trying to design my website and I got this big white gap between my navigation bar and image. Where have I done wrong here?

Also side note: Does anyone know how I can "box" my entire page to let there be empty white spaces on the sides?


    Layout = null;
<!DOCTYPE html>
    <div class="container">
        <div class="row">
            <div class="box">
                <div id="header">
                    <br />
                    <div style="margin-left: 1250px;">
                        <input id="sweBtn" type="button" value="SVENSKA" />
                        <input id="engBtn" type="button" value="ENGLISH" />
                        <input id="searchTxt" type="text" />
                        <input id="searchBtn" type="button" value="SÖK" />
                    <br />
                <div class="col-sm-4 text-left" id="imgTitle">
                <div class="col-sm-4">
                    <img id="imgHeader" src="~/img/Header.png" />
                <div id="navBar">
                        <li><a class="active" href="#home">Home</a></li>
                        <li><a href="#news">News</a></li>
                        <li><a href="#contact">Contact</a></li>
                        <li><a href="#about">About</a></li>

<link href="~/Content/custom.css" rel="stylesheet" />


ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;

li {
    float: left;

    li a {
        display: block;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;

        li a:hover {
            background-color: #111;

#header {
    background-color: #503F31;
    color: white;
    padding: 30px;

#sweBtn {
    font-family: 'Times New Roman';
    background-color: Transparent;
    color: grey;

#engBtn {
    font-family: 'Times New Roman';
    background-color: Transparent;
    color: gold;

#searchTxt {
    background-color: grey;
    border-color: grey;

#searchBtn {
    font-family: 'Times New Roman';
    background-color: Transparent;
    color: gold;

#imgTitle {
    position: absolute;

#imgHeader {
    height: 1000px;
    width: 3400px;

#footer {
    background-color: grey;
    color: white;
    padding-bottom: -250px;
Автор: Malphai Источник Размещён: 08.11.2019 11:26

Ответы (2)

0 плюса


Could it not be something to do with setting the size of the image to 3400px x 1000px in your css?

You could also put display: block; on your image in the css to remove any unsightly gaps.

To 'box' your page as you say, give your container a width or max-width and margin:auto;

Автор: UntitledGraphic Размещён: 20.08.2016 03:31

1 плюс

If you don't want the big white gap between your navigation bar and your image you might want to try something like this. img{margin-top:-30px;}

Автор: stephenpassero Размещён: 20.08.2016 02:43
Вопросы из категории :