Javascript-форум (https://javascript.ru/forum/)
-   Оффтопик (https://javascript.ru/forum/offtopic/)
-   -   Пасоны, помогите с версткой( (https://javascript.ru/forum/offtopic/37915-pasony-pomogite-s-verstkojj.html)

megaupload 13.05.2013 22:07
Пасоны, помогите с версткой(
 
Существует ли нативный способ завекрстать вот такое?

Aetae 13.05.2013 22:40
Кнопка "подробенее" не нужна, верь Татьянычу.

monolithed 13.05.2013 22:44
http://jsbin.com/udikor/1/edit

megaupload 13.05.2013 22:51
monolithed, хм, думаю запихать это в hr... Спасибо, но все же, неужели нет нативного способа с сохранением семантики?

у таблиц вон "титл" есть

Aetae 13.05.2013 22:54
Это же ссылка, нэ?)
<style>
.spacer{
	height: 10px;
	line-height: 20px;
	border-bottom: 2px dotted #9f3;
	display: block;
	margin-right: 150px;
	text-decoration: none;
}
.spacer:after{
	content: "детально >>";
	background:#ddd;
	color:#fff;
	border-radius:10px;
	display: block;
	float: right;
	text-align:center;
	width: 130px;
	margin-right: -150px;
}
.spacer:hover:after{
	background:#9f3;   
}
</style>
<a class="spacer" href="#"></a>

megaupload 13.05.2013 23:27
Цитата:
Сообщение от Aetae
Это же ссылка, нэ?)
Такой вариант тоже рассматривал) убого же ну. Или эт наоборот фитча?
а еще мне нужна поддержка ШУ8

короче сделаю по старинке)

danik.js 14.05.2013 06:47 
<style>
hr{
    border: none;
    background: none;
    height: 0;
    border-bottom: 2px dotted #9f3;
    display: block;
    text-decoration: none;
}
.readmore{
    content: "детально >>";
    background:#ddd;
    color:#fff;
    border-radius:10px;
    display: block;
    float: right;
    text-align:center;
    width: 130px;
    float: right;
    margin-left: 20px;
    margin-top: -10px;
}
.readmore:hover{
    background:#9f3;  
}
</style>
<p>abc</p>
<a class="readmore" href="#">детально »</a>
<hr />

megaupload 14.05.2013 12:02
Теперь она при любом фонтсайзе будет по центру) ня ня

<style>
hr{
    margin:0;
    border: none;
    border-bottom: 2px dotted #9f3;
}
.readmore{
      float            : right;
      margin-top       : -0.7em;
      margin-left      : 0.5em;
      padding          : 0.1em 0.5em;
      background-color : #ddd;
      color            : #fff;
      border-radius    : 1em;
      text-decoration  : none;
}
.readmore:hover{
    background:#9f3;  
}

.big{
    font-size        : 50px;
}
</style>
<p>ololo</p>
<a class="readmore" href="#">детально »</a>
<a class="readmore big" href="#">детально »</a>
<hr />

Vantedur 14.05.2013 14:49 
-webkit-margin-before: 0px;
-webkit-margin-after: 0px;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;

megaupload 14.05.2013 17:28
Vantedur, можно пример?

Vantedur 14.05.2013 22:55
ещё 
-webkit-padding-before: 0px;
-webkit-padding-start: 0px;
-webkit-padding-end: 0px;
-webkit-padding-after: 0px;

юзай ну та естесно мозы и тд и тп

megaupload 15.05.2013 01:03
круто, а пример можно

Vantedur 15.05.2013 11:46
открой сафари и посмотри сам

megaupload 15.05.2013 12:05
верно ли я тебя понимаю что НЕЛЬЗЯ пример?
я тебя прошу показать пример, ты знаешь что такое пример?

Vantedur 15.05.2013 14:43
http://dsns.ru/up/css_primer.png

Vantedur 15.05.2013 15:00
=)

megaupload 15.05.2013 17:03
вот, теперь пришли его)


Часовой пояс GMT +3, время: 17:07.