Hello im really confuzed in the HTML and CSS language i have maked a footer and some div elements in the body so when i scroll up the footer doesnt is alwaus visible when i scroll down the button is hovering the footer and also the other div element i have this code and please some one explain me why this happens, and how do i make when the page is zoomed by the browser to be zoomed correctly and that two buttons in the top right corrner to not coming in the left while you zooming..

Copy and Paste the code to test it to see what i mean thanks :)

<html>
    <head>
        <div class="headerr">
        <header>
            <a class="upstrey_logo" href="index.php">Upstrey.com</a>
            <input class="rBtn" type="submit" value="Register" />
            <input class="sBtn" type="submit" value="Sign In" />
            <input class="search-box" type="search" name="search-box"/>
        </header>
        </div>
    </head>
    <body>
        <style>
            body {
                opacity: 0.93;
                margin-left: 10%;
                margin-right: 10%;
                color: black;
                font-family: sans-serif;
                visibility: inherit;
                overflow: auto;
                background-color: white;
                min-height:100%;
                border-radius: 20px;
                text-shadow: 50%;
                font-size:100%;
                line-height:1.125em;
                -webkit-text-size-adjust: auto;
            }
            input.status-box {
                opacity:1;
                border-radius:9px;
                width: 450px;
                height: 100px;
                background-color: #E6FFFF;
                border: 1px solid gray;
            }
            div.updated-box {
                opacity:1;
                position: relative;
                border-radius:4px;
                background-color: #E6FFFF;
                border: 1px solid gray;
            }

            div.headerr {
                opacity: 1;
                position: fixed;
                width:100%;
                height:53px;
                vertical-align: middle;
                background-color: #E6FF8F;
                border: 0px solid gray;
                right: 0px;
                left: 0px;
                top: 0%;
                -webkit-text-size-adjust: none;
                -webkit-box-shadow: 1px 0px 5px 1px rgba(0,0,0,0.47);
                -moz-box-shadow: 1px 0px 5px 1px rgba(0,0,0,0.47);
                box-shadow: 1px 0px 5px 1px rgba(0,0,0,0.47);
            }
            input.pBtn {
                opacity:1;
                position: relative;
                border-radius: 9px;
                width:100px;
                height:35px;
                right: 35%;
                background-color: #E6FF8F;
                border: 1px solid gray;
                cursor: pointer;
            }
            input.sBtn {
                opacity: 0.5;
                position: fixed;
                border-radius:2px;
                margin-left: 6px;
                margin-right: 6px;
                width:100px;
                height:35px;
                right: 110px;
                top: 0px;
                background-color: #E6FF8F;
                border: 1px solid green;
                text-size-adjust: none;
                cursor: pointer;
            }
            input.rBtn {
                opacity: 0.5;
                position: fixed;
                border-radius:2px;
                width:100px;
                margin-left: 6px;
                margin-right: 6px;
                height:35px;
                float: left;
                right: 0px;
                top: 0px;
                background-color: gray;
                border: 1px solid gray;
                text-size-adjust: none;
                cursor: pointer;
            }
            a.upstrey_logo {
                opacity: 1;
                position: fixed;
                font-size: 20px;
                font-family: sans-serif;
                text-decoration:none;
                color: #00af90;
                left: 2%;
                top: 15px;
                cursor: pointer;
                text-size-adjust: none;
            }
            input.search-box {
                opacity: 0.5;
                position: fixed;
                width:450px;
                height:35px;
                border-radius:4px;
                top: 9px;
                left: 150px;
                background-color: #E6FFFF;
                border: 1px solid gray;
            }
        </style>

        <form style="top: 60px; position: fixed; cursor: pointer; font-family: sans-serif;">
            <a style="text-decoration:none; color: black;" href="#">Top News</a><br>
            <a style="text-decoration:none; color: black;" target="_blank" href="http://google.com">Write Post</a><br>
            <a style="text-decoration:none; color: black;" target="_blank" href="http://google.com">Profile</a><br>
            <a style="text-decoration:none; color: black;" target="_blank" href="http://google.com">Your Posts</a>
        </form>

        <center>
            <br><br><br>
            <div style="border-radius:8px; margin-left: 20%; margin-right: 25%; width:500px; height:180px; background-color:white; border:3px solid gray;"><br>
                <form action="index.php" method="POST" name="update_status_form">
                    <input class="status-box" type="text" name="status-box" placeholder="What you thinking of ?"></input><br><br>
                    <input class="pBtn" type="submit" value="Post" />
                </form>
                <?php
                    $date = date('H:m:s');

                    if(isset($_POST['status-box'])) {
                        $update = htmlentities($_POST['status-box']);
                        echo "
                            <br><br>
                            <div class='updated-box' />
                                <br><br><a>$update</a><hr>
                                Posted on: $date
                            </div>";
                    }
                ?>
            </div>
        </center>
    </body>
</html>

This is because you've got your head and body tags in a muddle:

<html>
<head>

    Page information goes in the head, like a title, favicon and styles

    <style type="text/css">
        ...
    </style>    
</head>
<body>

    All visible page content. All div tags (or any HTML that the user is going to physically see) should be in here, for instance

    <div class="header">
        ...
    </div>
    ...
</body>
</html>

Put your style tag in the <head> and your divs/headers in the <body> and it should solve your problem.

I dont get it what you mean i have the header in the <head> tag so whats the problem here ?

You have the header div inside the head tag: you can't do this. It will mess up the way your page looks.

Take a look here. <head> doesn't mean the header of your page, it's something completely different.

You need your style tag inside the head tag (bad practice to have it anywhere else).

You need all divs/layout elements inside the body tag.

Does that make sense at all?

I have replaced the CSS in the head tag but still the button hovers the header

Delete position fixed line and increase margin left and it wont do what it is doing this time.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.