I'm stuck with this... My goal is this page:
I want to place text over an image, for example "STALDEN". I know how to do this, but when i use absolute positioning and insert a new entry the text is on the same position like to one before. How can I solve this better?
Any help much appreciated!
This is what i have:
<div class="karte">
<img src="img/home/stalden.png" alt="">
<h1>STALDEN</h1>
</div>
CSS
.karte img {
width: 100vw;
}
.karte h1 {
position: absolute;
top: 50px;
left: 50px;
color: white;
font-family: "Teko", sans-serif;
font-size: 15vw;
}
You can use image as background of your section
.karte {
background: url('img/home/stalden.png');
}
<div class="karte">
<h1>STALDEN</h1>
</div>
Try this:
.karte{
position: relative;
}
.karte img{
position: absolute;
top: 0;
left: 0;
}
.karte h1{
position: absolute;
top: 50px;
left: 50px;
}
It's exactly that you ask. But it's better to use background-image here because of better semantic and other reasons... Just use background-image. It's better solution.
Related
I'm trying to get a small yellow swoosh to underline a word in some text and stay where it is as the page resizes. Right now I can get the swoosh in the right spot under the text, but when the screen resizes it all goes to hell.
Here is an image of what I'm going for
<div>
<span>
<h1>How are you doing? Hello World.</h1>
<img src="imageurl here">
</span>
</div>
div {
right: 0;
left: 0;
margin-right: auto;
margin-left: auto;
width: 40%;
position: absolute;
}
h1{
text-align: center;
}
span {
margin-left: 140px;
top: 40px;
position: absolute;
z-index: -1;
}
(I didn't want to share the image URL as it is proprietary)
Any ideas on how to achieve this type of effect responsively?
Put your image inside of the h1 tag and give your h1 tag a position property. Also make sure you are setting h1 to be a inline-block element and center it somehow.
<h1>How are you doing? Hello World.<img src="imageurl here"></h1>
h1{
text-align: center;
position: relative;
display: inline-block;
margin: 0 auto;
}
img{
left: 0;
top: 0;
position: absolute;
z-index: -1;
}
There are many different ways to achieve what you're after.
I think this question is related to Link not working inside floated div but I still can't figure it out.
I have a div as follows:
.fullwidthimage {
width: 100%;
position: relative;
z-index: -1;
}
.imageoverlay {
left: 0;
text-align: center;
position: absolute;
z-index: 1;
top: 15px;
width: 100%;
}
#homepagebutton {
position: absolute;
text-align: center;
z-index: 100;
bottom: 50px;
width: 200px;
height: 60px;
left: 50%;
margin-left: -100px;
font-size: 25px;
border: 1px solid black;
border-radius: 5px;
background-color: orange;
color: black;
text-decoration: none;
}
<div class="fullwidthimage">
<img class="noround imageundertext smallimg" src="http://placehold.it/600x800">
<img class="noround imageundertext midimg" src="http://placehold.it/1000x1000">
<img class="noround imageundertext bigimg" src="http://placehold.it/3200x1300">
<img class="noround imageundertext xlimg" src="http://placehold.it/5000x1500">
<h1 class="imageoverlay">Title Here</h1>
Get Started
</div>
The different images are using a CSS media query to display/hide at different sizes. The whole thing is a full width image with a text title and 'button' (that's actually just a link styled to look like a button) over the top of the image.
Whatever links I put inside that div won't work - the text shows on the page, but nothing happens if you mouse over.
Why?!
Links placed immediately outside of the div on the same page work just fine, so I don't think it's anything to do with other containing divs there.
I'm assuming from that previous question asked that it's something to do with the positioning, but I can't make it work.
Thanks!
If you give a -1 in z-index, it goes behind body. So the whole div.fullwidthimage becomes unclickable or unaccessible. So, give z-index: 1 as the starting point.
.fullwidthimage {
width: 100%;
position: relative;
z-index: 1; /* Change this! */
}
.imageoverlay {
left: 0;
text-align: center;
position: absolute;
z-index: 2; /* Increase this! */
top: 15px;
width: 100%;
}
I have an image located inside a div, I am trying to move it 50 px down and 50 px left in order to have everything complete. But I am not sure how to edit the image in the CSS since I don't know what code to put in to connect the photo to the css.
My code:
#OverviewText4 img:MoneyIcon.png {
width: 150px;
height: 150px;
position: absolute;
top: 50px;
left: 50px;
}
<div id="OverviewText4">
<img src="MoneyIcon.png" />
</div>
Thanks for helping
Remove the image name from your declaration and make sure your container is set to position: relative so that your image is absolutely positioned against the right containing element in this instance #OverviewText4
#OverviewText4 {
position: relative;
}
#OverviewText4 img {
width: 150px;
height: 150px;
position: absolute;
top: 50px;
left: 50px;
}
You have to add position:relative to parent <div> and then add position: absolute; to the <img>. Like this:
#OverviewText4{
position: relative;
}
#OverviewText4 img{
width: 150px;
height: 150px;
position: absolute;
top: 50px;
left: 50px;
}
<div id="OverviewText4">
<img src="MoneyIcon.png" />
</div>
There are many ways to do this in CSS as per the multitude of answers. If I might suggest, since the image name in your example is related to iconography a slightly different approach:
#OverviewText4 {
position: relative;
}
#OverviewText4:before {
content: "";
background: transparent url(MoneyIcon.png) scroll no-repeat 0 0;
background-size: cover;
width: 150px;
height: 150px;
position: absolute;
display: block;
top: 50px;
left: 50px;
}
https://jsfiddle.net/zk8su1qw/
This way you don't even need an img tag in the HTML, which is desirable if its just presentational.
There is also an assumption in this answer that you want the image displayed over the top of any content in the OverviewText4 div, rather than having content flow around the image. If this is not the case you would want to use margins and keep the image position: static or relative.
Right, your CSS is fine but your selector is not. I think this is what you were going for.
#OverviewText4 img[src="MoneyIcon.png"] {
width: 150px;
height: 150px;
position: absolute;
top: 50px;
left: 50px;
}
<div id="OverviewText4">
<img src="MoneyIcon.png" />
</div>
I've changed img:MoneyIcon.png (which doesn't mean anything to CSS) to img[src="MoneyIcon.png"] which means an img tag where the src = MoneyIcon.png
The main problem here is if you change the src you have to change your CSS also, I'd recommend having a class like this:
#OverviewText4 img.money-icon {
width: 150px;
height: 150px;
position: absolute;
top: 50px;
left: 50px;
}
<div id="OverviewText4">
<img class="money-icon" src="http://placehold.it/150x150" />
</div>
I hope you find this helpful.
You can simpy do this with padding
#OverviewText4 img {
padding:50px 0 0 50px;
}
Use the marginattribute for creating a margin around an element. You can also use padding on the div element.
Try it like this:
#OverviewText4 img: MoneyIcon.png{
width: 150px;
height: 150px;
position: absolute;
margin-top: 50px;
margin-left: 50px;
}
You can link an image to a CSS class by adding the class name inside the tag <img>
Working Example:
body {
background: #111
}
.OverviewText4 {
width: 150px;
height: 150px;
position: absolute;
top: 50px;
left: 50px;
}
<body>
<img src="MoneyIcon.png" class="OverviewText4" />
</body>
If I understand your question correctly all you have to do is add this style to your div where the image is located.
div > img {
margin-top: 50px;
margin-left: 50px;
}
Hi I am looking to display this text over the image. I want the text to be on the left of the two people, and stay in proportion to the image when moving from a desktop to tablet view in my media queries
here is my HTML
<figure><img src="Sources/USE/colors.png">
<figcaption><h1>Your P<span class="orange">a</span>rtner in<br><br><span class="all"="colorstxt"><span class="green">C</span><span class="yellow">o</span><span class="orange">l</span><span class="red">o</span><span class="pink">r</span><span class="purple">s</span></h1></figcaption>
</figure>
and here is my CSS
#hero_container figure{
position: static;
}
#hero_container figure figcaption{
position: relative;
top: 200px;
left: 100px;
}
I have tried to make it position absolute and relative however it makes the rest of the page jump underneath the image. Any help on a simple question would be appreciated.
You're almost there...
Make the figure position: relative; and the caption absolute positioned.
#hero_container figure{
position: relative;
}
#hero_container figure figcaption{
position: absolute;
bottom: 10%;
left: 10%;
}
Static positioning is the default position for HTML elements. Try using relative positioning on the figure element so your able to absolute position the figure caption relative to the figure element.
#hero_container figure{
position: relative;
}
Static position is default status of position element.
You must use relative position for figure and absolute for caption like so:
#hero_container figure{
position: relative;
}
#hero_container figure figcaption{
position: absolute;
top: 200px;
left: 100px;
}
Here's the modified code -
HTML
<div class="image">
<img src="Sources/USE/colors.png" alt="" />
<h2><span>Your Partner in<span class='spacer'></span><br /><span class='spacer'></span>Colors</span></h2>
</div>
CSS
.image {
position: relative;
width: 100%; /* for IE 6 */
}
h2 {
position: absolute;
top: 200px;
left: 0;
width: 100%;
}
h2 span {
color: white;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
padding: 10px;
}
h2 span.spacer {
padding:0 5px;
}
Why not have a div float left with a higher z-index? It seems simpler to me.
I have a positioned absolute div where text is going to be appended
<div id="text_head">
<p class="dot">·</p>
<div class="line"></div>
<div class="line"></div>
<p id="p_head">Here is my</p>
<p id="p_sub">WEB DESIGN</p>
</div>
and the following css
.dot {
color: #FFFFFF;
font-size: 80px;
left: 131px;
position: absolute;
top: 22px;
}
.line {
background-color: #FFFFFF;
height: 2px;
position: absolute;
right: 0;
top: 67px;
width: 118px;
}
as you can see in this Picture there is a difference how both browser render this!
I set margin: 0px and padding: 0pxas default style for the pelement!
Any help would be much appreciated!
edit additional css:
p { margin: 0;
padding: 0;
color: #FFF;
}
#p_head {
font-family: impregnable_personal_use_onRg;
font-size: 74px;
margin: 0;
padding: 0;
}
#p_sub {
font-family: alternategothic2_btregular;
font-size: 54px;
margin: 0;
padding: 0;
position: absolute;
right: 0;
}
Possibly a problem with line-height. Did you try resetting the line-height on p?
p {line-height: 1.2;}
Or you could just reset all line-height's:
body {line-height: 1.2;}
Could you post your entire html/css files? I pasted your code into an editor, but the page rendered very differently from your screenshot.
By the way, I would advise you to use the #font-face attribute to embed web fonts if you aren't already, that way your typography will look the same across devices. :)
Set the parent position to relative before playing with the offsets of the childs. Because you have set all the child elements set to absolute they will continue to look up the hierarchy to relate themselves and if the parent is not set to relative they will go all the way up to the body tag.
#text_head {
position: relative;
}