javascript - 将红色标题附加到边框的顶部-6ren

javascript - 将红色标题附加到边框的顶部

转载作者：太空宇宙更新时间：2023-11-04 15:59:41

我有一个红色标题作为红色标题，1-我需要将其安装并附加到框架，我需要将标题向上推到红色边框。2-我想将中间列移动到中心在右边和左边的列之间，它们之间的间距相等。我不能这样做，我也不知道为什么。谢谢。参见示例:see example:

CSS 代码:

a { color:blue; }
#content { background-color:#dddddd; width:200px; margin-top:2px; }

html{
    height:0px;
    text-align: right;
    width:1280;
    height:1024px;

}


body {
    background-image:url('http://www.centerwow.com/linkguide/guide_files/pic/bacround_body.png');
    background-repeat:repeat;
    /*overflow:hidden;*/
    font-family:Palatino Linotype;
    font-family: Arial;
    font-size: 12px;
    margin: 0px ;
    padding: 0px ;
    height:1200px;

}
#thirdLine{
    background-image:url('http://www.centerwow.com/linkguide/guide_files/pic/bacround_lineYellow.png');
    background-repeat:repeat;   
    border-color: #316897;
    border-radius: 4px 4px 4px 4px;
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    line-height: 7px;
    height: 100px;
    color: #745B1B;
    font-family: 'CarterOneRegular';
    font-size: 25px;
    line-height: 34px;
    margin: 0;
    padding: 0;
    text-shadow: 2px 2px 0 #FFF0D8;
    width: auto;
}
#wrapMein, #LeftColumn, #columnmiddle, #rightcolumn {
    height:800px;

}
#wrapMein{
    background-image:url('http://www.centerwow.com/linkguide/guide_files/pic/bacround_wrapMein.png');
    background-repeat:repeat;
    border-color: #316897;
    border-radius: 4px 4px 4px 4px;
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    margin: 0px 5px 20px 5px;
    padding: 0px 0px 0px 0px;
    position: relative;
    /*display:inline-block;*/
    vertical-align: top;
     clear:both;
     height:1200px;
}
#columnmiddleTitle{
vertical-align: top;
}
#LeftColumn, #columnmiddle{
 float: left;
}

#LeftColumn {
    position: relative;
    background-image:url('http://www.centerwow.com/linkguide/guide_files/pic/bacround_lineYellow.png');
    background-repeat:repeat;
    border-color: #316897;
    border-radius: 4px 4px 4px 4px;
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    margin: 5px;
    padding: 0 5px 0 5px;
    width: 25%;
}
#leftcolumn_s {
    background-image:url('http://www.centerwow.com/linkguide/guide_files/pic/bacround_line.png');
    background-repeat:repeat;   
    border-color: #316897;
    border-radius: 4px 4px 4px 4px;
    border-style: solid;
    border-width: 10px 1px 1px 1px;
    height: 115px;
    margin: 0 auto ;
    padding: 10px;
    position:absolute; 
    bottom:0px;
    width: 240px;   
}

#columnmiddle{
    position: relative;

    border-color: red;
    border-radius: 4px 4px 4px 4px;
    border-style: solid;
    border-width: 1px 1px 1px 1px;  
    margin: 5px auto;

    padding: opx 10px opx 10px;
    width:40%;


}
#lineAzure {
    background: none repeat scroll 0 0 #880000;
    line-height: 11px;
    margin: 0;
    position:absolute; 
    top:0px; 
}

#insidWindow {
    position:absolute;
    bottom:0px;
    background-image:url('http://www.centerwow.com/linkguide/guide_files/pic/bacround_inside_window.png');
    background-repeat:repeat;
    border-color: #316897;
    border-radius: 4px 4px 4px 4px;
    border-style: solid;
    border-width: 1px 1px 1px 1px;  
    margin: 30px 0px 0px 0px;
    padding: 10px;
    height: 730px;
    width:95%;

}


#rightcolumn {
    position: relative;
    background-image:url('http://www.centerwow.com/linkguide/guide_files/pic/bacround_lineYellow.png');
    background-repeat:repeat;
    border-color: #316897;
    border-radius: 4px 4px 4px 4px;
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    margin: 5px ;
    padding: 0 5px ;
    width: 30%;
    float:right;
    }
    #rightcolumn_s{
    background-image:url('http://www.centerwow.com/linkguide/guide_files/pic/bacround_line.png');
    background-repeat:repeat;   
    border-color: #316897;
    border-radius: 4px 4px 4px 4px;
    border-style: solid;
    border-width: 10px 1px 1px 1px;
    height: 115px;
    padding: 10px ;
    position:absolute;
    bottom:0px;
    width:90%;
 }


h2 {


    color: #443333;
    font-size: 14px;
    line-height: 7px;
    margin: 0px 5px 0px 5px;
    padding: 5px;
    color: white;
}
.secondLine{
    background-image:url('http://www.centerwow.com/linkguide/guide_files/pic/bacround_line.png');
    background-repeat:repeat;   
    line-height: 7px;
    margin: 0px ;
    height:15px;
}
#lineAzurebotom {
    position:absolute; 
    bottom:0px; 
    background: none repeat scroll 0 0 #880000;
    line-height: 11px;
    font-family: 'CarterOneRegular';
    font-size: 25px;
    line-height: 34px;
    margin: 0;
    padding: 0;
    text-shadow: 2px 2px 0 #FFF0D8;
    width: 100%;
}



#chatRead {
    background-image:url('http://www.centerwow.com/linkguide/guide_files/pic/bacround_dark.png');
    background-repeat:repeat;
    border-color: #316897;
    border-radius: 4px 4px 4px 4px;
    border-style: solid;
    border-width: 10px 1px 1px 1px;
    line-height: 90px;
    margin: 0 auto;
    width: 80%;
    height:290px;
    position:absolute; 
    bottom:80px; 

}
#chatWrite {
    background-image:url('http://www.centerwow.com/linkguide/guide_files/pic/bacround_line.png');
    background-repeat:repeat;   
    border-color: #316897;
    border-radius: 4px 4px 4px 4px;
    border-style: solid;
    border-width: 10px 1px 1px 1px;
    line-height: 25px;
    margin: 0 auto;
    width: 80%;
    position:absolute; 
    bottom:40px; 
}




.rcolumn{
    position:relative;
    background-image:url('http://www.centerwow.com/linkguide/guide_files/pic/bacround_lineYellow.png');
    background-repeat:repeat;
    border-color: #316897;
    border-radius: 4px 4px 4px 4px;
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    margin: 0px 0px 0px 0px;
    padding: 10px;
    width:25%;
    height:495px;
    float:right;
    color: red;
}
.ui-wrapper {
    border: 2px solid #70A029;
}

.ui-resizable {
    position: relative;
}

.ui-resizable-e {
    background: url("../pic/resizable-e.gif") repeat scroll right center transparent;
    cursor: e-resize;
    height: 100%;
    right: 0;
    top: 0;
    width: 6px;
}
.ui-resizable-handle {
    display: none;
    font-size: 0.1px;
    position: absolute;
}
.ui-resizable-s {
    background: url("../pic/resizable-s.gif") repeat scroll center top transparent;
    bottom: 0;
    cursor: s-resize;
    height: 6px;
    left: 0;
    width: 100%;
}
.ui-resizable-se {
    background: url("../pic/resizable-se.gif") repeat scroll 0 0 transparent;
    bottom: 0;
    cursor: se-resize;
    height: 9px;
    right: 0;
    width: 9px;
}
.maintitle1 {
    background: center top #2C6987 repeat-x scroll ;
    border-color: #316897;
    border-radius: 4px 4px 4px 4px;
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    box-shadow: 0 1px 0 #528CBC inset;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 300;
    padding: 6px 10px 6px 10px;

}
#logo{
    border-color: #316897;
    border-radius: 4px 4px 4px 4px;
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    float:left;
    height: 97%;

}
.resolution span {
    color: #2B8E00;
    display: block;
    font-size: 55px;
    text-transform: lowercase;
}

html代码:

<body >



<h2>this is body background.</h2>



<div class="secondLine">this is div class secondLine </div>

<div id="thirdLine"><img id="logo" src="http://www.centerwow.com/linkguide/guide_files/pic/Notebook.png" alt="Link Guide"  />this is div id  thirdLine</div>

<div id="wrapMein">



    <div id="LeftColumn" >here is div id = LeftColumn

                <div id="leftcolumn_s">here is div id = leftcolumn_s</div>

            </div>

    <div id="columnmiddle">

            <!--<div id="lineAzure" >this div class lineAzure spnbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|</div>-->    

                <div id="columnmiddleTitle"><H3 class="maintitle1" style="color:red">RED TITLE</H3></div>

                <div id="insidWindow">insidWindow

                    <div id="windowResize" class="ui-wrapper" style="height: 340px; width: 350px;">

                        <div style="position: absolute; top: 20px; left: 20px; ">

                            Resize me<br>

                            Please try to resizeme:<br> www www www.

                            <div class="resolution">

                                You are using

                                <span id="resolutionNumber"></span>

                            </div>

                        </div>

                    </div><br>

                </div><!--insidWindow-->



            </div><!--columnmiddle-->   

        <div id="rightcolumn" >div id="rightcolumn" 

                <div class="floatRight"><H3 class="maintitle1">articals</H3></div>

                    <ul style="float: right;" dir="rtl" >

                  <li>

                    <a href="#" onclick="toggle('node1')">Item 1</a>

                    <ul id="node1" style="display:none">

                      <li>Sub-item 1</li>

                      <li>

                        <a href="#" onclick="toggle('node2')">Sub-item 2</a>

                        <ul id="node2" style="display:none">

                          <li>Sub-sub-item 1</li>

                          <li>Sub-sub-item 2</li>

                        </ul>

                      </li>

                      <li>Sub-item 3</li>

                    </ul>

                  </li>

                  <li>

                    <a href="#" onclick="toggle('node3')">Item 2</a>

                    <ul id="node3" style="display:none">

                      <li>Sub-item 1</li>

                      <li>Sub-item 2</li>

                    </ul>

                  </li>

                  <li>Item 3</li>

                </ul>

                <div id="rightcolumn_s">here is div id = rightcolumn_s</div>

            </div>





        <div id="chatRead">here is div id = chatread</div>

                <div id="chatWrite">here is div id = chatWrite</div>

        <div id="lineAzurebotom">here is div id = lineAzurebotom</div>

</div><!--wrapMein-->



</body>

最佳答案

问题一的解答:

#maintitle1 {
 margin: 0; /* added */
}

问题2的解答:

#columnmiddle { 
 margin-left: 0.5%; /* instead of auto */
}

请注意，问题 2 的解决方案有点乱七八糟。您遇到的问题是 leftcolumn、centercolumn 和 rightcolumn 的宽度加起来不等于 100%。由于 right column 向右浮动，leftcolumn 和 centercolumn 向左浮动，因此您最终会在 centercolumn 和 rightcolumn 之间留下剩余空间。我查看了这个空间的大小，并将它的一半作为左边距添加到 centercolumn。这个解决方案有效，但在我看来不是很漂亮。或者，您必须使所有三列都向左浮动，并确保它们的宽度加起来为 100%。例如像这样:

#columnleft, #columnmiddle, #columnright { 
 float: left;
 margin: 0;
 padding: 0;
}

#columnmiddle { 
 width: 60%;
}

#columnleft, #columnright { 
 width: 20%;
}

关于javascript - 将红色标题附加到边框的顶部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9989087/

文章推荐： c++ - 无法将 'QJsonObject' 转换为 'int' 作为返回

文章推荐： Javascript 不检查单选按钮

文章推荐： html - 在手机上看到的带有 mathjax 的博客

css - 如何调整 Firefox 附加 SDK 弹出窗口/面板的大小？ Firefox 附加 SDK 弹出窗口/面板太小
我关注了 tutorial on creating a popup for an add-on在 Firefox 中，效果很好。我现在遇到的问题是它创建的弹出窗口不会更改大小以适应我添加到其中的内容
覆盖后的FFmpeg concat(附加)
我有一些视频，我需要连接一个标题并添加一些覆盖，问题是我需要先做覆盖，否则时间不正确，然后才将标题连接到视频的开头 ffmpeg -i talk.mp4 -i start_pancarte.png
Powershell 附加 CSV
我正在尝试附加一个 CSV 文件。这是我正在使用的线路。不幸的是，我找不到 export-csv 的附加选项。任何想法都有助于使其发挥作用。 Get-ADGroupMember "Domain Adm
Java 附加 API
我正在努力理解 Attach API (com.sun.tools.attach.*) 的用途。它的典型用途是什么？它是为了“模拟”JVM，以便您可以在不部署/启动代码的情况下测试您的代码吗？它是一个
python - BeautifulSoup 附加
我不明白为什么这不起作用。 soup_main = BeautifulSoup('FooBar') soup_append = BeautifulSoup('Meh') soup_main.body.
php - 附加 where 子句
我有以下代码来返回我想要的字符串 $sql = " SELECT `description` FROM `auctions` WHERE `description` REGEX
Javascript 附加 - 使用数组中的值附加多个元素
我正在尝试从数组中附加具有多个值的元素，但我做错了。这是我的代码: for(var i=0; i ` + pricesArray[i].start_date ` ` + pricesArray[i
附加 Javascript 图像吗？
我正在尝试将图像链接添加到此 javascript 附加表中。使图像位于按钮上方这是代码 $("#1").append(""+section+""+no+""+price+""+button+""
Javascript 附加 + 单击删除它们
我有一个问题，我已经解决了，但它太烦人了。我有一个 js 代码，当使用“追加”按下按钮时，它会放下一些 html 代码，并且通过该代码，我为 x 按钮提供了一个 id，并为容器元素提供了一个 id。
go - “附加”的工作方式是什么？
我想逐行读取文件，并且每一行可能都有很多字符。这个版本的readline效果很好 func readLine(r *bufio.Reader) ([]byte, error) { var (
php - 在文本文件中创建或写入/附加
我有一个网站，每次用户登录或注销时，我都会将其保存到文本文件中。如果不存在，我的代码在附加数据或创建文本文件时不起作用。这是示例代码 $myfile = fopen("logs.txt", "wr"
reactjs - typescript 附加 Prop
我正在尝试使用 typescript 和 Formik 创建一个自定义输入字段。我可以就完成以下代码的最佳方式获得一些帮助吗？我需要添加额外的 Prop 标签和名称......我已经坚持了一段时间，希
jQuery 附加 html 与附加现有元素
我有一个字符串 big_html，我想将它添加到某个 div 中。我观察到以下方面的性能差异: $('#some-div').append( big_html ); // takes about 10
json - FormData 附加 JSON
如何使用 FormData 创建以下结果 ------WebKitFormBoundaryOmz20xyMCkE27rN7 Content-Disposition: form-data; name="
jquery - 附加 jQuery 事件处理程序以便首先触发它们
有没有办法附加 jQuery 事件处理程序，以便在任何先前附加的事件处理程序之前触发该处理程序？我遇到了this article ，但代码不起作用，因为事件处理程序不再存储在数组中，而这正是他的代码所
iphone - 附加 XCode 调试器
我正在开发一个需要网络登录的 iPhone 应用程序。像往常一样我打电话 [[UIApplication sharedApplication] openURL:loginURL]; 这将关闭应用程序并
firefox-addon - 如何制作仅可用于特定站点的Firefox扩展(附加)？
我想开发一个仅针对特定域激活的扩展。我不希望它在不浏览此特定域时出现在浏览器菜单中。有可能这样做吗？最佳答案可能：对于菜单，您可以添加一个弹出窗口侦听器，用于检查当前加载的URL（docs f
javascript - 附加 cookie 的新值
这段 JavaScript 代码 function writeCookie(CookieName, CookieValue, CookieDuration) { var expiration
javascript - jQuery 附加 Handlebars
我正在使用 Handlebars 来渲染使用ajax从本地服务器获得的信息。我的 HTML 看起来像: {{#each Tabs}}
javascript - 附加 html 后欧芹不起作用
我尝试了以下代码，但当输入框中没有数据时它不会通知。当我直接添加此内容(不附加)时，它会起作用。我在这里做错了什么 var output = "\n"+ "\n"+

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 将红色标题附加到边框的顶部