0
こんにちは、stackoverflowコミュニティ。画像要素（ソーシャルメディアボタン）が自分のWebページ上の画像に表示されているときに問題にぶつかります。まず第一に、私の要素は座っているdivボックスをあふれています。私はoverflowのプロパティでそれを修正しようとしていましたが、それは私が後ろだったものではありませんでした。だから私はclearfixを使ってdiv内の要素を保持しようとしましたが、それはちょうどコントロールから外れていました。 2時間後にはまだ問題は解決していません。ソーシャルボタンを画像から移動するのにmargin-rightを使用しようとしていましたが、機能しません。このトピックから少し外して、ソーシャルボタンを相対的な位置に実装した後、ページの上部にある私のラインは片側に短くなりました。ページ全体にほぼ伸びて、今はカットされています。だから、ここで2つの問題があります。私は本当にいくつかの助けに感謝します。ここでは、以下の二つの問題のコードのための私の非常に重要です：ページのサイズを変更すると画像が重複しています
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;
}
へようこそSO、ほんの少し予告： '<メタ名=内容= "幅=装置幅、初期の規模= 1.0" は "ビューポート">'
''伊根でなければならない ' '、私はあなたのために何ができるかをチェックします:) – MoolsBythewayそれでは、正確にあなたはソーシャルアイコンを入れたいですか？ – MoolsBytheway
こんにちはMools、私はそれらが画像に沿っているようにします:) –