Большой белый пробел в HTML и CSS

Итак, я пытаюсь создать свой сайт, и у меня этот большой белый промежуток между моей навигационной панелью и изображением. Где я здесь ошибся?Большой белый пробел в HTML и CSS

Также примечание стороны: Кто-нибудь знает, как я могу «вставить» всю мою страницу, чтобы пустые белые пространства по бокам?

HTML:

@{ 
    Layout = null; 
} 
<!DOCTYPE html> 
<html> 
<head> 
    <title>Design</title> 
</head> 
<body> 
    <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" /> 
        </div> 
        <br /> 
       </div> 
       <div class="col-sm-4 text-left" id="imgTitle"> 
        <h1>Header</h1> 
        <p>Text</p> 
       </div> 
       <div class="col-sm-4"> 
        <img id="imgHeader" src="~/img/Header.png" /> 
       </div> 
       <div id="navBar"> 
        <ul> 
         <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> 
        </ul> 
       </div> 
      </div> 
     </div> 
    </div> 

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

CSS

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; 
}

источник

2016-08-20 Malphai

Так говорил о зазоре ниже изображения было бы удобно, если ваш пример кода включил ссылку на ваш изображение или еще лучше, если бы вы могли представить пример кода в виде jsFiddle. Это из-за того, что я нашел ответ ниже – UntitledGraphic

Вы используете Twitter Bootstrap? – Jeff

Не может ли это быть связано с настройкой размера изображения на 3400 пикселей x 1000 пикселей в вашем CSS?

Вы также можете положить display: block; на свое изображение в css, чтобы удалить любые неприглядные пробелы.

К «поля» на странице, как вы говорите, дайте контейнеру ширин или максимальную ширину и margin:auto;

источник

2016-08-20 15:31:32 UntitledGraphic

Если вы не хотите большой белый разрыв между вашей навигационной панели и вашего изображения, которое вы, возможно, захотите попробовать что-то вроде этого. img{margin-top:-30px;}

источник

2016-08-20 14:43:00 stephenpassero

Большой белый пробел в HTML и CSS

ответ

Смежные вопросы