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>
Related
I'm trying to have a background image to the right of a div, which isn't covering the whole div.
Right now it's like this (div1 is background-color):
<div id="div1">
<div id="image"></div>
Text
</div>
CSS:
.div1 {
background: #324458;
color: #FFF;
font-size: 0.9em;
font-weight: bold;
padding: 10px;
width: 100%;
position: relative;
border-radius:4px;
height:40px;
clear:both;
overflow: hidden;
}
.image {
background: url("url here");
background-position: center center;
background-size: cover;
opacity: 0.3;
height: 39px;
margin: -10px;
width: 300px;
position:absolute;
right: 10px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
z-index: 0;
}
But is it possible to have the image shown in it without having it as a div inside div1? Like using :after, :before or something else? I only want the div image to show to the right of div1 and be X width.
For an background image to show on pseudo-elements like ::after and ::before you should include content: ''; on them.
I've fixed (you were trying to target ids with class selectors) and added the mentioned background image on on this fiddle. But it goes like this:
.div1 {
background: #324458;
color: #FFF;
font-size: 0.9em;
font-weight: bold;
padding: 10px;
width: 100%;
position: relative;
border-radius: 4px;
height: 40px;
clear: both;
overflow: hidden;
}
.div1::after {
content: '';
background: url("https://unsplash.it/200/300");
background-position: center center;
background-size: cover;
opacity: 0.3;
height: 39px;
margin: -10px;
width: 300px;
position: absolute;
right: 10px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
z-index: 0;
}
<div class="div1">
Text
</div>
There are several ways to place an image to the right of a div. You should consider displaying the image with an image tag as follows:
Also, in your html you define ids, then in css you need to use # isntead of .. Check Difference between id and class in CSS and when to use it
A way to do this:
HTML:
<div id="div1">content</div>
<img id="image" src="url"/>
CSS:
#div1 {
display:inline-block;
float:left;
}
#img {
float:left;
}
By default, div containers stretch their width all the way to match 100% the width of their parent container. Setting 'display:inline-block' will make it wrap their content and allow stacking different containers (including images) to the sides.
This is a test of :before and :after, with which you can place text or an image before and after each HTML element.
p.test:before {
padding-right: 5px;
content: url(/pix/logo_ppk.gif);
}
p.test:after {
font-style: italic;
content: " and some text after.";
}
I have a button set up like this:
I cannot for the life of me get the icon to sit in the middle of the button.
This is my CSS:
.buttonclass {
width: 30px;
height: 30px;
border-radius: 20px;
background-color: #1DBE60
}
.iconclass {
width: 20px;
height: 20px;
margin: 7.5px;
}
The only caveat is that I need the margin on the iconclass.
Here's a plunk...
http://plnkr.co/edit/6fLYQlpFmDdf7aWenBtp?p=preview
Setting the image as a background-image is probably your best bet.
If you can't do that then I would probably create a css rule for that .iconclass nested in that .buttonclass since you said you cannot remove the margin from the .iconclass directly.
Something like this:
.buttonclass .iconclass{
margin:0;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
}
Updated Plunker.
Look into box-sizing, this will help it contain it's content and you can adjust the width/height from there. http://www.w3schools.com/cssref/css3_pr_box-sizing.asp
Works well like this:
.buttonclass {
width: 30px;
height: 30px;
border-radius: 20px;
background-color: #1DBE60;
box-sizing:content-box;
padding:0px;
}
.iconclass {
width: 20px;
height: 20px;
}
I was toggling your CSS file, and I believe this simple solution works...
you could also resize the ewisth of the icon class, but this seems to be what you're looking for if I'm correct
CSS
.buttonclass {
width: 30px;
height: 30px;
text-align: center;
position: relative;
border-radius: 20px;
background-color: #1DBE60
}
.iconclass {
width:15px;
}
Try the following solution (alter only image class)
.iconclass {
width: 20px;
height: 20px;
margin: 3.4px;
position: absolute;
top: 0;
left: 0;
}
It works for me.
Just use margin: 0px -2px -2px -2px; to the .iconclass.
#border {
position: static;
z-index: 1;
width: 120px;
height: 120px;
margin-left: 92% ;
padding: 15px;
border-radius: 11px;
background: white;
opacity: 0.2;
}
#text {
margin-left: 93%;
z-index: 2;
color: white;
font-weight: bold;
}
<div id="border"></div>
<div id="text">Users online</div>
I can't post the image here, cuz I have less than 10 reputation, so try to imagine it please. I want to place it's "Users online" inside the border, how should I do this? Thanks.
I'm assuming you are trying to have an element with a semitransparent background.
Since you are using the opacity property on the element with an id of border.
The problem here is that z-index will not have any effect, if the position is set to static, which is the default value for div elements.
The other thing is, that you should be using a relative positioned parent to make your life easier and have more control over the elements since positioned elements will leave the normal document flow and result in new stacking order.
Here you can find good information on the the z-index property, stacking and the document flow.
This is one solution to your problem.
body {
background:black;
}
.holder {
position:relative;
}
#border {
position: absolute;
z-index:1;
right:0;
width: 120px;
height: 120px;
padding: 15px;
border-radius: 11px;
background: white;
opacity: 0.2;
}
#text {
position: absolute;
z-index:2;
right:0;
width: 120px;
height: 120px;
padding: 15px;
text-align: center;
color: white;
font-weight: bold;
}
<div class="holder">
<div id="border"></div>
<div id="text">Users online</div>
</div>
But i would actually try to solve this with a different approach, because i find the above solution a bit to complex and it involves to much positioning, so if all you need is a semitransparent background just make use of the background property with an rgba value. Here is an example.
.user-panel {
float:right;
height: 120px;
width: 120px;
padding: 15px;
border-radius: 11px;
/* fallback for browser that do not support rgba */
background: #ccc;
/* semitransparent background */
background: rgba(0, 0, 0, .2);
text-align: center;
color: white;
}
/* clear the float using the pseudo after element */
user-panel:after {
clear: both;
display: block;
visibility: hidden;
height: 0px;
}
<header>
<div class="user-panel">Users online</div>
</header>
Hope that helps.
Change
position: static;
to
position: absolute;
for #border. That way, border will be "removed from the flow" (i.e. other elements will ignore it). You may need to adjust the margin-left property for #text so it properly aligns.
Fiddle: https://jsfiddle.net/xzdmLt33/1/
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
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/