Форум

cha0s · #1 (**permalink**) 21.07.2014, 14:20

лучше и легче конечно живой пример

http://jsfiddle.net/aqDFw/

надо чтоб
правая граница у li была border-right:2px solid transparent !important; но она почему-то не прозрачная не видно серого бэкграунда... объясните почему так?

hfts_rider · #2 (**permalink**) 22.07.2014, 10:41

Насчет transtarent у меня тоже куча вопросов)

Сам не понимаю почему так, бордер же вокруг блока должен быть, но мне кажется что бордер просто не может быть прозрачным потому что в данном примере выходит так как будто вместо бордера ты ставишь padding...

MallSerg · #3 (**permalink**) 22.07.2014, 10:54

Сообщение от cha0s

border-right:2px solid transparent !important;

А с какого она должна быть прозрачной?
Бордер рисуется на элементе а не вокруг него
к сожалению телепатические модули в браузеры пока не встраиваются ((

cha0s · #4 (**permalink**) 22.07.2014, 11:22

Сообщение от MallSerg

А с какого она должна быть прозрачной?
Бордер рисуется на элементе а не вокруг него
к сожалению телепатические модули в браузеры пока не встраиваются ((

я как понимаю что в данном примере border нельзя сделать прозрачным? не хочется колдовать с margin отступами снова верстка начнет не разных браузерах в расход идти =(

тут как-бы видны эти 2px

Aetae · #5 (**permalink**) 22.07.2014, 11:25

Потому что(внимание на "прозрачные" дырки меж чёрточками):

<div style="border:10px dashed #00f;background:#0f0;height:20px"></div>

В современных браузерах есть специальное свойство background-clip:

<div style="border:10px dashed #00f;background:#0f0;height:20px; background-clip:padding-box;"></div>

рони · #6 (**permalink**) 22.07.2014, 11:25

cha0s,

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>
  <style type='text/css'>
    body {background:silver;}

.mydiv {
  background:  transparent;
  display:table !important;
  width:100% !important;
  height:42px !important;
  margin:0px !important;
  padding:0px !important;
}

#mytestul{
  display:table-row !important;

  font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif
}

#mytestul li {
  display:   table-cell;
  width:10% !important;
  list-style:none !important;
  text-align:center !important;
  line-height:42px !important;

}



#mytestul li a:hover{ cursor:pointer;
  background:red !important;
}

#mytestul li a{
  margin-left: 2px;
  display: block;
  text-decoration:none;
  background:white;
  font-size:10px;
  color:black;
}

  </style>
</head>
<body>

<div class="mydiv">
				<ul id="mytestul">
					<li> <a href="#port1">Portfolio</a> </li>
					<li> <a href="#port2">Portfolio 1</a> </li>
					<li> <a href="#port3">Portfolio 2</a> </li>
					<li> <a href="#port4">Portfolio 3</a> </li>
					<li> <a href="#port5">Portfolio 4</a> </li>
					<li> <a href="#port6">Portfolio 5</a> </li>
					<li> <a href="#port7">Portfolio 6</a> </li>
					<li> <a href="#port8">Portfolio 7</a> </li>
					<li> <a href="#port9">Portfolio 8</a> </li>
					<li> <a href="#port9">Portfolio 9</a> </li>
				</ul>
			</div>


</body>


</html>

cha0s · #7 (**permalink**) 22.07.2014, 23:36

рони, спасибо ты как обычно=) вне конкуренции.

Форум

Справочник

Discord чат

Курсы javascript