내 레이아웃이 무작위 마진을 만듭니다.

저는 여기 새로 왔으며 쉽게 고칠 수 있다고 생각되는 매우 성가신 문제에 직면하고 있습니다. 그러나 나는 지난 1 시간 동안 이것을 알아 내려고 노력해 왔습니다. HTML 코드입니다 여기 See below 내 레이아웃이 무작위 마진을 만듭니다.

아래 참조 - - 여기

내 문제는 내가 문제를 나타 내기 위해 주위에 빨간색 상자를 그린 여기

<!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 파일을 보낼 수있는 방법이 있습니까? 나는 도움을 주셔서 감사합니다 –

내 레이아웃이 무작위 마진을 만듭니다.

답변

관련 문제