I've put an image followed by text in a div and used relative positioning to place the text over the image like so:
<div><img><p></p></div>
p {position: relative; top: -250px;}
The problem is, there's a space below the image where the text was originally supposed to go and I can't figure out how to get rid of it. Playing with padding and margins don't seem to work. I'm making a responsive site using flexbox. If possible, I'd also like to position the text using div padding. Any suggestion is welcome.
Thank you!
You have to use position: absolute to situate the image title: http://jsfiddle.net/otc4L83b/.
HTML:
<div class = "imageWrapper">
<img src = "http://placehold.it/300x200" />
<p>Image Title</p>
</div>
CSS:
* {
margin: 0;
padding: 0;
}
body {
padding: 10px;
}
.imageWrapper {
position: relative;
display: table;
}
.imageWrapper > p {
position: absolute;
bottom: 5px;
right: 5px;
font: 18px/2 Sans-Serif;
color: #fff;
}
Related
I don't know how to make the div display in front of the h1 text, so that the blue box is in front of the text? I have been stuck on this for the past 30 mins and cant resolve it in my head. I am a beginner so please have patience.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.wrapper2 {
position: absolute;
z-index: 2;
width: 500px;
height: 250px;
background: blue;
}
h1 {
position: relative;
z-index: 0;
}
<div class="wrapper2">
<h1>Welcome</h1>
</div>
As mentioned above, you can simply put the <h1> element above your wrapper in HTML. If you want your <h1> to stay inside, you could use this:
display: none; or visibility: hidden; opacity: 0;
CSS:
h1 {
position: relative;
/* either of these */
display: none;
visibility: hidden;
opacity: 0;
}
You could try this:
.wrapper2 {
width: 500px;
height: 250px;
background: blue;
}
<div class="wrapper2"></div>
<h1>Welcome</h1>
Although then it's not really a "wrapper" anymore, so maybe you'll need to create an element just for the blue square.
You've placed your h1 inside the wrapper2, so you can try to move it after it if you want to style them separately. I would also suggest to not use absolute position unless you really want this, the consequences of doing this will quickly become apparent as you build out a larger page.
You can make each element "inline" rather than "block", this will make them follow the text flow of the page: display: inline;
I'm not super comfortable with JS , but that seems to be the best way to do this , having a hard time applying other peoples solutions to my scenario.
Want an image to appear when hover over text.
I can get the image to appear on hover, but it appears up way up at top of page, and I am having a hard time getting it to appear in the viewport without indicating what the top margins is. Is that the best way to do it?
So far I have:
<div id="popup">
<div class="large-6 columns">
Bristol Hayward-Hughes <span> <img src="bristol.jpg" alt="Bristol" id="bristol"> </span>
</div>
</div>
and
#popup span {
display: none;
}
#popup a:hover span {
display: block;
position: absolute;
top: 0px;
left: 170px;
width: 400px;
margin: auto;
}
#bristol {
position: absolute;
z-index: 1;
margin-top: 100px;
}
If I'm understanding the question correctly, you'll need to place position:relative; in the parent Div: #popup that the image is residing in.
Check this Fiddle for reference: https://jsfiddle.net/rjschie/q87um7wd/2/
For an example: comment the position:relative; line under #popup and re-run the example. You'll see that the Image appears at the top of the window. Then uncomment it, and re-run and it will appear relative to the #popup div.
Please give relative positioning to your span that holds your image.
#popup a:hover span {
display: block;
position: relative; // Changed absolute to relative
//Give top and left position with respect to your anchor tag.
top: 0px;
left: 170px;
width: 400px;
margin: auto;
}
Remove the margin-top from the image tag as well.
#bristol {
position: absolute;
z-index: 1;
/*margin-top: 100px;*/ //Removed margin-top on the image
}
I am trying to center some text within a banner (classic question I know). This banner is split into 12 columns, and there is a cross icon for closing the window in the left-most column. The text is centering in the available space between the cross icon and the end of the banner, rather than centering within the whole banner width. From the way the code is written I cannot see why it would be doing this. Here's the HTML:
<div class='col-xs-12 banner'>
<a class="navbar-brand cross-link" href="" ng-click="close()">
<img class="cross" src="/components/cross.png" alt="close">
</a>
<h1>{{title}}</h1>
</div>
with CSS:
.banner {
height: 70px;
background-color: red;
h1 {
color: white;
text-align: center;
}
.navbar-brand {
&.cross-link {
padding: 0px;
img.cross {
margin: auto;
width: 70px;
height: 70px;
padding: 29px 28px 27px 28px;
}
}
}
When I inspect this on Chrome, the h1 is quite happily sitting within a full-width container as expected, but the image appears to be shifting it across so that it doesn't center properly. Can you see how to resolve this?
Thanks
You could set the .cross-link to absolute position. Remember to set the container position property to a value different from "static":
.container{ position: relative; }
.cross-link{ position: absolute; left: xxxx; top: xxxx; }
What you are missing is a closing } at the end of your .banner block OR at the end of the css you shared.
I'm having some trouble positioning my image next to my h1. The h1 is centered, and I would like to have my image placed on the right side of it. However, The position of the h1 may not be changed (thus, the image may not affect the position of the h1).
Relevant code I have so far:
<div id="header">
<h1>Header </h1><img src="pencil.jpg" alt="">
</div>
h1 {
text-align: center;
position: relative;
}
img {
position: relative;
top: 20px;
left: 20px;
}
This code doesn't work at all; the image appears on the left side of the web page and is not being positioned relative to the h1 as I would like to.
I tried fixing this by putting the image into the h1 (to make it it's parent element), but by doing this the position of the h1 element changes (because the reserved space for the image is still preserved in the h1 element).
I hope someone can help me.
Kind regards,
Nick
That's because you're using a block level tag with another block level tag.
Check out W3 Schools for more info pertaining to inline VS. block level elements. :)
And if you want a more direct example using your code, here is a jsFiddle. This has it so the text is centered and the image is next to it, centered as well.
h1 {
text-align: center;
position: relative;
}
img {
position: relative;
top: 20px;
left: 20px;
display: inline-block;
}
One solution is to give #header position: relative and position: absolute to the img:
h1 {
text-align: center;
position: relative;
}
img {
position: absolute;
top: -80px;
left: 60%;
}
#header {
position: relative;
}
fiddle
You cannot absolutely position elements with position relative. You should use position absolute.
This wont resize very well though. Hope it helps. :)
img {
position: absolute;
right: 20px;
top: 0;
width: 100px;
}
Example
Since you want them right next to eachother...
Wrap the header text in a span.
<div id="header">
<h1>
<span>Header</span>
<img src="http://placekitten.com/g/400/300" alt="" />
</h1>
</div>
Set both the span and the image to display: inline-block;
h1 span, h1 img {
display: inline-block;
}
If you want the text dead center then add some padding to the left, equal to the width of the image.
h1 span {
padding-left: 36px;
}
h1 img {
width: 36px;
}
Example 1
Alternatively
Put the image inside the span
<div id="header">
<h1>
<span>
Header
<img src="http://placekitten.com/g/400/300" alt="" />
</span>
</h1>
</div>
And set it to position absolute, so it hangs out the right hand side.
h1 {
text-align: center;
overflow: hidden;
}
h1 span {
position: relative;
}
h1 img {
position: absolute;
right: -36px;
width: 36px;
}
Example 2
Neither are perfect solutions, but hopefully one will be right for you. :)
I have been struggling to come up with a good solution for centering a div. I don't like messy html, and I don't like having 2 or 3 unnecessary div's just for the sake of centering something. So I decided to use position:absolute.
Now I know that position:absolute breaks the flow of the document, and this is why this is happening, but is there a way to "unbreak" the flow of the document?
Right now, I have a div with 100% width, 20% height and vertically-centered. This div contains a paragraph and I have another paragraph element at the bottom of the page (outside of this div) - but because I am using position:absolute, the copyright notice appears before the div.
Is there a way we can get our document back to normal flow. I don't want to have to resort to setting margin-top: npx; to every single element on the page that appears after the div.
JSFiddle:
HTML:
<div id="container">
<p>Hi lol</p>
</div>
<p>Copyright Notice here</p>
CSS:
*
{
outline: none; outline: 0; border: none; border: 0; margin: 0; padding: 0;
}
#container
{
width: 100%;
height: 20%;
position: absolute;
left: 0%;
right: 0%;
top: 40%;
bottom: 40%;
background-color: khaki;
}
p
{
text-align: center;
}
also set your copyright paragraph to absolute bottom.
p { position: absolute; bottom: 0px; /* or any appropriate position */ }