Jump to content

newtvis

Newbie
  • Posts

    3
  • Joined

  • Last visited

newtvis's Achievements

Explorer

Explorer (1/14)

0

Reputation

  1. Я нашел только один способ: HTML: <div class="wrap"> <div class="red"></div> <div class="green"></div> <div class="blue"></div> </div> CSS: * { margin:0; padding:0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html, body { height:100%; } .wrap { min-height: 100%; height: auto !important; height:100%; position: relative; } .red { background: red; width:100%; height:200px; position: absolute; top:0; left:0; z-index: 1; } .green { background: green; width: 35%; height:100%; position: absolute; top:0; left:0; padding-top: 200px; } .blue { background: blue; width:65%; height:100%; position: absolute; top:0; right:0; padding-top: 200px; } Может есть какой-то другой способ, я особо не думая прикинул макет. P.S. А вообще не рекомендую такую верстку =)
  2. Сейчас я продемонстрирую современное решение. Если не поймешь что к чему - Гугл в помощь. Гугл все таки лучше Попова в этом плане =) HTML: <nav> <ul class="nav"> <li><a href="#">Текст</a></li> <li><a href="#">Текст</a></li> <li><a href="#">Текст</a></li> <li><a href="#">Текст</a></li> <li><a href="#">Текст</a></li> </ul> </nav> CSS: .nav li{ display: inline-block; /* Для няшного IE */ *display: inline; *zoom: 1; } .nav li a { text-decoration: none; font-family: Arial, sans-serif; padding:4px 10px; color: #369; border: 1px solid transparent; } .nav li a:hover { color:#fff; background: #0080b4; background: -moz-linear-gradient(top, #0080b4 0%, #006f98 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0080b4), color-stop(100%,#006f98)); background: -webkit-linear-gradient(top, #0080b4 0%,#006f98 100%); background: -o-linear-gradient(top, #0080b4 0%,#006f98 100%); background: -ms-linear-gradient(top, #0080b4 0%,#006f98 100%); background: linear-gradient(to bottom, #0080b4 0%,#006f98 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0080b4', endColorstr='#006f98',GradientType=0 ); border: 1px solid #0080b4; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 1px 0 0 rgba(255,255,255,.5) inset; -moz-box-shadow: 1px 0 0 rgba(255,255,255,.5) inset; box-shadow: 1px 0 0 rgba(255,255,255,.5) inset; } И никаких картинок не нужно.
  3. От себя посоветую использовать метод от boilerplate, где text-indent задается только для IE ниже 9 версии. .ir { background-color: transparent; border: 0; overflow: hidden; /* Для старых версий IE */ *text-indent: -9999px; } .ir:before { content: ""; display: block; width: 0; height: 100%; }
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy