World1000 - Скругленные углы таблицы при помощи CSS
Баннерная сеть

Личный кабинет

Имя

Пароль

Запомнить меня


Забыли пароль?
Зарегистрироваться

  2008-11-03 21:14
Одна из самых распространённых проблем при вёрстке макетов является создание закруглённых углов у таблиц и блоков на страницах и приходиться их рисовать, а затем, совершая «танцы с бубном» прикреплять их на страницу, да ещё и следить за кроссбраузерностью вёрстки. Попытаемся решить эту проблему только с помощью CSS.

Конечно самый простой способ - это нарисовать эти самые углы и вставить их в таблицу. либо в отдельные блоки. Но в любом случае их нужно рисовать, и в добавление ко всем файлам на вашем сайте, будут лежать ещё и графические файлы ваших элементов оформления.

Для примера воспользуемся табличной вёрсткой, но тут главное понять сам процесс, тогда и в случае вёрски с помощью слоёв не будет проблем. И так, как уже было сказано, можно делать так:
< table>
< tr>
< td background="corner_left_top.gif">< /td>
< td>< /td>
< td background="corner_right_top.gif">< /td>
< /tr>
< tr>
< td>< /td>
< td>Ваш контент< /td>
< td>< /td>
< /tr>
< tr>
< td background="corner_left_bottom.gif">< /td>
< td>< /td>
< /tr>
< td background="corner_right_bottom.gif">< /td>
< /table>
или
< table>
< tr>
< td>< img src="corner_left_top.gif">< /td>
< td>< /td>
< td>< img src="corner_right_top.gif">< /td>
< /tr>
< tr>
< td>< /td>
< td>Ваш контент< /td>
< td>< /td>
< /tr>
< tr>
< td>< img src="corner_left_bottom.gif">< /td>
< td>< /td>
< td>< img src="corner_right_bottom.gif">< /td>
< /tr>
< /table>

Возьмём div объект и попытаемся создать округлую форму, используя только правила CSS.

По умолчанию, каждый элемент имеет определённую высоту, в зависимости от типа вашего браузера. По этому, очень важное для нас свойство приобретает правило overflow, и для запрета отображения размерности контейнера, ему следует придать значение hidden.

Но можно сделать это всё более продвинуто, избегая использования лишних рисунков, например с помощью JavaScript или CSS. При этом, использование JavaScript, влечёт за собой применение довольно больших и тяжёлых скриптов, так, что уж лучше даже использовать изображения скруглённых углов. А вот вслучае использования CSS представляется достаточно возможностей небольшими затратами построить нужную форму объекта.

Для того, чтобы создать закруглённый угол с помощью CSS, необходимо использовать ряд независимых в плане разметки веб-страниц объектов. Ими могут выступать div, span, b, i и многие другие объекты, которые не имея внутри себя никакого контента, не подчиняются никакому правилу "по умолчанию" и не отображаются на странице.
< style type="text/css">
#block{width:200px}
#1{margin:0}
#2, #3, #4, #5, #6, #7, #8, #9{height:1px;overflow:hidden;background:#0099cc}
#2, #9{margin:0 5 0 5px}
#3, #8{margin:0 3 0 3px}
#4 ,#7{margin:0 2 0 2px}
#5, #6{margin:0 1 0 1px}
#content{padding:5px;background:#0099cc;font:11px Verdana;color:#000}
< /style>
< div id="block">
< div id="1">
< div id="2">< /div>
< div id="3">< /div>
< div id="4">< /div>
< div id="5">< /div>
< div id="5">< /div>
< /div>
< div id="content">
Ваш контент
< /div>
< div id="1">
< div id="6">< /div>
< div id="6">< /div>
< div id="7">< /div>
< div id="8">< /div>
< div id="9">< /div>
< /div>
< /div>
Как видите, всё проще некуда, единственным недостатком данного способа закругления углов в css является не поддерживание данной технологии некоторыми уставшими версиями браузеров. Но как и технологии, так и сами Интернет-навигаторы совершенствуются и будем надеяться в дальнейшем проблем с этим не будет…

Пользуйтесь на здоровье.
Быстрый переход
  • Company
  • Overview
  • Facts and Figures
  • Why Us
  • Testimonials
  • Careers
  • Capabilities
  • Technology Centers
  • Microsoft .NET
  • Java EE
  • PHP
  • AJAX
  • Skill Set
  • Domain Expertise
  • Web 2.0
  • Rich Internet Applications
  • Business Continuity
  • Quality Management
  • Methodology
  • Services
  • Advanced Web Development
  • Web Application Development
  • Web and Enterprise Portal Development
  • Website Design and Development
  • Web-based Database Programming
  • Web-enabling Legacy Applications
  • Opensource Software Customization
  • Business Application Development
  • Content and Document Management
  • Secure Intranets / Extranets
  • Customer Relationship Management
  • Workflow Management
  • Supply Chain Management
  • Interactive Learning
  • Independent QA and Testing
  • Application Security Consulting
  • Graphic Design / Multimedia
  • Maintenance and Support
  • Outsourcing
  • Outsourcing Overview
  • Dedicated Teams
  • Security and IP Protection
  • Engagement Models
  • Portfolio
  • By Business Domain
  • Corporate / Info Websites
  • Communities and Networks
  • B2B / B2C Internet Portals
  • Retail / Ecommerce
  • Media Distribution
  • Workflow Management
  • Customer Management
  • Enterprise Collaboration
  • Supply Chain Management
  • eLearning / Online Training
  • By Technology Focus
  • Microsoft .NET
  • Java EE
  • PHP
  • By Solution Type
  • Websites
  • Web Applications
  • Enterprise Solutions
  • Contact
  • Contact Form
  • Get Free Evaluation
  • Call Me Back
  • Contact Info
  • Map