I am using this example as a base for my work:
http://www.katehendrickson.com/colorbox/example2/index.html
In the below link, I managed to switch the position of the cboxTitle to the bottom in the CSS as it was conflicting with the controls at the top and did not look good when content forced it to 3 lines. However, when the text is only 1 or 2 lines, a gap appears above it.
http://www.katehendrickson.com/collection/bacci/2.shtml
How can I make it vertical-align but underneath the image for as many lines as I want?
Thanks so much.
Paul Mycroft
The easiest thing to do would be to change the following line from this:
#cboxTitle{position:absolute; bottom:-75px; left:0; color:#000; text-align: left;}
To this:
#cboxTitle{position:absolute; top:100%; left:0; color:#000; text-align: left;}
Related
As the title says I'm trying to use "text-align: center;", but it isn't working on a specific block of text. It works on others, so I'm confused about that. I'm a complete noob lol (have been learning HTML and CSS for about 5 days), and decided to use my knowledge to get an easy 100 on the project. Bear with me, please. It's that's causing the issue.
CSS:
p4 {
text-align: center;
}
HTML:
<p4>
Over here, we have an economy consisting<br> of mostly fishing, shipbuilding, wheat<br> growing, and fur trapping. There are<br> many different economic opportunities.
</p4>
(Sorry, I didn't know what to really put, so you should probably check out the complete code, it's near the bottom: https://codepen.io/fishstick_god_/pen/ZEWjLyX)
text-align: center aligns the text to the center of the element, in your case the p4 element isn't the full width of the page so its only centering to the width of the content. Easy fix is to add display: block to your p4
p4 isn't a valid HTML tag, so the browser isn't clear how to display it. You should just use p as the tag for all instances of paragraphs. If you want to style one of those paragraphs specifically and differently from the other paragraphs, then also include a class attribute with the tag, like this in the HTML:
<p class="special">
Then, in the CSS, you create a class selector, like this
.special { text-align: center; }
You can place that same HTML class on any text-containing tag (like p, h1, li, etc.) and it will center those.
Note that you can't text-align: center; any tags that don't have a default display of block, like an a tag or an img tag. Also, you can't center structural tags (like div, header, nav, etc.) with text-align: center; because, well, they aren't text. There are other choices you can make in the CSS to center those.
text-align works on so-called block level elements. Like div or p. See, e.g., https://developer.mozilla.org/en-US/docs/Web/CSS/text-align
p4 does not qualify. Try plain p:
<p style='text-align: center'>Hello World!</p>
I have a component with 1 Grid Layout
<GridLayout class="gridDate" columns="auto, auto" >
And in this Grid I have 2 Items. For sure each item take full place of column but item is so big it is for that I reduce them like this transform: scale(0.7); for both. But my problem it is I have a space between them and I would like tou know how I can handle them (for example I would like to move item 2 on the left side of the second column.
Best regard and sorry for my English.
columns="*,*" would take the full width of the screen, which you can then adjust with css margin and padding styling.
I did something like this with columns="*, *" and a margin 0 on red part (
background-color: red;
transform: scale(0.7);
margin-left: 0px;```
but 0 changes
[Image of Gridlayout with components][1]
[1]: https://i.stack.imgur.com/r2JHF.jpg
i have unknown number of card i want to ngfor on them and display every two card in one row
<mat-card class="example-card">
<mat-card-header>
<div mat-card-avatar class="example-header-image"></div>
<mat-card-title>{{user.firstName}}</mat-card-title>
<mat-card-subtitle>{{user.lastName}}</mat-card-subtitle>
</mat-card-header>
<mat-card-content>
<p>
The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.
A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally
bred for hunting.
</p>
</mat-card-content>
<mat-card-actions>
</mat-card-actions>
</mat-card>
i'm using angular 5 and material design 6
is there anyway to do that ?
Spent hours on this... turned out to be trivial: simply add float:left to your class CSS. In my case it looked like this:
.example-card {
max-width: 300px;
margin-bottom: 50px;
float: left;
}
Try adding display: inline-block !important to your .example-card class.
I have a big problem with arranging the text from "featured products" in prestashop. First of all, I want the title to be on two lines and centered. I've tried several methods, but with no success. Second, I want "short description" to have more characters and be centered as well.
I've posted below the link to the site and an image of how I would like it to look. Do you know what line should I change or what I need to do?
http://www.3bwine.com/CRISTY/prestashop/index.php
http://oi58.tinypic.com/1608m10.jpg
This is a simple CSS "problem". Css for described changes come from two files.
.../prestashop/themes/default/css/golbal.css
.../prestashop/modules/homefeatured/homefeatured.css - this is not very important but may or may not interfear with some of our changes
To align your title they way you showed on your image I reccomend to add these lines of code to your global.css file ( as you dont have any VERY unique classes on your p or a elements we will be targeting them from a bit further)
div#featured-products_block_center div.block_content ul li p.s_title_block a{
text-align:right;
width: 150px; // set as big/small as you want yoru heading title to display, you can play around with it. This should push the title on two lines, but if your title is chagining all the time in lenght then it might not be useful.
font-size: 22px; // should overwrite the current font-size, make as big/small as you need
}
To align description the way you need add this line to global.css file
div#featured-products_block_center div.block_content ul li div.product_desc a{
text-align:right;
margin-bottom: 20px; // you can play around with it , this pushes your price further away from the text
}
To change the lenght of your short description go to ../prestashop/modules/homefeatured/homefeatured.tpl and locate something similar to this
{$product.description_short|strip_tags|truncate:65:'...'}
And there change the truncate to whatever you need. ( changes the lenght of your " short description"). Number is in characters.
BR's
So, if you add a bunch of inputs to a FieldSet, the last one has round corners on the bottom. In my form, tho, I hide and show inputs inside the form, depending on a Checkbox at the top of the form.
So now, it is possible that an input, tho logically not the last one in the Fieldset, to be visually, and temporarily, the last one.
Does anybody know how Sencha determines which is the last input in the Fieldset? Just looks which one is the last in the array of inputs, or there is a property I can set to an input to tell it that it is the last one now ... ?
There is a CSS rule, .x-form-fieldset .x-field:last-child, which styles the last child of a fieldset to have rounded bottom corners. There is a bit more to the rule to handle edge cases, but any fields that are added (or hidden/shown) to that fieldset will have the appropriate styling applied just based on their HTML position alone.
The appropriate rule is in \resources\themes\stylesheets\sencha-touch\default\widgets\_form.scss:294 in release 1.1.0.
Thanks to mistagrooves post from above, I've managed to fix the problem. The idea is that I programmaticlly set a class "last" to the input I want it t be rendered as last, and then in my CSS, I rewrite the rules for that .last class like so:
.last, .last .x-form-field-container, .last .x-form-field-container *
{
-webkit-border-bottom-right-radius: .4em;
border-bottom-right-radius: .4em;
border-bottom: none;
}
.last, .last .x-form-label, .last .x-form-label *
{
-webkit-border-bottom-left-radius: .4em;
border-bottom-left-radius: .4em;
}
Hope it helps