Display: elements moving when site is resized.

luke214 · October 25, 2016

No idea why, here's my css!

Just a note, the #wrapper works exactly as intended, it doesn't move when the page is resized.

But the #wrappernav for some reason is high above the screen, I'll attach a link to it so you can see.

It seems as if no matter how much i change the margin height it never moves in line with the rest of the elements!

I have a feeling the structure of my HTML is completely messed up.

P.S. Just did some testing, it seems whatever div tag is first in my HTML, that element ends up super high up on the screen with all the elements far below it.

Here's my CSS and HTML;

<!DOCTYPE html>

<head>

<title>Information about Minerals and Rocks</title>

</head>

<body>

Rocks

</div><br>

<br>

Minerals

</div><br>

<br>

Locations

</div><br>

<br>

Identification

</div>

</nav>

</div>

<h1><ins>Welcome!</ins></h1>

<p>Welcome to my website about Minerals and Rocks!<br>

Hopefully you'll find 0some useful information to help you!</p>

</header>

<h2>What is a Mineral</h2>

<p>A mineral is a naturally occurring chemical compound. Most

often, they are crystalline and abiogenic in origin.<br>

A mineral is different from a rock, which can be an aggregate

of minerals or non-minerals and does not have one<br>

specific chemical composition, as a mineral does. The exact

definition of a mineral is under debate, especially<br>

with respect to the requirement that a valid species be

abiogenic, and to a lesser extent with regard to it<br>

having an ordered atomic structure. More information can be

found <a href="https://en.wikipedia.org/wiki/Mineral" target=

"_blank">here</a>!</p>

<p>In geology, rock or stone is a naturally occurring solid<br>

aggregate of one or more minerals or mineraloids. For

example,<br>

the common rock granite is a combination of the quartz,

feldspar<br>

and biotite minerals. The Earth's outer solid layer, the

lithosphere,<br>

is made of rock.<br>

Rocks have been used by mankind throughout history. From the

Stone Age,<br>

rocks have been used for tools. The minerals and metals found

in rocks<br>

have been essential to human civilization.<br>

Three major groups of rocks are defined: igneous,

sedimentary,<br>

and metamorphic. The scientific study of rocks is called

petrology,<br>

which is an essential component of geology.<br>

More information about rocks can be found <a href=

"https://en.wikipedia.org/wiki/Rock_(geology)" target=

"_blank">here!</a></p>

</article>

</main>

</div>

<h1><ins>Examples of Geodes</ins></h1>

<p>Below is a short video showing different types of Geodes.<br>

Take a look to see the different types you can find, or hopefully

buy!</p>

</div>

<video controls="controls" id="Geodevideo" poster=

"picofrock.png"><source src="Geodes.mp4" type="video/mp4"> Your browser

does not support the video tag.</video>

</body>

</html>

Edited October 25, 2016 by luke214

luke214 · October 25, 2016

a:visited { color: green; }

a:hover { color: red; }

* { font-family: "Arial Black"; }

body {

background: #526F35;

}

html, body {

height:100%;

}

#wrapper{

display: block;

background: white;

box-shadow: 0 0 50px 10px black;

text-align: center;

border: 5px solid black;

width: 50%;;

padding: 8px;

margin-top: 1%;

margin-left: 1%;

font-size: 17px;

}

#wrappertwo{

display: block;

background: white;

box-shadow: 0 0 50px 10px black;

text-align: center;

border: 5px solid black;

width: 23%;

padding: 8px;

margin-top: -45%;

margin-left: 57.4%;

font-size: 22px;

}

#Geodevideo{

display: block;

box-shadow: 0 0 50px 10px black;

border: 5px solid black;

width: 22%;

margin-left: 58.5%;

margin-top: 7%;

}

header{

font-size: 22px;

}

#wrappernav{

display: block;

font-size: 30px;

text-align: center;

background: #00CC33;

border: 3px solid black;

border-right: none;

margin-left: 88.1%;

margin-top: 90%;

padding: 20px;

font-weight: bold;

width: 10%;

}

#textnav:hover {

color: white;

-moz-transform: scale(1.1);

-webkit-transform: scale(1.1);

-o-transform: scale(1.1);

-ms-transform: scale(1.1);

-webkit-transform: scale(1.1);

transform: scale(1.1);

transition: .3s ease-in;

}

#textnav1:hover {

color: white;

-moz-transform: scale(1.1);

-webkit-transform: scale(1.1);

-o-transform: scale(1.1);

-ms-transform: scale(1.1);

-webkit-transform: scale(1.1);

transform: scale(1.1);

transition: .3s ease-in;

}

#textnav2:hover {

color: white;

-moz-transform: scale(1.1);

-webkit-transform: scale(1.1);

-o-transform: scale(1.1);

-ms-transform: scale(1.1);

-webkit-transform: scale(1.1);

transform: scale(1.1);

transition: .3s ease-in;

}

#textnav3:hover {

color: white;

-moz-transform: scale(1.1);

-webkit-transform: scale(1.1);

-o-transform: scale(1.1);

-ms-transform: scale(1.1);

-webkit-transform: scale(1.1);

transform: scale(1.1);

transition: .3s ease-in;

}

Edited October 25, 2016 by luke214

luke214 · October 25, 2016

It looks like everything is treating the nav as it's parent... I think.

When i try and change the margin of the nav element, everything else changes margin instead...

Any help?

Edited October 25, 2016 by luke214

dsonesuk · October 25, 2016

A block element on its own will force any element following it, below it.

A block element using float will allow elements following it as long as there is enough room to accommodate it to sit beside it.

luke214 · October 25, 2016

A block element on its own will force any element following it, below it.

A block element using float will allow elements following it as long as there is enough room to accommodate it to sit beside i

Ok, so I tried floating it and it didn't make any difference, and there's plenty of room on the screen for everything to fit :/

Seems like it only made it worse

Here's a link to the screenshot http://pasteboard.co/jkM2QLRgG.jpg

Edited October 25, 2016 by luke214

dsonesuk · October 25, 2016

The first thing to do is make column layout each using percentage widths whose edge will finish equally between wide spaced shadowed boxes, once you have this you know this will work responsively to a certain limit where you will then need to adjust the amount of columns as the device gets smaller, you then thing about adding the content in each.

luke214 · October 25, 2016

The first thing to do is make column layout each using percentage widths whose edge will finish equally between wide spaced shadowed boxes, once you have this you know this will work responsively to a certain limit where you will then need to adjust the amount of columns as the device gets smaller, you then thing about adding the content in each.

Ahh I've read about that!

Still that wouldn't solve my problem of actually being able to place elements in the correct positions without everything messing up :/

I even changed all of the elements to inline-block as that's supposed to be like a block element but you can place stuff next to it, and it still wont let me move the wrapper nav!

It seems like for me absolute positioning was the only thing that actually worked!

I have read though that a lot of people position elements as absolute WITHIN a relative parent, would it be ok for me to do that?

And just use media queries to change the height and width of the elements depending on screen size?

Edited October 25, 2016 by luke214

dsonesuk · October 25, 2016

rough guide

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta charset="UTF-8">
        <title>Information about Minerals and Rocks</title>
        <meta content="My website about Minerals and Rocks" name="description">
        <meta content="minerals,rocks,earth,gems" name="keywords">
        <meta content="index,follow/" name="robots">
        <link href="styles.css" rel="stylesheet" type="text/css">
        <link href="geode.ico" rel="icon">
        <style>
            body{margin:0; padding:0;}
            a:visited { color: green; }
            a:hover { color: red; }

            * { font-family: "Arial Black"; }
            body {
                background: #526F35;
            }

            html, body {
                height:100%;
            }

            #wrapper{
                display: block;

                width: 50%;;
                /* padding: 8px;*/
                margin-top: 1%;
                /* margin-left: 1%;*/
                font-size: 17px;

                width:54%;
                float:left;
            }
            .inner_wrap{
                background: white;
                box-shadow: 0 0 50px 10px black;
                text-align: center;
                border: 5px solid black;
                padding:6px;
                margin-right: 55px;
            }

            #wrapper .inner_wrap {

                margin-left:10px;
            }


            #wrappertwo{
                display: block;

                text-align: center;

                width: 31%;
                /*       padding: 80px 8px 8px;*/

                font-size: 22px;



                overflow: auto;
            }

            #wrappertwo .inner_wrap { margin: 55px; }

            #wrappertwo .inner_wrap ~ .inner_wrap {background: none; padding: 0;}
            #Geodevideo{
                display: block;
                /*  box-shadow: 0 0 50px 10px black;
                  border: 5px solid black;*/
                /*  width: 22%;
                  margin-left: 58.5%;
                  margin-top: 7%;*/
                width:100%;

            }

            header{
                font-size: 22px;
            }

            #wrappernav{
                display: block;
                font-size: 1.6vw;
                text-align: center;


                border-right: none;

                /*  padding: 20px;*/
                font-weight: bold;
                width: 15%;


                float:right;
            }

            #wrappernav nav{background: #00CC33;border: 3px solid black; margin-left:6px;overflow: hidden; margin-top: 100px; padding: 6px;}

            #textnav:hover {
                color: white;
                -moz-transform: scale(1.1);
                -webkit-transform: scale(1.1);
                -o-transform: scale(1.1);
                -ms-transform: scale(1.1);
                -webkit-transform: scale(1.1);
                transform: scale(1.1);
                transition: .3s ease-in;
            }

            #textnav1:hover {
                color: white;
                -moz-transform: scale(1.1);
                -webkit-transform: scale(1.1);
                -o-transform: scale(1.1);
                -ms-transform: scale(1.1);
                -webkit-transform: scale(1.1);
                transform: scale(1.1);
                transition: .3s ease-in;
            }

            #textnav2:hover {
                color: white;
                -moz-transform: scale(1.1);
                -webkit-transform: scale(1.1);
                -o-transform: scale(1.1);
                -ms-transform: scale(1.1);
                -webkit-transform: scale(1.1);
                transform: scale(1.1);
                transition: .3s ease-in;
            }

            #textnav3:hover {
                color: white;
                -moz-transform: scale(1.1);
                -webkit-transform: scale(1.1);
                -o-transform: scale(1.1);
                -ms-transform: scale(1.1);
                -webkit-transform: scale(1.1);
                transform: scale(1.1);
                transition: .3s ease-in;
            }
        </style>
    </head>
    <body>


        <div id="wrapper">
            <div class="inner_wrap">
                <noscript>Please enable Javascript</noscript>
                <header>
                    <h1><ins>Welcome!</ins></h1>
                    <p>Welcome to my website about Minerals and Rocks!<br>
                        Hopefully you'll find 0some useful information to help you!</p>
                </header>
                <main id="content">
                    <article id="firstfont">
                        <h2>What is a Mineral</h2>
                        <p>A mineral is a naturally occurring chemical compound. Most
                            often, they are crystalline and abiogenic in origin.<br>
                            A mineral is different from a rock, which can be an aggregate
                            of minerals or non-minerals and does not have one<br>
                            specific chemical composition, as a mineral does. The exact
                            definition of a mineral is under debate, especially<br>
                            with respect to the requirement that a valid species be
                            abiogenic, and to a lesser extent with regard to it<br>
                            having an ordered atomic structure. More information can be
                            found <a href="https://en.wikipedia.org/wiki/Mineral" target=
                                     "_blank">here</a>!</p>
                        <h2>What is a Rock?</h2>
                        <p>In geology, rock or stone is a naturally occurring solid<br>
                            aggregate of one or more minerals or mineraloids. For
                            example,<br>
                            the common rock granite is a combination of the quartz,
                            feldspar<br>
                            and biotite minerals. The Earth's outer solid layer, the
                            lithosphere,<br>
                            is made of rock.<br>
                            Rocks have been used by mankind throughout history. From the
                            Stone Age,<br>
                            rocks have been used for tools. The minerals and metals found
                            in rocks<br>
                            have been essential to human civilization.<br>
                            Three major groups of rocks are defined: igneous,
                            sedimentary,<br>
                            and metamorphic. The scientific study of rocks is called
                            petrology,<br>
                            which is an essential component of geology.<br>
                            More information about rocks can be found <a href=
                                                                         "https://en.wikipedia...i/Rock_(geology)" target=
                                                                         "_blank">here!</a></p>
                    </article>
                </main>
            </div>
        </div>
        <div id="wrappernav">
            <nav id="navmenu">
                <div id="textnav">
                    Rocks
                </div><br>
                <br>
                <br>
                <br>
                <div id="textnav1">
                    Minerals
                </div><br>
                <br>
                <br>
                <br>
                <div id="textnav2">
                    Locations
                </div><br>
                <br>
                <br>
                <br>
                <div id="textnav3">
                    Identification
                </div>
            </nav>
        </div>
        <div id="wrappertwo">
            <div class="inner_wrap">
                <h1><ins>Examples of Geodes</ins></h1>
                <p>Below is a short video showing different types of Geodes.<br>
                    Take a look to see the different types you can find, or hopefully
                    buy!</p>
            </div>
            <div class="inner_wrap">
                <video controls="controls" id="Geodevideo" poster=
                       "picofrock.png"><source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> Your browser
                    does not support the video tag.</video>
            </div>
        </div>

    </body>
</html>

Sign In

Display: elements moving when site is resized.

Recommended Posts

luke214

Link to comment

Share on other sites

luke214

Link to comment

Share on other sites

luke214

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

luke214

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

luke214

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity