페이지 크기를 조정할 때 이미지가 겹칩니다.

안녕하세요, stackoverflow 커뮤니티. 이미지 요소 (소셜 미디어 버튼)가 내 웹 페이지의 이미지로 실행되면 문제가 발생합니다. 우선 모든 요소가 앉아있는 div 상자를 넘치고 있습니다. 내가 overflow 속성으로 고치려고했지만, 내가 그랬던 것이 아니 었습니다. 그래서 clearfix을 사용하여 div 내에 요소를 유지하려고 시도했지만 방금 제어 할 수 없게되었습니다. 그래서 2 시간 후에 나는 여전히 문제를 해결하지 못했다. 이미지에서 소셜 버튼을 이동하기 위해 margin-right을 사용하려고했지만 작동하지 않습니다. 또한이 주제에서 조금 벗어나서, 상대적 위치로 사회적인 버튼을 구현 한 후에는 페이지 상단의 줄이 한쪽 끝에서 짧아졌습니다. 전체 페이지 전체에 걸쳐 늘리면 잘라내어 사용할 수 있습니다. 그래서 여기에 두 가지 이슈가 있습니다. 나는 정말로 약간의 도움에 감사 할 것이다.페이지 크기를 조정할 때 이미지가 겹칩니다.

HTML :

<!Doctype html> 
<html> 
<body> 
<link href="style.css" rel="stylesheet"> 
<div class="top_page"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<ul id="nav_container"> 

<li><a href="about_proper.html">About</a></li> 
<li><a href="articles.html">Articles</a></li> 
<li><a href="news.html">News</a></li> 
</div> 
<div class="media_buttons"> 
<ul> 
<li><a href="about_proper.html"><img src="social/facebook.png" alt="facebook_social_button" style="width:30px;height:30px;"/></a></li> 
<li><a href="news.html"><img src="social/twitter.png" alt="twitter_social_button" style="width:30px;height:30px;"/></a></li> 
</ul> 
</div> 

<hr> 
<h1>Travel locally and globally</h1> 

<div class="content"> 
<img src="travel.jpg" alt="Go Travel" style="text-align:centre;width:504px;height:228px;"/> 
</div>

CSS :

#nav_container { 

     margin: 0%; 
     text-align: center; 
     padding-top: 5px; 
     left:5px; 
     right:5px; 
     width:auto; 

    } 

    #nav_container li { 
     display: inline; 
     margin: 4%; 
     font-family: Arial; 
    } 

    #nav_container a { 
     color:#3e3e3e; 
     background-color:#ffffff; 
     text-decoration: none; 
    } 
    #nav_container a:hover { 

     background-color:#ffffff; 
     color: #3e5869; 
    } 

    #nav_container a:visited { 
     color:#357c49; 
     background-color: #ffffff; 
    } 

    div { 
     padding-top: 50px; 
     left:5px; 
     right:5px; 

    } 

    h1 { 
     text-align:center; 
     margin: auto; 
     width:60%; 
     color: #73AD21; 
     font-family: Arial; 
     top:-40px; 
     height: 6%; 
     padding: 3%; 
    } 
    .content { 
     margin:auto; 
     text-align:center; 
     top: 5px; 
     padding-bottom:45px; 
} 
    .media_buttons { 
     position:relative; 
     top:300px; 
     left:20%; 
     border:solid; 
     padding:5px; 
     display:block; 
     text-decoration: none; 
     list-style-type:none; 
    } 

    .media_buttons li { 
     list-style-type:none; 
     width:100%; 
     height:100%; 
     margin-right:50px; 
     float:left; 
    }

출처

2016-09-04 Max Visna

시작하도록, 조금주의 : '<메타 NAME = 함량 = "폭 = 기기 폭 초기 스케일 = 1.0」「뷰포트'> ''오프라인 있어야하지' ', 내가 무엇을 할 수 있는지 확인해 보자. – MoolsBytheway

정확히 소셜 아이콘을 어디에 넣고 싶습니까? – MoolsBytheway

안녕 Mools, 나는 그들이 이미지를 따라 가길 바란다. –

jsFiddle

편집

#nav_container { 
 

 
     margin: 0%; 
 
     text-align: center; 
 
     padding-top: 5px; 
 
     left:5px; 
 
     right:5px; 
 
     width:auto; 
 

 
    } 
 

 
    #nav_container li { 
 
     display: inline; 
 
     margin: 4%; 
 
     font-family: Arial; 
 
    } 
 

 
    #nav_container a { 
 
     color:#3e3e3e; 
 
     background-color:#ffffff; 
 
     text-decoration: none; 
 
    } 
 
    #nav_container a:hover { 
 

 
     background-color:#ffffff; 
 
     color: #3e5869; 
 
    } 
 

 
    #nav_container a:visited { 
 
     color:#357c49; 
 
     background-color: #ffffff; 
 
    } 
 

 
    div { 
 
     padding-top: 50px; 
 
     left:5px; 
 
     right:5px; 
 

 
    } 
 

 
    h1 { 
 
     text-align:center; 
 
     margin: auto; 
 
     width:60%; 
 
     color: #73AD21; 
 
     font-family: Arial; 
 
     top:-40px; 
 
     height: 6%; 
 
     padding: 3%; 
 
    } 
 
    .content {  
 
\t margin: auto; 
 
    text-align: center; 
 
    top: 5px; 
 
    width: 596px; 
 
    padding-bottom: 45px; 
 
    position: relative; 
 
} 
 

 
    .media_buttons { 
 
\t  position: absolute; 
 
    padding: 5px; 
 
    display: block; 
 
    top: 30px; 
 
    width: 0px; 
 
    text-decoration: none; 
 
    z-index: 1; 
 
    list-style-type: none; 
 

 
    } 
 

 
    .media_buttons li { 
 
\t  list-style-type: none; 
 
    width: auto; 
 
    height: auto; 
 
    margin-right: 10px; 
 
    display: inline-block; 
 

 
    }

<div class="top_page"> 
 
<ul id="nav_container"> 
 

 
<li><a href="about_proper.html">About</a></li> 
 
<li><a href="articles.html">Articles</a></li> 
 
<li><a href="news.html">News</a></li> 
 
</div> 
 

 
<hr> 
 
<h1>Travel locally and globally</h1> 
 

 
<div class="content"> 
 

 
<div class="media_buttons"> 
 
<ul> 
 
<li><a href="about_proper.html"><img src="social/facebook.png" alt="facebook_social_button" style="width:30px;height:30px;"/></a></li> 
 
<li><a href="news.html"><img src="social/twitter.png" alt="twitter_social_button" style="width:30px;height:30px;"/></a></li> 
 
</ul> 
 
</div> 
 
<img src="travel.jpg" alt="Go Travel" style="text-align:center;width:504px;height:228px;"/> 
 
</div>

다음 코드 아래 두 가지 문제에 대한 내 중요하다 313,210

출처

2016-09-05 18:34:12 MoolsBytheway

안녕 Mools, 고마워, 내가 그 (것)들을 옆에 이미지와 함께 원하는 그래서 페이지의 크기를 조정할 때 그 이미지와 중복되지 않습니다. –

이미지의 왼쪽 상단을 의미합니까? – MoolsBytheway

수정보기 : – MoolsBytheway

페이지 크기를 조정할 때 이미지가 겹칩니다.

답변

관련 문제