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 的博客

html - 标题/标题
我附上了一个我尝试使用 html/css 实现的示例(如果您看不到图像:名字和姓氏，然后第二行是职位描述)。我希望所有文本(两行)在一个 div 中强制对齐(左和右)，但我不确定这是否可能。我尝试了一
html - Div 标题/标题
我想使两个 h1 元素成为 div 上的标题/页眉。所以每个都在特定的 div 之上。 Youtube Achievements
Android EditText 标题(标题)就像在 android 指南中
我想让每个 EditText 对象都有自己的标题，就像 Pure Android 指南中那样 (screenshot) 这个东西有原生支持吗？我想他们也可能会使用带有部分的 ListView ，但这对
swift - UICollectionView 标题 View 类似于表格 View 标题(不是节标题)
是否可以像 UITableView headerView 一样创建 UICollectionView 标题 View ？我的意思是整个集合 View 的标题 View ，而不是每个部分的重复 View
android - Material Design 排版 - 标题、标题、间距、文本外观
我一直在遵循有关排版的 Google 官方 Material 设计指南 (http://www.google.com/design/spec/style/typography.html)，但我发现它们
python - 是否有 Python 库来提取视频元数据，例如 [标题、描述、标题/字幕]？
我目前正在尝试找到可以帮助我从视频文件中提取元数据或信息的 python 库，例如 [ mp4, Mkv, Avi, WebM, mpg ] 格式为例。我主要从视频文件中提取的主要数据是 [标题、描
html - Bootstrap 缩略图 - 中心内容(img + 标题)，标题 float :left
你好，这是我正在尝试做的: 将每个缩略图的内容(img + 标题)居中。我的 img 必须是 span3，标题必须是 span4。这是我的问题: 我可以获取内容中心，或者标题 float 在 im
ios - UINavigationBar 后退按钮在某些设备或模拟器上显示 "Back"标题，在其他设备或模拟器上显示之前的 View Controller 标题
我有一个带有导航栏的应用程序，可以从一个 View Controller 导航到下一个 View Controller 。在某些模拟器和设备上导航到下一个 View Controller 时，后退按钮
sql - t-sql 这是如何工作的？ SELECT @MyList = ISNULL(@MyList ,'') + 标题 + ', ' FROM 标题
我遇到了一些非常酷的 t-sql，可以从一个 t-sql 查询中的选定行生成一个逗号分隔的列值列表: SELECT @MyList = ISNULL(@MyList,'') + Title + ',
HTML 标题
请确保将 HTML heading 标签只用于标题。不要仅仅是为了生成粗体或的文本而使用标题。搜索引擎使用标题为您的网页的结构和内容编制索引。因为用户可以通过标题来快速浏览您的网页，所以用标
每页上的 wkhtmltopdf 标题
我正在使用 wkhtmltopdf 将 html 转换为 pdf。我想在每个页面中添加标题，但它只显示在第一页(目录)中。我使用的命令是 "C:\Program Files\wkhtmltopdf
r - 如何在ggplot2中显示obs的方向(标题)
如何使用 ggplot2 显示观察的方向(标题)？有没有办法调整shape=17 (三角形)以便它“指向”下一次观察？示例代码 library(ggplot2) dat % pivot_wide
macos - 标题&&关闭按钮不显示
我尝试在 cocoa 应用程序中显示/隐藏标题栏。我使用以下代码: if ([window styleMask]==NSResizableWindowMask) { [wind
文本字段上的 JavaScript 标题
我有这样的 HTML 标题 http://s1.postimg.org/4ebyk3qwv/image.png 当我编写这段代码时: document.getElementById("TL85_1_
wordpress - 在Facebook上与视频共享URL不显示描述/标题
我叫麦克。谢谢你的帮助。在Wordpress中，我们已经设计了我们的网站，以便在Facebook调试器中og数据尽可能接近youtube。尽管如此，在Facebook上共享视频的方式还是不同的。尽管
scala - 返回确切的响应/标题？
从 web 应用程序的客户端，我点击了服务器端路由，它只是第三方 API 的包装器。使用分派(dispatch)，我试图让服务器端请求返回 exact header 和第三方 API 对客户端 AJA
scala - 返回确切的响应/标题？
从 web 应用程序的客户端，我点击了服务器端路由，它只是第三方 API 的包装器。使用分派(dispatch)，我试图让服务器端请求返回 exact header 和第三方 API 对客户端 AJA
SAPUI5 - 标题、侧边栏和导航
我是 SAPUI5 的新手，在导航、侧边栏和标题方面遇到一些问题。我想开发一个带有标题和侧边栏的应用程序。我为此使用“ToolPage”。每个页面都包含工具页，如下所示:
go - “标题”注释的目的
我最近在为客户做的项目中被介绍给Go。他们已经建立了代码库，需要进行一些更改。我注意到所有的方法，结构等等都有一些奇怪的类似于标题的注释，如下所示: // SomeType ... type Som
java - ListView 标题
我创建了一个采用整个屏幕布局的标题布局(xml 文件)... 我还创建了一个 listView 并将此 header_layout 添加到 listView 中: LayoutInflater inf

太空宇宙

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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