I hope YOU guys are doing good
I have just started learning Flexbox from CSS Tricks and some YT channels.
But when I used justify-content:space-around | space-between | space-evenly. None of them seems to work out.
And I could not find out the problem.
I would really appreciate if anyone can help me out.
.container-1 {
display: flex;
flex-direction: row-reverse;
// flex-wrap: wrap;
justify-content:space-between;
}
<html>
<body>
<div class="container-1">
<div class="item-1">
<h1>
Box One
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<div class="item-2">
<h1>
Box Second
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<div class="Item-3">
<h1>
Box Third
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
</body>
</html>
Related
Given this HTML:
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<hr />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<hr />
</div>
I would like a nice dingbat in place of very last horizontal rule, and a blank line for the first one.
However, consider this HTML:
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<hr />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
Here, there should be a blank line for the hr, and no dingbat.
I was thinking I would put the dingbat in the content after each hr, then remove the content for any HR followed by a p:
hr {
border: 0;
text-align: center;
}
hr::after {
content: "❧"
}
hr::after + p {
content: "";
}
That last rule, of course, doesn't work. :)
How do I set the ::after content only when followed by a p? Or, is there a way to select only the last occurrence of the hr if it has no following element?
Someone will point out to you, correctly, that there is no previous sibling selector, but you don't need one for this.
You can simply apply the dingbat to hr only when it's the last child like so:
div {
margin-bottom: 1em;
border: medium solid;
padding: 0 0.5em;
}
hr {
border: 0;
text-align: center;
}
hr:last-child::after {
content: "❧"
}
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<hr />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<hr />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<hr />
</div>
You can simplify and only consider the p element without hr:
Not for the last
p:not(:last-child)::after {
content: "❧";
display:block;
text-align:center
}
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
Only for the last:
p:last-child::after {
content: "❧";
display:block;
text-align:center
}
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
I am using bootstrap to do some collapsing and toggling of tabs and content. I will link the entire code at the bottom of this. Now, for right now the page I am working on is a static twig page. I was having trouble getting some linking to work in twig so I pulled the code to a plain html page just to see what happens. Basically, I have a Hide which basically collapses/hides the active tabbed content. Now, the problem is, in twig(with symfony 2) if I do that it goes to the home route. If I do href="/pagename" it just reloads the same page and I dont want it to do that. How do I get what it is working in plain html to work in my twig file?
p.s.: It's best to copy paste the code in your code editor because jsfiddle and codepen did not work properly for this code for some reason.
p.s.2: What I am trying to accomplish is on page load to have 4 links, and upon clicking one of them for new content/div element to appear. If I click on one of the other 3 links the div that is visible changes accordingly (bootstrap's dynamic tabs). Each of the 4 divs/tabs have a Hide link which upon clicking needs to close the collapsed tab/div.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Testing</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-3 text-center"><a data-toggle="tab" href="#one">One</a></div>
<div class="col-xs-3 text-center"><a data-toggle="tab" href="#two">Two</a></div>
<div class="col-xs-3 text-center"><a data-toggle="tab" href="#three">Three</a></div>
<div class="col-xs-3 text-center"><a data-toggle="tab" href="#four">Four</a></div>
</div>
<div class="row">
<div class="tab-content">
<div id="one" class="tab-pane">
<h3>Content One</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="text-right">Hide</p>
</div>
<div id="two" class="tab-pane">
<h3>Content Two</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="text-right">Hide</p>
</div>
<div id="three" class="tab-pane">
<h3>Content Three</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="text-right">Hide</p>
</div>
<div id="four" class="tab-pane">
<h3>Content Four</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="text-right">Hide</p>
</div>
</div>
</div>
</div>
</body>
</html>
Change your href="" to href="#" and see if that works out for you. ;-)
Why is my code not working as intended? background-color of the first article must be green. How I can do it without classes or id? P.S. I'm sorry but my post needs more text. I'm sorry but my post needs more text.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>stack</title>
<link rel="stylesheet" href="css/style_new.css">
</head>
<body>
<section>
<h1>This is H1 header</h1>
<article>
<p>
Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet Lorem ipsum dolor sit
</p>
</article>
<article>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
</p>
</article>
<article>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
</p>
</article>
</section>
</body>
</html>
CSS code:
section article:first-child {
background-color: green;
}
section article:last-child {
background-color: red;
}
Actually first child of section tag is h1 not article. So use below code instead,
section article:first-of-type {
background-color: green;
}
article is not the first-child of section - its h1
the first/last child selector does only target if article is the first or last child of its container.
possible css:
section article{
background-color:green;
}
section article + article{
background-color:transparent;
}
section article:last-child {
background-color: red;
}
see http://jsfiddle.net/rn4wgho2/
![enter image description here][1]
h1 required to remove the plug out of the section
This is H1 header
<article>
<p>
Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet Lorem ipsum dolor sit
</p>
</article>
<article>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
</p>
</article>
<article>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
</p>
</article>
</section>
I would like the following floated divs to line up vertically: The 4th div of class "box1"
should start at the bottom (after 5px margin) of the div that is above it, not at the bottom of the lowest div in the entire upper row, same for the following divs.
how can i do that with css.
(floating is not a must if there is another way to achieve this with css only)
fiddle
html:
<div id="conainer">
<div class="box1">
Lorem ipsum dolor sit amet, consectetur adipisicing eli
</div>
<div class="box1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna al
</div>
<div class="box1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
</div>
<div class="box1">
Lorem ipsum dolor sit amet, consectetur adipisicin
</div>
<div class="box1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>
<div class="box1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ul
</div>
</div>
css:
#conainer {display:block;}
.box1 {width: 31%; display:inline-block; border: thin solid black; margin:5px; float:left;}
CSS by itself may be extremely hard to set up rules like that to work with. However, if you know which boxes are going to be aligned on top of which boxes, then you could set up columns like so:
<div id="conainer">
<div class="column">
<div class="box1">
Lorem ipsum dolor sit amet, consectetur adipisicing eli
</div>
<div class="box1">
Lorem ipsum dolor sit amet, consectetur adipisicin
</div>
</div>
<div class="column">
<div class="box1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna al
</div>
<div class="box1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
</div>
<div class="box1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>
</div>
<div class="column">
<div class="box1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ul
</div>
</div>
</div>
Then, apply the CSS to each column to float left, while the boxes inside of it float to the bottom.
#conainer {
display:block;
}
.column {
width: 31%;
display:inline-block;
float:left;
}
.box1 {
border: thin solid black;
margin:5px;
float: bottom;
}
Example fiddle
Also, depending on what you're trying to achieve, equal height divs may help solve your problem. Example fiddle
Here is my markup:
<div id="why-us">
<span class="heading">Why Us?</span>
<div class="section">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="section">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
Here is my CSS:
#why-us { float: left; }
#why-us span.heading { font-size: 13pt; color: #3A3A3A; display: block; }
#why-us div.section { float: left; width: 400px; margin-right: 50px; }
#why-us div.section p { font-size: 9pt; }
How can I make it only apply margin-right: 50px; to each div.section EXCEPT for the last one? Can this be done in pure CSS only? I don't ideally want to specify a ".last" class, nor use pseudo classes as the site needs to work in all browsers.
EDIT: Is there any nicer way of doing this? As I am now generating the code using PHP, which means I have to add extra code to make it check for the last DIV. I know that isn't too bad but still I would prefer a more elegant solution :)
You could override the CSS in the last div, as in:
<div id="why-us">
<span class="heading">Why Us?</span>
<div class="section">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="section" style="margin-right: 0px;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
It's really ugly but I think it should work.
You could use child selectors as follows:
#why-us div.section:last-child{
margin-right:0;
}
Example: http://jsfiddle.net/Br2DG/