I wrote a responsive footer as shown in screen shot:
The text HELP and back icon aren't floating to left, but are struck in middle. How can I move it to left?
Here is the code:
HTML code:
<div id = "footer">
<span id = "logout" class="pull-right">
<span id = "logoutIcon"></span>
<span id = "logoutText">
LOGOUT
</span>
</span>
<span id = "logout1" class="pull-right">
<span id = "logoutIcon1"></span>
<span id = "logoutText1">
HELP
</span>
</span>
</div>
CSS code::
#footer {
background-color: #125e9a;
bottom: 0;
height: 5%;
position: absolute;
width: 100%;
}
#logout1 {
display: block;
height: 100%;
margin-left: 3%;
padding: 2.5%;
width: 30%;
}
#logoutIcon1 {
background-image: url("../JunosImages/mob/back-arrow_normal_tab.png");
background-repeat: no-repeat;
background-size: 100% 100%;
display: block;
float: left;
height: 14px;
margin-top: 2%;
width: 10px;
}
#logoutText1 {
color: #fff;
float: left;
font-size: 14px;
font-weight: 600;
margin-left: 7%;
}
You pulled right both buttons. Just replace pull-right class with pull-left in the second button and swap these buttons.
Also don’t use ID selectors in CSS.
are u use bootstrap so please check the below ans...
class="pull-left";
i would do it like this:
<!DOCTYPE html>
<html>
<head>
<style>
.footer {
background-color: #125e9a;
bottom: 0;
height: 5%;
position: absolute;
width: 100%;
}
.footer-links{
display: block;
float:left;
margin-left: 3%;
padding: 0.5%;
width: 98px;
}
.arrow{
background-color: green;
height: 14px;
margin-top: 2%;
width: 10px;
}
.footer .button-text{
color: #fff;
font-size: 14px;
font-weight: 600;
margin-left: 7%;
}
.footer-links-wrapper{
width: 215px;
}
</style>
</head>
<body>
<div id="footer" class="footer">
<div class="footer-links-wrapper">
<span id="help" class="pull-left footer-links">
<span id="left-arrow" class="arrow left-arrow"> << </span>
<span id="help-text" class="button-text">
HELP
</span>
</span>
<span id="logout" class="pull-right footer-links">
<span id="logout-text" class="button-text">
LOGOUT
</span>
<span id="right-arrow" class="arrow right-arrow"> >> </span>
</span>
</div>
</div>
</body>
</html>
always better to write styles in classes and not by id
use "=" in attributes without spaces
name of classes and ids have to explain what you do (one way of comments)
in your code missing other styles, for look what you did in local browser
Related
I am fairly new to coding. I am working on recreating the Google home page for The Odin Project and I cannot seem to get the images to sit right in the search bar.
Thus far all of my code and formatting has been done in HTML. I was struggling how to do CSS and push it via Git. anyway...
I got the magnifying glass to sit in the proper spot, but when I went to add the microphone image, it overlaps the magnifying glass. The code is as follows:
<!DOCTYPE html>
<html lang="en">
<style>
<!--FONTS-->
#import url('https://fonts.googleapis.com/css2?family=Manrope&display=swap');
body{
overflow-x: hidden !important;
max-width: 90%;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 350px;
}
button {
width: 127px;
height: 36px;
text-align: center;
border: none;
background-color: #f2f2f2;
border-radius: 5px;
font-size: 13px;
color: #777;
font-family: 'Manrope', sans-serif;
}
input {
border-width: 3px;
border-color: #f2f2f2;
display: block;
margin-left: auto;
margin-right: auto;
width: 400px;
height: 37px;
text-align: center;
font-size: 20px;
border-radius: 50px;
border-style: solid;
font-family: 'Manrope', sans-serif;
}
.btn-toolbar {
display: flex;
flex-direction: row;
justify-content: center;
}
.btn-toolbar button:hover {
background-color: #88888888;
}
ul {
background-color: #f2f2f2;
float: left;
width: 100%;
display: inline-block;
}
a {
color: #777;
display: inline-block;
font-size: 15px;
text-decoration: none;
}
a:hover {
color: green;
}
.column {
float: left;
}
.footer{
position:absolute;
bottom: 0;
width: 100%;
font-family: 'Manrope', sans-serif;
}
.header{
position:absolute;
top: 0;
width: 100%;
font-family: 'Manrope', sans-serif;
}
h1{
display: flex;
justify-content: center;
align-items: center;
}
.fake-input{
position: relative;
width: 350px;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
}
.fake-input input{
background-color: #fff;
display: block;
width:100%;
box-sizing: border-box;
}
.fake-input img{
position: absolute;
top: 11px;
left: 10px;
}
</style>
<div class="row">
<header id="header" class="header">
<ul style="list-style-type:none;">
<li>
<a class="column" href="https://www.google.com">About</a>
<a class="column" href="https://www.google.com">Store</a>
<a class="column" href="https://www.google.com">images</a>
<a class="column" href="https://www.google.com">gmail</a>
<a class="column" href="https://www.google.com">squares</a>
<a class="column" href="https://www.google.com">circle</a>
</li>
</ul>
</header>
<body>
</div>
<!-- Google Logo -->
<div>
<h1><img style="padding-bottom: 20px; padding-top: 60px;" class="center" id="google-image" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
</h1>
</div>
<div>
<!--Google search bar -->
<!-- Search input text -->
<div class="fake-input">
<input type="text" placeholder="Search Google or type URL" />
<img id="msgnify" src="https://cdn.pixabay.com/photo/2017/01/13/01/22/magnifying-glass-1976105_1280.png" width=15 />
<img id="mic" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Google_mic.svg/833px-Google_mic.svg.png" width=15>
</div>
<br>
<!-- Search Buttons -->
<div style="padding-top: 20px;" class="btn-toolbar">
<button>Google Search</button>
<button>I'm Feeling Lucky</button>
</div>
</div>
<br>
</body>
<!-- footer contains link to the respective locations -->
<div class="row">
<footer id="footer" class="footer">
<ul style="list-style-type:none;">
<li>
<a class="column" href="https://www.google.com">Advertising</a>
<a class="column" href="https://www.google.com">Business</a>
<a class="column" href="https://www.google.com">How Search Works</a>
<a class="column" href="https://www.google.com">Privacy</a>
<a class="column" href="https://www.google.com">Terms</a>
<a class="column" href="https://www.google.com">Settings</a>
</li>
</ul>
</footer>
</div>
</html>
I tried changing the class, giving it an id, setting the position to relative and margin right as auto, but i cannot seem to get it to move over to the right side of the search bar.
Additionally, the buttons below the search bar are stuck together. I had each button as its own, but the moment I added them to the same div they have become ajoined and when I try to separate them, the only way i can get them on them aligned is by styling them to the same row. Margin does not help split them apart, I even tried to get them in separate columns no dice. I am really frustrated as i made it pretty far in a day just using HTML. I would like to keep it HTML until I learn how to push CSS to GitHub via Git.
Thank you in advance!!!
You've set the fake-input to position: relative and the image to position: absolute which is already correct, but for the img#mic you need to set it's position right and not left to make it appear in the right side of the fake-input, so I add some style like this
.fake-input img#mic{
position: absolute;
left: unset;
right: 10px;
}
And for the button, it's working if you add the margin for the button like in the updated snippet below
<!DOCTYPE html>
<html lang="en">
<style>
<!--FONTS-->
#import url('https://fonts.googleapis.com/css2?family=Manrope&display=swap');
body{
overflow-x: hidden !important;
max-width: 90%;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 350px;
}
button {
width: 127px;
height: 36px;
text-align: center;
border: none;
background-color: #f2f2f2;
border-radius: 5px;
font-size: 13px;
color: #777;
font-family: 'Manrope', sans-serif;
margin: 10px;
}
input {
border-width: 3px;
border-color: #f2f2f2;
display: block;
margin-left: auto;
margin-right: auto;
width: 400px;
height: 37px;
text-align: center;
font-size: 20px;
border-radius: 50px;
border-style: solid;
font-family: 'Manrope', sans-serif;
}
.btn-toolbar {
display: flex;
flex-direction: row;
justify-content: center;
}
.btn-toolbar button:hover {
background-color: #88888888;
}
ul {
background-color: #f2f2f2;
float: left;
width: 100%;
display: inline-block;
}
a {
color: #777;
display: inline-block;
font-size: 15px;
text-decoration: none;
}
a:hover {
color: green;
}
.column {
float: left;
}
.footer{
position:absolute;
bottom: 0;
width: 100%;
font-family: 'Manrope', sans-serif;
}
.header{
position:absolute;
top: 0;
width: 100%;
font-family: 'Manrope', sans-serif;
}
h1{
display: flex;
justify-content: center;
align-items: center;
}
.fake-input{
position: relative;
width: 350px;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
}
.fake-input input{
background-color: #fff;
display: block;
width:100%;
box-sizing: border-box;
}
.fake-input img{
position: absolute;
top: 11px;
left: 10px;
}
.fake-input img#mic{
position: absolute;
left: unset;
right: 10px;
}
</style>
<div class="row">
<header id="header" class="header">
<ul style="list-style-type:none;">
<li>
<a class="column" href="https://www.google.com">About</a>
<a class="column" href="https://www.google.com">Store</a>
<a class="column" href="https://www.google.com">images</a>
<a class="column" href="https://www.google.com">gmail</a>
<a class="column" href="https://www.google.com">squares</a>
<a class="column" href="https://www.google.com">circle</a>
</li>
</ul>
</header>
<body>
</div>
<!-- Google Logo -->
<div>
<h1><img style="padding-bottom: 20px; padding-top: 60px;" class="center" id="google-image" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
</h1>
</div>
<div>
<!--Google search bar -->
<!-- Search input text -->
<div class="fake-input">
<input type="text" placeholder="Search Google or type URL" />
<img id="msgnify" src="https://cdn.pixabay.com/photo/2017/01/13/01/22/magnifying-glass-1976105_1280.png" width=15 />
<img id="mic" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Google_mic.svg/833px-Google_mic.svg.png" width=15>
</div>
<br>
<!-- Search Buttons -->
<div style="padding-top: 20px;" class="btn-toolbar">
<button>Google Search</button>
<button>I'm Feeling Lucky</button>
</div>
</div>
<br>
</body>
<!-- footer contains link to the respective locations -->
<div class="row">
<footer id="footer" class="footer">
<ul style="list-style-type:none;">
<li>
<a class="column" href="https://www.google.com">Advertising</a>
<a class="column" href="https://www.google.com">Business</a>
<a class="column" href="https://www.google.com">How Search Works</a>
<a class="column" href="https://www.google.com">Privacy</a>
<a class="column" href="https://www.google.com">Terms</a>
<a class="column" href="https://www.google.com">Settings</a>
</li>
</ul>
</footer>
</div>
</html>
you should give position :relative to class (fake-input);
then give position :absolute to (search.png or mic.
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 2 years ago.
I'm trying to align multiple inline-blocks at the top of my page, but for reasons that are baffling to me, it's not working. The CSS could hardly be cleaner or less, but the top isn't aligning properly. I thought it could be a floating issue, but even after applying a clear:both it doesn't fix this.
Please see the program here:
https://jsfiddle.net/yezwocta/
#page {
text-align: center;
}
.article {
width: 350px;
height: 150px;
margin: 5px;
display: inline-block;
background-color: #fafafa;
}
.article img {
float: left;
width: 150px;
height: 130px;
margin-top: 10px;
}
.content {
position: relative;
display: inline-block;
width: 170px;
height: 130px;
margin-top: 10px;
margin-left: 10px;
text-align: left;
}
.title {
font-size: 1.2rem;
}
.source {
font-size: 0.8rem;
position: absolute;
bottom: 0;
left: 0;
}
<div id="page">
<div class="article">
<a href="https://cnn.com" target="_blank">
<img alt="News" src="https://loremflickr.com/150/130/news?random=1">
<div class="content">
<span class="title">Cable News Network</span>
<span class="source">CNN</span>
</div>
</a>
</div>
<div class="article">
<a href="https://www.mozilla.org/en-US/firefox/new/" target="_blank">
<img alt="Firefox browser" src="https://loremflickr.com/150/130/browser?random=2">
<div class="content">
<span class="title">Get the Latest Firefox Browser</span>
<span class="source">Mozilla</span>
</div>
</a>
</div>
<div class="article">
<a href="https://www.kproxy.com/" target="_blank">
<img alt="kproxy" src="https://loremflickr.com/150/130/proxy?random=3">
<div class="content">
<span class="title">Surf the web anonymously and bypass filters</span>
<span class="source">kproxy</span>
</div>
</a>
</div>
</div>
Add vertical-align: top; to your .article CSS (the default is baseline):
#page {
text-align: center;
}
.article {
width: 350px;
height: 150px;
margin: 5px;
display: inline-block;
background-color: #fafafa;
vertical-align:top;
}
.article img {
float: left;
width: 150px;
height: 130px;
margin-top: 10px;
}
.content {
position: relative;
display: inline-block;
width: 170px;
height: 130px;
margin-top: 10px;
margin-left: 10px;
text-align: left;
}
.title {
font-size: 1.2rem;
}
.source {
font-size: 0.8rem;
position: absolute;
bottom: 0;
left: 0;
}
<div id="page">
<div class="article">
<a href="https://cnn.com" target="_blank">
<img alt="News" src="https://loremflickr.com/150/130/news?random=1">
<div class="content">
<span class="title">Cable News Network</span>
<span class="source">CNN</span>
</div>
</a>
</div>
<div class="article">
<a href="https://www.mozilla.org/en-US/firefox/new/" target="_blank">
<img alt="Firefox browser" src="https://loremflickr.com/150/130/browser?random=2">
<div class="content">
<span class="title">Get the Latest Firefox Browser</span>
<span class="source">Mozilla</span>
</div>
</a>
</div>
<div class="article">
<a href="https://www.kproxy.com/" target="_blank">
<img alt="kproxy" src="https://loremflickr.com/150/130/proxy?random=3">
<div class="content">
<span class="title">Surf the web anonymously and bypass filters</span>
<span class="source">kproxy</span>
</div>
</a>
</div>
</div>
I am generating a coupon type display by html and css without creating and storing the real image on server to save space.
Plan is to display it and get it printed out when user wants to print. I have managed to create the layout by HTML and css and it displays as follows,
But when the Print Now button is clicked there are so much blank space created towards the left side, please see the image below,
I can not figure out what might be the issue here, I am attaching the HTML and CSS below.
HTML
<div class="print-coupon-text">
<div class="pct-heading">
<img src="***image-source***" alt="Created by JAiCOUPONS" />
</div>
<div class="pct-col pct-col-1">
<div class="pct-store-logo">
<img src="***image-source***" alt="Coupon Store" />
</div>
<div class="pct-store-desc">
<span>http://abcdexample.com</span>
<span>#2333, 1st Comfort Road</span>
<span>Redint TF 78999</span>
<span>210 Price Fork Road</span>
<span>Redint TF 78999</span>
<span>(333) 323-4444</span>
</div>
</div>
<div class="pct-col pct-col-2">
<span class="pct-offer-1">$50</span>
<span class="pct-offer-2">Off</span>
<span class="pct-offer-3"> Free Icecream </span>
</div>
<div class="pct-col pct-col-3">
<span class="pct-title">Buy 1 Dinner</span>
<span class="pct-title pct-title-end">And get the 2nd one Free</span>
<span class="pct-desc">Dine In, Carryout Only</span>
<span class="pct-desc">Excludes buffet with this coupon</span>
<span class="pct-desc">Not Valid with other Offers</span>
<span class="pct-desc">Expires : 15th Jan</span>
</div>
<div class="pct-footer">
<span class="pct-footer-1">Contact JAiCOUPONS # (972) 301-7898</span>
<span class="pct-footer-2">Coupon ID **** | ©JAiCOUPONS.com</span>
</div>
</div>
CSS
.print-coupon-text {
position: relative;
width: 100%;
float: left;
margin-bottom: 10px;
padding: 10px;
border: 1px dashed #000;
border-radius: 10px;
font-size: 10px;
text-align: left;
}
.pct-col {
width: 30%;
float: left;
margin: 0 8px;
}
.pct-store-desc span, .pct-footer span, .pct-desc {
display: block;
}
.pct-col.pct-col-2 {
padding-left: 5px;
padding-top: 85px;
}
.pct-col.pct-col-3 {
padding-top: 40px;
}
.pct-offer-1 {
font-size: 60px;
font-weight: bold;
}
.pct-offer-2 {
font-weight: bold;
}
.pct-offer-3 {
display: block;
}
.pct-title {
display: block;
font-size: 13px;
}
.pct-title-end {
border-bottom: 1px dotted;
padding-bottom: 5px;
}
.pct-store-logo img {
width: 150px;
height: 85px;
}
.pct-heading {
position: absolute;
top: 0px;
left: 28%;
}
.pct-heading img {
width: 90%;
}
.pct-footer-1 {
position: absolute;
bottom: 16px;
right: 6px;
}
.pct-footer-2 {
position: absolute;
bottom: 0px;
right: 6px;
}
#media print {
body * {
visibility: hidden;
}
.print-coupon-text, .print-coupon-text * {
visibility: visible;
}
.print-coupon-text {
position: absolute;
left: 0;
top: 0;
}
}
Any help is appreciated.
UPDATE
Initial display is coming on the pop up.
I think you should give fixed width to your div.print-coupon-text
.print-coupon-text{
width: 700px; // or greater/less
}
Hi try displaying the coupon in its own page, you won't have this issue in that case. check screenshots below.
BTW, i was not able to replicate your issue, working fine for me with your code.
EDIT :: Tried using Bootstrap Popup as well, working fine.
.print-coupon-text {
position: relative;
width: 100%;
float: left;
margin-bottom: 10px;
padding: 10px;
border: 1px dashed #000;
border-radius: 10px;
font-size: 10px;
text-align: left;
}
.pct-col {
width: 30%;
float: left;
margin: 0 8px;
}
.pct-store-desc span,
.pct-footer span,
.pct-desc {
display: block;
}
.pct-col.pct-col-2 {
padding-left: 5px;
padding-top: 85px;
}
.pct-col.pct-col-3 {
padding-top: 40px;
}
.pct-offer-1 {
font-size: 60px;
font-weight: bold;
}
.pct-offer-2 {
font-weight: bold;
}
.pct-offer-3 {
display: block;
}
.pct-title {
display: block;
font-size: 13px;
}
.pct-title-end {
border-bottom: 1px dotted;
padding-bottom: 5px;
}
.pct-store-logo img {
width: 150px;
height: 85px;
}
.pct-heading {
position: absolute;
top: 0px;
left: 28%;
}
.pct-heading img {
width: 90%;
}
.pct-footer-1 {
position: absolute;
bottom: 16px;
right: 6px;
}
.pct-footer-2 {
position: absolute;
bottom: 0px;
right: 6px;
}
#media print {
body * {
visibility: hidden;
}
.print-coupon-text,
.print-coupon-text * {
visibility: visible;
}
.print-coupon-text {
position: absolute;
left: 0;
top: 0;
}
}
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Popup</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-body">
<div class="print-coupon-text">
<div class="pct-heading">
<img src="***image-source***" alt="Created by JAiCOUPONS" />
</div>
<div class="pct-col pct-col-1">
<div class="pct-store-logo">
<img src="***image-source***" alt="Coupon Store" />
</div>
<div class="pct-store-desc">
<span>http://abcdexample.com</span>
<span>#2333, 1st Comfort Road</span>
<span>Redint TF 78999</span>
<span>210 Price Fork Road</span>
<span>Redint TF 78999</span>
<span>(333) 323-4444</span>
</div>
</div>
<div class="pct-col pct-col-2">
<span class="pct-offer-1">$50</span>
<span class="pct-offer-2">Off</span>
<span class="pct-offer-3"> Free Icecream </span>
</div>
<div class="pct-col pct-col-3">
<span class="pct-title">Buy 1 Dinner</span>
<span class="pct-title pct-title-end">And get the 2nd one Free</span>
<span class="pct-desc">Dine In, Carryout Only</span>
<span class="pct-desc">Excludes buffet with this coupon</span>
<span class="pct-desc">Not Valid with other Offers</span>
<span class="pct-desc">Expires : 15th Jan</span>
</div>
<div class="pct-footer">
<span class="pct-footer-1">Contact JAiCOUPONS # (972) 301-7898</span>
<span class="pct-footer-2">Coupon ID **** | ©JAiCOUPONS.com</span>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I'm building a panel for a front end system, but I got an annoying problem.
I am not that good with CSS. This is what happens:
This is my HTML code:
#main #myTopMenu #iconBar {
margin-right: 10px;
float: right;
}
#main #myTopMenu #iconBar a {
display: inline-block;
margin-left: 30px;
color: white;
}
#main #myTopMenu #iconBar .optionsContainer {
line-height: 55px;
}
#main #myTopMenu #iconBar .optionsContainer img {
vertical-align: middle;
position: relative;
}
#main #myTopMenu #iconBar .valueWithOption {
background-color: #59a632;
height: 25px;
width: 35px;
position: absolute;
top: 10px;
margin-left: 27px;
border-radius: 4px;
}
#main #myTopMenu #iconBar .valueWithOption span {
background-color: blue;
width: 100%;
height: 100%;
}
<div id="iconBar">
<a href="#">
<div class="optionsContainer">
<img src="images/icons/message.png">
<div class="valueWithOption">
<span>5</span>
</div>
</div>
</a>
<a href="#">
<div class="optionsContainer"><img src="images/icons/bell.png">
<div class="valueWithOption"><span>5</span></div>
</div>
</a>
<a href="#">
<div class="optionsContainer"><img src="images/icons/settings.png"></div>
</a>
</div>
Also do you guys have tips to make it so that the width of the green box expands so that the value in the green box always fits properly.
I made some significant changes to your codes for expected results. See snippet
#iconBar {
margin-right: 10px;
float: right;
}
#iconBar a {
display: inline-block;
margin-left: 30px;
color: white;
}
#iconBar .optionsContainer img {
vertical-align: middle;
position: relative;
}
#iconBar .valueWithOption {
background-color: #59a632;
padding: 5px;
top: 10px;
border-radius: 4px;
position: relative;
top: -10px;
display:inline-block
}
#iconBar .valueWithOption span {
background-color: blue;
width: 100%;
height: 100%;
}
<br>
<br>
<div id="iconBar">
<a href="#">
<div class="optionsContainer">
<img src="images/icons/message.png">
<div class="valueWithOption">
<span>5</span>
</div>
</div>
</a>
<a href="#">
<div class="optionsContainer"><img src="images/icons/bell.png">
<div class="valueWithOption"><span>500</span></div>
</div>
</a>
<a href="#">
<div class="optionsContainer"><img src="images/icons/settings.png"></div>
</a>
</div>
EDIT
I've added this css to span.label using this fiddle
span.label{
width:100px; color:#FFFFFF;
background-color:#F43B05;
float:right; padding:3px;
position:absolute; top:50px; left:5px;
}
And I've got this:
I need to put a label on an image using bootstrap.
I have this image with a label:
And here is the code for it:
<span class="label label-success">4</span>
<input class="img1" type="image" style="width:60px;height:60px" src="../images/molar_left_t.png" id="oone" name="one" alt="button"/>
<div title="3rd Molar - Upper Rigth Jaw" id="div_one" class="collapse"><?php echo $resTeeth['one'] ?>
</div>
But this is not what I want. What I want is to add this number 4 green label on top of the image and not on the side of it.
I tried this:
<span class="label label-danger">4
<input class="img1" type="image" style="width:60px;height:60px" src="../images/molar_left_t.png" id="oone" name="one" alt="button"/>
<div title="3rd Molar - Upper Rigth Jaw" id="div_one" class="collapse"><?php echo $resTeeth['one'] ?>
</div>
</span>
And I've got this:
I am sure this will be your answer.
Thanks
/* CSS used here will be applied after bootstrap.css */
.badge-notify{
background-color:red !important;
position:relative;
top: -20px;
left: -35px;
}
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
<button class="btn btn-default btn-lg btn-link" style="font-size:36px;">
<span class="glyphicon glyphicon-comment"></span>
</button>
<span class="badge badge-notify">3</span>
</div>
Just use float:left for span.label and then set margins to set the position of the label element.
try this:
<div class="container">
<img src="" />
<span class="lbl">something</span>
</div>
.container{
position:relative;
}
.container img, .container .lbl{
position:absolute;
top:0px;
left:0px;
}
I've made two examples here, like the ones I suggested in the comments.
JSFiddle
div
{
position: relative;
width: 300px;
height: 300px;
}
span
{
position: absolute;
background: red;
color: white;
height: 60px;
width: 60px;
text-align: center;
font-family: Tahoma, sans-serif;
font-size: 40px;
line-height: 55px;
border-radius: 10px;
bottom: 0;
right: 0;
}
.icon
{
position: relative;
}
.icon:after
{
content:"4";
position: absolute;
display: block;
background: red;
color: white;
height: 60px;
width: 60px;
text-align: center;
font-family: Tahoma, sans-serif;
font-size: 40px;
line-height: 55px;
border-radius: 10px;
bottom: 0;
right: 0;
}