I have a table with a bunch of cells. (No way! Amazing! :P) Some of the cells have a small div that when you put your mouse over, it gets bigger so you can read all the text. This works well and all. However, since html elements that come later in the document have a higher z-index, when the div gets bigger it is underneath the other divs in the other cells.
Some html code:
<table>
<tr>
<td>
limited info
<div style="position: relative;">
<div style="position: absolute; top: 0; left: 0; width: 1em; height: 1em;" onmouseover="tooltipshow(this)" onmouseout="tooltiphide(this)">
informative long text is here
</div>
</div>
</td>
<td>
some short info
<div style="position: relative;">
<div style="position: absolute; top: 0; left: 0; width: 1em; height: 1em;" onmouseover="tooltipshow(this)" onmouseout="tooltiphide(this)">
longer explanation about what is really going on that covers the div up there ^^^. darn!
</div>
</div>
</td>
</tr>
</table>
Some js code:
function tooltipshow(obj)
{
obj.style.width = '30em';
obj.style.zIndex = '100';
}
function tooltiphide(obj)
{
obj.style.width = '1em';
obj.style.zIndex = '20';
}
It doesn't matter if I set z-index dynamically to something higher onmouseover. It's like z-index has no affect. I think it has something to do with the table.
I've tested this in FireFox3. When I'm feeling particularly macho, I'll test it in IE.
Have you tried a CSS-based solution?
HTML:
<table>
<tr>
<td>
limited info
<div class="details">
<div>
informative long text is here
</div>
</div>
</td>
<td>
some short info
<div class="details">
<div>
longer explanation about what is really going on that covers the div up there ^^^. darn!
</div>
</div>
</td>
</tr>
</table>
CSS:
.details {
position: relative;
}
.details div {
position: absolute;
top: 0;
left: 0;
width: 1em;
height: 1em;
}
.details div:hover {
width: 30em;
z-index: 100;
}
If Javascript is necessary, you can change the .details div:hover { line to .show-details { and apply the class to the element using element.className = 'show-details';
Use the same HTML/CSS from #Kevin answer, but change the z-index of the relative div .details as well. This will work better on IE.
It turns out that setting z-index and opacity were messing things up. Check this out:
<html>
<head>
<style>
td {
background-color: #aaf;
padding: 1em;
}
.relative {
position: relative;
width: 100%;
}
div.highlight {
position: absolute;
background-color: green;
bottom: -1em;
left: 0;
width: 100%;
height: 0.2em;
/* the offenders */
z-index: 10;
opacity: 0.8;
}
div.tag {
background-color: red;
position: absolute;
top: -5em;
left: 0;
width: 1em;
height: 1.5em;
overflow: hidden;
z-index: 20;
font-size: 0.6em;
text-align: left;
border: solid 0.1em #000;
padding-left: 0.3em;
}
div.tag:hover {
width: 30em;
z-index: 100;
}
</style>
</head>
<body>
<table>
<tr>
<td>
limited info
<div class="relative">
<div class="highlight">
<div class="tag">
informative long text is here
</div>
</div>
</div>
</td>
<td>
some short info
<div class="relative">
<div class="highlight">
<div class="tag">
aaaaaaaaaalolkjlkjnger explanation about what is really going on that covers the div up there ^^^. darn!
</div>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
Related
I'm trying to get the text to display over each individual image, I can't figure out why it's not displaying at all. From what I can tell I don't have the text hidden or anything, it's just not displaying on top of the corrisponding images.
I'm very new to html/css so i'm proberly missing someting quite obvious.
<html>
<body>
<table class="index">
<tr>
<td>
<img src="C:\Users\44074\Desktop\Learnnig\Website\Art\Care-Guide.jpg">
Care guides
</td>
<td>
<img src="C:\Users\44074\Desktop\Learnnig\Website\Art\Prop.jpg">
Propagation
</td>
<td>
<img src="C:\Users\44074\Desktop\Learnnig\Website\Art\Trouble.jpg">
Troubleshooting
</td>
</tr>
<tr>
<td>
<img src="C:\Users\44074\Desktop\Learnnig\Website\Art\Easy.jpg">
Easy plants
</td>
<td>
<img src="C:\Users\44074\Desktop\Learnnig\Website\Art\Pilea.jpg">
Pilea
</td>
<td>
<img src="C:\Users\44074\Desktop\Learnnig\Website\Art\Pets.jpg">
Pets & plants
</td>
</tr>
</table>
</body>
</html>
table.index{
table-layout: fixed;
border-spacing: 25px 35px;
font-size: 20px;
color: #575151;
padding-left: 180px;
padding-right: 180px;
}
table.index td {
height: 220px;
width: 360px;
min-width: 200px;
position: relative;
border: 1px solid black;
background-color: #575151;
vertical-align: middle;
text-align: center;
}
table.index td img {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
div.index {
width: 100%;
}
You should put your text in an HTML element for example p tag: <p>Easy plants</p>
Give the p element a relative position: position: relative;
This will position it over the absolutely positioned image.
If you happen to change the order of the images and the text elements later, you should give the text elements a higher z-index value than the images.
Behavior of code snippet is different in Chrome 51.0.2704.103 and Firefox 47.0.1.
Please explain why this happens. Where behavior is correct, where not and why you think so. Thanks.
div,
td {
border: 1px solid black;
}
.container {
position: absolute;
}
.w100Pc {
width: 100%;
}
.nowrap {
white-space: nowrap;
}
<div class="container">
<div>Modal dialog header</div>
<table>
<tr>
<td class="w100Pc">rest of space column</td>
<td class="nowrap">content based width column</td>
</tr>
</table>
<div>Here goes main content what should stretch "container" width</div>
<div>Modal dialog footer</div>
</div>
Browser render the code differently i guess it's because they follow different standards, i think Firefox is rendering the code currently in you example and to make it look the same in both browsers just add display:block;
div,
td {
border: 1px solid black;
}
.w100Pc {
display:block;
width: 100%;
font-family:'Times New Roman';
}
.container {
position: absolute;
left: 200px
}
<div style="position: absolute; left:200px">
<table class="w100Pc">
<tr>
<td class="w100Pc">
w100Pc
</td>
<td>buttons</td>
</tr>
</table>
</div>
So, I'm trying to send an email with information from a user. It should look like this:
But for some reason the css won't work in the email, as it looks like this:
The CSS is as follows:
div.block {
margin: 0;
padding: 0;
padding-bottom: 1.25em;
margin-left: 130px;
}
div.block label {
margin: 0;
padding: 0;
display: block;
font-size: 100%;
padding-top: .1em;
padding-right: .25em;
width: 6em;
text-align: right;
float: left;
}
div.block span {
margin: 0;
padding: 0;
display: block;
font-size: 100%;
}
And my HTML:
<div class="block">
<label>Voornaam:</label>
<span>%voornaam%</span>
</div>
<div class="block">
<label>Achternaam:</label>
<span>%achternaam%</span>
</div>
<div class="block">
<label>E-mailadres:</label>
<span>%email%</span>
</div>
<div class="block">
<label>Telefoon:</label>
<span>%telefoon%</span>
</div>
<div class="block">
<label>Toelichting:</label>
<span>%toelichting%</span>
</div>
<div class="block">
<label>Datum:</label>
<span>%datum%</span>
</div>
CSS in emails is still not supported very well. For the layout you want, using a <table> with inline styles instead of a div-based layout would be the best way to achieve it.
If the images is what you need a table would do fine. You can adjust the padding-left to what you think is best for the layout. You can add a margin-left: 10px or something to the table itself to move the table more to the right.
<table class="emailtable">
<tr>
<td>Voornaam:</td>
<td style="padding-left: 40px;">%voornaam%</td>
</tr>
<tr>
<td>Achternaam:</td>
<td style="padding-left: 40px;">%achternaam%</td>
</tr>
<tr>
<td>E-mailadres:</td>
<td style="padding-left: 40px;">%email%</td>
</tr>
<tr>
<td>Telefoon:</td>
<td style="padding-left: 40px;">%telefoon%</td>
</tr>
<tr>
<td>Toelichting:</td>
<td style="padding-left: 40px;">%toelichting%</td>
</tr>
<tr>
<td>Datum:</td>
<td style="padding-left: 40px;">%datum%</td>
</tr>
A few simple modifications in your CSS will fix that:
div.block {
margin: 0;
padding: 0;
padding-bottom: 1.25em;
margin-left: 130px;
}
div.block label {
margin: 0;
padding: 0;
display: inline-block;
font-size: 100%;
padding-top: .1em;
padding-right: 2em;
width: 6em;
text-align: right;
}
div.block span {
margin: 0;
padding: 0;
display: inline-block;
font-size: 100%;
width: 20em;
}
I prepared a jsfiddle as a demonstration: https://jsfiddle.net/zL2ntzdh/
That said I would like to add that using HTML markup in email messages is a questionable thing. Yes, it does make the message look a bit more shiny. But it comes with huge disadvantages: the message size will get multiplied, the chances of your message being considered SPAM is automatically multiplied, you request ultimate trust from the addressees, so you have to expect that many of them will silently delete the message to prevent security issues.
How can I get three divs to look as they are shown below with only HTML and CSS? Is it possible to align them in a way that the bottom text will stay under the text which is the longest?
<html>
<div id=1>
Short text
Bottom text?
</div>
<div id=2>
Long text
Bottom text?
</div>
<div id=3>
Not so long text
Bottom text?
</div>
</html>
As #Ruddy pointed outThanks for that, I used Flexbox approach for this, with CSS Positioning, so am using display: flex; for the parent element, and wrapping the bottom text in a span, and than am positioning the span to bottom using position: absolute; also, you don't have to assign fixed height to the containers, as we are using display: flex;
Flex Demo
div.parent {
display: flex;
}
div.parent > div {
border: 4px solid #000;
width: 33%;
float: left;
position: relative;
padding-bottom: 30px; /* Make sure you tweak this, to the
highest height of your bottom content*/
}
div.parent > div > span {
position: absolute;
bottom: 0;left: 0;
}
Well, obviously you can use position: absolute; with bottom: 0; with padding-bottom: 30px;(approx) and wrap the bottom text in span and use position: relative; on the container element but again, you won't be able to stretch the other two containers which doesn't have height and thus it will fail.
So you need to use display: table-cell; with vertical-align: bottom;, it will keep pushing the text to the bottom which has content, also, vertical-align: bottom; will see to it that even the other containers text stick to the bottom
Demo
div.parent {
display: table;
}
div.parent > div {
border: 4px solid #000;
width: 33%;
display: table-cell;
vertical-align: bottom;
}
Yes, this is possible. But first: give the three a wrapper. Beside that, you can't use numbers as ID's.
Here you go: http://jsfiddle.net/SP68r/
<div class="wrapper">
<div id="first">
Short text
Bottom text?
</div>
<div id="second">
Long text
Long text
Long text
Long text
Long text
<div class="bottom">bottom text</div>
</div>
<div id="third">
Not so long text
</div>
</div>
The CSS
.wrapper { width: 350px; }
#first, #second, #third { float: left; width: 100px; }
#first { margin-right: 10px; }
#second { padding-bottom: 40px; margin-right: 40px; }
div.bottom { position: absolute; bottom: 0; }
<div id="1" style="border: 2px black solid; width: 120px;
height: 160px; position: relative;">
<div style="text-align: left;" id="1-1">
Not so long text
</div>
<div style="left: 17%;position: absolute; bottom:0px;" id="1-2">
Bottom text?
</div>
</div>
You can use position:absolute
DEMO
Simple Solution : Use a table.
<table border="1" width="100">
<tr valign="top">
<td>DIV 1</td>
<td>DIV 2<BR/>THIS IS A BIG, BIG, LONG PARAGRAPH, WHICH WILL GO DOWN THAN THE OTHER TWO CELLS.</td>
<td>DIV 3</td>
</tr>
<tr>
<td>BOTTOM TEXT</td>
<td>BOTTOM TEXT</td>
<td>BOTTOM TEXT</td>
</tr>
</table>
fiddle here.
I am attempting to create a CSS popup, when hovering over an object. This will be an "info" popup, but I want to interact with HTML inside this popup window.
My idea is to create a DIV, and on hover, have a style that grows the div, showing the relevant HTML to interact with. Upon exit of the resized DIV, normal style to shrink the div back to original size. I don't want to use jQuery or equivalent popups, as I need to have the interaction as quick as possible. I don't want to create a popup, that disappears when leaving the item that popped it, before being able to enter and interact with the HTML in the popup.
My concerns are, having multiple of these objects (divs), I am not sure how they would interact with each other when they are resized, as I will probably need to absolute position the divs in an irregular layout.
Are there better ways to go about this?
A good example of what I am attempting to do, is the Netflix web interface, when hovering over a title, and interacting with the popup.
Ok, my Div layout idea, as above, seems to be doing the trick.
I am changing the z index on hover and normal style's ( of 0 for normal, and z of 1 for hover), for each div, and absolutely positioning the div's.
This way, each "hover" hovers on top of all the other collapsed div's. Its doing the trick for me, for now.
I am leaving this as unanswered, if someone can suggest a better way of achieving this, that might be more efficient than my current solution, please add your solution.
<div id="Container" style="position: relative" >
<%--1st div - Blue--%>
</div>
</td>
<td style="padding: 5px; width: 120px; background-color: #0099FF; color: #FFFFFF;" >
This is my Unit<br />
<br />
Unit details<br />
Unit Details 2<br />
<br />
Book Now</td>
</tr>
</table>
</div>
<%--2nd div - Red--%>
<div class="unit2">
<table cellpadding="0" cellspacing="0">
<tr>
<td style="width: 20px" valign="top">
<div style="width: 20px; height: 20px; background-color: #FF3300">
</div>
</td>
<td style="padding: 5px; width: 120px; background-color: #FF3300; color: #FFFFFF;" >
This is my Unit<br />
<br />
Unit details<br />
Unit Details 2<br />
<br />
Book Now</td>
</tr>
</table>
</div>
<%--3rd div - Green--%>
<div class="unit3">
<table cellpadding="0" cellspacing="0">
<tr>
<td style="width: 20px" valign="top">
<div style="width: 20px; height: 20px; background-color: #009933">
</div>
</td>
<td style="padding: 5px; width: 120px; background-color: #009933; color: #FFFFFF;" >
This is my Unit<br />
<br />
Unit details<br />
Unit Details 2<br />
<br />
Book Now</td>
</tr>
</table>
</div>
</div>
CSS >>
.unit1
{
width: 20px;
height: 20px;
overflow: hidden;
position: absolute;
top: 0px;
left: 0px;
z-index: 0;
}
.unit1:hover
{
width: 140px;
height: auto;
z-index: 1;
}
.unit2
{
width: 20px;
height: 20px;
overflow: hidden;
position: absolute;
top: 5px;
left: 35px;
z-index: 0;
}
.unit2:hover
{
width: 140px;
height: auto;
z-index: 1;
}
.unit3
{
width: 20px;
height: 20px;
overflow: hidden;
position: absolute;
top: 35px;
left: 20px;
z-index: 0;
}
.unit3:hover
{
width: 140px;
height: auto;
z-index: 1;
}