Question

我不是很擅长这一点我知道一些但是我的CSS有些问题我无法弄明白。

我的主要内容ID与我的补充工具栏ID重叠。我相信我搞砸了我的css试图解决这个问题，但我不知道如何解决他的问题。我已经改变了很多次，我已经迷失了。

任何帮助都会很好。

@charset "utf-8";
body  {

    background:  #A00;
    margin: 0; 
    text-align: center; 
    color: #A00;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 100%;
}
.twoColHybLtHdr #container {
    width: 80%;
    background: #CFF;
    margin: 0 auto;
    border: 2px solid #A00;
    text-align: left;
    border-color: #A00;
    float: right;
} 
.twoColHybLtHdr #header {
    background-image:url(img/background3.png);
    padding: 12px;
    background-repeat: repeat-x;
    background-position: left;
} 


.twoColHybLtHdr #sidebar1 {
    float: left;
    width: 14em;
    background: #006633;
    padding: 5px 0;
    background-color: #D4DFAA;
    border: #A00;
}
.twoColHybLtHdr #sidebar1 h3, {
    margin-left: 10px; 
    margin-right: 10px;
    padding: 10px 10px 10px;

}

.twoColHybLtHdr #sidebar1 p {
    margin-left: 10px; 
    margin-right: 10px;
    padding: 10px 10px 10px;
}


.twoColHybLtHdr #mainContent {
    margin: 5px 20px ;
    padding-left: 15px;
    color: #000;
} 
.twoColHybLtHdr #footer {
    padding: 50px 8px; 
    background:#FFFF99;
    background-color: #FF9;
} 
.twoColHybLtHdr #footer p {
    font:Georgia, "Times New Roman", Times, serif, 10px;
    margin: 0; 
    padding: 10px 0; 
    border-color: #666666;

}

.fltrt { 
    float: right;
    margin-left: 10px;
}
.fltlft { 
    float: left;
    margin-right: 10px;
}
.clearfloat { 
    clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}

.twoColHybLtHdr #table {
    font:
    margin: 0;
    padding: 10px;
    color: #FFF;

y background-color: #8B0000;
; background-color: #A00;
border: #A00;
}

Answer 1

不确定发生了什么，因为实际上没有视觉效果。

.twoColHybLtHdr #sidebar1 h3, {

只需删除，，一切都应该是好的

底部有一些错误。

.twoColHybLtHdr #table {
**font:**
margin: 0;
padding: 10px;
color: #FFF;

**y** background-color: #8B0000;
; background-color: #A00;
border: #A00;
}

我猜它应该更像

.twoColHybLtHdr #table {
    font-family: helvetica, arial, sans-serif;
    margin: 0;
    padding: 10px;
    color: #FFF;

.y{
    background-color: #8B0000;
    background-color: #A00;
    border: #A00;
}

Answer 2

确保在.fltrt和.fltlft列上指定宽度

你的CSS应该是这样的：

/** Assuming the parent element (container) is 940px wide **/

.fltlft {
    float: left;
    width: 540px;
}

.fltrt {
    float: right;
    width: 380px;
}

另外，请务必使用**y**替换/删除.y并删除未使用的**font**属性。

Answer 3

将浮子从容器中取出在主要内容上留下一个浮动在清除两者的主要内容之后添加一个div。

.twoColHybLtHdr #container {
width: 80%;
background: #CFF;
margin: 0 auto;
border: 2px solid #A00;
text-align: left;
border-color: #A00;
******** removed Float:right;
} 

.twoColHybLtHdr #sidebar1 {
float: left;
width: 210px;  ****** Change this to pixels unless you are specifying the font-size as !important otherwise you could have problems with this width scaling unintentionally.
background: #006633;
padding: 5px 0;
background-color: #D4DFAA;
border: #A00;
}

.twoColHybLtHdr #mainContent {
margin: 5px 20px ;
padding-left: 15px;
color: #000;
float: left; ****** Added float left to mesh it with your sidebar float right would work as well but wouldn't mesh it with your floated sidebar.
} 

*********** add another div after your mainContent and assign it the ID="clear" 
.twoColHybLtHdr #clear {
clear: left; 
}

你的CSS中还有其他一些错误，但我认为这些是你遇到问题的原因。

CSS /重叠问题

3 个答案: