0

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

2
  • Have you tried at all? Try it first, search the web for normal ways of doing it, etc. Show us what you've tried - it can be helpful in helping us to help you. Nov 16, 2010 at 0:28
  • Give it a shot, even if it's in dreamweaver. When you get stuck post a question - that's how you learn.
    – Gregg B
    Nov 16, 2010 at 0:29

2 Answers 2

2

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

0

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> 

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.