Does anyone know the CSS that makes the bullet point sit at the top of a multi-line bulleted list? For some reason with the template that I am using the bullet point centers to the left instead of simply sitting next to the first word if I have more than one line of text.
Set the list style position to inside the list item, see this demo fiddle.
CSS:
ul {
list-style-position: inside;
}
This is not an answer per-se but it may give others an insight to a similar visual situation with a different set of circumstances.
I had the same issue, like so:
My HTML looked like this:
<ul>
<li>
Link with several lines. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, commodi!
<p>Lorem ipsum dolor sit amet.</p>
</li>
<li>
Link with several lines. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, commodi!
<p>Lorem ipsum dolor sit amet.</p>
</li>
</ul>
And the CSS like this:
a {
display: inline-block;
vertical-align: middle;
}
See the offending part? The vertical-align: middle; declaration.
There are two solutions:
Solution 1
Remove the vertical-align: middle; declaration altogether.
Solution 2
Change the value: vertical-align: middle; to vertical-align: top;.
Result (as expected in the beginning):
Hope this helps.
You could do something like this:
(css)
li div:before
{
background-image:url('bullet.png');
}
(html)
<ul>
<li>
<div>
text<br />
more text
</div>
</li>
</ul>
Related
i need some advice on how to properly center text and left or right position images within an 'a' tag.
the goal is to have button with:
- left aligned image
- text centered horizontally but left aligen if more lines of text
- all elements should be centered vertically.
- must work on most modern browsers (ex. IE below 9 does not matter)
- only using CSS
i made an exampel which seems to work with static heights (ex. 100px)
here's my Fiddle: https://jsfiddle.net/CtH9k/5819/
--
but how does i make this work properly width dynamic heights, especially the text is giving my problems.
line-height: 100%;
here's my fiddle with dynamic heights https://jsfiddle.net/CtH9k/5820/
any good advices on what i may be doing wrong, perhaps some great tutorials or thoughts on this topic.
First, be carefull. When you use position:absolute you have to add position:relative to the parent you want to position your element with. In your first jsfiddle it looked like it's working because your a, div and body are in the same position. In the second, your image gets "lost" because you added a span wrapper.
You can use this css:
top:50%;
transform: translateY(-50%);
With both absolute and relative position and you will always be sure that whatever the container or your element height it will always be centered.
so I added these properties to your current ones:
.spanText {
position:relative;
top:50%;
transform: translateY(-50%);
}
.imgWrapper{
top:50%;
transform: translateY(-50%);
}
a {position:relative;}
and it's working (try changing the "200px" height to whatever you wish:
JSFIDDLE
you can try this one:
<div>
<a href="#">
<span class="imgWrapper">
<img src="https://33.media.tumblr.com/avatar_11e745804f61_128.png" /></span>
<span class="spanText">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</a>
</div>
DEMO FIDDLE
Try flexbox.
a {
display: flex;
align-items: center;
}
a .textWrap {
flex: 1;
display: flex;
flex-flow: wrap;
justify-content: center;
}
<div>
<a href="#">
<img src="https://33.media.tumblr.com/avatar_11e745804f61_128.png" />
<span class="textWrap">
<span class="spanText">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</span>
</a>
<a href="#">
<img src="https://33.media.tumblr.com/avatar_11e745804f61_128.png" />
<span class="textWrap">
<span class="spanText">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</span>
</a>
</div>
I am no guru at CSS so please excuse what might be a basic question. I have an annoying problem which I can't seem to fix:
Here is my text without CSS line-height:
I would like to move the text up closer to the heading tags so I did this:
<h2>Loren Ipsum Dol Tjovanuu</h2>
<p style="line-height:0px;">
<i>Lorem ipsum dolor sit amet, consectetur adipiscing elit ...</i>
</p>
<h2>Neque porro quisquam est qui dolorem ipsum</h2>
<p style="line-height:0px;">
<i>Lorem ipsum dolor sit amet, consectetur adipiscin.</i>
</p>
The Result
The result is perfect and exactly what I want, but... the problem comes when I resize the browser.
Problem Resizing the browser
My Question
Why is the text condensing on browser resize? What am I doing wrong? Should I not use the line-height property? Any workaround for this?
The line-height property is used to control how much vertical space is allocated for each line. In general, it is used to adjust how much space there is between lines within an element.
line-height: 1 means that lines are exactly big enough to fit the tallest letters and lowest descenders, with no space between. A line-height of more than 1 means there is some extra space between lines, and less than 1 will result in lines overlapping.
line-height: 0 means that a line of text has no vertical space allocated to it, so all lines will overlap each other in one line. That is what you are seeing here: the text is wrapping onto a second line, which is rendered over the top of the first line.
What you are trying to do is adjust the space between elements, not the space between lines in a single element. For this, the recommended approach is to adjust either margin or padding. Consider adjusting the margins of your elements until you have your desired vertical rhythm.
For a really detailed explanation of how all three properties work, see this CSS Tricks article on the box model.
Example
body { font-family: sans-serif; }
.cramped h2 {
margin: 0.4em 0 0.2em;
}
.cramped p {
font-style: italic;
margin: 0;
}
<section class="cramped">
<h2>Loren Ipsum Dol Tjovanuu</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit ...</p>
<h2>Neque porro quisquam est qui dolorem ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscin.</p>
</section>
Add this to your CSS:
h2 {
margin-bottom: -10px;
}
h2 tags have margins by default
Here is the JSFiddle demo
<h2>Loren Ipsum Dol Tjovanuu</h2>
<p style="line-height:23px;">
<i>Lorem ipsum dolor sit amet, consectetur adipiscing elit ...</i>
</p>
<h2>Neque porro quisquam est qui dolorem ipsum</h2>
<p style="line-height:23px;">
<i>Lorem ipsum dolor sit amet, consectetur adipiscin.</i>
</p>
try this it works fine on my browser
try this
p{margin-top:-10px; font-style:italic;}
#media screen and (max-width:768px){
h2{font-size:18px;}
p{font-size:14px}
}
Line height usage is for setting the distance (height) of each line. 0 value gives no distance so you have this problem.
You should let the line-height in the default value and reset default h2 and p element margin.
line-height
On block level elements, the line-height property specifies the
minimum height of line boxes within the element.
On non-replaced inline elements, line-height specifies the height that
is used to calculate line box height. On replaced inline elements such
as buttons or other input element, line-height has no effect. [1]
h2, p {
margin: 0;
}
<h2>Loren Ipsum Dol Tjovanuu</h2>
<p>
<i>Lorem ipsum dolor sit amet, consectetur adipiscing elit ...</i>
</p>
<h2>Neque porro quisquam est qui dolorem ipsum</h2>
<p>
<i>Lorem ipsum dolor sit amet, consectetur adipiscin.</i>
</p>
Reference: MDN - line-height - w3.org - line-height
I'm trying to get a vertical list of <li>'s of varying height, where each has two <p> tags next to each other and has a height of the tallest <p> tag; the <p> on the left has a fixed width (128px) and the <p> on the right should take up the rest of the page but not wrap underneath the first <p>.
Here's sample HTML:
<ul>
<li> <!-- height = the tallest of the two p tags -->
<p class="category">Something (128px wide)</p>
<p class="description">Something long...
Shouldn't wrap underneath .category
</p>
</li>
<li> <!-- beneath the li above, probably different height -->
<p class="category">Another thing</p>
<p class="description">Another long description...</p>
</li>
</ul>
What should the CSS look like?
Flexbox can do the trick for you.
ul {
width: 300px;
}
li {
width: 100%;
clear: both;
display: flex;
flex-direction: row;
}
li p {
display: inline;
float: left;
background-color: #eeeeee;
}
p.category {
width: 128px;
}
<ul>
<li>
<!-- height = the tallest of the two p tags --->
<p class="category">Something (known width)</p>
<p class="description">Something long... Shouldn't wrap underneath .category
</p>
</li>
<li>
<!-- beneath the li above, probably different height -->
<p class="category">Another thing</p>
<p class="description">Another long description...</p>
</li>
</ul>
More Info:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
There are several ways to skin this cat. If I'm understanding what you're after correctly, I think that using table-row and table-cell display properties may be the easiest way to go.
Here's a jsfiddle:
https://jsfiddle.net/s2jzh31z/2/
That includes the following,
HTML:
<ul>
<li>
<p class="category">Something (known width)</p>
<p class="description">Something long and multiple lines.
Shouldn't wrap underneath category.
Lorem ipsum dolor sit amet consecteur adipiscing elit no numi.
Lorem ipsum dolor sit amet consecteur adipiscing elit no numi.
Lorem ipsum dolor sit amet consecteur adipiscing elit no numi.
Lorem ipsum dolor sit amet consecteur adipiscing elit no numi.
Lorem ipsum dolor sit amet consecteur adipiscing elit no numi.
Lorem ipsum dolor sit amet consecteur adipiscing elit no numi.</p>
</li>
<li>
<p class="category">Another thing(known width)</p>
<p class="description">Something to the right,
determines the height of this "<li>"</p>
</li>
</ul>
CSS:
ul {
margin: 0;
}
li {
clear: both;
display: table-row;
width: 100%;
}
p {
display: table-cell;
padding: .5em;
vertical-align: top;
}
p.category {
width: 128px;
}
I took the liberty of vertical aligning and adjusting the padding a bit to make it look neater. The vertical align was one of the benefits I was looking for in using the table-row / table-cell approach.
To be semantically correct and 'new age' you could do this using CSS3's Flexbox layout but if this is table data (looks to be, using category and description) then you could restructure it as a table (which also helps if you need to support older browsers).
HTML would look like this:
<table>
<tr>
<td class="category">Something (known width)</td>
<td>Something long and multiple lines.sdsdsdsdsdsdsdsdsdsdsdsdddddddddddddddddddddddddddddddsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsssssssssssssssssssssssssssssdddddddddddddddddddddddsdssdsssssssssssssssssssssssssss
Shouldn't wrap underneath .category</td>
</tr>
<tr>
<td class="category">Another (known width)</td>
<td>Another long and multiple lines.
Shouldn't wrap underneath .category</td> </tr>
</table>
and your CSS:
.category {
width: 128px;
}
I have a list and I want line items with long text to flow to the second row which would have a shorter line height than the line height between regular line items. For example:
<ul style="list-style:none">
<li>
Hotel Chain
</li>
<li>
Taxi Service
</li>
<li>
Tourist Trap & Retail Plaza
</li>
<li>
Travel Company
</li>
<li>
Local Olive Oil Company
</li>
</ul>
So hopefully that makes it clear what I'm wanting. Thanks for helping!
{EDIT}
I changed the code above.
The design is responsive, so when the screen shrinks the list width shrinks and some lines that took up one line then takes up two lines. I want those with two lines to have a shorter line height.
It's not clear what effect you are trying to achieve but there is a pseudo-element of ::first-line which might be what you are after
ul {
width: 200px;
}
li {
margin-bottom:1rem;
line-height: 1;
}
li::first-line {
line-height: 2;
}
<ul>
<li>lorem</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam soluta ex ipsam dignissimos, provident assumenda!</li>
<li>lorem</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, magni!</li>
<li>Lorem ipsum dolor sit.</li>
</ul>
::first-line # MDN
You can do that natively this paragraphs.
<p>First line item</p>
<p>Second line item</p>
<p>This is the third line item that will<br>wrap on a new line but have a<br>smallerline-height than others</p>
<p>Fourth line item</p>
<p>This fifth line item is the same as<br>the third in that its line-height<br>is different because it has multiple lines</p>
<p>And the sixth line is the same with<br>a smaller line-height</p>
No need to css, or you can specify a width to your paragraphs if you don't want do write the BRs.
http://jsfiddle.net/8q6wgw2x/
HTML:
<div class="heading">
<h2 class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
<a class="action" href="#">Print</a>
</div>
Desired default look:
| Lorem ipsum dolor sit [Print] |
| amet, consectetur adipiscing elit. |
Desired look on small screen (using media-queries):
| Lorem ipsum dolor sit |
| amet, consectetur |
| adipiscing elit. |
| [Print] |
Not desired:
| [Print] |
| Lorem ipsum dolor sit amet, |
| consectetur adipiscing elit. |
Not desired:
| Lorem ipsum dolor sit [Print] |
| amet, consectetur |
| adipiscing elit. |
Remarks:
Text may be any long.
Action element is constant height and variable width.
I see no way to do this using only CSS.
Right now I use JS (Harvey lib) to put floated DOM element before text on bigger screen.
Any ideas?
/// EDIT - moved to answer (sorry for mess)
There's no easy way to achieve both results using only CSS without modifying your markup. There are a few tricks you can use to try to emulate the behavior you want, though.
Trick 1: Use Absolute Positioning
Set the link to position:absolute;top:0;right:0; (and the container to position:relative; if needed). Then, use .text::before{display":block;content' ';float:right;} to place a gap where the print link will appear.
Trick 2: Double Links
You could place a link before/in the <h2> to float right for large displays, then hide it and show a (formerly-hidden) second link as a block element below the text on small displays.
Thanks to suggestions above, I finally decided to break pure semantics structure and put .action element before .text, so it floats easily with proper text wrapping. Adding the behavior desired for smaller screen was quite easy with the constrains about .action element size:
cssdeck.com/labs/epcoxk7o
HTML:
<div class="heading">
<a class="action" href="#">Print</a>
<h2 class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
</div>
CSS:
.action {
float: right;
line-height: 20px;
padding: 5px 70px;
background: #eee;
}
.text {
line-height: 30px;
}
#media (max-width: 30em) {
.heading {
position: relative;
padding-bottom: 20px;
}
.action {
position: absolute;
bottom: 0;
left: 0;
}
}
Other solution would be what #cimmanon suggested: cssdeck.com/labs/9bntxaro