логотип в шапке

Rambo2045 · July 11, 2011

Есть 3 картинки нужно чтобы они все были в шапке(резиновой) по центру.При наведении на каждую картинку должно появлятся слово и оставаться.К каждой картинке своё слово .Как это реализовать? http://itmages.ru/image/view/229056/d046e59a

psywalker · July 11, 2011

1) Пунктам display: inline-block;(для ИЕ6-7 кастыли), в них уже квадраты и под ними пустой див для текста. Родителю выравнивание по центру.

2) Для того, чтобы слово появлялось и оставалось, тут только JS

amelice · July 11, 2011

Есть 3 картинки нужно чтобы они все были в шапке(резиновой) по центру.При наведении на каждую картинку должно появлятся слово и оставаться.К каждой картинке своё слово .Как это реализовать? http://itmages.ru/image/view/229056/d046e59a

Вы создавали подобную тему.

Но там было без JS.

JS не знаю, поэтому попробую ответить на ваш первый топик, так как задаете те же вопросы(за исключением JS), значит еще не разобрались.

http://jsfiddle.net/QjQZJ/120/

Edited July 11, 2011 by cheburek

Rambo2045 · July 11, 2011

Огромное спаcибо.Только теперь логотип не отображается.А ещё не подскажите как слова которые появляются выровнять по центру квадратов(картинок).Ну или чтобы крайние слова были немного левее и правее(соответсвенно)крайних квадратов.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>сайт"</title>
 <style type="text/css">
 body {
 font: 14pt Arial, Helvetica, sans-serif; /* Рубленый шрифт текста */
 margin: 0; /* Отступы на странице */
 }

 #header {
 position: absolute;
 width: 100%;
 min-width: 1000px;
 height: 100px;
 background: url(black.jpg) repeat-x left top;
 }
 .logo{
 margin-left:55px;
  }
#nav{
    width:300px;
    margin:auto;
   }

#nav li{
    list-style:none;
    float:left;
    margin-left:20px;
    position:relative;
    }

#nav li a{
    display:block;
    text-decoration:none;
    }
#nav li a img{
    border:0px;
    display:block;
    margin:6px auto;
    width:55px;
    }
#nav li ul{
    display:none;
    position:absolute;
    top:60px;
    }
#nav li:hover ul{
    display:block;
    }
 </style>
 </head>
 <body>
 <div id="header">
    <ul id="nav">
        <li><a class="logo" href="#"><img src=r.png></a>
            <ul>
                <a style="color:#e83f3f">reliable</a>
            </ul>
        </li>
        <li><a href="#"><img src=b.png></a>
            <ul>
                <a style="color:#9a98f1">bright</a>
            </ul>
        </li>
        <li><a href="#"><img src=l.png></a>
            <ul>
                <a style="color:#e3d16d">light</a>
            </ul>
        </li>
    </ul>
</div>
<a class="logo" href = "index.html"><img src = "logotip1.png" width = "64" height="95" border="0" alt="logo"></a>
 </body>
 </html>

Edited July 15, 2011 by Rambo2045

buddah · July 12, 2011

Rambo2045, если берете за основу пример cheburek, то поиграйтесь с этим:

#nav li ul{
    display:none;
    position:absolute;
    top:60px;
    }

То есть с позициями top left right bottom

Чтоб выбрать первый и последний, обратитесь к селекторам :first-child и :last-child.

Еще почитайте эту статью для общего развития.

Rambo2045 · July 12, 2011

Подскажите пожалуйста почему логотип(logo) не отображается?

ctpz · July 12, 2011

Впиши в

<div id="logo"></div>

Это:

Edited July 12, 2011 by ctpz

Rambo2045 · July 12, 2011

Не знаю почему но всё равно логотипа не видно.

Edited July 12, 2011 by Rambo2045

Searcher · July 13, 2011

Зачем для #header сделали position: absolute; и width: 100%; ? Уберите эти свойства и увидите ваш логотип, если название файла рисунка, конечно, правильно написано.

Rambo2045 · July 14, 2011

Подскажите почему когда я ещё добавил 2 изображения(ee.png и ee1.png) между теми что были у меня всё поломало(стали видны первые 2 ,остальные сместились вниз,хотя в ie8 всё отлично)?

<ul id="nav">
        <li><a href="#"><img src=r.png></a>
            <ul>
                <a style="color:#e83f3f">reliable</a>
            </ul>
          </li>
        <li><a href="#"><img src=ee.png></a>
            <ul>
        </li>
        <li><a href="#"><img src=b.png></a>
            <ul>
                <a style="color:#9a98f1">bright</a>
            </ul>
         </li>
        <li><a href="#"><img src=ee1.png></a>
            <ul>
        </li>
        </li>
        <li><a href="#"><img src=l.png></a>
            <ul>
                <a style="color:#e3d16d">light</a>
            </ul>
        </li>
    </ul>

Edited July 14, 2011 by Rambo2045

amelice · July 15, 2011

Подскажите почему когда я ещё добавил 2 изображения(ee.png и ee1.png) между теми что были у меня всё поломало(стали видны первые 2 ,остальные сместились вниз,хотя в ie8 всё отлично)?

<ul id="nav">
        <li><a href="#"><img src=r.png></a>
            <ul>
                <a style="color:#e83f3f">reliable</a>
            </ul>
          </li>
        <li><a href="#"><img src=ee.png></a>
            <ul>
        </li>
        <li><a href="#"><img src=b.png></a>
            <ul>
                <a style="color:#9a98f1">bright</a>
            </ul>
         </li>
        <li><a href="#"><img src=ee1.png></a>
            <ul>
        </li>
        </li>
        <li><a href="#"><img src=l.png></a>
            <ul>
                <a style="color:#e3d16d">light</a>
            </ul>
        </li>
    </ul>

А вы внимательно посмотрите, не хватает пару закрывающих тегов.

Советую анализировать код.

Softlink · July 15, 2011

тут-то и открывающие не везде есть

amelice · July 15, 2011

тут-то и открывающие не везде есть

ага

Rambo2045 · July 15, 2011

Логотип(logo) всё вниз сместил,как вернуть другие элементы обратно в шапку?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>сайт"</title>
 <style type="text/css">
 body {
 font: 14pt Arial, Helvetica, sans-serif; /* Рубленый шрифт текста */
 margin: 0; /* Отступы на странице */
 }

 #header {
 min-width: 1000px;
 height: 100px;
 background: url(black.jpg) repeat-x left top;
 }
 #logo {
 margin:0 auto;
 width:64px;
 height:95px;
 }
#nav{
    width:380px;
    margin:auto;
   }

#nav li{
    list-style:none;
    float:left;
    margin-left:1px;
    position:relative;
    }

#nav li a{
    display:block;
    text-decoration:none;
    }
#nav li a img{
    border:0px;
    display:block;
    margin:6px auto;
    width:55px;
    }
#nav li ul{
    display:none;
    position:absolute;
margin-left:-20px;
    top:60px;
    }
#nav li:hover ul{
    display:block;
    }
 </style>
 </head>
 <body>
 <div id="header">
   <a href="index.html"><img src="logotip1.png"  border="0";></a>
    <ul id="nav">
        <li><a href="#"><img src=r.png></a>
            <ul>
                <a style="color:#e83f3f">reliable</a>
            </ul>
        </li>
       <li><a><img src=ee.png></a>
        </li>
        <li><a href="#"><img src=b.png></a>
            <ul>
                <a style="color:#9a98f1">bright</a>
            </ul>
        </li>
       <li><a><img src=ee1.png></a>
        </li>
        <li><a href="#"><img src=l.png></a>
            <ul>
                <a style="color:#e3d16d">light</a>
            </ul>
        </li>
    </ul>
</div>
 </body>
 </html>

Edited July 15, 2011 by Rambo2045

Softlink · July 16, 2011

Запустил ваш код у себя. Вообще не понял в чем проблема. Логотип отображается, слова появляются, квадратики в ряд стоят. Что у вас не так?

Rambo2045 · July 16, 2011

Квадратики ниже логотипа ,а нужно чтобы они были на одном уровне с логотипом.

Edited July 16, 2011 by Rambo2045

Softlink · July 16, 2011

Квадратики ниже логотипа ,а нужно чтобы они были на одном уровне с логотипом.

так вы спозиционируйте логотип как надо. Любым способом. Есть еще такие понятия, как margin и padding.

Rambo2045 · July 16, 2011

Только мне нужно чтобы логотип остался так как он сейчас есть.А всё остальное поднять на уровень логотипа.

Softlink · July 16, 2011

ну отрицательным маржином поднимите блок nav вверх и все дела. Это как вариант.

Rambo2045 · July 16, 2011

Как добавить з таких кнопки картинки? http://itmages.ru/image/view/231876/15dea710

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>сайт"</title>
 <style type="text/css">
 body {
 font: 14pt Arial, Helvetica, sans-serif; /* Рубленый шрифт текста */
 margin: 0; /* Отступы на странице */
 }

 #header {
 min-width: 1000px;
 height: 100px;
 background: url(black.jpg) repeat-x left top;
 }
 .logo{
 margin-left:55px;
  }
#nav{
    width:310px;
    margin:-95px auto;
   }

#nav li{
    list-style:none;
    float:left;

    position:relative;
    }

#nav li a{
    display:block;
    text-decoration:none;
    }
#nav li a img{
    border:0px;
    display:block;
    margin:6px auto;
    width:55px;
    }
#nav li ul{
    display:none;
    position:absolute;
margin-left:-35px;
    top:60px;
    }
#nav li:hover ul{
    display:block;
    }
 </style>
 </head>
 <body>
 <div id="header">
   <div class="logo" href = "index.html"><img src = "logotip1.png" width = "64" height="95" border="0" alt="logo"></div>
    <ul id="nav">
        <li><a href="#"><img src=r.png></a>
            <ul>
                <a style="color:#e83f3f">reliable</a>
            </ul>
        </li>
       <li><a><img src=ee.png></a>
        </li>
        <li><a href="#"><img src=b.png></a>
            <ul>
                <a style="color:#9a98f1">bright</a>
            </ul>
        </li>
       <li><a><img src=ee1.png></a>
        </li>
        <li><a href="#"><img src=l.png></a>
            <ul>
                <a style="color:#e3d16d">light</a>
            </ul>
        </li>
    </ul>
</div>
 </body>
 </html>

Rambo2045 · July 17, 2011

Подскажите как сделать так чтобы работал margin-right при таком коде?

Sign In

логотип в шапке

Question

Link to comment

Share on other sites

20 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

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