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>
Related
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;
}
Can't wrap my head around it. Doesn't happen with smaller resolutions.
The question I am asking is how do I prevent this from happen.
Example
https://jsfiddle.net/eddietal2/qgLvsx2v/
CSS:
.svg-wrapper {
width: 300px;
height: 400px;
background-color: white;
margin: 25px 25px 120px 25px;
display: inline-block;
position: relative;
z-index: -99;
}
HTML
<div class="svg-wrapper">
<h1>Hello</h1> // Element that causes all the problems.
<div class="caption">
<h2>Day 1</h2>
</div>
</div>
It was behaving this way because of the display being set to inline-block. The answer was adding:
vertical-align: top;
ugghhh so simple.
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
How can I keep my red box on top line when the center div has a very wide content?
When The centered div has much content, the red div goes to another line.
Do you know why this occurs?
Take a look at my code:
http://jsfiddle.net/5dC6T/3/
The issue is in the way that you've ordered your <div> elements. Try:
<div>
<div class="red-box"></div>
<img class="photo" alt="" />
<span>Name</span>
<span>Data</span>
<span>City</span>
</div>
CSS:
/* These two will stay anchored on the right and left */
.red-box { float: right; }
img.photo { float: left; }
I've made these modifications to your current code: http://jsfiddle.net/Wexcode/38qYS/
Use this CSS:
#QuadroEvento div.TopoEvento div.euvou{
height: 90px;
width: 90px;
background-color: red;
position: absolute;
right: 0px;
margin-right: 0px;
}
The key being: position: absolute;
You can also use position: fixed; etc., see here for more details: http://www.w3schools.com/cssref/pr_class_position.asp
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>