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 uls 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

Popular posts from this blog

android - Spacing between the stars of a rating bar? -

aspxgridview - Devexpress grid - header filter does not work if column is initially hidden -

c# - How to execute a particular part of code asynchronously in a class -