I want to place text over the image like the following picture shows :
HTML that I wrote is :
<body>
<div class="image_holder">
<img src="bg2.jpg" />
<div class="overlay"> </div>
</div>
<div>NHS SUB</div>
</body>
CSS :
.image_holder {
position:relative;
float:left;
}
.overlay {
position:absolute;
top:0;
background-color:rgba(34,70,118,0.7);
width:100%;
height:100%;
}
The text will automatically go after the image. What should I do to place the text over the image ?
Try this
<div class="image_holder">
<div class="overlay">NHS SUB</div>
</div>
Style
.image_holder{
background:url('img.jpg');
}
Another Way
<div class="image_holder">
<img src="img.jpg"/>
<div class="overlay">NHS SUB</div>
</div>
STYLE
.img_holder{
position:relative;
}
.img_holder img{
postion:absolute;
z-index:-1;
}
.overlay{
z-index:1;
}
Your div class's look like they should infact be ID's. ID's are unique where as class's are used across numerous elements.
Although your nested div approach will work when applying the correct styles, a more semantic (and less markup) would be using Ben's approach - code:
<div class="mydiv" style="background-image:url('bg2.jpg');">overlay text here</div>
<div>NHS SUB</div>
Related
I have a page with some divs. My page is pretty dynamic where I am showing and hiding divs based on user input.
I want a footer to always appear at the bottom and to have the other divs above it appear in a scroll. Since my data is populated asynchronously, my view loads but then once the content is injected onto the page, my footer seems to move
Here's a simple example of what I'm trying to do:
<div class="parent">
<div class="dynamic-div1">async div1</div>
<div class="dynamic-div2">async div2</div>
<div class="footer">Always appear at bottom</div>
</div>
try to add positions for footer
<div class="parent">
<div class="dynamic-div1">async div1</div>
<div class="dynamic-div2">async div2</div>
<div class="footer">Always appear at bottom</div>
</div>
in CSS
.footer
{
position:absolute;
bottom:0px;
}
in HTML
<div class="parent">
<div class="dynamic-div1">async div1</div>
<div class="dynamic-div2">async div2</div>
<div class="footer">Always appear at bottom</div>
</div>
in CSS
div.parent{
position:relative;
}
div.footer
{
position:absolute;
bottom:0px;
}
Looks like you are looking for the fixed footer at bottom. You can use position:fixed and apply positions like below.
.footer {
position:fixed;
height:20px;
background:#ccc;
bottom:0;
left:0;
right:0;
text-align:center;
}
<div class="parent">
<div class="dynamic-div1">async div1</div>
<div class="dynamic-div2">async div2</div>
<div class="footer">Always appear at bottom</div>
</div>
This is my code which is working fine but when i change my headline2text to "Sale Price $25 . This is a sample text. $244" then auto logo image changes its position. I do not want logo to change its position but it should remain on its place and should not be affected by the headline2Txt. How to fix this issue?
<div id="wrapper">
<div id="mainContainer">
<p class="copyrights" id="copyrights"></p>
<div>
<img id="Image_Car" src="http://i.share.pho.to/25a090ef_c.png" />
</div>
<div id="headlineText">
<p id="headline1Txt" >Sample bag1</p>
<p id="headline2Txt" >Sale Price $25 </p>
</div>
<div id="disclaimer" >
Details*
</div>
<div id="Image_logo">
<img id="Imglogo" src="http://i.share.pho.to/93578bd4_o.png" />
</div>
<div >
<button class="btn btn-primary" type="button" id="ctaBtn"><div id="fadeIn" > Learn More Now </div></button>
</div>
</div>
#Image_logo img
{
position:relative;
width:140px;
height:30px;
top:-3px;
left:390px;
}
</div>
I may not understand what you're asking, but I think the lack of a float is throwing you. Adding some css like this..
<style>
#Image_logo img {
width:140px;
height:30px;
}
#wrapper {
float:left;
}
</style>
...should work. It should be in a separate .css file of course.
You have position: relative; on #Image_logo img yet you try to position it the "absolute way". Try to change your CSS like this:
#Image_logo img {
position:absolute;
width:140px;
height:30px;
top:40px;
left:390px;
}
Try giving your #Image_logo img position: absolute instead of relative, then modify top, left etc. Then it should be always in the same place;
I need to swap two elements by using css. My html is here:
<div class="container">
<div class="Div2">
<img src="Div2.jpg">
</div>
<div class="Div1">
<img src="Div1.jpg">
</div>
</div>
and my css is here:
.container{width:50%; margin:auto;}
.div2{float:left;width:100%;}
.div1{float:left;width:100%;}
is there any way how to put Div1 on the position of Div2 only with css without changing html?
Float .div2 to the right, and .div1 to the left:
.div2{ float:right; }
.div1{ float:left; }
You'll also have to remove the width: 100%; if you're attempting to stack them side by side.
Also, classes are case-senstive. In your example code, your div classes are .Div1 and .Div2, make sure to use all lowercase classes to match the definitions:
<div class="container">
<div class="div2">
<img src="Div2.jpg">
</div>
<div class="div1">
<img src="Div1.jpg">
</div>
</div>
Example: http://jsfiddle.net/dph8t/
How would I go about placing my text at the center of an image, this is what it looks right now: http://gyazo.com/442aa9f927c1c1ee505435c2422f7322.png
and this is how I want it to be: http://gyazo.com/bc3bb2d0472a1c963d4ac00081065461.png
This is my current code:
<p><img src="http://findicons.com/files/icons/941/web_design/32/page_text.png" /> Some random text</p>
I would really appreciate if someone could help me out with this.
try to insert the image inside a div and put the text on it like this:
<div class="img">
<p>your text</p>
</div>
css:
.img{
background: url('http://findicons.com/files/icons/941/web_design/32/page_text.png') no-repeat;
height:100%;
}
DEMO
After you can mode your text where you want
If you don't want to use the image like a background and you want only to put text at the center of your element try this:
<div class="container">
<img src="http://findicons.com/files/icons/941/web_design/32/page_text.png" />
<span>your text</span>
<br style="clear:both;" />
</div>
css
.container{
width:100%;
height:100px;
}
.container span{
line-height:30px;
float:left;
}
.container img{
float:left;
}
DEMO2
Demo:
http://jsfiddle.net/5ser6/1/
<div class="thingy">
<img src="http://findicons.com/files/icons/941/web_design/32/page_text.png" alt="" />
<p>Text</p>
<br style="clear:both;">
</div>
* {font-family:arial}
.thingy img {float:left;}
.thingy {height:32px;float:left;}
.thingy p {float:left;margin:0 0 0 10px;padding:0;line-height:32px;}
If your framework has a clearfix, you don't need the clear:both, just put a clearfix on the outer div.
I'm trying to achieve an effect when one div with png img inside (this img has hole in it) is over another div with img inside that will appear in hole of image over it, but for now it still is over instead of being under img with "window". And I still want to keep div that has to be under img ("iphone-screen") inside div with image with window ("iphone") because of responsive issues (percentage width of inner div is related to width of outer div). How to achieve that? Here's link to my website (go to page "Kontakt"):
CLICK
And here's my HTML markup:
<div id="slide6" class="slide">
<h1 class="big">Kontakt</h1>
<h2 class="call">Zadzwoń: <span class="thick">514 944 555</span></h2>
<h2 class="mail">
Napisz: <span class="thick">biuro#dentmedica.pl</span>
</h2>
<div id="iphone">
<img src="img/iphone.png" alt="" />
<div id="iphone-screen">
<img src="img/iphone-screen.png" alt="" />
</div>
</div>
</div>
And CSS:
#slide6 #iphone{
position:absolute;
bottom:0;
right:0;
width:40%;
z-index:600;
}
#slide6 #iphone > img{
width:100%;
height:auto;
z-index:600;
}
#slide6 #iphone #iphone-screen{
position:absolute;
width:44.1%;
overflow:hidden;
bottom:24%;
left:15%;
z-index:100;
}
#slide6 #iphone #iphone-screen > img{
width:100%;
height:auto;
z-index:100;
}
Thanks for any help!
I guess it's the issue with the div tag iphone-screen..remove it