Как я могу улучшить этот код для сетки с изображениями / границы? - PullRequest
Новая
       4

Как я могу улучшить этот код для сетки с изображениями / границы?

0 голосов
/ 14 мая 2011

На первый взгляд, пожалуйста, не отвечайте "используйте border-radius + css3pie или jquery плагины": я знаю, что есть другой способ сделать это с css3, но я не против.Это весь мой код: 

.menu_books_top-bottom { width:171px; height:7px; background-color:#76614C; float:left;}
.menu_books_center { width:155px; background-color:#76614C; padding:10px 15px 10px 15px; float:left;}
.menu_books_top-left {width:7px; height:7px; background-image:url(../images/borders/menu_books_top-left.png); float:left;}
.menu_books_top-right {width:7px; height:7px; background-image:url(../images/borders/menu_books_top-right.png); float:left;}
.menu_books_bottom-right {width:7px; height:7px; background-image:url(../images/borders/menu_books_bottom-right.png); float:left;}
.menu_books_bottom-left {width:7px; height:7px; background-image:url(../images/borders/menu_books_bottom-left.png); float:left;}

<div class="menu_books_top-left">&nbsp;</div>
<div class="menu_books_top-bottom">&nbsp;</div>
<div class="menu_books_top-right">&nbsp;</div>                  
<div class="menu_books_center">
    Content
</div>
<div class="menu_books_bottom-left">&nbsp;</div>
<div class="menu_books_top-bottom">&nbsp;</div>
<div class="menu_books_bottom-right">&nbsp;</div>

Но, как вы можете видеть, это не выглядит так хорошо!Есть другой способ сделать то же самое?Или я могу улучшить этот код (например, классический метод)?

Здесь вы можете найти пример.(Красный = изображение с рамкой)

Ответы [ 3 ]

2 голосов
/ 14 мая 2011

Вы можете написать это так, как я написал ниже. Что позволит избежать дивитуса. 

<div class="content">
    <span class="menu_books_top-left">&nbsp;</span>
    <span class="menu_books_top-bottom">&nbsp;</span>
    <span class="menu_books_top-right">&nbsp;</span>                    
    <span class="menu_books_center">
        Main
    </span><!-- content here -->        
    <span class="menu_books_bottom-left">&nbsp;</span>
    <span class="menu_books_top-bottom">&nbsp;</span>
    <span class="menu_books_bottom-right">&nbsp;</span>
</div><!-- end of .content -->
2 голосов
/ 14 мая 2011

Учитывая, что Я знаю, что вам нужна поддержка IE6, то, что у вас есть, кажется разумным.

Я реорганизовал его и несколько очистил.

См .: http://jsfiddle.net/5wzC2/

Я также убедился, что он выглядит одинаково в современных браузерах и IE6.

  • Я изменил div с на span с (как в ответе @ SirB).
  • Я удалил &nbsp; s и добавил line-height:0; font-size:0, чтобы исправить IE6.
  • Я добавил класс corner, чтобы удалить все дубликаты width:10px; height:10px; float:left.
  • Я удалил некоторые фрагменты фразы menu_books из HTML.
  • Я изменил background-image на background, который работает здесь и немного короче.

Так что да, просто кучка педантичных изменений.

1 голос
/ 14 мая 2011

вам не нужно погружение сверху вниз. Вы можете создать 4 изображения с четырьмя закругленными углами. Сделайте их больше, чем вам нужно, и выровняйте их по углам. Это не сильно увеличивает вес страницы (если есть), потому что обычно они двух цветов, и вы можете использовать GIF. 


<div class="menu_books_top-left"> </div>
<div class="menu_books_top-right"> </div>                  
<div class="menu_books_center">
    Content
</div>
<div class="menu_books_bottom-left"> </div>
<div class="menu_books_bottom-right"> </div>
...