So I have a newsBox with float left that contains a picture, title and small text that contains small segments of news. I have 2 news boxes in every row, and I want every 1st newsBox to have an extra margin-right with 20px.
I have used .newsBox:nth-child(odd) { margin-right:20px; } in the css, and it works fine in Chrome but doesn't render in Dreamweaver CS6.
Is this not an officially supported rule? Or there is another more "clean" way to do this?
Thanks in advance!
The Dreamweaver design view sucks, it usually never gives an accurate representation of how things look in a real browser.
As an alternative and a helpful answer to your issues you can try the live view from dreamweaver that was implemented after CS5.
Here is a video explaining how to set it up.
http://tv.adobe.com/watch/creating-time/dreamweavers-live-view-helps-you-save-time/
As a final note, try not to use the design view and tey to get more into the code... once you get used to it you can read the code and visualize almost exactly (usually always better than design view) how things look. So please do not trust design view in dreamweaver for development.
Related
If you look at the attached screenshot you will see a design I have created for HTML email.
Screen Shot
In all of the tests I run, the following are on one row next to each other.
The logo, "VIP Edition" and the View all Deals button.
In Safari the VIP Edition and the View all Deals fall down a row and the logo centers. Can anyone explain this behaviour to me? I'm struggling to understand why it doesn't happen for the rest of the email, and I can't think how to phrase this question to find my answer.
It would be great to see your code, even if just for that section.
But I have seen this before and I know that when I see this it's usually when I have two aligned tables with an align=center on the parent td.
So for example in your instance, the VIP Edition logo would be in a left aligned table and the View all deals button would be in a right aligned table.
Make sure the td housing both of those aligned tables does not have an align attribute set.
Taking that off always fixes the issue for me.
If you need to center elements for mobile, set the align=center further up
I ended up starting again, I can only assume that it was something to do with the widths of the columns. I found this post which was useful.
In the frameworks section I decided to try a few. The first I tried was Zurb Foundations Ink, because I have used Zurb Foundation in the past. However, their supported clients wasn't comprehensive enough for my liking. They make no mention of the differing browsers, and in my opinion that matters. I've done a lot of testing in the last month. I will test it more thoroughly when I get time, at least they offer a version that works responsively in Gmail which doesn't use media queries.
Wanting something that worked on all platforms out of the box I tried Email on Acid's responsive template. It looks great, and I use Email on Acid to test, so I thought they would have it solved. Their website is full of useful tit-bits. However, their template didn't work in Safari and had the drop down issue I had initially started with. They don't claim it works there, but being as they offer a testing service, I had hoped it would work on all the platforms they use.
Then I moved onto AntWorts solution. That worked in my initial tests, and I found it remarkably easy to adapt to my needs, eventually adding additional columns using their methodology which was clearly explained in one of the templates.
My final template has 1,2,3,4 column grids which work responsively part fluid part adaptive. My advise to people in the future is to start with this boilerplate, I redid my whole template from scratch and it took half the time I have spent trying to troubleshoot a different boilerplate to start with.
I am working on an ePub3 and I created an interactive document that requires the full page to really look how it should. Unfortunately when I compile it with Readium to test the functionality in the ePub it shrinks it to one half of the viewport and leaves the other half empty (because it is, after all, a book).
I googled around and messed with the CSS and DOM and I cannot figure out how to remove that extra, unused page and make the one page with the interactive app take up the entire viewport.
Does anyone know if this is even possible? I know it might be pushing the standards of the ePub, but this app is a huge part of the ePub.
I appreciate any advice that can be given!
This is a reader-specific display function (not an ePub3 function), so you won't be able to control it. It is similar to what happens on most tablets if you turn them to read in landscape mode... The thing is, many readers don't read in this mode but some do, and you wouldn't want to take that ability to choose away from them.
If you are doing this in a reflowable book, I would suggest having the App be on it's own fixed layout XHTML page so that it is full-screen (on tablets) at least. You can do this by creating the new XHTML page and putting a link to it.
The best visual solution I can see in Readium isn't really a solution, but you should just go to "settings" and read in single page mode and possibly have a tooltip recommending that to readers when they get to the app.
Best of luck!
I am trying to put together a simple portfolio site, and have implemented a basic responsive design into the CSS as well (at the very bottom of it), and it behaves just fine - shrinks the 5 columns down to a single column and hides a few elements when I resize the computer browser. But on iPhone/Android browser it doesn't make any difference.
Here is the page in question -> Sample Page
And I can't figure out what the issue is... as in, this should be fairly simple to do, but apparently it's not, and now I'm losing sleep over it... so might as well ask here.
Have you [also] consider the use of viewport meta-tag? Just check This.
I tried loading the site but it seems like your custom js file is not found(404 error).
I'm very new to web design and just made a simple one page website for my iOS app here. I now want to make it so that when this page is opened on an iPhone, the whole thing is zoomed out enough because right now the right half of the page doesnt show. From my understanding and research so far, I need to use media queries and create a separate CSS stylesheet for mobile. However I feel like for such a simple page there should be an easier solution with some plug-and-play code. Something consisting of a simple conditional-type statement checking if the user is on mobile, and if so, gives the new dimensions of the page. I don't really know anything except for the very basics of html, css, and javascript when it comes to web development, so simple explanations would be highly appreciated.
I think you have to go for http://www.jquerymobile.com it is very good framework for mobile web.
Instead of creating a mobile-specific page you might want to experiment with the viewport meta-tag. The tag isn't used by desktop browsers, but it scales the size of what you see on a mobile device's screen. You can also check out Apple's guidelines for more information.
Could you please show me a website (preferably, a forum) that has perfect liquid layout (that does not break at all if the browser window gets resized)? Would be nice to see...
Once again, where on the web can I see a website that doesn't become a mess when squeezed down and doesn't cap its own width when enlarged?
Have you ever been concerned about that? Or a fat lot you care? 'Cause I see that popular websites (even portals, I am not going to name any) have this problem (as I consider it to be).
Well, I'd like to see what your code would be for an avatar on the left and some user's info on the right. Please see this picture to figure out what I mean: savepic.ru/780576.png
The main reason why this is broken in many places is that it's broken at the fundamental level: CSS doesn't really support fluid layouts, there are still corner cases even when you start using tables for layout. On top of that, every browser and every version of every browser does CSS a little bit different.
The net result is that even highly paid web designers can't get it right (or someone would have come up with a solution by now and every would be using that).
The only hope is that browser developers finally agree to make their products compliant to the Acid3 test. But as I write this, my Firefox 3.5.1 gets only 92%. WebKit (Safari and Google Chrome) and Opera go the full 100% (see this article).
I personally have given up on this and I won't revisit this topic until IE 7 drops below 5% in the popular usage charts which will probably take five to ten years (IE 6 is dead as a log but still gets 12%).
Smashing Magazine have a couple of posts on fluid layouts. Try searching around there to find good examples and explanations.
One of my favourite from their examples is Vivabit.
Personally I haven't been to concerned about it yet, but I probably should, with the rise of netbooks and mobile browsers. I still believe you should serve a different layout to mobile browsers, though, but it's interesting to look at possibilities of serving the same to all browsers.
Well, Slashdot has a completely fluid middle column (down to some minimum which is pretty small) with fixed-width columns to left and right. As far as I can see it doesn't cap its width (tested on my 1900x1200 monitor).
It's not a forum on the main page, but the comments to articles are kind of like it. It doesn't have the avatar example you're looking for though :(