I have a #comments element which contains .comment elements. I would like to have 5 vertical lines from left to right, each 1px in width, 100% height (till the end of the #comments element), with 20px between them and without images. I tried to do that myself, but my CSS-fu isn't that high. Any help would be much appreciated.
HTML:
<div id="comments">
<div class="comment level1">Lorem ipsum dolor sit amet</div>
<div class="comment level2">Lorem ipsum dolor sit amet</div>
<div class="comment level3">Lorem ipsum dolor sit amet</div>
</div>
CSS:
#comments {
width: 400px;
border: 1px solid black;
}
.comment {
margin: 10px 0;
}
.level1 {}
.level2 { margin-left: 20px; }
.level3 { margin-left: 40px; }
Demo.
Here's how I imagine it:
|[comment ]
| |[comment ]
| |[comment ]
| | |[comment]
Is there some reason you need to have all the divs as direct children of the outer parent div? If you nest the divs you can accomplish this very easily:
css:
div div {
border-left: 1px solid black;
padding-left:20px;
}
nested html
<div id="comments">
<div>Lorem ipsum dolor sit amet</div>
<div>Lorem ipsum dolor sit amet
<br/>
<div>Lorem ipsum dolor sit amet
<br/>
<div>Lorem ipsum dolor sit amet
<br/>
<div>Lorem ipsum dolor sit amet</div>
<div>Lorem ipsum dolor sit amet
<br/>
<div>Lorem ipsum dolor sit amet</div>
</div>
</div>
</div>
</div>
</div>
updated fiddle showing how it would look here nested down to 5 levels:
http://jsfiddle.net/webchemist/tuZB6/4/
Related
I'm trying to create a grid with three columns where the first column should be as wide as possible, except if there is text in the two other columns that could fill the space.
This is my working code:
.grid-wrapper {
width: 500px;
padding: 10px;
border-style: solid;
display: grid;
grid-template-columns: 1fr max-content max-content;
gap: 10px;
}
.ellipsis-item {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
max-width: 100px;
}
.item {
border-style: solid;
padding: 5px;
}
.header {
font-weight: bold;
}
<h2>Grid 1</h2>
<div class="grid-wrapper">
<div class="item header">Column 1</div>
<div class="item header">Column 2</div>
<div class="item header">Column 3</div>
<div class="item">1 Lorem ipsum</div>
<div class="item ellipsis-item">2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</div>
<div class="item ellipsis-item">3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</div>
</div>
<h2>Grid 2</h2>
<div class="grid-wrapper">
<div class="item header">Column 1</div>
<div class="item header">Column 2</div>
<div class="item header">Column 3</div>
<div class="item">1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</div>
<div class="item ellipsis-item">2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</div>
<div class="item ellipsis-item">3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</div>
</div>
In the case of "Grid 1", I would like the first column to only be as wide as it needs to be. I.e. I want to be able to see more text in column two and three.
In the case of "Grid 2", I would like the last two columns to have a maximum width of, lets say 100 px, or preferably, the width of the text of Column 2 and Column 3, respectively. Then I want the first column to fill the remaining space (basically as it looks now).
EDIT: Grid 1 and 2 are just examples of the same grid, I don't want two different stylings.
Is this getting close?
.grid-wrapper {
width: 500px;
padding: 10px;
border-style: solid;
display: grid;
gap: 10px;
}
.g1 {
grid-template-columns: auto auto auto;
}
.g2 {
grid-template-columns: auto 100px 100px;
}
.ellipsis-item {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.item {
border-style: solid;
padding: 5px;
}
.header {
font-weight: bold;
}
<h2>Grid 1</h2>
<div class="grid-wrapper g1">
<div class="item header">Column 1</div>
<div class="item header">Column 2</div>
<div class="item header">Column 3</div>
<div class="item">1 Lorem ipsum</div>
<div class="item ellipsis-item">2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</div>
<div class="item ellipsis-item">3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</div>
</div>
<br>
<br>
<h2>Grid 2</h2>
<div class="grid-wrapper g2">
<div class="item header">Column 1</div>
<div class="item header">Column 2</div>
<div class="item header">Column 3</div>
<div class="item">1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</div>
<div class="item ellipsis-item">2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</div>
<div class="item ellipsis-item">3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</div>
</div>
I removed max-width: 100px and used
grid-template-columns: auto minmax(100px, 1fr) minmax(100px, 1fr)
which is close enough to what I wanted.
Yes, I know, this question have been asked many times and a possible solution is to add style="display:block;" to the link.
For some reason this solution does not work with table style DIVs:
https://jsfiddle.net/exyv8jmw/1/
HTML:
<div class="table">
<div class="tablerow">
<div class="left">
<a href="/something.html" style="display:block">
This is a link</a>
</div>
<div class="right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
</div>
CSS:
.table{
width:500px;
display:table;
}
.tablerow{
display:table-row;
}
.left{
width:50%;
background:green;
display:table-cell;
padding:5px;
}
.right{
width:50%;
display:table-cell;
background:red;
padding:5px;
}
As you can see, the empty green space is clickable only horizontally, but not vertically. I also tried:
<div class="left">This is a link</div>
but it does not help.
You need to add height: 100%; to the link, .left, and .tablerow elements.
.table{
width:500px;
display:table;
}
.tablerow{
display:table-row;
height: 100%;
}
.left{
width:50%;
background:green;
display:table-cell;
padding:5px;
height: 100%;
}
.right{
width:50%;
display:table-cell;
background:red;
padding:5px;
}
<div class="table">
<div class="tablerow">
<div class="left">
<a href="/something.html" style="display:block;height:100%;">
This is a link</a>
</div>
<div class="right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
</div>
First set .left position to relative, Then set a tag position to absolute and width and height to 100%.
.table{
width:500px;
display:table;
}
.tablerow{
display:table-row;
}
.left{
width:50%;
background:green;
display:table-cell;
padding:5px;
position: relative;
}
.left a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.right{
width:50%;
display:table-cell;
background:red;
padding:5px;
}
<div class="table">
<div class="tablerow">
<div class="left">
<a href="/something.html" style="display:block">
This is a link</a>
</div>
<div class="right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
</div>
Can't you put the div inside the 'a' element?
<a href="/something.html" >
<div class="left">
This is a link </div>
</a>
Apply the 'left' class to the a element directly, i.e.:
this is a link
Although this does not allow for additional content, it does make the anchor fill the available space.
Part of the problem is that the anchor tag is, by default, a "span" type tag, which only fills a space as big as its content, disregarding internal divs.
You have to make the anchor tag act like a "block" style element, not its surrounding element, or an internal element.
You could add listener to the div id.
<div class="table" id="clik">
document.getElementById("clik").addEventListener("click", function(){
// document.location = "/something.html";
alert("hello");
});
I have an editable page and content, that consists of blocks of text and tags as separators bwetween paragraphs. I want to make distance between paragraphs larger and I found solution with
br {
display:block;
margin-top: 15px;
content: " "
}
but in this case multiple br tags in row are collapsed. Also i found solution with line-height, but in this case cursor on empty line looks weird. I can't use p tag, so are there any other solutions?
body {
display: flex;
}
.first {
margin-right: 30px;
}
.first br {
display: block;
margin-top: 15px;
content: " ";
}
.second br {
display: block;
margin-top: 15px;
line-height: 50px;
}
<body contenteditable="true">
<div class="first">
<h3>display:block solution</h1>
Lorem ipsum dolor sit amet
<br>
Lorem ipsum dolor sit amet
<br>
<br>
Lorem ipsum dolor sit amet
</div>
<div class="second">
<h3>line-height solution</h1>
Lorem ipsum dolor sit amet
<br>
Lorem ipsum dolor sit amet
<br>
<br>
Lorem ipsum dolor sit amet
</div>
</body>
but in this case multiple br tags in row are collapsed
Try adding a transparent border-top, to avoid the effect of collapsing margins.
body {
display: flex;
}
.first {
margin-right: 30px;
}
.first br {
display: block;
margin-top: 15px;
border-top: 1px solid transparent;
content: " ";
}
.second br {
display: block;
margin-top: 15px;
line-height: 50px;
}
<body contenteditable="true">
<div class="first">
<h3>display:block solution</h1>
Lorem ipsum dolor sit amet
<br>
Lorem ipsum dolor sit amet
<br>
<br>
Lorem ipsum dolor sit amet
</div>
<div class="second">
<h3>line-height solution</h1>
Lorem ipsum dolor sit amet
<br>
Lorem ipsum dolor sit amet
<br>
<br>
Lorem ipsum dolor sit amet
</div>
</body>
That achieves a double line height between the second and third line in the first example, at least on Chromium. Firefox seems not to have this problem in the first place, in that both of your example look the same. Have not tested Internet Explorer and Edge.
But this is a rather hack-y and error-prone solution. You say you “can’t” use proper paragraph elements - but you should be able to, otherwise your content editing system rather … well, sucks. This is not just a matter of “how it looks”, but also of semantics, and with that possibly search engine ranking, etc.
I'm currently creating a web page with Bootstrap and I'm using columns. My page looks like that:
I'd like to center the last column (in the second row) but the page is dynamic and I don't know how many containers there are.
I found this two solutions on Google:
1) Add this to my css:
.col-centered{
float: none;
margin: 0 auto;
}
2) Add this to the class tag attribute
col-lg-offset-4
But both solutions look like this:
That is not what i want. I want it to look like this:
How can i achieve this?
Bootstrap's columns are floating by default with css float property. With float we can't middle align columns. However with display: inline-block we can. All we need is to remove float from styles of columns and change them to inline-block with vertical-align: middle and you will get what you want. But don't forget to remove extra space that comes with inline-block.
Here is the trick.
.wrapper {
background: green;
padding: 20px 0;
}
.box {
border-radius: 10px;
margin-bottom: 30px;
background: #fff;
padding: 10px;
color: #000;
}
.center-align {
letter-spacing: -4px;
text-align: center;
font-size: 0;
}
.center-align [class*='col-'] {
display: inline-block;
vertical-align: top;
letter-spacing: 0;
font-size: 14px;
float: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrapper">
<div class="container center-align">
<div class="row">
<div class="col-xs-4">
<div class="box">
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="col-xs-4">
<div class="box">
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="col-xs-4">
<div class="box">
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="col-xs-4">
<div class="box">
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
</div>
<div class="container center-align">
<div class="row">
<div class="col-xs-4">
<div class="box">
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="col-xs-4">
<div class="box">
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="col-xs-4">
<div class="box">
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="col-xs-4">
<div class="box">
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="col-xs-4">
<div class="box">
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
</div>
</div>
Note: Setting font-size: 0; letter-spacing: -4px on parent and applying parent's font-size: 14px; letter-spacing: 0 back on child elements will remove white space that comes with inline-block.
Bootstrap has built-in functionality to achieve the layout you are after, without the introduction of additional CSS rules. Simply use the .col-md-offset-* class:
Move columns to the right using .col-md-offset-* classes. These classes increase the left margin of a column by * columns. For example, .col-md-offset-4 moves .col-md-4 over four columns.
Your layout would end up looking similar to this:
.show-grid {
margin-bottom: 15px;
}
.your-custom-div {
height: 50px;
background-color: green;
color: white;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div class="row show-grid">
<div class="col-md-4">
<div class="your-custom-div">
.col-md-4
</div>
</div>
<div class="col-md-4">
<div class="your-custom-div">
.col-md-4
</div>
</div>
<div class="col-md-4">
<div class="your-custom-div">
.col-md-4
</div>
</div>
<div class="clearfix visible-md"></div>
</div>
<div class="row show-grid">
<div class="col-md-4 col-md-offset-4">
<div class="your-custom-div">
.col-md-4 .col-md-offset-4
</div>
</div>
<div class="clearfix visible-md"></div>
</div>
</div>
</body>
</html>
EDIT #1: For your requirement of not knowing how many columns you will be fetching from your database for the second row, another option would be to use a conditional during the output of the HTML to also output a .col-md-offset-4 class if the modulo of the number of items in your collection divided by the number of columns is equal to 1, or proceed as usual otherwise. In ASP.NET with Razor, this would look something like this (the example below is kept simple on purpose to demonstrate the proposed logic, it can be refactored to it's own HTML helper class, accounting for other column sizes as well):
#{
bool lastItemShouldBeCentered = Foo.Count % 3 == 1;
for (int i = 0; i < Foo.Count; i++)
{
bool isLastItem = i == Foo.Count - 1;
if (isLastItem && lastItemShouldBeCentered)
{
<div class="col-md-4 col-md-offset-4">
// Foo[i] content here
</div>
}
else
{
<div class="col-md-4">
// Foo[i] content here
</div>
}
}
}
EDIT #2: Looks like I misread your requirement. For 1 left-over column, this solution will suffice. For more, I would go with #Muhammad's answer.
You need to add the last block of text into a different row and change the "col-md-4" to "col-md-12".
<div class="row">
<div class="col-md-4"> // column 1
bla bla bla
</div>
<div class="col-md-4"> //column 2
bla bla bla
</div>
<div class="col-md-4"> // column 3
bla bla bla
</div>
</div>
<div class="row">
<center>
<div class="col-md-12"> //last column, also note I changed it to 12
bla bla bla
</div>
</center>
</div>
Here's what I got:
<div class="slideshow">
<span style="font-size:12px; color:#333333; font-family:Lucida Grande,Lucida Sans Unicode,Calibri,Arial,sans-serif;">Lorum ipsum delore sit amet. Lorum ipsum delore sit amet. Lorum ipsum delore sit amet. Lorum ipsum delore sit amet. Lorum ipsum delore sit amet. Lorum ipsum delore sit amet. Lorum ipsum delore sit amet. Lorum ipsum delore sit amet. Lorum ipsum delore sit amet. Lorum ipsum delore sit amet.</span>
<span style="font-size:12px; color:#333333; font-family:Lucida Grande,Lucida Sans Unicode,Calibri,Arial,sans-serif;">Goodbye</span>
</div><br />
And the CSS:
/* slideshow */
.slideshow {
width:940px;
height:64px;
text-align:center;
background-image:url(../images/quotes.png);
position:relative;
}
.slideshow span {
display:block;
width:940px;
height:64px;
}
The <span>s are currently centered horizontally, but they should also be centered vertically. Is this possible?
The whole idea is to have testimonials on top the background image (quotes on the left and right side), but it doesn't quite look right without being centered both horizontally and vertically.
I'm sure I could somewhat get the desired effect using padding, but since each testimonial will be a different length I don't think that'd be a good approach.
if you know that the content of your span will never exceed one line of text, just set
.slideshow span {
line-height: 64px /* = the height of the containing div */
}
Or, if you know the height of the span:
.slideshow span {
display: block;
position: absolute;
height: 64px;
top: 50%;
margin-top: -32px; /* = height/2 */
}
Last option would be to use a table formed by a single cell in place of the div, and use the vertical-align property.
CSS:
<style>
div {
width:300px; height:300px;
text-align:center;
display:table-cell; vertical-align:middle;
}
</style>
HTML:
<div>
<span>The Span</span>
</div>
yes it is possible.
Use the CSS attribute vertical-align:middle.
If you want to align verticaly below or above the horizontal center position then Use like this :
vertical-align:5;
or
vertical-align:-5;