ansaurus

Question

Answer 1

A:

Its the padding. If you resize the window and make it small, if the 10 pixels are more than the remaining percentage of the page's space, you will have problems. You need practice to learn how to mix fixed and fluid widths.

Teo Maragakis 2010-10-04 23:28:30

i didn't get it,i tried to change the 10px value but nothing chages,please edit the code in the correct way to show me the result.

OdO 2010-10-05 00:17:02

Answer 2

A:

First of all, get rid of all those absolute positionigs: they remove from the document flow each element to which they are assigned, this is what causes the overlappping of your form elements. You should make them floating instead, using the float: left; attribute. This way, they will arrange themselves without "interfering" with each other. You may need to adjust the margins to position them correctly. Secondly, as Teo said, be careful when you use relative widths: mixing them with fixed can cause you a grat deal of trouble and pain.. Bear also in mind that paddings are rendered differently in IE6 (alas, still used by many), so avoid using them when you can.

Lucius 2010-10-05 00:45:09

another thing: you need to make the containing box (.banner) floating as well, in order to contain floating elements without them flowing outside the container itself. You may need to add the clear: left; attribute to the first element following the bannner, to restore the normal flow.

Lucius 2010-10-05 00:49:11

ok ,i did what what you said,but still have overlapping.please edit the code and try then give me the correct code.

OdO 2010-10-05 01:04:35

see my answer below..

Lucius 2010-10-05 21:39:19

Answer 3

A:

Try this. It may still need some fixes, but it should render quite well in the main browsers. The code includes in-line explanation.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>layout example</title>
    <style type="text/css">
    * { /* initializing all elements to zero margin & padding is often a good idea: you will have a 'clean' start */
        margin: 0;
        padding: 0;
    }
    #container {
        margin: 10px;
    }
    #banner { /* I need this to be a floating element, so that it can contain other floating elements without them 'escaping' outside it */
        float: left;
        width: 100%;
        min-width: 635px; /* set this to avoid the inner elements to "flow below" when you resize the window (remove this setting to see what happens without it) */

        background: #EEE;
        border: 1px solid #999;
    }
    #banner .logo { /* it is correct for it to be the first element of the banner, but I need it to be on the right side of the page, so I FLOAT it right */
        float: right;
        margin: 2% 1%;
        width: 30%; /* there is no need to specify an height, the image will scale automatically according to the current width. moreover, pecentual heights do not work wery well */
        background: #9AC;
        border: 1px solid #039;
    }
    #banner .item { /* adjust margins according to you needs. this settings are in common to all the inner elements of the banner */
        float: left;
        margin: 2% 2.5%;
    }
    #banner .add { /* you may specify a background image to substitute/add to the text of the various elements (this method is preferrable to using an IMG tag) */
        background: url(images/some_image.gif) 0 0 no-repeat;
    }
    #banner .request {
        background: url(images/some_other_image.gif) 0 0 no-repeat;
    }
    #banner .join {
        background: url(images/still_another_image.gif) 0 0 no-repeat;
    }
    #banner .add span,
    #banner .request span,
    #banner .join span { /* with this trick you can hide the text from view without hiding it from spiders and screen readers (uncomment it if you need to use it) */
        /* 
        display: block;
        overflow: hidden;
        height: 0;
        */
    }
    .clear { /* here I set a clear element that will restore the normal flow of the document after floating elements */
        clear: both;
    }
    hr.clear { /* here I hide the standard properties of the ruler in order to hide it from view */
        border: 0 none;
        height: 0;
        visibility: hidden;
    }
    </style>
    <!-- the following code is needed to set the min-width property for IE 6 and below, since it is not supported -->
    <!--[if lte IE 6]><style type="text/css">#banner { width: 650px; }</style><![endif]-->
</head>

<body>
    <div id="container">
        <div id="banner">
            <img class="logo" alt="logo goes here" title="this is the name of the company/website" />
            <form method="post" action="#" class="item">
                <p><input type="text" name="search" class="search_box"> <input type="submit" name="search_button" class="search_button" value="search"></p>
            </form>
            <p class="item add"><span>Add</span></p>
            <p class="item request"><span>Request</span></p>
            <p class="item join"><span>Join</span></p>
        </div>
        <hr class="clear" /><!-- this element is needed to restore the normal document flow (doesn't have to be necessarily an HR, as long as it has the clear property set, but in this case it fits well semantically, since it separates one section of the page from the rest) -->
        <div class="some-other-content">
            blah blah blah...
        </div>
    </div>
</body>
</html>

Lucius 2010-10-05 21:13:30

that is great,thank you.Is that what you mean by parent and child class Ex: #banner .add{......},.add is child of #banner??,,also the first class that without a selector...is that means it would be applied for all elements??

OdO 2010-10-07 22:07:09

the leftmost class, id or tag name is the parent, each class, id or tag name separated by a space is child of the element to its left.e.g.:#banner .form-item imgdefines the style for each IMG tag inside each element with the .form-item class, inside the element identified by the id banner

Lucius 2010-10-08 08:48:06

what about the first class that without a selector...is that means it would be applied for all elements??

OdO 2010-10-08 09:19:13

are you talking about the asterisk * ?yes, it is a 'jolly' selector, so its rules apply to all elements.obviously, the rules specified are overridden by any more specific selector.i.e.: * { margin: 0; } p { margin: 1em 0; } -> all paragraphs will have a top and bottom margin of 1 em

Lucius 2010-10-08 12:06:00

ansaurus

tags:

views:

answers:

a problem with the css position

related questions