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).
Related
From what I find on this site, webpages are typically centered using an overall <div> called #wrapper that has auto margins, or some other clever attribute. For example, in this question.
However, it seems that this is not the optimal way to do it in HTML5, where it is preferred to use tags from a series of special new ones.
What is the best way to center a page in HTML5?
TO BE MORE CLEAR
From what I understand, HTML5 was created to get rid of the many divs found in websites and provide a standard skeleton. Instead of there being <div id="header"> and <div class="section"> etc, the powers-that-be determined it would be better to have standard tags. For this reason, I don't feel comfortable surrounding everything with a <div>. I feel like there is probably a better, more clean, HTML5-friendly way.
Perhaps I'm wrong...
Until now the way you describe is still the preferred one. Some time in the future you might use the <main> tag for this, but for now you are 'stuck' with the <div> auto-margin method.
You can read some more about the <main> tag here: http://html5doctor.com/the-main-element/
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'm trying to implement a responsive navbar. It seems to work, but when the screen gets smaller, there appears a gap on the right side. See screen shot:
I haven't written any CSS. All of this is pure Bootstrap still.
Update 1: jsFiddle
http://jsfiddle.net/BaR3q/ - It's doing it on JSFiddle, too. So either I did something wrong (likely) or Twitter messed up (unlikely). what to do?
There is nothing in the markup that specifies that the elements should expand to fill the viewport. Adding body { width: 100%} will take care of it, or optionally overriding the width of the navbar to be auto.
Twitter Bootstrap is intended to be scaffolding and components rather than an out of the box solution, so this is likely one of those things that needs to be specified. The static version of the navbar is likely written so that it can be easily used in containers other than the body and this happens to fall in the 20% of situations where it needs a nudge.
A few potential reasons come to mind, but as others have pointed out it's difficult to say without seeing code. I'll add, though, that I understand how tough it can be to share enough of your code for something like this without giving too much away. So here are some questions (and for this specific issue, you shouldn't use .container-fluid as previously suggested. that probably won't work anyway, and if it does it's only masking a problem that might compound):
did you change any responsive styles? If so, did you change the width, padding, or margins on .container?
Did you apply a width or margin to the .navbar itself somewhere in the responsive styles? This seems a likely cause to me.
What about <body>, did you set padding on that?
I solved this problem by adding (either) one of the following meta tags:
<meta name="viewport" content="initial-scale=1">
<meta name="viewport" content="user-scalable = no">
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 have a #main div nested within a container div that I want to fill the page down to the sticky footer. I've tried several angles, but can't seem to get it to work. If you don't use firebug, just ask and I'll provide CSS, etc.
Thanks.
site: http://www.dentistrywithsmiles.com
I've tried to do sticky footer many times and I never seem to learn that they are really hard to do. Your situation seems complicated and what you have now doesnt seem half bad.
I think I would use JavaScript to detect page resize and adjust the heights appropriately. Either that, or do something tricky with background images spanning both the footer and #main.
That's probably not what you want to hear but this is a tough problem for only using CSS - tougher than I would care to invest in.
With Jquery
http://css-tricks.com/snippets/jquery/jquery-sticky-footer/
or css only:
http://www.cssstickyfooter.com/using-sticky-footer-code.html
or
http://www.pmob.co.uk/temp/sticky-footer-ie8new.htm