I have following html. How can I get this so that dragDiv is shown on top of the image?
<div id="pnlContainer" class="container">
<img id="cropbox" src='1.jpg' />
<div class="dragDiv" id="dragDiv">
</div>
</div>
.dragDiv {
width:400px;
background-color:transparent;
border:2px solid #CCCCCC;
position:relative;
left:20px;
top:20px;
padding:0px;
margin:0px;
height:50px;
}
Currently, you're actually moving the dragDiv down and away from the image. If you just change your code to -20px and -20px on the .dragDiv css, it will be over the image.
Or, you could give the "pnlContainer" relative positioning, then absolutely position both the "dragDiv", and the "cropBox" - you shouldn't need z-index - just by positioning, the div will appear over the image in this case.
Either way is just fine. Bottom line is - positioning them correctly in this case will get the div over the image.
<style type="text/css">
#pnlContainer {
position: relative;
}
#dragDiv {
position: absolute;
top: 0px;
left: 0px;
width:400px;
background-color: transparent;
border:2px solid #CCCCCC;
position:relative;
left:20px;
top:20px;
padding:0px;
margin:0px;
height:50px;
}
#cropbox {
position: absolute;
top: 0px;
left: 0px;
}
</style>
You could make sure one element appears above the other using the Z-index CSS property:
Related
I am trying to build a container with the dimensions of 26x26 pixels and display a number at the very bottom right of this container. In addition, I would like to add a background 24x24 picture to the container.
The code I have so far is as follows
<html>
<style>
body {
height:26px;
width:26px;
background-color:red;
}
#bottom {
vertical-align:bottom;
text-align:right;
background-color:yellow;
}
</style>
<body>
<p id="bottom">2</p>
</body>
</html>
And here's a JSFiddle link to make things easier https://jsfiddle.net/n8ku715x/
As you can see from JSFiddle, it is not entirely working. It's not even setting the right dimensions. Any help is appreciated.
<style>
body {
}
#ctn {
height: 26px;
background-color: red;
width: 26px;
position:relative
}
#bottom {
position: absolute;
bottom: 0;
right: 0;
font-size: 8px;
color: #fff
}
</style>
<body>
<p id="ctn"><span id="bottom">2</span></p>
</body>
Here's your container, with the number within it - is that what you were looking for?
Try this:
CSS
.container{
width:26px;
height:26px;
position:relative;
background-color:red;
}
.container-number{
position:absolute;
bottom:0;
right:0;
background-color:yellow;
}
HTML
<div class="container">
<div class="container-number">2</div>
</div>
Just add bottom 0 and position to the class if u wants the fixed
CSS
#bottom {
background-color: yellow;
bottom: 0px;
position: fixed;
}
I have an image in the center of a div
The image is centered in the parent div using the following css:
img { margin:0px auto; }
The image can have arbitrary dimensions.
How can I position the Magnifying Glass (zoom) image on top left of the image without using Javascript, while the main image can have any width or height?
User position:relative and position:absolute. Look at the following HTML and CSS.
HTML
<div class="parent">
<div class="test"><img src="http://isc.stuorg.iastate.edu/wp-content/uploads/sample.jpg" border="0" />
<img src="http://www.beyotta.net/images/icon_magnifier.png" border="0" class="absimg" />
</div>
</div>
CSS
.parent {width:100%; height:400px; border:1px solid blue; text-align:center;}
.test
{
display:inline-block;
position:relative;
}
.absimg
{
position:absolute;
top:5px;
left:5px;
}
FIDDLE DEMO
Giving a position relative to the image and absolute to the magnifying glass image would do the trick here's the demo on what I've done.
http://jsbin.com/yumelamive/5/edit?html,css,output
i am not sure it will work or not but try using before will help
img:before {
content: 'img/zoom.png ';
position:absolute;
top:0px;
left:0px;
}
for proper help atleast provide a jsfiddle or code of your work
Try Use this
jsfiddle
div{
content:"";
display:block;
height:300px;
width:300px;
border:solid 1px #CCCCCC;
background-image: url("http://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg");
position: absolute;
}
div:before {
content:"";
background-image: url("http://icons.iconarchive.com/icons/icontexto/search/48/search-red-icon.png");
top:0;
left:0;
position:absolute;
width: 40px;
height: 48px;
}
I would make a div for the image, set the background the image and add:
position: relative;
for that div. Then put the magnifying glass within the div and set:
position: absolute: top: 0; left: 0;
.image {
background: url(eiffel.jpg);
position: relative;
width: 100px;
height: 200px;}
.image img {
position: absolute;
top: 0;
left: 0:}
The 'relative' is what any 'absolute' objects..relate to.
I hope that helps.
set the image Magnifying Glass to absolute:positionand use left: right: for right position then the parent div set to position:relative
I have this code :
<div class="header_photo">
<div class="header_inside">
<div class="header_text">
Text
</div>
</div>
<div class="header_photo_transparent"> </div>
</div>
.header_inside
{
top: 0px;
left: 0px;
display: block;
width: 975px;
background: none repeat scroll 0% 0% transparent;
z-index: 4;
position: absolute;
}
.header_text
{
position:absolute;
bottom:15px;
width:500px;
z-index:201;
left:370px;
font-size:12px;
line-height:13px;
}
.header_photo_transparent
{
position:absolute;
bottom:0;
left:0;
width:960px;
height:64px;
background-color: red;
z-index:100;
}
and I'd like to display the string Text over the red background, without :
changing the z-index of header_photo_transparent;
without removing position:absolute from header_inside
In fact I don't see the string Text.
Why this behaviour? And how can I fix this trouble?
Z-index is not at fault, just remove the z-index and use the positioning. The positioning is out, not the layers.
http://jsfiddle.net/zaSKZ/1/
I have 3 div.
<div class="main"></div>
<div id="fixedbox"></div>
<div id="fixedBar"></div>
CSS:
.main {
width: 850px;
padding:25px 5px;
border-left:1px solid #999;
border-right:1px solid #999;
text-align:left;
overflow:hidden;
}
body {
height: 100%;
margin: 0;
overflow-y: auto;
}
body #fixedbox {
position:fixed !important;
position: absolute;
left: 865px;
top: 0;
width: 160px;
}
#fixedBar {
display:block;
position: absolute;
width:100%;
height:20px;
position:fixed;
bottom:0;
left:0;
background:#F00;
}
* html #fixedBar {
position:absolute;
}
Problem is this:
When Im adding a block with "position:relative" in main div, the block will move in scroll in ie. With adding "position:relative" to body or main, there is other problems in ie. How can I used positions without problems in "<div class="main"></div>" ?
Thanks in advance
EDIT: I have solved the problem with change the doctype.
I presume you are adding position:relative to the body to position the 2 fixed position:absolute containers? If not you will need to.
I have had some problems with setting position:relative in IE in the past. Try some of the usual hacks like setting
height:1%;
Or
display:block;
to .main
You may find a specific solution on http://www.positioniseverything.net
alt text http://img13.imageshack.us/img13/9776/dviswheretogo.png
Blue is where the image of the corners will go
Green is a repeating image on the x axis on the top, all part of the same template!
And orange is a simgle image repeating on the y axis
For clarification here is what I've tried so far, i'm angry about this because when I use relative position it breaks because of an with background that is above! Anyway I need to define a height and width for each item!
.sheet {position:relative;
top:140px;
width:1000px;}
.tl {
background:url(../images/sheet_top_left-trans.png) no-repeat;
width:20px;
height:20px;
top:0px;
left:0px;}
.tm {
background:url(../images/sheet_top-trans.png) repeat-x;
width:960px;
height:20px;}
.tr {
background:url(../images/sheet_top_right-trans.png) no-repeat;
width:20px;
height:20px;
top:0px;
right:0px;}
.content {
background:url(../images/sheet_middle.png) repeat-y;
top:20px;
width:1000px;
height:400px;}/* Demonstration only, please remove later */
.bl {
background:url(../images/sheet_bottom_left-trans.png) no-repeat;
width:20px;
height:30px;}
.bm {
background:url(../images/sheet_bottom-trans.png) repeat-x;
height:30px;
width:960px;
bottom:0px;
left:20px;}
.br {}
and the html
<div class="sheet"><!-- Glass Effect Starts here -->
<div class="tl"></div>
<div class="tm"></div>
<div class="tr"></div>
<div class="content">Here we go again</div>
<div class="bl"></div>
<div class="bm"></div>
<div class="br"></div>
If I use absolute postitioning I can't make the bottom images stick to it! tho it works at the top!
Now I've found I way to do it that is cross-browser (even IE6 just don't use transparent PNG as I did) here we go:
HTML:
<div class="sheet">
<div class="top_sheet">
<div class="tl"></div>
<div class="tm"></div>
<div class="tr"></div>
</div>
<div class="middle">.</div>
<div class="bottom_sheet">
<div class="bl"></div>
<div class="bm"></div>
<div class="br"></div>
</div>
</div><!-- End of the sheet class -->
CSS:
.sheet {position:relative;
width:1000px;
top:10px;}
.top_sheet {width:1000px;
height:20px;}
.tl {float:left;
background:url(../images/sheet_top_left-trans.png) no-repeat;
height:20px;
width:20px;}
.tm {float:left;
background:url(../images/sheet_top-trans.png) repeat-x;
height:20px;
width:960px;}
.tr {float:right;
background:url(../images/sheet_top_right-trans.png) no-repeat;
height:20px;
width:20px;}
.middle {position:relative;
background: url(../images/sheet_middle.png) repeat-y;
width:1000px;
height:400px;}
bottom_sheet {width:1000px;
height:30px;}
.bl {float:left;
background:url(../images/sheet_bottom_left-trans.png) no-repeat;
width:20px;
height:30px;}
.bm {float:left;
background:url(../images/sheet_bottom-trans.png) repeat-x;
width:960px;
height:30px;}
.br {float:right;
background:url(../images/sheet_bottom_right-trans.png) no-repeat;
width:20px;
height:30px;}
Trying to use the same html you already have, here is something that seems to work pretty well.
Move the corners into an all encompassing top and bottom bar. And then float the respective corners left and right.
CSS:
.sheet {
position:relative;
width:1000px;
top:140px;}
.tl {
background:url(images/sheet_top_left-trans.png) no-repeat;
float:left;
width:20px;
height:20px;
margin-left:-20px;}
.tm {
background:url(images/sheet_top-trans.png) repeat-x;
height:20px;
margin-left:20px;}
.tr {
background:url(images/sheet_top_right-trans.png) no-repeat;
float:right;
width:20px;
height:20px;}
.content {
background:url(images/sheet_content.png) repeat-y;
clear:both;
height:200px;}/* Demonstration only, please remove later */
.bl {
background:url(images/sheet_bottom_left-trans.png) no-repeat;
float:left;
width:20px;
height:30px;}
.bm {
background:url(images/sheet_bottom-trans.png) repeat-x;
height:30px;}
.br {
background:url(images/sheet_bottom_right-trans.png) no-repeat;
float:right;
width:20px;
height:30px;}
HTML:
<div class="sheet"><!-- Glass Effect Starts here -->
<div class="tm">
<div class="tl"></div>
<div class="tr"></div>
</div>
<div class="content">Here we go again</div>
<div class="bm">
<div class="bl"></div>
<div class="br"></div>
</div>
</div>
Have you tried some cross-browser css framework, e.g. http://www.blueprintcss.org?
These frameworks usually let you define grids and will help you to overcome browser-specific quirks by resetting certain css properties ...
Fluid width containers with rounded corners using valid CSS and XHTML
The method I usually see is nesting all the divs to layer them, then setting the background-repeat and background-position on each one. Basic example:
<div class="tl">
<div class="tr">
<div class="content">Here we go again</div>
</div>
</div>
With CSS:
.tl, .tr {
width: 100%;
height: 100%;
}
.tl {
background: url("tl.png") no-repeat 0 0;
}
.tr {
background: url("tr.png") no-repeat 100% 0;
}
Simply scale that up to use all your separate images. You'll need to have the sides first (on the outside of the 'div nest') and the corners last (on the inside, right before the content div).
It's a classic case of "divitis", but it's hard to avoid until CSS3 is well supported (where you can use multiple backgrounds or simply a border image). You might was to check out Sliding Doors, which shows a technique for reducing the number of elements/images needed.
css:
.sheet {
position:relative;
top:140px;
width:1000px;
}
.tl {
background:url(blue.bmp) no-repeat;
width:20px;
height:20px;
top:0px;
left:0px;
}
.tm {
position: absolute;
background:url(green.bmp) repeat-x;
width:960px;
height:20px;
left: 20px;
top: 0px;
}
.tr {
position: absolute;
background:url(blue.bmp) no-repeat;
width:20px;
height:20px;
top:0px;
right:0px;
}
.content {
background:url(orange.bmp) repeat-y;
top:20px;
width:1000px;
height:400px;}/* Demonstration only, please remove later */
.bl {
background:url(blue.bmp) no-repeat;
width:20px;
height:30px;}
.bm {
position: absolute;
background:url(green.bmp) repeat-x;
height:30px;
width:960px;
bottom:0px;
left:20px;}
.br {
position: absolute;
background:url(blue.bmp) no-repeat;
width:20px;
height:30px;
top:420px;
right:0px;
}
html:
<div class="sheet"><!-- Glass Effect Starts here -->
<div class="tl"></div>
<div class="tm"></div>
<div class="tr"></div>
<div class="content">Here we go again</div>
<div class="bl"></div>
<div class="bm"></div>
<div class="br"></div>
I put absolute positioning on each divs so that we can position it side by side. Hope it helps.
BTW, I changed the background url. :)
Winks as he says this and may regret it:
You know, if you used a table... ;>P!
(Now, waits for the tables vs. css crowd to unleash!)
This looks like your regular, garden-variety rounded corners 'section'.
Here's one without images:
http://www.html.it/articoli/nifty/index.html
Here's one with:
http://kalsey.com/2003/07/rounded_corners_in_css/
When you're finished coding it and it looks like what you want, turn it into a code snippet and keep it.
I don't mean to be a smartarse, but you hardly need 7 divs for what you try to achieve. Five divs are enough (in most case you don't even need that. I really don't know how to explain, but you can check http://www.nil.com/english (Quick links or Get support boxes) for source.
Also, there is a great book about it called "Bulletproof web design"
You were close. You yet have to position the containing element relative (so that all absolute positioned child elements are relative to it) and to position the corner parts absolute. Here's a SSCCE:
<!doctype html>
<html lang="en">
<head>
<title>SO question 1898479</title>
<style>
.sheet {
position: relative;
width: 200px;
}
.tl {
position: absolute;
width:20px;
height:20px;
top: 0;
left: 0;
background: blue;
}
.tm {
position: absolute;
height:20px;
top: 0;
left: 20px;
right: 20px;
background: green;
}
.tr {
position: absolute;
width: 20px;
height: 20px;
top: 0;
right: 0;
background: blue;
}
.content {
background: orange;
padding: 20px 0; /* Padding must be at least as much as the "borders" are thick. */
height: 300px;
}
.bl {
position: absolute;
width: 20px;
height: 20px;
bottom: 0;
left: 0;
background: blue;
}
.bm {
position: absolute;
height: 20px;
bottom: 0;
left: 20px;
right: 20px;
background: green;
}
.br {
position: absolute;
width: 20px;
height: 20px;
bottom: 0;
right: 0;
background: blue;
}
</style>
</head>
<body>
<div class="sheet">
<div class="tl"></div>
<div class="tm"></div>
<div class="tr"></div>
<div class="content">Here we go again</div>
<div class="bl"></div>
<div class="bm"></div>
<div class="br"></div>
</div>
</body>
</html>
You only need to ensure that you're using the strict doctype as used in the above example so that it works in IE as well.