I have a problem with basic css hover. I don't understand why it's not working.
.container {
position: relative;
}
i {
color: #319a31;
font-size: 70px;
position: absolute;
top: 40%;
}
.col-sm-6:hover i {
color: #ff8533;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
<div class="container">
<div class="col-sm-6 text-center">
<img src="images/electrical-construction.jpg" class="img-responsive img1">
<i class="fas fa-cloud-sun-rain text-center sun1"></i>
</div>
</div>
It's working i guess . Restart your browser or try to run this code in a different browser.
Related
When I include css/bootstrap.min.css it overwrites some elements of my site such as 'a' tags, my .nav bar and font used on site.
Load order:
<link href="css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="custom.css">
<link rel = "stylesheet" href = "styl.css" type = "text/css" />
<link href="css/fontello.css" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Oswald:400,600&display=swap&subset=latin-ext" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
html :
<div class="wrppr">
<div class="header">
<div class="logo">
<img src="LOGO.png" style="vertical-align:middle;height: 250px; width: 250px; float: left">
<span style="vertical-align:middle;"></br>Voodoo Doll Ink Studio</span>
<div style="clear:both"></div>
</div>
</div>
<div class="nav">
<ul>
list here
</div>
<div class="image">
<img src="tatofront.jpg" style="opacity: 0.6"/>
</div>
<div id="opis">
<p></p>
</div>
<div style="clear:both"></div>
<div id="option2">
<a href="#">
<div id="ig">
<i class="icon-instagram"></i>
</div>
<div class="txt">Sprawdź naszego Instagrama!</div>
</a>
<script src="https://snapwidget.com/js/snapwidget.js"></script>
<iframe src="https://snapwidget.com/embed/786091" class="snapwidget-widget" allowtransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:100%; "></iframe>
</div>
<div style="clear:both"></div>
<div id ="option3">
<div class="logobot">
<img src="duda.jpg" style="height: 300px; width: 300px;">
</div>
Tu opis o pierciengu i cennik
</div>
<div style="clear:both"></div>
<div id ="option4">
<div class="logobot">
<img src="duda.jpg" style="height: 300px; width: 300px; float:right;">
</div>
Tu opis o dreadach i dreadlockach
</div>
<div id="option5">
<div class="logobot">
<img src="LOGO.png" style="height: 300px; width: 300px;">
</div>
<div style="clear:both"></div>
<div class="footer">
VOODOO DOLL INK
</div>
</div>
Mostly everything is good though few things are overwritten:
a tag is unedited,
logo changes text alignement,
text in nav goes lower and its not centered
Elements which are overwritten by bootstrap.min.css in custom.css:
a {
color: white;
text-decoration: none;
display: block;
}
.logo
{
font-weight: bold;
vertical-align:middle;
width: 1000px;
font-size: 72px;
text-align: middle;
margin-left:auto;
margin-right:auto;
}
.nav
{
padding: 10px;
width:auto;
border-top: 1px solid rgb(38, 38, 38);
border-bottom: 1px solid rgb(38, 38, 38);
top: 0px;
z-index: 100;
height: 40px;
margin-left: auto;
margin-right: auto;
font-size: 20px;
text-align: center;
background-color:#0a0a0a;
}
Its my first time making responsive site || using bootstrap.
If your CSS files are in public/css, you should write:
<link rel="stylesheet" href="css/custom.css">
When you write the href, the start folder is public. Read more about it here.
Also, you are missing an e on the 3rd line:
<link rel="stylesheet" href="styl.css"> -> <link rel="stylesheet" href="style.css">
Alright, so I have no idea why this isn't working, but take a look. My top right navigation items are terribly screwed up. Everything else works great so far. Any suggestions would be much appreciated. Also, side-note, is there a way for me to have an "a" tag that heads to a directory (Music) and for me to customize the directory page? I'll make a separate question on that in a minute. Also, I would love to have my own player that shows metadata. Anyway, I'll try to stay on topic so you don't have to answer those, just the CSS help. Thanks!
The HTML
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<meta name="description" content="AnonSeeker is a collection of HTML, CSS, and JavaScript files designed for privacy. We offer things such as a browser, bookmarks, proxies, music, a text/code editor, and much more, completely password-protected!">
<link type="text/css" rel="stylesheet" href="css/style.css">
<!-- CSS Stylesheet -->
<link type="image/x-icon" rel="shortcut icon" href="favicon.ico">
<!-- Favicon -->
<title></title>
</head>
<body>
<!-- All Navigation Items -->
<div class="container" id="all-navigation">
<!-- Top Left Navigation Items -->
<div class="container" id="top-left-naviagtion">
<!-- Goto Browser -->
<div class="container goto-browser top-left-navigation-item">
<a href="html/anon-seeker-browser.html" class="goto-browser top-left-navigation-item">
<img src="img/browser.png" alt="browser-img" class="goto-browser top-left-navigation-item">
</a>
</div>
<!-- Goto Bookmarks -->
<div class="container goto-bookmarks top-left-navigation-item">
<a href="html/bookmarks.html" class="goto-bookmarks top-left-navigation-item">
<img src="img/bookmarks.png" alt="bookmarks-img" class="goto-bookmarks top-left-navigation-item">
</a>
</div>
<!-- Goto Music -->
<div class="container goto-music top-left-navigation-item">
<a href="html/music.html" class="goto-music top-left-navigation-item">
<img src="img/music.png" alt="music-img" class="goto-music top-left-navigation-item">
</a>
</div>
</div>
<!-- Top Right Naviagtion Items -->
<div class="conatiner" id="top-right-navigation">
<div class="container goto-ace top-right-navigation-item">
<a href="html/ace-editor.html" class="goto-ace top-right-navigation-item">
<img src="img/ace-editor.png" alt="ace-editor-img" class="goto-ace top-right-navigation-item">
</a>
</div>
</div>
</div>
<!-- Middle Elements -->
<div class="container" id="middle-elements">
<!-- Center AnonSeeker Image -->
<div class="container middle-img">
<img src="img/anonseeker.png" alt="anonseeker.png" class="middle-img">
</div>
<div class="container search-box">
<input type="text" placeholder="Search" class="search-box">
</div>
</div>
</body>
</html>
The CSS
html, body {
margin: 0;
}
#all-navigation {
width: 100%;
height: 100%;
}
#top-right-navigation {
top: 10px;
right: 10px;
padding: 15px;
}
#top-left-navigation {
top: 10px;
left: 10px;
padding: 15px;
}
.top-right-navigation-item {
padding: 5px;
}
.top-left-navigation-item {
padding: 5px;
}
#middle-elements {
text-align: center;
padding: 5px;
}
top-left-navigation spelling wrong in your html so not working your css. Just replace CSS mentioned below code. Hope this will help you
#top-right-navigation {
position:absolute;
top: 10px;
right: 10px;
padding: 15px;
}
#top-left-naviagtion{
position:absolute;
top: 10px;
left: 10px;
padding: 15px;
}
I'm trying to add text on hover over an image inside a row and col-md-3. I want it to change opacity to set ideal while displaying text in centered inside the image.
I have the opacity hover down but I'm struggling with the data-hover class and I have no clue where to place the text I want inside HTML and CSS
I've included a fiddle here with all the work I have accomplished thus far: https://jsfiddle.net/a8u05mw1/
HTML:
<div class="container-fluid">
<div id="wrapper">
<div class="row">
<div class="col-md-3">
<img class="img-responsive" src=https://s-media-cache-ak0.pinimg.com/736x/e6/61/fe/e661fe4b71debff151e6eb3fcd670bbe.jpg>
</div>
<div class="col-md-3">
<img class="img-responsive" src=https://www.roys.co.uk/media/wysiwyg/FASHION/MENSWEAR-AW16-JOULES-COAT.jpg>
</div>
<div class="col-md-3">
<img class="img-responsive" src=https://s-media-cache-ak0.pinimg.com/736x/b1/5e/38/b15e38cd4864c85a52897d906a88710c.jpg>
</div>
<div class="col-md-3">
<img class="img-responsive" src=https://static1.squarespace.com/static/56b6a4bd07eaa0d2d0eddb7f/58678682bebafb6e8b0a4e2a/5867868b893fc0dff9edd97d/1483179664063/Andrew+Belliot-011.jpg?format=500w>
</div>
</div>
</div
</div>
CSS:
#wrapper img {
width: 100%;
transition-duration: 0.8s;
}
.col-md-3 {
padding: 0;
}
#wrapper img:hover {
opacity: 0.8;
transition-duration: 0.8s;
}
Answer 1: Without Bootstrap
jsfiddle answer 1
<div class="container-fluid">
<div id="wrapper">
<div class="row">
<div class="col-md-3">
<div class="img-container">
<img class="img-responsive" src=https://s-media-cache-ak0.pinimg.com/736x/e6/61/fe/e661fe4b71debff151e6eb3fcd670bbe.jpg style="width:100%;">
<div class="img-hover-text centered">Your text here</div>
</div>
</div>
<div class="col-md-3">
<div class="img-container">
<img class="img-responsive" src=https://s-media-cache-ak0.pinimg.com/736x/b1/5e/38/b15e38cd4864c85a52897d906a88710c.jpg>
<div class="img-hover-text centered">Your text here</div>
</div>
</div>
<div class="col-md-3">
<div class="img-container">
<img class="img-responsive" src=https://static1.squarespace.com/static/56b6a4bd07eaa0d2d0eddb7f/58678682bebafb6e8b0a4e2a/5867868b893fc0dff9edd97d/1483179664063/Andrew+Belliot-011.jpg?format=500w>
<div class="img-hover-text centered">Your text here</div>
</div>
</div>
</div>
</div>
</div>
Note: I removed the image which is no more available.
.container {
position: relative;
text-align: center;
color: white;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* original example from question */
.img-responsive:hover + .img-hover-text {
display: block;
}
.img-hover-text:hover {
/* needed for the text to stay visible
when the cursor it just over it.
*/
display: block;
}
.img-hover-text {
display: none;
color: white;
font-size: 20px;
}
Answer 2: With Bootstrap
jsfiddle answer 2
I made a new example inspired with your code, but using tooltips from Booststrap / Popper.js. I used the bootstrap starter template to quickstart the use of Boostrap.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<div class="img-container">
<img class="img-responsive" src=https://s-media-cache-ak0.pinimg.com/736x/e6/61/fe/e661fe4b71debff151e6eb3fcd670bbe.jpg style="width:100%;" data-toggle="tooltip" data-placement="auto" title="This is a Tooltip">
<div class="img-hover-text centered">Your text here</div>
</div>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
Tooltip on top
</button>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
body {
padding: 20px;
}
.img-container {
position: relative;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.img-responsive:hover + .img-hover-text {
display: block;
}
.img-hover-text:hover {
/* needed for the text to stay visible
when the cursor it just over it.
*/
display: block;
}
.img-hover-text {
display: none;
color: white;
font-size: 20px;
}
// Enable tooltip everywhere
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
Explaining Answer 1:
You want two things:
First, center some text over an image.
Then, apply a hover effect on the text so that it only appears when the cursor is hovering the image.
You can get a cool tutorial on how to center text over an image here | w3school.
<div class="container">
<img src="https://s-media-cache-ak0.pinimg.com/736x/e6/61/fe/e661fe4b71debff151e6eb3fcd670bbe.jpg" alt="Snow" style="width:100%;">
<div class="centered">Centered</div>
</div>
.container {
position: relative;
text-align: center;
color: white;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
This will give you the following picture:
Warning: Don't be like me. Don't waste your time on a <p>. Use a <div> for the text directly.
<div class="container">
<img src="https://s-media-cache-ak0.pinimg.com/736x/e6/61/fe/e661fe4b71debff151e6eb3fcd670bbe.jpg" alt="Snow" style="width:100%;">
<p class="centered">Not Centered</p>
</div>
Otherwise you will see this:
Ok, now we have our centered text. Time to make it disappear. Let's go back to your code and modify it.
<div class="col-md-3">
<div class="img-container">
<img class="img-responsive" src=https://s-media-cache-ak0.pinimg.com/736x/e6/61/fe/e661fe4b71debff151e6eb3fcd670bbe.jpg style="width:100%;">
<div class="img-hover-text centered">Your text here</div>
</div>
.img-responsive:hover + .img-hover-text {
display: block;
}
.img-hover-text {
display: none;
color: white;
font-size: 20px;
}
However, if we stop there, something will be wrong. When we hover the cursor right on top of the text area, the text disappear! To correct that, add a last css rule:
/* needed for the text to stay visible
when the cursor it just over it. */
.img-hover-text:hover {
display: block;
}
Explaining answer 2
The idea is not to do the stuff we made by hand, by using a library: namely Popper.js which fortunately is used by Boostrap. We include the tooltip with data-toggle="tooltip" data-placement="auto" title="This is a Tooltip" inside the element we want to display the tooltip on hover. Here inside <img>.
To make is works, we also need to import the necessary library. Don't forget the <script src="https://cdn.jsdelivr.net/npm/popper.js#1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> at the end, just before closing </body> flag.
Done!
Long story short for those looking for a Boostrap answer.
Add a tooltip in the flag you want.
<img src=... data-toggle="tooltip" data-placement="auto" title="This is a Tooltip">
// Enable tooltip everywhere
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
Don't forget to add Popper.js which is needed for the tooltip.
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
I don't have a specific code example, just looking for a general answer.
I know my navbar doesn't resize well in mobile, so is there a good/correct way to fix this? Someone mentioned using CSS #media queries, but I don't know anything about them.
If I do need media queries, what's a good resource to learn about them? Everything else looks fine when I use col-md-(), just not the navbar.
body {
font-family: 'News Cycle', sans-serif;
font-size: 175%;
}
li {
float: right;
text-align: left
}
link {
link
}
a:link {
text-decoration: none;
color: #000000;
}
a:visited {
text-decoration: none;
color: #000000;
}
a:hover {
text-decoration: none;
color: #232323;
}
a:active {
text-decoration: underline;
color: #000000;
}
.main-section {
background-image: url(../img/back.jpg);
background-size: cover;
height: 1000px;
color: white;
}
.navbar {
position: fixed;
width: 100%;
}
.container-fluid {
padding-left: 0px;
}
.main {
padding: 400px 0px 360px 0px;
text-shadow: 1px black;
}
.nav {
float: right;
text-align: left;
font-size: 20px;
letter-spacing: .5px;
}
.headers-bfg {
padding-left: 35px;
}
.navbar-brand {
font-size: 20px;
letter-spacing: .5px;
}
h1 {
font-size: 70px;
}
h3 {
font-size: 35px;
}
.fa-circle {
color: gray;
font-size: .4em;
padding-top: 23px
}
.info-panel {
padding: 50px 50px 50px 50px;
}
.balloon-sect {
background-color: skyblue;
}
.flower-sect {
background-color: #f4f6f9;
}
.gift-sect {
background-color: #ce6640;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Balloons Flowers and Gifts</title>
<link rel="stylesheet" type="text/css" href="css/bfg.css">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=News+Cycle" type="text/css" rel="stylesheet">
<!-- Spent two hours trying to figure out why my customized CSS wouldn't load in, then realized that I put it in front of bootstrap... -->
<script src="https://use.fontawesome.com/7a267289ed.js"></script>
<link rel="stylesheet" type="text/css" href="css/bfg.css">
<link rel="icon" href="img/icon.png">
</head>
<body>
<div class="container-fluid main-section">
<nav class=" navbar navbar-default">
<div class="container-fluid col-md-12 col-xs-12">
<div class="headers-bfg">
<div class="navbar-header">
<a class="navbar-brand" href="#">BFG</a>
</div>
<div class="navbar-header">
<a class="navbar-brand col-xs-2" href="#"><i class="fa fa-heart" aria-hidden="true"></i></a>
</div>
</div>
<ul class=" nav navbar-nav ">
<li>Balloons</li>
<li><i class="fa fa-small fa-circle" aria-hidden="true"></i></li>
<li>Flowers</li>
<li><i class="fa fa-circle" aria-hidden="true"></i></li>
<li>Gifts</li>
<li><i class="fa fa-circle" aria-hidden="true"></i></li>
<li>Hours</li>
</ul>
</div>
</nav>
<div class="">
<div class="row">
<div class="col-md-12 col-xs-12 text-center main">
<h1>Balloons Flowers and Gifts</h1>
<h3>The perfect way to brighten someone's day, and make them smile!</h3>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-12 col-xs-12 text-center info-panel balloon-sect">
<a href="#">
<h2>Balloons</h2>
</a>
<p> Our hand crafted balloon creations are a hit at every! We have a wide variety of colored and themed balloons ranging from Pokemon GO to a life sized stormtrooper! We also do balloon things for events!</p>
</div>
<div class="col-md-12 col-xs-12 text-center info-panel flower-sect">
<a href="#">
<h2>Flowers</h2>
</a>
<p>Our Flowers are perfect for any occasion! We have a wide variety all year round, just be sure to call for availability! We can do prom flowers, funeral arrangements, and everything in between!</p>
</div>
<div class="col-md-12 col-xs-12 text-center info-panel gift-sect">
<a href="#">
<h2>Gifts</h2>
</a>
</div>
<div class="col-md-12 col-xs-12 text-center">
<a href="#">
<h2>Hours</h2>
</a>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
html css twitter-bootstrap
You can learn more about CSS #media queries here:
templatemonster.com/blog/css-media-queries...
It explains about media queries and how to make it work on other devices, and it includes an IE 7 and IE 8 fallback mechanism.
IF you want to learn Bootstrap, you can use bootstrap GUI designing tool:
codepley.com/go/bp/new
I do two things. (When the first one not working properly, I'll go to the second method.)
First Method.
I search for common mobile device sizes and used them to adjust the navbar according to it. Common sizes are 320px, 375px, 480px, 640px, 768px, 1024px.
#media (max-width: 600px) {
Your code here
}
Second Method
If my common sizes are not correctly working I tried to reduce the sizes one by one and try to get the absolutely correct matches that may not destroy the website.
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.
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">
<img src="Instagram.png">
<img src="Twitter-icon.png">
<img src="Facebook-icon.png">
</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;
}
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..
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.