I'm currently working on a website. One of the things it will do is allow the admin to post news. all my news divs are fixed in height and width. PHP queries the database for the text and cuts it at 500 characters lenght, so the text doesn´t exit my div.
Of course this is not the best approach since if I use all caps, 500 caps characters take more space than 500 normal ones.... If I also use the /br/ tag to change lines, that is also a problem, since php ->(i think) won't count that as empty spaces...
As the title suggests... I would like to know if there is any way of limiting the ammount of text in my div by using it's height....
Thanks in advance!
Have a look at http://www.w3schools.com/css/pr_pos_overflow.asp.
I thinks the best way is to use css in combination with a php function that limits/cuts the string and removes any html tags and tabs.
The css:
min-height: 100px;
And a php function you could use is:
http://php.net/manual/en/function.strip-tags.php and http://php.net/manual/en/function.substr.php
Related
How to vertically align text next to image in contentful.
Please check the following link https://imgur.com/a/F4sqXya
There are several approaches to this:
You define some CSS to center the image. this works when you have, let's say, articles where the images are always on the same position and should look the same. (display: block; margin: 0 auto; or something should do the trick)
If there are several images which will have different looks it's recommended to devide the big markdown blog into several content types and entries – creating a set of building blocks so to say. This way you could have a page content type which references text blocks and images which are all configurable. This approach is called "Topic and assemblies"
The third approach I can think of (not recommended though!) is to add some HTML to your markdown to style the images like you want it. This has the big downside that you loss cross-platform compatibility.
In either case, Contentful only handles the content and you have to make the centering happening in your site/application yourself.
Hope that helps. :)
I have a page where we are using SVG to render a sequence diagram. Some of the data represented has the potential to occasionally be very long, so I would like to limit the width of TSPAN elements and provide an ellipsis, while allowing the user to hover over the text and show the full text.
Initially I tried to use CSS in conjunction with the text-overflow property by setting the value to "ellipsis" which is the exact behavior I am looking for, but it doesn't have that functionality available (big bummer) is there any other way to limit the length of text and allow the full text to be shown on an action such as hover?
Create the tspan with the ellipsis text and then have a <title> element with the complete text e.g.
<tspan>Really really...<title>Really really long text</title></tspan>
I'd like to figure out how I can get my text to move along with the browser. Right now my site looks like this: http://simplysweet.shukuya.com/test/. The divs are absolute, but I've tried relative, static, etc... and can't seem to get the text to move along with the image/layout.
To have your text scroll with the rest of the page you simply need for your divs to be relatively positioned (the default.)
Setting the width of your div to 100% will make it occupy all of the available space in the layout just outside that item, (and so-on up to the root of the document.)
If you want to maintain a "centered" block that is left aligned, use:
margin: auto
on whatever div is just beneath the root of the document.
Use min-width property along with positioning for both div
I have, for a while now been using a reset.css file to reset everything before I start laying out my html designs.
The reset is great in that it allows one to better control attributes such as margins, padding, line-height etc for all browsers. In essence the flatliner of css files.
Now to get the heart beating again, I need a "set.css" file. So what I have done is created an Html file with all the possible elements on the page to then go and set the padding, margins etc of the h1, h2, p, td etc.
I need some help with this as I am not sure what the defaults normally are. I had a look at the Firefox default css file that's used to generate all these attributes on a raw html file but it doesn't cover all the scenarios I could come up with when developing a site.
Here's an example of the set.html file (a work in progress) which can be used as a lorem ipsum filler to add to your first page in a cms and then to style with a "set.css" file
http://www.sixfoot.co.za/labs/Html-Css/set.html
I'd appreciate it if someone knows if something like a set.css file exists or if someone could tell me what the general padding and margins are in cases like this when you have reset the css.
Cheers,
James
This sounds similar to the YUI's base file which applies formatting to the main. It was created to be used with YUI's settings for fonts and grids but is still applicable for general use.
I guess when setting these values, if not using a 3rd party file, I pick something which is meaningful to the site I'm styling. A tricky job though as I find CSS a pain to work with.
http://necolas.github.com/normalize.css/
Seems to be a better option
There is no "standard", that's why the reset exists.
I've never heard of a set css file, and while I understand the point of it, rather than creating two separate files it should be merged into 1. It is inefficient to have rules listed twice.
The only thing that I always push is 7px of padding on the button of paragraphs.
I also like: padding: 0 10px 7px 0 on td tags.
I need some help with this as I am not sure what the defaults normally are.
CSS defines a default stylesheet: Appendix D. Default style sheet for HTML 4
Having some trouble with the CSS alignment of text generated with #font-face. For some reason, there is a ton of extra space visible at the bottom of each letter, stretching the text's containing box too far downward.
If you inspect the text on this sample page, you can see what I mean.
Have googled and inspected a bunch of other pages, but this one's got me stumped. Any chance someone could help?
Thanks!
For starters, the computed line-height is 65px, so you could always define it to be 60px if you wanted.
However, most of that space is actually just required by the font you chose. Though you've converted it to uppercase with your CSS, the font still needs room to render characters that draw below the text's baseline. Try adding a comma to that header's text, and you'll see it's actually pretty huge and should fill up most of the empty space.
You are using <h2> tag there.
for the h tags use the CSS style's margin and padding to remove those extra spaces.
<style>
h2 {
margin:0;
padding:0;
}
</style>