Jump to content
luke214

Display: elements moving when site is resized.

Recommended Posts

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.

http://pasteboard.co/jjfhzZP1a.jpg

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>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<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">
<title>Information about Minerals and Rocks</title>
</head>
<body>
<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="wrapper">
<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=
"_blank">here!</a></p>
</article>
</main>
</div>
<div id="wrappertwo">
<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 by luke214

Share this post


Link to post
Share on other sites
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 by luke214

Share this post


Link to post
Share on other sites

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 by luke214

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 by luke214

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 by luke214

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...