I need to show some help text and info icon on the left hand side of the div (bootstrap 3). I have managed to display the icon by using the before class but the problem is it is not dynamic and also the icon is always shoved up on top. I do not want to hard code the margins or height for the div on the left as I do not know how long the display text will be.
.crmEntityFormView div.description.above:before {
content: "";
display: block;
background: url("info-icon.png") no-repeat;
background-color:#f7f7f7;
background-position: center;
width: 35px;
height:55px;
float: left;
margin: 10px 6px 0 0;
}
output is like this but I want the grey column on the left to expand vertically to the same height of the description text and icon to be vertically aligned in middle. :
You could make the containing div a flexbox and set the :before to have align-self: center;
Related
I'm creating a small view on my page where I have a centered 500x650 div with some text in it.
I have a bootstrap div as a container, <div class="container">. Inside that I have my centered 500x650 div, with a CSS like this:
.desc {
position: relative;
margin: 30px 245px 0px;
height: 500px;
width: 650px;
background: #fff;
border: 1px dashed #cbd0d8;
padding: 5px;
}
This looks good. Now, I'm trying to add a small image which is supposed to be right by the left bottom corner of the dashed border. Problem is, I centered it with margin: auto, creating a huge horizontal margin on the sides of the .desc-div, so I can't position my img, which is in a div with position: relative, as the margin pushes it down under the corner.
I could use position: absolute on my image but I'm trying to avoid that as I understand it looks different on different sized monitors, and I want this image to sit pretty exactly in one spot.
How do I solve this?
To place your image exactly into the lower left corner of your .desc DIV, put your image tag inside the .desc DIV and give it the following settings:
img.yourclass {
position: absolute;
bottom: 0;
left: 0;
width: 40px;
height: 30px;
}
Since your DIV already has position: relative, it will act as the position anchor for the absolutely positioned image, and the bottom and left settings place it in the lower left corner.
The width and height of course depend on the image itself . adjust that as needed.
My menu with icons looks like,
Icons are displayed slightly above the text caption. I read the tips given here, to use vertical-align. And after specifying both line-height and vertical-align, it doesn't have any effect.
Plunker code is here.
How can i ensure the icon and the text item are vertically aligned?
Try centering your icons within your em elements via the background-position property, which should cause them to be centered just as your caption text were and align properly (previously they were positioned in the top-left corner) :
em[class^='icon-'] {
/* omitted for brevity */
background-position: center;
}
You can see an updated Plunker here and an example of what it looks like below ;
Your icons are background images on a 50px square element. Just set the background to be centered
em[class^='icon-'] {
display: inline-block;
height: 50px;
width: 50px;
background-repeat: no-repeat;
vertical-align : middle;
line-height:50px;
background-position: center; /* <--- this part */
}
You can use
a em {margin-top:10px;}
and see when you want the icon and change the value of margin-top
I have a jsfiddle here - http://jsfiddle.net/gh4Lur4b/2/
It's a bootstrap carousel with caption on each slide.
I'd like to change the position of the caption so it is left aligned to the red block below that is a bootstrap container block. I can position it with px or % but looks out of place at big pr small screen sizes.
I'd also like to have the text inline and have a black background. In the example I have done it by fixed the width of the container which won't work because I don't know how much text that will be.
.block{
background: red;
height: 200px;
}
.carousel-caption{
font-size: 3em;
left: 10%;
text-align: left;
background: black;
color: white;
display: inline;
width: 200px;
padding: 0;
}
1.To align left edge with the red block, you could add left: 0; to your class .carousel-caption. So the caption will be positioned to the left edge.
2.For the size of the caption box. No need to set the size in fix pixel. The reason why there is a strange width for this box is. The CSS code in Bootstrap has already set a rule right:15%;. That makes the right side of this box stick to the 15% of the right edge. It automatically drag the box's right edge. Thus, let remove this rule by add right:auto; to your .carousel-caption, and remember to remove the width:200px; .
You can override it by putting styles width: 46%; and margin-left: -153px; into .carousel-caption class.
I'm finishing my web site http://centrosokoladine.lt/ And how you can see there is in middle left some picture covered with text, and I need to wrap that text. Image is set like those box'es bakground image, no repeat left middle...
Here that exact part of html:
<div class="turinio"><?php the_content(); ?></div>
And css:
.vidinis
{
background-color:#a68e84;
layer-background-color:#a68e84;
width: 709px;
/* height: 306px; */
align: center;
padding-top: 17px;
visibility: visible;
**background-image: url('http://centrosokoladine.lt/wp-content/themes/sokoladine/grafika/info.gif');
background-repeat: no-repeat;
word-wrap: break-word;
background-position: bottom left;**
overflow:hidden;
}
I know that it's not posible wrap text arround background images so I'm looking for other solution here, maybe I already tried to create seperate div for that image, but I failed..
You cannot do this with a background-image unless (1) You give a padding-bottom to your div and don't show text next to the image, or (2) you give a padding-left to your div and don't show text under the image.
An img element is the normal (html) way to do this. You can then add the align attribute to that image.
float: left;
Float will do the trick.
My URL: http://www.dreambelle.com/
The background image (white main, grey side bar) that is behind the text and sidebar below the slider is placed too low. You can see this issue to the right of the slider behind the side bar content...
The problem is that I cant figure out how to move the background image up via css without moving the entire body content up?
The background image is rendered from a small bar (attached)
You need to do both (make the #featured_body with a smaller height), and adjust the margin on the #sidebar
Ive tested the following this works for me in FF5:
// Remove 10px from the #featured_body height
#featured_body {
background: url("images/bgr_board.png") repeat scroll 0 0 transparent;
float: left;
height: 356px;
margin: 0 12px;
padding: 0;
width: 618px;
}
// Add 10px to the sidebar top margin
#sidebar {
float: left;
height: auto;
margin: -375px 0 20px;
padding: 0;
width: 332px;
}
This is happening because your div#content, which has the background-image is placed below your div#featured_body, which is pushing it down.
You have two choices, as I see it:
make the div#featured_body smaller height-wise, so that the bg image lines up with the twitter div or
place anther wrapper div around all the content under the nav and add the background-image to that. (That is, if you wanted the bg-img to stretch to the top of the page).