I'd be really grateful if anyone could help me to solve the following "trouble".
I have a list of textual items ("text" < div >); every text refers to an image
The aim is to let the image appear in the "image" < div >, when the mouse is over the related-text
This is the best I could do ...
<html>
<head><style>
div { border: solid 1px #000; margin: 0 auto;}
#image { width: 250px;
float: right;
margin-top: 0px;
display: none; }
#text { width: 750px;
float: left; }
#text:hover + #image { display: block; }
</style></head>
<body>
<div style="width: 1004px; height: 500px; background-color:#dedede;">
<div id="text">Text-1 </div>
<div id="image"><img src="image-1.jpg" width=250px/></div>
<div id="text">Text-2</div>
<div id="image"><img src="image-2.jpg" width=250px/></div>
</div>
</body></html>
... the problem is: how con I allow the image to appear always at the top of its < div >, without following the text ?
Many thanks in advance !
Depends on your situation but I'd replace
#text:hover + #image { display: block; }
with
#text:hover + #image { display: block; position:absolute; margin-left:750px;}
That way the div will be always in the top right corner.
You can't use the same ID more than once in your HTML, so for this to work you would have to replace #text and #image with something like .text and .image using classes.
<div class="text">Text-1 </div>
<div class="image"><img src="image-1.jpg" width=250px/></div>
<div class="text">Text-2</div>
<div class="image"><img src="image-2.jpg" width=250px/></div>
Here's a demo of a working version: http://jsfiddle.net/cer95pqx/5/
Just change Your CSS code for #image to:
#image {
width: 250px;
position: absolute;
top: 0px;
right: 0px;
display: none;
}
And set position to relative, for parent div container.
<div style="width: 1004px; height: 500px; background-color:#dedede; position: relative;">
JSFiddle
Related
I have a problem with my images. I want to make 4 images look like this:
Image
But unfortunately image number 4 is under the rest of them and sticked to the left side of the document. I want it to be sticked to number 2 and 3.
Here is my code:
<div id="images">
<div class="off1"><img src='img/off1.jpg' /></div>
<div class="off2"><img src='img/off2.jpg' /></div>
<div class="off3"><img src='img/off3.jpg' /></div>
<div class="off4"><img src='img/off4.jpg' /></div>
</div>
And css:
.off1
{
float: left;
display: block;
}
.off2
{
display: block;
}
.off3
{
display: block;
position: relative;
bottom: 3px;
}
.off4
{
display: inline-block;
}
Thanks for help!
Add a wrapper element for image div 2 and 3, make that and divs 1 and 4 floats and give div 3 line-height: 0 to avoid a gap between 2 and 3:
http://codepen.io/anon/pen/gLdOyY
Use a mix of floats, positioning, and source-ordering. NO ADDED MARKUP.
Hope this helps you. Source-ordering can be a burden (which is why it's hard to do float:right on .off4. Yet, with CSS there's always a way!
/* added style for example only */
.off1 {
background-color: red;
height: 300px;
width: 100px;
}
.off2 {
background-color: #AAA;
width: auto;
height: 150px;
}
.off3 {
background-color: #ae5433;
width: auto;
height: 150px;
}
.off4 {
background-color: purple;
width: 100px;
height: 300px;
}
/* end added, example style */
#images {
position: relative;
}
.off1 {
float: left;
}
.off2,
.off3 {
width: auto;
}
.off4 {
position: absolute;
top: 0;
right: 0;
}
<div id="images">
<div class="off1">
<img src='img/off1.jpg' />
</div>
<div class="off2">
<img src='img/off2.jpg' />
</div>
<div class="off3">
<img src='img/off3.jpg' />
</div>
<div class="off4">
<img src='img/off4.jpg' />
</div>
</div>
I have three divs that I am trying to put on a single line. I want one to always snap left, and I want one to always snap right. The third one, which the display will be toggled using javascript, has to always be center. I've tried float. I've tried display:inline-block. Nothing works. Below is my code, any help would be greatly appreciated.
<div id="header" class="AppBackColor" style="color:#FFFFFF; padding:2px; width:100%; height:34px;">
<div style="height:100%;display:inline-block;float:left;">
<img src="Images/Logo/uss_logo_white.gif" height="30px" width="31px" alt="USS" />
<label>Change Control</label>
</div>
<div id="TimeoutWarning" style="height:100%; width:450px;display:inline-block;margin:0 auto;">Your session will expire in <label id="lblSessionCountDown">5:00</label>. Click <a style="color: Red;" href="#" onclick="ResetSession();void(0);">OK</a> to continue your session.</div>
<div style="height:100%;display:inline-block;float:right;">
<label>User:</label>
<asp:Label ID="lblUser" runat="server"></asp:Label>
<asp:ImageButton ID="btnLogout" runat="server" BorderStyle="None" ImageUrl="~/Images/Logout-icon.png" onclick="btnLogout_Click" Height="30px" Width="30px"/>
</div>
You can use absolute positioning like this:
.container {
position: relative;
width: 100%;
height: 50px;
}
.first {
width: 100px;
height: inherit;
position: absolute;
left: 0;
background-color: #FAA;
}
.second {
width: auto;
height: inherit;
position: absolute;
top: 0;
margin-left: 100px; // 1st div width
margin-right: 200px; // 3rd div width
background-color: #AFA;
}
.third {
width: 200px;
height: inherit;
position: absolute;
right: 0;
top: 0;
background-color: #AAF;
}
And then use a <div class="container"> which has inside the 3 divs with classes first, second and third.
If you set the margins of the second equals to the with of the first and third, like in the sample, it will fill up all the space.
You can look at it working in this fiddle: http://jsfiddle.net/jbustos/Bq2rw/
Here's an example of one way to do it. The order of the divs in the HTML being left, right, center is important, since otherwise the right will place itself below the left and center elements. See it live at jsfiddle (with JS to hide/show the center). Here's the HTML:
<div class="left">left text</div>
<div class="right">right</div>
<div class="center">center</div>
And CSS:
.left, .center, .right {
background-color: red;
width: 100px;
}
.left {
float: left;
}
.center {
margin: auto;
}
.right {
float: right;
}
I'm having weird CSS issue.
This jsfiddle shows it well.
HTML:
<div class="container" style="text-align: left;">
<div class="leftBox">
<div class="innerWrapper" style="background: gray;">Left</div>
</div>
<div class="rightBox">
<div class="innerWrapper" style="background: green;">Right</div>
</div>
</div>
<div class="container" style="text-align:center; background:red; ">Weird</div>
CSS:
.container {
width: 640px;
margin: 0 auto;
}
.leftBox {
width: 340px;
float: left;
}
.rightBox {
width: 300px;
float: left;
}
.innerWrapper {
width: 300px;
}
I don't understand why the lower div consumes the margin between the upper ones.
I expected it to consume only the "row" below the upper two columns.
Tried several different positioning and "voodos" but nothing helped.
Any idea?
Thanks.
You need to clear the element you want on it's own line, see fiddle: http://jsfiddle.net/JT5HL/1/
or CSS:
.container {
clear: both;
width: 640px;
margin: 0 auto;
}
.leftBox {
width: 340px;
float: left;
}
.rightBox {
width: 300px;
float: left;
}
.innerWrapper {
width: 300px;
}
Either give "clear:both" property to your ".container" class which is the older method.
SEE Fiddle: *http://jsfiddle.net/KjtJu/1/*
Or use the new solution "overflow: hidden;" property to your ".container" class
See fiddle: http://jsfiddle.net/8M3L9/1/
Use <div class="clear"></div> in your html inside the container div
Use .clear{clear:both;} in your css.
HTML:
<div class="container" style="text-align: left;">
...
<div class="clear"></div>
</div>
CSS:
.clear{clear:both;}
DEMO
You can change your innerWrapper to 100%;
.innerWrapper {
width: 100%;
}
This seems to work.
http://jsfiddle.net/JT5HL/4/
<div class="container" style="text-align:center; background:red; clear:both; ">Weird</div>
Why not just close the gap in between the left and right by making width: 320px;?
See Fiddle :http://jsfiddle.net/JT5HL/7/
Or you could add a height to the container like this height: 20px; this will get rid of the red in the space.
See Fiddle : http://jsfiddle.net/JT5HL/8/
What I would like to achieve (the goal)...
I'm trying to display a row of images (with the image name below the image) in html, like so:
When a user clicks on an image I want a square to appear over the image, to indicated selection like so (user has clicked on Tile1):
What I have done so far...
So far I have managed to display the tiles in a row:
Here's the html code that produced the image above:
<div id='default_tiles_view'>
<div class="default_tiles_view_square" id="tile1">
<img src="https://raw.github.com/andrespagella/Making-Isometric-Real-time-Games/master/img/tile.png">
<p>Tile1</p>
</div>
<div class="default_tiles_view_square" id="tile2">
<img src="https://raw.github.com/andrespagella/Making-Isometric-Real-time-Games/master/img/dirt.png">
<p>Tile2</p>
</div>
</div>
And the CSS:
#default_tiles_view {
width: 490px;
height: 160px;
overflow-y: auto;
}
.default_tiles_view_square {
display: inline-block;
}
.default_tiles_view_square p {
text-align: center;
}
And a fiddle showing the example above: http://jsfiddle.net/jamiefearon/t8d6U/
The strategy to achieve the goal...
I was thinking about wrapping the image and its title in a div, and then changing the background colour of the div. Here is the result and the code:
HTML:
<div id='default_tiles_view'>
<div class="tile_wrap" id="tile1">
<div class="default_tiles_view_square">
<img src="https://raw.github.com/andrespagella/Making-Isometric-Real-time-Games/master/img/tile.png">
<p>Tile1</p>
</div>
</div>
<div class="tile_wrap" id="tile2">
<div class="default_tiles_view_square">
<img src="https://raw.github.com/andrespagella/Making-Isometric-Real-time-Games/master/img/dirt.png">
<p>Tile2</p>
</div>
</div>
</div>
CSS:
#default_tiles_view {
width: 490px;
height: 160px;
overflow-y: auto;
}
.tile_wrap {
display: inline-block;
}
.default_tiles_view_square p {
text-align: center;
}
#tile1 {
background-color:red;
}
The Problem..
It does not look good, and the actual image is not covered by the red colour. Maybe it would be possible to overlay a div over the wrap div, set it's opacity < 1 and change its background colour.
What do think? Does anyone have any ideas of a good way to achieve the goal?
Something like this should do the trick: http://jsfiddle.net/t8d6U/1/
So just hide the overlay DIVs initially with display:none (or e.g. left:-9999px) then show them onClick.
CSS:
#default_tiles_view {
overflow: auto;
}
.default_tiles_view_square {
float: left;
margin: 5px 10px 10px 10px;
position: relative;
height: 128px;
width: 128px;
}
.default_tiles_view_square p {
text-align: center;
}
.content {
position: absolute;
z-index: 1;
top: 0;
left: 0;
}
.overlay {
position: absolute;
z-index: 2;
background: red;
opacity: 0.5;
height: 128px;
width: 128px;
top: 0;
left: 0;
}
HTML:
<div id='default_tiles_view'>
<div class="default_tiles_view_square" id="tile1">
<div class="content">
<img src="https://raw.github.com/andrespagella/Making-Isometric-Real-time-Games/master/img/tile.png">
<p>Tile1</p>
</div>
<div class="overlay"></div>
</div>
<div class="default_tiles_view_square" id="tile2">
<div class="content">
<img src="https://raw.github.com/andrespagella/Making-Isometric-Real-time-Games/master/img/dirt.png">
<p>Tile2</p>
</div>
<div class="overlay"></div>
</div>
</div>
I have taken what Gaurav said in the comments, changing the opacity:
HTML
<div id='default_tiles_view'>
<div class="tile_wrap" id="tile1">
<div class="default_tiles_view_square">
<img src="https://raw.github.com/andrespagella/Making-Isometric-Real-time-Games/master/img/tile.png">
<p>Tile1</p>
</div>
</div>
<div class="tile_wrap" id="tile2">
<div class="default_tiles_view_square">
<img src="https://raw.github.com/andrespagella/Making-Isometric-Real-time-Games/master/img/dirt.png">
<p>Tile2</p>
</div>
</div>
</div>
CSS
#default_tiles_view {
width: 490px;
height: 160px;
overflow-y: auto;
}
#tile1:hover{
background:red;
opacity:0.4;
}
.tile_wrap {
display: inline-block;
}
.default_tiles_view_square p {
text-align: center;
}
Fiddle: http://jsfiddle.net/jamiefearon/BY9Fp/
Hover over Tile1 to see the effect.
I have 3 divs and I cannot change the html dom:
<div id="a"/>
<div id="b"/>
<div id="c"/>
I need to create css file that displays those divs like the following table:
<table>
<tr>
<td id="a"></td>
<td rowspan="2" id="c"></td>
</tr>
<tr>
<td id="b"></td>
</tr>
</table>
Is there any way to do it?
Have the first two divs display:inline-block to keep them on the same line. Make the bottom div the width of the top two plus padding.
Sorry for a bit vague.
Example here:
http://jsfiddle.net/3ZWGx/4/
--Fixed--
Use the css display:
http://www.quirksmode.org/css/display.html#table
http://www.w3schools.com/cssref/pr_class_display.asp
It works in IE8+.
You have e.g. display:table, table-cell or table-column.
Unfortunatelly, the rowspan is not supported, but you can embed another div in it and emulate it.
Assuming that all three divs are surrounded by a container and that these can be rendered at a fixed width, this jsFiddle shows an approach using absolute positioning. Here's the code inline:
Markup (note, that some browsers don't render shortcut divs correctly):
<div id="container">
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
</div>
CSS:
#container
{
width: 400px;
height: 200px;
position: relative;
}
#a
{
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 100px;
background-color: red;
}
#b
{
position: absolute;
top: 100px;
left: 0;
width: 200px;
height: 100px;
background-color: green;
}
#c
{
position: absolute;
top: 0;
left: 200px;
width: 200px;
height: 200px;
background-color: blue;
}
Although there's a little extra spacing around the cells on the left, this gives similar presentation to what you're looking for:
demo at jsfiddle
<head>
<style type="text/css">
#divtable {
display: table;
border-collapse: separate;
border: 1px outset black;
border-spacing: 2px;
}
#d, #e, #f {
display: table-cell;
border: 1px inset black;
padding: 2px;
vertical-align: middle;
}
.row1, .row2 {
display: table-row;
}
.cell_f {
display: table-cell;
height: 100%;
}
</style>
</head>
<body>
<div id="divtable">
<div class="cell_de">
<div class="row1">
<div id="d">D</div>
</div>
<div class="row2">
<div id="e">E</div>
</div>
</div>
<div id="f">F</div>
</div>
What is required in addition to the code above to run these? I copied this into an html document and all I got was 3 rows.