X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость ( Вход | Регистрация )

Открыть тему
Тема закрыта
> Легкий вопрос по HTML
LebedevStr
LebedevStr
Topic Starter сообщение 2.6.2012, 19:38; Ответить: LebedevStr
Сообщение #1


Аналитика наше все
*****


Группа: Active User
Сообщений: 680
Регистрация: 24.10.2010
Из: Warszawa
Поблагодарили: 96 раз
Репутация:   25  


Коллеги, далек от HTML. Возник такой незатейливый вопрос.

Есть динамическая строка, текстовая, на 10-15 символов. Нужно этот текст поместить в блок, края которого закругленны.
Как я понял для этого нужно две картинки, закругленные, одна для левой стороны, другая для правой. И фон под текстом сделать соответствующим.

Вот код моих сторон

.left_colcat {
background:url(/name/left.png) no-repeat;
width: 7px;
height: 17px;
}
.right_colcat {
background:url(/name/right.png) no-repeat;
width: 7px;
height: 17px;
}


Вот код HTML

<span class="temTitle"><div class="left_colcat"></div><a href="http://site.ru/page">Динамический текст</a><div class="right_colcat"></div></span>


Но, к сожалению, каждый блок, <div> начинается с новой строки.
Как сделать слитно как на скрине (закрепил).
Прикрепленные изображения
Прикрепленное изображение Прикрепленное изображение
 
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
santis
santis
сообщение 2.6.2012, 19:52; Ответить: santis
Сообщение #2


Топовый постер
*******


Группа: Active User
Сообщений: 3487
Регистрация: 29.11.2010
Из: Краснодар
Поблагодарили: 1510 раз
Репутация:   164  


Поместить все в один див как вариантsmile.gif


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
danilchuk88
danilchuk88
сообщение 2.6.2012, 19:52; Ответить: danilchuk88
Сообщение #3


Участник
***

Группа: User
Сообщений: 172
Регистрация: 16.2.2011
Из: Украина, Крым
Поблагодарили: 76 раз
Репутация:   30  


Попробуйте для обоих div прописать <div style="display:inline-block;">
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
lejos
lejos
сообщение 2.6.2012, 21:13; Ответить: lejos
Сообщение #4


Новичок
*

Группа: User
Сообщений: 21
Регистрация: 29.5.2012
Из: Новосибирск
Поблагодарили: 13 раз
Репутация:   1  


Зачем картинки? Можно с помощью CSS3 свойства border-radius сделать. Посмотрите вот тут.

Извините, не знаю, как редактировать пост, после того, как вышел со страницы. Поэтому пишу следующий пост.

CSS3 решает эту проблему будь здоров. Все браузеры поддерживают данное свойство, все, кроме ie. Там будет просто прямоугольный блок. Что особо не омрачает картину. Зато оптимизируете код, делаете его более легким и прогрессивным. В духе новаторства) Я давно именно через border-radius делаю. Единственное, обратите внимание на префиксы -moz-, -o-, -webkit-.


Если вы хотите все же создать блок без использования CSS3, то можно так (протестированно везде, кроме IE - нет возможности сейчас установить иешечку):

HTML разметка:

<div class="box">
    <a href="#">Ссылка</a>
</div>
<div class="box-inner"> </div>    


CSS

.box {
    background:  url(../img/left.png) no-repeat;
    height: 45px;
    float: left;      /* делаем обтекание блока слева, чтобы блоки могли расположиться на одной "линии" */
}

.box-inner {
    background:  url(../img/right.png) no-repeat;
    height: 45px;
    margin: 0 0 0 45px; /* делаем отступ слева - на ширину картинки первого блока, чтобы не было заступа */
}

.box a:link, .box a:visited {
    display: block;    /* Делаем из строкового элемента a (ссылки) блочный, дабы можно было кликать по всей области блока, а не только по ссылке-строке */
    padding: 10px 0 0 15px; /* выравниваем */
    width: 100%;
    height: 35px;
}


Такой вариант конечно хорош, но лучше использовать 4 уголка - тогда мы сможем создавать блоки с закругленными границами переменной ширины, а не фиксированной, как в данном случае.

Если необходима помощь, могу помочь и с 4 уголками smile.gif

Если же, вы надумали присоединиться к пользователям прогрессивных стилей, то вот код для создания блока с закругленными уголками с помощью CSS3 свойства border-radius:

<div class="box"><a href="#" class="aa">Ссылка</a></div>

.box {
    width: 300px;
    height: 50px;
    background: #c5c5c5;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

.box a:link, .box a:visited {
    font-size: 90%;
    display: block;
    text-decoration: none;
    text-align: center;
    padding: 15px 0;
    color: #fff;
    height: 50px;
}


Целый трактат)

Сообщение отредактировал lejos - 2.6.2012, 21:07


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


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
LebedevStr
LebedevStr
Topic Starter сообщение 2.6.2012, 22:01; Ответить: LebedevStr
Сообщение #5


Аналитика наше все
*****


Группа: Active User
Сообщений: 680
Регистрация: 24.10.2010
Из: Warszawa
Поблагодарили: 96 раз
Репутация:   25  


lejos, нереально благодарен smile.gif Спасибо.

Сообщение отредактировал LebedevStr - 2.6.2012, 22:02
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Chris
Chris
сообщение 2.6.2012, 22:15; Ответить: Chris
Сообщение #6


Новичок
*

Группа: User
Сообщений: 35
Регистрация: 7.5.2012
Поблагодарили: 7 раз
Репутация:   0  


Пропиши float:left каждом потом 2 дай клас клиар и в CSS напиши .clear { clear:both }
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
lejos
lejos
сообщение 2.6.2012, 22:30; Ответить: lejos
Сообщение #7


Новичок
*

Группа: User
Сообщений: 21
Регистрация: 29.5.2012
Из: Новосибирск
Поблагодарили: 13 раз
Репутация:   1  


LebedevStr, ради интереса, скажите пожалуйста, какой способ взяли?


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


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
LebedevStr
LebedevStr
Topic Starter сообщение 3.6.2012, 1:02; Ответить: LebedevStr
Сообщение #8


Аналитика наше все
*****


Группа: Active User
Сообщений: 680
Регистрация: 24.10.2010
Из: Warszawa
Поблагодарили: 96 раз
Репутация:   25  


(lejos @ 2.6.2012, 21:30) *
LebedevStr, ради интереса, скажите пожалуйста, какой способ взяли?


<div class="box"><a href="#" class="aa">Ссылка</a></div>

.box {
    width: 300px;
    height: 50px;
    background: #c5c5c5;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

.box a:link, .box a:visited {
    font-size: 90%;
    display: block;
    text-decoration: none;
    text-align: center;
    padding: 15px 0;
    color: #fff;
    height: 50px;
}


Показался более правильней smile.gif
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Вопрос по seo для интернет магазина
куда девать продвинутые товары, которые уже не выпускают
18 viktormerke 2815 15.12.2017, 15:18
автор: Smspva
Открытая тема (нет новых ответов) Вёрстка. Per aspera ad html.
С радостью принимаю заказы по вёрстке.
3 ValeryRar 461 1.12.2017, 11:02
автор: ValeryRar
Открытая тема (нет новых ответов) Исправлю HTML ошибки на страницах Вашего сайта
10 guruapps 1213 30.11.2017, 22:59
автор: maxim1249
Открытая тема (нет новых ответов) Вопрос к знатокам Instagram
20 SEOMR 4193 30.11.2017, 14:25
автор: DiscordPro
Открытая тема (нет новых ответов) Вопрос про Телеграмм
18 syd2010 1173 28.11.2017, 14:25
автор: PostBrigada


 



RSS Текстовая версия Сейчас: 18.12.2017, 9:16
Дизайн