文章/答案/技术大牛

发布

社区首页 >问答首页 >响应元件定位

问响应元件定位
EN

Stack Overflow用户

提问于 2014-01-19 13:53:39

回答 1查看 1.7K关注 0票数 0

我很抱歉，我只是没有在我的搜索中使用正确的术语，因为我确信这个问题已经被回答了几千次。

所以我对CSS和HTML了解很多，但没有我想要的那么多。我所知道的大部分都是针对固定的(无响应的)网站。虽然我知道有一点像%这样的响应，而不是px，但我在调整浏览器的宽度以模拟3显示器(移动平板、笔记本/台式机)时遇到了问题。

我有两个元素并排。台式机上一切都很好。当我缩小到平板电脑和移动，元素(艺术家的名字和社会链接)重叠艺术家形象在左边。此外，菜单也会消失(如果你不介意的话，也想知道这方面的信息(Rebel，鼠标，Social也会在手机大小中消失)。

我如何编码，以使艺术家的名字和社会链接元素被移动到下面的图像，而不是重叠？

我最终希望只在DreamWeaver工作，并放弃Joomla，因为3年后，我开始感觉到了相当严格的限制。

谢谢你提前阅读了这篇文章，我真的很感谢你(任何人)抽出时间来阅读这一切。

工作演示在这里http://www.blackandyellowrecords.com/mca/jlegacy

CSS (包含在Joomla文章中的：)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"                                    

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
<!--
body {
    font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    background-color: #D6D6D6;
    margin: 0;
    padding: 0;
    color: #000;
}
/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
    padding: 0;
    margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
    margin-top: 0;   /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
    padding-right: 15px;
    padding-left: 15px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
    font-family: Ash;
        color: 000;
}
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
    border: none;
}
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
    color:#414958;
    text-decoration: none; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
}
a:visited {
    color: #4E5869;
    text-decoration: none;
}
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
    text-decoration: none;
}
/* ~~ this container surrounds all other divs giving them their percentage-based width ~~ */
.artcontainer {
        background-image: url('/images/icons/jlegheaderfade.png');
        background-repeat: no-repeat;
        background-position: right top;
    width: 100%;
    background-color: #FFF;
    margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout. It is not needed if you set the .container's width to 100%. */
}
/* ~~ This is the layout information. ~~ 
1) Padding is only placed on the top and/or bottom of the div. The elements within this div have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.
*/
.artcontent {
    padding: 0 0;
}
/* ~~ This grouped selector gives the lists in the .content area space ~~ */
.artcontent ul, .artcontent ol { 
    padding: 0 0px 0px 0px; /* this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention. These may be adjusted as you wish. */
}
/* ~~ miscellaneous float/clear classes ~~ */
.fltrt {  /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
    float: right;
    margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
    float: left;
    margin-right: 8px;
}
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the overflow:hidden on the .container is removed */
    clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}

.artcontainer #artistpic{
        position: absolute;
    top:0;
    left:0;
    float: left;
        width: 90%;
        height: auto;
        z-index: 5;
}

.artistname{
    position:absolute;
    text-align: center;
    max-width: 400px;
    line-height: .9;
    float: left;
    left: 65%;
    top: 12%;
}
/*SOCIAL FEED*/
.rebel{
    float:none;
    z-index:1;
}
/*SOCIAL ICONS*/
.sicons{
    position:absolute;
    float: left;
    left: 68%;
    top: 14%;
    font-size:10px;
}
/*SOCIAL ICON BLUR*/
.sicons img {
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}
 /*HOVER BLUR*/
.sicons img:hover {
  -webkit-filter: blur(5px);
}

.artistmenu{
    float:none;
    position:absolute;
    z-index:2;
    top: 525px;
    width: 99.9%;
}

-->
</style>

<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
</head>

HTML:

<body>
<div class="artcontainer">
  <div class="artcontent">
    <div class="artistpic">
       <p><img src="/images/artists/jleg.png" alt="Jlegacy" width="459px"/></p>
    </div>
    <div class="artistname">
    <h1><strong>JLegacy</strong></h1>
    </div>
    <div class="sicons"><a href="http://www.twitter.com/jlegacydatruth" target="_blank"><img src="/images/icons/twitter.png" width="30px" height="30px"/></a>
        <a href="https://www.facebook.com/JLegacysFinest" target="_blank"><img src="/images/icons/fb.png" width="30px" height="30px"/></a>
        <a href="http://instagram.com/jlegacysfinest" target="_blank"><img src="/images/icons/insta.png" width="30px" height="30px"/></a>
    </div>
    <div class="artistmenu">
    <ul id="MenuBar1" class="MenuBarHorizontal">
          <li><a class="MenuBarItemSubmenu" href="#">Social</a></li>
          <li><a href="#"> Streaming Music</a></li>
          <li><a class="MenuBarItemSubmenu" href="#">Releases</a>
            <ul>
              <li><a class="MenuBarItemSubmenu" href="#">Albums</a></li>
              <li><a href="#">Mixtapes</a></li>
              <li><a href="#">Singles</a></li>
            </ul>
          </li>
          <li><a href="#">Mailing List</a></li>
    </ul>
    </div>
    <div class="rebel">
        <center>
        <script type="text/javascript" class="rebelmouse-embed-script" src="https://www.rebelmouse.com/static/js-build/embed/embed.js?site=JLegacysFinest&height=1500&flexible=0&scrollbar_theme=light-2"></script>
        </center>
        </div>
        <script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
    <!-- end .content --></div>
  <!-- end .container --></div>
</body>
</html>

html

css

responsive-design

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-01-19 14:07:10

您提到的元素是位置:绝对，因此，通过更改顶部和左边的值，您可以将它们放置在图像下面。

例如。

.artistname {
  top: 92%;
  left: 49%;
 }

这不完全是响应性设计的重点，但它会对你有用的。当然，你需要媒体查询。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/21217620

复制

相似问题

问响应元件定位
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问响应元件定位EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问响应元件定位
EN