I created a basic page with Bootstrap and cannot make the font size of my blockquotes smaller. When I change the CSS font-size property, the margins change since they're based on it, but the size of the text itself doesn't.
CodePen
Here's the CSS applied for the blockquotes:
blockquote {
font-family: Georgia, serif;
font-size: 1em;
font-style: italic;
margin: 3em auto !important;
padding: 0.35em 40px;
line-height: 1.45;
position: relative;
color: #383838;
}
blockquote:before {
display: block;
padding-left: 10px;
content: "\201C";
font-size: 80px;
/* Element with abolute positioning is positioned relative to nearest positioned ancestor */
position: absolute;
/* Offsets from edges of element's containing block, ancestor to which element is relatively positioned */
left: -20px; /* Negative moves it left */
top: -20px; /* Negative moves it toward top */
color: #7a7a7a;
}
blockquote cite {
color: #999;
font-size: 14px;
margin-top: 5px;
If you want to change the font size of the text inside blockquote, You have to define font size property of the <p> tag inside the blockquote like this
blockquote p {
font-size: 0.8em !important;
}
!important is must necessary here it will override the font-size defined in bootstrap.
you can not use CSS direct like this
blockquote {
font-size: 30px;
}
because this tag has it's own font-size property.
The relation between blockquote and p tag is CSS Combinators
The blockquote override your css, so you have to add !important to the difenittion.
For Example:
font-size: 1em!important;
but if you want to chang the p tag:
blockquote p{
font-size:1em;
}
This is just because <blockquote> is outer element..The inner element is <p> so you have to apply changes to <p> itself.
blockquote{
font-size:30px;
}
p{
font-size:25px;
}
<blockquote>
<p>A wise man proportions his belief to the evidence.</p>
</blockquote>
Or if you want to use font-size of blockquote, you have to use !important like this:
blockquote{
font-size:30px !important;
}
I'm trying to add an icon as the last link in my navigation bar.
It is adding too much space to the entire ul, even though the image does not extend a single pixel beyond the blue gear.
I've tried setting margins, padding, and line-height to 0, it still extends the block.
Nav Bar
nav bar
CSS
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
font-family: sans-serif;
}
li {
float: left;
}
li a {
color: white;
display: block;
text-align: center;
text-decoration: none;
padding: 14px 16px;
}
HTML
<ul class="menu">
<li>PRODUCTION</li>
<li>OFFICE</li>
<li>SALES</li>
<li>MISC</li>
<li>ADMIN</li>
<li>GEAR</li>
<!--<li><a id="gear" href="#"><img src="gear.png"/></a></li> -->
</ul>
Image
Gear Image
You can easily add in this CSS rule, to make sure the image never goes larger than the text around it.
.menu img {
height:1em;
}
Without an accurate image file, I can't come up with a more specific/elegant solution:
Here's a working example:
http://codepen.io/anon/pen/LZRaWL
If the gear is too small, then reduce the padding and increase the size of the gear. Here's a secondary example in which I've taken advantage of the relative sizing for em units:
http://codepen.io/anon/pen/gMwEmj
I have a list element with two tags inside of it, anchor tag and a span - tag.
What I'd like to achieve is that when hovering over anchor tag, the actual
background would change to black where as the span tag's background would change to green.
Is this possible with CSS3 or do I need to use JavaScript?
I won't be pasting any code here, since it's pretty straight forward.
Thanks in advance!
Here's the CSS so far:
#left_control_links li a {
font-family: 'Open Sans', sans-serif;
font-size: 14px; padding: 15px 15px 15px 20px;
font-weight: 600; float: left; width: 83%;
color: #dfdfdf; text-decoration: none;
}
#left_control_links li a:hover {
background: #272727;
}
span.list_total_count {
display: inline-block; background-color: #2c2c2c; float:right; min-width: 31px;
color: #fcfcfc ;padding: 5px 0 5px 8px;
font-family: Verdana; font-size: 13px; position: relative; top: 0px; left: 15px;
}
HTML:
<ul id="left_control_links">
<li>
<a href="subjects">Subjects
<span class="list_total_count"><?=$total_subjects?></span>
</a></li>
<li>
<a href="staff_users">Users
<span class="list_total_count"><?=$total_users?></span>
</a></li>
<li>Kyselyiden seuranta</li>
</ul>
Sure
See this example:
http://jsfiddle.net/gWXhJ/
add the parent :hover and apply css added their children
<li>
this is link
<span>Text test</span>
</li>
For the code in question, CSS to change span background color on mouse over:
#left_control_links li a:hover span.list_total_count {
background: none #aaa;
}
I am posting this, cause CSS specificity may have main rule in similar examples. Very good article at: http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
I have a basic menu, made from a horizontally aligned list (<li>), each containing an icon image and some text:
One of the <li> contains an extra image with display: none; so that the icon can be toggled (from a green to a red pepper, in this example.
The problem is that it doesn't align correctly on some browsers, as shown in the above image. My understanding was that in contrast to visibilty: hidden;, an element with display: none; should not affect the position of any other element and should render as if it's not there?
The browsers where it doesn't render correctly are Google Chrome and Safari - but only on MacOS(!?) and IE7 (I know, I know...) on Windows. Every other browser / OS combination I've tested works fine.
Here's the HTML:
<ul class="menu">
<li><img alt="Green Pepper" src="/green.png">li</li>
<li><img alt="Green Pepper" src="/green.png">li</li>
<li><img alt="Green Pepper" src="/green.png">li</li>
<li id="change">
<img alt="Red Pepper" src="/red.png" style="display: none;">
<img alt="Green Pepper" src="/green.png">
li
</li>
<li><img alt="Green Pepper" src="/green.png">li</li>
</ul>
Here's the CSS:
.menu li {
cursor: default;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
list-style-type: none;
position: relative;
text-align:center;
margin: 0 0 0 -25px;
padding: 8px 0 0 0;
width: 144px;
height: 35px;
display: inline-block;
background-image: url(../bct-white.png);
background-repeat: no-repeat;
color: #0091c1;
}
And for the icon images:
.menu img {
display: inline;
vertical-align: -25%;
padding-right: 6px;
}
I've also had to include a browser hack for IE7 because it doesn't recognise inline-block, coming from a separate stylesheet based on a conditional import (<!--[if lte IE 7]>):
.menu li {
zoom: 1;
display: inline;
}
Although, obviously that style isn't loaded on Chrome and Safari regardless of OS, so can't be causing my issue on Macs.
I know the quickest solution would be to refactor the HTML and the JavaScript manipulation of the show / hide of the icons, but I'd really like to know what causes this issue and how to resolve it.
Update
I've tracked the cause down. Basically, the element style of display: none; on the <img> element overrides the inline from the .menu img rule. Removing that, then toggling between block and inline allows you to reproduce the issue. This is obviously a browser bug, and while the element is not displayed being an in-line or block element should have no effect on the layout.
jsFiddles
Issue with Chrome and Safari on Macs only
Issue with extra CSS for IE7 only
Note! For me, the Fiddle page didn't load properly using IE7, but the direct link for the result iFrame is http://fiddle.jshell.net/z4dU7/3/show/
Bounty update!!!
I've posted one fix below, but it actually introduces the same layout problem in IE9! Please feel free to evolve or improve on my answer - or come to the table with something completely different! :)
Scrap Approach and Use Background Images
http://jsfiddle.net/P5CKC/2/
<ul class="menu">
<li><span>Li</span></li>
<li><span>Li</span></li>
<li><span>Li</span></li>
<li class="change"><span>Li</span></li>
<li><span>Li</span></li>
</ul>
CSS
ul.menu {
overlflow: hidden;
}
ul.menu li {
float: left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
text-align:center;
margin: 0 0 0 -25px;
width: 152px;
line-height: 35px;
height: 35px;
background: url(../bct-white.png) no-repeat;
color: #0091c1;
}
ul.menu li span {
background: url(/green.png) no-repeat 5px 6px;
display: block;
}
ul.menu li.change span {
background-image: url(/red.png);
}
CSS2.0 and browser compatibility
The code application I have provided is Css2.0 and should easily work in IE7 and above.
Removed img tags and implemmented aesthetics (images) as backgrounds
Extra span had to be added because CSS2 allows only 1 background image per element
Li tag holds the arrow background; span tag holds the pepper background
Updated id="change" to class="change". UNLESS you are 100% certain that you will only have one #change element, use a class. This is purely styling and it prevents you from having two menu lists on the same page.
Tweaked your CSS styling a bit as follows:
Removed top padding and increased the height. So your li elements are the same height BUT then added line-height: 35px -> this is the best way to vertically center text. Utlizing top padding works but it is prone to poor browser inconsistency.
Change li elements to floats. Floated elements are the most IE7 friendly method! Even IE6 will not bug out but I don't have that old version to test your webpage in. FYI - ul.menu has to have overflow: hidden to clear the floats.
position: relative;
cursor: default;
Unless you changed the defaults, you can keep these two properties out. cursor should be default. Position: relative is unnecessary - you aren't using absolute positioning or anything that warrants its need. Now, you can keep these in your declaration. I just like code to be as "slim" as possible.
final words:
Take a look at my CSS. Notice how I used ul.menu in all my declaration. You may want to get in the habit of doign the same; this provides the developer some insight on what the HTML looks like and more importantly - your css will not get overrided if you decide to add <div class=menu> later on. Specfically .menu img would apply to any image tag within the menu div.
Okay - that's it. Let me know if there are any clarfications.
FYI - seeing as this question has a bounty, if you provide me with the background images I can polish my code to suit your needs 100% - perhaps upload them in an edit of your answer.
There is whitespace between your elements. None of your other list items have that whitespace. Try removing all whitespace between those elements and see if that fixes your problem.
If it does, it just means that your HTML is parsing the content of your <li> as having a line break - which would be why you are seeing an issue. To solve this, wrap the text in your <li> with a <span>. When your browser parses HTML it will automatically trim whitespace between HTML tags and automatically fix the issue (without losing your formatting)
This is an odd one but I could recreate the issue in Firefox v22. The really odd part was that in the jsFiddle if I just hit "Tidy Up" and then hit "Run" and the problem was solved. As Matthew R mentioned this is likely due to the additional white space being removed.
Broken:
Tidy Up, Run, and Fixed
Here's an alternate method using background images:
Working Example
.menu li {
cursor: default;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
list-style-type: none;
position: relative;
text-align: center;
margin: 0 0 0 -25px;
padding: 8px 0 0 10px;
width: 118px;
height: 20px;
display: inline-block;
background-image: url(http://modmyi.com/attachments/forums/iphone-4-4s-new-skins-themes-launches/465481d1282224308-classified-hd-cydia-released-goldborder.png), url(http://i.stack.imgur.com/dmHl0.png);
background-position: 0% 0%, 44% 75%;
background-size: 128px, 18px;
background-repeat: no-repeat;
color: #0091c1;
}
.menu img {
display: inline;
vertical-align: -25%;
padding-right: 6px;
}
#change:hover {
background-image: url(http://modmyi.com/attachments/forums/iphone-4-4s-new-skins-themes-launches/465481d1282224308-classified-hd-cydia-released-goldborder.png), url(http://www.chiletownhotsauce.com/images/stories/Red%20bell%20pepper.jpg);
background-repeat: no-repeat;
background-position: 0% 0%, 44% 75%;
background-size: 128px, 18px;
}
<ul class="menu">
<li>li</li>
<li>li</li>
<li>li</li>
<li id="change">li</li>
<li>li</li>
</ul>
I think your issue is with the box model and display:inline-block. When I use display:inline-block in horizontal menus, I also use a clear fix for the parent and float:left; with the children.
In this example of the css, I put some values in the .menu that can be inherited and I used overflow:hidden; to address the clear fix. Then I used float:left; in the li to force them tight and avoid any weird spacing caused by the browsers defaults. And then I changed the vertical-align value to middle for the image. When toggled display:none; with inline, it all looked correct to me. I did not test in all the browsers listed. I also used the first piece of CSS there for the css reset, which may be redundant but I always find it useful on JSFiddle.
* {
margin:0;
padding:0;
}
.menu {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
list-style-type: none;
color: #0091c1;
overflow:hidden;
}
.menu li {
cursor: default;
position: relative;
text-align:center;
/* margin: 0 0 0 -25px; */
padding: 8px 0 0 0;
width: 118px;
height: 20px;
display: inline-block;
float:left;
background-image: url(http://modmyi.com/attachments/forums/iphone-4-4s-new-skins-themes-launches/465481d1282224308-classified-hd-cydia-released-goldborder.png);
background-repeat: no-repeat;
}
.menu img {
display: inline;
/* vertical-align: -25%; */
padding-right: 6px;
vertical-align:middle;
}
To resolve the (appearance of) the issue, change the vertical alignment of the icon images contained in the menu:
.menu img {
display: inline;
vertical-align: top;
margin-top: 2px;
padding-right: 6px;
}
On the affected browsers, the additional image (with display: none;) was altering the height of the containing element. Setting the <img> to display: none; meant that the display: inline; setting no longer applied and was positioned underneath the first image.
Just having the extra <img> displaying in-line fixes the vertical alignment, but obviously doesn't fix the issue as the image needs to be hidden without changing the position of the text.
This fix changes the vertical alignment from a percentage (-25%) to a fixed position, avoiding any (spurious) differences in the height of the containing element. I've then set the top margin of the image to get the desired spacing from the top edge of the element.
Update
This fix breaks the display in IE9 - same appearance as IE7 without this fix.
You made a mistake with the line-height
instead of 35px give 23px
<ul class="menu">
<li><span>Li</span></li>
<li><span>Li</span></li>
<li><span>Li</span></li>
<li class="change"><span>Li</span></li>
<li><span>Li</span></li>
</ul>
ul.menu {
overlflow: hidden;
}
ul.menu li {
float: left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
text-align: center;
margin: 0 0 0 -25px;
width: 152px;
line-height: 23px;
list-style: none;
height: 35px;
background: #ccc;
color: #0091c1;
}
ul.menu li span {
background: url(http://i.stack.imgur.com/dmHl0.png) no-repeat 5px 6px;
display: block;
}
ul.menu li.change span {
background-image: url(/red.png);
}
check the output
jsfiddle-link
I had the same issue with display:none; breaking my layout. I ended up just removing the style and using jQuery's:
$(".element").show();
$(".element").hide();
I'm fairly new to CSS. I've been studying on how to put up a horizontal menu with CSS by the given example. The html source code is as follows:
<ul>
<li>Home</li>
<li>Products</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
and the style sheet is as below.
body {
background-color: #000;
}
* {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
background-image: url(navi_bg.png);
height: 80px;
width: 663px;
margin: auto;
}
li {
float: left;
}
ul a {
background-image: url(navi_bg_divider.png);
background-repeat: no-repeat;
background-position: right;
padding-right: 32px;
padding-left: 32px;
display: block;
line-height: 80px;
text-decoration: none;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 21px;
color: #371C1C;
}
ul a:hover {
color: #FFF;
}
All this code display the horizontal menu perfectly, but I don't quite understand on how it is organized.
My question is: why do we need to set the display property of the anchor that is contained in the <li> tag to "block"? I learned that the anchor tag itself is inline element naturally. Does this mean by doing so it give the anchor tag ability to be displayed as block? So, I we can treat them as block in setting background and padding?
any help would be very much appreciated.
Adding display:block to the <a> element is not mendatory, but one advantage of it is it will take the full size of his parent (<li>) if you specify one (specially the height).
Also, since you're applying a background to the link, it's always a good thing to display it as a block, since most of the time you need to specify an height.