so i have got a box , with some text in it and i want to highlight the text as shown in the jsfiddle.... unfortuntely I can't seem to change the green box so it has the same padding as the text... can someone help a stupid boy ?
the jsfiddle is here ...
http://jsfiddle.net/2es4bx0o/3/
and here is the css involved (not much really)
.border {
background-color:#8cc63f;
}
.tile-area-main {
position: fixed;
left: 0px;
top: 0px;
display: inline-block;
color: #ffffff;
width: 780px;
height: 450px;
overflow: hidden;
z-index : 3000;
background-color:rgba(37, 34, 104, 0.3);
border-radius: 25px;
}
.tile-area-main p {
margin: 0;
padding: 0 2.4em 0.6em;
font-size: 1.4em;
line-height: 1.5;
color : #000;
cursor: pointer;
}
You need to set margin instead padding for the .border element:
.border {
margin: 0 2.4em 0.6em !important;
padding: 0 !important;
}
FIDDLE: https://jsfiddle.net/lmgonzalves/2es4bx0o/4/
Related
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>
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'm trying to achieve the following page divider:
But, I'm ending up with this:
Obviously the yellow is just to tell me where the tops and bottom are (should be white), and I seem to be getting this unwanted top and bottom margin. I've tried a few methods including display:inline-block, display:inline, margin-top:-2px but lost what I've tried and what I haven't. The span was originally a div but this was one of the many things I changed trying.
This is my last attempt:
<style>
.pageDivider {
margin: 30px 0;
background: #E5E5E5;
padding: 0;
text-align: center;
}
.pageDivider .inner {
line-height: 24px;
margin: 0 auto;
padding: 0 15px;
background: yellow;
font-size: 16px;
color: #333;
}
</style>
<div class="pageDivider"><span class="inner">SHARE</span></div>
Any clues on how to do this the proper way?
I cannot delete my question, so I will share the solution I have just found which works really, really nicely - I hope it helps others.
JSFIDDLE DEMO
h6.pageDivider {
font-family: 'Lato', 'Open Sans', sans-serif;
overflow: hidden;
text-align: center;
margin: 40px 0;
font-weight: 700;
color: #555;
}
h6.pageDivider:before,
h6.pageDivider:after {
background-color: #E9E9E9;
content: "";
display: inline-block;
height: 18px;
position: relative;
vertical-align: middle;
width: 50%;
}
h6.pageDivider:before {
right: 30px;
margin-left: -50%;
}
h6.pageDivider:after {
left: 30px;
margin-right: -50%;
}
<h6 class="pageDivider">HELLO WORLD</h6>
your answer is ....
.pageDivider {
margin: 30px 0;
background: #E5E5E5;
padding: 0;
text-align: center;
}
.pageDivider .inner {
line-height: 24px;
margin: 0 auto;
padding:2.5px 20px !important;
background: yellow;
font-size: 16px;
color: #333;
}
<div class="pageDivider"><span class="inner">SHARE</span></div>
I'm not exactly sure how to explain this, but I created this JSFiddle to show the issue.
.news {
float: left;
width: 465px;
height: 260px;
padding: 0px 7px;
position: relative;
}
.news .news-title {
float: left;
position: relative;
z-index: 10;
margin: 10px 20px;
padding: 10px;
}
.news .news-title h2 {
color: #FFF;
text-transform: uppercase;
font-weight: bold;
background: #010101;
font-family: 'Open Sans', sans-serif;
padding: 10px;
display: inline;
word-wrap: break-word;
}
.news img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
<div class="news">
<div class="news-title"><h2>Lorem ipsum dolor sit amet, consectetur</h2></div>
<img src="https://dl.dropboxusercontent.com/u/22433338/news_mc.jpg" alt="" />
</div>
<div class="news">
<div class="news-title"><h2>Lorem ipsum dolor sit amet, consectetur</h2></div>
<img src="https://dl.dropboxusercontent.com/u/22433338/gmod_news.jpg" alt="" />
</div>
Basically, at the very end of the first line it doesn't do any padding on the right side and on the 2nd line the left side has no padding at all.
I tried using stuff like word-wrap and white-space, but I can't seem to figure out how to fix this.
Check this out
http://jsfiddle.net/mGQG4/18/
Essentially you do two things within h2 CSS
padding: 10px 0; /* change horizontal padding to 0 */
box-shadow: 10px 0 0 red, -10px 0 0 red; /* add this line */
Should work as requested. Of course, change color from red to #010101 as well.
here's an update,
check, Updated
just add
box-shadow: 10px 0 0 black, -10px 0 0 black;
to .news .news-title h2
For HTML / markdown you can use:
<mark style="background-color: blue; color:red;">Test-Driven Development (TDD)</mark>
maybe you need to add line-height: 3;
demo
move the background from ".news .news-title h2" to ".news .news-title" ;-)
Check this fiddle
I can see padding between images and texts on those images.
line-height: 40px;
The problem, as Yogesh Sharma pointed out in a comment, is that you have display:inline in your .news .news-title h2 class. If you remove that, it works fine.
JSFiddle
You can use box-shadow to achieve the desired result.
Remember to modify the padding on h2 and remove the horizontal padding there.
CSS
.news {
float: left;
width: 465px;
height: 260px;
padding: 0px 7px;
position: relative;
}
.news .news-title {
float: left;
position: relative;
z-index: 10;
margin: 10px 20px;
}
.news .news-title h2 {
color: #FFF;
text-transform: uppercase;
font-weight: bold;
background: #010101;
font-family: 'Open Sans', sans-serif;
padding: 10px 0 10px 0;
display: inline;
line-height:220%;
word-wrap: break-word;
box-shadow: 10px 0 0 black, -10px 0 0 black;
}
.news img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
EXAMPLE
http://jsfiddle.net/mGQG4/27/
I'm trying to get this Sprite done, but i'm stuck and can't figure out a solution.
FIDDLE HERE
I have a simple button:
<a href="#" class="ui-button sub-beta-button">
<span class="button-content">Beta Sign-Up</span>
</a>
and the css:
.sub-beta-button {
height: 78px;
background: transparent url("http://i.imgur.com/PSpIGLA.png") 100% -160px no-repeat;
padding-right: 50px;
margin-left: 30px;
bottom: 18px;
z-index: 1;
position: relative;
}
.ui-button {
background: 0;
border: 0;
cursor: pointer;
display: inline-block;
height: auto;
overflow: visible;
padding: 0;
margin: 0;
vertical-align: middle;
outline: 0;
text-align: center;
white-space: nowrap;
cursor: pointer;
}
.sub-beta-button .button-content {
background-image: url("http://i.imgur.com/PSpIGLA.png");
padding-left: 50px;
color: #fff;
font: normal normal 18px/86px "Bliz Quadrata", Times New Roman;
text-transform: uppercase;
text-shadow: 0 0 4px #000, 0 0 8px #000;
overflow: hidden;
min-width: 110px;
margin-left: -30px;
height: 76px;
z-index: 2;
}
.ui-button span {
outline: 0;
display: inline-block;
background-repeat: no-repeat;
}
but i'm getting only this result:
That's the Sprite:
FIDDLE HERE
your .ui-button class removes the background (background: 0).
You can better first get the button working without the ui-button class, and then rule by rule fill up the ui-button class. That way you are sure you are using minimal and correct css.
I've made an edit and removed all the junk code.
If you want the text to the center, edit padding-left and add text align:center
padding-left
and change it to
text-align:center
http://jsfiddle.net/va854