-2

Dreamweaver を使用して HTML5 CSS サイトを編集していますが、箇条書きがリストに表示されません。問題が Safari なのかサイトのコードなのかわかりません。

私は多くの提案を試みましたが、解決策を見つけることができませんでした。

INDEX.HTML

<li id="page_donations">
                     <div class="contPad">
                    <div>
                            <h2>What we Do</h2>
                            <div class="scrollingDiv">
                                <ul class="list">
                                    <li>

                                        <div>
                                            <h5>DESIGN</h5>
           <p>Concept development, graphic design, web design, and logo design.</p>
                                        </div>
                                    </li>
                                    <li>
                                      <div>
                                        <h5>MARKETING</h5>
                                        <ul class="list">
   <li>Identify, segment, or focus on your target market    
     <ul>
   <li>Marketbridge can help you assess and narrow down your target market through a variety of traditional and non-traditional strategies including:
    <ul>            
     <li>Market segmentation, database mining and development, leveraging market intelligence, conducting studies and consumer surveys among some of the strategies applied</li>
   </ul>
   </li>   
             </ul>    
             </li>              

</ul>
                                      </div>
                                  </li>
                                    <li>
                                      <div>
                                        <h5>BRANDING</h5>
                                            <p>Marketbridge's success will help drive our vision of cultivating a more cohesive professional and social network within businesses and communities which helps to fuel commerce and goodwill within our communities.</p>
                                      </div>
                                  </li>
                                    <li>
                                      <div>
                                        <h5>PUBLIC RELATIONS</h5>
                                            <p>Quality and integrity are supported by our strategies to help maximize the return on investment in the least amount of time. </p>
                                      </div>
                                  </li>

      <li>
                                      <div>
                                        <h5>ADDITIONAL SERVICES</h5>
                                            <p>Quality and integrity are supported by our strategies to help maximize the return on investment in the least amount of time. </p>
                                      </div>
                                  </li>                               
                                </ul>
                            </div>
                     </div>
                    </div>
                </li>

スタイル.CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700,300);
@import url(http://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700);
/* Left & Right alignment */
.left {
float:left;
}
.right {
float:right;
}
.wrapper {
width:100%;
overflow:hidden;
position:relative;
}
.box {
overflow:hidden;
}
.clear {
clear:both;
width: 100%;
}
.last {
background:none !important;
border:none !important;
}
.pad_0 {
padding:0 !important;
}
/* Global properties ======================================================== */
body, html, .extra, #left_bg{
height:100%;
min-width:1220px;
min-height:550px;
}
body {
overflow:hidden;
border:0;
font:14px/20px Arial, sans-serif;
color:#FFF;
background:url(../images/27.jpg) 0 0 repeat;
}
#left_bg{
position:absolute;
width:81px;
background:url(../images/27_left.jpg) 0 0 repeat-y;
z-index:-1;
}
/* Global Structure ============================================================= */
.extra {
overflow:hidden;
margin-bottom:-80px;
}
.main {
position:relative;
}
.page_spinner {
position:fixed;
background: url(../images/main_spinner.gif) 50% 50% no-repeat #fff;
z-index:99;
width:100%;
height:100%;
top:0;
left:0
}
/* ============================= main layout ====================== */
a {
color:#909090;
text-decoration: none;
outline:none;
}
a:hover {
color:#757575
}
h1 {
position:absolute;
padding:0 0 0 0;
}
h2 {
font:35px/35px 'Open Sans Condensed', sans-serif;
color:#FFF;
font-weight:700;
padding-bottom:15px;
text-shadow: 1px 1px 6px #665d58;
}
h3{
font:18px/ 20px 'PT Sans Narrow', sans-serif;
color:#fff;
font-weight:700;
padding-bottom:7px;
text-shadow: 1px 1px 6px #665d58;
}
h4{
font:14px/20px Arial, sans-serif;
font-weight:normal;
text-shadow: 1px 1px 6px #665d58;
}
h5{
font:16px/16px 'Open Sans Condensed', sans-serif;
font-weight:600;
text-shadow: 1px 1px 6px #665d58;
}
h5 a{
font:16px/16px 'Open Sans Condensed', sans-serif;
color:#fff;
text-decoration: none;
outline:none;
font-weight:600;
text-shadow: 1px 1px 6px #665d58;
}
h5 a:hover{
font:16px/16px 'Open Sans Condensed', sans-serif;
color:#757575
font-weight:600;
text-shadow: 1px 1px 6px #665d58;
}
p{
padding-bottom:7px;
text-shadow: 1px 1px 6px #665d58;
}
.color1{
color:#74398e !important;
}
.color2{
color:#bd3274;
}
.color3{
color:#15b3f9;
}
V.color4{
color:#afbf44;
}
.color5{
color:#f8cc07;
}
.color6{
color:#ee8d1b;
}
.color7{
color:#e0191c;
}
.color8{
color:#000;
}
.color8 a {
color:#909090;
text-decoration: none;
outline:none;
}
color8 a:hover {
color:#757575
}
div.scrollingDiv
{
overflow-y:scroll;
height: 350px;
}
/* ============================= header ====================== */
header{
position:relative;
overflow:hidden;
width:1220px;
height:502px;
padding-top:145px;
}
#logo {
display:block;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
width:235px;
height:153px;
background:url(../images/logo.png) 0 0 no-repeat;
}
/* ============================= menu ====================== */
#leftLines{
float:left;
width:81px;
height:502px;
background:url(../images/left_menu_line.png) 0 0 no-repeat;
}
.menu {
float:left;
width:1139px;
height:502px;
}
#menu{
padding-top:121px;
}
#menu > li {
height:27px;
display:block;
margin-bottom:11px;
}
#menu > li > span{
display:inline-block;
width:50px;
height:27px;
}
#menu > li a {
position:relative;
top:-1px;
left:-3px;
font:34px/28px 'Impact', sans-serif;
text-transform:uppercase;
font-weight:normal;
}
#item1 > span{
background:url(../images/menu_line1.png) 0 0 repeat-x;
}
#item2 > span{
background:url(../images/menu_line2.png) 0 0 repeat-x;
}
#item3 > span{
background:url(../images/menu_line3.png) 0 0 repeat-x;
}
#item4 > span{
background:url(../images/menu_line4.png) 0 0 repeat-x;
}
#item5 > span{
background:url(../images/menu_line5.png) 0 0 repeat-x;
}
#item6 > span{
background:url(../images/menu_line6.png) 0 0 repeat-x;
}
#item7 > span{
background:url(../images/menu_line7.png) 0 0 repeat-x;
}
/* ============================= pages ====================== */
#page_home, #page_privacy, #page_more{
background:url(../images/page1_top_line.png) 0 0 repeat-x;
}
#page_mission{
background:url(../images/page2_top_line.png) 0 0 repeat-x;
}
#page_donations{
background:url(../images/page3_top_line.png) 0 0 repeat-x;
}
#page_news{
background:url(../images/page4_top_line.png) 0 0 repeat-x;
}
#page_reports{
background:url(../images/page5_top_line.png) 0 0 repeat-x;
}
#page_links{
background:url(../images/page6_top_line.png) 0 0 repeat-x;
}
#page_contacts{
background:url(../images/page7_top_line.png) 0 0 repeat-x;
}
/* ============================= content ====================== */
#content {
position:absolute;
top:160px;
padding:5px 0px 12px 0px;
width:711px;
height:453px;
background:url(../images/page_plane.png) 0 0 no-repeat;
z-index:5;
}
#content > ul {
position:relative;
width:100%;
height:100%;
overflow:hidden;
}
#content > ul > li {
position:absolute;
width:100%;
height:584px;
padding-top:24px;
left: -26px;
top: -18px;
}
.contPad{
padding:0px 30px 0 40px;
}
.padBot1{
padding-bottom:40px;
}
.padBot2{
padding-bottom:25px;
}
.padTop1{
padding-top:20px;
}
.rBorder{
background:url(../images/content_step_line.png) right 0 repeat-y;
}
.more1, .more2{
position:relative;
margin-top:12px;
display:inline-block;
color:#fff;
-webkit-border-radius:8px;
-moz-border-radius:8px;
border-radius:8px;
-webkit-transition:color 0.5s ease;
-moz-transition:color 0.5s ease;
-o-transition:color 0.5s ease;
transition:color 0.5s ease;
padding:7px 14px 10px;
font:18px/ 18px 'PT Sans Narrow', sans-serif;
font-weight:700;
text-shadow: 1px 1px 0px #665d58;
border-top:1px solid #646464;
border-right:1px solid #646464;
background:url(../images/more_1.png) 0 0 repeat-x;
}
.more1:hover{
color:#febe3b;
}
.more2{
margin-top:0px;
padding:5px 14px 8px;
font:22px/ 22px 'PT Sans Narrow', sans-serif;
font-weight:300;
letter-spacing:1px;
text-shadow: 1px 1px 0px #14b1f6;
border-top:1px solid #14b1f6;
border-right:1px solid #14b1f6;
background:url(../images/more_2.png) 0 0 repeat-x;
}
.more2:hover{
color:#3b3019;
}
.imgBot{
padding-bottom:16px;
}
#table1{
margin-bottom:35px;
height:253px;
border-bottom:1px solid #a6a6a6;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px; 
}
#tableHeader{
background-color:#15b3fa;
}
#tableHeader, #table1 .col1{
font-size:14px;
color:#151515;
font-weight:bold;
text-transform:uppercase;
}
#table1 #tableHeader td{
height:41px;
}
#table1 .anotherColor{
background-color:#efeff0;
}
#table1 td{
height:30px;
}
#table1 tr{
vertical-align:middle;
}
#table1 .col1{
border-left:1px solid #e9e9e9;
border-right:1px solid #c9c9ca;
width:43px;
text-align:center;
}
#table1 .col2{
width:440px;
text-indent:20px;
}
#table1 .col3{
border-left:1px solid #c9c9ca;
border-right:1px solid #e9e9e9;
width:149px;
text-align:center;
}
#page1_top{
padding:25px 0px 0px 45px;
width:560px;
height:200px;
background:url(../images/page1_pic1.) 0 0 no-repeat;
}
#page1_top > div{
padding-bottom:13px;
font:34px/ 34px 'Open Sans Condensed', sans-serif;
color:#FFF;
font-weight:300;
text-shadow: 1px 1px 6px #665d58;
}
#page1_top > div > span{
display:block;
font:50px/ 50px 'Open Sans Condensed', sans-serif;
color:#FFF;
font-weight:700;
}
.google_map{
float:left;
width: 360px;
height: 180px;
background: #fff;
}
.address {
width:230px;
padding-left:20px;
float:left;
}
.address > span{
display:block;
width:160px;
font:18px/ 20px 'PT Sans Narrow', sans-serif;
color:#757575;
font-weight:700;
padding-bottom:7px;
}
.mailLink{
color:#e0191c;
text-decoration:none;
}
.mailLink:hover{
text-decoration:underline;
}
/* ============================= lists ====================== */
.list1 li{
overflow:hidden;
width:270px;
padding-bottom:20px;
}
.list1 li > img{
float:left;
padding-right:10px;
}
.list1 li > ul{
overflow:hidden;
padding-top:7px;
width:178px;
}
.list2 li{
overflow:hidden;
padding-bottom:8px;
}
.list2 li > img{
float:left;
padding-right:18px;
}
.list2 li > div{
float:left;
overflow:hidden;
width:224px;
}
.list2 li > div a:hover{
text-decoration:underline;
}
.list3 li{
padding-bottom:17px;    
}
.list3 li > img{
padding-bottom:16px;
}
.list3 li a{
font:18px/ 20px 'PT Sans Narrow', sans-serif;
color:#757575;
font-weight:700;
padding-bottom:7px;
}
.list3 li a:hover{
text-decoration:underline;
}
.list4{
margin-bottom:-10px;
}
.list4 li{
overflow:hidden;
padding-bottom:10px;
}
.list4 li > img{
float:left;
padding-right:20px;
}
.list4 li > div{
float:left;
overflow:hidden;
width:354px;
}
.list5 li{
padding-bottom:11px;
}
.list5 p{
line-height:18px;
padding-bottom:8px;
}
.list5 a{
font-size:13px;
font-weight:bold;
color:#ff6400;
}
.list5 a:hover{
text-decoration:underline;
}
.listWithMarker1 li, .listWithMarker2 li {
display:block;
padding-bottom:4px;
}
.listWithMarker1 li a, .listWithMarker2 li a {
display:inline-block;
padding:0 5px 0 17px;
text-decoration:underline;
}
.listWithMarker1 li a, .listWithMarker2 li a {
-webkit-transition:color 0.3s ease;
-moz-transition:color 0.3s ease;
-o-transition:color 0.3s ease;
transition:color 0.3s ease;
}
.listWithMarker1 li a {
color:#ff2a29;
background:url(../images/list_marker_1.png) 0 5px no-repeat;
}
.listWithMarker2 li a {
color:#feb829;
background:url(../images/list_marker_2.png) 0 5px no-repeat;
}
.listWithMarker1 li a:hover, .listWithMarker2 li a:hover {
color:#757575;
}
/* ============================= footer ====================== */
footer{
position:relative;
width:1100px;
font:15px/ 15px 'Open Sans Condensed', sans-serif;
color:#757575;
font-weight:700;
text-align:center;
text-transform:uppercase;
}
footer a{
text-decoration:none;
color:#c2c2c2;
}
footer ul{
padding-top:9px;
}
footer ul li{
display:inline-block;
padding-right:1px;
}
#icon1, #icon2{
display:block;
width:31px;
height:31px;
}
#icon1{
background:url(../images/icon1.png) 0 0 no-repeat;
}
#icon2{
background:url(../images/icon2.png) 0 0 no-repeat;
}
/* ============================= forms ============================= */
#form1 input {
margin:0;
border:1px solid #adadad;
background-color:#fff;
padding:15px 0 15px 17px;
width:252px;
box-shadow:none;
}
#form1 textarea {
resize: none;
margin:0;
border:1px solid #adadad;
background-color:#fff;
padding:14px 0 5px 17px;
width:330px;
height:92px;
overflow:auto;
line-height:18px;
}
#form1 label {
position:relative;
display:inline-block;
min-height:60px;
}
#form1 .error, #form1 .empty {
position:relative;
top: -3px;
display:none;
font-size:10px;
color:#414040;
text-transform:none;
}
.btns{
float:right;
}
.btns a{
margin:18px 0 0 13px;
}
/* Form defaults */
input, select, textarea {
font:14px/20px Arial, sans-serif;
color:#909090;
}
.blacktext {
color: #000;
}
.fb {
vertical-align: middle;
padding:40px 40 40px 40px;
}

リセット.CSS

a, abbr, acronym, address, applet, article, aside, audio,
b, blockquote, big, body,
center, canvas, caption, cite, code, command,
datalist, dd, del, details, dfn, dl, div, dt, 
em, embed,
fieldset, figcaption, figure, font, footer, form, 
h1, h2, h3, h4, h5, h6, header, hgroup, html,
i, iframe, img, ins,
kbd, 
keygen,
label, legend, li, 
meter,
nav,
object, ol, output,
p, pre, progress,
q, 
s, samp, section, small, span, source, strike, strong, sub, sup,
table, tbody, tfoot, thead, th, tr, tdvideo, tt,
u, ul, 
var {
background: transparent;
border: 0 none;
font-size: 100%;
margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
vertical-align: top; }

ol, ul {
list-style-position:inside;
list-style: circle;
}
blockquote, q {
quotes: none;
}
table, table td { 
padding:0;
border:none;
border-collapse:collapse;
}
img {
vertical-align:top; 
}
embed { 
vertical-align:top;
}
* { border:none}
input, textarea{ outline:none !important}

article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, 
footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video{                     
display: block; }


mark, rp, rt, ruby, summary, time{ display: inline }

レイアウト.CSS

.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12,
.grid_13,
.grid_14,
.grid_15,
.grid_16,
.grid_17,
.grid_18,
.grid_19,
.grid_20,
.grid_21,
.grid_22,
.grid_23,
.grid_24 {
float: left;
}


.rightIndent{
padding-right:10px;
}
.rightIndent1{
padding-right:40px;
}
.rightIndent2{
padding-right:50px;
}
.leftIndent1{
padding-left:40px;
}
.leftIndent2{
padding-left:40px;
}


.height1{

}

.grid_1 {
width:30px;
}

.grid_2 {
width:70px;
}

.grid_3 {
width:110px;
}

.grid_4 {
width:150px;
}

.grid_5 {
width:190px;
}

.grid_6 {
width:230px;
}

.grid_7 {
width:270px;
}

.grid_8 {
width:310px;
}

.grid_9 {
width:350px;
}

.grid_10 {
width:390px;
}

.grid_11 {
width:430px;
}

.grid_12 {
width:470px;
}

.grid_13 {
width:510px;
}

.grid_14 {
width:550px;
}

.grid_15 {
width:590px;
}

.grid_16 {
width:630px;
}

.grid_17 {
width:670px;
}

.grid_18 {
width:710px;
}

.grid_19 {
width:750px;
}

.grid_20 {
width:790px;
}

.grid_21 {
width:830px;
}

.grid_22 {
width:870px;
}

.grid_23 {
width:910px;
}

.grid_24 {
width:950px;
}
4

2 に答える 2

8

コード スニペットを一緒にスコッチ テープで貼り付けたところ、箇条書きが消える理由が 2 つあります。まず、箇条書きが実際に表示されるように、リストの左側に十分な余白があることを確認してください (20 ピクセルで十分です)。盗聴者がまだ隠れている場合 (あなたの例のように、白い背景に白いテキストはありますか?)、リストに色を付けます。このようなもの:

ul.list{
    margin-left: 20px;
    color: deeppink;
}

弾丸にテキストの影がないという問題に直面することになります。これについては、簡単で汚い答えを出すことはできません。個人的には、箇条書きを非表示にし、リスト項目にパディングを与え、適切なスタイルの背景画像をそこに貼り付けます。

于 2012-08-18T00:45:51.303 に答える