CODEWITHSUNDEEP
htmlcss
WhiteOne
WhiteOne

Reputation: 897

How to make images always relative to a div using CSS

I have a problem with login form, when browser window got smaller images that are appearing in the head of the login form stop appear correctly. correct view: http://im87.gulfup.com/bYOI29.png

when I change browser window size: http://im59.gulfup.com/95cyji.jpg

html code:

<html lang="en">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="login panel">
    <meta name="author" content="WhiteOne">

    <title>Login</title>

    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

            <!-- Custom CSS -->
    <link href="css/sb-admin-2.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="font-awesome-4.2.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!-- icon location -->
    <link rel="stylesheet" type="text/css" href="styles/icon.css" />
    <!-- Set Full Background -->
    <link rel="stylesheet" type="text/css" href="styles/background.css" />
    <link rel="stylesheet" type="text/css" href="styles/icon-login.css" />

    </head>
<body>

    <div style="margin: 100px auto 0 auto;">
    <div class="container">
        <div class="row">
        <!-- login box start -->
            <div class="col-md-4 col-md-offset-4"  id="loginbox">

                            <div class="login-panel panel panel-default">

                    <div class="panel-heading">
                    <img src="icons/Instagram.png" id="instagram-login">
                    <img src="icons/Twitter-icon.png" id="twitter-login">
                    <img src="icons/Facebook-icon.png" id="Fb-login">

                    <h3 class="panel-title" >Please Sign In</h3>

                    </div>

                    <div class="panel-body">
                        <form role="form" method="post" action="">
                            <fieldset>
                                <div class="form-group">
                    <span class=usericon>            
                <i class="fa fa-user"></i>
                </span>
                                 <input class="form-control" id="username" placeholder="Username" name="username" type="text" autofocus required>

                </div>

                                                                <div class="form-group">
                                                                    <span class="passwordicon">
                                <i class="fa fa-lock"></i>
                                </span>
                                <input class="form-control" id="password" placeholder="Password" name="password" type="password" value="" required>
                                                              </div>

                                <input type="submit" name="Login" value="login" class="btn btn-lg btn-success btn-block" id="login">

                                                            </fieldset>
                        </form>

                    </div>
                </div>

            </div><!-- End of login box -->
</div><!-- end of row class -->
</div><!-- end of container -->

</body>

</html>

css code for social icon position: icon-login.css

    #instagram-login {
    left: 250px;
    opacity: 0.95;
    position: absolute;
    top: -16px;
}
#instagram-login:hover {
    opacity: 1;
}
#twitter-login {
    left: 195px;
    opacity: 0.925;
    position: absolute;
    top: -12px;
}
#twitter-login:hover {
    opacity: 1;
}
#Fb-login {
    left: 140px;
    opacity: 0.92;
    position: absolute;
    top: -12px;
}
#Fb-login:hover {
    opacity: 1;
}

.panel-heading {

position: relative;

}

I tried relative to panel-heading instead of fixed, but it doesn't work also.

Upvotes: 0

Views: 971

Answers (3)

shadeed9
shadeed9

Reputation: 1826

The first thing you should do is to warp the images in a links, then wrap all the links in a div with class social

<div class="social">
        <a href="#"><img src="Instagram.png"></a>
        <a href="#"><img src="Twitter-icon.png"></a>
        <a href="#"><img src="Facebook-icon.png"></a>
</div>

to position the icons absolutely, you should give the parent div (#loginbox) the following:

#loginbox {
  position: relative;
}

Then, you can apply these styles to the social div

.social img {
    width: 50px;
}

.social a {
    display: inline-block;
    float: right;
}

.social {
    position: absolute;
    right: 13px;
    top: 0;
}

Upvotes: 1

chdltest
chdltest

Reputation: 873

First, put the title before the images and arrange your images properly.

<div class="panel-heading">
<h3 class="panel-title" >Please Sign In</h3>
<img src="icons/Facebook-icon.png" id="Fb-login">
<img src="icons/Twitter-icon.png" id="twitter-login">
<img src="icons/Instagram.png" id="instagram-login">
</div>

Next, apply the following styles:

.panel-heading { 
width: 400px; // make sure this width is big enough to contain the title and the flags
}

.panel-title { 
display: inline-block;
width: 90px; // adjust the width so it's proper, I'm making rough guesses based on what I see
}

#Fb-login { 
position: relative;
display: inline-block;
width: 80px; // guessing the size again
height: 110px; // still guessing
top: -20px;
}

#twitter-login { 
position: relative;
display: inline-block;
width: 80px; // guessing the size again
height: 110px; // still guessing
top: -20px;
left: -50px;
}

#instagram-login { 
position: relative;
display: inline-block;
width: 80px; // guessing the size again
height: 110px; // still guessing
top: -20px;
left: -50px;
}

This is a rough guess based on your damn images.

Upvotes: 0

Ignas Damunskis
Ignas Damunskis

Reputation: 1504

Put position: relative; on your #loginbox and it will keep the images inside loginbox and not out of it.

Then try to manage smaller left right top bottom parameters, because for #loginbox these you defined will not fit. The ones you defined is for .container since it has position defined..

Upvotes: 0

Related Questions