#html #xhtml #css
#HTML #xhtml #css
Вопрос:
Я пытаюсь переместить изображение с текстом «top Score» за пределы родительского div #wrapper
<div id="wrapper">
<div class = "col1-content">
<div class="ribbon left">
<h2>My top Score</h2>
</div>
</div> <!-- col1-content -->
</div>
#wrapper .col1-content .ribbon{
position: absolute;
width:330px;
height: 89px;
z-index: 10;
}
#wrapper .col1-content .left{
background:url(../images/ribbon_left.png) no-repeat 0 0;
left: -35px;
}
#wrapper .para h2{
font-family:"Lucida Console", Monaco, monospace;
font-size:24px;
font-weight:lighter;
padding-left: 30px;
}
Комментарии:
1. Я извлек изображение и загрузил его в другое место для вас.
Ответ №1:
<div id="wrapper">
<div class = "col1-content">
<div class="ribbon left">
<h2>My top Score</h2>
</div>
<div class="para-score">
<ul>
<li id="avatar"></li>
<li id="name"></li>
<li id="score"></li>
</ul>
</div>
</div> <!-- col1-content -->
</div>
#wrapper {position:relative;}
#wrapper .left{
background:url(../images/ribbon_left.png) no-repeat 0 0;
left: -35px;
top:0;
position:absolute;
}
Комментарии:
1. Проблема все еще существует. Есть идеи??
Ответ №2:
Ваш текст исчезает на этой странице, потому что используемый вами класс «left: -35px;» имеет относительное положение. Вы должны либо присвоить ему абсолютную позицию, либо переместить «left: -35px;» в класс .ribbon .
#wrapper .col1-content .ribbon{
position: absolute;
left: -35px;
width:330px;
height: 89px;
z-index: 10;
}
#wrapper .col1-content .left{
background:url(../images/ribbon_left.png) no-repeat 0 0;
}
#wrapper .para h2{
font-family:"Lucida Console", Monaco, monospace;
font-size:24px;
font-weight:lighter;
padding-left: 30px;
}