I'm new to CSS. I need to display a number (generated dynamically through ASP.NET MVC action method) on to a Square (normal image , whose face needs to be replaced with the dynamic number ).
Can someone assist me in doing this . I am sure it will just take a minute for some one who knows CSS.
Thanks,
Vijay
The easiest way would be to create a <div> that uses your image as a background-image property. Then it would just be a matter of writing the number into that div:
HTML
<div class="square">
123
</div>
CSS
.square {
/* following are width and height of your background image */
width: 100px;
height: 100px;
background: url(yourimg.png) no-repeat 0 0;
}
If you have to use an <img> tag, it's a little trickier, but still possible:
HTML
<div class="square">
<span>123</span>
<img src="yourimg.png" />
</div>
CSS
.square {
/* following are width and height of your background image */
width: 100px;
height: 100px;
position: relative;
}
.square img {
position: relative;
z-index: 1;
}
.square span {
position: absolute;
z-index: 2;
/* Use to position your number */
top: 10px;
left: 10px;
}
The above works by creating a stack of elements, with the <img> on the bottom (on account of lower z-index) and the number positioned absolutely above it. This works because the number's parent (<div class="square">) has position relative so it becomes the coordinate system.
using CSS background and putting an image behind the number?
You should be able to this using a coloured div and text (the number) within the div. You might need to adjust the CSS a bit to make a perfect square though.
<div style="border: 1px solid black; background-color: red; color: white; font-size: 18px; padding: 15px;">
<%: Model.RandomNumber %>
</div>
Related
I am writing a web-app using React.js. I have come to the point where I need to control the position of a note on a bar. I intend having two buttons (one for up, one for down) and have the bar and note be two separate .svg image files that I will somehow draw ontop of each other. Like this:
SVG note ontop of SVG bar
So my question is:
How can I draw an SVG ontop of another SVG and control its position (dynamic position)? I have tried using
style={{position:'fixed'}}
for the note but the formatting gets all messed up.
Edit:
.svg image files.
A page element with relative positioning gives you the control to absolutely position children elements inside of it.
If you give the note position: absolute, you'll be able to position it wherever you want, relative to the parent.
.parent {
position: relative;
}
.note {
positition: absolute;
/* place note in the top left */
left: 0px;
top: 0px;
}
See here for more on this technique.
Here's a snippet using <div>s instead of SVGs, run it for an example:
function moveUp() {
document.getElementById("note").style.top = "0.5rem";
}
function moveDown() {
document.getElementById("note").style.top = "2.5rem";
}
.container {
position: relative;
}
.bar {
width: 15rem;
height: 4rem;
background-color: lightblue;
}
.note {
position: absolute;
top: 1.5rem;
left: 1rem;
width: 1rem;
height: 1rem;
border-radius: 1rem;
background-color: red;
}
<div class="container">
<div class="bar"></div>
<div class="note" id="note"></div>
</div>
<div class="buttons">
<button onclick="moveUp()">up</button>
<button onclick="moveDown()">down</button>
</div>
position:absolute will give you the freedom to position the <img> tag freely - in relation to the next parent element with a position:relative property. For example like this:
<div style={{position: 'relative'}}>
<img src="bar.svg"></img>
<img src="note.svg" style={{
position: 'absolute',
left: x,
top: y
}}></img>
A div component is already defined with a fixed size, which is shown in normal display mode. The div component has few nested div fixed size.
I want to show this div component as zoomed out state. The size is dynamic depends on zoom-out factor.
I don't want to change the div component size in CSS file as it is normal to display mode. What is the best way to scale the div component?
.div-bird {
position: relative;
width: 200px;
height: 100px;
background-color: #ddd;
}
.div-feathers {
position: absolute;
width: 20px;
height: 10px;
background-color: #000;
}
/*zoom out. Sample zoom out size*/
.scale-bird {
width: 100px;
height: 50px;
background-color: red;
}
<div class="div-bird">
<div class="div-feathers">
</div>
</div>
<div class="scale-bird flying-bird">
<!-- Dynamically inserted with query -->
<div class="div-bird">
<div class="div-feathers">
</div>
</div>
</div>
Since .scale-bird is smaller than .div-bird, what is best way to scale .div-bird?
Consider a web page consisting in a background part that holds an image on top of which I would like to create an animation (for example image=sky and animation=moving-clouds). This thing is 100% width.
On this "canvas", a 100% content part should be placed.
The reason why I am asking this question is because I can simply achieve something like this working with divs and absolute positioning. But I do not know how to make something like this when divs have a 100% width!
I would be able to write something like this:
<div id='canvas' style='width:100%;background-image:...'>
<div id='cloud1' style='...'></div>
<div id='cloud2' style='...'></div>
<div id='cloud3' style='...'></div>
</div>
<div id='cont' style='width:100%'>
my content here
</div>
Styling canvas and cont so that cont appears on canvas and elements like clousx are moved by javascript but they live behind cont.
How to achieve this?
I don't know if I got you right, but you can do it exactly the way you want it. So this is a combination of width: 100%; and position: absolute;.
Demo
Try before buy
The demo uses for demonstration purposes the background-property with a CSS3 rgba-value.
CSS
div.outer {
position: absolute;
width: 100%;
height: 100%;
border:1px solid red;
}
div.text {
background: rgba(255,255,255,0.5);
}
div.cloud {
position: absolute;
top: 20px;
left: 20px;
height: 50px;
width: 50px;
border: 1px solid red;
}
HTML
<div class="outer">
<div class="cloud"></div>
</div>
<div class="outer text">
Content goes here
</div>
I am trying to put some HTML text over an image that has been popped out using lightbox effect. For this i am using 3
box - the popped out div with lightbox effect
address_box - the div inside the box which is nothing but an outline image
address - i want this div to be imposed upon the address_box image
HTML:
<div class="box">
<div id="move_in_img"><img src="img/ready-to-move-in.gif" /></div>
<div id="address_box"><img src="img/address-box.png" />
<div id="address">The address text
</div>
</div>
CSS:
.box
{
position:absolute;
top:20%;
left:12%;
text-align:center;
width:940px;
height:321px;
background:#F9E5B9;
z-index:51;
padding:10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
display:none;
}
.box #move_in_img{
float:left;
margin-left:20px;
margin-top:50px;
}
#address_box{
position:relative;
}
#address{
position:absolute;
}
the "box" properties are set to give it a lightbox effect and i cant change it from absolute to relative. I have searched a lot and experimented with positioning and z-index but all failed. The text simply appears below the address_box.
What i am trying to do is implement lightbox effect but dont want the text to be displayed as image. M i taking the right approach or there is a better way ??
Here is the paste bin link http://jsbin.com/anehey/1/edit
Just picked a sample image from net for the frame. I want the text to go inside the frame..
Am not getting the thing you are trying to do here as no working demo is provided, generally when you want to do such thing, use position: relative; for the container div and use position: absolute; width: 100%; & bottom: 0; for the imposed text div
HTML
<div class="container">
<img src="#" />
<div class="text"></div>
</div>
CSS
.container {
position: relative;
/*Set Height Width Accordingly*/
}
.text {
position: absolute;
bottom: 0;
height: /*Whatever*/;
width: 100%;
}
Demo (Not related to my answer but I fixed what he was asking for)
A simple (one might think!) question to all CSS gurus: I would like to shrink a DIV snugly around an IMG. The IMG is 600 x 800 and I needed it much smaller. So I go {height: 100%; width: auto;} and constrain the height via a wrapper DIV. However, to maintain the (unknown to me) AR, I cannot fix the width on the DIV. I tried to set the wrapping DIV to "display: inline-block" or "float: left" or "position: absolute" or ... - no matter: most browsers will stretch that DIV 800px wide - the original width of the full-size IMG - so it looks sthg like this:
[[IMG].............................]
Bizarrely, I can add some text to the DIV (just to test), and that text will actually appear right next to the scaled IMG:
[[IMG]Hello world..................]
Does anyone here know why the original size of the IMG matters (for dimensioning the width, it does not affect the height)? And what I might be able to do to shrink the DIV?
Thanks for looking.
EDIT:
To test Pär Wieslander's idea, I wrote a little test bed that should help clarify what I am on about:
<style type="text/css">
html, body {
height: 100%;
}
#dialog {
background: green;
height: 50%;
position: relative;
}
#frame {
border: 2px solid black;
display: inline-block;
height: 100%;
position: absolute;
}
#img {
height: 100%;
width: auto;
}
</style>
<body>
<div id="dialog">
<div id="frame">
<img id='img' src='...' />
</div>
</div>
</body>
Just pick any large IMG of your choice. You should find an inexplicably wide frame around and image that has squeezed - height-wise - onto the green carpet.
If you specify the image's width or height as a percentage, that percentage is calculated in proportion to the size of the parent block. So specifying width: 50% on the image doesn't mean 50% of the original image width -- it means 50% of the width of the parent block. The same goes for the height. Thus, there will always be extra space around the image as long as you specify the width or height as a percentage.
The solution is simple -- specify the dimensions in pixels, ems or any other unit other than a percentage:
HTML
<div class="wrapper">
<img class="small" src="myimage.jpg">
</div>
CSS
img.small {
width: 150px; /* or whatever you like */
display: block; /* to avoid empty space below the image */
}
div.wrapper {
display: inline-block;
border: 1px solid #000;
}
Edit: Based on your comments and updated post, I understand that what you really want to do is to set the width of the surrounding div and make the image fill up that div. Here's an example that does that:
HTML
<div class="wrapper big">
<img src="myimage.jpg">
</div>
<div class="wrapper small">
<img src="myimage.jpg">
</div>
CSS
img {
display: block;
width: 100%;
}
.wrapper {
margin-top: 1em;
border: 1px solid #000;
}
.big {
width: 600px;
}
.small {
width: 300px;
}
So I go height="50%", say, and width="auto" (to maintain AR).
Why not just go width="50%" too as this would resolve it.
I think Pär's approach is right: don't do { height: fix; width: auto; } but do instead { height: auto; width: fix; } Works better.