Issue
Im developing a website and I want to put a banner fixed at the bottom of the page with its own close button in order to people can close the ads.
I achieve the whole apparence of the div with css but its impossible to me center it, I try text-align: center, margin-left: auto, margin-right: auto, margin: 0 auto, fixing width to 300px and many other options and nothing works!!
This is my code CSS of the banner:
#fragment {
font-size: 12px;
font-family: tahoma;
/* border: 1px solid #ccc;*/
color: #555;
display: block;
/* padding: 10px; */
box-sizing: border-box;
text-decoration: none;
min-height: 50px;
width: 300px;
overflow: hidden;
position: fixed;
bottom: 0;
margin-left: auto;
margin-right: auto;
}
#fragment:hover {
box-shadow: 2px 2px 5px rgba(0, 0, 0, .2);
}
#close {
float: right;
display: inline-block;
padding: 2px 5px;
background: #ccc;
}
#close:hover {
float: right;
display: inline-block;
padding: 2px 5px;
background: #ccc;
color: #fff;
}<div id="fragment">
<span id="close" onclick="myFunction()">x</span>
<!--THE X ICON TO CLOSE THE BANNER -->
<!-- the script code of the ads provided by some company -->
</div>Solution
I have added div#fragment inside a div which has 100% width.And within that div, div#fragment is centered aligned. I have made some modifications in CSS. Please check the code snippet as follows:
/* Styles go here */
#fragment {
font-size: 12px;
font-family: tahoma;
border: 1px solid #ccc;
color: #555;
display: block;
box-sizing: border-box;
text-decoration: none;
min-height: 50px;
width: 300px;
overflow: hidden;
margin-left: auto;
margin-right: auto;
}
#fragment:hover {
box-shadow: 2px 2px 5px rgba(0, 0, 0, .2);
}
.row {
text-align: center;
position: fixed;
bottom: 0;
min-width: 100%;
}
.item-right {
text-align: right;
}
#close {
display: inline-block;
padding: 2px 5px;
background: #ccc;
}
#close:hover {
display: inline-block;
padding: 2px 5px;
background: #ccc;
color: #fff;
cursor: pointer;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="row">
<div id="fragment" class="item-right">
<span id="close" onclick="this.parentElement.style.display='none';">x</span>
</div>
</div>
</body>
</html>Plunker link for the same : https://plnkr.co/edit/57JYKVe5r459mmQsRQk5?p=preview
Answered By - Pooja Kedar
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.