Проблема с style.css

K2A · August 16, 2011

Добрый день.

Я только учусь html и css. Вот Пытаюсь сделать страничку для ресторана. Возникла проблема: когда сайт запускается на компьютере все работает отлично но когда закидываю на хост перестает работать style.css или работает некорректно. Ниже код html и css. Что там не так, уже сил нет. Спасибо заранее за помощь.

Сам сайт www.crystall.zp.ua

HTML Код

Reveal hidden contents

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
<title>TemplateAccess.com</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="description" content="Test demo blog" />
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<link rel="stylesheet" type="text/css" href="superfish.css" media="screen" />
<link rel='stylesheet' id='wp-pagenavi-css'  href='pagenavi-css.css?ver=2.60' type='text/css' media='all' />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/hoverintent.js"></script>
<script type="text/javascript" src="js/superfish.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div id="page2">
  <div id="header">
    <div class="clr"></div>
    <div class="logo">
      <h1><a href="index.html" title="TemplateAccess.com">TemplateAccess.com</a></h1>
    </div>
    <!--/logo -->
    <div class="topnav">
      <ul>
        <li class="current_page_item"><a href="index.html" title="Demo 2 Blog"><span>Главная</span></a></li>
        <li class="page_item page-item-2"><a href="about.html" title="About"><span>О Нас</span></a></li>
        <li class="page_item page-item-2"><a href="menu.html" title="About"><span>Фирменные блюда</span></a></li>
        <li class="page_item page-item-3"><a href="foto.html" title="Arhives"><span>Фото</span></a></li>
        <li class="page_item page-item-4"><a href="Contacts.html" title="Contact us"><span>Контакты</span></a></li>
      </ul>
    </div>
    <!--/topnav -->
    <div class="clr"></div>
    <div id="slider">
      <!-- start slideshow -->
      <div id="slideshow">
        <div class="slider-item"><a href="#"><img src="images/simple_img_1.jpg" alt="icon" width="910" height="332" border="0" /></a></div>
        <div class="slider-item"><a href="#"><img src="images/simple_img_2.jpg" alt="icon" width="910" height="332" border="0" /></a></div>
        <div class="slider-item"><a href="#"><img src="images/simple_img_3.jpg" alt="icon" width="910" height="332" border="0" /></a></div>
        <div class="slider-item"><a href="#"><img src="images/simple_img_4.jpg" alt="icon" width="910" height="332" border="0" /></a></div>
      </div>
      <!-- end #slideshow -->
      <div class="controls-center">
        <div id="slider_controls">
          <ul id="slider_nav">
            <li><a href="#"></a></li>
            <!-- Slide 1 -->
            <li><a href="#"></a></li>
            <!-- Slide 2 -->
            <li><a href="#"></a></li>
            <!-- Slide 3 -->
            <li><a href="#"></a></li>
            <!-- Slide 4 -->
          </ul>
        </div>
      </div>
      <div class="clr"></div>
    </div>
    <!--/slider -->
    <div class="clr"></div>
    <div id="nav1">
            </li>
          </ul>
        </li>
      </ul>
      <div class="clr"></div>
    </div>
    <!--/nav1 -->
    <div class="clr"></div>
  </div>
  <!--/header -->
  <div id="columns">
    <div class="blog_html">
      <div class="blog_html_right">
        <h2>Мы рады приветствовать Вас на нашем сайте<br />
          <span>Добро пожаловать в мир европейской и армянской кухни.</span> </h2>
        <p align="justify">Для нас главное сохранить традиционные вкусовые качества армянских блюд, и именно по этому большинство продуктов, которые используются для приготовления блюд армянской кухни поставляется непосредственно из Армении. Ресторан армянской кухни «Киликия» это не просто армянский ресторан, где представлены такие хиты армянской кухни как кюфта, хашлама, долма, тжвжик, кер-у-сус. У нас также представлены блюда средиземноморской, европейской и японской кухни. В армянском ресторане «Киликия» действует специальное банкетное меню, существует система скидок.. <a href="#">Далее...</a></p>
        <div class="blog_html_right2">
          <h2>Организация торжеств<br />
            <span>Свадьбы, праздники, юбилеи, корпоративы...</span> </h2>
          <img src="images/img_img_1.jpg" alt="picture" width="261" height="116" />
          <div class="clr"></div>
          <p>Ресторан «Кристалл» – это также банкетный зал вместимостью до 140 человек. Наш ресторан идеально подходит как для романтического ужина при свечах, так и для больших корпоративных мероприятий, проведения свадьбы, торжеств, юбилея, семейного праздника. </p>
          <p><a href="#">Далее...</a></p>
        </div>
        <div class="blog_html_right2">
          <h2>Также, мы предлагаем...<br />
            <span>Автомойка, шиномонтаж, WI-FI...</span> </h2>
          <img src="images/img_img_2.jpg" alt="picture" width="261" height="116" />
          <div class="clr"></div>
          <p>Пока вы будете наслаждаться блюдами армянской кухни, мы предлагаем Вам воспользоваться услугами шиномонтажа и автомойки. А также Вы всегда сможете подключиться к высокоскоростному интернету через WI-FI</p>
          <p><a href="#">Далее...</a></p>
        </div>
      </div>
      <div class="blog_html_left">

        <div class="clr"></div>

        <div class="clr"></div>
        <h2>Случайные фото<br />
          <span>Кликните для увеличения</span> </h2>
        <img src="images/work_1.gif" alt="picture" width="69" height="69" /> <img src="images/work_2.gif" alt="picture" width="69" height="69" /> <img src="images/work_3.gif" alt="picture" width="69" height="69" /> <img src="images/work_4.gif" alt="picture" width="69" height="69" /> <img src="images/work_5.gif" alt="picture" width="69" height="69" /> <img src="images/work_6.gif" alt="picture" width="69" height="69" /> <img src="images/work_7.gif" alt="picture" width="69" height="69" /> <img src="images/work_8.gif" alt="picture" width="69" height="69" />
        <div class="clr"></div>
        <p><a href="#">read more...</a></p>
      </div>
      <div class="clr"></div>
    </div>
    <div class="clr"></div>
  </div>
  <!--/columns -->
  <div class="clr"></div>
</div>
<!--/page -->
<div id="page-bot">
  <div id="footer">
    <div class="text">© Ресторан "Кристалл". Все права защищены</div>

    <div class="clr"></div>
  </div>
  <!--/footer -->
</div>
<!--/page-bot -->
</body>
</html>

И CSS

Reveal hidden contents

* {padding: 0px; margin: 0px;}
* { border:0; margin:0; padding:0; outline:none; }
body { color:#656464; font:normal 12px Arial, Helvetica, sans-serif; }
a { color:#494949; text-decoration:none; }
a:hover { text-decoration:none; }
p.clr, .clr { clear:both; padding:0; margin:0; background:none; }
input, select, textarea { border:#cfcfcf 1px solid; color:#404040; font-size:12px; padding:3px; font-family:Arial, Verdana, Helvetica, sans-serif; }
li { list-style:none; }
h2 { color:#222222; font-size:1.5em; font-weight:normal; letter-spacing:-1px; margin:0 0 1em; }
h3 { text-align:left; color:#1c1c1d; font:normal 24px Arial, Helvetica, sans-serif; padding:5px 0 10px 0; margin:0; }
h4 { font-size:1em; margin:0 0 1em; }
p { line-height:1.5em; padding:0 0 1.3em; }
/*=== Layout ===*/
#page { margin:0 auto; background:#fefdfd url(images/main_bg.gif) top repeat-x; }
#page2 { margin:0 auto; background:#fefdfd url(images/main_bg2.gif) top repeat-x; }
#page-bot { padding:0 10px; margin:0 auto; width:890px; }
#header { margin:0 auto; width:910px; }
.header_rss_search_blog { background:#ffffff; border-right:2px solid #470b22; border-bottom:2px solid #470b22; margin:0; padding:5px 0 5px 0; }
/*- Logo -*/
.logo { width:250px; margin:0; padding:0; float:left; }
#header h1 { background:url(images/logo.png) no-repeat; float:left; text-indent:-9999px; width:250px; }
#header h1 a { display:block; height:87px; }
#header h1 a:hover { text-decoration:none; }
/*=== Navigation ===*/
/* RSS */
.rss { width:130px; float:right; padding:10px 0 10px 35px; margin:0; font:normal 13px Arial, Helvetica, sans-serif; color:#383838; background:url(images/rss.gif) left no-repeat; }
.rss a { color:#fefcfc; text-decoration:none; }
/*- Top Nav -*/
.topnav { float:right; width:600px; margin:0; padding:35px 0 0 15px; }
.topnav ul { float:right; list-style:none; padding:0; margin:0; }
.topnav li { float:left; padding:0 5px; }
.topnav li a { font:normal 14px Arial, Helvetica, sans-serif; color:#919191; display:block; float:left; padding:10px 0; }
.topnav li a span { color:#919191; background:none; padding:10px 15px; }
.topnav li a:hover { color:#fffdfd; background:url(images/r_menu.gif) no-repeat right; }
.topnav li a:hover span { color:#fffdfd; background:url(images/l_menu.gif) no-repeat left; }
.topnav li.current_page_item a { color:#fffdfd; background:url(images/r_menu.gif) no-repeat right; }
.topnav li.current_page_item a span { color:#fffdfd; background:url(images/l_menu.gif) no-repeat left; }
/* search */
.search form { float:left; padding:0; margin:15px 0; }
.search span { display:block; float:left; background:#fff; width:280px; padding:5px; height:24px; border:1px solid #dddddd; }
.search form .keywords { width:257px; border:0; line-height:14px; height:14px; float:left; background:none; padding:5px 0; margin:0; font:normal 12px Arial, Helvetica, sans-serif; color:#646667; }
.search form .button { float:left; margin:0; padding:0; width:23px; height:24px; border:0; position:relative; }
/*- Nav1 -*/
#nav1 { margin:10px auto; font:normal 14px Arial, Helvetica, sans-serif; padding:0 10px; background:#ebeaea url(images/nav_bg.gif) top repeat-x; border:1px solid #f7f7f7; }
#nav1 img { float:right; margin:0; padding:15px 0; }
#nav1 ul { padding:0; }
#nav1 ul.sf-menu li { position:relative; float:left; line-height:43px; padding:0 1px 0 0; text-align:left; }
#nav1 ul.sf-menu li a { color:#919191; margin:0 5px; padding:0 15px; }
#nav1 ul.sf-menu li a:hover { color:#51cdfc; }
#nav1 ul.sf-menu li a.active { color:#51cdfc; }
#nav1 ul.sf-menu li ul.children { background:#ebeaea; border:none; width:140px;}
#nav1 ul.sf-menu li ul.children a { color:#919191; margin:0; text-indent:10px;}
#nav1 ul.sf-menu li ul.children a:hover { color:#FFF; background:#51cdfc; text-decoration:none; }
#nav1 ul.sf-menu li ul.children li { border:0; }
#nav1 ul.sf-menu li ul.children li ul.children { border-left:none; border-right:none; }
#nav1 ul.sf-menu li ul.children { margin:0; }
#nav1 ul.sf-menu li ul.children ul.children { margin:0; }
/*=== All Columns ===*/
#columns { margin:0 auto; width:910px; padding:10px 0 0 0; }
#columns img.main_img { padding:0 0 55px 0; background:url(images/img_bg.gif) bottom no-repeat; }
/*=== Center Column ===*/
#centercol { float:left; width:564px; padding:0 10px; }
/*=== Right Column ===*/
#rightcol { float:right; width:280px; padding:0 10px; }
.small_link { padding:10px 0; margin:0 auto; text-align:center; }
.small_link a { font:normal 11px Arial, Helvetica, sans-serif; color:#7f7f7f; }
#rightcol a { color:#656464; text-decoration:none; }
/*=== Sub Columns ===*/
.subcols { background:url(images/subcols-bgr.gif) repeat-y left; height:1%; }
.col1, .col2 { float:left; width:285px; }
.col2 { float:right; }
/*=== Post ===*/
.post_right { float:right; width:355px; }
/*- Post Title -*/
.post-pic { margin:10px 0; }
/*- Post Title -*/
.post-title h2 { display:inline; margin:0; padding:0; font:normal 24px Arial, Helvetica, sans-serif; color:#217ef1; }
.post-title h2 a { display:inline; padding:0; margin:0; color:#1c1c1d; text-decoration:none; }
/*- Post Date -*/
.post-date { margin:0; padding:5px 0; font:normal 11px Arial, Helvetica, sans-serif; color:#aaa9a9; }
.post-date a { color:#51cdfc; font-weight:normal; text-decoration:underline; }
.post-date a:hover { text-decoration:none; }
/*- Post Excerpt -*/
.post-excerpt { display:table; font:normal 12px Arial, Helvetica, sans-serif; color:#7f7f7f; padding:5px 0; line-height:1.8em; }
.post-excerpt a { color:#51cdfc; text-decoration:none; }
/*- Post Lists -*/
.post ul, .post ol { margin:0 0 1.5em; }
.post ul li { background:url(images/ico-list.gif) no-repeat 0 6px; margin:0 0 .4em; padding:0 0 0 10px; }
.post ol li { list-style:decimal; list-style-position:inside; margin:0 0 .4em; }
/*- Post Blockquote -*/
.post blockquote { border-left:3px solid #cfcfcf; font-size:13px; font-style:italic; margin:0 0 1.5em; padding:5px 0 0 10px; }
/*- Post Author -*/
.post-author { margin:0 0 1em; }
.author-details { font-size:.85em; }
.author-descr { display:table; height:1%; }
/*- Social Links -*/
.social-links { text-align:left; padding:0; font:normal 12px Arial, Helvetica, sans-serif; color:#7f7f7f; }
.social-links a { text-decoration:underline; font-weight:bold; color:#51cdfc; }
/*- Related Posts -*/
.post-rel { line-height:1.5em; }
.post-rel a { color:#33707E; }
/*- Widget Title - */
.wtitle { background:none; }
.wtitle h2 { line-height:40px; margin:0; padding:0 0 0 18px; text-align:left; }
/*=== Styling Boxes ===*/
/*- Box1 -*/
.box { margin:0; padding:0; }
.box.post { padding:10px 0; }
.box.ads .content { text-align:center; }
.box.ac .content { padding-left:0; padding-right:0; text-align:center; }
#rightcol .box { margin:0 0 15px 0; }
#rightcol .widget .content { padding:10px; }
#rightcol h3 { padding:10px 0 10px 10px; }
/*- Box2 -*/
.box2 { background:#f9f9f9; border:1px solid #cfcfcf; height:1%; margin:0 0 20px; padding:15px; min-height:115px; }
.box2.alt { background:#FFFFFF; }
.box2.alt { background:#FFFFFF; }
.comm-name, .comm-date { line-height:20px; }
/*=== Styling Lists ===*/
/*- List1 -*/
.list1 li { background:url(images/ico-list1.gif) no-repeat 0 1.1em; border-bottom:1px solid #e7e7e7; height:1%; padding:.7em 0 .7em 13px; }
.list1 li.last { border:0; }
#rightcol .list1 li a:hover { color:#33707e; }
/*=== Styling Forms ===*/
input.btn { background:none; border:0; margin:0; padding:0; }
select { padding:1px; }
/*- Message -*/
.message div { margin:0 0 18px; }
.message input { padding:9px 15px; width:440px; }
.message textarea { height:114px; overflow:auto; padding:9px 15px; width:440px; font-family:Verdana; }
.message .submit { float:left; }
.message .submit input { background:url(images/button.gif); width:128px; height:32px; font-weight:bold; color:#FFF; }
.message .btn { padding:0; width:auto; }
.message .notice { color:#a4a4a4; float:right; font-style:italic; padding:10px 0 0; }
/*=== Pics, Thumbs, Ads etc. ===*/
.pic img { display:block; margin:0; }
.pic.fl img { margin-right:23px; }
.pic.fr img { margin-left:23px; }
.th { display:block; margin:0 0 .5em; }
.th.fl img { margin-right:10px; }
.th.fl img { width:40px; height:40px; border:1px solid #cfcfcf; }
.ads img, .widget_flickrRSS .content img { margin:5px 5px 0 0; padding:0; background:none; border:none; }
.widget_flickrRSS .content img { border:1px solid #cfcfcf; }
.widget_flickrRSS .ac img { border:0; margin:0; }
/*=== Footer ===*/
#footer { color:#989797; font-size:11px; line-height:21px; margin:0 auto; padding:0; border-top:1px solid #eaeaea; }
#footer .text2 { padding:25px 0; float:right; color:#989797; text-decoration:none; font:normal 12px Arial, Helvetica, sans-serif; }
#footer .text { padding:25px 0; float:left; color:#989797; text-decoration:none; font:normal 12px Arial, Helvetica, sans-serif; }
#footer .text2 span { text-align:right; color:#989797; }
#footer .text a { color:#51cdfc; font-weight:bold; }
#footer .text2 a { color:#51cdfc; }
/*=== Misc. ===*/
.fix { clear:both; height:1px; margin:-1px 0 0; overflow:hidden; }
.hl, .hl2 { background:url(images/hl-dot.gif) repeat-x top; clear:both; height:2px; overflow:hidden; width:100%; }
.hl2 { background:none; border-top:1px solid #e7e7e7; height:1px; margin:0 0 .8em; }
.fl { float:left; }
.fr { float:right; }
.ac { text-align:center; }
.ar { text-align:right; }
/* HTML */
/* blog_html */
.blog_html { margin:0 auto; padding:0; }
.blog_html h2 { font:normal 22px Arial, Helvetica, sans-serif; color:#217ef1; padding:15px 0; margin:10px 0; }
.blog_html h2 span { font:normal 11px Arial, Helvetica, sans-serif; color:#ababab; }
.blog_html p { font:normal 12px Arial, Helvetica, sans-serif; color:#919191; padding:5px 0; margin:0; line-height:1.8em; }
.blog_html a { color:#51cdfc; text-decoration:none; }
.blog_html img { margin:5px 2px; padding:0; float:left; }
.blog_html_left { width:305px; float:right; margin:0 10px; padding:0; }
.blog_html_right { width:550px; float:left; margin:0 10px; padding:0; }
.blog_html_right2 { width:50%; float:left; margin:5px; padding:1px; }
/* Slider */
#slider { width:910px; padding:12px 0 0 0; margin:0 auto; height:360px; }
div#slideshow { float:left; width:100%; height:332px; }
.slider-item { width:100% !important; height:332px; }
.slider_content_inner img { border:none; }
.controls-center { width:910px; margin:0 auto; }
#slider_controls { float:right; padding:5px 0 0 0; position:relative; margin:0; z-index:1000; width:910px; }
#slider_controls ul { margin:0 auto; padding:2px 3px; width:90px; height:19px; background:url(images/simple_tabs_bg.gif) top no-repeat; }
#slider_controls ul li { margin:0; padding:0; list-style:none; }
#slider_controls ul li { float:left; display:block; }
#slider_controls ul li a { width:18px; height:18px; background:url('images/tabs_2.gif') no-repeat center center; display:block; float:left; padding:0; margin:2px !important; margin:1px 1px; outline:none; }
#slider_controls ul li a:focus { outline:none; }
#slider_controls ul li a:hover, #slider_controls ul li a.activeSlide { background:url('images/tabs_1.gif') no-repeat center center; }

Edited August 16, 2011 by K2A

Softlink · August 16, 2011

а на хосте файл точно написан как style.css, а не Style.css, например?

И еще css на сайте отличается от того, что вы скинули сюда.

K2A · August 16, 2011

Спасибо что откликнулись. На хосте именно style.css как нужно. Сам файл обновил теперь код должен совпадать.

Softlink · August 16, 2011

On 8/16/2011 at 9:52 AM, K2A said:
Спасибо что откликнулись. На хосте именно style.css как нужно. Сам файл обновил теперь код должен совпадать.

Ничего не поменялось в плане css. Какой был, такой и остался. Может вы не туда закидываете файлик?

Nekromancer · August 16, 2011

Может потому, что на сервере другой файл?

http://www.crystall.zp.ua/style.css

K2A · August 16, 2011

Мистика какая-то... Я забрасываю файлы сайта через Filezilla в папку public_html/папка сайта/ только что скачал именно этот файл который лежит на хосте он один в один с тем что я указал в теме...

Nekromancer · August 16, 2011

Ну вот я тоже скачал, никакой мистики. Какой не правильный файл был на сервере тот и остался.

tius · August 16, 2011

Плюсую Nekromancer. Файл стилей грузится не тот.

Попробуйте указать полный относительный путь к стилям, типа "/style.css" или даже абсолютный.

K2A · August 16, 2011

C горем пополам заработал после того как я его переместил из корневой папки в папку css и приписал путь css/style.css в index.html Но почему он не видел его в корне а видел какой-то другой css файл???

Edited August 16, 2011 by K2A

Nekromancer · August 16, 2011

А кто его знает ваш сервер. Может он отказывается перезаписывать уже существующие файлы.

K2A · August 16, 2011

Сам-то css файл заработал, но криво... Не отображается логотип, не подсвечивается меню

sigma77 · August 16, 2011

On 8/16/2011 at 10:44 AM, K2A said:
Сам-то css файл заработал, но криво... Не отображается логотип, не подсвечивается меню

Файл переместили, а пути-то наверное в css прежние остались

url("images/logo.png") --> url("/images/logo.png")

Так сделайте, тогда путь будет браться от корня сайта.

K2A · August 16, 2011

sigma77

Nekromancer

tius

Softlink

Спасибо Вам всем большое! Все получилось!

ImmampDantalf · November 22, 2011

Зловоние не может превратиться в благоухание.

Sign In

Проблема с style.css

Question

Link to comment

Share on other sites

13 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information