Hi I have the following foundation codepen:
https://codepen.io/ianims/pen/PmoqBZ
code:
$(document).ready(function () {
$(document).foundation();
});
body {
background-color: #a3d5d3;
}
#wrap {
position:relative; /* make this relative to have the inner div absolute without breaking out */
/* width: 200px; /* fix the width or else it'll be the entire page's width */
background: silver;
border: 1px solid grey
}
#text {
color:#ffffff;
margin-left: 70%;
position: absolute;
width:250px;
height:60%;
top: 0;
bottom: 0;
background: black;
opacity:0.5;
padding :20px;
}
<div class="row fullWidth">
<div class="large-12 columns">
<div id="wrap">
<div id="text">
<br /><br /><br /><br />
<h3>MCA Coding and MLC Compliance</h3>
<p>
This is some text which I need to show on the right hand side. This is some text which I need to show on the right hand side. This is some text which I need to show on the right hand side. This is some text which I need to show on the right hand side.
</p>
</div>
<img src="https://www.burgessyachts.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/0/0/00006250_13.jpg" />
</div>
</div>
</div>
On a large screen it works ok -- I want the text overplayed on the image over to the right - but if you shrink the screen down the text starts to disappear off to the right -- anyone any ideas how to keep it consistent on all screens???
thanks
It's better to position using the left: position as opposed to margin. You might also want to delete the height property so it accomodates more content.
#text {
padding-top: 2em; /*replaces the <br>s in your html*/
color: #ffffff;
position: absolute;
width: 250px;
/*height: 60%;*/
top: 0;
right:7.5%; /* instead of margin*/
background: black;
opacity: 0.5;
padding: 20px;
}
I made a codepen demo:
https://codepen.io/kemie/pen/pPoqOv
I am trying to create two divs using foundation.
I used this code:
<div id=”containerLeftWrap” class=”small-4 small-centered medium-offset-2 medium-2 medium-uncentered columns” >
…content…
</div>
<div id="containerRight" class="medium-7 columns">
<div id="aboutArea">
…content…
</div>
</div>
In small size it looks fine
but in the medium and large size it looks like this
instead of like this
I've tried to add:
style=”display:inline-block; vertical-align:top”
But then the first div (the smaller one) was stuck to the left side, in all sizes, like this:
Does someone have an idea how to solve this?
Thank you!!!!
Update:
I have this css:
#containerLeftWrap {
background-color: #262626;
height: 256px;
min-width: 245px;
padding-top: 28px;
border-radius: 7px;
margin-top: 60px;
}
#aboutArea {
width: 90%;
margin: 0 auto;
background-color: #262626;
border-radius: 7px;
padding-bottom: 15px;
}
Hi I want to have a dropdown list in my django form with a checkbox in front of every option in the drop down. I have tried using multiple choice field with selectmultiple widget but this displays every option with checkboxes on the page. They are not contained inside the drop down. is there a way to contain them inside the dropdown?
I see that you asked this four years ago so I doubt you are still looking for an answer, but I might as well provide in case someone else finds it!
Basically you want to make a div with an unordered list inside of it, where each item in that list contains a checkbox input.
Then, you use jQuery so that when you click on the div, it gets assigned the 'selected' class in its html.
Then you make your CSS so that the dropdown menu itself only shows up when it has the 'selected' class.
The JSFiddle is here (minus the django templating, obviously):
https://jsfiddle.net/lymanjohnson/2L71nhko/15/
And code is below:
HTML (django template):
<fieldset class="item toggle-item">
<div class="legend-container">
<legend>Choices</legend>
</div>
<ul class="scrollable-dropdown-list">
{% for choice in choices %}
<li>
<input type="checkbox" class="custom-control-input filter" id="choice_{{forloop.counter}}" name="choice" value="{{choice}}">
<label for="choice_{{forloop.counter}}"class="custom-control-label">{{choice}}</label>
</li>
{% endfor %}
</ul>
</fieldset>
JQUERY:
<script>
$(document).ready(function() {
// Listener for when you click on the dropdown menu
$('fieldset.toggle-item > .legend-container').on('click', (event) => {
// Adds or removes the 'selected' attribute on the dropdown menu you clicked
$(event.currentTarget).parent().toggleClass('selected')
// If you have multiple dropdown menus you may want it so that when you open Menu B, Menu A
// automatically closes.
// This line does that by removing 'selected' from every dropdown menu other than the one you clicked on.
// It's 'optional' but it definitely feels better if you have it
$('fieldset.toggle-item').not($(event.currentTarget).parent()).removeClass('selected')
})
// The user is probably going to expect that any and all dropdown menus will close if they click outside of them. Here's how to make that happen:
//This listens for whenever you let go of the mouse
$(document).mouseup(function(e)
{
// make this a variable just to make the next line a little easier to read
// a 'container' is now any
var dropdown_menus = $("fieldset.toggle-item");
// if the target of the click isn't a dropdown menu OR any of the elements inside one of them
if (!dropdown_menus.is(e.target) && dropdown_menus.has(e.target).length === 0)
{
// then it will de-select (thereby closing) all the dropdown menus on the page
$('fieldset.toggle-item').removeClass('selected')
}
});
})
</script>
CSS:
<style>
.item {
width: 33%;
margin: 2px 1% 2px 1%;
border: 0;
}
.item li {
list-style: none;
}
.scrollable-dropdown-list{
position: absolute;
max-height:200px;
width:33%;
overflow-y:scroll;
overflow-x:auto;
margin: 0;
padding-left: 1em;
border-style: solid;
border-width: thin;
border-color: grey;
background-color: white;
}
legend {
margin-bottom: 0;
font-size: 18px;
}
label {
font-weight: normal;
margin-left:20px;
}
.legend-container {
cursor: pointer;
width: 100%;
display: flex;
padding: 0;
margin-bottom: 0px;
font-size: 21px;
line-height: inherit;
color: #333;
border: 0;
border-bottom: none;
}
fieldset {
border-width: thin;
border-color: gray;
border-style: solid;
width:50px;
}
/* Note that all the browser-specific animation stuff is totally optional, but provides a nice subtle animation for the dropdown effect */
fieldset ul.scrollable-dropdown-list {
display: none;
-webkit-animation: slide-down .3s ease-out;
-moz-animation: slide-down .3s ease-out;
}
fieldset.selected ul.scrollable-dropdown-list {
display: block;
-webkit-animation: slide-down .3s ease-out;
-moz-animation: slide-down .3s ease-out;
}
#-webkit-keyframes slide-down {
0% {
opacity: 0;
-webkit-transform: translateY(-10%);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
}
}
#-moz-keyframes slide-down {
0% {
opacity: 0;
-moz-transform: translateY(-10%);
}
100% {
opacity: 1;
-moz-transform: translateY(0);
}
}
</style>
Dropdowns and checkboxes are HTML elements that are rendered by the browser using its built-in components. Those components don't have any support for combining them: in pure HTML, you simply can't combine a select with a check box.
The only way to do this would be to use components rendered purely in Javascript. Google's Closure UI tools is one set of controls I've used, but only because I used to work at Google: something like jQuery UI might have a version that's easier to use.
I've been searching for a good trick to make a Hide/Show content or a list with only CSS and no javascript.
I've managed to make this action:
<!DOCTYPE html>
<head>
<style>
#cont {display: none; }
.show:focus + .hide {display: inline; }
.show:focus + .hide + #cont {display: block;}
</style>
</head>
<body>
<div>
[Show]
/ [Hide]
<div id="cont">Content</div>
</div>
</body>
</html>
Demo here: http://jsfiddle.net/6W7XD/
And it's working but not as it should. Here is the problem:
When the content is shown, you can hide it by clicking "anywhere on the page". How to disable that? how to hide content "only" by clicking hide?
Thank you in advance!
I wouldn't use checkboxes, i'd use the code you already have
DEMO http://jsfiddle.net/6W7XD/1/
CSS
body {
display: block;
}
.span3:focus ~ .alert {
display: none;
}
.span2:focus ~ .alert {
display: block;
}
.alert{display:none;}
HTML
<span class="span3">Hide Me</span>
<span class="span2">Show Me</span>
<p class="alert" >Some alarming information here</p>
This way the text is only hidden on click of the hide element
This is going to blow your mind: Hidden radio buttons.
input#show, input#hide {
display:none;
}
span#content {
display:none;
}
input#show:checked ~ span#content {
display:block;
}
input#hide:checked ~ span#content {
display:none;
}
<label for="show">
<span>[Show]</span>
</label>
<input type=radio id="show" name="group">
<label for="hide">
<span>[Hide]</span>
</label>
<input type=radio id="hide" name="group">
<span id="content">Content</span>
I used a hidden checkbox to persistent view of some message. The checkbox could be hidden (display:none) or not. This is a tiny code that I could write.
You can see and test the demo on JSFiddle
HTML:
<input type=checkbox id="show">
<label for="show">Help?</label>
<span id="content">Do you need some help?</span>
CSS:
#show,#content{display:none;}
#show:checked~#content{display:block;}
Run code snippet:
#show,#content{display:none;}
#show:checked~#content{display:block;}
<input id="show" type=checkbox>
<label for="show">Click for Help</label>
<span id="content">Do you need some help?</span>
http://jsfiddle.net/9s8scbL7/
There is 3 rapid examples with pure CSS and without javascript where the content appears "on click", with a "maintained click" and a third "onhover" (all only tested in Chrome). Sorry for the up of this post but this question are the first seo result and maybe my contribution can help beginner like me
I think (not tested) but the advantage of argument "content" that you can add great icon like from Font Awesome (its \f-Code) or an hexadecimal icon in place of the text "Hide" and "Show" to internationalize the trick.
example link http://jsfiddle.net/MonkeyTime/h3E9p/2/
<style>
label { position: absolute; top:0; left:0}
input#show, input#hide {
display:none;
}
span#content {
display: block;
-webkit-transition: opacity 1s ease-out;
transition: opacity 1s ease-out;
opacity: 0;
height: 0;
font-size: 0;
overflow: hidden;
}
input#show:checked ~ .show:before {
content: ""
}
input#show:checked ~ .hide:before {
content: "Hide"
}
input#hide:checked ~ .hide:before {
content: ""
}
input#hide:checked ~ .show:before {
content: "Show"
}
input#show:checked ~ span#content {
opacity: 1;
font-size: 100%;
height: auto;
}
input#hide:checked ~ span#content {
display: block;
-webkit-transition: opacity 1s ease-out;
transition: opacity 1s ease-out;
opacity: 0;
height: 0;
font-size: 0;
overflow: hidden;
}
</style>
<input type="radio" id="show" name="group">
<input type="radio" id="hide" name="group" checked>
<label for="hide" class="hide"></label>
<label for="show" class="show"></label>
<span id="content">Lorem iupsum dolor si amet</span>
<style>
#show1 { position: absolute; top:20px; left:0}
#content1 {
display: block;
-webkit-transition: opacity 1s ease-out;
transition: opacity 1s ease-out;
opacity: 0;
height: 0;
font-size: 0;
overflow: hidden;
}
#show1:before {
content: "Show"
}
#show1:active.show1:before {
content: "Hide"
}
#show1:active ~ span#content1 {
opacity: 1;
font-size: 100%;
height: auto;
}
</style>
<div id="show1" class="show1"></div>
<span id="content1">Ipsum Lorem</span>
<style>
#show2 { position: absolute; top:40px; left:0}
#content2 {
display: block;
-webkit-transition: opacity 1s ease-out;
transition: opacity 1s ease-out;
opacity: 0;
height: 0;
font-size: 0;
overflow: hidden;
}
#show2:before {
content: "Show"
}
#show2:hover.show2:before {
content: "Hide"
}
#show2:hover ~ span#content2 {
opacity: 1;
font-size: 100%;
height: auto;
}
/* extra */
#content, #content1, #content2 {
float: left;
margin: 100px auto;
}
</style>
<div id="show2" class="show2"></div>
<span id="content2">Lorem Ipsum</span>
This is what I've used recently.
CSS
div#tabs p{display:none;}
div#tabs p.tab1:target {display:block;}
div#tabs p.tab2:target {display:block;}
div#tabs p.tab3:target {display:block;}
HTML
<div id='tabs'>
<h2 class="nav-tab-wrapper">
Pages
Email
Support
</h2>
<p id='tab1' class='tab1'>Awesome tab1 stuff</p>
<p id='tab2' class='tab2'>Tab2 stuff</p>
<p id='tab3' class='tab3'>Tab3 stuff</p>
</div>
https://jsfiddle.net/hoq0djwc/1/
Hope it helps somewhere.
Nowadays (2020) you can do this with pure HTML5 and you don't need JavaScript or CSS3.
<details>
<summary>Put your summary here</summary>
<p>Put your content here!</p>
</details>
First, thanks to William.
Second - i needed a dynamic version. And it works!
An example:
CSS:
p[id^="detailView-"]
{
display: none;
}
p[id^="detailView-"]:target
{
display: block;
}
HTML:
Show View1
<p id="detailView-1">View1</p>
Show View2
<p id="detailView-2">View2</p>
The answer below includes changing text for "show/hide", and uses a single checkbox, two labels, a total of four lines of html and five lines of css. It also starts out with the content hidden.
Try it in JSFiddle
HTML
<input id="display-toggle" type=checkbox>
<label id="display-button" for="display-toggle"><span>Display Content</span></label>
<label id="hide-button" for="display-toggle"><span>Hide Content</span></label>
<div id="hidden-content"><br />Hidden Content</div>
CSS
label {
background-color: #ccc;
color: brown;
padding: 15px;
text-decoration: none;
font-size: 16px;
border: 2px solid brown;
border-radius: 5px;
display: block;
width: 200px;
text-align: center;
}
input,
label#hide-button,
#hidden-content {
display: none;
}
input#display-toggle:checked ~ label#display-button {
display: none;
}
input#display-toggle:checked ~ label#hide-button {
display: block;
background-color: #aaa;
color: #333
}
input#display-toggle:checked ~ #hidden-content {
display: block;
}
I've got another simple solution:
HTML:
Hide Me
Show Me
<p id="alert" class="alert" >Some alarming information here</p>
CSS:
body { display: block; }
p.alert:target { display: none; }
Source: http://css-tricks.com/off-canvas-menu-with-css-target/
I know it's an old post but what about this solution (I've made a JSFiddle to illustrate it)... Solution that uses the :after pseudo elements of <span> to show/hide the <span> switch link itself (in addition to the .alert message it must show/hide). When the pseudo element loses it's focus, the message is hidden.
The initial situation is a hidden message that appears when the <span> with the :after content : "Show Me"; is focused. When this <span> is focused, it's :after content becomes empty while the :after content of the second <span> (that was initially empty) turns to "Hide Me". So, when you click this second <span> the first one loses it's focus and the situation comes back to it's initial state.
I started on the solution offered by #Vector I kept the DOM'situation presented ky #Frederic Kizar
HTML:
<span class="span3" tabindex="0"></span>
<span class="span2" tabindex="0"></span>
<p class="alert" >Some message to show here</p>
CSS:
body {
display: inline-block;
}
.span3 ~ .span2:after{
content:"";
}
.span3:focus ~ .alert {
display:block;
}
.span3:focus ~ .span2:after {
content:"Hide Me";
}
.span3:after {
content: "Show Me";
}
.span3:focus:after {
content: "";
}
.alert {
display:none;
}
Just wanted to illustrate, in the context of nested lists, the usefulness of the hidden checkbox <input> approach #jeffmcneill recommends — a context where each shown/hidden element should hold its state independently of focus and the show/hide state of other elements on the page.
Giving values with a common set of beginning characters to the id attributes of all the checkboxes used for the shown/hidden elements on the page lets you use an economical [id^=""] selector scheme for the stylesheet rules that toggle your clickable element’s appearance and the related shown/hidden element’s display state back and forth. Here, my ids are ‘expanded-1,’ ‘expanded-2,’ ‘expanded-3.’
Note that I’ve also used #Diepen’s :after selector idea in order to keep the <label> element free of content in the html.
Note also that the <input> <label> <div class="collapsible"> sequence matters, and the corresponding CSS with + selector instead of ~.
jsfiddle here
.collapse-below {
display: inline;
}
p.collapse-below::after {
content: '\000A0\000A0';
}
p.collapse-below ~ label {
display: inline;
}
p.collapse-below ~ label:hover {
color: #ccc;
}
input.collapse-below,
ul.collapsible {
display: none;
}
input[id^="expanded"]:checked + label::after {
content: '\025BE';
}
input[id^="expanded"]:not(:checked) + label::after {
content: '\025B8';
}
input[id^="expanded"]:checked + label + ul.collapsible {
display: block;
}
input[id^="expanded"]:not(:checked) + label + ul.collapsible {
display: none;
}
<ul>
<li>single item a</li>
<li>single item b</li>
<li>
<p class="collapse-below" title="this expands">multiple item a</p>
<input type="checkbox" id="expanded-1" class="collapse-below" name="toggle">
<label for="expanded-1" title="click to expand"></label>
<ul class="collapsible">
<li>sub item a.1</li>
<li>sub item a.2</li>
</ul>
</li>
<li>single item c</li>
<li>
<p class="collapse-below" title="this expands">multiple item b</p>
<input type="checkbox" id="expanded-2" class="collapse-below" name="toggle">
<label for="expanded-2" title="click to expand"></label>
<ul class="collapsible">
<li>sub item b.1</li>
<li>sub item b.2</li>
</ul>
</li>
<li>single item d</li>
<li>single item e</li>
<li>
<p class="collapse-below" title="this expands">multiple item c</p>
<input type="checkbox" id="expanded-3" class="collapse-below" name="toggle">
<label for="expanded-3" title="click to expand"></label>
<ul class="collapsible">
<li>sub item c.1</li>
<li>sub item c.2</li>
</ul>
</li>
</ul>
A very easy solution from cssportal.com
If pressed [show], the text [show] will be hidden and other way around.
This example does not work in Chrome, I don't why...
.show {
display: none;
}
.hide:focus + .show {
display: inline;
}
.hide:focus {
display: none;
}
.hide:focus ~ #list { display:none; }
#media print {
.hide, .show {
display: none;
}
}
<div><a class="hide" href="#">[hide]</a> <a class="show" href="#">[show]</a>
<ol id="list">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ol>
</div>
There is a pure HTML solution! Try the <details> element.
Implementation details from MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary
And a try it out example from W3: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_details
Browser support info is here: https://caniuse.com/details
After reading all the answers, I made this for whoever may still be looking for the trick: https://jsfiddle.net/Junip/do5xbkr6.
You now have the four ways to interact with links with CSS:
No form elements, no summary-details html tags, zero scripting.
#btn1::before { content: "Hover"; }
#btn1:hover::before { content: "Move"; }
#btn1:hover ~ #content { display: block; }
#btn2::before { content: "Hold down"; }
#btn2:active::before { content: "Release"; }
#btn2:active ~ #content { display: block; }
#btn2:active { opacity: 0; }
#btn3 a::before { content: "Click"; }
#btn3 a:focus::before { content: "Click away"; }
#btn3:focus-within ~ #content { display: block; }
#content {
display: none;
position: absolute;
top: 30%;
}
[id^="btn"] a {
text-decoration: none;
color: black;
}
#btn4 a[href="#revert"] { display: none; }
#content:target { display: block; }
#content:target ~ #btn4 a[href="#content"] { display: none; }
#content:target ~ #btn4 a[href="#revert"] { display: block; }
Does anyone have a suggestion for creating paragraph-type line spaces within a <li> tag that includes a hovered pop-up pseudo-class?
I have a <span> that pops up on a:hover and I want the text that pops up to be broken into 2 paragraphs. It works with <br> in FF but I want to do the right thing (now that I've discovered it's wrong!)...
html:
<div id="rightlist">
<ul>
<li><a href="">List item
<span>
words words words that are "paragraph" 1 of List item
<br><br>
different words that make up "paragraph" 2 of List item
</span></a></li>
css:
#rightlist {
margin-top: 10px; margin-right: 5px; width: 387px ; height: 239px ;
background-color: #7EBB11 ;
display: table-cell;
z-index: 100 ;
float: right ;
}
#rightlist ul {
text-align: left;
margin: 0;
margin-top: 6px;
font-family: sans-serif;
font-size: 20px ;
color: black ;
}
#rightlist a
{
display: table-cell;
text-decoration: none; color: black;
background: #7EBB11 ;
}
/*appearance of the <a> item (but before the <span> tag) on hover*/
#rightlist a:hover {
color: white;
}
/*appearance of the spanned content within <a></a> tags when not hovered */
/* %%%%% important - keep position:absolute in this div %%%%% */
#rightlist a span {
display: none;
position: absolute ;
margin-left: -412px;
top: -10px; left: 10px; padding: 10px ;
z-index: 100;
width: 380px; height: 222px;
color: white; background-color: #7EBB11;
font: 0.75em Verdana, sans-serif; font-size: 13px ; color: black;
text-align: left;
}
/*appearance of spanned content within <a> tags when hovered*/
#rightlist a:hover span {
display: table-cell ;
}
Err there's nothing wrong with having <br> inside <a> or <span>. It's perfectly valid according to the HTML 4.01 spec.
Edit: <li> can contain <p>, <br>, and pretty much anything else.
The spec is a bit hard to read but basically says:
LI can contain block or inline
block is made of P + some other things
inline is made of special + some other things
special is made of A + BR + some other things
Regarding <a> it says:
A can contain inline except A
inline... see above
Your problem may arise from the fact that you're using a <span> tag incorrectly.
Spans are supposed to be inline elements and you're styling it as though it were a block element. Admittedly you can force a span to behave as a block element by adding the right style, but this may not always be honoured by the various browsers out there.
Ideally you should be using a div instead. You can then use either p tags or further div tags to indicate the paragraphs (ideally p, since semantically they actually are paragraphs rather than unrelated blocks of text).
You could stick another span in there as a "fake" p tag:
<li><a href="">List item
<span>
<span>words words words that are "paragraph" 1 of List item</span>
<span>different words that make up "paragraph" 2 of List item</span>
</span></a></li>
And in your css:
#rightlist span span {display:block;margin:...}
Note anything you declare for #rightlist span will apply to #rightlist span span, so you might need to override some of the rules in #rightlist span span.
Why is it 'Wrong'?
your br tag should perhaps be coded as:
<br />
Why is your current way wrong ?
You can try this
<span>
<p>words words words that are "paragraph" 1 of List item</p>
<p>different words that make up "paragraph" 2 of List item</p>
</span>