I'm using HTML5 Boilerplate css and I would like to apply the ir class to my footer menu.
The menu is in a list, and I use inline-block to display this list horizontally.
Here is the fiddle of the code. You can see that the image replacement works, but the text menu element after (that has no image) is translated to the bottom. This is due to the .ir:before css rule that simulate a block element which takes some room.
Is there a way to use the HTML5 Boilerplate technique without this side-effect ?
If not, I will go back to the text-indent:-9999px technique.
Bonus question : what are the benefits of the HTML5 Boilerplate technique compared to the text-indent one ?
The text-indent: -9999px method has some drawbacks. The main are:
does not work in IE6 and IE7 on inline-block elements.
1st gen. iPads have proven to have performance issues with this technique, with page rendering slowing down quite a bit.
Even if we don't see it, any browser in any device has to draw a huge div (more than 9999px) that overflows the screen. This is bad for performance as it adds page load time and requires more memory resources.
The .ir technique in HTML5 Boilerplate has proven much more performant and reliable. You're doing the right thing.
Having said that, I'm not 100% sure of what you're trying to achieve in your code. I have restructered the html a bit in this fiddle.
As you can see I have put red borders to understand where exactly elements are and how much space they take up. Every image/text is now in its own <li> which is semantically logic (one link/one list item), like so:
<ul>
<li>facebook<li>
<li>twitter</li>
<li>example page</li>
<ul>
I've also removed the float:left to the nav as you need to float the elements inside it, not the container itself. Hope this clears it up a bit and helps you get to where you want. I'm ready to edit this answer if any improvement is needed or if I have misunderstood what you're trying to achieve.
Related
I'm about to update http://getcrow.eu and have one "issue" to solve that would make the framework everything I always wanted it to be.
Important to know:
Crow does not use tables, absolute positioning, floats or clearfix'es and it should stay that way.
We know that putting inline-blocks next to each other like so:
<div class="parent">
<div>Block 1</div>
<div>Block 2</div>
<div>Block 3</div>
</div>
with CSS:
.parent {
> div {
display: inline-block;
}
}
Creates white-spaces between the blocks. We also know there's a handful of solutions to prevent the white-spaces from creating space, which is highly required if creating a grid framework with this method.
Beneath I list the methods that I'm aware of and why I don't want to/can't use them:
(SKIP IF YOU WANT TO GET TO THE QUESTION)
Comments in the HTML inbetween children div's.
No-go because: it creates ugly HTML that the developer, using crow, must be aware of and work with.
Breaking lines at the end of children tags/ not using closing tags.
No-go because: same as above
Using minus (-) margins on .parent-wrapper.
No-go because: specified margins depends on document font size which mean the grid could break in responsive markup where html { font-size:{X}px; } changes.
Setting 0px font-size to .parent and "reset" the font size on children (this is the method I'm currently using).
No-go because: I don't want the developer using crow to force-set the children. I just want the inheritance to be natural without a grid that's setting the font size downwards for me.
Using Javascript to remove all white-spaces from .crow elements.
No-go because: I want the framework to be pure CSS and no js. This could also "flick" the DOM after pageload if user has bad connection.
Loading a font with font-family on .parent that has no white spaces.
No-go because: loading in an extra font just to get the grid framework is just wrong. Especially as you have to download extra files (font-files) and declare fallbacks for all browsers.
Using letter-spacing -{X}px on .parent.
No-go because: same as .3 (see above)
Using flex box.
No-go because: the framework focuses on vertical centering (if desired) and flex box lives it own life when it comes to that. I'm also making sure the grid is supporting IE8 which it does today.
So basically I'm searching for a - unknown/not yet discovered/way that I'm not aware of - for removing white spaces in between inline-blocks. I want it to be pure CSS. If you have a method that you know of/think would work - I can try it on different browsers.
Resolving this would surely make Crow the best grid framework. I'm already using it for various websites and I can tell that the possibilites are many when given the ability to easily position elements center vertically.
Sidenote:
Marking up the DOM like so: <div class="parent"><div>Block 1</div><div>Block 2</div></div> does the job just like I want it to. But that would require the developer using Crow to mark it up that way. And I don't want to rely on a framework creating that HTML.
InuitCSS (my choice of framework lately) uses a similar system. As wonderful as the use of display: inline-block; is in a grid system, it does appear that the whitespace issue, is an inherent one; with little chance of resolution beyond the current workarounds.
I agree that the use of comments or closing tags does introduce some issues with CMS entries, and a certain amount of mental overhead for the developers involved; but not an unmanageable amount.
If you want to have a look at Inuit's grids I would recommend it's GitHub found here:
https://github.com/inuitcss
I would also advise reading this issue, in-which Inuit's creator; Harry Roberts, weighs in on the various solutions this problem. Whilst it may not tell you anything you don't already know, it is an interesting (if outdated) discussion on the matter.
https://github.com/csswizardry/inuit.css/issues/170
I know that the above may not solve your issue, or even shed any light on the matter, but I hope it can be of use.
Using a float is your best option.
.parent div {
float: left;
}
Following your comments below you could use a negative margin.
.parent div {
margin-left: -4px;
}
But this may change browser to browser.
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."
Everyone knows that there are problems with the float CSS property: there are text jogs in some browsers, you have to clear them to pull parent elements around a floated div, etc.
Let's assume I build a layout and float everything, and I'm careful to control for the browser-specific bugs. Are there disadvantage to using float for everything? Will the page take longer to render, or is there a better practice?
I'm trying to improve my CSS layout building technique.
#kevin; float is not a bad practice; it depends on how you are using it & what the needs of the design are. There is no need to use it on everything when there is no need & it comes from experience.
Every browser renders float correctly.
yes if you use clear:both in your markup like this
<div style="clear:both"></div>
it's increase your markup which increase your page loading time.
. SO, use overflow:hidden in your css to clear it.
Floating everything can make for a great deal of inconsistency; depending on how wide a screen is and how tall certain elements are rendered, you can end up with a hodgepodge of screen jag.
For example, widening the screen would cause more elements to fit on the top line, so they would jump up. Items not in the top line will slide down, and then catch on the corner of an element slightly taller than everything before it.
Float is a handy tool, but it's no panacea; use with caution. Make yourself a sandbox site, and use something like Chrome's developer tools, or Firefox w/ Firebug to see what results you get when floating it all.
I dislike using floats because of these clearing issues. I generally use display:inline-block, and for my IE6/7 stylesheet for the same rules, I put zoom:1; display:inline
With inline-block, block elements flow like inline elements, while behaving like blocks. This I feel is more intuitive than breaking out of the flow like floats do.
I use this kind of layout on my twitter client: https://timshomepage.net/twitter
And here's the uncompressed stylesheet: https://static.timshomepage.net/css/twitter.css
I stumbled upon this article
http://www.thefloatingfrog.co.uk/css/my-hatred-of-br-clearall/
When would one need to use that ?
Why is it evil ?
I don't understand the substitute syntax can you explain ?
Setting clear to both with not allow other elements to float on either the left or right side of the element. The class below is an easy way to add this anywhere.
.clear {
clear:both;
}
So when you want to clear something (that is, if you were to float the next element to the left, it would be below the current element and to the left, instead of left of it) you'd simply add the .clear class.
The problem with the following code is that if later on you decide that you don't want to clear everything after the 'something' class, then you have to go through your HTML and remove the br clear="all" wherever you have that 'something' class.
<div class="something">Cool content.</div>
<br clear="all">
<div class="other">Cool content again.</div>
Instead you could do something like this:
.something {
float: left;
}
.other {
clear :both;
float: left;
}
<div class="something">Hi!</div>
<div class="other">Hi again from below!</div>
That way if later on you decide to float all blocks with the 'other' class then you can just remove the 'clear:both;' from the CSS once.
I was about to post something snarky about you not reading the article, but when I saw that it was just a page of vitriolic rage with no explanation, I figured I'd answer.
It's because there are better ways of doing what you want to do -- namely, by using CSS in the way he does in the article, he has separated the semantics of the elements he's displaying from how he's displaying them. Why is this a big deal? Well, for one, he can more easily transform how his page looks when it's shown on different platforms (mobile, desktop) and media (screen, print, a screen reader for the blind), simply by editing CSS and not having to touch the document itself. This feature of CSS is pure gold.
On the other hand, if you use a construct such as this, you put in a hard constraint about your document's presentation that sticks around no matter what media or platform you're dealing with. What makes him so mad? Because once a developer has come in before him and used <br clear="all">, he has to take it out in order to get the benefits I just mentioned. That's why it's so frustrating. One bad developer can disable a whole host of development scenarios for every other developer who comes after.
As far as CSS goes, I have to say that it's a very difficult subject to just pick up without reading all about how it works. It's hard to explain how the clear attribute works if you don't understand floats. I had quite a hard time myself until I bought a great book on the subject.
When you have floated elements, the parent element can't calculate it's dimensions effectively and sizes incorrectly. Other items that follow floated items may also sit out of position. By clearing an element at the end of your floats, you correct alter this behaviour.
EDIT
Actually correct is probably the wrong word to use as this is what is supposed to happen and using the word correct suggests it is broken.
The author is just going off on a crazy rant about how the same thing can be accomplished using CSS on the DIV elements themselves. He's saying that br class="clear" is unnecessary.
It's also not a good practice because it mixes content with presentation. If a web designer wanted to re-theme the web application, he or she would need to modify the HTML to pull out all of the br clear elements, whereas if this was done as the author suggested, then the CSS files could be swapped out independently of the HTML, making their jobs easier and giving them one less thing to rant and rave about.
The rant is of course justified, as these simple, silly lines of code can actually cause a lot of headaches.
The idea is that your markup describes the information, and the CSS formats that information.
A dummy tag to clear floats isnt semantic, as it's only purpose is for layout reasons. There are other semantic ways of clearing floats that keep this separation. As commented below but here for clarity this is a good resource for semantically clearing floats http://css-tricks.com/the-how-and-why-of-clearing-floats/
Ok, I'm kind of new to standards of web design here. :P
Is this the correct way of designing a site with CSS?
Each "Box" has it's own DIV tag, with it's own settings. I'm guessing the background-image: of a box inside of the heirarchy gets precedence over the outer box, right?
A "Box" that has the background image of the site.
Another smaller "Box" that acts as the content container of the site.
And other smaller "boxes" that act as containers for particular things inside of the content "Box".
Here's a little picture about what I mean:
OK, some simple points to clarify for you...
The "whole site box" is probably going to be the body element of the page. You could add a whole wrapper div for it, but it would not gain much in the first instance.
The use of a "content box" is ok, but I would be wary of using it unless you want to specifically limit your site to a fixed width layout.
The other boxes can be added directly to your body element, and positioned/styled individually. You'll probably end up with something like this...
<html> <*-- include your doctype and stuff, obviously -->
<head>
<title>My site</title>
<link rel="stylesheet" type="text/css" href="sytle.css" />
</head>
<body>
<div id="header">Your site header content here</div>
<div id="mainNav">navigationhere</div>
<div id="content">main content here</div>
<div id="footer">footer stuff here</div>
</body>
</html>
There are plenty of resources for positioning, etc, around. I found the best way to learn (although I'm very rusty on it these days) was to look at examples, unpick what they were doing and have a go myself. Try looking at http://meyerweb.com/eric/css/ and http://www.csszengarden.com/ for a starting point of what's possible.
HTH, but I'm sure someone with up-to-date html skills will be along in a minute.
I totally agree with samuil on his point that you shouldn't have functional divs. That's what got us into the whole mess in the first place (if you don't know what the mess is, do a search regarding tabled-layout).
BUT
something to be aware of: If you set an outer-element (like body or even html, but careful) to relative, it will require an explicit height or it may shrink up or no longer contain (visually) the child elements. But if you set the body to a height of 100%, it will be 100% of the window not the document, meaning that when the user scrolls down, the body doesn't scroll with them. It's very weird and annoying.
I honestly recommend just not worrying about layout. Make the copy look good and clean and people will hang around (see: this site). Obviously there are some aspects that make a site more usable or attractive, but I always use the rule of thumb: if I turn everything off, will it still work and will it make sense? I'd rather a page look boring but readable with no CSS and then start messing with the layout and colors then have a site that turns into a pile of divs and p's it one browser (cough, IE) doesn't play along.
Your approach has minor flaw - you shouldn't put "Content Box" div in your HTML unless it has some meaning. There already is body element for that purpose (in good browsers html and body elements can be styled). However, with high probability this flaw is insuperable, as currently commonly used browsers suck in supporting some important features of CSS 2.1.
Except for that your design seems to be correct.
I think the "big" (green) content div is actually a wrapper div that helps you set the width of your website (most wesites nowadays prefer not to use all of the available screen width - stackoverflow is an exception).