I made a table with divs, I want to use (summary, details), but when I click on show I want the text to start from the left side under "lala". Please help
Hey, I made a table with divs, I want to use (summary, details), but when I click on show I want the text to start from the left side under "lala". Please help
<div class="div-table dd">
<div class="div-table-row">
<div class="div-table-col">Title</div>
<div class="div-table-col y">Description</div>
<div class="div-table-col"></div>
</div>
<div class="div-table-row">
<div class="div-table-col">lala</div>
<div class="div-table-col x">yy</div>
<details>
<summary></summary>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis id fugit dolorum voluptates saepe, numquam labore quae quia! Laboriosam at natus explicabo minima voluptatibus eligendi neque eum voluptatum aut! Officiis nostrum magni officia minus facilis omnis facere numquam sint porro, nobis aperiam odio commodi, veritatis consequatur, architecto illo accusamus sequi.s</div>
</details>
</div>
</div>
.div-table {
display: table;
width: 90vw;
border: 1px solid #666666;
border-spacing: 5px;
}
.div-table-row {
display: flex;
justify-content: space-between;
margin: 10px;
padding: 10px;
width: auto;
background-color: #ccc;
clear: both;
}
.div-table-col {
float: left;
display: table-column;
width: 33%;
}
.x{
width: 100%;
}
.y{
width: 33%;
}
details{
text-align: right;
}
summary{
padding: 0;
text-align: right;
}
details>summary {
white-space: nowrap;
list-style: none;
}
summary::-webkit-details-marker {
display: none
}
summary::after {
content: 'show ▼';
color: #007bff;
}
details[open] summary:after {
content: "hidden ▲";
}
https://codepen.io/olivier-mazur/pen/XWYdKVw
Related
This question already has answers here:
Add a CSS border on hover without moving the element [duplicate]
(4 answers)
CSS hover border makes elements adjust slightly
(14 answers)
Closed 4 years ago.
I'm new and building one of my first pages. I'm working on the nav for my site. I have it mostly how I want it but when I hover over a link there is a small space to the leftover hover box. its a small space between the border and the hover box. Please help.
So the stack overflow won't let me post the question without talking a little bit more so I am going to ramble a bit. About random things. Talk nonsense until it allows me to post the damn question. I don't know how much detail I need when it won't let me post just a codepen link. It seems much easier to do that.
* {
box-sizing: border-box;
}
#bar {
text-align: center;
min-width: 100%;
height: 70px;
position: relative top;
vertical-align: top;
background-color: #24284C;
}
#wrapper {
background-color: #3B3F64;
}
nav {
width: 100%;
letter-spacing: 0.1em;
}
nav a {
text-decoration: none;
display: block;
padding: 25px;
border-right: #3B3F64 1px solid;
color: black;
}
nav ul {
list-style-type: none;
}
nav li {
display: inline-block;
}
nav a:link {
color: #ffffff;
}
nav a:visted {
color: purple;
}
nav a:focus {
color: gray;
}
nav a:hover {
background-color: #4b4f75;
border-bottom: gray 2px solid;
}
body {
font-family: Verdana, Geneva, Tahoma, sans-serif;
background-color: #090C26;
}
header {
width: 100%;
padding: 0%;
margin: 0%;
font-size: 250%;
height: 100px;
}
main {
margin: auto;
width: 80%;
padding: 10px;
overflow: auto;
}
h1 {
text-align: center;
}
footer {
background-color: #24284c;
font-size: small;
font: italic;
text-align: center;
}
<div id="wrapper">
<header>
<h1 id="big">Angry Nerd Cafe</h1>
</header>
<div id="bar">
<nav>
<ul>
<li>Home</li>
<li>Menu</li>
<li>Location</li>
<li>Calendar</li>
<li>Order</li>
<li>Contact</li>
</ul>
</nav>
</div>
<main>
<h1>About us</h1>
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora
incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
</p>
</main>
<footer>
Copyright © 2018 <a href="mailto:joshuamwolfe#gmail.com">
joshuamwolfe#gmail.com </a>
</footer>
</div>
inline-block elements won't be flush against each other when there are spaces between the HTML elements in the document. There are a few sort-of hacks to fix that, but instead I'd recommend employing flexbox here.
Change this:
nav ul {
list-style-type: none;
}
nav li {
display: inline-block;
}
...to this:
nav ul {
display: flex;
justify-content: center;
list-style-type: none;
}
Demo below:
* {
box-sizing: border-box;
}
#bar {
text-align: center;
min-width: 100%;
height: 70px;
position: relative top;
vertical-align: top;
background-color: #24284C;
}
#wrapper {
background-color: #3B3F64;
}
nav {
width: 100%;
letter-spacing: 0.1em;
}
nav a {
text-decoration: none;
display: block;
padding: 25px;
border-right: #3B3F64 1px solid;
color: black;
}
nav ul {
display: flex;
justify-content: center;
list-style-type: none;
}
nav a:link {
color: #ffffff;
}
nav a:visted {
color: purple;
}
nav a:focus {
color: gray;
}
nav a:hover {
background-color: #4b4f75;
border-bottom: gray 2px solid;
}
body {
font-family: Verdana, Geneva, Tahoma, sans-serif;
background-color: #090C26;
}
header {
width: 100%;
padding: 0%;
margin: 0%;
font-size: 250%;
height: 100px;
}
main {
margin: auto;
width: 80%;
padding: 10px;
overflow: auto;
}
h1 {
text-align: center;
}
footer {
background-color: #24284c;
font-size: small;
font: italic;
text-align: center;
}
<div id="wrapper">
<header>
<h1 id="big">Angry Nerd Cafe</h1>
</header>
<div id="bar">
<nav>
<ul>
<li>Home</li>
<li>Menu</li>
<li>Location</li>
<li>Calendar</li>
<li>Order</li>
<li>Contact</li>
</ul>
</nav>
</div>
<main>
<h1>About us</h1>
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora
incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
</p>
</main>
<footer>
Copyright © 2018 <a href="mailto:joshuamwolfe#gmail.com">
joshuamwolfe#gmail.com </a>
</footer>
</div>
I have some problem with creating inside border of image. Tried to do it with border, outline and box-shadow but didn't get the result.
HTML:
<div class="item">
<img src="https://i.ytimg.com/vi/vsZDSXlHqI4/maxresdefault.jpg" alt="">
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo blanditiis, distinctio. Odio eveniet vel nobis, consequuntur atque, dolorum debitis quae nesciunt esse quasi beatae, odit repudiandae dolore animi delectus ad nostrum, quas maiores hic labore?
Nisi, expedita sint, qui ullam itaque natus optio error accusantium placeat, culpa reiciendis, quos tempora.</p>
<button>Some action</button>
</div>
CSS:
div.item:hover {
//some code
img {
border-bottom: 5px solid #8cc34b;
margin-bottom: -5px;
}
}
My fiddle: JSFiddle
Here I got the outside border but I want to get inside border of image.
Thanks for help.
Wrap your img in div, and on hover use :after pseudo-element:
div.item {
min-height: 300px;
overflow: auto;
width: 300px;
background-color: white;
border: 2px solid #8cc34b;
border-radius: 5px;
text-align: center;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
div.item img {
width: 100%;
display: block;
}
div.item p {
text-align: left;
padding-left: 10px;
padding-right: 10px;
}
div.item button {
height: 35px;
width: 120px;
margin: 0 auto;
margin-bottom: 20px;
}
div.item .img-container {
position: relative;
}
div.item:hover h3 {
color: #8cc34b;
}
div.item:hover .img-container:after {
content: '';
position: absolute;
left: 0;
bottom: 0;
height: 5px;
width: 100%;
background-color: #8cc34b;
}
<div class="item">
<div class="img-container">
<img src="https://i.ytimg.com/vi/vsZDSXlHqI4/maxresdefault.jpg" alt="">
</div>
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo blanditiis, distinctio. Odio eveniet vel nobis, consequuntur atque, dolorum debitis quae nesciunt esse quasi beatae, odit repudiandae dolore animi delectus ad nostrum, quas maiores hic labore?
Nisi, expedita sint, qui ullam itaque natus optio error accusantium placeat, culpa reiciendis, quos tempora.</p>
<button>Some action</button>
</div>
I also added display: block on img, because inline img creates extra whitespace below.
Another answer:
To create a color bar like in the image you liked to, I wrapped your image in a DIV with class x and added the following CSS (including a pseudo element):
img {
width: 100%;
}
.x {
display: block;
position: relative;
}
.x:before {
content: '';
position: absolute;
z-index: -1;
bottom: 7px;
left: 0;
right: 0;
height: 5px;
background-color: #8cc34b;
}
Instead of a hover rule for the image, I just make the x DIV visible by changing its z-index:
div.item:hover {
h3 {
color: #8cc34b;
}
.x:before {
z-index: 1;
}
}
Adjust the bottom setting as desired to move it up or down:
https://jsfiddle.net/9wLx9p0f/5/
We can simply do this with outline-offset property:
outline: 1px solid #fff;
outline-offset: -10px;
Try this in the div you wants, if it works for you.
Why is the second div going under the first? Both of them are "float" elements. When I set a width of the second div, all works well. But I expect these two divs are being located to one row.
.one {
background-color: green;
float: left;
border: 1px solid green;
}
.two {
float: left;
background-color: red;
border: 1px solid red;
}
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
<div class="one">Menu</div>
<div class="two">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto beatae delectus eveniet impedit, labore minima nihil nostrum sint voluptates. Animi illum minima officia placeat quo rem repellendus reprehenderit vel.</div>
This is because you didn't define the width's of the floating elements. If you define a max-width, say 50%, they will no longer be on the same line. I recommend giving max-width in contrast to width because, I believe you don't want to give the elements, a static width. Plus, they should be flexible to take as much as space they want, unless they shouldn't mess up with one another, which happens after 50%.
.one {
background-color: green;
float: left;
border: 1px solid green;
max-width: 50%;
}
.two {
float: left;
background-color: red;
border: 1px solid red;
max-width: 50%;
}
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
<div class="one">Menu</div>
<div class="two">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto beatae delectus eveniet impedit, labore minima nihil nostrum sint voluptates. Animi illum minima officia placeat quo rem repellendus reprehenderit vel.</div>
You can use flex instead float.
Add display: flex; for a container. And flex: 0 0 auto; for the first div and flex: 1 1 auto; for the second. flex: 0 0 auto; means that element will take as much space as needed. flex: 1 1 auto; means that element will take all available space.
.container {
display: flex;
}
.one {
flex: 0 0 auto;
background: red;
}
.two {
flex: 1 1 auto;
}
<div class="container">
<div class="one">Menu</div>
<div class="two">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto beatae delectus eveniet impedit, labore minima nihil nostrum sint voluptates. Animi illum minima officia placeat quo rem repellendus reprehenderit vel.</div>
</div>
You can just give them some width options in %, or pixels using calc CSS functions, something like this...
.one {
background-color: green;
float: left;
border: 1px solid green;
display: block;
width: 10%;
}
.two {
width: 70%;
float: left;
background-color: red;
border: 1px solid red;
display: block;
}
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
<div class="one">Menu</div>
<div class="two">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto beatae delectus eveniet impedit, labore minima nihil nostrum sint voluptates. Animi illum minima officia placeat quo rem repellendus reprehenderit vel.</div>
Flexbox is what you really want I think, float is great but always felt like a hack as opposed to a real solution.
You can use flexbox across all browsers, IE8 can't handle it but that's not a supported browser anymore. I suggest you read up on it on w3schools they generally have quite nice tutorials.
.flex-container {
display: flex;
}
.one,
.two {
padding: 5px;
}
.one {
background-color: green;
border: 1px solid green;
}
.two {
background-color: red;
border: 1px solid red;
}
html,
body {
margin: 0;
}
<div class="flex-container">
<div class="one">Menu</div>
<div class="two">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto beatae delectus eveniet impedit, labore minima nihil nostrum sint voluptates. Animi illum minima officia placeat quo rem repellendus reprehenderit vel.</div>
</div>
As to why it's was happening with float, unless you say otherwise anything display block will take up the entire space allotted, which is 100%, with one of the divs taking up 100% there is no room for the other one on the same line.
You could have given it a set width, or changed the display to inline and removed the float left from .two (though that would have been a little odd looking).
.one {
float: left;
background-color: green;
border: 1px solid green;
}
.two {
display: inline;
background-color: red;
border: 1px solid red;
}
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
<div class="one">Menu</div>
<div class="two">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto beatae delectus eveniet impedit, labore minima nihil nostrum sint voluptates. Animi illum minima officia placeat quo rem repellendus reprehenderit vel.</div>
When I resize browsers window, my div gets down to bottom and a big space comes in top. I want that my div should remain in center of page even if resize the size of window lesser than size of div. In my school they haven't teach about this but I want to align this div in center of page
<!DOCTYPE html>
<html>
<head>
<title>CSS centering Done Right.</title>
<style>
* {
margin: 0;
padding: 0;
}
html, body, .m {
height: 100%;
width: 100%;
}
.m {
opacity:1;
font-size: 0;
overflow: auto;
text-align: center;
/*styling>>*/
background-color: #8F1C10;
}
.m::before {
content:'';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.m>div {
display: inline-block;
font-size: 19px;
margin: 20px;
max-width: 320px;
min-height: 20px;
min-width: 300px;
padding: 14px;
vertical-align: middle;
/*styling*/
color:white;
background-color: #140A08;
outline:none;
}
</style>
</head>
<body>
<title>CSS centering Done Right.</title>
<div class="m">
<div contenteditable="true">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, enim, possimus, voluptates, quia voluptatibus voluptas eum quaerat iure aperiam asperiores debitis fuga itaque quibusdam a ad odio assumenda iusto voluptatem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, ex quia consequatur quae quasi amet veniam est quas error quos perferendis ducimus non similique in soluta magnam dolore molestias veritatis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, doloremque iste magni in eveniet ipsa odio mollitia eligendi magnam placeat aliquam hic reprehenderit reiciendis itaque assumenda ratione delectus. Alias, quis.</div>
</div>
</body>
</html>
margin: auto; is what you need. Try this:
<style>
* {
margin: 0;
padding: 0;
}
/*html, body, .m {
height: 100%;
width: 100%;
}*/
.m {
opacity:1;
font-size: 0;
overflow: auto;
text-align: center;
margin: auto;
/*styling>>*/
background-color: #8F1C10;
}
.m::before {
content:'';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.m>div {
display: inline-block;
font-size: 19px;
margin: 20px;
max-width: 320px;
min-height: 20px;
min-width: 300px;
padding: 14px;
vertical-align: middle;
/*styling*/
color:white;
background-color: #140A08;
outline:none;
}
</style>
I'm trying to add a black line after a header tag in HTML using css :after pseudo class. Here is the code:
.container {
max-width: 700px;
margin: 0 auto;
padding: 10px;
letter-spacing: 0.07em;
line-height: 1.5em;
font-size: 130%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
h1:after {
display: inline-block;
content: "";
height: 2px;
background: black;
width: 200px;
margin-left: 5px;
margin-top: 8px;
}
<div class="container">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio quia accusamus aperiam magni perspiciatis dignissimos, reiciendis dolor temporibus esse dolores quasi, reprehenderit necessitatibus culpa quas nesciunt quaerat porro! Ab, laborum.</p>
<p>Dolorem eligendi cumque deserunt illo quas aut pariatur inventore, optio provident maxime consectetur, soluta sed, aperiam illum beatae. Quidem beatae aliquid, impedit sit in accusamus rem necessitatibus, velit fugiat! Cupiditate.</p>
</div>
Codepen: http://codepen.io/angelangelesiii/pen/YXwPJb
I want that long black line to span the entire width left by the header itself.
Note: I don't want to try spanning the line to 100% then putting the header in front of it with a white background. It's an illusion but not the answer I'm trying to find. And as much as possible, no JS solutions I'm keeping this as simple as it can be.
Use position: absolute; and width:100% will give you desired output.
Check following.
.container {
max-width: 700px;
margin: 0 auto;
padding: 10px;
letter-spacing: 0.07em;
line-height: 1.5em;
font-size: 130%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
h1::after {
background: none repeat scroll 0 0 black;
content: "";
display: inline-block;
height: 2px;
margin-left: 5px;
margin-top: 8px;
position: absolute;
top: 0.5em;
width: 100%;
}
h1 {
overflow: hidden;
position: relative;
}
<div class="container">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio quia accusamus aperiam magni perspiciatis dignissimos, reiciendis dolor temporibus esse dolores quasi, reprehenderit necessitatibus culpa quas nesciunt quaerat porro! Ab, laborum.</p>
<p>Dolorem eligendi cumque deserunt illo quas aut pariatur inventore, optio provident maxime consectetur, soluta sed, aperiam illum beatae. Quidem beatae aliquid, impedit sit in accusamus rem necessitatibus, velit fugiat! Cupiditate.</p>
</div>
Hope it helps.
Nevermind I have answered my question (once again)
.container {
max-width: 700px;
margin: 0 auto;
padding: 10px;
letter-spacing: 0.07em;
line-height: 1.5em;
font-size: 130%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
h1 {
display: -webkit-flex;
display: flex;
width: 100%;
}
h1:after {
-webkit-flex: 3;
-flex: 3;
display: inline-block;
content: "";
height: 2px;
background: black;
margin: auto 0 auto 5px;
}
I have used flexbox to solve this. I know that flexbox have some issues but this works for me so it's good.
I tried to solve it using tables display properties
h1 {
display: table;
white-space: nowrap;
}
h1:after {
display:table-cell;
content: "";
width: 100%;
border-bottom: 2px solid black;
}