Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Текст выводится на верху

Автор: Папараццы 6.2.2007, 14:26

Вот такой код css

Код


#leftmenu{
    float: left;
    width: 190px;
    margin: 0px;
    padding: 0px;
    background-color: #DCDBD;
    border-right: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
}
#menu a {
    display: block; 
    border-top: 1px solid #cccccc;
    padding: 2px 0px 2px 20px; /* 10px */
    background-image:url(unpressedleftbutton.png);
    height:24px;
    table-layout:auto;
    }

#menu a:hover{
    background-image:url(pressedleftbutton.png);
    background-color: #dddddd;
}

В НТМL

Код


<div id="leftmenu"> 
<div id="menu">
<a href=index.php>Privet</a>
<a href=index2.php>Privet2</a>
</div>
</div>

Текст у меня выводится коряво чуть выше середины картинки..Смотрится несуразно...Как мне контралировать размещение текста ?????
Да и есчё что надо зделать чтобы неподчёркивалось ссылка??
Зарание благодарен.

Автор: dimonn 6.2.2007, 14:45

Смотри, чтобы опустить немного текст увелич padding сверху #menu a и соответственно на столько же уменьши height. А чтобы подчеркивание не было установи text-decoration:none для #menu a:hover. Например

Код


#menu a {
    display: block; 
    border-top: 1px solid #cccccc;
    padding: 5px 0px 2px 20px; /* 10px */
    background-image:url(unpressedleftbutton.png);
    height:21px;
    table-layout:auto;
    }

#menu a:hover{
    background-image:url(pressedleftbutton.png);
    background-color: #dddddd;
    text-decoration:none;
}

Автор: Папараццы 6.2.2007, 14:49

Спасибо за помошь..

Автор: Папараццы 6.2.2007, 16:11

Вот есчё проблемки у меня

Код


#navBar2{
    float: right;
    width: 190px; 
    margin: 0px;
    padding: 0px;
    background-color: #DCDBD;
    border-right: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
}
#menuright a {
    display: block;
    border-top: 1px solid #cccccc;
    padding: 4 px 0px  2px 20px; 
    background-image:url(unpresedright.png);
    height:24px;
} 
#menuright a:hover {
     background-image:url(pressed rightbutton.png);
     background-color: #dddddd;
     text-decoration:none;
     }

Эт вставка

Код



<div id="navBar2"> 
  <div id="menuright">
   <a> MENU RIGHT </a>
   <a> MENU RIGHT2</a>
  </div>
  </div>

ТЕКС Отоброжается в верхнем левом углу ...Почему так ????

Автор: dimonn 6.2.2007, 16:21

Посмотри внимательно, не кажется странным что padding: 4 px 0px 2px 20px; px другим цветом выдало? Убери пробел после 4, чтобы стало padding: 4px 0px 2px 20px;

Автор: Папараццы 6.2.2007, 16:30

C этим сам разобрался.....Вопросик такой как через ЦСС заменить кнопку button на изоброжение...Чтобы при нажатие форма передавала данные???
Если даже без css....Как?

Автор: dimonn 6.2.2007, 16:39

Смотри, просто задаеш стиль кнопке, например
html

Код


 <form action="#">                        
   <input type="submit" class="submit" value="LOGIN" />
</form>

CSS

Код


.submit { width:49px; height:20px; border:none; background:url(../images/login.gif); color:#ffffff; font-size:10px; font-weight:600;}

Автор: Папараццы 6.2.2007, 18:44

Выручил

Спасибо тебе...