I'm trying to keep the bar_top_container div from wrapping it's contents no matter how wide the page is (i.e. both selects should appear always on the same line), this is not working however when the page width is to small for them to both fit on one line, how can i fix this?
Styles:
#bar_top_container { position: relative; white-space: nowrap; }
#bar_top_block { float: left; padding-left: 10px; padding-right: 10px; border-right: 1px solid #4965BB; }
#clear { clear: both; }
HTML:
<div id="bar_top_container">
<div id="bar_top_block">
<span class="bold">select1: </span>
<select><option value="asdf">asdf</option></select>
</div>
<div id="bar_top_block">
<span class="bold">asdf: </span>
<select><option value="blah">-- select action --</option></select>
</div>
<div id="clear"></div>
</div>
You can have both block and inline properties for an element if you display it as ... inline-block!
Here is your code corrected and working:
span.bold are labels
a label is associated to its form element via the for/id attributes
bar_top_block is an id used twice. Should be a class
no need for float: left; as display: inline-block; is used
thus no need for a clearing element either
the .bar_top_block elements are also displayed inline so any whitespace between them is displayed as whitespace. To avoid this, I added a comment that avoid any whitespace though still letting the HTML code readable. The text within is 'no whitespace' so the developer will know that this comment is there for a reason and shouldn't be stripped :)
you can remove the width on body, it's just here for the example
you can play with the overflow property on the container
as IE7 and below don't understand the inline-block value on block elements like div, you must use display: inline and give the element the hasLayout with, for example, zoom: 1;
the best way to target IE7 and below and only those browsers is with a conditional comment
I added support for Fx2 but this is merely for historical reasons :)
.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>Stack Overflow 3150509 - Felipe</title>
<style type="text/css">
body {
width: 300px;
}
#bar_top_container {
overflow: auto;
white-space: nowrap;
border: 1px solid red;
}
.bar_top_block {
display: -moz-inline-stack; /* Fx2, if you've to support this ooold browser. You should verify that you can still click in the elements, there is a known bug with Fx2 */
display: inline-block;
padding-left: 10px;
padding-right: 10px;
border-right: 1px solid #4965BB;
}
</style>
<!--[if lte IE 7]><style type="text/css">
.bar_top_block {
display: inline;
zoom: 1;
}
</style> <![endif]-->
</head>
<body>
<form method="post" action="#" id="bar_top_container">
<div class="bar_top_block">
<label for="select1">Obviously I am a label: </label>
<select id="select1"><option value="asdf">asdf</option></select>
</div><!-- no whitespace
--><div class="bar_top_block">
<label for="select2">I'm a label too and I need a for attribute: </label>
<select id="select2"><option value="blah">-- select action --</option></select>
</div>
</form>
</body>
</html>
Floating elements wrap as white-space: nowrap does not work for block elements but only for inline elements and text.
I'm suggesting to use a valid form usage:
<form>
<label>select1: <select><option value="asdf">asdf</option></select></label>
<label>asdf: <select><option value="blah">-- select action --</option></select></label>
</form>
Hope it helps.
Related
I am trying to use HTML and CSS to hide and show data on click. I cannot use JavaScript, pseudo-elements such as checkbox(:checked), :radio, :focus with tabindex, :target and details of HTML5. Its for an outlook email template and I have tried all solutions using pseudo elements, HTML5. Here is what's allowed: https://www.caniemail.com/clients/outlook/
I understand the email template tech is primitive and there are limited options. Please help.
Here are all the options that don't work:
http://jsfiddle.net/ionko22/4sKD3/
http://jsfiddle.net/79z30ymk/
http://jsfiddle.net/79z30ymk/1/
http://jsfiddle.net/79z30ymk/2/
sample :
<head>
<style>
.clicker {
width: 100px;
height: 100px;
background-color: blue;
outline: none;
cursor: pointer;
}
.hiddendiv {
display: none;
height: 200px;
background-color: green;
}
.clicker:focus+.hiddendiv {
display: block;
}
</style>
</head>
<body>
<div>
<div class="clicker" tabindex="1">Click me</div>
<div class="hiddendiv"></div>
</div>
</body>
My idea to solve this problem is following:
Have a div for the answer with fixed height and a hidden scrollbar. Inside this div there are two divs with the same height. The first one is empty and the second one has a named anchor and the answer.
When you click on the question link all you do is navigate to the answer anchor. A working example based on your previous examples can be found here below:
.faq ul li {
display: block;
float: left;
padding: 5px;
}
.answer {
display: block;
border: 0;
height: 40px;
overflow: hidden;
}
.answer div {
height: 40px;
}
<div class="faq">
<ul>
<li>Question 1<br>
<div class="answer">
<div></div>
<a name='answer-1'></a>
<div>Answer 1</div>
</div>
</li>
<li>Question 2<br>
<div class="answer">
<div></div>
<a name='answer-2'></a>
<div>Answer 2</div>
</div>
</li>
<li>Question 3<br>
<div class="answer">
<div></div>
<a name='answer-3'></a>
<div>Answer 3</div>
</div>
</li>
</ul>
</div>
Please let me now if this solves the problem,
Outlook desktop (Windows) is fundamentally a print-based email client. The rendering engine is MS Word.
Once the email is received by Outlook, it gets interpreted according to a precise pixel-perfect solution, complete with inch measurements, not pixels. It doesn't have the capability to display anything dynamic, except in the smallest of ways such as a link or an animated GIF.
The best you can do is create some sort of alternative for Outlook users, using their conditional comments - perhaps scroll down to see the answer type thing.
<!--[if mso]> //code for Outlook <![endif]-->
<!--[if !mso]><!-->
// code for everything else
<!--<![endif]-->
I want to change the background color of the div tag with div element with class of ind and id of three to blue.
here is my css
h1 {
text-align: center;
}
#identify {
text-align: center;
}
.container {
border-style: dotted;
width: 800px;
height: 400px;
position: absolute;
right: 550px;
}
.ind {
float: left;
position: relative;
top: 40%;
padding: 50px;
left: 200px;
}
.ident {
position: relative;
display: inline;
float: left;
text-align: center;
padding: 10px;
}
#2.ind {
background-color: blue;
}
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="project" content="hello">
<title></title>
</head>
<body>
<link rel="stylesheet" type="text/css" href="2css.css">
<h1>Set the distance!</h1>
<p id="identify">To play this game, you must be at least 18 years old. You must also fill out some information.</p>
<div class="container">
<div class="ind" id="2">2</div>
<div class="ind" id="3">3</div>
<div class="ind" id="4">4</div>
</div>
</body>
</html>
In the browser for some reason the background color of div class ind with id of 2 won't change to blue. Any suggestions?
Despite the many claims otherwise, IDs in HTML5 can indeed start with a number. Care must be taken when referring to these elements in other contexts, however. First some code:
console.log(document.querySelector('#\\0032') == null);
#\0032 { background-color: black; color: white }
[id="2"] { background-color: white; color: black }
<p id="2">
Two
</p>
You do need to escape the number, using an Unicode escape sequence (I've expanded it to its four digit hexidecimal representation so that's clear). You can use an attribute selector, but that changes its specificity (see this question's answers for more information on that topic) to be lower than IDs. You can see that the second selector is not specific enough to override the ID selector. Not necessarily a bad thing, but certainly something to be aware of.
Note that despite it working, and being allowed by the relevant specifications, it is generally frowned upon because of the need for escaping in CSS. Note that also means that in something like the DOM method querySelector, when accessed in JavaScript, the escape character must also be escaped (since you must use a JavaScript string, which uses the same escape character). I've added an example of that to the snippet as well.
CSS IDs cannot contain only number.
Two solutions:
1- change your ID in alphanumeric, i.e. id="div2"
2- use data attribute as data-id="2" and then in CSS use
.ind[data-id="2"]{background-color:blue;}
if you want to access it in css, an id cannot start with a no., thus #2 wont work.
If you want to still use id="2" try:
#\32 {
background-color: blue;
}
To give CSS effect to div element id=3, you can do it as below.
.container > .ind[id="3"]
{
background-color:lightblue;
}
<div class="container">
<div class="ind" id="2">2</div>
<div class="ind" id="3">3</div>
<div class="ind" id="4">4</div>
</div>
This page shows two images, each contained inside a separate span displayed as an inline block. To the first image is applied the additional style of "display:block", which removes the space between the image and the bottom of its green-bordered span (which space is provided for descenders when an element is styled as inline). Contrawise, this space is visible between the second image (still displayed as inline) and the blue border of the second span.
Why does displaying the first image as a block create space between the first image's span and the element containing the span (orange box)? Is it because when one inline element is contained inside another, the spaces allotted for descenders merge in the manner of vertical margins? Also I am wondering why there is a one-pixel space between the top of the blue span and the orange container.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>test</title>
<style>
.product_box {
border: 1px solid green;
display:inline-block; /* to put products side by side */
}
.product_image {
display:block;
}
.shop_box { /* contains shop logo, shop URL, link to view additional items (when not all items are displayed), and all the shop's products */
text-align:center;
border:1px solid orange;
}
#stats {
border:1px solid blue;
display: inline-block;
}
</style>
</head>
<body>
<div class="shop_box">
<span class="product_box">
<img class="product_image" src="http://i.imgur.com/o2udo.jpg">
</span>
<span id="stats">
<img src="http://i.imgur.com/o2udo.jpg" alt="test">
</span>
</div>
</body></html>
JSFiddle
Whenever there is any whitespace between two inline elements in HTML, the whitespace in will force a gap between them. This happens to your <span> elements because they are inline-elements. This gap can be removed by removing any whitespace between your two span tags, eg:
<span class="product_box">
<img class="product_image" src="http://i.imgur.com/o2udo.jpg">
</span><span id="stats">
<img src="http://i.imgur.com/o2udo.jpg" alt="test">
</span>
If your images are not set to display: block, you can remove the extra vertical-space by setting line-height: 0; on your <span> elements.
If you are setting your images to display: block, it seems like your best is to use the vertical-align property to align them with each other; try:
.product_box, #stats { vertical-align: middle; }
It's usually a good idea to use a CSS Reset when developing, to minimize the effect of these browser-defaults.
Updated Code:
HTML:
<div class="shop_box">
<span class="product_box">
<img class="product_image" src="http://i.imgur.com/o2udo.jpg" />
</span><span id="stats">
<img src="http://i.imgur.com/o2udo.jpg" alt="test" />
</span>
</div>
CSS:
.product_box, #stats {
line-height: 0;
vertical-align: middle; }
.product_box {
border: 1px solid green;
display:inline-block; /* to put products side by side */
}
.product_image {
display:block;
}
.shop_box { /* contains shop logo, shop URL, link to view additional items (when not all items are displayed), and all the shop's products */
text-align:center;
border:1px solid orange;
}
#stats {
border:1px solid blue;
display: inline-block;
}
Preview: http://jsfiddle.net/Wexcode/4QNhG/
Edit:
Changing the first image to display block doesn't create the space between the image and the containing element, it was there before.
With regards to the one-pixel space: this is just to account for the border of the other element. Whether or not the first image is display-block doesn't matter:
First span no border: http://jsfiddle.net/A6aLW/3/
Both spans no border: http://jsfiddle.net/A6aLW/5/
I'm having some trouble with displaying a popup div with CSS. The problem is better explained with an example. Take the following html:
<html>
<head>
<style type"text/css">
#popup {
color: #fff;
background: #8c0000
}
#form {
background: #ccc;
color: #000;
position: absolute;
display: none;
}
#popup:hover > #form {
display: block;
}
</style>
</head>
<body>
<span id="popup">
Popup
<div id="form">
<form>
<label>Text Field</label>
<input type="text" />
<label>Select Field</label>
<select>
<option value="opt1">val1</option>
<option value="opt2">val2</option>
</select>
</form>
</div>
</span>
</body>
</html>
This consists of a single span element and a single hidden div element that contains a form. The div is displayed when the mouse is hovering the span element. The problem is that when I'm going to select an option in the dropdown box, the div disapears, as if it had lost focus. The result is that I can only change the dropdown value using the keyboard.
My question is: How do I fix that? Any clue on the subject is appreciated.
I believe you might be out of luck here, as rendering of <option> elements are dependent on browser / OS / platform, and not part of the CSS box model. Using JavaScript (and jQuery), this is pretty straight-forward. I've added a "Done" button to your form, as this might be a better solution for choosing when to hide the form. Otherwise, the user would have to be very careful not to move the mouse pointer outside the selection dropdown, or everything would disappear (if I've understood your request correctly.)
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type"text/css">
#popup {
color: #fff;
background: #8c0000
}
#form {
background: #ccc;
color: #000;
position: absolute;
display: none;
}
</style>
<script src="http://code.jquery.com/jquery-1.4.2.min.js" language="javascript" type="text/javascript"></script>
<script language="javascript">
function showForm() {
$("#form").show();
}
function hideForm() {
$("#form").hide();
}
</script>
</head>
<body>
<span id="popup" onmouseover="showForm()">
Popup
<div id="form">
<form>
<label>Text Field</label>
<input type="text" />
<label>Select Field</label>
<select>
<option value="opt1">val1</option>
<option value="opt2">val2</option>
</select>
<input type="button" value="Done" onclick="hideForm()" />
</form>
</div>
</span>
</body>
</html>
I'm not sure what, exactly, the problem is, but the following css works in Chrome 6.0.472.62 and Firefox 3.6.10 on Ubuntu 10.04:
#popup {
position: relative;
}
#form {
width: 12em;
display: none;
}
#popup:hover #form {
clear: both;
margin: 0;
display: block;
position: absolute;
top: 1em;
left: 0;
}
#popup form select:focus,
#popup form select:hover {
display: block;
}
Demo at: jsbin
And it's worth changing #popup to a div, as (I thought I) commented earlier.
You are showing the popup only on hover, so when the mouse leaves your popup, it is hidden,
You have to show it onmouseover of the span element, and hide it when the use clicks somewhere else on the page (other than the popup) or probably when he hits the close option on the popup.
I dont think you can do that with pure CSS. You would need some javascript.
I'd like to add a png frame over a kwicks image slider, but when I do, I lose the interactivity.
How can I add a png frame over an element without losing the interactivity of the element below?
You can see the example here: www.jujumamablog.com/jujumama/dev.html
Below is the code for the dev page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
<head>
<title>Kwicks Examples: Example 1</title>
<script src="http://jmar777.googlecode.com/svn/trunk/js/jquery-1.2.6.js" type="text/javascript"></script>
<script src="http://jmar777.googlecode.com/svn/trunk/js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="http://kwicks.googlecode.com/svn/branches/v1.5.1/Kwicks/jquery.kwicks-1.5.1.pack.js" type="text/javascript"></script>
<style type="text/css">
/* defaults for all examples */
.kwicks {
list-style: none;
position: relative;
margin: 5px 0;
padding: 0;
}
.kwicks li{
display: block;
overflow: hidden;
padding: 0;
cursor: pointer;
}
/* example 1 */
#example1 .kwicks li{
float: left;
width: 96px;
height: 200px;
margin-right: 2px;
}
#example1 #kwick1 {
background-color: #53b388;
}
#example1 #kwick2 {
background-color: #5a69a9;
}
#example1 #kwick3 {
background-color: #c26468;
}
#example1 #kwick4 {
background-color: #bf7cc7;
}
#example1 #kwick5 {
background-color: #bf7cc7;
margin-right: none;
}
#sliderFrame{
background: transparent url('sliderFrame.png') no-repeat scroll 0 0;
display: block;
height: 206px;
position: absolute;
// top: 150px;
width: 504px;
z-index: 99;
margin-top: -4px;
}
</style>
<script type="text/javascript">
$().ready(function() {
$('.kwicks').kwicks({
max : 205,
spacing : 5
});
});
</script>
</head>
<body>
<div id="example1">
<div id="sliderFrame"></div> <!-- This blocks ineteractivity -->
<ul class="kwicks">
<li id="kwick1"></li>
<li id="kwick2"></li>
<li id="kwick3"></li>
<li id="kwick4"></li>
<li id="kwick5"></li>
</ul>
</div>
<div style="clear:both;"></div>
<div id="example1">
<ul class="kwicks">
<li id="kwick1"></li>
<li id="kwick2"></li>
<li id="kwick3"></li>
<li id="kwick4"></li>
<li id="kwick5"></li>
</ul>
</div>
<div style="clear:both;"></div>
</body>
</html>
Thanks in advance
Unfortunately using z-index to 'layer' elements will cause the below elements to become non-interactive, but they are still obviously visible.
Therefore, there's two options here:
JavaScript - much like the coloured boxes below (layer 1), place a further element (layer 3) over the 'rounded corners' image (layer 2) but making the background-color: transparent for those interactable boxes, then referencing the JavaScript to move the 1st layer boxes as well as the 3rd layer boxes.
CSS - slice the rounded corner image to be used within those interactive boxes, and use them as background images. This would be a fair amount of work, trial and error to get it right but would mean no extra javascript or messing around with z-index.
Hope that helps, and doesn't confuse matters further :)
You can't place one element over another and retain the lower-level's interactivity. At least, not without using Javascript; and I can't think of a plugin or script that achieves what you want.
Could you use the image as some form of background for the element for which you want to retain the functionality?