CODEWITHSUNDEEP
htmlcssresize
imazore
imazore

Reputation: 1

How can I prevent divs from moving while resizing the page?

Anyone know how to prevent the "watch the stream" and "dice game" to move like that?

screen recording

HTML:

<!doctype html>
<html>

        <head>
                <meta charset="UTC-8">
                <title>RLESSON85</title>
                <link href="main.css" rel="stylesheet">
        </head>

        <body>

                        <h1 class="index"><a href="index.html">HOME</a></h1>
                        <h1 id="indextitle">RLEESON85</h1>
                        <h1 id="stream"><a href="http://www.twitch.tv/rleeson85">WATCH THE STREAM</a></div>
                        <h1 id="dice"><a href="dice.html">DICE GAME</a></h1>

        </body>

</html>

CSS:

body {
        background: #333;
}

footer {
}

.index {
        font-family: bebas neue;
        font-size: 33px;
        font-style: inherit;
        font-weight: inherit;
        color: white;
        letter-spacing: 3px;
        float: left;
        margin-left: 30px;
        background: transparent;
        height: 60px;
        width: 140px;
        line-height: 60px;
        text-align: center;
        border-style: solid;
        border-width: 2px;
        border-radius: 6px;
        transition: all 0.3s ease 0s;
}
#indextitle {
        font-family: bebas neue;
        font-size: 190px;
        font-style: inherit;
        font-weight: inherit;
        color: white;
        letter-spacing: 5px;
        position: absolute;
        top: 30%;
        left: 50%;
        transform: translateX(-50%) translatey(-50%);
}

#dicetitle {
        font-family: bebas neue;
        font-size: 160px;
        font-style: inherit;
        font-weight: inherit;
        color: white;
        letter-spacing: 5px;
        position: absolute;
        top: 30%;
        left: 50%;
        transform: translateX(-50%) translatey(-50%);
}

#stream {
        font-family: bebas neue;
        font-size: 33px;
        font-style: inherit;
        font-weight: inherit;
        color: white;
        letter-spacing: 3px;
        position: absolute;
        top: 56%;
        left: 50%;
        transform: translateX(-50%) translatey(-50%);
        background: transparent;
        height: 60px;
        width: 320px;
        line-height: 60px;
        text-align: center;
        border: 0;
        border-style: solid;
        border-width: 2px;
        border-radius: 6px;
        transition: all 0.3s ease 0s;
}

#dice {
        font-family: bebas neue;
        font-size: 33px;
        font-style: inherit;
        font-weight: inherit;
        color: white;
        letter-spacing: 3px;
        position: absolute;
        top: 66%;
        left: 50%;
        transform: translateX(-50%) translatey(-50%);
        background: transparent;
        height: 60px;
        width: 200px;
        line-height: 60px;
        text-align: center;
        border: 0;
        border-style: solid;
        border-width: 2px;
        border-radius: 6px;
        transition: all 0.3s ease 0s;
}

.index:hover {
        font-family: bebas neue;
        font-size: 33px;
        font-style: inherit;
        font-weight: inherit;
        color: white;
        letter-spacing: 3px;
        float: left;
        margin-left: 40px;
        background: #777;
        height: 60px;
        width: 120px;
        line-height: 60px;
        text-align: center;
        border-style: solid;
        border-width: 2px;
        border-radius: 6px;
        transition: all 0.3s ease 0s;
}


#stream:hover {
        font-family: bebas neue;
        font-size: 33px;
        font-style: inherit;
        font-weight: inherit;
        color: white;
        letter-spacing: 3px;
        position: absolute;
        top: 56%;
        left: 50%;
        transform: translateX(-50%) translatey(-50%);
        background: #777;
        height: 60px;
        width: 300px;
        line-height: 60px;
        text-align: center;
        border: 0;
        border-style: solid;
        border-width: 2px;
        border-radius: 6px;
        transition: all 0.3s ease 0s;
}


#dice:hover {
        font-family: bebas neue;
        font-size: 33px;
        font-style: inherit;
        font-weight: inherit;
        color: white;
        letter-spacing: 3px;
        position: absolute;
        top: 66%;
        left: 50%;
        transform: translateX(-50%) translatey(-50%);
        background: #777;
        height: 60px;
        width: 180px;
        line-height: 60px;
        text-align: center;
        border: 0;
        border-style: solid;
        border-width: 2px;
        border-radius: 6px;
        transition: all 0.3s ease 0s;
}

a:link {
    text-decoration: none;
    color: white;
}

a:visited {
    text-decoration: none;
    color: white;
}

Upvotes: 0

Views: 1126

Answers (3)

Arnold Daniels
Arnold Daniels

Reputation: 16553

Don't position each element individually, but position the whole block.

Also, you shouldn't use <h1> for everything.

    <head>
            <meta charset="UTC-8">
            <title>RLESSON85</title>
            <link href="main.css" rel="stylesheet">
    </head>

    <body>

            <div class="index"><a href="index.html">HOME</a></div>
            <div class="maingroup">
                    <h1 id="indextitle">RLEESON85</h1>
                    <div id="stream"><a href="http://www.twitch.tv/rleeson85">WATCH THE STREAM</a></div>
                    <div id="dice"><a href="dice.html">DICE GAME</a></div>
            </div>
    </body>

CSS

.maingroup {
    position: absolute;
    top: 50%;
    height: 450px;
    margin-top: -225px;
    text-align: center;
}

#stream, #dice {
    margin: 0 auto 20px;
}

See the JSFiddle

Upvotes: 1

Aru
Aru

Reputation: 1870

try something like this....

HTML

<div id="outerwrapper">
    <div id="innerwrapper">
        <p class="links"><a href="#">Home</a></p>
         <h1>RLEESSON85</h1>
        <p class="links"><a href="#">Watch the Stream</a>  <a href="#">Dice game</a></p>
    </div>
</div>

CSS

#outerwrapper {
    background:url("http://www.freeppt.net/background/violet-vector-leaves-circles-backgrounds-for-powerpoint.jpg") no-repeat left top;
    background-position:cover;
    height: 100%;
    position: absolute;
    width: 100%;
}
#innerwrapper {
    background-color:#333;
    position:absolute;
    width:100%;
    height:100%;
    transition: all 0.3s ease 0s;
}
.links a, links a:hover, links a:visited {
    color:white;
    text-decoration:none;
    padding:10px 25px;
    display:inline-block;
    border-radius:7px;
    border:1px solid white;
}
h1 {
    font-size:80px;
    color:white;
}

Script

$(".links a").click(function () {
    $("#innerwrapper").css("height", "50%");
    setTimeout(function () {
        $("#innerwrapper").css("height", "100%");
    }, 2000);
});

Fiddle Demo

Upvotes: 0

Adrian Rayco
Adrian Rayco

Reputation: 29

I just tried... just put the class you want to use inside the div like 

    <head>
            <meta charset="UTC-8">
            <title>RLESSON85</title>
            <link href="main.css" rel="stylesheet">
    </head>

    <body>

                    <div><h1 class="index"><a href="index.html">HOME</a></h1><div>  
                    <div><h1 id="indextitle">RLEESON85</h1></form></div>
                    <div><h1 id="stream"><a href="http://www.twitch.tv/rleeson85">WATCH THE STREAM</a></div>
                    <div><h1 id="dice"><a href="dice.html">DICE GAME</a></h1><div>

    </body>

Upvotes: 0

Related Questions