2012-04-01 55 views
0

我有兩個問題請。 1 - 我有在右側id="rightcolumn"padding: 10px;div id="rightcolumn"裏面我有一個名爲rightcolumn_s的花葯div。 This div id = rightcolumn_s not open to max-width:100%;。爲什麼? 2 - 在div id="rightcolumn"我有Collapse/Expand此摺疊展開有點。 點在item_1,item_2,item_3之後的左側。我需要點數 在右邊的單詞item_1,item_2,item_3之前。 感謝您的幫助..... The websitediv屬性寬度不是最大值/收起展開

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 0px 0px 0px; 
    padding: 0px 0px 0px 0px; 
    height:600px; 

} 
.insidWindow { 
    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: 0px auto 10px auto; 
    padding: 10px; 
    position: relative; 
    top:-515px; 
    width:52.5%; 
} 
h2 { 


    color: #443333; 
    font-size: 14px; 
    line-height: 7px; 
    margin: 0px 5px 0px 5px; 
    padding: 5px; 
    color: white; 
} 
.lineAzure{ 
    background-image:url('http://www.centerwow.com/linkguide/guide_files/pic/bacround_line.png'); 
    background-repeat:repeat; 
    line-height: 7px; 
    margin: 0px 0px 0px 0px; 
    height:15px; 
} 
#lineAzurebotom { 
    background: none repeat scroll 0 0 #880000; 
    line-height: 11px; 
    margin: 0; 
    position: relative; 
    top: -516px; 
} 
#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: 1px 1px 1px 1px; 
    height: 115px; 
    margin: 0 auto 0 auto; 
    padding: 10px; 
    position: relative; 
    top: 360px; 
    width: 88%; 
} 
#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: 1px 1px 1px 1px; 
    height: 115px; 
    max-width:100%; 
    margin: 0px; 
    padding: 10px; 
    position:absolute; /* absolute position (so we can position it where we want)*/ 
    bottom:0px; /* position will be on bottom */ 

} 

#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: 1px 1px 1px 1px; 
    line-height: 90px; 
    margin: 0 auto; 
    position: relative; 
    top: -520px; 
    width: 55%; 
} 
#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: 1px 1px 1px 1px; 
    line-height: 25px; 
    margin: 0 auto; 
    position: relative; 
    top: -520px; 
    width: 55%; 
} 

#lineYelow{ 


    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:15%; 
    color: #745B1B; 
    font-family: 'CarterOneRegular'; 
    font-size: 16px; 
    line-height: 34px; 
    margin: 0; 
    padding: 0; 
    text-shadow: 1px 1px 0 #FFF0D8; 
    width: auto; 

} 
#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; 
    overflow:hidden; 
    margin: 0px 5px 20px 5px; 
    padding: 0px 0px 0px 0px; 
    position: relative; 
    height:540px; 
} 
.column { 
    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; 
    height: 505px; 
    margin: 5px; 
    padding: 0 5px; 
    position: relative; 
    top: -15px; 
    width: 20%; 
} 
.rcolumn{ 
    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; 
    position: relative; 
    width:20%; 
    height:495px; 
    position:relative; 
    top:-528px; 
    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; 
    position:fixed; 
    top:34px; 
    left:0px; 
    height: 9.6%; 

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

HTML代碼:

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

<div class="lineAzure">this is div class lineAzure </div> 
<div id="lineYelow">this is div id LineYelow</div> 
<div id="wrapMein"> 
<div class="lineAzure" style="margin: 0px 22.6% 0px 22.6%;" "width:52.5%"="">this 
div 
classlineAzurespnbsp;|&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="leftcolumn" class="column">here is div id = leftcolumn 
<div id="leftcolumn_s">here is div id = leftcolumn_s</div> 
</div> 
<div id="rightcolumn" class="rcolumn">div id="rightcolumn" 
<div class="floatRight"><H3 class="maintitle1">articals</H3></div> 
    <ul> 
    <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 class="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 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></html> 
+0

請您詳細解釋一下這個「這個div id = rightcolumn_s未打開到最大寬度:100%;爲什麼?」。我不確定你在問什麼。也許重新說出你的問題。而對於第2號來說,子彈是正確的位置。但就像我說的你的問題可能會更清楚。也許試着重新闡述你試圖達到的目標。 – 2012-04-01 21:56:00

回答

0

1)本div id = rightcolumn_s未打開到最大寬度:100%;

爲了使max-width屬性起作用,還需要設置元素的寬度。

max-width: 100%; 
width: 100%; 

2)我需要的點的話之前ITEM_1,ITEM_2,ITEM_3在右側。

定義float: right;ul,這也將把右邊的點。

<ul style="float: right;">