麻烦定位特定元素？

时间：2015-02-17 07:25:37

标签： html css

我想编辑主帖的边距/边框/填充，而不会影响我的侧边栏。网页上的所有内容都会受到影响，而不是这样做。也许这对我的＆＃34; div＆＃34;是一个问题。元素？我确定我只是忽略了一些东西，但是我花了很多时间看这段代码，我无法开始清楚地看到它。有人帮忙吗？提前致谢。这是一个Tumblr顺便说一句，但我怀疑这会影响到这一点。 

<!DOCTYPE HTML>
<HTML>


<head>
<title>{Title}</title>
<link rel="Shortcut Icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
    {block:Description}
        <meta name="description" content="{MetaDescription}" />
    {/block:Description}

    <!-- DEFAULT COLORS -->
    <meta name="color:Background" content="#000000"/>
    <meta name="color:Center Background" content="#000000"/>
    <meta name="color:Post Background" content="#000000"/>
    <meta name="color:Accent" content="#000000"/>
    <meta name="color:Links" content="#000000"/>
    <meta name="color:Used Links" content="#000000"/>
    <meta name="color:Body Text" content="#000000"/>
    <meta name="color:Title Text" content="#000000"/>
    <meta name="font:Body" content="Arial, Helvetica, sans-serif, Monospace" 
/>
    <meta name="font:Title" content="Arial, Helvetica, sans-serif,           
Monospace"> 








</head>

<style type="text/css">
{CustomCSS}

#profile img {
position:fixed, absolute;

margin-bottom:-16%;
}

#Sidebar {
background-color:{color:Accent};
position:fixed;
text-align: left;
font-family:{font:Title};
color:{color:Title Text};
float:left;

width:12%;
height:auto;

margin-top:2%;
margin-bottom:1%;
margin-left:6%;
margin-right:1%;

border-top:1%;
border-bottom:1%;
border-left:2%;
border-right:1%;

padding-top:2%;
padding-bottom:1%;
padding-left:2%;
padding-right:1%;  
}

.try {
font-family:{font:Body};
margin-top:;
margin-bottom:3%;
margin-left:24%;
margin-right:1%;}


#permalink {
width:auto;
height:auto;

margin-top:auto;
margin-bottom:auto;
margin-left:27%;
margin-right:1%;
}

#footer {
font-family:{font:Body};
text-align:center;

width:21%;
height:auto;

margin-top:1%;
margin-bottom:1%;
margin-left:10%;
margin-right:2%;

border-top:1%;
border-bottom:1%;
border-left:2%;
border-right:2%;

padding-top:1%;
padding-bottom:1%;
padding-left:2%;
padding-right:2%; 

}
</style>
<div id="Wrap">
<body bgcolor="{color:Background}" link="{color:Links}" vlink="{color:Used     
Links}">



<div id="Sidebar">  

<div id="profile"><img src="{PortraitURL-96}"/></div> 
<h2 id="Title"><a href="{BlogURL}">{Title}</a></h2>
<p id="Description">
{block:Description}{Description}
{/block:Description}
</p>


{block:HasPages}
{block:Pages}

<p id="About"><a href="{URL}">{Label}</a></p>
{/block:Pages}
{/block:HasPages}



{block:AskEnabled}
<p id="asks"><a href="/ask">{AskLabel}</a></p>
{/block:AskEnabled}
</div> <!--Sidebar-->
<div id="postwrap"> 
<ol id="posts">





{block:Posts} 

<div class="try">


{block:Text}


<div id="text">
{block:Title}
<h4><a href="{Permalink}" a>{Title}</a></h4>{/block:Title}
{Body}

</div> <!--text-->
{/block:Text}

</div> <!--try-->


<div class="try">

{block:Photo}
 <div id="photo">


<img src="{PhotoURL-400}" alt="{PhotoAlt}"/>
{block:Caption}
 <div class="caption">{Caption}</div>
 {/block:Caption}


 {NoteCountWithLabel} 
 </div> <!--try-->
 {/block:Photo}

 </div> <!--photo-->



 <div class="try">

 {block:Panorama}
 <div id="panorama">
 {LinkOpenTag}
  <img src="{PhotoURL-Panorama}" alt="{PhotoAlt}">
 {LinkCloseTag}{block:Caption}
 <div class="caption">{Caption}</div>
 {/block:Caption}

{NoteCountWithLabel}
</div> <!--panorama-->
{/block:Panorama}

</div> <!--try-->


<div class="try">

{block:Photoset}
<div id="photoset">
{Photoset-500}{block:Caption}
   <div class="caption">{Caption}</div> <!--caption-->
 {/block:Caption}
{NoteCountWithLabel}
 </div> <!--photoset-->
 {/block:Photoset}

 </div> <!--try-->


 <div class="try">

{block:Quote}
<div id="Quote">
"{Quote}"

{block:Source}
  <div class="source">{Source}</div>
  {/block:Source}
 {NoteCountWithLabel} 
 </div> <!--quote-->
{/block:Quote}

</div> <!--try-->

<div class="try">

{block:Link}
<div id="link">
 <a href="{URL}" class="link" {Target}>{Name}</a>
 {block:Description}
   <div class="description">{Description}</div>
   {/block:Description}
{NoteCountWithLabel}   
</div> <!--link-->
{/block:Link}

</div> <!--try-->


<div class="try">

{block:Chat}
<div id="chat">

                    {block:Title}
                        <h3><a href="{Permalink}">{Title}</a></h3>
                    {/block:Title}

                    <ul class="chat">
                        {block:Lines}
                            <li class="{Alt} user_{UserNumber}">
                                {block:Label}<strong>
                                    <span class="label">{Label}</strong>   
 </span>
                                {/block:Label}{Line}
                            </li>
                        {/block:Lines}
                    </ul>
            {NoteCountWithLabel}
            </div> <!--chat-->
            {/block:Chat}

            </div> <!--try-->



<div class="try">

{block:Video}
    <div id="video">
                <li class="post video">
                    {Video-500}{block:Caption}
                        <div class="caption">{Caption}</div>
                    {/block:Caption}
                </li>
                {NoteCountWithLabel}
            </div> <!--video-->
            {/block:Video}
            </div> <!--try-->


            <div class="try">

            {block:Audio}
            <div id="Audio">
                <li class="post audio">
                    {AudioEmbed}{block:Caption}
                        <div class="caption">{Caption}</div>
                    {/block:Caption}
                </li>
                <link rel="notes" href="{URL}/>{NoteCountWithLabel}
                </div> <!--audio-->
            {/block:Audio}

            </div> <!--try--> 
          <div id="permalink">
 <a href="{Permalink}">
 {block:Date}{lang:Posted TimeAgo}{/block:Date}
 {block:NoteCount} with {NoteCountWithLabel}{/block:NoteCount}
 </a>
 </div>
 {block:PostNotes}
 <div id="notecontainer">{PostNotes}</div>
 {/block:PostNotes}

            {/block:Posts}

            </div> <!--Post Wrap-->
            </div> <!--Likes and Reblogs-->

            </ol>

 <div class="try">
 <div id="footer">
        {block:PreviousPage}
            <a href="{PreviousPage}">&#171; Previous</a>
        {/block:PreviousPage}{block:NextPage}
            <a href="{NextPage}">Next &#187;</a>
        {/block:NextPage}


        <a href="/archive">Archive</a>
 </div>
 </p>

 </div> <!--wrap-->
 </div> <!--Footer-->



 </body>

 </HTML>

对不起，如果我的代码太糟糕了，我就是在学习。

1 个答案:

答案 0 :(得分：0)

首先在CSS中定位很难，很大程度上是因为它不会抛出错误 - 它只是不起作用。首先考虑一下你想要实现的目标 - 你已经在你的侧边栏中添加了固定的位置，但我怀疑这更多是出于挫败感并试图使其工作而不是实际上希望它被定位，因为页面内容较低现在已经不见了。

添加了这个，很难看出其他地方出了什么问题。

一些通用指针可以让您的生活更轻松：

  1. 尝试仅使用类作为挂钩进行样式设置。因此，而不是#sidebar使用.sidebar（而不是）这将创建一个公平的竞争环境 - id比类更具特异性，并且通常你总是希望保持你的特异性尽可能低。点击此处了解详情：http://css-tricks.com/strategies-keeping-css-specificity-low/

  2. 首次使用时查找CSS属性 - 这里有很好的资源：http://css-tricks.com/almanac/

    3. 更具体地说：

    您想要创建一个宽度为12％的侧边栏，其内容区占据其余部分，然后在其中设置样式元素。所以你的包装应该是这样的：

    <body>
  <div class="sidebar"></div>
  <div class="content"></div> <!-- This currently in your .try div -->
</body>

    现在添加以下样式：

    .sidebar {
    width: 12%; /* This will set the width of the sidebar */
    padding: 0 20px; /* This will give you padding left and right*/
    float: left; /* This will move it to the left of the page */
}
.content {
    width: 88%;
    padding: 20px;
    float: left; /* This will stack the content div against the sidebar div */
}
* {
    box-sizing: border-box
}

    边框框位：这会将您的框尺寸重置为边框，这将保持您的宽度符合预期，因为它将计算填充作为宽度的一部分，而不是将其添加到宽度非常混乱。点击此处：http://www.paulirish.com/2012/box-sizing-border-box-ftw/

    在这里演示：http://codepen.io/simoncmason/pen/QwmLxV

    我希望这能让你滚动。

相关问题
最新问题