For awhile I was avoiding upgrading my bootstrap-sass gem in my ruby project because of one single change :
height: auto;
inside the img element.
This property seems to override explicit height properties.
So I have an image that is width 1, height 32 and I use it as such :
<img height="1" width="15" src="/assets/spc.png" alt="">
The height: auto; seems to force the image to display as 15 x 480 (32 x 15 = 480).
I have tried to redefine the img element by adding in-line style in the HEAD of my HTML, (for example img { }) but this does not seem to help.
I am not sure what the appropriate solution is. I use blank images around my site to create specific spaces between other elements. I probably can do this with some other kind of element, like a div or a span?
how about using margin?
you can for example:
.spacerdiv{
height:1px;
width:15px;
}
add the div in the html and define this class to them.
But that's very bad practice. adding redundant elements to DOM
or even better just define margin
You can do it object oriented and define things like:
.margin_left_part_of_site{
margin: 5px 15px;
}
You can then add this class to every element that must have these properties.
A jsfiddle example would allow further help.
The solution I came up with was to use divs. I now use divs such as :
.login-spc {
display: inline-block;
height:40px;
width:5px;
vertical-align: middle;
}
Related
I've been trying to center my YouTube video embed but it just won't work properly.
I've tried flexbox and center tags in html, this is the closest I've gotten, really need some help here
My Code:
CSS
.Video {
display: inline-block;
position: absolute;
padding-left: 15px;
padding-right: 15px;
transform: translate(0,-50%);
}
The issue is your css is wrong. Get rid of the position, display and transform. I'm pretty sure you don't need any of those.
Checkout this jsfiddle I made. I think you're looking for margin: 0 auto;. Make sure the embedded videos are wrapped in a div, then apply the margin. If you already have a margin-top or margin-bottom, then just set margin-left: auto and margin-right: auto;
To use flex-box, this works:
Embed your .video in a .flex-container. Give this .flex-container a width and a height. And add the following properties to the .flex-container: justify-content and align-items set them both to center. Thats it.
Check this codepen. I used joes (above) HTML markup.
Also take a look at the out-commented markup above the codepen.
It's just important that the elements you want to center are direct children of the element the flex property is applied to.
I need to change the container padding. Particularly the width. I tried to find the code in style.css and found this code.
.center{ width:85%; margin:0 auto;}
I adjusted the width to 100% but it took the logo and the menu bar to the left side with itself.
I am searching for the solution to this. Also I want to apply this css code to only one page.
If you're changing the width, you're going to change how that element interacts with other elements, so changing the width is a bad idea.
You should stick to just changing the padding.
.center {
width: 85%;
margin: 0 auto;
padding: 10px; //insert whatever padding you want here
}
If this is affecting the width of the element, then try applying:
.center {
//your existing css for this selector, then:
box-sizing: border-box;
}
If you want to apply this change to one page only, your best bet is probably to add a class to the html element that you're trying to modify and target that class with your new padding.
I want to know how to remove the responsiveness of a images from a specific div. I am not using any framework, just a plain CSS that responsifies.
Here's the code for all the images tags:
img { max-width: 100%; height: auto; }
Some how i dont want these styles on a specific Div ID or Class.
How can i do that?
To reset or remove the CSS that previously set by using the default values for the respective styles
Try this CSS:
#specificDiv img {
max-width : none;
height : auto;}
Reference
(Update): added the img tag... that's needed according to the question...
I have an inline element with a line break in it. It has padding on all sides. However, the side padding on where the line break cuts the element is not there.
This is what i mean:
http://jsfiddle.net/4Gs2E/
There should be 20px padding on the right of tag and left of with but there isnt.
The only other way I can see this working is if i create a new element for every line but this content will be dynamically generated and will not be in a fixed width container so i dont see that working out. Is there any other way I can do this in css without any javascript?
I want the final result to look like this :
http://jsfiddle.net/GNsw3/
but without any extra elements
i also need this to work with display inline only as I want the background to wrap around the text as inline block doesnt do this
Is this possible?
edit, altered the examples to make what i want more visible:
current
http://jsfiddle.net/4Gs2E/2/
what i want it to look like
http://jsfiddle.net/GNsw3/1/
In some cases you can use box-shadow for a workaround.
Move the right and left padding of the element to its parent and add two box-shadows.
The result: http://jsfiddle.net/FpLCt/1/
Browser support for box-shadow: http://caniuse.com/css-boxshadow
Update:
There is also a new css property for this issue called box-decoration-break. It is currently only supported by opera, but hopefully more browsers will implement this soon.
Hope this helps
Found a solution for you, but it ain't pretty :)
Since you can't target the <br> element with css, you have to use javascript. Here's how you can accomplish what you want with jQuery:
// Add two spaces before and after any <br /> tag
$('br').replaceWith(' <br /> ');
Play with the number of elements to acheive your padding on both ends.
Here's an updated Fiddle demo:
http://jsfiddle.net/4Gs2E/8/
Maybe you can use float: left instead of display: inline:
http://jsfiddle.net/GolezTrol/4Gs2E/1/
Usually that is implemented by wrapping each word in an own SPAN which has border.
I just wanted to make css-animated menu for myself. Workaround I have found is to wrap your INLINE-BLOCK element (change in css if necessary, lets call it a span with such an attribute for purpose of this solution) into block element. Then I'm using margins of span as it was padding for the surrounding div.
div.menuopt {
margin: 10px;
padding: 0px;
padding-left: 0px;
overflow: hidden;
width: 500px;
height: 150px;
background: grey;
}
span.menuopt {
display: inline-block;
margin: 0px;
padding: 0px;
margin-left: 150px;
margin-top: 10px;
font-size: 25px;
}
Example:
http://jsfiddle.net/ApbQS/
hope it will help anyone
I'm setting a height of 20px on a <div>, though when it renders in the browser, its only 14px high.
Any ideas?
<div style="display:inline; height:20px width: 70px">My Text Here</div>
You cannot set height and width for elements with display:inline;. Use display:inline-block; instead.
From the CSS2 spec:
10.6.1 Inline, non-replaced elements
The height property does not apply. The height of the content area should be based on the font, but this specification does not specify how. A UA may, e.g., use the em-box or the maximum ascender and descender of the font. (The latter would ensure that glyphs with parts above or below the em-box still fall within the content area, but leads to differently sized boxes for different fonts; the former would ensure authors can control background styling relative to the 'line-height', but leads to glyphs painting outside their content area.)
EDIT — You're also missing a ; terminator for the height property:
<div style="display:inline; height:20px width: 70px">My Text Here</div>
<!-- ^^ here -->
Working example: http://jsfiddle.net/FpqtJ/
This worked for me:
min-height: 14px;
height: 14px;
Also, make sure you add ";" to each style. Your excluding them from width and height and while it might not be causing your specific problem, it's important to close it.
<div style="height:20px; width: 70px;">My Text Here</div>
You're loosing your height attribute because you're changing the block element to inline (it's now going to act like a <p>). You're probably picking up that 14px height because of the text height inside your in-line div.
Inline-block may work for your needs, but you may have to implement a work around or two for cross-browser support.
IE supports inline-block, but only for elements that are natively inline.
Set positioning to absolute. That will solve the problem immediately, but might cause some problems in layout later. You can always figure out a way around them ;)
Example:
position:absolute;
Position absolute fixes it for me. I suggest also adding a semi-colon if you haven't already.
.container {
width: 22.5%;
size: 22.5% 22.5%;
margin-top: 0%;
border-radius: 10px;
background-color: floralwhite;
display:inline-block;
min-height: 20%;
position: absolute;
height: 50%;
}
You try to set the height property of an inline element, which is not possible. You can try to make it a block element, or perhaps you meant to alter the line-height property?
I'm told that it's bad practice to overuse it, but you can always add !important after your code to prioritize the css properties value.
.p{height:400px!important;}
use the min-height property. min-height:20px;