2013-03-29 2 views
0

это мой первый раз, используя переполнение стека, поэтому я был бы признателен, если бы вы могли ответить на этот вопрос для меня. У меня проблема с моим css, потому что он не отображает три изображения, которые я хочу отобразить на своем веб-сайте. Два изображения для верхней границы и нижней границы веб-сайта, а изображение заголовка - основное изображение, которое будет отображаться на веб-сайте. Внизу внизу находится копия моего css, так что если бы вы могли вернуться ко мне, я буду благодарен вам благодарностью.css проблема Почему мои картинки не отображаются?

body, h1, p, nav ul { 
    margin: 0; 
    padding: 0; 
    color: "#B0E0E6"; 
} 
table{id:"Table_01" width="1500" border="0" cellpadding="0" cellspacing="0" 




} 
img { 
    id:top ; 
    src:"205 images/top.jpg"; 
    width:1750px; 
    height:154px; 

    margin-top: 5px; 
} 

nav ul li { 
    display:inline; 

} 

nav ul li a { 
    text-decoration: none; 
    color: black; 
    height: 40px; 
    border-bottom: 0px solid black; 
    border-top: 0px solid black; 
    padding-left: 300px; 
    padding-top: 5px; 
} 

nav ul li a:hover { 
    background-color: white; 
    color: red; 
} 
h1 { 
    padding-top: 50px; 
    padding-left: 0px; 
    color: yellow; 
    font-size: 90px; 

    white-space: nowrap; 
    margin-left:0px; 
    margin-top:150px; 
    position: relative; 
} 
h2 { 
    padding-top: 50px; 
    padding-left: 30px; 
    color: black; 
    text-align: left; 
    margin-left: opx; 

} 

h3 { 
    padding-top: 50px; 
    padding-left: 30px; 
    color: white; 
    margin-right:155px; 
    margin-top:-100px; 
    position: relative; 
    float: right; 
    text-align: top; 
} 




    } 
header { 
    background-image: url('banner.jpg'); 
    background-repeat: no-repeat; 
    height:400px; 
    width:1750px; 

    margin-top:250px; 
    position:relative; 
    float: left; 


} 





} 


footer ul { 
    list-style: none; 
} 
footer ul li { 
    display:inline; 
} 
footer ul li a { 
     text-decoration: none; 
    color: black; 
    height: 50px; 
    border-bottom: 0px solid black; 

    padding-left: 300px; 
    padding-top: 5px; 
} 
footer ul li a:hover { 
    background-color: blue; 
    color: black; 
} 
footer { 
    background-color: white; 
    bottom:0px; 
    width: 1750px; 
    color: white; 
    clear: both; 
    margin-bottom: 10px; 

} 
img { 

    src:"205 images/bottom.jpg"; 
    width:1750px; 
    height:132px; 
    alt:""; 
    position: relative; 
    bottom: 600px; 
} 

nav { 
    background-color: blue; 
    width: 1750px; 
    float: left; 
    margin-top: 130px; 
} 
article { 
    background-color:#ADD8E6 ; 
    color: black; 
    text-align:left; 
    margin-left: 0px; 
    margin-bottom: 5px; 
    font-size: 20px; 
    } 
forms{ 

margin-left:300px; 
width: 10em; 
margin-bottom: 300px 


} 

#page { 
    background-color: #ADD8E6; 
    width: 800px; 
    margin: auto; 
} 
+2

У вас есть много синтаксических ошибок в вашем файле css. Особенно в ваших правилах для таблиц. – rekire

+0

@rekire: «Синтаксические ошибки» легко помещаются. :) – patricksweeney

+1

В вашем правиле таблицы подразумевается, что вы предполагаете, что можете поместить HTML-атрибуты в свой CSS, что не так. В том, что они делают, есть некоторое совпадение, но HTML и CSS - совершенно разные языки. Вы также считаете, что ставите id: top; выберет изображение с идентификатором «top». Но способ сделать это - заменить селектор (img) на #top. –

ответ

1

Вы должны узнать больше об основах CSS. Хорошим моментом для начала является Mozilla Developer Network. У вас есть несколько синтаксических ошибок в вашем файле css. Попробуйте здесь:

.YourImageClass { 
    background:url("images/top.jpg"); 
    width: 1750px; 
    height: 154px; 
    margin-top: 5px; 
} 

Но обратите внимание, что это работает только для элементов с класса YourImageClass. Например:

<div class="YourImageClass">...</div> 
Смежные вопросы