I want to reduce the text size of the top left slider from the linked page.It is set to H2 on default and I can't figure a way to change it. The text size is too big for it and it looks stupid. I tried with the CSS below, but it only reduces the text size, unfortunately the spacing between the lines and words stays like in H2, which doesnt look appropriate either. Please help!
.fusion-flexslider.flexslider-posts .slide-excerpt h2 a {
color: #fff;
font-size: 20px !important;
line-height: 0.5 !important;
}
It's because the <a> derives font-related styling from the <h2>
Try this selector .fusion-flexslider.flexslider-posts .slide-excerpt h2, it works for me https://prnt.sc/v52pmy
If you set the a element style to include display: inline-block the element will then use the CSS styling you are giving it (though I guess you probably want to set line-height back to normal rather than try 0.5). I have tested this on your site using browser dev tools.
The reason is (to me) a quite complex one - why it doesn't work as you might expect on inline blocks. An explanation is given at https://stackoverflow.com/questions/22816123/why-cant-you-set-line-height-on-an-anchor-element-with-a-background
Related
I'm sure my question is quite a newbie one, anyway I can't figure out what I'm doing wrong. Basically, I created a <div> that I use as header, and inside of it another <div> that contains an image (logo) and a title (using <h1>).
The problem is that I get an unwanted extra space above the body
as you can see in this picture.
If I get rid of the <h1> title then everything is fine. I think the problem is due the float: left; property that I have assigned to the image, because if I assign no float property then the space disappears, but as you can see if I remove the float: left; the image and the title are not "aligned" anymore. So, the question is, how can I make the image to stay on the left and the title on the right of the image, without using float properties?
Any help will be appreciated, thanks!
Edit: Thanks everybody for the answers, I'm studying HTML and CSS at school and things like this are rarely mentioned by my teachers. Thanks again
A h1 element has margin by default. Simply remove it by adding:
margin: 0;
To the styles for your h1 element.
you can use this:
<h1 style="margin-top:0px; padding-top:0px">some text</h1>
At start of your work you should clear the style for margin (browser apply some of them).
So just in start of css file write:
h1 {
margin: 0;
}
A lot of devs just start a css file like :
* {
margin: 0;
padding: 0;
}
for clear it :)
Also you should read something about css reset and css normalize :)
This is because every browser has a default stylesheet, which you can find in Browsers' default CSS stylesheets. As you can see, the default margins are not zero. This can be solved by explicitly adding margin: 0px to your CSS.
Basically, I want to have an h1 and a p element on the same line, but the alignment is off a lot (meaning the H1 is higher than the P and looks crappy) and I've never had to do anything like this with css before!
I've thrown together a jsfiddle to accompany this, here is the code:
<h1 style="float:left;display:inline;">"Hi!</h1><p style="float:left;display:inline;">I'm James, and I <strong>LOVE</strong> building clean, fast and (most importantly) effective websites. Oh, and I also know a thing or two about computers.</p><h1 style="float:left;display:inline">"</h1>
http://jsfiddle.net/9H8xE/
Thanks!
Some advice before answer:
P tag is meant to create a new paaragraph, so if you do not need that use span tag instead.
Try to avoid inline styles, use CSS selectors.
http://jsfiddle.net/9H8xE/1/
Try this and let me know if it works
HTML:
<h1 >"Hi!</h1><p>I'm James, and I <strong>LOVE</strong> building clean, fast and (most importantly) effective websites. Oh, and I also know a thing or two about computers.</p><h1>"</h1>
CSS:
p
{
display:inline;
}
h1{
display:inline
}
The technical problem with the code in the question is that float: left prevents display: inline from taking effect, setting display to block instead, so remove all the float: left declarations.
A different issue is that you have the closing quotation mark as the content of an h1 element after the p element. This is very illogical. The technical implication is that this character will appear in the font size of h1, causing uneven line spacing unless you set h1 font size to the same as p font size. You need to decide what you want: why would you want to a have a large-size closing quote after normal-size text, and if you do, how should it be rendered?
In a DIV I place some text/html code which get loaded from a database. This text sometimes contains font size definitions (ex: font size="3"). is there a way to override this font size in this specific DIV using CSS.
I am grateful for any help.
Assuming mark-up similar to the following:
<div>
<font size="1">Some text at 'size="1"'</font> and natively-sized text, with more at <font size="26">'size="26".'</font>
</div>
Then you can explicitly instruct CSS to inherit the font-size from the parent element:
div {
font-size: 1.5em;
}
div font {
font-size: inherit;
}
JS Fiddle demo.
Please note, of course, that font is deprecated and should, therefore, not be used (as support for the element can stop without notice, and/or implementations change without warning).
Incidentally, while !important will force a declaration to override the usual cascade of styles, it's taking a sledgehammer to crack a nut; and, if it can be avoided (and in this case, it seems, it can be avoided) it should be, since it complicates later debugging of styles, and associated inheritance problems.
Further, this is treating the symptom of your problem; the problem you're really facing is the presence of the font tags in your content/database. This should be corrected, by removing the elements, and replacing them with appropriately-styled elements, such as em, span and so forth...
References:
font element, at the W3.org.
font element at the MDN.
Using the CSS !important notation you are telling the browser to overwrite any font-size defined inside your div:
From the above link it reads:
However, for balance, an "!important" declaration (the delimiter token "!" and keyword "important" follow the declaration) takes precedence over a normal declaration.
Example
See this working Fiddle Example!
.htmlContents * {font-size:10px!important;}
<div class="htmlContents">my database html content</div>
One idea: give these text tags an id or class, then use JavaScript to find these elements and change the style on them.
How about stripping the "font" tags from the text before inserting into the div? Then just style the div with a font size.
Thanks had same problem couldn't override font-size of footer of a nested element a.
.footer ul li a {
font-size: 20px ;
height: 25px;
}
I would also like to reset the font-size of <small> tag too normal HTML elements.
Like I want the content in small tag to be 13px of what other tags are.
How do I do this ?
I think a better way is to do
small {
font-size:inherit;
}
This way, the small tag will be the same size as whatever element it's contained in, so if for some reason you have:
<h1>This is some <small>small</small> text</h1>
The word "small" would be the same size as its surrounding words.
The one caveat with this is that I'm not sure if it will work in IE. I suspect that it will, but you'd have to try it to be sure.
You might want to look into using a CSS reset that takes care of this and similar issues for all tags.
First, it's hard to tell what you're asking. Here's how to set the font-size of those tags to 13px.
small {
font-size: 13px; /* you can use !important, but I wouldn't recommend it */
}
Second, 13px is not a very small size, unless the rest of your text is enormous. That fact, together with your phrasing ("I want the content in small tag to be 13px of what other tags are") leads me to suspect that what you really mean is you want the <small> text to be a percentage of the rest of the text. You can do this as follows:
small {
font-size: 13%;
}
However, this seems rather small. If you really want a percentage, I'd suggest something between 60% and 80%.
If you want to make it 13px exactly, Keltex's answer will do it for you.
If you want to reduce the size by 13 pixels from the base font-size of its parent, you have the following options as there is no "make it exactly 13 pixels less" operator available:
If you know the base font-size, hardcode a value that is your 13 pixels less in your selector.
Rely on percentages or ems to size it down appropriately. For instance, instead of "13 pixels less" think of it as being a given percentage of the base font-size. i.e.
p{ font-size: 24px; }
small{ font-size: 45% /* Will make it approximately 13 pixels smaller */ }
Your question is hard to understand. Do you want to make text in small tags the same size as the rest of the text? I'll assume that.
small {
font-size: 100%;
}
This will make the small tag have the same font-size as the rest of the text.
Why you would want such a thing is beyond my comprehension, but you have your answer.
[edit] this has the same effect as #notJim's answer - if the parent's font-size changes, this one adapts accordingly and adopts that new size.
Add this to your CSS:
small
{
font-size: 13px !important;
}
I'm hoping this is simple. I'm not a CSS guy.
I'm trying to make some code look a little better on a blog and I have the following <code> CSS style.
code {
display: block;
white-space:normal;
background-color: #eeeeee;
font: 1em, 'Courier New', Courier, Fixed;
padding: 7px;
margin: 7px 7px 7px 7px;
}
This is working fine for me, except where there are line breaks in the code contained in my <code> tag, the background color is white not light gray.
Is there a CSS tweak I can make to force my entire <code> block have a background color of gray?
Thanks.
Comment: If I put a space on the empty line, I get what I want - a gray background on that line.
Comment2: I have only plain text inside of my <code> </code> tags. Ideally I don't want to mark up my code w/ tags. Just cut and paste inside of the <code> tags and have it look decent.
Final Comment: After reading this as suggested by mercator below, I finally went with this. I subclassed the <pre> tag and got want I needed. A nicely shaded boxes to offset my example code blocks.
pre.code {
color: black;
border: solid 1px #eeeeee;
font-size: 1.1 em;
margin: 7px;
padding: 7px;
background: #eeeeee
}
It appears to work fine for me, but then I don't know what the contents of your <code> tags are.
There's a few oddities in your CSS in any case:
I probably wouldn't use display: block, but wrap the tags in a <p> or <pre> instead. Changing it to a block like that still won't allow you to nest block-level tags inside it, and it would still need to be inside a block-level tag itself. CSS doesn't change the HTML syntax and semantics. Do you have any block-level tags within your code tags?
Why did you set white-space: normal? That's a little unusual for a code block. How exactly are you formatting your code? Are you adding <p> or <br> tags in there? Why don't you use white-space: pre, or perhaps white-space: pre-wrap?
Your font declaration is broken. There shouldn't be a comma between the 1em and the font names. Browsers would now simply parse that as if 1em is the name of a font family, I think, and then fall back on Courier New, since 1em doesn't exist.
I think you meant to say monospace instead of Fixed. Or is Fixed the actual name of a font face? You'd better add the generic monospace anyway.
More of a nitpick: you can collapse those 4 margins down to one value too.
I'm not sure if any of these are really the cause of your problems. The first two are the most likely candidates. Nothing strange happened on the quick tests I did, but some of your other CSS might be creating the problems in combination with some of these points.
Ah, wait a minute... I see now that you're talking about making "some code look a little better on a blog". The blog software is automatically adding paragraph tags around blocks of text separated by blank lines. Those are responsible for the white.
I suppose that's also why you added white-space: normal. The blog software is already adding line breaks and everything automatically (with <p> and <br> tags), so using pre added a whole bunch of extra space.
Try using the <pre><code> tags combination like StackOverflow does. Using the <pre> tag will probably (hopefully) prevent the blog software from messing with your code.
For WordPress, have a look at their article "Writing Code in Your Posts."
Try setting an explicit width. Not sure why that would work. I sometimes add a border while testing to see where my box is and what it looks like. I know you can do that with web debuggers like firebug, sometimes it's simpler and might even have side effects.
add:
width: 100%;
border: 1px solid #eee;
See if that helps, maybe change the border color to #000 to see where the boundaries are.
Without some HTML and/or a test page, it's quite difficult to know what could be causing the problem. I would look at the line-height property though - it often causes these kind of problems.