How can I push the bottom margin up with about 5 pixels using css?
Here is the example about what I want to achieve:
Although you can do using line-height, it might screw up the next lines. So I suggest this:
h1 {
font-size: 24px;
border-bottom: 2px solid #FF6A00;
/* proposing line height + padding */
line-height: 20px;
margin-bottom: 5px;
}
You can do it with line-height:css rule.
set line-height: 18px; and that will do this trick.
Try this fiddle which uses padding.
padding-bottom: 5px;
You could do it with underlining. Like this:
h1 {
font-size: 24px;
padding: 0;
color: #FF6A00;
text-decoration: underline;
}
h1 span {
color: #000;
}
And then just put the text in h1 inside a span:
<h1><span>Szavazás az új domain-ról</span></h1>
See this this fiddle.
Related
I am trying to style a pull-quote div tag. I want to style the quote mark " so it is bigger than the rest of the statement.
I thought of using the first-letter pseudo-element. However when I did so, it did not work properly. Here are the cases I tried:
If I wrote the sentence like this: "This is a test,(with no spaced between the "and theT then both the "Tappear big.
If I wrote it with a space between them, none of them get bigger.
My question is: is there a way to get the " only to be bigger?
Here is the html code I used: <div class="pullquote-right">"this is a test</div>
The css:
.pullquote-right {
display: inline-block;
max-width: 350px;
float: right;
padding-left: 15px;
margin-left: 25px;
border-left: #3b5998;
border-left-width: thick;
border-left-style: solid;
font-style: italic;
color: darkgray;
font-size:115%;}
.pullquote-right::first-letter {font-size: 200%;}
Thanks.
An option would be to use the ::before and ::after pseudo elements.
.quote::before,
.quote::after {
content: "\0022";
font-size: 2em;
font-weight: bold;
color: green;
vertical-align: -.3em;
}
<p class="quote">This is a great quote</p>
The first-letter pseudo class refers to the first letter and the punctuation directly preceding it. Reference:
https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter
I think the easiest way to do what you want might be to put a span tag around the punctuation you want to make bigger and style that from the css.
Or you can check out this work-around: https://css-tricks.com/snippets/css/simple-and-nice-blockquote-styling/
I ended up combining the two answers to be able to use the div tag and not neet to add extre <p></p>as follows:
.pullquote-left {
display: inline-block;
max-width: 350px;
float: left;
padding: 20px;
margin-left: 15px;
border-left: #3b5998;
border-left-width: thick;
border-left-style: solid;
font-style: italic;
color: darkgray;
font-size: 110%;
background-color: white;
box-shadow: 5px 5px 5px #888888;
text-align: center;
}
.pullquote-left::before {
font-size: 2em;
font-weight: bold;
content: "\201C";
}
<div class="pullquote-left">This is the final result.</div>
On this page I'm trying to position quote images around the block quote but they won't sit right.
This is the CSS:
blockquote {
padding-left:10px;
color:#444;
font-style: normal;
width: 500px;
background: #ff9999 url(/wp-content/themes/primus/primus/images/quoleft.png) left top no-repeat;
}
blockquote p {
padding: 0 100px;
background: #ff9999 url(/wp-content/themes/primus/primus/images/quoright.png) right bottom no-repeat;
}
I want to keep the images the same size ideally. I just want to make the text stop overlapping the images. I tried specifying the width of the .blockquote as 500px but it didn't seem to make any difference.
Any ideas would be welcomed. Thanks - Tara
Two things:
In order to see the images behind
the text you should not specify a
background color for the inner paragraph; make
it transparent instead.
The specified padding is not applied due to another property (.entry p) which is more specific. You could set this blockquote padding to !important but that's generally not recommended, another option is to make this one more specific than the other (.entry p) by adding the .entry class. Be aware that only blockquotes with a parent .entry class will be selected this way. (more info about specificity)
The css:
blockquote {
padding-left: 10px;
color: #444;
font-style: normal;
width: 500px;
background: #ff9999 url(/wp-content/themes/primus/primus/images/quoleft.png) left top no-repeat;
}
.entry blockquote p {
padding: 0 100px;
background: transparent url(/wp-content/themes/primus/primus/images/quoright.png) right bottom no-repeat;
}
Try adding this property:
.entry p {
margin: 5px 5px 5px 15px;
padding: 0px 40px 0px 0px;
line-height: 20px;
font-family: Tahoma,Georgia, Arial,century gothic,verdana, sans-serif;
font-size: 13px;
}
I managed to get the following:
Hope that helped (:
Depending on the browser support that you need, you can try it without images, using CSS:
blockquote {
padding: 0;
margin: 0;
border: 1px solid blueviolet;
}
blockquote:after,
blockquote:before {
color: #ccc;
font-size: 4em;
line-height: 0;
height: 0;
vertical-align: -0.5em;
display: inline-block;
}
blockquote:after {
content: "”";
margin-left: 0.05em;
}
blockquote:before {
content: "“";
margin-right: 0.05em;
margin-bottom: -0.5em;
}
Live example here
(Tested on Firefox and Chrome only)
Help a CSS newbie out here. What I'm trying to do is very simple.
As I said in the image, I want the text to be in the same line. I tried everything i could think of.
Here is the index.php:
http://pastebin.com/9LVVFgUZ
Here is the style.css:
http://pastebin.com/v8Eius2A
Thanks.
Original code:
.box_con a {
color: #111111;
font-family: Georgia,"Times New Roman",Times,serif;
font-size: 16px;
padding-left: 14px;
text-decoration: none;
width: 470px;
}
Remove the float, make the a element block-level and add a left margin like so:
.box_con a {
color: #111111;
display: block;
font-family: Georgia,"Times New Roman",Times,serif;
font-size: 16px;
margin-left: 150px;
padding-left: 14px;
text-decoration: none;
width: 470px;
}
Result:
Adding to .box_con a these rules: float: left and width: 470px seems to get what you asked for in your image.
Some times I may may want an anchor beside a submit button, but I always seem to have problems lining them up ...
a, input[type=submit], input[type=button], button {
font-family: arial;
background: #fff;
color: #777;
border: 1px solid #ccc;
font-size: 12px;
line-height: 20px !important;
padding: 5px 10px;
margin: 0;
}
http://jsfiddle.net/cXgzM/
with that, anchors are still 2 pixels short
Simply add this to your CSS:
a
{
display: inline-block;
}
I updated your example. Note that this property doesn't work in IE7 and lower. :)
I'm using the following CSS:
h2 {
font-weight: normal;
border-bottom: 1px solid #DDD;
font-size: 1.6em;
font-style: italic;
}
h2 span {
position: absolute;
top: 7px;
padding-right: 6px;
background-color: #F9F9EE;
}
When used like:
<h2><span>abc</span></h2>
Gives the following effect:
abc ------------------
The text 'abc' is the heading content while the dashed line is the border being shifted. The following approach works well so long as you only use it once on the page. My question is, how can I achievement the same effect without using absolute positioning or even perhaps line-height since I suspect either or both are the culprits.
I do remember seeing the same effect being used on a few blogs but the url slips my mind.
Thank you. :)
As Rory mentioned, using position relative on the H2 tag solves the problem without the use of an image.
h2 {
font-weight: normal;
border-bottom: 1px solid #DDD;
font-size: 1.6em;
font-style: italic;
position:relative;
}
h2 span {
position: absolute;
top: -0.8em;
padding-right: 6px;
background-color: #F9F9EE;
}
This works in the three browsers I use for testing (IE, Firefox, and Chrome).
I'm not entirely sure what you're trying to do and what the problem is exactly, but adding position: relative; to the h2 style will create a positioning container in which the span position: absolute; will calculate its values from.
I don't see the effect that you described in Firefox, only in IE6.
One way you could achieve this effect is to use a single pixel background image, tiled horizontally at 50% of the height of the div. It's not as nice, since you do have to use an image, but it should look how you want without affecting the HTML.
I'd suggest something like:
h2 {
font-weight: normal;
font-size: 1.6em;
font-style: italic;
background: url(pixel.png) repeat-x 0% 50%;
}
h2 span {
padding-right: 6px;
background-color: #F9F9EE;
}
I've checked it in IE6 and Firefox, using it multiple times on the same page. :)
My favorite way to do this is:
<fieldset class="blah">
<legend>Heading</legend>
content...
</fieldset>
and then add
fieldset.blah {border-top: 1px solid #999;}
in your CSS. Hope that helps.
Try this:
h2 {
font-weight: normal;
border-bottom: 1px solid #DDD;
font-size: 1.6em;
height: 0.75em;
margin-bottom: 1.85em;
overflow: visible;
font-style: italic;
}
h2 span {
padding-right: 6px;
background-color: #F9F9EE;
}