Скругленые углы

lamaka · October 10, 2010

Привет! Выходной, а я вот сижу и думаю, в макете я нарисовал, что сверху будет блок с круглеными углами и рамкой, а в нем будут два блока с авторизацией и поиском. Блок с круглеными углами надо сделать с изображениями, при этом блок должен хорошо тянуться по высоте. Не подскажите, как мне это реализовать? Есть у кого нить ссылки или мысли по этому поводу?

sigma77 · October 10, 2010

Поищи тут подходящий тебе вариант http://habrahabr.ru/blogs/webdev/30019/

psywalker · October 10, 2010

Поищи тут подходящий тебе вариант http://habrahabr.ru/blogs/webdev/30019/

Да, и на форуме полазий в поиске, тоже много чё нароешь.

lamaka · October 10, 2010

Я смотрел, но все не то( Или может я не туда глядел. Там у многих углы, и рамка прописываются в классы вложеных в див элементов, мне того не нужно, мне нужна рамка с рамкой и скруглеными углами, а в нее хочу поместить уже другие блоки, с другим оформлением. Пойду поиск поюзаю...

lamaka · October 10, 2010

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

psywalker · October 10, 2010

Задай всем классы, и каждому свой фон поставь.

lamaka · October 10, 2010

Присвоив пустым дивам классы, вообще перестает отображаться рамка (((

psywalker · October 10, 2010

Присвоив пустым дивам классы, вообще перестает отображаться рамка (((

Покажи код и страницу, с отдельным примером и рисунками.

lamaka · October 10, 2010

И так.

Вот, что должно получиться в итоге (_http://s001.radikal.ru/i193/1010/14/3ae8ed3d8f8c.jpg)

Вот код


<!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>Пример</title>
<style type="text/css">
#body{
    background-color:#529ef1;
}
.panel{
    background-color:white;
    width:500px;
    margin:0 auto;
    background: #FFFFFF url(t.gif) top repeat-x;
    height:10px;

}
.panel div {
      background: url(r.gif) right repeat-y;
}
.panel div div {
      background: url(b.gif) bottom repeat-x;
}
.panel div div div {
     background: url(l.gif) left repeat-y;
}
.panel div div div div {
      background: url(t-l.gif) top left no-repeat;
}
.panel div div div div div {
      background: url(t-r.gif) top right no-repeat;
}
.panel div div div div div div {
      background: url(b-r.gif) bottom right no-repeat;
}
.panel div div div div div div div {
      background: url(b-l.gif) bottom left no-repeat;
}
.auth{
width:120px;
float:left;
    }
.search{
    width:200px;
    float:right;
}
</style>
</head>

<body id="body">

<div class="panel">
  <div>
    <div>
      <div>
        <div>
          <div>
             <div>
                <div>
                   <div class="auth">
                   </div>
                   <div class="search">
                   </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

Вот тут код с изображениями (_http://ifolder.ru/19695294)

Теперь, о главном....

Как я и писал, блоки auth и search почуму то наследуют рисунок из последнеего пустого дива, если прописать к дивам класы, вообще не отображаються беграунды.

У меня предвидиться еще один такой блок, только с текстом внутри, постоянно писать текст под определенную высоту не хочется, хочется, чтоб блок растягивался по тексту, но блок будет совершенно такойже, пока ничего не тянеться ((( Или тянеться неправильно. Ставил высоту к блоку с рамкой, тянеться только в ie в фаерфоксе не хочет.

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

psywalker · October 10, 2010

Лови http://psywalker.ru/Forum/box2/block/main.html

lamaka · October 10, 2010

Спасибо psywalker за линк, пошел разбираться с твоим примером. Думаю подойдет для мня.

PS Начни наконец то писать в свой блог

psywalker · October 10, 2010

PS Начни наконец то писать в свой блог

Времени совсем нет

lamaka · October 10, 2010

Все таки какая гадасть эти закругленые углы....У тебя сделаны со спрайтами, а есть где нить мануал по созданию спрайтов, я в них не силен.... Не сталкивался не разу с версткой с использованием спрайтов, интересно...

Edited October 10, 2010 by lamaka

psywalker · October 10, 2010

Да нее, сам слепи несколько картинок в одну. Сделай несколько блоков и у каждого сделай фон с этим спрайтом, меняй позицию, потренируйся.

Sign In

Скругленые углы

Question

Link to comment

Share on other sites

13 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information