I am creating a website in C# where I need to add content on top of an image. The image should not be set to a background image, except it should be set within the img tag. Whenever I try to add content, such as, a table or label to appear on top of the image, it either appears before or after the image, and not on the image itself. How do I make the content appear on the image I have added? Please help.
Here's my code :
<form id="form1" runat="server">
<div id="main">
<div id="bg2">
<img src="Pics/slide.png" style="width:100%; height:100%">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</img>
</div>
</div>
</form>
Add position:relative; to the containing element e.g. bg2 and position:absolute; to your text.
This will take the content out of the document flow and allow you to position the text, relative to the parent relatively position element, in this case bg2.
For example:
#bg2
{
position:relative;
}
#bg2 input[type="text"]
{
position:absolute;
top:50%;
left:50%;
}
Further reading
Take a look at absolute positioning:
http://css-tricks.com/absolute-positioning-inside-relative-positioning/
Related
I have an image which needs to be in a particular location, so I made a div in the place where I need it to be and added an img tag inside it, however although the img tag is inside the div tag the image goes into the bottom right corner of the page. This does not happen when the browser window is small.
CSS:
#teamimg {
width:10%;
height:50px;
background-color:blue;
overflow: auto;
float:left;
}
HTML:
<div id="teamimg">
<img src="Images/picture.png" alt="Image" height="18" width="20" class="itemImg" style="float:left">
</div>
Set overflow:hidden on the #teamimg rule, then you can put the image as a background-image with background-size:cover;. :)
I am trying to position a loading image in the buttom right of the page, but everything works fine except margin-bottom.
<div id="preload">
<div align="right" style="margin-bottom:40px; margin-right:50px;">
<img src="http://thc-racing.ucoz.com/design/loading.gif" alt="" />
<br>
<a style="color:#00ff24;"><b>Please wait while the page is loading...
<br>If the website doesn't load within one minute please refresh your page!</b>
</a>
</div>
</div>
Can anybody tell me what or how to make it work?
Thanks
It's the nature of margins vs padding. Since margins sit outside of the element, they won't render unless there's another element following. You could use bottom-padding of 1px on the parent; that should trigger the render.
You should assign position absolute and use bottom and right proprietes.
http://jsfiddle.net/7yrUy/
<div id="preload">
<div align="right" style="position:absolute; bottom:40px; right:50px">
<img src="http://thc-racing.ucoz.com/design/loading.gif" alt="" />
<br><a style="color:#00ff24;"><b>Please wait while the page is loading...<br>If the website doesn't load within one minute please refresh your page!</b></a>
</div>
try absolute position and use bottom/right instead of respective margins:
<img src="http://thc-racing.ucoz.com/design/loading.gif" alt="" style="position: absolute; bottom:40px; right:50px;"/>
Here - http://jsfiddle.net/maximua/SKcvr/
If you want it in the bottom right of the page just use this css:
.yourClass {
position: absolute;
right: 0;
bottom: 0;
}
If you want to change the amount of pixels change 0 to what you want
I had a case where I needed to add display: inline-block.
I can't explain why this worked, but it did! :-) Hope it helps someone.
Even when set display:block to parents and child divs, the margin bottom may not work. The best thing to solve this, after testing with paddings and big margin top values, is using position:relative; for the parent container, and position:absolute; for the child div. The div and other elements have already the display-block for default, so we don‘t need to declare it, as follows:
.parent{
position:relative;
height: 20rem;
/* A big value for height will help you to see the “margin-bottom” with clarity. */
}
.child{
position:absolute;
bottom:0.25rem;
/* or whatever measurement you want: 1rem, 1em, 15px, etc. Be AWARE that it‘s not “margin-bottom” property; it‘s just “bottom” within the absolute position. */
}
In the HTML just consider:
<header class="parent">
<p>This is your main container which has 20rem of height.</p>
<div class="child">
<p>This text is very close to the bottom.</p>
</div>
</header>
In the CSS I consider only the most relevant properties. You can add colors, backgrounds, font-families and so on, which will not affect the layout. I just coded the key properties to create the “effect margin-bottom”.
Example more fancy.
I am wondering how is it possible to achieve notification count as we see in linked (as shown in image below)
I have tried implementing a similar solutions, using a Span which has a background image and then using tag along with it.
Roughly,
<span class="message-icon" title="Unread Message" style="display: inline-block"></span><span style="background-color: red"><sup><b>5</b></sup></span>
this is no where near to what is there on linkedin's site.
Is there a cooked solution already available for it? Or any Ideas how it can be achieved?
Take a look at this: http://jsfiddle.net/D3VVv/1/
From this post: How can i overlay an 10x10px image on top of another image?
If you make the div that contains the message icon as big as the message icon + the notification icon, then you can position the notification icon in the top right corner of that div using absolute positioning. As is shown in the fiddle.
There are a few ways, here is an example of absolute positioning:
http://jsfiddle.net/e2Zs4/
HTML
<div class="con">
<img src="http://www.pictures-of-kittens-and-cats.com/images/cute-kitten-pictures-002-small.jpg" />
<img class ="number" src="http://www.privatefly.com/export/PrivateFly/.content/images/services/red_numbers_4.gif " />
</div>
CSS
.con { width:100px; height:100px; position:relative; }
.number { position:absolute; top:10px; right:10px; }
I have a html page which looks like the following:
I want to display some text on the left pane, but the problem is that the text should be inside the oval shaped area only. How do I achieve this? Note that the oval shaped image is the background image, however if required, I can also use a <img> tag for it if it would help. One lame way is to use <p> tags with padding, but that is not an efficient way, so kindly suggest some good methods.
EDIT: HTML:
<div id="leftStage" class="rounded-corners">
<div id="questionDisp" align="center">
</div>
</div>
CSS:
#leftStage {
position: relative;
width: 34%;
height:86%;
float: left;
}
#questionDisp {
display:none;
}
JS: (When the appropriate function is called: )
$("#questionDisp").fadeIn(1000);
$("#questionDisp").html(quesArr.q1); //data read from xml
EDIT: What I need is a div or something above the oval background, & the text should fit in it. I am getting the text from an xml file, so it is not that I have a fixed text size to be displayed
There's actually a pure CSS/XHTML code generator on csstextwrap that does exactly what you want.
EDIT:
The concept here is to float <div>'s on either side of your text so that your content is forced to "flow" in between them. By setting the width of your floated <div>'s, you can create a wide variety of cascading "stencils."
See concept illustrated here: fiddle
If it is background-image then use the position:absolute with proper margins (top and left), and set the width less than that the oval background-image. Then display property 'block'.
Maybe you could try the jQuery plugin Text Fill
also see: https://stackoverflow.com/a/688362/753676
I removed my answer since only the left float worked.
If you paste this code: it'll show you exactly how it works. I did a border-radius instead of creating a circle png.
<div style="width:250px;height:230px; border-radius:125px;background:#efefef;padding-top:20px; text-align:center">
The code for my<br /> fix isn't pretty but it should<br />work It's not automatic, but it<br /> does the job that you need it<br /> to do.
</div>
You have not shared any HTML, The working code is with some assumption
The HTML is,
<div id="main">
<div class="text">This is text</div>
</div>
Where div with classtext is the text container.
The CSS for same will be,
#main{
background-image:url('http://i.stack.imgur.com/bw2HK.png');
height:563px;
width:691px;
}
#main .text{
color:#FF0000;
width:240px;
text-align:center;
top:100px;
border:1px solid;
float:left;
position:absolute;
}
Here .text is the class that represent the text styling. The main part is position:absolute;. This will set the text div position to absolute. Now you can move the div above image div using top and left styles.
Please do review working example here
P.S. The border, color and other styles can be changed as per your need.
Does anyone know of a tutorial on how to do this, or does anyone have a little example?
example: http://hazelmade.com/projects.html
The 'lifted corners' example on this CSS drop-shadows without images demo page shows it's possible without using images. It relies on CSS3 support, specifically box-shadow and transform but this is to be expected from a pure CSS solution.
Full details of the technique can be found in the main article by Nicolas Gallagher.
The shadow on that site is a custom made image tailored to the specific width of those elements.
If you wanted to follow a similar technique that they did, you could just add a child image absolutely positioned below the div...
jsfiddle example: http://jsfiddle.net/gbFNk/
HTML:
<div id="example">
content here...
<img id="shadow" src="http://hazelmade.com/images/drop_shadow.png" />
</div>
css:
#example {
width:796px; //your tailor made shadow needs to be this long
height:100px;
position:relative;
background:grey;
}
#shadow {
position:absolute;
bottom:-15px; //this is the height of the custom image.
}
Alternatively, if you need a drop shadow like that with varying width you make 2 shadows (one for each corner) and do something like the following:
HTML:
<div id="example">
content here...
<div id="dropshadow">
<img class="left_shadow" src="leftshadow.png" />
<img class="right_shadow" src="rightshadow.png" />
<div style="clear:both"></div>
</div>
</div>
css:
#example {
width:796px;
height:100px;
position:relative;
background:grey;
}
#dropshadow {
width:796px; //needs to be the same width as the parent div
position:absolute;
bottom:-15px; //this still needs to be the height of the custom images.
}
#dropshadow img.left_shadow {
float:left;
}
#dropshadow img.right_shadow {
float:right;
}