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. :)
Related
I'm talking something like this website - http://www.flipkart.com
I can make it stay relevant to the layout, but the layout in the above given website simply stays in place, as if we're zooming on an image. HOW could that be replicated?
Thanks!
This is a non-responsive design. You are advised to avoid building websites that way. However, to build a website like the one you referenced, you would use pixels to set the size of your CSS elements instead of %.
Something like that:
.list-item{border-right:solid 1px #ccc;padding:15px 12px 11px 12px}
I'm kicking around an idea for a side project and am looking for advice on which direction to go in terms of technology. I've done some research already, but am still fairly confused as to what the realistic options are.
I'd like to make an interactive map based on a fictional world (think Middle Earth), including a timeline filter and a details section for additional information on an event or location.
Desired Features:
map on the left
details pane on the right
timeline slider/filter at bottom
Territories
color for political affiliation
displays details in details pane
labels
labels for cities
Hurdles:
Get a clean map image to work with
Map image into intermediate format (svg, geojson, topojson?)
Display map on webpage, style map, add animations, etc
Technologies
SVG
I'm pretty sure I could code all of this in SVG using events and boundaries. I've already been able to create SVG Paths from the image using GIMP, so converting the map into an SVG file seems plausible.
The issue with doing it this way is I would end up doing all the work the hard way when there seems to be lots of frameworks for this kind of thing already.
Kartograph
La Bella Italia is a very nice example and would serve as a good starting point. I love the trade route animations and the border styling with the glow filters.
The bonus here is that I know I can make an svg map, which is all this would need to get up and running.
My issue here is it doesn't seem like Kartograph is as rich of a platform as D3.js. I'm not sure if I can double dip and link some D3 stuff with the kartograph events. If I could, that might be the solution.
D3.js
The sliders, animations(hover and selection), and topojson seem like they would be perfect. But the main issue I have here is getting my image converted into a GeoJson format. From what I can tell these formats are strictly for Real World maps, using longitude/latitude.
So there you have it! I'm hoping there is some good news on how I might convert my map image into topojson so I can enjoy the benefits of D3.js. If not, I suppose I could just try kartograph and wire the events up with D3 controls.
Thoughts?
I'm currently writing my master thesis and I have the same topic like you had these days. I called my project Arda Maps. Feel free to ask me anything if have techonology questions.
I'm using the following frameworks/tools in my project:
QGIS
JQuery
D3.js
GeoJSON/TopoJSON
TimeGlider
ive used an online srpite service http://spritegen.website-performance.org/ but i want to know how to make them by myself.
How can i save an image that it should be so small but when used on my web site it comes out normal size?
Sprites aren't about making the image itself small, it's about decreasing filesize by packing several images into one.
Take a look at Yahoo's icon sprite. Notice that they have all their section icons stacked vertically in one large image. They then use CSS to position the background to only show a small window of the sprite image, thus giving you just the icon.
In the end, it's up to you how you arrange your sprite. Check out the bottom of Amazon's sprite.
Either way, hopefully that helps gives you a better idea of the concept of sprites.
From the very site you link:
CSS sprites are a way to reduce the
number of HTTP requests made for image
resources referenced by your site.
Images are combined into one larger
image at defined X and Y coorindates.
Having assigned this generated image
to relevant page elements the
background-position CSS property can
then be used to shift the visible area
to the required component image.
So there is nothing magical involved: you simply need to pack all your pictures into a single giant image with your favourite graphics tool and insert them as CSS background. Just look at this CSS sprite by Google:
The website I am creating has a fairly large title text for its banner. Using a plain font gives it a very jagged look, but it seems like an anti-aliased image would be a fairly large download. Which way would be the best choice, or is there a better method for large titles?
Here is the banner with pure text. Scaled down it is not as noticeable, but full size it's about 600px across. Open the image separately for the full effect:
Some fonts are better than others where the jaggies are concerned. That being said, a no-displacement text shadow the same color as the text with a blur of one pixel will cure what ails ya most of the time:
h1 {
.
.
.
color: white;
text-shadow: 0 0 1px white;
}
I've found that it's just enough to antialias the font, and if I'm not using the text-shadow for any other effects, it's a good solution for anything even reasonably modern. Older browsers (you know who you are) will get the jaggies, but you can't win 'em all.
Image is the way i would go. There are techniques out there for making the image smaller in size without giving up too much in terms of quality. Plus, once it's downloaded the first time, it can be cached so it won't need downloaded again.
I would always advise against using images for text content. Modern browsers have built-in anti-aliasing capabilities, so large fonts look much better than they did a few years back. (And it's getting better by the day.) Also, using markup such as <h1> allows you to retain the semantic value of your title, which is lost when you use an <img> tag or a CSS background-image.
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