I am facing a problem in positioning a text at the top of the image. The image is not in background.It's just with image tag.
The thing is I can't change the html code. Is it possible to achieve what I want but without changing the html code.
<div class="home_box">
<img src="http://netdna.seospecialist.co.uk/wp-content/uploads/2012/12/christmas-three.png" class="holding">
<h4>hot off the server</h4>
</div>
Jsfiddle : http://jsfiddle.net/EkzdE/11/
I have updated the fiddle. Now when you resize the window the image is moving but the text is staying there.Is there any way to make it responsive
Try this:
FIDDLE
CSS:
.home_box {
position:relative;
text-align:center;
}
img.holding {
position:relative;
margin-top:40px;
}
.home_box h4 {
color: #000;
font-family:'arial';
font-size: 15px;
left: 140px;
line-height: 33px;
position: absolute;
text-align: center;
text-transform: uppercase;
width: 200px;
height:40px;
left:50%;
top:0;
margin-left:-100px;
}
Write:
.home_box h4 {
width: 200px;
top:0;margin:0;
}
Updated fiddle here.
All you need to do is set the h4 element's top property to zero so it sits at the top of the div, right over the image.
.home_box h4 {
...
left: 0;
top: 0;
...
}
Here is an updated fiddle.
You should make the positioning on both the image and the text relative.
This ensures that they both move according to the div as the window size changes.
Then, in order to put the text on top of the image, use a negative top margin.
.home_box {
position:relative;
text-align:center;
}
img.holding {
position:relative;
}
.home_box h4 {
color: #000;
font-family:'arial';
font-size: 15px;
margin-top: -200px;
margin-left: auto;
margin-right: auto;
line-height: 33px;
position: relative;
text-align: center;
text-transform: uppercase;
width: 200px;
}
Updated Fiddle
Related
i am trying to put text over image it works but is there a better way to do it. should i use a different html tag for the text.
any suggestions
http://jsfiddle.net/8rDda/
body{
background-color:#F0F0F0 ;
color:#000305;
font-size: 87.5%;
font-family: Arial,'Lucida Sans Unicode';
line-height: 1.5;
text-align: left;
width:80%;
margin:2% auto;
}
.main {
width:45%;
height:300px;
background-color: #20b2aa;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.main img{
width:80%;
height:auto;
margin: 6% 10%;
float: left;
}
.main h2 {
color:white;
position: absolute;
margin:50px;
margin-left: 50px;
width: 100%;
}
Maybe one solution could be, that you set the image as background-image for your div. And edit the test in it. So you jut have a single div, which you must edit.
http://jsfiddle.net/QX36R/1/
http://jsfiddle.net/8rDda/1/
I would use absolute positioning instead of float.
.main {
width:45%;
height:300px;
background-color: #20b2aa;
border-radius: 5px;
position: relative; //keep children absolutely position constrained to this element.
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.main h2 {
color:white;
position: absolute;
margin: 6% 10%;
top: 0;
left: 0;
}
You could also use z-index and different divs. But at last you need position:absolute; with different positions or margin-top: -whatever with position:relative;. There is not really a right or wrong approach to do this. As long as it works on your site, it is all fine.
You can use <div> tag means creating one div and put it on the top of image or set any position or else link it with another div which will be your image. There are plenty of things you can do with <div> tag.
Example.
<div style="abcd">
top: 99;
left: 99;
position: absolute;
z-index: 1;
visibility: show;">
<!-- content will go here -->
</div>
I have an image with a background overlay that needs to respond to screen devices.
The bg overly needs to remain full width but putting 100% width just creates an overflow on small devices and underflow on larger ones.
Appreciate the help.
Please see my js fiddle
.col-md-3{
width:30%;
}
img{
width:100%;
}
.brand-category{
position: relative;
}
.brand-text{
position: absolute;
background-color: rgba(130,130,130,0.5);
font-weight: 100;
font-size: 0.9em;
color: #fff;
text-align: center;
bottom: -10px;
padding: 5px;
}
Paddings cousing overflow
<div class="col-md-3 brand-category">
<p class="brand-text"><span>Category</span></p>
<img src="http://paulobriendesign.com/img/paul-obrien.jpg" class="img-responsive" alt="">
</div>
css
.col-md-3{
width:30%;
}
img{
width:100%;
}
.brand-category{
position: relative;
}
.brand-text{
position: absolute;
width: 100%;
background-color: rgba(130,130,130,0.5);
font-weight: 100;
font-size: 0.9em;
color: #fff;
text-align: center;
bottom: -10px;
}
.brand-text span {
display: block;
margin: 5px;
}
http://jsfiddle.net/XWfN4/
Simply add display:block; to your img CSS
img{
width:100%;
display:block;
}
Demo Without
Demo With
Can anyone take a look at this and let me know what I'm doing wrong (probably something stupid)?
I would like the Text "test" to be centered.
http://fiddle.jshell.net/uteaH/3/
CSS:
.wrap {
max-width: 1139px;
margin-left: auto;
margin-right: auto; }
#screenPresentation {
border-top: 4px solid #d95936;
margin-top: 50px;
margin-bottom:10px;
background: #fff;
}
#screenPresentation h2 {
margin-top: -45px;
color: #000;
font-size: 2.4em;
font-weight: 500;
float:left;
}
.loginContainer-wrapper {
width: 99%;
height: 500px;
border: 2px solid #000;
margin:0 auto;
}
HTML:
<div class="wrap" id="screenPresentation">
<h2>Title</h2>
<div class="loginContainer-wrapper">
test
</div>
</div>
text-align:center; by any chance?
I'm going to be a mindreader here since you won't tell us exactly what needs to be centered
DEMO
For #screenPresentation h2
Remove
float:left;
Replace with
position: absolute;
width: 95%;
text-align: center;
Sorry - I updated my question. I need the text "test" centered inside the inner div.
Oh in that case
Remove width:95%;text-align:center from #screenPresentation h2
Add text-align:center to .loginContainer-wrapper
DEMO
To center the text you need two steps:
First reset margin and padding for your tags:
* {
margin:0;
padding:0;
}
Second add text-align:
.wrap {
text-align:center;
}
The demo http://fiddle.jshell.net/uteaH/9/
you can use
<center>
test
</center>
that will do it.
I am trying to figure out how to expand my text outside of its container. The desired effect is to have a the text expand larger than its container. Ex.//
I'm not sure how to start with this. I'm new to HTML and CSS and could use some help :)
Here's one way of doing it:
<div class="container"><span>EXAMPLE</span></div>
.container {
background: #ddd;
font-size: 30px;
width: 130px;
height: 15px;
overflow: hidden;
}
.container span {
position: relative;
top: -10px;
left: -7px;
}
http://jsfiddle.net/ZnxrT/
Note: The top/left offsets are arbitrary units. You would need to tweak them to suit your requirements.
You should apply a fixed size to the box containing the text: EXAMPLE.
After that you should put the text in the middle and size the letters so the are larger than the space of the box and apply an overflow: hidden
It should be something like that:
.box{
width: 50px;
height: 10px;
overflow: hidden;
margin: auto;
background-color: gray;
}
.text{
color: red;
font-size: 14px;
text-align:center
vertical-align:middle;
}
Here is a working example
http://jsfiddle.net/8CaQx/
<div id="outer"><div id="inner">TEXT</div></div>
#outer {
height: 36px;
width: 140px;
overflow: hidden;
background-color: black;
}
#inner {
position: relative;
top: -18px;
left: -10px;
font-size: 60px;
text-align: center;
vertical-align: middle;
font-family: arial, sans serif;
font-weight: 900;
color: red;
}
You are probably looking for the CSS overflow property.
http://www.w3schools.com/cssref/pr_pos_overflow.asp
Please see this fiddle for the code to recreate the above example: http://jsfiddle.net/E5atK/
I'm trying to replicate the basic effect of the rating boxes that the verge uses (you can see it here: http://www.theverge.com/2012/5/9/3002183/airplay-speaker-review-iphone at the bottom) but I keep having issues with my text alignment. Right now I have this:
<div class="product-score-box">
<div class="score">
<span class="totalscore">
<?php echo aff_the_rating();?>
</span>
<span class="ourscore">Our Score</span>
</div>
Leave Review
</div>
CSS:
.product-score-cta { right:0; left: 0; bottom:5px; color:white;}
.ourscore {bottom:8px;}
.totalscore {top:10px; font-size:70px; line-height:70px;}
.ourscore,.totalscore,.product-score-cta {position:absolute; }
.score {
height:115px;
color:white;
background:#f48b1b;
position:relative;
}
.product-score-box {
display: block;
position: absolute;
top:20px;
right:10px;
color: white;
font-family: 'DINCond-MediumRegular';
background: black;
text-align: center;
z-index: 20;
overflow: hidden;
font-size: 16px;
line-height: 100%;
width:130px;
height:140px;
}
On Firefox, the text in .score doesn't align to the center and in Chrome, it's aligned strangely (like it's justified? or something). I am absolutely terrible at absolute positioning! If someone could help me get a similar effect, I would be forever grateful.
EDIT: http://jsfiddle.net/wQrZr/
So i've replicated it to what extent is possible given your markup and standard font selections, but the layout should be correct.
Setting an absolute width to the elements inside the box and giving them a left: 0; seemed to do it straight up and some additional styling added to the leave review element made it closer to the verges'
Jsfiddle Example
The Css:
* { font-family: Tahoma; }
.product-score-cta { right:0; left: 0; bottom:5px; font-size: 14px; text-decoration: none; color: #EEE;}
.ourscore {bottom:12px; font-size: 18px; font-style: italic;}
.totalscore {top:10px; font-size:70px; line-height:70px;width:130px; position: absolute;}
.ourscore,.totalscore,.product-score-cta {position:absolute; width: 130px; left: 0px;}
.score {
height:115px;
color:white;
background:#f48b1b;
position:relative;
}
.product-score-box {
display: block;
position: absolute;
top:20px;
right:10px;
color: white;
font-family: 'DINCond-MediumRegular';
background: black;
text-align: center;
z-index: 20;
overflow: hidden;
font-size: 16px;
line-height: 100%;
width:130px;
height:140px;
}
REFERENCE:
css positioning
1) remove the absolute positioning for .totalscore and .ourscore
2) position score relatively
3) position the "ourscore" label absolutely
Here it is:
http://jsfiddle.net/hammerbrostime/PGKNU/