Мой макет создает случайный край

Я новичок здесь, и перед вами стоит очень неприятная проблема, которая, по вашему мнению, может быть легко устранена. Но я пытался понять это в течение последнего часа.Мой макет создает случайный край

Вот моя проблема, я нарисовал красную рамку вокруг него, чтобы указать проблему - Ниже See below

Вот это HTML код -

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="author" content="Darian Steyn"> 
    <title>BMW</title> 
    <link rel="stylesheet" type="text/css" href="css/styles.css"> 
    <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'> 
</head> 

<body> 

    <div class="container"> 

       <div id="menu"> 
       <img class="logo" src="img/logo.png"/> 
       <ul> 
        <nav> 
        <li><a href="index.html"><span>HOME</span></a></li> 
        <li><a href="vehicles.html"><span>VEHICLES</span></a></li> 
        <li><a href="mybmw.html"><span>MY BMW</span></a></li> 
        <h1>REGION</h1> 
        </nav> 
       </ul> 
       <div class="fix"></div> 
       </div> 

       <div id="slider"> 
        <img src="img/bmwConcept2.jpg"> 
        <div><img src="img/specials.png"></div> 
        <div class="fix"></div> 
       </div> 

    </div> 



</body> 

</html>

Вот CSS -

/* my official site styles */ 

#menu 
{ 
    width: 100%; 
    height: 60px; 
    background-color: #232323; 
    float: right; /*Why when I added this here, did it push it to the top*/ 
    font-family: 'Montserrat', sans-serif; 
} 

.logo 
{ 
    width: auto; 
    height: 80%; 
    float: left; 
    padding: 0.3% 0 0 0.3%; 
} 

ul 
{ 
    padding: 0.3%; 
    text-align: center; 
    list-style-type: none; 
} 
nav li 
{ 
    display: inline; 
    padding-right: 2%; 
} 

li a 
{ 
    text-decoration: none; 
    color: white; 
} 

li a:hover 
{ 
    color: #1F68A5; 
} 

nav h1 
{ 
    font-family: 'Montserrat', sans-serif; 
    float: right; 
    font-size: 100%; 
    color: white; 
    margin-top: -0.2em; 
    margin-right: 1em; 
    border-style: solid; 
    border-width: 0.15em; 
    border-color: white; 
} 

nav h1:hover 
{ 
    color: #1F68A5; 
    border-color: #1F68A5; 
} 

#slider 
{ 
    width: 100%; 
    float: left; 

} 

#slider img:first-child 
{ 
    height: 550px; 
    width:70%; 
    float: left; 

} 

#slider div 
{ 
    width:30%; 
    float: left; 
    margin-right: -2em; 

} 

.fix 
{ 
    clear: both; 
}

Я ценю помощь!

источник

2016-06-01 Anonymous

Попробуйте это ...

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="author" content="Darian Steyn"> 
    <title>BMW</title> 
    <link rel="stylesheet" type="text/css" href="css/styles.css"> 
    <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'> 
    <style> 
    #menu 
{ 
    width: 100%; 
    height: 60px; 
    background-color: #232323; 
    float: right; /*Why when I added this here, did it push it to the top*/ 
    font-family: 'Montserrat', sans-serif; 
} 

.logo 
{ 
    width: auto; 
    height: 80%; 
    float: left; 
    padding: 0.3% 0 0 0.3%; 
} 

ul 
{ 
    padding: 0.3%; 
    text-align: center; 
    list-style-type: none; 
} 
nav li 
{ 
    display: inline; 
    padding-right: 2%; 
} 

li a 
{ 
    text-decoration: none; 
    color: white; 
} 

li a:hover 
{ 
    color: #1F68A5; 
} 

nav h1 
{ 
    font-family: 'Montserrat', sans-serif; 
    float: right; 
    font-size: 100%; 
    color: white; 
    margin-top: -0.2em; 
    margin-right: 1em; 
    border-style: solid; 
    border-width: 0.15em; 
    border-color: white; 
} 

nav h1:hover 
{ 
    color: #1F68A5; 
    border-color: #1F68A5; 
} 

#slider 
{ 
    width: 100%; 
    float: left; 

} 

#slider img:first-child 
{ 
    width:70%; 

} 

#slider div 
{ 
    width:30%; 
    float: left; 
    margin-right: -2em; 

} 

.fix 
{ 
    clear: both; 
} 
    </style> 
</head> 

<body> 

    <div class="container"> 

       <div id="menu"> 
       <img class="logo" src="img/logo.png"/> 
       <ul> 
        <nav> 
        <li><a href="index.html"><span>HOME</span></a></li> 
        <li><a href="vehicles.html"><span>VEHICLES</span></a></li> 
        <li><a href="mybmw.html"><span>MY BMW</span></a></li> 
        <h1>REGION</h1> 
        </nav> 
       </ul> 
       <div class="fix"></div> 
       </div> 

       <div id="slider"> 
        <img src="img/bmwConcept2.jpg" style="width:70%"> 
        <img src="img/specials.png" style="width:30%;float:right;"> 
        <div class="fix"></div> 
       </div> 

    </div> 



</body> 

</html>

источник

2016-06-01 09:14:47 Mani

Мой хороший человек. Вы буквально исправили это. Не могли бы вы объяснить мне, что я делаю неправильно. Я бы хотел узнать в следующий раз! –

Одно изображение с div и другое без div. Я просто удалил и установил ширину для этих изображений. – Mani

Это плохо отформатировано, не знаю, если это исправление вашей проблемы, но его необходимо изменить.

<ul> 
       <nav> 
       <li><a href="index.html"><span>HOME</span></a></li> 
       <li><a href="vehicles.html"><span>VEHICLES</span></a></li> 
       <li><a href="mybmw.html"><span>MY BMW</span></a></li> 
       <h1>REGION</h1> 
       </nav> 
      </ul>

должен быть по крайней мере, это:

   <nav> 
<ul> 
       <li><a href="index.html"><span>HOME</span></a></li> 
       <li><a href="vehicles.html"><span>VEHICLES</span></a></li> 
       <li><a href="mybmw.html"><span>MY BMW</span></a></li> 
</ul> 
       <h1>REGION</h1> 
       </nav>

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

#slider img:first-child 
{ 
    height: 550px; 
    width:70%; 
    float: left; 

} 

#slider div 
{ 
    width:30%; 
    float: left; 
    margin-right: -2em; 

}

Я бы начал с удаления настроек ширины и поля, поскольку я ожидаю, что это вызовет проблему и удалит первую дочернюю часть. Сначала сосредоточьтесь на том, чтобы ползунок работал в соответствии с создателем слайдеров css, а затем добавил свой собственный.

источник

2016-06-01 09:08:56

Привет! Спасибо за ответ, сейчас я студент в сети, и я только начинаю так извиняться за ошибки ха-ха. Изображение слева - 1680w × 756, а изображение справа - 700wx757. Есть ли способ отправить вам html-файл? Я ценю помощь –

Мой макет создает случайный край

ответ

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