html - Converting to tableless table -
tableless not understand , wondering how code below in table, turn tableless
http://adresende.com.br/help/layout.html
who can me, i'll grateful
the key here use correct markup job. site have looks it's displaying list of things on top, navigation, we'll using lists here:
<div id="topbar"> <ul id="leftnav"> <li>início</li> <li>estabelecimentos</li> <li>consumidores</li> <li>blogs</li> <li>o que é</li> <li>contato</li> <li>sugire</li> </ul> <ul id="rightnav"> <li>olá, sejam bem vindo!</li> <li>crie seu perfil</li> <li>entrar</li> <li><img alt="brazil!" src="http://adresende.com.br/help/br.png" /></li> </ul> </div>
we first create layout, floating 2 ul
s each of sides, float li
inside ul
create inline list:
#leftnav { float: left; } #rightnav { float: right; } #topbar ul li { float: left; }
to create two-color background, can apply background
both body
, #topbar
.
body { background: url('shadow_2.png') repeat-x; } #topbar { background: url('shadow.png') repeat-x; }
where both shadow.png files 1px 45px slice of background have. position #topbar
in middle, give width , use margin: 0 auto
. padding applied position contents correct position, , clearfix applied prevent collapsing:
#topbar { padding: 8px 10px 20px; width: 956px; margin: 0 auto; overflow: hidden; }
we apply text styles - color, font-size, text-shadow, etc. in #topbar
ruleset:
#topbar { font-family: tahoma, verdana, arial, sans-serif; font-size: 11px; color: white; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.7); }
and add in border, instead of using pipe character:
#topbar ul li { padding: 0 10px; border-left: 1px solid; padding: 0 7px 2px; line-height: 0.8em; } #topbar ul li:first-child { border: 0; }
the :first-child
rule used remove border on leftmost li
element.
you can see finished result here: http://jsfiddle.net/yijiang/bwygx/embedded/result,html,css
Comments
Post a Comment