When I use this code on forums the top image(background) always shifts left instead of staying centered. The bottom image(floating text) works as is.
<div style="background-image: url('https://i.ibb.co/TmkSL8m/bg7.jpg'); color: #000000; background-color: #000000; background-attachment: fixed; text-align: center;"><img src="https://i.ibb.co/L6zQY0S/name96.png" /></div>
tried setting the width to auto but it locks the background image in place and doesn't allow the text to float over it.
Related
I'm trying to put text inside a box in the shape of a corner, with no top or left border, as shown in the image below
.
I've tried many CSS tricks by changing the color of each border, so I chose transparent for the left and top borders, but here's the issue i want to add :after for the same box so i cannot add it since i have a transparent borders so the extra border thingy will not look like the image .
border-color: transparent #0ff #f0f transparent;
I just discovered there is a proprety called "border-style" this proprety solved my problem please check out the code :
.box {
background-color: lightgrey;
width: 300px;
border: 7px solid green;
padding: 50px;
margin: 20px;
border-right-style: none;
border-top-style: none;
}
Is there a way to fix the vertical layout of the PagerSettings when displayed at the bottom of a grid?
UPDATE: I am working on build 19.110.0013
I am trying to add numbers to the bottom of a grid using the PagerSettings tag described in the post Add page numbers to the bottom of Process Shipments grid. When I set the PagerVisible to bottom the numbers display vertical, but if I set the PagerVisible to top the numbers are properly displayed as horizontal.
<ActionBar PagerVisible="Bottom" DefaultAction="cmdItemDetails">
<PagerSettings Mode="Numeric" LinksCount="5" />
</ActionBar>
I could not reproduce that behavior in Acumatica version 19.106.0020 so I manually tweaked the CSS in order to reproduce that glitch.
Setting 'display: block' CSS property on GridPagerLink CSS class reproduces the same rendering.
In file '\App_Themes\Default\00_Controls.css' it is set as 'display: inline-block;'.
Inline option will make them stack horizontally so I don't have this glitch on my side.
Which exact Acumatica version are you running?
Use browser HTML inspect element feature to inspect the GridPagerLink.
Does it look like the default style below?
.GridPagerLink {
display: inline-block;
color: RGBA(0, 0, 0, 0.87);
text-decoration: none;
font-size: 15px;
font-weight: bold;
padding: 5px 10px;
height: 18px;
border: solid 1px transparent;
}
I have 2 buttons in a screen in Ionic 2, and I want to align them both together (one on top of the other, but together) in the middle of the screen (horizontal and vertical alignment).
I want to use ion-grid, no paddings, margins, floats or percentages.
So I have this
<ion-content>
<ion-grid>
<ion-row>
<ion-col text-center>
<button>button 1</button>
</ion-col>
</ion-row>
<ion-row>
<ion-col text-center>
<button>button 2</button>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
With <ion-col text-center> I can align them to the center horizontally, but for vertical alignment I can´t see anything that I can apply to , so I tried this:
ion-grid {
justify-content: center;
}
But nothing happened.
I checked and this is being applied to the page, but for some reason it doesn´t work.
Any ideas?
Use this:
ion-grid {
height: 100%;
justify-content: center;
}
You can use the code below in a column (e.g.: flex-col) inside ion-grid to align centered vertically and horizontally:
.flex-col {
display: flex;
justify-content: center;
align-items: center;
}
You can use a bit more of Ionic if you do it this way, and then just apply the height in your Sass files. You also don't need the ion-col. Also, the classes have changed and are just .grid and .row
Markup
<ion-content>
<ion-grid>
<ion-row justify-content-center align-items-center>
Horizontally and Vertically Centered
</ion-row>
</ion-grid>
</ion-content>
Sass
.grid, .row {
// Force grid to fill height of content as this is not set by default
height: 100%;
}
I am new to CSS and recently reading the specification and having some problems in understanding the vertical-align property.
<div style="border: 1px solid black;">
<span style="border: 1px solid red; padding-left: 1px; line-height: 30px;"></span>
<span style="border: 1px solid red; padding-left: 1px;"></span>
<span style="border: 1px solid red; padding-left: 1px; line-height: 40px;"></span>
</div>
<div style="border: 1px solid black;">
<span style="border: 1px solid red; padding-left: 1px; line-height: 30px;"></span>
<span style="border: 1px solid red; padding-left: 1px;"></span>
<span style="border: 1px solid red; padding-left: 1px; line-height: 40px; vertical-align: top"></span>
</div>
<div style="border: 1px solid black;">
<span style="border: 1px solid red; padding-left: 1px; line-height: 30px; vertical-align: bottom"></span>
<span style="border: 1px solid red; padding-left: 1px;"></span>
<span style="border: 1px solid red; padding-left: 1px; line-height: 40px; vertical-align: top"></span>
</div>
Above code creates 3 div, each of them contains 3 empty inline boxes (spans):
In the 1st div, everything seems fine. All the 3 spans are aligned to the baseline of the line box.
In the 2nd div, after I set the vertical-align property to top for the 3rd span, the first two spans are moved up. And I get lost from here, I don't understand why they will be moved up, according to what rule.
The 3rd div is even more wired to me. I set the vertical-align property to bottom for the 1st span, and it causes the 2nd span to move slightly lower than the 3rd span (this will be noticed when zoom in enough).
The thing I can find in the specification says below, but what exactly are the multiple solutions? Could anyone shed more light on this?
In case they are aligned 'top' or 'bottom', they must be aligned so as to minimize the line box height. If such boxes are tall enough, there are multiple solutions and CSS 2.1 does not define the position of the line box's baseline.
I've also created a fiddle. Please run it in Firefox or Chrome if you are interested.
vertical-align is mostly used for inline element for example img tag, which is commonly set to vertical-align: middle; inorder to align correctly within the text.
Demo (Without the use of vertical-align)
Demo 2 (Using vertical-align)
Ok, so that was a general idea of how vertical-align works with a value of middle.
So, first lets see what are the valid values for vertical-align property.
Credits : Mozilla Developer Network
Now, lets solve your doubt step by step..
In the first example, everything's fine according to you but the answer is no, you are applying line-height to the span which varies, but the fact is line-height is actually not applied as the way you think...
Line height is actually not getting applied
Make it inline-block and it will be applied
You can read this answer for more information, that why using line-height on span is useless.
Moving on to your second doubt, you are having line-height on first span, second span but not the third span so what's happening here? As span is inline with the text and anyways line-height won't play the role there as I previously explained, they are happily aligned vertically with the text, whereas when you use vertical-align: top;, it doesn't move the other two boxes above that, instead it aligns to the top of the text.
See how the vertical-align: top; aligns at the top of the text
Coming to the last example of yours, in here, first span element is aligned to the very bottom as expected, well its correct, moving on to second, you said it's slightly in the lower than the third, because it is not aligned at all, line-height is what it makes that element align vertically center and last, moves a bit to the top, which is infact aligned to the top.
Lets make them inline-block and see how they actually behave..
So I hope you got the difference between all the three examples, but its necessary for you to understand the line-height property and inline-block property as well, also don't forget to refer the answer I shared.
I'm currently developing a site which requires headings as such:
My initial idea was to do this with border-bottom, but how would I limit the width of the border so that it doesn't go all the way across? The border needs to stop when it gets to the text.
Is this possible?
h1 {
background-color: #fff;
line-height: 1;
margin: 0;
display: inline;
position:relative;
z-index: 1;
}
h1:after {
content: '';
display: block;
border-bottom: 2px solid;
position: relative;
z-index: 0;
margin-top: -7px;
}
The length of the border is decided by the size of the element it is bordering. You could create another <div> inline with the text with border-bottom: 1px; and the other borders set to 0. You could then change the margin or width of the <div> to alter the length of the line. Note that you'd have to set a width, because an empty <div> has a width of 0 by default, so won't display.
Another possible (but not recommended) way to do it would be to use a <hr> but these are not well supported in HTML 5, so I would choose the first method personally.
A solution I can come up with is to give the title the same background-color as the page's background, and then to either transform: scale() the title up so that it overflows with the border of its parent, either scale the parent down so that its border hides behind the title's background.
See here for an example:
http://jsfiddle.net/WjRqC/1/
Oh, also, scaling can be replaced by making the title position: relative and moving it downwards a few pixels (and giving it a bit more vertical padding if you don't want the text too close to the line). Actually this is probably a better idea than scaling, because it's not CSS3, so it's more compatible.
Lookie here:
http://jsfiddle.net/7affw/1/