I'm working on a website menu with html in flask and css.
Issues:
I expect that when I click on the label (label for="toggle") the checkbox is checked, however this is not working.
I expect that when the checkbox is checked the below code is triggered, however this is not working.
Ad2)
.toggle:checked + .wrapper > aside {
margin-left: 0;
}
.toggle:checked + .wrapper > section {
margin-right: -40%;
}
html file:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Application Name</title>
<meta name="description" content="Application Name">
<link rel="favorite icon" href="{{ url_for('static', filename='favicon.ico') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/base-theme.css') }}" id="mode_stylesheet">
<script type="text/javascript" src="{{ url_for('static', filename='js/switch_mode.js') }}"></script>
</head>
<body>
<div class="topnav">
<table class="topnav_left">
<tbody>
<tr>
<td>
<label for="toggle" class="toggler">
<input type="checkbox" id="offcanvas" class="toggle">
<span class="navicon"></span>
</label>
</td>
</tr>
</tbody>
</table>
<table class="topnav_right">
<tbody>
<tr>
<td>
<div class="topnav_mode">
<table>
<tbody>
<tr>
<td>
<label for="mode_toggle" class="mode_switch">
<input type="checkbox" id="mode_toggle">
<span class="mode_slider"></span>
</label>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="wrapper">
<aside>
<nav>
HOME
API
<br />
<p>Versions</p>
<br />
Test
</nav>
</aside>
</div>
<section>
<div class="container">
<div class="row">
{% block body %}{% endblock %}
</div>
</div>
</section>
</body>
</html>
css file:
/* Off-canvas sidebar - start */
.wrapper {
height: 100%;
}
.container {
margin: 0 15px;
}
.row {
padding: -15px;
margin: 15px 0;
}
.row:before,
.row:after {
content: "";
display: table;
}
aside {
width: 40%;
height: 100%;
margin-left: -40%;
float: left;
position: absolute;
color: #FFFFFF;
background-color: #333;
}
section {
width: 100%;
height: 100%;
float: right;
margin-right: 0;
}
.toggle:checked + .wrapper > aside {
margin-left: 0;
}
.toggle:checked + .wrapper > section {
margin-right: -40%;
}
.toggler {
display: inline-block;
cursor: pointer;
}
.navicon {
width: 28px;
height: 28px;
background: url("../img/topnav/navicon.png") no-repeat;
background-size: cover;
display: block;
}
/* Off-canvas sidebar - end */
As it says in the MDN docs
To associate the <label> with an <input> element, you need to give the <input> an id attribute. The <label> then needs a for an attribute whose value is the same as the input's id.
You've used a class, instead it should be e.g.:
<label for="offcanvas" class="toggler">
<input type="checkbox" id="offcanvas" class="toggle">
<span class="navicon"></span>
</label>
The second problem is with this css selector:
.toggle:checked + .wrapper > aside {
margin-left: 0;
}
.toggle:checked + .wrapper > section {
margin-right: -40%;
}
The + selector is the adjacent sibling combinator, which means your .wrapper would need to be the sibling following your .toggle:checked element. Currently, it is a long way from being an adjacent sibling (and as there are no CSS rules that can reach 'up' the DOM tree there's no valid selector you can use with this current html structure).
Luckily, there is a neat trick you can do here, as long as you don't actually need the original checkbox to be visible. You can move the input element out of your label (the label-for keeps them bound still) and put it somewhere where a CSS rule can do what you want.
So in your case:
<input type="checkbox" id="offcanvas" class="toggle">
<div class="wrapper">
<aside>
<nav>
HOME
API
<br />
<p>Versions</p>
<br />
Test
</nav>
</aside>
</div>
Related
I'm trying to get two groups of checkboxes to display side by side in my parent flex container to make more room for some additional elements on my webpage. I have coded it per below and following the training on had on flex but I'm obviously missing something. When this area of my page is displayed, it is still just a vertical column with all of the checkboxes instead of two groups side my side. Can someone help me figure out what I'm doing wrong?
img {
width: 100%;
height: auto;
}
#larryfoto {
max-width: 90px;
}
#brochure {
max-width: 70px;
}
.headertd {
width: 34%;
}
#socialcontainer {
padding: 20px;
}
#headerlogo {
width: 85%;
display: block;
margin-left: 0px;
margin-right: auto;
}
#fb {
width: 33%;
margin-left: 40px;
margin-right: auto;
}
#linkedin {
width: 33%;
margin-left: 40px;
margin-right: auto;
}
#ig {
width: 33%;
margin-left: 40px;
margin-right: auto;
}
#warrantywisdom {
margin-left: 0px;
margin-rignt: auto;
}
input[type=text],
select {
width: 100%;
padding: 7px 10px;
margin: 5px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 10px;
box-sizing: border-box;
}
input[type=radio] label {}
input[type=submit] {
width: 100%;
}
#bodydiv {
margin-left: 30px;
margin-right: 30px;
background-color: transparent;
}
#headerdiv {
margin-left: 35px;
margin-right: 30px;
border-radius: 10px;
}
.warranty_option_container {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.wty_option_child {
width: 50%;
height: 50%;
margin: auto;
}
table {
border-spacing: 10px;
width: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.toolbox {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
#inputcell {
margin-left: 20px;
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
width: 33%;
vertical-align: top;
}
#radiocell {
margin-left: 20px;
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
width: 33%;
vertical-align: top;
}
#contactinfocell {
margin-left: 20px;
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
width: 33%;
vertical-align: top;
}
body {
background-image: url('hwa_house_bkgrnd.jpg');
width: 100%;
position: absolute;
top: 0;
left: 0;
}
form {
padding: 5px;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {
opacity: 0.7;
}
#myImg2 {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg2:hover {
opacity: 0.7;
}
/* The Modal (background) */
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
padding-top: 100px;
/* Location of the box */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, .8);
/* Black w/ opacity */
}
/* Modal Content (image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 1000px;
}
/* Caption of Modal Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Caption of Modal Image */
#caption2 {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation */
.modal-content,
#caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
#-webkit-keyframes zoom {
from {
-webkit-transform: scale(0)
}
to {
-webkit-transform: scale(1)
}
}
#keyframes zoom {
from {
transform: scale(0)
}
to {
transform: scale(1)
}
}
/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
#media only screen and (max-width: 700px) {
.modal-content {
width: 100%;
}
}
<div id="headerdiv">
<table>
<tr>
<td class="headertd"><img src="hwa_header.jpg" id="headerlogo"></td>
<td class="headertd"><img src="header2.jpg" id="headerlogo2"></td>
<td id="socialcontainer">
<td class="socialtd" id="socialcell">
<a href="https://www.facebook.com/profile.php?id=100008339314922"><img src="fb.png" id="fb"></td>
<td class="socialtd">
<a href="https://www.linkedin.com/in/larry-hines-66a8a21/"><img src="linkedin.png" id="linkedin"></td>
<td class="socialtd">
<a href="https://www.instagram.com/lwhmicrovision/"><img src="ig.png" id="ig"></td>
</td>
</tr>
</table>
</div>
<div id="bodydiv">
<form class="input-form" name="textinput" id="input_form" method="POST">
<table id="formtable">
<tr id="mainrow">
<td id="inputcell">
<label for="propertyaddress">Covered Property Address</label>
<input type="text" id="propertyaddress" name="propertyaddress" required>
<label for="mailingaddress">Mailing Address (If Different)</label>
<input type="text" id="mailingaddress" name="mailingaddress">
<label for="buyername">Buyer Name(s)</label>
<input type="text" id="buyername" name="buyername" required>
<label for="buyeremail">Buyer Email Address</label><br>
<input type="text" id="buyeremail" name="buyeremail" required><br>
<label for="buyerphone">Buyer Phone</label><br>
<input type="text" id="buyerphone" name="buyerphone"><br>
<label for="titlecompany">Title Company</label><br>
<input type="text" id="titlecompany" name="titlecompany"><br>
<label for="escrowofficer">Escrow Officer Name</label><br>
<input type="text" id="escrowofficer" name="escrowofficer"><br>
<label for="escrowofficeremail">Escrow Officer Email Address</label><br>
<input type="text" id="escrowofficeremail" name="escrowofficeremail"><br>
<label for="escrowofficerphone">Escrow Officer Phone</label><br>
<input type="text" id="escrowofficerphone" name="escrowofficerphone"><br>
<label for="referringagent">Agent Name and Agency</label><br>
<input type="text" id="referringagent" name="referringagent" required><br>
<label for="referringagentphone">Agent Phone</label><br>
<input type="text" id="referringagentphone" name="referringagentphone" required><br>
<label for="referringagentemail">Agent Email Address</label><br>
<input type="text" id="referringagentemail" name="referringagentemail" required><br>
</td>
<td id="radiocell">
<table>
<tr>
<td>
<label for="closingdate"><u>Closing Date</u></label><br>
<input type="date" id="closingdate" name="closingdate" required><br><br>
<label for="hometype"><u>Type of Home</u></label><br><br>
<input type="radio" id="Single Family" name="hometype" value="singlefamily" required><label for="Single Family">Single Family</label><br>
<input type="radio" id="Townhome/Condo/Mobile Home" name="hometype" value="towncondomobile"><label for="Townhome/Condo/Mobile Home">Townhome/Condo/Mobile Home</label><br>
<select form="input_form" name="multitype" id="duplex_triplex_fourplex" value="Multi-Flat Warranty Options">
<option value="" selected disabled hidden>Select Multi-Flat Option</option>
<option value="duplex_gold">Duplex Gold - $720</option>
<option value="duplex_platinum">Duplex Platinum - $855</option>
<option value="duplex_diamond">Duplex Diamond - $945</option>
<option value="triplex_gold">Triplex Gold - $1040</option>
<option value="triplex_platinum">Triplex Platinum - $1235</option>
<option value="triplex_gold">Triplex Diamond - $1365</option>
<option value="triplex_gold">Fourplex Gold - $1360</option>
<option value="triplex_platinum">Fourplex Platinum - $1615</option>
<option value="triplex_gold">Fourplex Diamond - $1785</option>
</select>
</td>
<td>
<label for="warrantytype"><u>Select Warranty Type</u></label><br><br>
<input type="radio" id="Gold" name="warrantytype" value="Gold" required><label for="Gold">Gold - $400</label><br>
<input type="radio" id="Platinum" name="warrantytype" value="Platinum"><label for="Platinum">Platinum - $475</label><br>
<input type="radio" id="Diamond" name="warrantytype" value="Diamond"><label for="Diamond">Diamond - $525</label><br>
<input type="radio" id="Sellers" name="warrantytype" value="Sellers"><label for="Sellers">Sellers Warranty</label><br>
<input type="radio" id="New Construction" name="warrantytype" value="New Construction"><label for="New Construction">New Construction</label><br>
<input type="radio" id="Multiyear" name="warrantytype" value="Multi-Year"><label for="Multiyear">Multi-Year Warranty</label><br><br>
</td>
</tr>
</table>
<label for="warrantynotes" title="Describe warranty type if new construction or multi-year, also please note if warranty to be paid by proceeds at closing or directly by buyer, seller or real estate agent"><u>Warranty Notes - (hover mouse over this label for instructions)</u></label><br>
<input type="text" id="notes" name="warrantynotes"><br>
<label for="options"><u>Options</u></label><br>
<div class="warranty_option_container">
<div class="wty_option_child">
<input type="checkbox" id="greenplus" name="optiontype[]" value="greenplus"><label for="greenplus">$70 Green Plus</label><br>
<input type="checkbox" id="termite" name="optiontype[]" value="termite"><label for="termite">$75 Subterranean Termite Treatment</label><br>
<input type="checkbox" id="freezer" name="optiontype[]" value="freezer"><label for="freezer">$50 Freezer-Standalone</label><br>
<input type="checkbox" id="wetbar" name="optiontype[]" value="wetbar"><label for="wetbar">$25 Wet Bar Refrigerator/2nd Fridge</label><br>
<input type="checkbox" id="poolspa" name="optiontype[]" value="poolspa"><label for="poolspa">$150 Pool/Spa Combo</label><br>
<input type="checkbox" id="addpoolspa" name="optiontype[]" value="addpoolspa"><label for="addpoolspa">$150 Additional Pool or Spa</label>
</div>
<div class="wty_option_child">
<input type="checkbox" id="saltpool" name="optiontype[]" value="saltpool"><label for="saltpool">$300 Salt Water Pool w/Spa Combo</label><br>
<input type="checkbox" id="wellpump" name="optiontype[]" value="wellpump"><label for="wellpump">$100 Well Pump</label><br>
<input type="checkbox" id="septicpump" name="optiontype[]" value="septicpump"><label for="septicpump">$75 Septic /Ejector Pump/Tank Pumping</label><br>
<input type="checkbox" id="waterline" name="optiontype[]" value="waterline"><label for="waterline">$90 External Water Line Repair</label><br>
<input type="checkbox" id="waterlineandsewer" name="optiontype[]" value="waterlineandsewer"><label for="waterlineandsewer">$195 External Water/Sewer Line Repair</label>
</div>
</div>
<input type="text" id="sendername" name="sendername" required value="Enter Your Name Here"><br>
<input type="text" id="orderemail" name="orderemail" required value="Enter Your Email Address"><br><br>
<input type="submit" id="placeorder" name="placeorder" style="width:100%;" value="Place Warranty Order"><br><br> *Payment is not required at time of order. You will receive an invoice after the order is placed. Contact me to discuss payment
options.
</td>
<td id="contactinfocell" class="toolbox">
<h2>Warranty Toolbox</h2>
<hr>
<table>
<tr>
<td id="warrantycell">
<!-- Trigger the Modal -->
<img id="myImg" src="updated_warranty_matrix.jpg" alt="Warranty Option Matrix" style="width:100%;max-width:110px"><br> View Warranty Options
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- The Close Button -->
<span class="close" id="close">×</span>
<!-- Modal Content (The Image) -->
<img class="modal-content" id="img01">
<!-- Modal Caption (Image Text) -->
<div id="caption"></div>
</div>
<script>
// Get the modal
var modal = document.getElementById("myModal");
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById("myImg");
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function() {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
</script>
<br>
</td>
<td>
<!-- Trigger the Modal -->
<img id="myImg2" src="file_claim.jpg" alt="File a Claim" style="width:100%;max-width:125px"><br> File a Claim
<!-- The Modal -->
<div id="myModal2" class="modal">
<!-- The Close Button -->
<span class="close">×</span>
<!-- Modal Content (The Image) -->
<img class="modal-content" id="img02">
<!-- Modal Caption (Image Text) -->
<div id="caption2"></div>
</div>
<script>
// Get the modal
var modal = document.getElementById("myModal2");
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById("myImg2");
var modalImg = document.getElementById("img02");
var captionText = document.getElementById("caption2");
img.onclick = function() {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[1];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
</script>
</td>
<td "brochurecell">
<img src="brochure_thumb.jpg" width="70" height="95" id="brochure"><br>Brochure
</td>
</tr>
</table>
<hr>
<table>
<tr>
<td id="warrantywisdom" class="toolbox">
<ul class="doubleBullets">
<u><b>Watch our Warranty Wisdom Videos to get the most from your home warranty!</b></u><br><br>
<ul class="doubleBullets">
<li>Understand HWA Home Warranty Coverage</li>
<li>Home Warranty vs. Homeowners Insurance - What's the Difference?</li>
<li>Why Choose HWA</li>
<li>Home Warranty of America (HWA): Who We Are</li>
<li>How Do I Know What Coverage I Need for My Home Warranty?</li>
</ul>
<ul class="doubleBullets">
<li>What's Covered by an HWA Home Warranty?</li>
<li>How Do I File a Claim with Home Warranty of America?</li>
<li>Why Was My Claim Rejected?</li>
</ul><br>
</td>
</tr>
</table>
<hr>
<table>
<tr>
<td id="contactme" class="toolbox">
<u><b>Contact Me</b></u><br><br> Larry Hines<br> Account Executive, Idaho<br> Home Warranty of America<br> (208) 761-1666<br>
larry.hines#hwahomewarranty.com
</td>
<td><img src="larry_bc_photo.jpg" id="larryfoto">
</td>
</tr>
</table>
<hr>
<table>
<tr>
<td id="promotext">
<h2>Check out our new<br>Spring Promo!</h2>
</td>
<td width="100px;">
<img src="arrow.png" style="width:100%; max-width:80px;">
</td>
<td id="arlocell">
<!-- Trigger the Modal -->
<img id="myImg3" src="arlo_thumbnail.JPG" alt="Spring Promo" style="width:100%;max-width:80px;"><br>
<!-- The Modal -->
<div id="myModal3" class="modal">
<!-- The Close Button -->
<span class="close">×</span>
<!-- Modal Content (The Image) -->
<img class="modal-content" id="img03">
<!-- Modal Caption (Image Text) -->
<div id="caption3"></div>
</div>
<script>
// Get the modal
var modal = document.getElementById("myModal3");
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById("myImg3");
var modalImg = document.getElementById("img03");
var captionText = document.getElementById("caption3");
img.onclick = function() {
modal.style.display = "block";
modalImg.src = "HWA_Arlo_flyer.jpg";
captionText.innerHTML = this.alt;
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[2];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
</script>
</td>
</tr>
</table>
<hr>
</tr>
</table>
</td>
</tr>
</table>
</form>
</div>
Here is the whole .CSS file. I don't see anything competing but it's worth mentioning that the container and child div's in my flexbox are all inside of a element that is part of a 3 column table that lays out the format of the page. Does flexbox work inside of a TD?
This my first question, so I hope that I ask it correctly.
Matthew Cain has created a great example of a fancy radio button using html and css which can be seen at https://www.templatemonster.com/blog/style-checkboxes-radio-buttons-css/. In it he uses this code:
body {
margin: 0;
padding: 0;
font-family: 'PT Sans', sans-serif;
font-size: 1.3em;
font-weight: bold;
color: #fff;
}
#first {
background-color: #4B4D65;
}
#second {
background-color: #FF8A66;
}
.section {
padding: 100px;
padding-left: 150px;
}
.section input[type="radio"],
.section input[type="checkbox"]{
display: none;
}
.container {
margin-bottom: 10px;
}
.container label {
position: relative;
}
/* Base styles for spans */
.container span::before,
.container span::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
margin: auto;
}
/* Radio buttons */
.container span.radio:hover {
cursor: pointer;
}
.container span.radio::before {
left: -52px;
width: 45px;
height: 25px;
background-color: #A8AAC1;
border-radius: 50px;
}
.container span.radio::after {
left: -49px;
width: 17px;
height: 17px;
border-radius: 10px;
background-color: #6C788A;
transition: left .25s, background-color .25s;
}
input[type="radio"]:checked + label span.radio::after {
left: -27px;
background-color: #EBFF43;
}
<section id="first" class="section">
<div class="container">
<input type="radio" name="group1" id="radio-1">
<label for="radio-1"><span class="radio">Coffee</span></label>
</div>
<div class="container">
<input type="radio" name="group1" id="radio-2">
<label for="radio-2"><span class="radio">Tea</span></label>
</div>
<div class="container">
<input type="radio" name="group1" id="radio-3">
<label for="radio-3"><span class="radio">Cappuccino</span></label>
</div>
</section>
When I debug it in Chrome I see
<span class="radio"> == $0
::before
"Coffee"
::after
</span"
Here is my HTML:
<body class="my_PageBg" data-usepopupcontrols="no">
<div class="my_DesktopContainer my_temp_unselect" style="display: none;">
<div tabindex="1" class="container"
id="radio1" style="transform-origin: center 50%; left: 20px; top: 40px; width: 660px; height: 100px;
overflow: auto; position: absolute; z-index: 1; direction: ltr; transform: inherit; transform-style: preserve-3d;"
contenteditable="false">
<tbody>
<tr>
<td style="padding: 0px; white-space: nowrap;">
<label style="cursor: default;" onkeydown="onTreeLabelKeyDown(event)" for="radio10" name="radio1">
<input name="radio1" tabindex="1" id="radio10" onclick='OnResetDownChainControls("radio1",event)' type="radio" checked="" value="Value1"/>
Val1
</label>
</td>
</tr>
<tr>
<td style="padding: 0px; white-space: nowrap;">
<label style="cursor: default;" onkeydown="onTreeLabelKeyDown(event)" for="radio11" name="radio1">
<input name="radio1" tabindex="1" id="radio11" onclick='OnResetDownChainControls("radio1",event)' type="radio" value="Value2"/>
Val2
</label>
</td>
</tr>
<tr>
<td style="padding: 0px; white-space: nowrap;"><label style="cursor: default;" onkeydown="onTreeLabelKeyDown(event)" for="radio12" name="radio1">
<input name="radio1" tabindex="1" id="radio12" onclick='OnResetDownChainControls("radio1",event)' type="radio" value="Value3"/>
Val3
</label>
</td>
</tr>
</tbody>
I am trying to do the same to the Text "Val1", "Val2", "etc.
Please note that I can not change the html since it is coming from an external call.
What css selector can I use?
::after and ::before pseudo-elements do not apply to replaced-elements or void-elements.
But you can use a <span> to achieve the desired effect. Example:
.my-special-class:before {
content: '[before] ';
}
.my-special-class:after {
content: ' [after]';
}
.my-special-class:before,
.my-special-class:after {
color: red;
}
<span class="my-special-class">Val 1</span>
Obviously, you can name the class to whatever you want and change the selectors accordingly.
Note: if you want to use pseudo-elements as graphics (to give them size, position, background-image, border, background, etc – without actual content) you must still specify content: '' (empty string). Without setting content, the pseudo-element will not render, regardless of display, visibility or opacity.
Most CSS attributes that can be applied to a normal DOM element can be applied to pseudo-elements.
<label>s can have pseudo's, but that would mean the :before gets placed before the <input>, which is included in the <label>. If you want to place the :before after the <input> (which cannot have pseudo's), you have to wrap the text node in a <span>, as in the example.
Also note that, even though the spec defines pseudo elements officially with double colon notation (::pseudo-element), all browsers supporting double colon notation also support the legacy single colon notation, while a few legacy versions (IE pre v9, FF pre v1.5, Opera pre v7) only support the single colon notation. For this reason, most people use the single colon notation (which is, officially, wrong, but technically right, at least for now).
I'm using SurveyProject for my poll and have the question with 2 answers with this html structure:
1 answer:
<tr class="answerStyle">
<td class="cellValign">
<span id="SurveyControl_Question18__as50577__ai72_as50577"><div>
<div id="grbD">
<input name="SurveyControl$Question18_as50577:_grp18" class="globalRadioButton" id="SurveyControl_Question18__as50577__ai72_as50577_ctl00" type="radio" value="SurveyControl$Question18$_as50577$_ai72_as50577$ctl00">
<label class="globalRadioButtonLabel" runat="server" associatedcontrolid="SurveyControl_Question18__as50577__ai72_as50577_ctl00">NO</label>
</div>
</div>
</span>
</td>
</tr>
2 answer:
<tr class="answerStyle">
<td class="cellValign">
<span id="SurveyControl_Question18__as50577__ai71_as50577">
<div>
<div id="grbD">
<input name="SurveyControl$Question18_as50577:_grp18" class="globalRadioButton" id="SurveyControl_Question18__as50577__ai71_as50577_ctl00" type="radio" value="SurveyControl$Question18$_as50577$_ai71_as50577$ctl00">
<label class="globalRadioButtonLabel" runat="server" associatedcontrolid="SurveyControl_Question18__as50577__ai71_as50577_ctl00">yes<br>comment:</label>
</div>
</div>
</span>
</td>
</tr>
As I can't change html, I want to apply style with css for second answer's input with id #SurveyControl_Question18__as50577__ai71_as50577_ctl00, but everything that I tried doesn't work...
I tried:
input[name="SurveyControl$Question18_as50577:_grp18"] {
float: left;
margin-top: 20px;
}
#SurveyControl_Question18__as50577__ai71_as50577_ctl00 {
float: left;
margin-top: 20px;
}
#SurveyControl_Question18__as50577__ai71_as50577 input {
float: left;
margin-top: 20px;
}
And some others, but the only thing which works is:
#grbD input {
float: left;
margin-top: 20px;
}
But this also affects the first answer's input as it uses the same div's id.
Any ideas?
You can try using these selectors.
.answerStyle:nth-child(2) #grbD input {
float: left;
margin-top: 20px;
}
Or
.answerStyle:not(:first-child) #grbD input {
float: left;
margin-top: 20px;
}
I am working on Bootstrap. I wanted to make block inside table responsive.
As I resize the browser, block (bluebox) inside table is not adjusting according to screen size. I am new to Bootstrap.
.bluebox
{
background-color: #F6F6FF;
border: 1px solid #232850;
font-size: 10px;
padding: 10px;
overflow:hidden;
min-width:267px;
width:100%;
display:block;
overflow:auto;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="page_info">
<div class="breadcrumb">
Home
<span class="delimiter fa fa-arrow-circle-right"></span>
<span class="current" style="font-weight: 300;font-size: 12px;color: #666;">Link us</span></div>
<div class="page-title">
<h1 style="font-family: 'Roboto';font-size: 40px;line-height: 44px;color: #339933;font-weight: 300;">Link us</h1>
</div>
<div class="clearfix"></div>
</div>
<p style="font-family:'Merriweather', sans-serif;font-size:16px;padding-left:18px;">To link to us, please choose and save one of the logos displayed below, and link it to ' http://www.dubaiexporters.com '.</p>
<p style="font-family:'Merriweather', sans-serif;font-size:16px;padding-left:18px;">As per our linking Policy, no prior permission is required to link 'DubaiExporters.com' from your website. However, we would like you to inform us (using the 'Contact us' option) about any links provided to this Portal so that you can be informed of any changes or updates.</p>
<p style="font-family:'Merriweather', sans-serif;font-size:16px;padding-left:18px;">We encourage you to choose from the following graphic banners which can be conveniently placed on your website and linked to our Portal.</p>
<p><b style="color: #339933;padding-left:18px; font-size:20px;">Banners for Download </b></p>
<table class="table table-bordered" style="margin-left:18px;">
<thead>
<tr>
<th>Banner</th>
<th>Link</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img src="images/dubaiexportersbanners/dubaiexporters_168x72.gif" alt="dubaiexporters.com 130x38 jpg" width="168" height="72">
</td>
<td>
<div class="bluebox"><a href="http://www.dubaiexporters.com/"><img src="http://www.dubaiexporters.com/images/dubaiexporters_168x72.gif" border="0" alt="Dubai Exporters - Directory of Exporters, Manufacturers & Suppliers" /></a></div>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Link: https://jsfiddle.net/1h0bt35f/4/
Update: Add word-break: break-all; to the CSS class.
Also, you would need to define width in percentage in order to make it responsive.
Currently, you have given bluebox a width of 267px.
Try the below code where you can set a min-width of 267px and it will handle automatically when it scales due to width as 100%.
.bluebox {
background-color: #F6F6FF;
border: 1px solid #232850;
font-size: 10px;
padding: 10px;
overflow: hidden;
width: 100%;
display: block;
overflow: auto;
word-break: break-all;
}
Try this:
.bluebox
{
background-color: #F6F6FF;
border: 1px solid #232850;
font-size: 10px;
padding: 10px;
overflow:hidden;
width: 26%;
display:block;
overflow:auto;
}
I've got a website that has a big image covering the screen. In its image there are several DIVs (Text, Forms, Images) (see picture 2). The big image container is made displaying always the center of the image regardless of window size, so when you make your windows smaller, the very center stays visible.
The problem now is that the DIVs are collapsing, when I scale down the window size (see picture 3).
Picture number 2 depicts what it is intended to be look like!
#div1 {
width:25%;
left: 32%;
top:7.5%;
position: relative;
float:left;
}
#div2 {
position:relative;
left:37.5%;
clear:both;
width:14%;
height:20%;
}
#div2 h2 {
width:10%;
left:15%;
margin-top:11%;
position: relative;
float: left;
}
#div3 {
left: 64.4%;
top:-2.5%;
width:111px;
position: relative;
}
#div4{
left: 93%;
top:-18.0%;
width:111px;
position: relative;
}
And HTML:
<body>
<div id="wrapper"\>
<div id="div1">
<h1>Seite nicht gefunden!</h1>
</div>
<h2>Bug melden</h2>
<div id="div2">
<form>
<label>Titel</label>
<input type="text" id="form_title" name="title" placeholder="Ich will einen Bug melden!" required>
<label>URL</label>
<input type="url" id="form_url" name="URL" placeholder="###" >
<label>Beschreibung</label>
<textarea type="text" id="form_whathappened" name="happened" placeholder="Was ist passiert?" required></textarea>
<input type="submit" value="Absenden" />
</form>
</div>
<div id="div3">
<img src="logo.png" alt="Logo" />
</div>
<div id="div4">
<p>Jetzt<br/ >Tester<br />werden!<br /></p>
</div>
</div>
</body>
Can you please help me what I'm doing wrong? Thank you very much in advance!
Christoph
This is probably way far from perfect, but it's worth trying.
The html code:
<head>
<meta charset="utf-8">
<title>404</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="wrapper">
<div id="error">
<h1>Seite nicht gefunden!</h1>
</div>
<form id="form">
<h2>Bug melden</h2>
<label>Titel</label>
<input type="text" id="form_title" name="title" placeholder="Ich will einen Bug melden!" required>
<label>URL</label>
<input type="url" id="form_url" name="URL" placeholder="http://www.###/???" >
<label>Beschreibung</label>
<textarea type="text" id="form_whathappened" name="happened" placeholder="Was ist passiert?" required></textarea>
<input type="submit" value="Absenden" />
</form>
... //other code goes here</div>
and this is the edited section of the css code:
#wrapper { width: 640px; height: auto; margin: 0 auto; }
#error { font-size: 120%; margin: 65px 0 0 60px; float:left; }
#error h1 { font-size: 150%; text-align:center; }
#form { margin: 15px 86px; width:260px; height: 40%; float: left; background: green; }
Check the working example here: example
Hope that helps as a start.