VPF::page control - Форум программистов

MrDmitry

Дата 31.7.2011, 19:53 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 556
Регистрация: 10.11.2006

Репутация: нет
Всего: нет

Помогите сверстать верхнюю часть pagecontrol (Сами табы)

На скриншоте пример как должно быть.

А вот так пытался я (

Код


.top_menu{height:27px;width:100%;background:#F5F5F7;}
.top_menu .tab{position:relative;height:90%; width:100px; border: 0px;background: #616679;display:block;text-align:  center;}
.top_menu .tab_off{position:relative;height:90%; width:600px; border: 0px;color:#3E3E40;display:block;text-align:  center;}

Код


<!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">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>pagecontrol</title>
    <meta http-equiv="X-UA-Compatible" content="IE=8"/>
    <meta name="Keywords" content=""/>
    <meta name="Description" content=""/>
    <link rel="stylesheet" href="style.css" type="text/css"/>
    <script language="JavaScript" src="js/js.js"></script>
<!--[if IE]><link rel="stylesheet" href="styles/ie.css" type="text/css"/><![endif]-->
</head>
<body>
 <div class="top_menu">
   <span><img src='img/1.png'></span>
   <center><span class="tab" id="tab1">Поле 1</span>
   <span class="tab_off" id="tab2">Поле 2</span>
   <span class="tab_off" id="tab3">Поле 3</span></center>  
 </div>
</body>
</html>

Это сообщение отредактировал(а) MrDmitry - 31.7.2011, 19:54

Присоединённый файл ( Кол-во скачиваний: 17 )

img.png 6,74 Kb

SelenIT

Дата 31.7.2011, 21:17 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401

<center> — блочный элемент, к тому же устаревший, он тут не нужен. Делайте табки инлайн-блоками, центрируйте с помощью text-align: center для дива-родителя, а иконку "окна" и кнопку закрытия раскидайте по соотв. углам через float (если иконка нужна только для красоты — ее вообще можно сделать фоном для родительского дива).

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

MrDmitry

Дата 31.7.2011, 21:22 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 556
Регистрация: 10.11.2006

Репутация: нет
Всего: нет

Код


.top_menu{height:28px;width:100%;background:#F5F5F7;border-bottom:1px solid #B4BCBF;text-align:  center;}

Так центрируется обсалютно все. При этом у класса tab

Код


.top_menu .tab{position:relative;height:90%; width:100px; border: 0px;background: #616679;display:block;text-align:  center

Не изменяются параметры height:90%; width:100px

MrDmitry

Дата 1.8.2011, 12:32 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 556
Регистрация: 10.11.2006

Репутация: нет
Всего: нет

Код


<!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">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>pagecontrol</title>
    <meta http-equiv="X-UA-Compatible" content="IE=8"/>
    <meta name="Keywords" content=""/>
    <meta name="Description" content=""/>
    <link rel="stylesheet" href="style.css" type="text/css"/>
    <script language="JavaScript" src="js/js.js"></script>
<!--[if IE]><link rel="stylesheet" href="styles/ie.css" type="text/css"/><![endif]-->
</head>
<body style="margin: 0">
 <center><div class="top_menu">
   <span class="ico"><img src='img/1.png'></span>
   <span class="tab" id="tab1"><ins>П</ins>родажи</span>
   <span class="tab_off" id="tab3"><ins>С</ins>писок карт&nbsp;&nbsp;&nbsp;<ins>Н</ins>овая карта</span>  
 </div></center>
  <div class='left_content'>
   <div class="info_on">
     <span class='text'>Поиск карты и действия с ним</span>
   </div>
  </div>
  <div class='right_content'>
    <div class="info_off">
     <span class='text'>Поиск карты и действия с ним</span>
   </div>
  </div>
</body>
</html>

Код


.top_menu{height:28px;width:100%;background:#F5F5F7;border-bottom:1px solid #B4BCBF;}
.top_menu .tab{color:#fff;position:relative;top:5px;height:85%; width:100px; border: 0px;background: #616679;display:inline-block;text-align:  center;-moz-border-radius: 3px;-webkit-border-radius: 0px;border-radius: 3px;font-family:'Calibri','Trebuchet MS',tahoma,arial,sans-serif;}
.top_menu .tab_off{right:5px;left:5px;position:relative;top:5px;height:90%; border: 0px;color:#3E3E40;display:inline-block;font-weight:bold}
.top_menu .ico{float:left}

Сделал так. Но получилось все не так как хотелось бы (

Это сообщение отредактировал(а) MrDmitry - 1.8.2011, 13:26

0Scrum

Дата 1.8.2011, 14:39 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 47
Регистрация: 24.1.2011

Репутация: 2
Всего: 3

Можно например так:

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
  <title></title>
  <style type="text/css">
  ul {
    list-style: none;
    margin:0;
    padding:5px 0 0 0;
    border-bottom: 1px solid #3399CC;
    height: 20px;
    overflow: hidden;
    background: #CCCCCC;
    text-align: center;
  }
  ul li {
    display: inline-block;
    margin: 0 10px;
    padding: 0 5px;
    position: relative;
    background: #39c;
    -moz-border-radius: 15px 15px 0 0;
    -webkit-border-radius: 15px 15px 0 0;
    border-radius: 15px 15px 0 0;
  }
  ul li a {
    color: #fff;
    text-decoration: none;
  }

  ul li::after,
  ul li::before {
    content: "";
    position: absolute;
    border: solid #39c;
    width: 10px;
    height: 10px;
  }
  ul li::after {
    left:-10px;
    bottom: -10px;
    border-width: 0 10px 10px 0;
    -moz-border-radius: 0 0 20px 0;
    -webkit-border-radius: 0 0 20px 0;
    border-radius: 0 0 20px 0;
    clip:rect(auto 10px 10px auto);
  }
  ul li::before {
    right:-10px;
    bottom: -10px;
    -moz-border-radius: 0 0 0 20px;
    -webkit-border-radius: 0 0 0 20px;
    border-radius: 0 0 0 20px;
    border-width: 0 0 10px 10px;
    clip:rect(auto auto 10px 10px);
  }
  </style>
</head>

<body>
    <div id="nav">
        <ul>
            <li><a href="#">Link1</a></li>
            <li><a href="#">Link1</a></li>
            <li><a href="#">Link1</a></li>
        </ul>
    </div>
</body>

</html>

Вам осталось лишь побороть IE - это можно сделать с помощью картинок и доп блоков ну и вашей фантазии.

Это сообщение отредактировал(а) 0Scrum - 1.8.2011, 23:15

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »