將紅色標題附加到邊框的頂部

我有一個紅色標題作爲紅色標題，我需要將其掛接並附加到框架上，我需要將標題擡高到紅色邊框.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>

來源

2012-04-03 israel love php

只需添加** margin：0px！important ** css style'maintitle1' class – Jigs 2012-04-03 07:59:33

解問題1：

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

解問題2：

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

請注意，問題2的解決方案有點破解。你遇到的問題是左欄，中欄和右欄的寬度不能達到100％。由於右列浮動右，左列和中央列向左浮動，因此最終會出現中間列和右列之間的剩餘空間。我查看了這個空間的大小，並將其中一半作爲左邊距添加到中央列。這個解決方案的工作原理，但我認爲不是很漂亮。或者，您必須將所有三列左移，並確保其寬度合計達到100％。例如像這樣：

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

#columnmiddle { 
width: 60%; 
} 

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

來源

2012-04-03 07:56:43 Bazzz

將紅色標題附加到邊框的頂部

回答

相關問題