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.
Related
I'm trying to get away from using the table layout to do specific layouts. I know it's sloppy programming so I'm redoing it. I can't seem to recreate something like this using the div tag:
<table border=10 cellpadding=10 width="90%">
<tr>
<td align="center" width="143">
<img src="http://blah.com/images/133widepixelimage.jpg">
</td>
<td align="center">
Some text describing the image
</td>
</tr>
</table>
I've got the border, padding, width and alignment all done in a CSS file, and that works fine. But setting the width of the centered image still doesn't allow the centered text to show up to the right of the image. It still wraps to the next line. If I center the image left, and set float: left, that works. But not two centered even if the parent div is wide enough to accommodate.
Try this snippet:
.container{
margin-top: 30px;
width: 90%;
display: flex;
border: 10px solid black;
height: 50px;
border-left-color: gray;
border-top-color: gray;
}
.img{
width: 143px;
}
.img > img{
width: 100%;
}
.container > div {
vertical-align: middle;
line-height: 40px;
text-align: center;
margin: 1px;
border: 1px solid black;
display: inline-block;
}
.text{
flex: 1;
}
<div class="container">
<div class="img">
<img src="http://blah.com/images/133widepixelimage.jpg">
</div>
<div class="text">
Some text describing the image
</div>
</div>
You can do it with divs, using flexbox like the example showed above
I want to make a formatted paragraph whose image is located in left, the text is located in right with CSS.
However, it looks good when I type a single line text, but the top position is changed when I type two-line text or more.
Its source is on
http://jsfiddle.net/RXrvZ/1883/
and the main part of CSS is:
.post-container {
margin: 20px 20px 0 0;
border: 1px dotted #333;
overflow: auto;
}
.greenbox {
display: block;
border: 1px dotted #383;
width: 100%;
}
.redbox {
display: inline-block;
border: 1px dotted #f33;
width: 70%;
height: 100px;
}
.redbox10 {
display: inline-block;
border: 1px dotted #f33;
width: 20%;
height: 100px;
}
And its HTML code is like:
<div class="greenbox">
<div class="redbox10">
<img src="#">
</div>
<div class="redbox">
One Line Text
</div>
</div>
How can I place the top line same whatever I type in?
Thanks for your help.
Set the left column to align at the top.
.redbox10 {
vertical-align: top;
}
JSfiddle
You need to specify vertical align to be top:
.redbox, img{
display: inline-block;
vertical-align: top;
}
Here's the updated demo
you should use float:
.redbox {
float: left;
}
.redbox10 {
float: left;
}
you can give them a margin for some space.
Demo
Demo With Margin
This could be rather simplified if made using a table.
I hope this helps.
.mainTable{
padding: 10px;
}
.outerRow{
padding: 10px;
}
.imageColumn{
border: 1px solid;
padding: 10px;
vertical-align: top;
}
.textColumn{
border: 1px solid;
padding: 10px;
}
<div class="container">
<table class="mainTable">
<tr class="outerRow">
<td class="imageColumn">
<img src="#"/>
</td>
<td class="textColumn">
One Line Text
</td>
</tr>
<tr class="outerRow">
<td class="imageColumn">
<img src="#"/>
</td>
<td class="textColumn">
Two Lines Text - rai oda bi iod ieo idooosido oiojs oijodif oijoa oijsdf
</td>
</tr>
<tr class="outerRow">
<td class="imageColumn">
<img src="#"/>
</td>
<td class="textColumn">
Three Lines Text - rai oda bi iod ieo idooosido oiojs oijodif oijoa oijsdf hello hello hello hello hello hellohellohellohellohellohello
</td>
</tr>
</table>
</div>
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;
}
I want to keep the tables but use css to achieve the same positioning result with a strict doctype. This is the design that does exactly what I need.
Notice the <br> tags in the last (bottom) <td> cell. As this area grows, the position of the data within two other <td> cells above it do not change position.
<table cellpadding="0" cellspacing="0" border="1" width="400" height="100%">
<tr>
<td valign="top">
<table cellpadding="0" cellspacing="0" border="0" height="100%">
<tr>
<td valign="top">ds</td> <----- The position here is important
</tr>
<tr>
<td valign="bottom">ds</td> <----- The position here is important
</tr>
</table>
</td>
<td valign="top">ada adf ad<br><br><br><br><br><br><br><br><br></td>
</tr>
</table>
I made an example for you here to show you how easy it is to duplicate that table with Divs and CSS:
HTML:
<div id="main-div-wrap">
<div class="left-content">
<span class="top">ds</span>
<span class="bottom">ds</span>
</div>
<div class="right-content">
ada adf ad
</div>
</div>
CSS:
#main-div-wrap
{
position: absolute;
width: 400px;
height: 200px;
border: 1px solid #000;
}
.left-content
{
width: 18%;
float: left;
height: 100%;
}
.right-content
{
margin-left; 18%;
width: auto;
float: left;
height: 100%;
border-left: 1px solid #000;
}
.top
{
position: absolute;
display: block;
top: 0;
}
.bottom
{
position: absolute;
display: block;
bottom: 0;
}
All semantic, no hacks, will validate and if you need to change it for browsers, theres more than enough tools out there to help you.
I'm not sure what you mean with "keep the tables for the structure", but I guess you what something like this, however if the content is too short, then the "top" and "bottom" texts will overlap.
http://jsfiddle.net/HsmKA/
Variant with CSS styled tables:
http://jsfiddle.net/JmQ55/
You can find all you want here.
Coming from a tables word myself I've always found the DIV layout a pain in the a$$.
Check out blue print css its a very easy to use CSS framework. Might sort you out
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>