CODEWITHSUNDEEP
htmlcssimagepositioning
Isabella.
Isabella.

Reputation: 43

My image will not move up?

I have two images. One worked just fine and I used float, I called that div 'flowers.' The second image, however, does not want to move. I called that div 'barbed.' Barbed was on the left so I floated it to the right and that worked fine. The problem is getting it UP higher. I've tried using position:absolute, position:relative and then using bottom and top. It does not want to move. I have also tried margins, padding, AND using z-index thinking maybe other margins were in the way. Nothing.

Here is a screencap of how it is looking:

image too low

Here is the html code:

    <!DOCTYPE html>
    <html>
    <head>
    <title>question reality.</title>
    <link rel="stylesheet" type="text/css" href="intro-page.css">
    </head>

    <body>

        <div class="container">
            <center>
                <img src="https://i.imgur.com/10iUAyi.gif">
            </center>
        </div>

        <div class="text-center">
            <div class="light">
                <button>
                    <a href="http://google.com">Light</a>
                </button>
            </div>
            </button>
            <div class="dark">
                <button>
                    <a href="http://google.com">Dark</a>
                </button>
            </div>
        </div>


        <div class="flowers">
            <img src="https://i.imgur.com/rOLqQ48.jpg">
        </div>

        <div class="barbed">
            <img src="https://i.imgur.com/SukIIZ6.jpg">
        </div>

    </body>
    </html>

and here is the CSS:

body{
background-color:black;
}


.text-center{
margin-left:580px;

}

.container{
padding-top:200px;
}

.light a{
color:black;
text-decoration:none;
}

.light a:hover{
background-color:black;
color:white;
padding:5px;
}

.light button{
background-color:white;
color:black;
font-size: 30px;
border-radius: 12px;
float:left;

}

.dark a{
color:white;
text-decoration:none;
}

.dark a:hover{
background-color:white;
color:black;
padding:2px;
}

.dark button{
background-color:black;
color:white;
font-size:30px;
border-radius:12px;
float:left;
margin-left:15px;

}

.dark{
text-align:center;
}

.light{
text-align:center;
}

.flowers{
float:left;
width:100%;
position:absolute;
bottom:100px;
left:200px;
}

.barbed{
float:right;
width:100%
position:absolute;
bottom:300px;

}

Upvotes: 0

Views: 46

Answers (1)

Steve K
Steve K

Reputation: 9065

First of all your missing a semi-colon after width:100% in the .barbed css and that is why your not being able to move the div around. If you add that semi-colon you will be able to move the div around to your liking and it should answer your question. 

.barbed{
float:right;
width:100%;
position:absolute;
bottom:300px;
}

That being said there are quite a few glaring issues with the layout you have here. First being that you have a lot of unnecessary markup. You dont need to wrap everything in a div you can just add a class to the element and position and style it from there. Next you can remove the floats from your .barbed and .flowers divs because you are using absolute positioning so your floats are doing nothing at all. You may also want to think about wrapping your elements in a div and position that div to relative and then position them absolutely in that div instead of positioning them absolutely in the window. Next if you resize your browser window to a smaller size you can see your layout will more than likely break. So when someone opens this on a mobile browser you will have issues. If i were you I would try something like the following. I just typed this up real quick and didn't really test it much but I think it should be a good starting point for you to see what issues you may run into in the future.

body{
    background:black;
    margin:0;
    padding:0;
}
.container{
    position:relative;
    height:100vh;
    min-height:400px;
}
.container-content{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    text-align:center;
}
.container-content img{
    display:block;
}
a.light{
    background-color:white;
    color:black;
    font-size: 30px;
    border-radius: 12px;
    text-decoration:none;
    display:inline-block;
    margin:10px;
}
a.dark{
    background-color:black;
    color:white;
    font-size:30px;
    border-radius:12px;
    text-decoration:none;
    display:inline-block;
    margin:10px;
}
.flowers{
    position:absolute;
    top:20px;
    left:20px;
    width:30%;
}
.barbed{
    position:absolute;
    bottom:20px;
    right:20px;
    width:30%;
}
<div class="container">
    <img class="flowers" src="https://i.imgur.com/rOLqQ48.jpg"/>
    <img class="barbed" src="https://i.imgur.com/SukIIZ6.jpg"/>
    <div class="container-content">
        <img src="https://i.imgur.com/10iUAyi.gif"/>
        <a class="light" href="#">Light</a>
        <a class="dark" href="#">Dark</a>
    </div>
</div>

Upvotes: 1

Related Questions