I'm trying to add ui.bootstrap.alert based on this example: https://plnkr.co/edit/?p=preview.
It works okay as following except that it's too big for me.
So I changed the height in CSS and here's the new output
.alert {
margin-bottom: 1px;
height: 30px;
}
But now the sentance is not in the middle of the alert anymore.
How can I properly change the height of the alert? Thanks!
You will need to change line-height and padding for this to work
.alert {
margin-bottom: 1px;
height: 30px;
line-height:30px;
padding:0px 15px;
}
http://codepen.io/nilestanner/pen/kkGoNO
Related
I am using a template for my blogger blog in which images are set to resize automatically to fit the whole width. Therefore no matter I align a photo to left or right or resize the photo, they will always appear as full width. There is however one insatance I can override this, if I include the photo with this code:
<img alt="" border="0" src="##" id="BLOGGER_PHOTO_ID_5428874514942438946" style="cursor: hand; cursor: pointer; float: right; height: 240px; margin: 0 0 10px 10px; width: 320px;" />
However each time I create a post I have to add this manually for each photo because blogger automatically adds this piece of code for a photo that is aligned right as well:
<img border="0" src="##" height="240" width="320" />
But above code won't do it, and it is also a problem for previous posts. I found a part in xml file of my template a part which I believe can be the part setting the sizes of the images, here it is:
img{max-width:100%;width:auto\9;height:auto;vertical-align:middle;border:0;-ms-interpolation-mode:bicubic}
Though I am not sure if it is really that part, and I don't know if how I can change it and that is also because I not good with xml codes.
Any ideas how I can fix that problem?
Thanks.
img{max-width:100%;width:auto\9;height:auto;vertical-align:middle;border:0;-ms-interpolation-mode:bicubic}
The above part, which I was thinking might be the solution, was actually not. While going through the code, I checked all width values that might be corresponded to blog posts and found this part:
.post h1 {
padding: 0 10px;
}
.post img{max-width:100%;width: 100%;
height: auto;
margin-left: -13px;}
.entry-container {
background: #FFF;
position: relative;
margin-bottom: -10px;
color: #444;
font-size: 14px;
padding: 30px 40px 30px 40px;
line-height: 26px;
}
Here, width: 100% was the part forcing all the images to appear full width. My first solution was to set it to width: auto but it didn't help. Thought specifying width or height in xml file wouldn't be necessary so I went ahead and removed the width and height, making the final code like this:
.post h1 {
padding: 0 10px;
}
.post img{max-width:100%;
margin-left: -13px;}
.entry-container {
background: #FFF;
position: relative;
margin-bottom: -10px;
color: #444;
font-size: 14px;
padding: 30px 40px 30px 40px;
line-height: 26px;
}
It all works fine now and all the images went back to original sizes they are set.
P.S. There is another code right below to this one which is exactly same but it controls the static pages, I fixed it the same way as well.
I was facing the same problem.
I found out the img class as suggested by #H.Aziz.
.post-image img{
max-width:100%;
height:auto;
}
But there was no width attribute at all to delete.
The way I accomplished the goal was by changing max-width:
.post-image img{
max-width:50%;
height:auto;
}
This reduced the size of image to the appropriate one. However, a new problem that arose was that the image was shifted to the left. To fix this, the final change I made:
.post-image img{
display:block;
margin-left:auto;
margin-right:auto;
max-width:50%;
height:auto;
}
A common trick to bring an image to the center of the parent div is make it into block of its own and apply the margin properties to it.
I want to give space between span and div which is as follow
<span class="headingUserName">JAVA MAN</span>
<div class="home-middle">
Content
</div>
in My external css file
.headingUserName{
font-size: 24px;
margin-bottom: 10px;
}
this is not providing space between div and span.How to resolve this.
try this
<style>
.headingUserName{
font-size: 24px;
}
.home-middle
{
margin-top: 10px;
}
</style>
Setting the display to block will surely do what you are looking for. But it also will make your span element to cover all the width, because block elements has by default a 100% width.
If you don't want this, you can use inline-block instead. Your element stays with an automatic width but you can set it to have margins as in block elements.
.headingUserName{
display: inline-block;
margin-bottom: 10px;
}
Add display: block to the span styling
DEMO http://jsfiddle.net/kevinPHPkevin/Ep8G8/
.headingUserName {
font-size: 24px;
margin-bottom: 10px;
display:block;
}
This should work
.home-middle
{
margin-top:10px;
}
JS Fiddle Demo
or as Vector's Solution
.headingUserName {
font-size: 24px;
margin-bottom: 10px;
display:block;
}
If you really wanted the Span to provide the spacing, for some reason, you would have to set its display property to block, like this:
.headingUserName{
font-size: 24px;
margin-bottom: 20px;
display: block;
I have links with bottom border, in CSS like this:
a {
display: block;
width: 100%;
padding-top: 8px;
padding-bottom: 8px;
padding-left: 30px;
border-bottom: 1px solid #EEE;
}
I have problem because the 'padding' value is getting added to the width value and border bottom is too long:
http://screenshooter.net/9186066/advygxa
Have you any idea?
Padding and width have a hard time coexisting; simply remove your width declaration. Since your anchors are block, they will automatically take up 100% width (including padding):
a {
display: block;
padding-top: 8px;
padding-bottom: 8px;
padding-left: 30px;
border-bottom: 1px solid #EEE;
}
Now it should take up a 100% width.
That's what padding does. Look at how the layout model works: adjust accordingly. If you're looking for a flexible solution then you need to remove the padding from the a element and add something like an internal span that has the proper margin within the a and other dials adjusted accordingly.
Add this to the div that contains the links.
overflow-x:hidden;
Demo: http://jsfiddle.net/calder12/zXmG3/
It's working fine, check http://jsfiddle.net/GjMQe/
a {
display: block;
width: 100%;
padding-top: 8px;
padding-bottom: 8px;
padding-left: 30px;
border-bottom: 1px solid #EEE;
}
Perhaps you forgot to include a reset.css file in your template.
Check Normalize.css
I have created a grid of thumbnail pictures, that when hovered over, the picture dissapears a block colour is shown with the title of the image on. but In internet explorer instead of the pictures and text appearing within their set thumbnail space they all cramp up in the left corner.
The image and title are stored within the box/ category-widescreen div, this is a dynamic code for wordpress.
Any ideas?
#page-wrap {width: 1060px; padding-bottom: 40px;}
.box { margin: 20px; float: left; }
.category-widescreen { width: 400px; height: 229px; background: #FF0000; }
.category-widescreen a{text-decoration: none;}
.category-widescreen h1{font-size: 30px; color: #FFF; line-height: 34px;}
.category-widescreen h2{font-size: 26px; color: #FFF; line-height: 30px;}
.title{position:absolute; top:14px; left:14px; z-index: 0; padding-right: 14px;}
.category-widescreen img { max-width: 400px; max-height: 229px; float: right; padding: 0 0 2px 10px; z-index:1; position:relative;}
Thankyou for any help!
Too vague! As the other guy suggests, give the basic html structure. However, some observations:
Aren't the font sizes used a bit too big (30px and 26px)?;
title{position:absolute; ...} .... make sure that the parent is styled with position:relative otherwise it will become a mess;
how about floating? Are you making sure things are floated in the right direction?
Hope have helped or at least opened your eyes wide-open! ha ha ha ...
You need to set position:relative to your posts so that the absolutely positioned elements know where to follow.
Try this:
.post {
position:relative;
}
here's an image of whats going on:
http://imageshack.us/photo/my-images/217/ffbug.png/
here's my code:
select {
width: 150px;
height: 40px;
padding-left: 10px;
}
in chrome and firefox, it vertically-aligns the select values perfectly. in firefox, the values are stuck to the top of the select.
i've tried adding vertical-align: middle and line-height: 40px, both of which changed nothing.
Just use padding-top: 10px; padding-bottom: 10px; on that element. Your text will be automatically centerd.
i decided to put it in a div with this code:
.search li select {
padding: 0px;
margin: 0px;
}
.search li div {
height: 32px;
padding: 10px 10px 0px 10px;
background: #ffffff;
}
the div background is same as the select background.
its pretty well centered in FF IE and chrome, only thing is the arrow is inside the padding as well...oh well...sometimes you can't win i guess.
Try this CSS code:
#-moz-document url-prefix() {
select {
padding-top: 13px;
}
}
This should work, when you want multiple browser support.