i have the following as part of a .CSS file:-
#footer-profile {
position: absolute;
bottom: 0px;
left: 50px;
text-align: center;
padding: 5px 10px;
color: blue;
background: yellow;
opacity: .3;
-moz-opacity: .3;
filter: alpha(opacity=30);
-moz-border-radius: 20px 20px 0px 0px;
-webkit-border-radius: 20px 20px 0px 0px;
}
#footer {
position: relative;
top: 20px;
clear: both;
text-align: center;
padding: 20px;
color: #999999;
}
but how can i hide the text within the footer
Add inside #footer directive
display: none;
the whole footer will be hidden. If you want to hide only some part of the footer, add them inside some tag with class hidden and then add a rule:
#footer.hidden {
display: none;
}
Depending on what you want to do, you could try to use visibility: hidden; instead of display: none;. The first one will hide the element but will keep free its space in the layout, the second one will 'collapse' the element and may change your layout.
For completeness sake, I would like to add the solution provided by Rohit Azar as a comment to your post:
#footer {
font-size: 0;
}
This solution does exactly what the question asks.
if you want to hide only the text, try this:
#footer{
text-indent:-99999px;
}
Related
I'm trying to turn a hyperlink into an icon while turning the content text into a tooltip. The catch is I'm working in a place where I have only CSS to play with, and I can't modify the HTML or add any Javascript. I'm retrieving data from an external source in a table, and one of the columns is a hyperlink - this I want to transform into an icon with the text-content as a tooltip manner on hover.
Below snipped is how far I've gotten, is there any way of making the :hover part look, feel and behave more like a tooltip? Or is there perhaps another way completely to achieve what I'm after?
.external-link {
font-size: 0;
}
.external-link:after {
content: ' ';
background: url(https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico?v=ec617d715196) no-repeat;
display: inline-block;
height: 32px;
width: 32px;
}
.external-link:hover {
/* Well it shows the text, but it ain't pretty nor very functional.. */
font-size: initial;
}
Stack Overflow
It's a bit tricky, but it's achievable with modifying before and after pseudo-elements. You just have to write tooltip content in your content property, otherwise, you should modify your HMTL itself.
So your final code should be something like this:
.external-link {
font-size: 0;
}
.external-link::before {
content: 'Stack Overflow';
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text */
position: absolute;
left: 40px;
z-index: 1;
/* Fade in tooltip */
opacity: 0;
transition: opacity 0.3s;
}
.external-link::after {
content: ' ';
background: url(https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico?v=ec617d715196) no-repeat;
display: inline-block;
height: 32px;
width: 32px;
}
.external-link:hover.external-link::before {
/* Well it shows the text, but it ain't pretty nor very functional.. */
font-size: initial;
visibility: visible;
opacity: 1;
}
Stack Overflow
You can just edit your css like below. Just some idea. Not sure if you can write the tooltip text into css
.external-link {
font-size: 0;
position: relative;
}
.external-link:after {
content: ' ';
background: url(https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico?v=ec617d715196) no-repeat;
display: inline-block;
height: 32px;
width: 32px;
}
.external-link:before {
content: 'Text';
position: absolute;
display: inline-block;
height: auto;
padding: 2px 5px;
width: 100%;
display:none;
color: white;
font-size:initial;
background: #00000099;
bottom: -15px;
}
.external-link:hover:before {
/* Well it shows the text, but it ain't pretty nor very functional.. */
display:block;
}
Stack Overflow
I followed this, this, this and this question. But the solution is not working because the problem is slightly different. I'm using a calendar component called <p-calendar> from primeng. It is a month-picker actually. This component has already a well defined styling in primeng.css. The component by default looks like this:
But I want to put my styling. I want it be to encircled by blue color on hover. I have achieved this:
.
But as you can see month name is pushed towards the top and not in the middle.
Here is primeng.css that I'm trying to modify.
CSS that was already there
.ui-datepicker {
width: 10px;
padding: .2em;
position: absolute;
}
.ui-datepicker.ui-datepicker-inline {
display: inline-block;
position: static;
}
.ui-datepicker .ui-datepicker-group {
border-left-width: 0;
border-right-width: 0;
border-top-width: 0;
border-bottom-width: 0;
}
/* Month Picker */
.ui-monthpicker .ui-monthpicker-month {
width: 33.3%;
display: inline-block;
text-align: center;
padding: .5em;
cursor: pointer;
}
.ui-datepicker-monthpicker select.ui-datepicker-year {
width: auto;
}
CSS that I added later on
.ui-monthpicker-month {
border-radius: 100% !important;
text-decoration: none;
margin-top: 10px;
color: #73767b;
font-family: 'Muli', sans-serif;
height: 50px !important;
width: 50px !important;
padding: 20px 20px 20px 20px;
}
.ui-monthpicker-month:hover {
background-color: #1474A4 !important;
color: white !important;
text-align: center !important;
}
I'm not very good at styling. Any advice and suggestions will be of great help.
PS: I also tried adding padding-top: 15px on :hover but then it started flickering.
Try to do a trick using percentage on the padding top and bottom and set the height element to zero.
.ui-monthpicker-month {
color: #333333;
border-radius: 100% !important;
height: 0 !important;
padding-top: 13% !important;
padding-bottom: 20% !important;
}
.ui-monthpicker-month:hover {
background-color: #1474A4 !important;
color: #fff;
}
And here is the screenshots:
------------------------------ PC ------------------------------
------------------------------ Tablet ------------------------------
------------------------------ Phone ------------------------------
Just add line-height as you need.
I added 2em you can change as required.
.ui-monthpicker .ui-monthpicker-month {
background-color:#3399cc;
width: 33.3%;
display: inline-block;
text-align: center;
padding: .5em;
cursor: pointer;
line-height:2em; // <-- Add line height
}
<div class="ui-monthpicker">
<div class="ui-monthpicker-month">Jan</div>
<div class="ui-monthpicker-month">Feb</div>
</div>
Newbie here
I'm making a website that has 2 main sections: one larger section (section A) with 75% width, and another section (section B) with 25% width, appear side by side.
Section A has several p tags with footnote inside, the only problem is that when I hover the footnote, it appears behind the section B, can anybody help me? Thanks!
Screenshot: http://imgur.com/7BQrcP7
CSS Code:
Section A {
margin: 0px;
padding: 0px;
background-color: #FAFAFA;
float: left;
width: 75%;
}
Section B {
float: right;
width: 25%;
text-align: left;
}
Footnote-sign {
background-color: #ffc;
cursor: pointer;
vertical-align: super;
font-size: 77%;
}
Footnote-tooltip {
background-color: #fea;
border: 1px solid #6b0000;
display: inline;
padding: 5px;
display: none;
position: absolute;
font-size: 85%;
max-width: 540px;
text-align: left;
}
You need to add a z-index to the footnote element to make it appear to be above every other element, without the HTML I will just apply the z-index to both footnote CSS elements
CSS
Footnote-sign {
background-color: #ffc;
cursor: pointer;
vertical-align: super;
font-size: 77%;
z-index: 100; /* a large number to ensure it's on top */
}
Footnote-tooltip {
background-color: #fea;
border: 1px solid #6b0000;
display: inline;
padding: 5px;
display: none;
position: absolute;
font-size: 85%;
max-width: 540px;
text-align: left;
z-index: 100; /* a large number to ensure it's on top */
}
Add the z-index to the Footnote-tooltip
Footnote-tooltip {
z-index:100;
}
If you want to achieve this without z-index then follow my pen.
Hope this pen will help you.
'http://codepen.io/anon/pen/NGeaKp'
I have a problem that I believe might be pretty stupid, but I can't figure out.
I have a form, where I want to align the elements in both sides, problem is I can't align it to the right (where the red line is), here is a picture to show it:
and here is my SASS (sorry if is not very tidy I been working for a while in it and might be messy):
.contact {
margin: 100px auto 0;
max-width: $half-width;
form {
letter-spacing: 2px;
color: $color4;
input, textarea {
border: 3px solid $color5;
padding: 10px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
font-size: 16px;
background: $color6;
&:focus {
outline: none !important;
border-color: $color3 !important;
}
textarea {
height: 10em;
width: 100%;
overflow: inherit;
}
}
.info-group {
margin-top: 10px;
label {
display: inline-block;
width: 45%;
float: left;
&:nth-child(2) {
float: right !important;
margin: 0 auto;
}
}
}
.tell-group {
width: 100%;
label {
display: inline-block;
margin-top: 10px;
}
textarea {
height: 10em;
width: 100%;
float: left;
}
}
.submit-wrap {
margin-top: 10px;
float: right;
input {
width: 100px;
font-size: 18px;
text-transform: uppercase;
color: $color6;
background-color: $color5;
border: none;
&:hover {
color: $color1;
}
}
}
}
}
Thanks!
padding: 10px; is going to add 20px to the width, this extra width is likely what is causing the problem. You can change the width attribute to width: calc(100% - 20px); to account for the 10px padding on each side of the element.
Here is a list of where calc is supported: http://caniuse.com/#feat=calc
You can also try adding these css rules to the problem elements to move them over:
position: relative;
left: -20px;
You might also have to add position: relative; to the parent element
Here is a fiddle showing the left -20px method: http://jsfiddle.net/0f153w8e/
Side note: you might have to adjust the left amount a little bit to make it exact if your text areas have borders (which they probably do)
I experience some strange text alignment, can you give me a hint where the Problem is:
I was trying to create a speechbubble:
.round
{
margin-top: 5px;
border-radius:50%;
background-color:#3d5177;
width:50px;
height:50px;
float: left;
}
.number {
color: white;
padding: 8px 17px;
font-size: 30px;
font-weight: normal;
}
.faq_container {
overflow: hidden;
}
.talkbubble {
left: 80px;
position: relative;
width: 340px;
height: 100px;
padding: 0px;
background: #aaaaaa;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.talkbubble:after {
content: '';
position: absolute;
border-style: solid;
border-width: 10px 13px 10px 0;
border-color: transparent #aaaaaa;
display: block;
width: 0;
z-index: 1;
left: -13px;
top: 22px;
}
.talkbubble_text {
display: block;
text-align: left;
padding: 10px;
}
http://jsfiddle.net/Lf4sr/
Thanks
The problem is with the <div class="round"> CSS. The width of the element is pushing the text over to the right.
Add this to the .round class:
.round {
top: 0;
left: 0;
position: absolute;
}
And add this to the .faq_container class:
.faq_container {
position: relative;
}
Demo
Note: You can remove float: left; from .round.
Correct CSS should be:
.talkbubble {
left: 30px; /* or Whatever you may want the distance from the circle to be */
position: relative;
width: 340px;
height: 100px;
padding: 10px;
background: #aaaaaa;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
float: left;
}
.talkbubble_text {
display: inline;
text-align: left;
/* padding: 10px; ( remove this )*/
}
try adding float:left to the .talkbubble container
You can try this:
Fiddle here
.talkbubble_text {
display: inline-block;
text-align: left;
padding: 10px;
line-height:16px;
}
Good Luck...:)
I think the issue is that your last line of text is not inline with the others. This is due to the way you are laying out your code. Your text is being pushed across by your round element, which is a set height. Any text after this is not being pushed across, a quick fix would be to add a margin on the bottom of the number circle.
.round
{
margin-top: 5px;
border-radius:50%;
background-color:#3d5177;
width:50px;
height:50px;
float: left;
margin-bottom : 50px;
}
http://jsfiddle.net/Lf4sr/4/
But would probably be better to restructure your code a little to stop this happening in the first place.
Change positions, add overflow:hidden to .talkbubble_text to prevent float left align. Fiddle.
Updated: http://jsfiddle.net/Bushwazi/Lf4sr/8/
There are a lot of things that could be cleaned up in this example. There is lots of extra html. But the core problem is that if you are using float for one part, you have to use it for both. So you need to add float:left or right to .talkbubble and remove the left value.
.talkbubble {
/* left: 80px; */
position: relative;
width: 340px;
height: 100px;
padding: 0px;
background: #aaaaaa;
float:left;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
I did a bunch of other stuff in the fiddle to simplify and eliminate extra html/css too. But the core problem was mixing positioning with float and choosing just one.