I have a back-button image as div element within another. The text in #program_title is dynamically changing and so is its width. I would like to prevent the overlap of the back-button image with the text, but have been unsuccessful.
So far - I have tried floating the image left or right, styling both to display: inline-block, changing the margins, and using <span> instead of <div>. If I change the position of #program_title to relative, this somehow interferes with centering the element. I think there is something simple that I am missing. Any suggestions to resolve this issue?
#map {
position:absolute;
left:25%;
top:0;
bottom:0;
width: 75%;
}
#program_title{
position: absolute;
z-index: 20202020;
background: rgba(12, 12, 12, 0.99);
color: #fff;
font-weight: 600;
font-size: 18px;
display: inline-block;
left: 50%;
width: auto;
top: 1%;
text-align: center;
padding: 5px 10px;
border-radius: 10px;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
}
#go-back {
content:url('./back-button.svg');
position: absolute;
color: #fff;
border-radius: 5px;
left: 1%;
height: 20px;
width: 20px;
opacity: 0.9;
float: left;
display:inline-block;
}
<div id='map'>
<div id='program_title'>
<div id ='go-back'></div>
<span>TITLE</span>
</div>
</div>
You should not keep the position absolute in #go-back as due to this particular attribute the back button has an absolute position irrespective of any other element on or around it. This would seem like the other elements are overlapping the back button(in your case the title), but actually if you scroll down the page(i.e. if your page is large enough to be scrolled down) you will notice that the position of the back button does not change. So change it to relative or remove the position attribute in style.
You have lots of code there that are NOT required! If the problem is with the image then a simple float would do the job. and it doesn't matter if the parent's div position is absolute or not! here I make a fiddle.
and all the CSS you need. and of course some of it is for style and you could erease it.
#map {
position:absolute;
left:25%;
padding: 10px;
border: 1px solid black;
border-radius: 5px;
}
#go-back {
content:url('http://img.freepik.com/free-icon/back-button_318-69320.jpg?size=338&ext=jpg');
float: left;
display:inline-block;
width: 25px;
height: 25px;
margin-right: 10px;
}
#program_title {
line-height: 25px;
}
You need to remove position:absolute; from #go-back and instead use display:inline-block; or float:left;
#go-back {
content:url('https://cdn2.iconfinder.com/data/icons/arrows-and-universal-actions-icon-set/256/left_circle-128.png');
color: #fff;
border-radius: 5px;
height: 20px;
width: 20px;
opacity: 0.9;
display:inline-block; /* Or float:left */
}
jsFiddle
Related
I have a spanned text 1 with background color red. I want to make the background color round which will enclose the spanned text 1. But what i have at the moment isn't doing the trick.
How can i get this done?
.text-span{
background:red;
border-radius:20px;
}
<span class="text-span">1</span><span>info</span>
First, you need to display it inline-block. This allows you to manipulate its size.
Then, you need to give him the same height, same width to make it square.
After that, you will make a border radius of 50% so that it becomes round.
Finally, you can center it by giving it the line-height of the height, and center aligning the text.
And voilà !
.text-span{
background:red;
border-radius:50%;
height: 26px;
width: 26px;
line-height: 26px;
display: inline-block;
text-align: center;
margin-right: 6px;
}
<span class="text-span">1</span><span>info</span>
Try this :
.text-span{
background:red;
border-radius:50%;
display:inline-block;
width:20px;
height:20px;
text-align:center;
}
<span class="text-span">1</span><span>info</span>
Hope it helps!!
You can't absolutely center the content inside the circle using just the padding. I suggest you this snippet to center anything inside it with a simple snippet.
This solution have just a note, you need to set the circle size big enough or crop the content with the text-overflow property.
.text-span {
display: inline-block;
background: rebeccapurple;
border-radius: 50%;
position: relative;
width: 30px;
height: 30px;
font-family: sans-serif;
margin-right: 8px;
vertical-align: middle;
}
.text-span::before {
content: attr(data-content);
color: #FFF;
position: absolute;
top: 50%;
left: 50%;
font-size: 13px;
font-weight: 700;
line-height: 1;
transform: translate(-50%, -50%);
}
<div>
<span class="text-span" data-content="1"></span>
info
</div>
<div>
<span class="text-span" data-content="99"></span>
info
</div>
I want to display a button centered inside a div. I did it with the following:
transformation:translateY(25%);
but this is is not allowed for older version of browsers. This is the follwing CSS code for the div and the button:
#buttonSwap.swap{
background: url("../img/thumb_10600.png") no-repeat;
height: 15px;
width: 15px;
border: none;
}
.swapCities{
float: left;
height: 100%;
width: 15px;
margin: 5px 8px 0px 8px;
}
and the HTML code is the following:
<div class="swapCities">
<input type="button" id="buttonSwap" class="swap" ng-click="swapingCities()" />
</div>
There is a lot of methods for vertical alignment in CSS. I recommend reading http://css-tricks.com/centering-css-complete-guide/.
Personally I find the "ghost element" technique (http://codepen.io/KatieK2/pen/ucwgi) most universal. The idea is to prepend an inline-block pseudoelement with 100% height to your container, set your button display to inline-block as well and set vertical-align: middle on both:
.swapCities:before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
#buttonSwap {
display: inline-block;
vertical-align: middle;
}
You need something like this:
.swapCities{
display: inline-block;/* or table-cell */
vertical-align: middle;
}
Here is a simple example: the key here is that the parent container is position:relative, and the button is position:absolute;
you can use top:50%; left:50%;... this will align the top-left corner of the button to center;
To complete the centering, you need to add margin to the button to equal half of the width and height.
Copy/Paste the below into an .html document, and you will see it at work.
<!DOCTYPE html>
<html>
<body>
<style>
center { background-color:#CCCCCC; position:relative; min-height:600px; }
button { width:300px; height:30px; position:absolute; top:50%; left:50%; margin-left:-150px; margin-top:15px; }
</style>
<center>
<h2>Content Area</h2>
<button type="button">Click Me</button>
</center>
</body>
</html>
You could use position: absolute; then top: 50% property to offset.
Have a look at this Codepen to see if it's any good for you: EXAMPLE HERE
Your css will look like this:
.swapCities{
position: relative;
height: 100px; width: 100px;
margin: 5px 8px 0px 8px;
border: 1px solid;
}
#buttonSwap.swap{
position: absolute;
top: 50%; margin-top: -9px;
left: 50%; margin-left: -9px;
background: url("../img/thumb_10600.png") no-repeat;
height: 15px; width: 15px;
border: 1px solid;
}
I am trying to create a css tool-tip, the html and css code and also link to fiddle is given below
CHECK MY CODE HERE #JSFIDDLE
HTML
<a class="tooltip" href="#">CSS Tooltips 1
<span>Tooltip1</span></a>
</br>
<a class="tooltip" href="#">CSS Tooltips
<span>Tooltip This is not working for me </span></a>
CSS
.tooltip {
position: relative;
}
.tooltip span {
position: absolute;
width:140px;
color: #FFFFFF;
background: #000000;
height: 30px;
line-height: 30px;
text-align: center;
display:none;
border-radius: 2px;
padding:2px;
}
.tooltip span:after {
content: '';
position: absolute;
top: 50%;
right: 100%;
margin-top: -8px;
width: 0; height: 0;
border-right: 8px solid #000000;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
}
.tooltip:hover span {
display: block;
opacity: 0.8;
left: 100%;
top: 50%;
margin-top: -15px;
margin-left: 15px;
z-index: 999;
}
My issue is only half the text from <span>Tooltip This is not working for me </span> is shown in the corresponding tool-tip. I tried hard but couldn't debug it. Please help.
Thanking You
It's because you have a fixed width. To allow the tooltip to dynamically expand to the content's width remove the width property and set white-space:nowrap to keep the text inline.
.tooltip span {
position: absolute;
color: #FFFFFF;
background: #000000;
white-space: nowrap;
height: 30px;
line-height: 30px;
text-align: center;
display:none;
border-radius: 2px;
padding:2px;
}
http://jsfiddle.net/89rwu2db/3/
EDIT
As commented bellow, if you want to keep the fixed width, but wants the text to expand in height, remove the height property of the span, and it will grow (also, don't use white-space anymore):
.tooltip span {
position: absolute;
color: #FFFFFF;
background: #000000;
width:140px;
line-height: 30px;
text-align: center;
display:none;
border-radius: 2px;
padding:2px;
}
http://jsfiddle.net/89rwu2db/9/
The point is, setting a specific width or height prevents your element of growing automatically.
You need to change the width property of the second tooltip to fit all the text you want display.
Fixed Fiddle: http://jsfiddle.net/89rwu2db/8/
I added styling to the second span to increase the width.
<span style="width: 250px;">Tooltip This is not working for me </span>
this is what i created:
This is what i want like:
this is my code:
<div id="OR"><span style=" vertical-align: middle;background:blue;">OR</span></div>
this is css:
div #OR { border-radius:50%;border-style:1px solid black;background:red;width:42px;height:42px;float:right; background:red;vertical-align: middle;}
div #OR span{ vertical-align: middle; }
so please help me to bring thart OR in a center of the div.
I don't think you will need an extra element for the OR text, what you need is the line-height property
Demo
div {
height: 50px;
width: 50px;
border: 1px solid #ddd;
border-radius: 50%;
font-weight: bold;
line-height: 50px; /* Equals elements height */
text-align: center;
}
This solution is perfect if you want to vertical-align single word, if you want to perfectly center an element horizontally and vertically, other two approaches are to use display: table-cell; with vertical-align: middle; or use CSS Positioning.
CSS Positioning way..
Explanation: Here am using position: relative; on the wrapper/parent element and than am assigning position: absolute; for the child element. Though, here's a catch, you need to assign fixed width to the child element you are trying to center.
Demo 2
div {
height: 50px;
width: 50px;
border: 1px solid #ddd;
border-radius: 50%;
font-weight: bold;
position: relative;
}
div span {
position: absolute;
border: 1px solid #f00;
left: 50%;
top: 50%;
height: 20px;
width: 24px;
margin-top: -10px; /* Half of the elements height */
margin-left: -12px; /* Half of the elements width */
}
I have a content area in the middle of the page, which I am centering with margin: 0 auto;
Now I want to have a background effect on the page with several small cubes, that, when hovered change with some effects.
The hover effects work fine under or over the content area, but the problem is that the margin, which centers the content seems to disturb the recognition of the hovering, because when hovered over the cubes behind the margin of the content area, the hover selector doesn't work.
Thanks for any help!
EDIT: Here a code example: http://cssdeck.com/labs/dl3ojm0g
Some small changes in the CSS and it works well.
#content {
margin: 0 auto;
position:relative;
margin-top: 50px;
width: 700px;
height: 300px;
padding: 20px;
background-color: white;
border: 2px solid darkgray;
color: darkgray;
z-index:2;
}
#cubeHolder {
position: absolute;
top: 0;
left: 0;
z-index:1;
}
Just needed to position #content to relative and gave it a higher z-index comparing to #cubeHolder
Example : http://jsfiddle.net/nwrFa/6/
Position your content-container absolute. Then left: 50% and margin-left: -700px/2
#content {
position: absolute;
top: 50px;
left: 50%;
margin-left: -350px;
width: 700px;
height: 300px;
padding: 20px;
background-color: white;
border: 2px solid darkgray;
color: darkgray; }