CODEWITHSUNDEEP
htmlcss
NetoCostaJr
NetoCostaJr

Reputation: 1

Converting to tableless table

Tableless not understand anything and was wondering how the code below in this table, turn into tableless

http://adresende.com.br/help/layout.html

Who can help me, I'll be very grateful

Upvotes: 0

Views: 203

Answers (2)

Conex
Conex

Reputation: 822

Didn't check the code but this is pretty much way to go ... 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Layout</title>
    <style media="all" type="text/css">
        body {
            font-family: Tahoma, Verdana, Arial, sans-serif;
            font-size: 11px;
            color: #000;
            margin: 0;
        }

        #wrapper{
            background:#006699;
        }

        #cntwrapper{
            background:#005A86;
            width:1024px;
            margin:0 auto;
        }

        #menutopoesq {
            float: left;
            padding-left:16px;
            padding-top:3px;
            color: #FFF;
            text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.7);
        }

        #menutopodir {
            float: right;
            padding-right:14px;
            padding-top:3px;
            color: #FFF;
            text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.7);
        }

        img.menutopodir {
            vertical-align: middle;
        }

        #shadow {
            clear:both;
            border-top:1px solid #666;
            height:6px;
            background:url(shadow.png);
            position:fixed;
            width:100%;
            left:0;
            right:0;
            top:32px;
            z-index:9009;
            overflow:hidden;
            filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='shadow.png', sizingMethod='scale');
            _background:none;
        }
    </style>
</head>
<body>
<div id="wrapper">
    <div id="cntwrapper">
        <div id="menutopoesq">
            Início &nbsp; | &nbsp; Estabelecimentos &nbsp; | &nbsp; Consumidores &nbsp; | &nbsp; Blogs &nbsp; | &nbsp; O que é &nbsp; | &nbsp; Contato &nbsp; | &nbsp; Sugire
        </div>

        <div id="menutopodir">
            Olá, sejam bem vindo! &nbsp; | &nbsp; Crie seu perfil &nbsp; | &nbsp; Entrar &nbsp; | &nbsp; <img src="br.png" class="menutopodir" />
        </div>
    </div>
    <div id="shadow"></div>
</div>
</body>
</html>

Upvotes: 0

Yi Jiang
Yi Jiang

Reputation: 50155

The key here is to use the correct markup for the job. The site you have currently looks like it's displaying a list of things on the top, most likely for navigation, so we'll be 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 the layout, by floating the two uls to each of the sides, then float the li inside the ul to create a inline list: 

#leftnav {
    float: left;
}

#rightnav {
    float: right;
}

#topbar ul li {
    float: left;
}

To create the two-color background, we can apply a background to both the body and #topbar. 

body {
    background: url('shadow_2.png') repeat-x;
}

#topbar {
    background: url('shadow.png') repeat-x;
}

Where both shadow.png files would be a 1px by 45px slice of the background you currently have. To position #topbar in the middle, we give it a width and use margin: 0 auto. A padding is also applied to position the contents into the correct position, and a clearfix is applied to prevent it from collapsing: 

#topbar {
    padding: 8px 10px 20px;
    width: 956px;
    margin: 0 auto;
    overflow: hidden;
}

We then apply the text styles - color, font-size, text-shadow, etc. in the #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 then finally we add in a border, instead of using the 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 is used to remove the border on the leftmost li element.

You can see the finished result here: http://jsfiddle.net/yijiang/BWYGX/embedded/result,html,css

Upvotes: 2

Related Questions