On a webpage, I have markup like the following:
<h3>Title Goes here</h3>
Link goes here
<h3>Next title</h3>
Next link
Some of these links have very long text and span multiple lines. I would like the following to occur:
There is spacing between the first heading's link and the second heading.
Links that span multiple lines have all lines but the first indented.
The way that this is accomplished currently is through the following CSS:
h2 + a, h3 + a, h4 + a, h5 + a, h6 + a {
margin: 0px 30px 20px 5px;
line-height:1.4;
display: inline-block;
padding-left: 10px;
text-indent: -10px;
}
The problem comes in because our links have the following formatting:
a {
color: #900;
text-decoration: none;
border-bottom: 1px dotted #333;
}
a:hover {
border-bottom: 1px solid #900;
}
Since the links under the headings have display: inline-block, the border-bottom does not go under the text of each line, but rather under the whole box that the link generates. I'm not sure if there is way to get what I want here, since display:inline-block seems necessary to get the margins and indenting that I want, but the border-bottom would only work with an inline element.
Is there a way to have my cake and underline it too, without altering the markup (eg wrapping the <a> elements with <p>)?
Shouldn't you just need to alter the line-height to be lower than 1.4? If not, please provide a visual.
I was able to use position: relative and a negative margin to achieve the indenting effect without resorting to text-indent, which required the inline-block. I added margins to the headers instead of the links in order to create the necessary spacing. The CSS is as follows:
h2 + a, h3 + a, h4 + a, h5 + a, h6 + a {
line-height:1.4;
margin-left: -10px;
position: relative;
left: 15px;
}
a+h2, a+h3, a+h4, a+h5, a+h6 {
margin-top: 20px;
}
Related
I would like to add padding-top: 20px; between h3 and body but not if h3 is preceded by another element (e.g., h2). Is this possible?
Adding padding-top to all headings gives the desired padding when a heading is preceded by body text but an undesired padding between headlines:
Note that this document is Rmarkdown created using knitr, so I don't have full control over all the html. A pure CSS-solution would be preferred.
UPDATE:
To anyone also using knitr for Rmarkdown, the solution turned out to be a rather complex targeting:
/* First h2 following h1 */
.level1 > .level2:nth-child(3) > h2 {
padding-top: 0px;
}
/* First h3 following h2 */
.level2 > .level3:nth-child(3) > h3 {
padding-top: 0px;
}
Looking at the generated HTML, I learned that the first h2 after a h1 was in the third element in level1 and that that element was called level2. Similarly for the first h3. This is what is targeted above. The structure is probably different in other documents so take a look yourself.
How about
body > h3:first-child {
padding-top: 20px;
}
That will affect only immediate child of body with a header3, with nothing in between.
Thanks to #Oram, for pointing out missing :first-child
You can use the > selector plus :first-child to target only a direct h3 child.
* {
margin: 0;
padding: 0;
}
.test {
background-color: #cccccc;
margin: 10px;
padding: 10px;
}
.test > h3:first-child { color: red; }
<div class="test">
<h3>Targeted h3</h3>
<p>Paragraph</p>
<h3>h3 not targeted</h3>
</div>
<div class="test">
<p>Paragraph</p>
<h3>h3 not targeted because of the p tag</h3>
<h3>h3 not targeted</h3>
</div>
Try this:
body > h3:first-child {
padding-top: 20px;
}
It will only apply the CSS to the first direct child of the body which is a h3.
How can you set a link inside of a li element to where its background is longer that the actual text and they are all even with one another?
CSS
.popoutsidebar li { margin-bottom: 20px; padding: 5px; }
.popoutsidebar li a { background-color: #E5E5E5; color: #B94A48; padding: 10px; border-radius: 5px; }
.popoutsidebar li a:hover { background-color: #B94A48; color: #FFFFFF; text-decoration: none; }
<a>nchor tags are inline by default. Try something like this:
.popoutsidebar li a { display:block }
The display property lets you define how a certain HTML element should be displayed.
display: block means that the element is displayed as a block, as paragraphs and headers have always been. A block has some whitespace
above and below it and tolerates no HTML elements next to it, except
when ordered otherwise (by adding a float declaration to another
element, for instance).
display: inline means that the element is displayed inline, inside the current block on the same line. Only when it's between two blocks
does the element form an 'anonymous block', that however has the
smallest possible width.
http://quirksmode.org/css/css2/display.html
In my site , there is a big space between each line . This is the css portions of that section. I have tried line-height but it is not working there.
#site-generator a {
color: #5D45A3;
font-weight: normal;
text-decoration: none;
}
You can check the site here . Check the footer area 'Latest News'. I would like to reduce the space between each post names.
Seems like you need to remove the height property from here:
.widget-area ul li {
font-size: 11px;
/* height: 23px; */ /* <- remove */
}
and here:
.widget ul li {
font-size: 11px;
/* height: 16px; */ /* <- remove */
}
Or set these heights as auto
Simply adapt the height value in your stylesheet to your needs.
Line-height should work to adjust the space between two lines.
.widget-area ul li {
font-size: 11px;
height: 16px; /* example */
line-height: 0.8em;
}
Press F12 in your favourite browser to access the developer console (I believe this works in the latest version of IE, FF and Chrome). Inspect the a element that has such an abnormal height. This shows that:
You are setting a line-height of 2.2em on #site-generator in style.css. If that style is deleted, it uses a line-height of 1.625 for body, input, textarea in style.css.
The distance between two li's in that menu is defined by .widget-area ul li and is 23px. If that style is deleted, the css for .widget ul li is used instead with a height of 16px.
You'll need to alter the first one to put the text of one link closer together. You'll need to alter the second one to put the different links closer together.
For the post titles use
#site-generator .widget_recent_entries a{
line-height:14px;
}
in
.widget-area ul li {width:auto !important;line-height:18px;}
Say I have a bunch of P, LI, or DIV elements, with nothing between them. I want to control the vertical spacing between them, so they don't fit so tightly. But I don't want to add any space top and bottom, since that is handled by the parent element and I don't need more. Is there a simple way to do this that works for all block elements?
Say I've got something like this :
p {
margin: 5px 0;
}
and then
<div>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</div>
But I don't want 5px above p 1, or below p 4, since the div already has padding and I don't want to go messing with that. I just want the 10px between p 1 and p 2, p 2 and p 3, etc.
I'm sure I could do something kludgy (and I have many times), but am looking for something cleaner that I don't have to do a lot of special-casing for this common situation.
Use adjacent selectors
p + p { margin-top: 10px; }
Basically the concept is that, if a p comes after another p give 10px margin in between.
You usage is something similar to
p + p, li + li, div + div {
margin-top: 10px;
}
This can also be done using :last-child or :first-child
Here is an example:
p, li, div {
margin-bottom: 10px;
}
p:last-child, li:last-child, div:last-child {
margin-bottom: none;
}
You can use adjacent selectors. You can define like this:
p + p{
margin-top:0;
}
OR
p ~ p{
margin-top:0;
}
p, li, div {
margin-bottom: 10px;
}
#parentID {
margin-bottom: -10px;
}
p { margin: 10px 0 0 0; }
p:first-child { margin: 0; }
That is, set a top margin of 10px for all p elements and other margins to zero, except for the first p element, for which you set even the top margin to zero.
This works more widely than many other approaches, which use contextual selectors that are not supported by old browsers. To get really maximal browser support, you would assign a class to the first p element in markup and use a class selector instead of p:first-child.
This is the simplest possible way, since CSS operates on elements, not on what’s between elements. So you need some way of distinguishing the first p element in a sequence of p elements.
Note that p { margin: 5px 0; } (mentioned in the question) would create vertical margins of 5px, not 10px, because adjacent vertical margins collapse.
Variations on this question have been asked many times. Vertical centering with CSS is a challenge.
I have a particular scenario, dealing with a list displayed horizontally. The markup is like this:
<ul id='ul1' class='c'>
<li><a href='javascript:void(0)'>Fribble Fromme</a></li>
<li><a href='javascript:void(0)'>Fobble</a></li>
<li><a href='javascript:void(0)'>Foo Fickle Pickle</a></li>
</ul>
The style is like this:
ul.c {
height:52px;
text-align:center;
}
ul li a {
float:left;
text-decoration:none;
border: 1px solid Maroon;
padding:2px 12px;
background:#FFEF8A;
line-height:1em;
width:100px;
}
ul li a:hover {
background: #CCC;
}
ul li {
height:52px;
display:inline-block;
}
The resulting list looks like this:
But I want all the boxes to be the same height, and I want the text to be vertically centered in each box. I can set the box-height by adding a height style for the A elements. The result looks like this:
...which is close to what I want, but the vertical-centering isn't happening.
I can set line-height for the text, as suggested in this post, to do the vertical centering. I can even pick different values of line-height for different A elements, if I know which of the elements will get multiple lines of text. But I don't know which ones will require multiple lines.
How can I get it to center when some of the A elements have text that wraps?
Old question, but the answer can now be updated with Flexbox.
a {
height: 60px;
display: flex;
align-items: center;
justify-content: center;
}
You could use display:table, etc. along with vertical-align:middle
ul.c {
text-align:center;
display:table;
}
ul li {
float:left;
}
ul li a {
text-decoration:none;
border: 1px solid Maroon;
padding:2px 12px;
background:#FFEF8A;
width:100px;
height:52px;
display:table-cell;
vertical-align:middle;
}
ul li a:hover {
background: #CCC;
}
Example: http://jsfiddle.net/kf52n/2/
I could not figure a way to do this in CSS. I found that I could do what I needed with Javascript, setting the padding-top and padding-bottom to appropriate values at runtime. The technique is to measure the "natural" height of the A element, then set the padding so that the A element is vertically centered.
here is the necessary js code:
function setHeightIntelligently(ulElement) {
var items, L1, i, anchor, availableHeight = ulElement.clientHeight,
naturalHeight, pad;
items = ulElement.children;
for(i=0, L1 = items.length;i<L1;i++){
if (items[i].tagName.toUpperCase() == 'LI') {
anchor = items[i].children[0];
naturalHeight = anchor.clientHeight;
pad = (availableHeight - naturalHeight)/2;
anchor.style.paddingTop= pad+'px';
anchor.style.paddingBottom= pad+'px';
}
}
}
function init() {
var element = document.getElementById('ul1');
setHeightIntelligently(element);
}
In the CSS, one must not explicitly set height or padding for the A elements. Doing that would cause the "natural" height to not be what we need it to be.
The result is like this:
To see it in action, go here.
in the css you have set the height and line-height to the same. Then you will get a rectangular box.
But still you are seeing space in the bottom the reason is due to padding
adding two values in padding adds top and bottom padding
padding: top bottom;
since it is 2 and 12 you are seeing huge space.
try this
height: 52px;
line-height:52px;
padding: 6px 6px; // here you have to tweak and see the output
vertical-align:center;
let me know it is working
line-height:250%; worked for me