2012-04-01 1 views
0

У меня есть два вопроса, пожалуйста. 1 - У меня есть div под названием id="rightcolumn" в правой части padding: 10px; Внутри div id="rightcolumn" У меня есть пыльник div под названием rightcolumn_s. Этот div id = rightcolumn_s не открыт для max-width:100%; .why? 2 - В div id="rightcolumn" У меня Collapse/Expand этот Collapse Expand имеют баллы. Точки находятся на левой стороне после пункта item_1, item_2, item_3. Мне нужны точки Перед словами item_1, item_2, item_3 в правой части. Спасибо за любую помощь ..... The websitediv свойство ширина не максимально/Collapse Expand

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 не открыт для max-width: 100% ;. why?». Я точно не знаю, что вы просите. Возможно, перефразируйте свой вопрос. А для номера 2 кажется, что пули находятся в нужном месте. Но, как я уже сказал, ваш вопрос может быть более ясным. Возможно, попробуйте перефразировать то, что именно вы пытаетесь достичь. –

ответ

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;">