I'm an amature web developer, just getting my feet wet with my first proper html project.
I'm trying to build a webpage where you have a 'tab' selection in the top row and the currently selected tab shows a different section on the main page (hiding the other sections when not selected). I've done this using a radio input inside a label inside a table made of divs, and defined all of what I think is the correct CSS. (see below)
But the tabs do not work: depending on what I change, either every section shows up at once, or none of them do.
Here's my HTML:
<div class="sheet-table">
<div class="sheet-table-row sheet-candara">
<div class="sheet-col">
<label class="container" title="Adventure tab">
<input type="radio" name="attr_tab" class="sheet-tabs sheet-tab1" value="1">
<span class="sheet-tabs sheet-tab1 sheet-center">SECTION 1</span>
</label>
</div>
<div class="sheet-col">
<label class="container" title="Lifestyle tab">
<input type="radio" name="attr_tab" class="sheet-tabs sheet-tab2" value="2">
<span class="sheet-tabs sheet-tab2 sheet-center">SECTION 2</span>
</label>
</div>
<div class="sheet-col">
<label class="container" title="Options tab">
<input type="radio" name="attr_tab" class="sheet-tabs sheet-tab3" value="3">
<span class="sheet-tabs sheet-tab3 sheet-center">SECTION 3</span>
</label>
</div>
</div>
</div>
Then later on I have the section content (which I've commented out here):
<div class="sheet-section-tab1">
<!-- section 1 'adventure' content -->
</div>
<div class="sheet-section-tab2">
<!-- section 2 'lifestyle' content -->
</div>
<div class="sheet-section-tab3">
<!-- section 3 'options' content -->
</div>
And the CSS (a portion of which was copied and edited from W3Schools.com):
.container {
display: inline-block;
position: relative;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
}
.sheet-tabs {
position: inherit;
padding: 0.2em 0.9em;
z-index: 9999;
}
.container:hover input ~ .sheet-tabs {
background-color: rgba(30, 20, 20, 0.3);
border-radius: 0.5em;
content: attr(title);
}
.container input:checked ~ .sheet-tabs {
background-color: rgba(30, 20, 20, 0.7);
color: white;
border-radius: 0.5em;
}
div[class^="sheet-section"] {
display: none;
}
.sheet-section-tab1,
.sheet-section-tab2,
.sheet-section-tab3 {
display: none;
}
input.sheet-tab1:checked ~ div.sheet-section-tab1,
input.sheet-tab2:checked ~ div.sheet-section-tab2,
input.sheet-tab3:checked ~ div.sheet-section-tab3{
display: block;
}
Now, the strange thing that I discovered while trying to get this to work was that it does work when I take the inputs and spans out of their respective labels and div tables, like so:
<input type="radio" name="attr_tab" class="sheet-tabs sheet-tab1" value="1">
<span class="sheet-tabs sheet-tab1 sheet-center">SECTION 1</span>
<input type="radio" name="attr_tab" class="sheet-tabs sheet-tab2" value="2">
<span class="sheet-tabs sheet-tab2 sheet-center">SECTION 2</span>
<input type="radio" name="attr_tab" class="sheet-tabs sheet-tab3" value="3">
<span class="sheet-tabs sheet-tab3 sheet-center">SECTION 3</span>
<div class="sheet-section-tab1">
<!-- section 1 'adventure' content -->
</div>
<div class="sheet-section-tab2">
<!-- section 2 'lifestyle' content -->
</div>
<div class="sheet-section-tab3">
<!-- section 3 'options' content -->
</div>
But then I lose all the CSS styling that I worked so hard on...
Is there any way to get the functionality that I desire without compromising on the style, or am I doing something fundamentally wrong here? Or is there just a simple mistake I'm not seeing? Thanks!
(Also, I don't know if this will be relevant to any answers, but for reasons specific to my hosting platform I can't use the id attribute).
Using just HTML and CSS to create a tab system like you propose is possible, but is going to be messy and overall inefficient, and styling of the page will be difficult due to how the radio buttons will need to be aligned in order to achieve this. I highly recommend using java script to accomplish what you are doing. Here is a link to a HowTo on JavaScript tabs. However, if it is a must for this project to be accomplished through the strict use of HTML and CSS, let me know and I'll take a deeper look. From now what I can tell you is a possible way to accomplish this is to use the "+" selector. Structure the page in a way so that it alternate between radio button and the div/tab to be displayed, as so:
radio button
div
radio button
div
radio button
div
This way, the radio button is assigned to the div below it. Now you can target a checked radio button through the use of ":checked" and then using "+" which will select the closest div to the radio button. This can be accomplished in css using the following code:
.tabs {
display: none;
}
[name="radiobutton"]:checked + .tab {
display: block;
}
Cheers!
Have you tried adding in your Css overflow:Hidden;
Related
In my HTML file example.html I have:
<a onclick="document.getElementById('D').innerHTML='some text'">
clickme
</a>
where D is the id of some <div>.
So by clicking on 'clickme', some text is inserted in div D.
Is there a way to do this without using Javascript, and without using href to an external html file?
That is 'some text', the text to be inserted in div 'D', should be defined completely within my example.html.
As some comments have said, yes, HTML is static by nature, but you can still accomplish this using css, because css has its own events an almost state management
I present two options:
1. You can have your content hidden and then show it when click
explanation: we use a checkbox to emulate the button, then in css we see if the checkbox is checked then we make the content visible
2. You can use pseudoelements to insert content using CSS
If you dont want this content in your HTML and you want to literaly insert it without JS, you can use a pseudoelement to "create" a new element and place it in your div (note the quotes there) so basically css will use a pseudoelement, but we use the same checkbox trick to let CSS handle the state and not need JS
As you can see it can be somewhat done, in the sense that you are adding content (to the users eyes) without javascript, but not without limitations:
Resources:
https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements
Working examples of both alternatives:
/*hide the inputs/checkmarks and the content*/
input, .visibleAfterClick {
display: none;
}
/*position the fake button*/
label {
position: relative;
display: block;
cursor: pointer;
border: 1px black solid;
text-align: center;
}
/*show the hidden content when element is clicked*/
input:checked~div .visibleAfterClick {
display: block;
}
/*'Insert' content when element is clicked*/
input:checked~div .InsertAfterClick::after {
display: block;
content: 'Content inserted after click';
}
<h1>Option 1</h1>
<input id="check01" type="checkbox" name="menu" />
<label for="check01">Fake button</label>
<div>
Content always visible <br />
<span class="visibleAfterClick">
Content visible after click
</span>
</div>
<br /><br /><hr /><br /><br />
<h1>Option 2</h1>
<input id="check02" type="checkbox" name="menu" />
<label for="check02">Fake button</label>
<div>
Content always visible <br />
<span class="InsertAfterClick">
</span>
</div>
I want to exclude materialize css for some items in my view. Eg: i dont want to display materialize styles to check box under table. It causes problems with my internal jquery library. Please check attached image. I gave below html content in my table > td. I want to display this as browser default checkbox.
In my application i am using http://materializecss.com
<div class="checkbox">
<input type="checkbox" class="filled-in dt-checkboxes">
<label></label>
</div>
To remove the Materialize styles from the checkboxes, you first need to understand how the Materialize checkboxes are created:
The "real" checkbox is removed with opacity: 0; and some positioning
A "fake" checkbox is created with the help of the pseudo elements ::before and ::after on the <span> element
So all you need to do is hide the pseudo elements and make the real checkbox visible again. I created a class .reset-checkbox to demonstrate the effect:
[type="checkbox"].reset-checkbox,
[type="checkbox"].reset-checkbox:checked,
[type="checkbox"].reset-checkbox:not(checked) {
opacity: 1;
position: relative;
}
[type="checkbox"].reset-checkbox+span::before,
[type="checkbox"].reset-checkbox+span::after,
[type="checkbox"].reset-checkbox:checked+span::before,
[type="checkbox"].reset-checkbox:checked+span::after {
display: none;
}
[type="checkbox"].reset-checkbox+span:not(.lever) {
padding-left: 10px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css" rel="stylesheet" />
<form action="#">
<div>
<label>
<input type="checkbox" class="filled-in" />
<span>Test with Materialize</span>
</label>
</div>
<div>
<label>
<input type="checkbox" class="filled-in reset-checkbox" />
<span>Test with removed styles</span>
</label>
</div>
</form>
Pay attention to a higher specificity of the selectors here, to make sure that the Materialize styles are overwritten.
I have to create a navigation menu using HTML and CSS without Javascript for my eBay store. What I want to do is to create many radio buttons with many labels and clicking on a label make label bold and make appear a text.
First effect on JSFiddle: https://jsfiddle.net/fb2yn5ts/
(click on label make a text appears)
My Label
<div id="descrizione">
This is some text
</div>
css
#descrizione{
display: none;
}
#descrizione:target{
display: block;
}
Second effect on JSFiddle: https://jsfiddle.net/cv83q9ow/
(Click on label make label bold)
<div>
<input type="radio" id="check" class="check-with-label" />
<label for="check" class="label-for-check">My Label</label>
<div>
css:
.check-with-label:checked + .label-for-check {
font-weight: bold;
}
I can't merge these effects into one, do you know why and how can I solve this?
Thank you very very much!
OK guys I solved this problem by doing this:
HTML:
<input type="radio" name="navbar_menu_store" id="input_description" class="radio_item_menu">
<label for="input_description" class="label_item_menu">Description</label>
<input type="radio" name="navbar_menu_store" id="input_shipping" class="radio_item_menu">
<label for="input_shipping" class="label_item_menu">Shipping</label>
<div id="contentDescription"><p class="testo_scheda">
This is some text</p>
</div>
<div id="contentShipping"><p class="testo_scheda">
This is some other text</p>
</div>
css:
#input_description:checked ~ #contentDescription, #input_shipping:checked ~ #contentShipping {
display: block;
}
#contentDescription, #contentShipping{
display: none;
}
.radio_item_menu:checked + .label_item_menu {
font-weight: bold;
}
Preview: https://jsfiddle.net/LLornfn8/
Thank you very much anyway!
span{
text-align: justify;
}
<input type="checkbox" name="type"><span>Excessive Reinforcement</span><br>
I want to align the label for excessive reinforcement checkbox like image2
For example
Thanks in advance
First of all use <label> instead of <span>.
If we use bootstrap we generally manage this with classes but here if we talk about custom css this can be a solution.
label{
text-align: justify;
float: left;
line-height: 20px;
}
input{
float:left;
}
<input type="checkbox" id="check" name="type"><label for="check">Excessive<br>Reinforcement</label><br>
Above i added id in checkbox and for in label so that checkbox will be selected on click of label also.
If you can change the HTML
The best and new method to use checkbox is
<label><input type="checkbox" name="type">Excessive Reinforcement</label>
span {
text-align: justify;
}
.make-table {
display: table-cell;
/* make it behave like table-cell. so that they fall beside each other. */
}
<div class="any-class">
<label><span class="make-table"><input type="checkbox" name="type"></span>
<span class="make-table">Excessive<br> Reinforcement</span>
</label>
</div>
<hr>
<div style="color:red">Wrap it inside any-class and align as you want.
<br>I added LABEL tag, so that, even if your user clicks on the text, the checkbox will work.</div>
Make this simple change!
This is one way of doing it:
<label for="type-1">
<input id="type=1" type="checkbox" name="type"> Excessive Reinforcement
</label><br>
When using input elements, you should always provide a label with the for attribute assigned the id of the input element. And also make sure the input element ids are unique.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Highlight label if checkbox is checked (html/css)
I would like label to get a red border if radio is checked.
Code so far:
HTML:
<center style="margin-top:20px;">
<label class="big">
This is a box 1
<input name="radio-group1" type="radio" />
</label>
<br/>
<label class="big">
This is a box 2
<input name="radio-group1" type="radio" class='sex' />
</label>
</center>
CSS:
.big {
display:block;
width:100px;
height:100px;
background-color:gainsboro;
cursor:pointer;
}
.big:hover {
border:1px solid blue;
}
No JS solutions please. I have been trying with sibling and children selectors but unsuccesfuly.
JSFIDDLE: http://jsfiddle.net/QqVCu/10/
You would have to rearrange the HTML so the label/red-border-element comes after the radio.
HTML
<center style="margin-top:20px;">
<div class="big">
<input id="box1" name="radio-group1" type="radio" />
<label for="box1">This is a box 1</label>
</div >
<br/>
<div class="big">
<input id="box2" name="radio-group1" type="radio" />
<label for="box2">This is a box 2</label>
</div >
</center>
CSS
.big {
display:block;
width:100px;
height:100px;
background-color:gainsboro;
cursor:pointer;
position: relative;
}
.big:hover {
border:1px solid blue;
}
label {
width: 100%;
height: 100%;
display: block;
}
input[type="radio"] {
position: absolute;
top: 20px;
left: 50%;
}
input[type="radio"]:checked + label {
border: red 1px solid;
}
http://jsfiddle.net/QqVCu/12/
But it starts getting weird. A little javascript wouldn't hurt.
edit: this version is a little cleaner
You can use :checked selector, but this will only work for the checkbox itself. Otherwise there is no way to do it in pure CSS - you will have to resort to JavaScript (which I do realize you said you wanted to avoid - but pure CSS won't do it).
What you are trying is not possible with current structure of your html. There is no such thing as a parent selector. There is a sibling selector though, wich could be used to accomplish what you are after. First you would have to restructure your html to something like this:
<div>
<input name="radio-group1" id="box1" type="radio" />
<label class="big" for="box1">
This is a box 1</label>
</div>
<div >
<input name="radio-group1" id="box2" type="radio" class='sex' />
<label class="big" for="box2" >
This is a box 2</label>
</div>
I made label and input siblings in stead of parent/child. They will still work the same thanks to their id and for attributes. I also changed their order to be able to use the next sibling selector. The extra div is required to do some absolute positioning to put them back in the same order you had in your fiddle.
Next i added a few lines of css. The real magic happens here:
div input:checked+label {
border: 1px solid red;
}
This will selected all 'next sibling' of an input that is checked and has a div as a parent. You could further finetune this to only work on radio's and in reality i would add a class to the wrapper div, but this is just a 'proof of concept'.
The rest of the css i added is just some positioning to mimic the layout you had in your example. This will also need some finetuning.
The working example is here: http://jsfiddle.net/QqVCu/14/