Need to move heading tag little left say 5px over the div. I have tried some solution but heading is moving but the content is disappearing .
<div>
<div style="background: none;" class="taskdiv">
<a>
<img src="{{url+'/'+task.icon}}" class="img-fluid" />
<h5 id= "heading" class=" text-center">{{task.taskname}}</h5>
</a>
</div>
</div>
#heading {
left: -5px;
position: absolute;
word-break: break-all;
inline-size: 130px;
height: 50px;
}
I have a div which is like a rectangle box with a background color and a heading inside it, I need to move the heading a little left heading has a background color too so it will be like the heading box will be a little left of the div box like heading placed over div .
yeah just change the position to relative instead of absolute as absolute position break CSS default formatting context. "Run the code snippet below"
.taskdiv{
margin: 0 50px;
}
#heading {
background-color: red;
right: 40px;
bottom: 20px;
position: relative;
word-break: break-all;
inline-size: 130px;
height: 50px;
}
<div>
<div style="background: green;" class="taskdiv">
<a>
<img src="{{url+'/'+task.icon}}" class="img-fluid" />
<h5 id="heading" class=" text-center">{{task.taskname}}</h5>
</a>
</div>
</div>
You just need to give the z-index for heading then it will show there too and make the positive relative for div like this
. taskdiv{positive:relative}
#heading {
left: -5px;
position: absolute;
word-break: break-all;
inline-size: 130px;
height: 50px;
z-index:99
}
second this you can try without position
#heading {
margin-left: -5px;
height: 50px;
z-index:99
}
You need to give x, y position so top: -5px and left: -5px or (some amount)
Then adjust the z-index so it will appear on top of the div
z-index: 2
Absolute positioning is useful for breaking the element out of the flow
I'm not exactly sure what you are talking about but I might know. I think what you are talking about is the margin in the html thats there by default.
body, html {
margin: 0px;
}
Related
the top attribute appears not to be working on a html. I am trying to use the top attribute on image to move an image to the top and place above a text but the top attribute of a css never moves the image Here is snippet
<div class="stl_02">
<div class="stl_03">
<img src=""
alt=""style="top: 4.4538em;" class="stl_04">
</div>
<div class="stl_view">
<div class="stl_05 stl_06">
//other texts here
here are the css rules
.stl_02 {
height: 46em;
font-size: 1em;
margin: 0em;
line-height: 0.0em;
display: block;
border-style: none;
width: 51em;
}
.stl_03 {
position: relative;
}
.stl_04 {
width: 100%;
clip: rect(-0.041667em,51.04167em,66.04166em,-0.041667em);
position: absolute;
pointer-events: none;
}
Please how can push the image to the top using this attribute style="top: 4.4538em;" is a challenge
Your element does have the top attribute applied. This can be seen in the following:
.stl_02 {
height: 46em;
font-size: 1em;
margin: 0em;
line-height: 0.0em;
display: block;
border-style: none;
width: 51em;
}
.stl_03 {
position: relative;
}
.stl_04 {
width: 100%;
clip: rect(-0.041667em, 51.04167em, 66.04166em, -0.041667em);
position: absolute;
pointer-events: none;
}
<div class="stl_02">
<div class="stl_03">
<img src="http://placehold.it/100" alt="" style="top: 4.4538em;" class="stl_04">
</div>
<div class="stl_view">
<div class="stl_05 stl_06">
</div>
</div>
</div>
If you are not seeing this effect, it is possible you have a rule with higher specificity overriding it, or you have cached the style before you applied this rule.
It's also worth noting that top only works on a positioned element. You need to have position: relative, position: absolute or similar on .stl-04 in order to position it with top.
Alternatively, you may be looking for margin-top, which positions vertically based on the containing element.
As an aside, basing margins off of font sizes (with em units) is generally bad practice; you should really use fixed units instead (preferably not going to so many decimal places).
I'm making a div that I want to say "Banner" with a larger "BANNER" in grey behind it. Kind of like a water-mark. But the positioning is wrong and the browser is rendering the 'water-mark' on top of the banner text.
.banner {
position: absolute;
height: 10%;
width: 100%;
background-color: black;
color: red;
vertical-align: top;
overflow: hidden;
z-index: -1;
}
.wrapper {
position: relative;
height: 100%;
width: 100%;
}
.foreground {
width: 100%;
height: 100%;
font-size: 2em;
margin: 0;
padding: 0;
top: 0;
text-align: center;
z-index: 2;
}
.background {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
top: 0;
text-align: center;
vertical-align: center;
color: lightgrey;
font-size: 7em;
z-index: 1;
}
<div class="banner">
<div class="wrapper">
<div style="position:absolute; width:100%">
<p class="foreground">Banner!</p>
</div>
<div style="position:absolute; width:100%">
<p class="background">BANNER!</p>
</div>
</div>
</div>
For reasons I don't want to go into here, banner needs to keep it's position: absolute (Sorry if that's too restrictive)
Otherwise we're free to play around with it. I would like the water mark to be slightly overflowing from the top and bottom of the banner div or at least flush with the top.
But most importantly I need the water-mark behind the foreground divs content.
Thank for any help! I prefer a CSS solution but JS would be appreciated too. PS here's a jsfiddle if you prefer that.
EDIT I fixed the height issue by putting margin-top:-5% which I tried before, but with a percentage WAY too high. Apparently it goes of the height of the page not it's parent. Perhaps because it's position:absolute. Thanks for your help!
If you want it to appear in a different order, change the order of your html. You can then also get rid of the z-indexes. So:
<div class="banner">
<div class="wrapper">
<div style="position:absolute; width:100%">
<p class="background">BANNER!</p>
</div>
<div style="position:absolute; width:100%">
<p class="foreground">Banner!</p>
</div>
</div>
Alternatively / additionally:
If you need it to be a watermark, why not add some opacity of like 0.3 to .background? That does not actually put it behind the text, but makes it appear like a watermark.
Working in this fiddle: https://jsfiddle.net/0srj5hus/1/
This is my html:
<div id="Header">
<div id="logoContainer">
<a id='logoClick' href='/'></a>
<p id="welcome">Welcome</p>
<h1 class="logoText">first<img id="logoImage" src="image.jpeg" /><span id="second">second</span></h1>
</div>
</div>
and this is my CSS:
#logoClick {
width: 100%;
height: 100%;
z-index: 1;
display: block;
position: absolute;
}
#loginHeader {
font-family: consola;
width: 100%;
background-color: black;
color: white;
}
#logoContainer {
height: 10px;
width: 200px;
padding: 20px;
}
Form some reason, the link is taking up the width and height of the entire page and has a padding of 20px on the top-left and top.. Any idea why?
The link is positioned absolutely which removes it from the normal flow and positions itself relative to the next positioned element. The parent of the anchor is not a positioned element.
To contain the anchor, add position:relative; to #logoContainer.
depending on the effect you are trying to get, you can change the height/width of the link to inherit or you can change the position to relative
I am using HTML 5 with CSS 3. The scenario is like this.
<div style="margin-top: 50px; background-color: red; padding: 10px 0px 10px 0px; width: 100%">
<span>This text must be in center of div</span>
<img src="/image.jpg" alt="This image must be on left side of div"/>
</div>
The text and image must be in single line. How do I do that ?
Example
To position an element with respect to its parent, you give the parent any position value besides static (generally relative) and the child position: absolute.
In keeping with your inline CSS...
<div style="margin-top: 50px; background-color: red; padding: 10px 0px 10px 0px; width: 100%; text-align: center; position: relative;">
This text must be in center of div
<img src="/image.jpg" alt="This image must be on left side of div" style="position: absolute; left: 0;"/>
</div>
jsFiddle.
However you should consider using classes, ids and an external stylesheet.
SPAN and IMG are both inline elements so they should be appear next to each other by default. If you want the IMG to appear on the left and the SPAN text after it...
<img /><span />
How about this? I edited the code based on your comment. The caveat is that the line-height of the P tag must be set to the height of the div in order to get the P to center vertically as well as horizontally.
<style>
.myDiv{
background-image: url('../pathToImage/image.jpg');
background-repeat: no-repeat;
background-position: center left;
margin-top: 50px;
background-color: red;
width: 100%;
text-align: center;
height: 250px;
}
.myDiv P
{
line-height:250px;
}
</style>
<div class="myDiv">
<p>This text must be in center of div.</p>
</div>
alt text http://img190.imageshack.us/img190/7514/unbenanntax.jpg
This is what I want to do. A Div with some text in it and on the right bottom corner a img. The hight of the div is stable at 24px but the length is not known and there could be more than one of this divs In a row.
There are a couple of techniques of doing this. The simplest:
<div class="outer">
<img src="....">
</div>
with
div.outer { position: relative; height: 24px; }
div.outer img { position: absolute; right: 0; bottom: 0; }
Now that takes it out of the normal flow, which is a problem is you want other content to wrap/float around it. In that case you really need to know the height of the image and then apply appropriate tricks depending on what you've got.
Start with Making the absolute, relative.
If the image is 10 pixels high, for example, you could try this:
div.outer { height: 24px; }
div.outer { float: right; margin-top: 14px; }
Of course 14px comes from 24px - 10px. I don't know if that will satisfy what you're trying to achieve however.
Background image is your solution.
<div class="blarg" style="background:url(image.gif) bottom right no-repeat">Content</div>
You may need to adjust paddings of the div, too, so the contents of the div doesn't overlap your picture, if this is needed.
If you want to float the text around the image, both of those answers are wrong. Both will make the text go right over the image. I have been looking for hours and no real answer appears to exist. This article more clearly explains why both of those answer will not work if your attempting wrapping the text.
<div class='main'>
<div>...</div>
<div>...</div>
<div class="img-div">
<img src="....">
</div>
</div>
div.main {
height: 1164px;
width: 900px;
}
div.img-div {
position: absolute;
top: 1084px;
left: 817px;
margin: .75rem;
}
Assuming dimensions of the image are 57*55
Only for positioning an image at the bottom right corner:
I have "Div" and image in the div and small image in the bottom right corner of the div.
Detailed:
https://jsfiddle.net/ez08vL7w/
<html>
<head>
</head>
<body>
<div style=" position:relative; display: inline-block">
<img style="width: 100px; height: 100px; position: absolute; z-index: 4; bottom: 50px; right: 30px; "
src="http://images.unsplash.com/photo-1529736576495-1ed4a29ca7e1?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max"/>
<a href ="" target="_blank">
<img src="https://media.gettyimages.com/photos/tiger-portrait-picture-id949472768?s=612x612"/> </a>
</div>
</body>
</html>
Simplified:
<div style=" position:relative; display: inline-block">
<img style="width: 100px; height: 100px; position: absolute; z-index: 4; bottom: 50px; right: 30px; "
src=""/>
<img src=""/>
</div>