Jump to content
  • 0

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

K2A

Asked by K2A,

 Share

Question

K2A Explorer

K2A

Posted
Posted (edited)

Добрый день.

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

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

HTML Код

<!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

* {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 by K2A
Link to comment
Share on other sites

13 answers to this question

Recommended Posts

  • 0
Softlink Explorer

Softlink

Posted
Posted

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

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

Link to comment
Share on other sites
  • 0
K2A Explorer

K2A

Posted
  • Author
Posted

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

Link to comment
Share on other sites
  • 0
K2A Explorer

K2A

Posted
  • Author
Posted (edited)

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

Edited by K2A
Link to comment
Share on other sites
  • 0
sigma77 Explorer

sigma77

Posted
Posted

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

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

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

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept