Как сделать кликабельный логотип

Discussion in 'CSS, HTML, Web 2.0, верстка по web-стандартам' started by diki, Aug 27, 2012.

  1. woojin
    Offline

    woojin Местный Staff Member => Cпециалист <=

    Joined:
    May 31, 2009
    Messages:
    3,204
    Likes Received:
    334
    Gender:
    Male
    покажи сайт, как тебе скажешь почему у тебя там не отображается
    да и вообще "ИШАЧИНА" вообще себе на уме браузер, он от версии к версии чего нибудь да отчибучит
    лучше конечно же им не пользоваться, но куда деваться))))
     
  2. OlegK
    Offline

    OlegK Russian Joomla! Team Staff Member ⇒ Профи ⇐

    Joined:
    Jan 17, 2011
    Messages:
    7,812
    Likes Received:
    771
    Gender:
    Male
    woojin,
    По твоей же ссылке htmlbook.ru ,указано ,что ИЕ до 9 версии, не поддерживает html 5 <header>
     
  3. woojin
    Offline

    woojin Местный Staff Member => Cпециалист <=

    Joined:
    May 31, 2009
    Messages:
    3,204
    Likes Received:
    334
    Gender:
    Male
    draff, я то все время рассчитываю на лучшее, по этому и думаю что люди пользуются последними версиями ПО
     
  4. Offline

    diki Недавно здесь

    Joined:
    Mar 9, 2011
    Messages:
    118
    Likes Received:
    0
    Gender:
    Male
    Мой сайт

    И там же ещё написано - Internet Explorer до версии 8.0 включительно игнорирует тег <header>, но отображает его содержимое. Выходит логотип по любому должен отображаться а его нет
     
    Last edited by a moderator: Aug 28, 2012
  5. woojin
    Offline

    woojin Местный Staff Member => Cпециалист <=

    Joined:
    May 31, 2009
    Messages:
    3,204
    Likes Received:
    334
    Gender:
    Male
    сравни css для ишака
    Код (CODE):
    1. #logo {
    2.     MARGIN: 0px 0px 0px 5px;
    3.         WIDTH: 240px;
    4.         DISPLAY: block;
    5.         HEIGHT: 132px
    6. }

    и css хрома
    Код (CODE):
    1. #logo {
    2.     margin: 0 0 0 5px;
    3.     display: block;
    4.     background: url(../images/stok-info.png)no-repeat;
    5.     width: 240px;
    6.     height: 132px;
    7. }

    вот тебе и ответ почему не отображается [!]
    по какой то причине у тебя в css для ишака нет пути к картинке, а в хроме он (путь) есть
    может у тебя используются два разных css файла которые лежат в разных каталогах))))
     

    Attached Files:

  6. Offline

    diki Недавно здесь

    Joined:
    Mar 9, 2011
    Messages:
    118
    Likes Received:
    0
    Gender:
    Male
    два css в одной папки И ещё в HTML прописано
    Код (CODE):
    1. <!--[if  IE]>
    2. <style>
    3. #sideLeft-inn,  div.slideBox, .myButton, #subscribeform2 .button , #subscribeform1 .button, #subscribeform1 .acymailing_module_form, input.inputbox ,div.pagination ul li a, div.pagination ul li span, ul.menu li a{behavior: url(<?php echo $tpl_url; ?>/PIE.htc);}
    4. </style>
    5. <![endif]-->
    6. <!--[if lte IE 7]>
    7. <link rel="stylesheet" href="<?php echo $tpl_url; ?>/css/template_ie.css"/>
    8. <![endif]-->


    а во втором css
    Код (CODE):
    1. #sideLeft{position:absolute;left:0;top:expression(eval(document.documentElement.scrollTop))}
    2. div.pagination{position:relative;}
    3. ul.menu ul{zoom:1;}
    4. ul.menu a {zoom:1;}
    5. ul.menu li{height:29px;zoom:1;}
    6. * html .clearfix{zoom:1;}
    7. *:first-child+html .clearfix {zoom:1;}
    8. .day, .month, div.slideBox {*display: inline;*zoom:1;}

    Если знаете подскажите что нужно поменять или добавить!?
     
  7. Offline

    Xantrax Недавно здесь

    Joined:
    Aug 22, 2012
    Messages:
    43
    Likes Received:
    1
    Gender:
    Male
    Код (html):
    1. <!--[if IE]> <style> #sideLeft-inn, div.slideBox, .myButton, #subscribeform2 .button , #subscribeform1 .button, #subscribeform1 .acymailing_module_form, input.inputbox ,div.pagination ul li a, div.pagination ul li span, ul.menu li a{behavior: url(<?php echo $tpl_url; ?>/PIE.htc);} </style> <![endif]--> <!--[if lte IE 7]> <link rel="stylesheet" href="<?php echo $tpl_url; ?>/css/template_ie.css"/> <![endif]-->

    Здесь Css применяемый к IE закомментирован, раскомментируйте его, т.е. уберите <!-- -->
     
  8. OlegK
    Offline

    OlegK Russian Joomla! Team Staff Member ⇒ Профи ⇐

    Joined:
    Jan 17, 2011
    Messages:
    7,812
    Likes Received:
    771
    Gender:
    Male
    А дальше про стили прочитай.
    попробуй размести ссылку на картинку прямо в блоке <div>
     
  9. woojin
    Offline

    woojin Местный Staff Member => Cпециалист <=

    Joined:
    May 31, 2009
    Messages:
    3,204
    Likes Received:
    334
    Gender:
    Male
    на мой пост пускай смотрит, там zthysv по картинке нарисовано, что CSS для ишака не имеет параметра background
    если его добавить то у него всё будет отлично))))
     
  10. OlegK
    Offline

    OlegK Russian Joomla! Team Staff Member ⇒ Профи ⇐

    Joined:
    Jan 17, 2011
    Messages:
    7,812
    Likes Received:
    771
    Gender:
    Male
    А так не проще ,без background ?
    Код (html):
    1. <header>
    2. <?php
    3. if(!JMenuSite::getInstance('site')->getActive()->home) { ?>
    4.     <a href="http://stok-info.ru/"><div id="logo"><img src="#" width="" height="" alt="logo" /></div></a>
    5. <?php }  else { ?>
    6.     <div id="logo"><img src="#" width="" height="" alt="logo" /></div>
    7. <?php }  ?>
    8. </header>
     
    Last edited: Aug 28, 2012
  11. woojin
    Offline

    woojin Местный Staff Member => Cпециалист <=

    Joined:
    May 31, 2009
    Messages:
    3,204
    Likes Received:
    334
    Gender:
    Male
    проще!!!
    но если к примеру человек хочет картинку выводить именyо через CSS bh я решение предложил, к тому же в твоём варианте, тогда и DIV будет не нужен, можно всё оформить
    примерно так:
    Код (CODE):
    1. #htader a{
    2.     width: (ширина)px;
    3.     height: (высота)px;
    4. }

    или так:
    Код (CODE):
    1. a img{
    2.     width: (ширина)px;
    3.     height: (высота)px;
    4. }

    вариантов куча))))
     
  12. Offline

    diki Недавно здесь

    Joined:
    Mar 9, 2011
    Messages:
    118
    Likes Received:
    0
    Gender:
    Male
    так совсем сайт не открывается
     
  13. woojin
    Offline

    woojin Местный Staff Member => Cпециалист <=

    Joined:
    May 31, 2009
    Messages:
    3,204
    Likes Received:
    334
    Gender:
    Male
    diki, может ты неверно код переписал?
    вариант DRAFF, абсолютно работоспособен
    сам так делаю, без применения CSS
     
  14. Offline

    diki Недавно здесь

    Joined:
    Mar 9, 2011
    Messages:
    118
    Likes Received:
    0
    Gender:
    Male
    Код (CODE):
    1. <?php
    2. if(!JMenuSite::getInstance('site')->getActive()->home) { ?>
    3.     <a href="http://stok-info.ru/"><div id="logo"><img src="#" width="" height="" alt="logo" /></div></a>
    4. <?php }; else { ?>
    5.     <div id="logo"><img src="#" width="" height="" alt="logo" /></div>
    6. <?php }; ?>

    вроде правильно скопировал дописал путь к картинке img src="..images/stok-info.png" Сайт не открывается
     
  15. woojin
    Offline

    woojin Местный Staff Member => Cпециалист <=

    Joined:
    May 31, 2009
    Messages:
    3,204
    Likes Received:
    334
    Gender:
    Male
    ты не его код сюда переписывай, а напиши что у тебя лично получилось, что ты и куда добавил
    в общем свой кусок кода в студию)))

    и ещё вот эти места "};" в них точка с запятой не нужны
    я конечно не проверял работает ли с ними код, но я лично ни когда их не пишу....
    возможно что из-за этого глючит))))
     
  16. OlegK
    Offline

    OlegK Russian Joomla! Team Staff Member ⇒ Профи ⇐

    Joined:
    Jan 17, 2011
    Messages:
    7,812
    Likes Received:
    771
    Gender:
    Male
    А,точно- я ошибся.Думал о другом. ((
    Сейчас подправлю в своём посте.
     
  17. Offline

    diki Недавно здесь

    Joined:
    Mar 9, 2011
    Messages:
    118
    Likes Received:
    0
    Gender:
    Male
    Код (CODE):
    1. <?php
    2. if(!JMenuSite::getInstance('site')->getActive()->home) { ?>
    3.     <a href="http://stok-info.ru/"><div id="logo"><img src="..images/stok-info.png" width="" height="" alt="logo" /></div></a>
    4. <?php }  else { ?>
    5.     <div id="logo"><img src="..images/stok-info.png" width="" height="" alt="logo" /></div>
    6. <?php }  ?>
    написал так. Сайт открывается но в IE всё равно не отображается
     
  18. OlegK
    Offline

    OlegK Russian Joomla! Team Staff Member ⇒ Профи ⇐

    Joined:
    Jan 17, 2011
    Messages:
    7,812
    Likes Received:
    771
    Gender:
    Male
    так укажи размер картинки
     
  19. Offline

    diki Недавно здесь

    Joined:
    Mar 9, 2011
    Messages:
    118
    Likes Received:
    0
    Gender:
    Male
    указал появилась рамочка вокруг картинки в ИЕ только рамочка
     
  20. OlegK
    Offline

    OlegK Russian Joomla! Team Staff Member ⇒ Профи ⇐

    Joined:
    Jan 17, 2011
    Messages:
    7,812
    Likes Received:
    771
    Gender:
    Male
    <header></header> удали на время проверки
    а для рамочки внутри <img border="0" />
    п.с.
    а что за путь к картинке?
    Код (html):
    1. ..images/stok-info.png
     
    Last edited: Aug 28, 2012

Share This Page

Loading...