Я создаю пользовательскую таблицу для веб-сайта. В Dreamweaver вкладка " Design
" отображает именно то, что я хочу, но на вкладке " Live
" нет границ и ничего не видно. Я попытался найти решение, я мог бы кое-что упустить, но пока не нашел решения. Я размещаю код здесь:
CSS
#tableData{
font-family:Verdana, Geneva, sans-serif;
font-size:16px;
color:#09F;
padding-bottom:25px;
padding-top:10px;
border-bottom:thin;
border-bottom-color:#09F;
}
table{
width:600px;
border: 1px solid #666;
}
li{
list-style:none;
height:22px;
border-bottom:1px;
border-bottom-color:#09F;
}
#tableHeading{
font-family:Arial;
font-size:32px;
color:#666;
padding:10px;
float:left;
padding-right:500px;
border-left:thick;
border-right:thick;
border-left-color:#09F;
border-right-color:#09F;
}
HTML
<tr>
<td id="tableData">
<ul>
<li>Android</li>
<li>abced </li>
<li>xyz</li>
</ul>
</td>
</tr>
В дизайне:
В режиме Live View (Browser):
Что я делаю не так? Как я могу это решить?
С уважением
Измените CSS для: -
#tableData{
font-family:Verdana, Geneva, sans-serif;
font-size:16px;
color:#09F;
padding-bottom:25px;
padding-top:10px;
border-bottom-style:solid;/*Updated*/
border-bottom-color:#09F;/*Updated*/
}
#tableHeading{
font-family:Arial;
font-size:32px;
color:#666;
padding:10px;
/*float:left;*/
padding-right:500px;
border-left: 5px solid #09F;
border-right: 5px solid #09F;
}
Вы должны упомянуть полный " border-bottom-style " и " border-bottom-color ",
или используйте вместо этого " border-bottom:1px solid #09F;
"
Пожалуйста, обратитесь к этому скрипту: http://jsfiddle.net/aasthatuteja/gDkn6/
Надеюсь, это поможет!
замещать
border-left:thick;
border-right:thick;
border-left-color:#09F;
border-right-color:#09F;
от
border-left:thick solid #09F;
border-right:thick solid #09F;
Пунктирная рамка, которую вы видите в дизайне Dreamweaver, создается, чтобы показать вам, что есть элемент, это действительно не часть вашей страницы.
Граница в CSS состоит из трех основных компонентов: ширина, цвет и стиль. Свойство стиля - это тот, который вы пропустите.
Измените стили границы на:
border-bottom-width: thin;
border-bottom-color: #09F;
border-bottom-style: solid;
Вы также можете использовать сокращение для нижней границы:
border-bottom: solid thin #09F;
Кроме того, я бы посоветовал использовать численные значения для ширины, например: 1px
чтобы вы точно знали, что именно получаете.