调整页面大小时图像重叠

时间:2016-09-04 19:55:27

标签: html css responsive-design responsive responsive-images

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

1 个答案:

答案 0 :(得分:0)

jsFiddle

修改

&#13;
&#13;
#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;
    width: 596px;
    padding-bottom: 45px;
    position: relative;
}

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

    }

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

    }
&#13;
<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>
&#13;
&#13;
&#13;