I am looking of a good example for dynamic 3 columns layout like this one from Google Search. I have see, that if the layout fits to every browser resulution. That menas, there is never a scroller if the resulution is 800, 1024 or >1024 . What kind of solution, can I use to become such effect? I have see, that the center content is floating, but how is it possible to fit for every resolution and is there a minimum of the width of the center, because if the browser goes smaller and smaller, there is a point, where the scroller is coming.
It will be great if anyone can redirects me to an similar example, please! I am interested in centered design, not left oriented like Google!
There is one CSS feature..
Here it is Google HTML5 site, where included this feature... Just try to change width of browser and scrollbar will not appear.. because css file has styles like
#media only screen and (min-width: 641px) and (max-width: 800px) { /* styles */ }
i.e. for some resolution you have some other styles..
take a look they css
Have a look at the CSS float tutorial, which I refer to every time I want to do a multicolumn. http://css.maxdesign.com.au/floatutorial/
Related
i put iframe of Bandcamp embeded player on my website, but the background-image of my track look blurry.
i made this cover in Illustrator in 2400x2400 and i exported in Png24.. When i look the background image in Bandcamp the image seems in good quality.. i dont understand what to do to view the cover in my website in good quality.
you can see it in https://mauditemachine.com/
i tried to see what happened if i change the background-image to 1 instead of 8
<div id="art" class="item" style="background-image: url("https://f4.bcbits.com/img/a2126636077_8.jpg");"></div>
i see a better quality but i cant force it..
when i tried to change the size to 400x400 in the iframe code i have better results but i want to have 300x300 sizing.
i just change iframe parameters to select 100% for width and height.
In my Css i put width and height to 400px to a container above and for responsive design i put 300px
How did they do the text graphic set on an angle in TheDailyBeast.com? Go to this link: https://www.thedailybeast.com/msnbc-host-lawrence-odonnell-accuses-cnn-of-helping-trump-spread-lies?ref=scroll
Notice just under the headline, a subquote is positioned on an angle? It's not a graphic. It's live text. How did they get the text to be on an angle like that without making a graphic? And is their site Java? CSS?
For issues like this, inspect the code on the page in question, this is a simple css rotation transform. When you inspect the HTML, you will find it's quite simple:
<div class="Rubric__content">‘WE DON’T BRING ON LIARS’</div>
Then have a look at the styles in the dev tools:
.Rubric__content {
transform: rotate(-3deg);
}
So this plugin clearly has transparent background and rounded corners:
Even when you scroll down on the page the background will scroll behind it, so it's unlikely any trick with captureVisibleTab is being done.
So I'm wondering how this was achieved, because any other SO-articles seem to suggest it is impossible, however they are pretty old:
Make Chrome Extension Popup Window Transparent
How to make border radius in popup chrome extension?
Curved corners on a popup.html?
I'm curious what kind of hack they have used, or that I'm missing something obvious in the docs.
For me at least simply setting background-color: transparent; on any element in the popup.html does not do anything.
Have they used a trick by loading 2 separate html files with an offset? That still doesn't explain the rounded corners though.
As #woxxom pointed out, the 'popup' is rendered on the page itself and not in a popup.html.
You can see its offset from where a plugin would normally be shown.
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}
Another question about SVG style transitions... :)
This time I'm trying to transition the font-size on a text element. It works fine until I increase the page zoom in Chrome. Once I do that it appears that at the start of the transition it sets the size down to the original zoom size before transitioning to the correct outcome size. The result is that I see the font-size flick smaller for a split second before growing larger.
With the default zoom the transition looks smooth. Other browsers don't seem to have this issue.
Wondering if I can try my luck again with some style-setting trick that will work more reliably across browsers...
This is happening because D3's style transitions use getComputedStyle to retrieve the starting value to be interpolated. See here for more information. When WebKit's full-page zoom is being used, this will return different starting values for the transition. This disparity is limited to certain cases including font-size, which is why you probably won't see it elsewhere.
In fact, after .style("font-size", A), retrieving via .style("font-size") isn't guaranteed to return the value A that was set when a full-page zoom is in use.
I have used the following workaround for this in the past:
.styleTween("font-size", function(d) {
return d3.interpolate(
this.style.getPropertyValue("font-size"),
d.size + "px"
);
});
This overrides D3's use of getComputedStyle and retrieves the current font-size style directly (and assumes there is a font-size already set e.g. in your .enter() selection).
Again, my word cloud experience came in handy. :)
Browser page zoom is buggy in conjunction with SVG. You can fix the zoom level with CSS, with something like * { zoom: 1; }, but that causes other inconveniences for users. You could attempt to workaround the bug in JavaScript, but I think that would be a lot of work.