So I learned about CSS grids today, and I had a question that I could not find an answer for. In my site I am creating, I used HTML tables as I did not yet know about css grids. Now that I have learned about them, I can see that grids are more useful and flexible in layout and style.
With the HTML tables, I can make it look perfect in a browser such as Google Chrome, but then I test it in FireFox and it slightly moves the divs around that I made.
If I used a grid system for a layout, and put all the content into that instead of using HTML tables, and then use the fr in css, would it keep the layout the same across web browsers? It would seem that way to me, since no matter what size of browser window or type of browser you are using, the fr keeps the grid to using 100% of the page size.
I apologize if what I am asking doesn't make too much sense. I tried to word it as best I could.
Yes. It will look the same if the browser supports grid layout.
https://caniuse.com/#search=css%20grid
Related
I'm working on a responsive email design and running into some trouble. It partially works but I'm thinking I need fresh set of eyes and help cause I'm not finding the solutions. I think the nav links are what's creating most of the problems but unsure if that's really the problem.
Basically I want the email to be responsive and stack to pretty much a single column with exceptions.
The problems I'm running into are these:
Whole page isn't fully responsive - ( get sidescroll part of the way )
wide ads 565x70 doesn't seem to change size
Top nav with social icons are not stacking properly. I want the left links to not move (maybe center if needed for small screens) but social icons stack below the other links. 3 columns wide preferably just like they are now just want the icons below the menu.
nav menu below the logo - Here I want them to center with smaller screens but also stack in order with 2 columns wide. I've tried fluid text that wraps but it didn't seem to work for some reason.
Any help would be greatly appreciated. I've tested and tried other resource items but seem to be failing with what should work according to the other resources.
Below is the link to template.
http://bit.ly/1u67HDG
thanks.
Well, you will need a responsive css. I am a big fan of Twitter Bootstrap. You will design your entire email as a normal site with your tags and include your CSS.
Here you can look at these awesome CSS's that are responsive:
http://getbootstrap.com/
http://metroui.org.ua/
http://www.99lime.com/
http://purecss.io/
http://gumbyframework.com/
Your are setting inline widths on images and tables. The CSS in the header can't override the inline declarations.
Thanks. It seems that I mostly had each table on their own. So I created wrappers, double checked the widths re-added classes and etc. It seems to be working pretty good now.
Sometimes a fresh pair of eyes helps. Thanks again.
P.S. J.otero - Frameworks are good if you're using it for the web but they will do little to nothing for email.
I'm trying to make a sample web page to get acquainted with HTML5, and I'd like to try replicating Facebook's page layout; that is, the header that spans the entire width of the screen, a small footer at the bottom, and a three-column main body, consisting of a list of links on the left, the main content in the middle, and an optional section on the right (for ads, frames, etc.). It's neat and displays well in multiple window sizes.
So far, I've tried to accomplish this with a <header>, <footer> and a <nav> and <section> block, respectively. There's a few anomalies with the page, however. The footer (which contains a simple text block with copyright info) appears at the top-right of the page below the header when the window is maximized. On the other hand, when there isn't enough space to display everything in the window, it places the main body text below the section. In other words, it keeps moving elements around to fit the window.
Could someone please tell me how I'd achieve the look I'm going for? I've tried playing around with a few CSS attributes I read about through Google, but I'm pretty sure I don't know what I'm doing, and could really use some guidance.
Thank you!
This isn't an HTML5 question as much as it is a basic understanding of HTML and CSS. If you're going to jump in to web dev you're going to need to understand basic CSS like floating etc. I would recommend some tutorials on YouTube or NetTuts. Just play around with a few divs, move them around the page, manipulate them with CSS and it will start to come together. Then making a three column layout with fixed header and footer will seem like a piece of cake.
Floating Divs w/ CSS
I find CSS to be super hard. It is quite difficult to make a page that looks good and works on lots of different platforms and browsers. You may find it easiest to use a css framework, such as Bootstrap.
Drop that into your website, and use it to make your layout. Use the dev tools for your browser (Firebug for firefox) to examine the styles that are being applied to the various elements. Modify the styles to suit your needs.
HTML5 doesn't really give you a page layout for free. The elements you mention (header, section,etc) are used to create semantic pages, rather than to specify how they should be displayed.
Can't help much without your code. But I am sure it is because of float issue. add this CSS property to your footer clear: both
Hope it might help.
I'm not sure if you're trying to make yourself a little hack, or if you're looking for a complete library that will do all this for you, but if you're looking for the latter, I recommend Twitter Bootstrap, which is a cross-platform solution for implementing many HTML5 features, and even resorts to fallbacks for non-modern browsers. The only drawback is the requirement of jQuery in order to initialize the components that are responsive*. However, this is optional if you are not looking to implement these features. The responsive design, amazingly, does not require javascript since it is pure CSS. Hope this helps!
*Edit: meant "interactive" there, not "responsive."
I have a layout in which two divs appear stacked vertically inside a parent div which will be a specific height (due to containing a left hand menu). I wish the two divs to take up all the available vertical space. However, they must resize depending on their content. The easiest way to explain is with a diagram:
Reading the diagrams from top to bottom, this is the scenario:
both divs take up 50% of available height as this is sufficient to contain their content (this is the default).
there is a lot of content in top div and less content in bottom div. Top div expands to fit content and squashes bottom div.
reverse situation of (2).
both divs must expand to fit their content. Containing div must expand to accomadate.
I think I could figure out how to do this with a table, see the example here which is almost correct (in chrome anyway) except the outer div doesn't expand properly.
Is there a better CSS solution to this without using a table?
I cannot use JavaScript and solution must work in all browsers... including IE6 :(
.
This can be done using CSS, with a feature called the flexible box model. It's an extension to the box model that's been in use in CSS since the begining, and allows you to do stuff like vertical stacking, etc, which wasn't possible before.
You would start off with display: flexbox;, and then use other related styles to define the characteristics of the layout you want. It is very powerful. You can read the full W3C spec for it here: http://www.w3.org/TR/css3-flexbox/
Now the bad news: It's a very recent addition to CSS. It actually has reasonably good browser support (albeit with vendor prefixes), but the problem you'll always hit is that it isn't supported in IE, not even IE9 (though it is planned for IE10)
Other browsers require vendor prefixes, so even for supported browsers you'll need to write your styles in four or five versions.
In addition - and this is the real killer - there isn't a good fall-back solution for browsers that don't support it. If you design your page using flexbox layouts, and load it into a browser that doesn't support them, it will be a disaster.
For this reason, it is hasn't really seen much use in the real world yet. It's time will come, but as long as IE9 and earlier are in use, it won't become mainstream.
You can see a full browser compatibility chart for the feature here: http://caniuse.com/#search=Flexible%20Box%20Layout%20Module
In the meanwhile, you're going to have to use a Javascript solution.
My recommendation is the JQuery Masonry plugin. I think this will be your best solution for now.
You could fake it using a 100% height wrapping div and a white border like so:
http://jsfiddle.net/cBV88/2/
You can also remove the fixed height and it will still work.
SuperStretch might get you part of the way there.
I found this very interesting:
http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels.htm
He avoid using horizontal margin and paddings to avoid problems with IE. I think he "fakes" padding using relative positioning.
Have you ever done something like this?
I'm a missing a common trend against IE hacks?
Does this practice have any drawbacks?
That example is outdated.
Problems with margins and paddings like that were a problem with the broken box model of IE5. In later versions of IE you will only get that broken box model if IE is in quirks mode. That's something you should be avoiding at all cost. Use the right doctype!
The example you linked actually relies on that broken box model. He has an updated version that doesn't:
http://matthewjamestaylor.com/blog/holy-grail-no-quirks-mode.htm
But what kind of IE problems are you actually trying to address? Do you specifically want a 3-column layout like in the page you linked to? Do you want general solutions for IE layout problems? Or do you want to be able to forget about IE altogether?
The most important thing to know about when dealing with layout and IE6/7 is its hasLayout property. Read On having layout for all the details on that.
If you are specifically looking for tools that can help you build complex layouts compatible with all browsers, you could have a look at grid frameworks like YUI Grids or Blueprint. But I can't say I'm a fan of those, since they tend to result in unsemantic div soup.
If you don't mind a little (experimental) JavaScript to fix up your entire website automagically, you could give IE7.js a try. I've used this, though it definitely has its quirks and limitations, so use at your own risk.
To come back to your original question, though, relative positioning is no ultimate solution for anything, it's just one of the tools in the box. Understand it and use it when it's appropriate. See, for example, Sitepoint's CSS layout and formatting reference. And as dry as it may be, I find the CSS specification to be invaluable, especially the chapters on the visual formatting model details.
I'm doing the first bit of web-page development I've done in years, in VS2008, using VB.net. I have a fairly simple layout, which is using several nested tables. IE6 displays the layout just fine, but Firefox for some reason shows the whole thing in a small panel at the top of the page, with a scrollbar. Can anyone suggest something basic I am likely missing?
There is a big difference in a way that IE6 renders HTML and especially tables. If you want to support it you should write explicitly all the position related styles like width, padding etc, just create a css file for table style.
The good news are that IE7 and 8 are mush closer to the standard.