Making simple design

**CommanderZ** · May 21, 2007 09:26

Hello,
I'm creating a simple design - it is pretty simple one - just one column with a header. There is logo, login tab and horizontal navigational menu in the header. And I want to have the logo and the login tab near themselves (on left and right side) and the menu under them. In Opera is everything OK, but in IE and Firefox is the tab pulled under the logo. I could have the problem easily solved by adding a bunch of DIVs, but I want to keep the code as simple as possible (there is only one DIV yet). Do you know any simple tricks how to solve this?

Link http://matejz.wz.cz/design.html

Thanks in advance

**kefeso** · May 21, 2007 10:13

From the way I see it. You could have both #logo floated to the left and #login_tab floated to the right, and add the appropriate margins. Then, give a 'clear: both' for the element below them.

**Paul O'B** · May 21, 2007 10:21

You could float the image to the left and clear the ul.

Code:

#logo{float:left}
#menu{clear:both}

However in your attempt to avoid divs your page is not very semnatic and you are using breaks to make space which is a bd idea. You are also mixing dperecated elements like align that are not allowed in strict.

Your inputs in the form need to be a in a block container as they will not validate in strict unless they are contained.

Your image probably should be in an H1 tag because it is your site name and is of importance.

Also you are using the xml declaration which forces ie6 into quirks mode and it will use the broken box model among other unsavoury things.

The underscore hack is a nasty hack as it mixes the good styles with the bad. You are much better off separating the hacks via the * html hack or by using conditional comments.

Hope that helps

**Paul O'B** · May 21, 2007 10:37

I would do something like this:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250" />
<meta http-equiv="Content-Language" content="cs-CZ" />
<meta name="robots" content="INDEX,FOLLOW" />
<meta name="description" content="Internetov&#253; obchod s košilemi a kravatami." />
<meta name="keywords" content="košile, kosile, kravaty, kravata, obchod, eshop, e-shop, internetov&#253; obchod, internetovy obchod, online, eterna" />
<meta name="author" content="Matěj Z&#225;bsk&#253;" />
<title>Košile.com</title>
<style type="text/css">
            body{
                background:black;
                /* nastaveni layoutu */
                    text-align: center;
                    margin:0; /* zruseni okraju */
                    padding:0;  /* -"- */
                    height:100&#37;; /* roztazeni na celou vysku, kvuli ie, pro foxe a operu staci min-height */   
                /* definice globalniho fontu */
                    font-size:1.05em;
                    font-family:sans-serif;
                    line-height:1.65;
                    color:rgb(220,220,220);
                    
                
            }
            
            div#wrapper{
                background:url(http://matejz.wz.cz/gfx/pozad.gif) ;
                border-left:1px gray solid;
                border-right:1px gray solid;
                
                /* nastaveni layoutu */
                    width:678px;
                    min-height:100%; /* roztazeni na celou stranku i s malem obsahu pro foxe a operu */
                    text-align:justify; /* redefinice zarovnani doleva, kvuli nutnosti vycentrovani obsahu pro ie */
                    margin:0 auto 0 auto;
                    padding:25px 100px 20px 100px;
            }
            
* html div#wrapper{
    height:100%;
    width:880px;
    w\idth:678px;
}
                            
            #logo{
                /*margin-bottom:10px;*/
                border:none;
                width:200px;
            }
            
            #login_tab{
              
                /*padding:5px;*/
                /*position:relative;
                top:-70px;
                left:500px;*/
                /*height:50px;*/
                /*_height:70px;*/
                margin-bottom:20px;
                line-height:1.3;
                font-size:80%;
                float:right;
                
            }
            
            #login_tab input{
                color:rgb(220,220,220);
                background:transparent;
                border:1px gray solid;
                margin-bottom:1px;
            }

            #menu{
                /* nastaveni zobrazeni menu */
                    list-style: none;
                   
                    /* padding: 15px 0 0 0; */
                    margin: 20px auto 20px auto;
                    padding:0;

                    width:600px;
                    display: table;
                    height:2em;
                /* nastaveni vzhledu */
                    font-size:110%;
                    font-weight:bold;
                    color:white;
                    
                    
            }
            
            #menu li{
                float: left;
                /*padding: 2px 20px;*/
                display: block;
                width:120px;
                /*_width:19.9%;*/
                text-align:center;
                
            }
            
             #menu li a{
             
             }
                    
            p{
                text-indent:3em;
            }
            
            a{
                color:white;
                text-decoration:underline;
            }
            
            a:hover{
                color:rgb(153,204,255);
            }
            
            h1,h2{
                padding-top:10px;
                color:rgb(246,246,246);
            }
            
            h1{
                font-size:150%;
                                                                
            }
            
            h2{
                font-size:115%;    
          }
                                        #logo{float:left}
                                        #menu{clear:both}
          #header input,#header label{
                                            float:right;
                                            clear:right;
                                            margin:1px 0;
                                            width:11em;
                                            }      
        </style>
</head>
<body>
<div id="wrapper">
    <form action="bla.php" method="post" enctype="text/plain" id="login_tab" title="Přihlašovac&#237; ok&#233;nko" accept-charset="windows-1250">
        <div id="header"><img src="http://matejz.wz.cz/gfx/eterna_logo.gif" alt="ETERNA logo" id="logo" />
            <label for="login">Přihl&#225;šen&#237;:</label>
            <input type="text" id="login" name="login" maxlength="30" value="Přihlašovac&#237; jm&#233;no" title="Přihlašovac&#237; jm&#233;no" />
            <input type="password" name="heslo" maxlength="30" value="Heslo" title="Heslo" />
        </div>
    </form>
    <ul id="menu">
        <li><a href="bla.html">Košile</a></li>
        <li><a href="bla.html">Kravaty</a></li>
        <li><a href="bla.html">Informace</a></li>
        <li><a href="bla.html">Koš&#237;k</a></li>
        <li><a href="bla.html">Kontakt</a></li>
    </ul>
    <!-- </div> -->
    <h1>Heading #1</h1>
    <p>Lorem ipsum dolor sit <a href="bla.html">amet consectetuer</a> at lorem Pellentesque vitae cursus. Vivamus egestas urna ac nec velit nunc In neque fermentum porttitor. Tempus Lorem wisi turpis nibh nisl id elit enim et mauris. Vivamus Praesent velit amet justo habitasse congue auctor condimentum Praesent id. Convallis tincidunt Ut ac laoreet at
        laoreet a malesuada adipiscing rhoncus. Quam Curabitur ligula ut eget Nullam enim dictum commodo Suspendisse sed. Lacus.</p>
    <p>Sapien tristique Ut Aenean Vestibulum mauris venenatis eu lorem dolor laoreet. Elit augue eget et pretium gravida dapibus tincidunt id tempor nunc. Metus Phasellus cursus tincidunt pede orci sed convallis magna vitae leo. Justo cursus tempus parturient convallis sed justo Mauris sollicitudin neque turpis. Platea orci tristique adipiscing diam id
        Vivamus fringilla orci In et. Platea eget fringilla adipiscing vitae vitae habitant Nunc netus Curabitur sapien. Tortor laoreet adipiscing.</p>
    <h2>Heading #2</h2>
    <p>Vivamus tempus In Nam ipsum ac nec fames tristique purus id. Orci laoreet Curabitur diam venenatis eu malesuada semper platea Curabitur felis. Leo magna adipiscing Duis neque hendrerit et Nullam ipsum et a. Eros tortor vestibulum Vestibulum elit dolor lorem auctor et sapien Suspendisse. Quis mauris Curabitur Phasellus consectetuer id et non.</p>
    <p>Id orci eros cursus tortor ac id mauris quis vel pharetra. Congue sed orci et Vestibulum pretium adipiscing nunc tellus Ut Phasellus. Convallis cursus interdum ligula vel massa laoreet tellus penatibus ante pede. Hac Vestibulum pretium tellus eget id augue adipiscing odio Aenean habitasse. Vestibulum vitae lacus ac libero malesuada convallis In
        arcu ornare massa. Nullam adipiscing Vestibulum Integer auctor tincidunt.</p>
    <p>Vivamus tempus In Nam ipsum ac nec fames tristique purus id. Orci laoreet Curabitur diam venenatis eu malesuada semper platea Curabitur felis. Leo magna adipiscing Duis neque hendrerit et Nullam ipsum et a. Eros tortor vestibulum Vestibulum elit dolor lorem auctor et sapien Suspendisse. Quis mauris Curabitur Phasellus consectetuer id et non.</p>
    <p>Id orci eros cursus tortor ac id mauris quis vel pharetra. Congue sed orci et Vestibulum pretium adipiscing nunc tellus Ut Phasellus. Convallis cursus interdum ligula vel massa laoreet tellus penatibus ante pede. Hac Vestibulum pretium tellus eget id augue adipiscing odio Aenean habitasse. Vestibulum vitae lacus ac libero malesuada convallis In
        arcu ornare massa. Nullam adipiscing Vestibulum Integer auctor tincidunt.</p>
</div>
</body>
</html>

Except the image should be in a container as i mentioned before as i don't like inline elements just hanging there

**CommanderZ** · May 21, 2007 11:03

Thanks a lot, Paul, the clear and left float solved my problem. Otherwise, I dont't understand why to put the image into the form and why to put it all into another DIV - it is neither logical or semantical part of it. And why to put it all into another div? The form works as container AFAIK almost exactly the same as div... (please explain it to me, I'm not very experienced in CSS)

PS: I was using FFox tidy for validation and it was showing 0 errors/0 warnings, now I tried online w3c validator and it confirmed that inputs must not be uncontained. Then...I would put whole form into a DIV...what is wrong with it?

**Paul O'B** · May 21, 2007 15:42

HI,

it is neither logical or semantical part of it.

I used the div to kill two birds with one stone by giving the form the block level child it needs to validate but I would probably have used an H1 to hold the logo image site name anyway, although there is some debate whether the site name should be an h1 or not.

I would have created a header section and placed the form inside it and then wrapped the inputs in a fieldset. You should also use labels to identify the form elements as it identifies to which element the text refers to which is good for accessibility. You just have anonymous text which has no semantic meaning at all and could be tied to either input.

I tried online w3c validator and it confirmed that inputs must not be uncontained.

Yes in html strict a form cannot contain only inline elements, just like the body and which is why I suggested that inline elements should always be in a semantic container as they have no real meaning on their own.

In your form you should really be using a fieldset as the block level container because that's what it is designed for but unfortunately it can be a little hard to control at times.

Read Tommy's post here for similar questions.

Divs should be used to divide and group sections logically and when used with id's can provide a logical structure to the page. However they should not be used for everything because there are plenty of the correct semantic html tags to go around such as p,ul,ol,dl,h1,h2,h3... etc. All of which describe their content precisely.

Things like breaks should not be used to make space because thats what margins are for. Breaks are for making a line break when it is semantically correct to do so (such as in address or poem). However most text is paragraphs and p tags should be used.

Just because you aren't adding divs doesn't mean you are doing well if you aren't using something else in its place.

**CommanderZ** · May 21, 2007 23:26

Thanks once more, Paul

User Tag List

Thread: Making simple design

Thread Tools

Display

Making simple design

Bookmarks

Bookmarks

Posting Permissions