Is it possible to put image (css content property) before text inside div in my case?
JavaScript inserts different messages into the element with msgBox. And unfortunatelly I cannot touch JS.
Also text must be in the center (in the middle of the picture).
Requirements:
Message text is in the center
Between image and text strongly 10-20px
Div must not contain other elements
Text and icon should be centered.
document.getElementById("msgBox")
.innerHTML = "Here can be any text any long";
#msgBox {
border: 1px solid black;
padding: 10px;
text-align: center;
}
<div id="msgBox">(icon) text</div>
You could try it with css :before:
#msgBox:before{
content: url('path/to/your.png');
}
http://jsfiddle.net/a4utqvh1/1/
You can achieve this by setting height and verticle align:middle css of image and put image before text.
Here is the updated fiddle
http://jsfiddle.net/a4utqvh1/2/
You can use :before in css to add your icon as a background image, so even if you change the content of your div in JS, the icon will still be there.
#msgBox:before {
content: "";
display: inline-block;
width: 10px; // width of your image
height: 10px; // height of your image
background: url('img.jpg'); // path to your image
}
Here is the fiddle using image as a background image
msgBox {
border: 1px solid black;
padding: 10px;
text-align: center;
background: url(http://png.findicons.com/files/icons/2015/24x24_free_application/24/error.png) no-repeat 5px center;
}
http://jsfiddle.net/a4utqvh1/4/ will this work
You can use the background-image-Attribute form a div-Element.
#msgBox {
...
background-image: url('http://png.findicons.com/files/icons/2015/24x24_free_application/24/error.png');
background-repeat: no-repeat;
background-position-y: center;
...
}
A Sample with nice padding:
http://jsfiddle.net/bronni/a4utqvh1/7/
may this will work, put image tag in innerHTML text
document.getElementById("msgBox").innerHTML = "<img src='http://png.findicons.com/files/icons/2015/24x24_free_application/24/error.png'/> <span>Here can be any text any long</span>";
#msgBox {
border: 1px solid black;
padding: 10px;
text-align: center;
}
<div id="msgBox">(icon) text</div>
http://jsfiddle.net/a4utqvh1/3/
.wrapper {
border: 1px solid black;
padding: 10px;
text-align: center;
float: left;
}
.wrapper img,
#msgbox {
float: left;
}
<div class="wrapper">
<img src="http://png.findicons.com/files/icons/2015/24x24_free_application/24/error.png" />
<div id="msgBox">(icon) text</div>
</div>
Related
I'm not sure how I should go about this issue.
I'm fairly new to the front-end development so bear with me.
I have 4 boxes explaining the process step by step. I managed to
display them side by side by using the inline-block property. Now, I am trying to add 4 more small box looking buttons right on top of the boxes. Here is what I mean.
This is the index.html code.
<section>
<div class="how-text">
<h3>How to use SnappyApp</h3>
</div>
<div class="how-box">
<div class="idea-top">
</div>
<div class="idea">
</div>
<div class="scatch">
</div>
<div class="craft">
</div>
<div class="launch">
</div>
</div>
</section>
Here is the css code.
section {
height: auto;
padding-bottom: 100px;
background-color: #2c3e50;
}
.how-text {
text-align: center;
display: inline-block;
width: 100%;
color: white;
margin-top: 40px;
font-size: 30px;
letter-spacing: 3px;
}
.how-box {
text-align: center;
height: auto;
margin-top: 130px;
}
.idea {
background: url('img/idea.svg') center center no-repeat;
width: 200px;
height: 200px;
display: inline-block;
margin-right: 25px;
border: white solid medium;
}
.scatch {
background: url('img/scatch.svg') center center no-repeat;
width: 200px;
height: 200px;
display: inline-block;
margin-right: 25px;
border: white solid medium;
}
.craft {
background: url('img/craft.svg') center center no-repeat;
width: 200px;
height: 200px;
display: inline-block;
margin-right: 25px;
border: white solid medium;
}
.launch {
background: url('img/launch.svg') center center no-repeat;
width: 200px;
height: 200px;
display: inline-block;
margin-right: 25px;
border: white solid medium;
}
I also feel like my css code is very repetitive. If you have any suggestions, please help! I really appreciate all your help.
Thank you.
Here
https://jsfiddle.net/ds0md0xc/1/
EXPLANATION
All you need to do is to nest a child element in those divs. Since you specified them to be buttons. I used
<button>
element. But feel free to change it to a div if you want.
<div>
<button> </button>
</div>
For the css. It is going to be pretty simple just set width and height accordingly and it will position itself to the top.
button{
width:100%;
height: //whateveryouwant;
}
For the border, you dont need to have a second div. Just set the border bottom of the button as in fiddle
Hope this helps
here's a fiddle to demo
you should have a 'container' div to act as a parent and have both boxes as children :
<div class='super-box'>
<div class='button'> </div>
<div class='picture-box'> </div>
</div>
as far as your repetitive code, anything that repeats more than a few times (say 3 times) put it in a separate class and apply multiple classes to each div separated by a space
<div class='firstClass secondClass'></div>
Repeat your div called how-box. Here is a link to a fiddle that shows that: http://jsfiddle.net/eofct5ur/
Also your css could be cleaned up by doing something like this:
.idea, .scatch, .craft {
width: 200px;
height: 200px;
display: inline-block;
margin-right: 25px;
border: white solid medium;
}
then you would do:
.idea {
background: url('http://www.example.com/images/1.png');
}
and so forth for the other divs.
You can just wrap the button and the box inside 1 div.
In that manner they will be displayed one below another (set width: 100%).
So now you have 4 divs, with each inside a button and another div.
If you do then your inline-block on the first 4 divs they will be alined one next to another and inside you have your button and your text.
Greetings
I want to have a block on the left and a box which contains text to its right, but I don't want the text that wraps to drop under the block. It should stay with the confines of a rectangle that is adjacent the block. This is how a table would behave, but I'm not sure what the best way to accomplish this outside of one is.
I hope this fiddle will clarify: http://jsfiddle.net/bernk/Ck7cj/
<div class="container">
<div class="block">BLOCK</div>
<div class="text">This is a text box that wraps onto at least two lines</div>
</div>
Instead of floating you can use display:table-cell:
jsFiddle example
* {
box-sizing: border-box;
}
.container {
width: 200px;
border: 1px solid black;
overflow: auto;
}
.block {
display:table-cell;
width: 70px;
height: 20px;
background: red;
color: white;
text-align: center;
}
.text {
border: 1px solid red;
display:table-cell;
}
I'm having trouble forcing the text to stay relative within its div and at the same height as the image. So when the browser is resized, it doesn't overflow. I'm doing this as I'm creating a responsive webpage. I hope I've explained this clearly. Please check out my http://jsfiddle.net/DMnhB/1/
The html is as follows:
<div id="postd"><img
src="http://www.tntmagazine.com/media/content/_master/42628/images/barack-obama.jpg">
<span>
Text Here
Text Here
Text Here
</span>
</div>
And the CSS:
#postd{
width:100%;
padding-bottom: 5%;
background-color: blue;
padding-top:6%;
border-bottom: 1px dotted #ccc;
}
#postd img{
width:40%;
}
#postd span{
float:right;margin-left:1px;
position: absolute;
background-color: red;
}
Here is a start, try the following CSS:
#postd {
width:100%;
padding-bottom: 5%;
background-color: blue;
padding-top:6%;
border-bottom: 1px dotted #ccc;
}
#postd img {
width:40%;
display: inline-block;
vertical-align: top;
}
#postd span {
display: inline-block;
margin-left:1px;
background-color: red;
}
You can see how it looks at: http://jsfiddle.net/audetwebdesign/DMnhB/2/
I used inline-blocks to fix the overflow problem and vertical-align: top to place
the top of the image inline with the top of the text block.
You need to provide some additional feedback before I make any other adjustments.
What is the best way to vertically center the text in my blue box?
markup:
<div class="btn-blue">
<span class="icon"></span>
Some awesome text here
</div>
and the styles:
.btn-blue {
background-color: #446598;
color: #fff;
display: inline-block;
padding: 0 20px 0 0;
line-height: 0;
}
.btn-blue .icon {
width: 50px;
height: 50px;
display: inline-block;
background-color: #00356b;
margin-right: 10px;
}
Here is the fiddle
http://jsfiddle.net/fSa6r/
Thanks.
Add line-height: 50px; to the .btn-blue class and
vertical-align: middle; to the icon class
FIDDLE
When only one line of text is needed, I find that setting line-height to the height of the box is the easiest way to vertically center text.
There are lots of ways to vertically align text, which you can check out here: http://www.vanseodesign.com/css/vertical-centering/
My personal favourite is using CSS tables (not html tables):
html:
<div id="parent">
<div id="child">Content here</div>
</div>
css:
#parent {display: table;}
#child {
display: table-cell;
vertical-align: middle;
}
This is another method to show a link as a button with icon. You could to improve this code using an sprite instead two separated images:
a.mybutton {
padding: 3px 0px 3px 30px;
color: #c00;
}
a.mybutton:link,
a.mybutton:visited,
a.mybutton:active {
background: #fff url("https://dl.dropboxusercontent.com/u/59816767/assets/map-pin_off.png") left center no-repeat;
}
a.mybutton:hover { background: #fff url("https://dl.dropboxusercontent.com/u/59816767/assets/map-pin_on.png") left center no-repeat; }
Here is the: fiddle
I am trying to center align an image that is wrapped in a <span>, but I am having trouble doing so. I have uploaded my CSS and HTML to jsfiddle: http://jsfiddle.net/7nHhu/1/
I am trying to get the image to center align itself with the content in a "block" style (ie. all text above and below it, not wrapped to the left or right)
Any help would be greatly appreciated.
.imgframe {
border: 1px solid #EAEAEA;
display: inline-block;
margin: 8px;
}
.imgframe img {
border: 1px solid #FFFFFF;
margin: 0;
background: #F6F6F6;
padding: 8px;
-moz-box-shadow: 2px 2px 5px #CCCCCC;
-webkit-box-shadow: 2px 2px 5px #CCCCCC;
}
<span class="imgframe centerimg"><img src="http://i48.tinypic.com/31368e9.jpg" /></span>
I think it's more appropriate to use text-align for centering text rather than images. You could center an image by setting left and right margin auto.
img {
display: block;
margin-left: auto;
margin-right: auto;
height: auto;
padding-top: 10px; //margin-top doesn't work
}
Demo
Just make image wrapper block level element and text-align:center; it.
FIDDLE
or wrap it in another element if needed;
FIDDLE
In .imgframe, add width: 100%;
Given your requirements, to keep the .imgframe element in-line, to avoid it taking up the full width of the enclosing element, and working without adding wrapping elements to your mark-up, the following works:
body {
text-align: center;
}
body p {
text-align: left;
}
JS Fiddle demo.
This would, probably, be less intrusive if you had the elements from your Fiddle wrapped in a specific, target-able, element; rather than the body, as the method, above, requires you to reset the text-align for all elements contained within the body. So, personally, I'd use:
<div id="contentWrapper">
<p>...</p>
<span class="imgframe">
<img src="..." />
</span>
<p>...</p>
</div>
And:
#contentWrapper {
text-align: center;
}
#contentWrapper p {
text-align: left;
}
Just in order to minimise the amount of work required to tidy up afterwards.
span {position: absolute; top:0; left: 0; width: 100%; text-align: center;}
img {width:yourimagewidth; heigth: width:yourimageheigth}