I am trying to create a tfoot element in my table structure which I want to stay fixed at the bottom, while the tbody remains scrollable. I have read various related questions and answers, and most seem to utilize nested tables.While one might argue that "whatever works is whatever you should use", using nested tables feels (might be just me) like a dead wrong approach and against the little I have learned about markup. Are there not any more "sane" solutions to use-cases such as this?
Try one of these pieces of code according to your needs.
If you need a webpage with footer always on bottom:
<body>
<div style="padding-bottom:60px;">
<!--main content here-->
</div>
<div style="position:fixed;width:100%;height:60px;left:0;bottom:0;">
<!--footer content here-->
</div>
</body>
If you need a custom block somewhere:
<div style="position:relative;width:600px;height:400px">
<div style="padding-bottom:60px;">
<!--main content here-->
</div>
<div style="position:absolute;width:100%;height:60px;left:0;bottom:0;">
<!--footer content here-->
</div>
</div>
Footer height in example is 60px - it can be anything actually. Use CSS file for styles (I wrote inline for better explanation).
Also I do not recommend to use nested tables. Yes, you can use a sledge hammer as a nutcracker, but it would not be effective.
Related
I was wondering what would be the best practice of using the "col" classes in Bootstrap.
example 1 - I already know this way is valid
<div class="row">
<div class="col-12">
<h1> Heading</h1>
</div>
</div>
example 2 - would this be considered a good practice as well?
<div class="row">
<h1 class="col-12"> Heading</h1>
</div>
Thanks for your answers!
The Grid System documentation includes only examples with div elements, and although the CSS styling applied by Bootstrap is not limited by any tag but only by classes (e.g. .col-md-6 instead of div.col-md-6) it is a better approach to nest your content in a div, for at least two reasons:
It will allow you to add other content later to the same column, such as a button or tooltip after the heading
Allows better styling of your h1 tag, and does not apply the automatic gutter of 15px on each side of it, which can make your heading alignment incoherent
Having said that, there may be more complex cases where your second approach would benefit, but in this case it does not seem applicable.
you can use the grid with other elements too as it is classes , but try to follow standards of coding and styling for proper code management and readability.
according to which example 1 is correct way
<div class="row">
<div class="col-12">
<h1> Heading</h1>
</div>
</div>
I'm studying web development for a few months now and I generally have some problems with the front-end and the UI layout. I often have difficulties placing the elements exactly where I want them. In that case, either I use relative values and break the responsiveness of the site, or I write some rules that seem to me like hacks.
For the example, let's consider this image:
As you can see, there is a Bootstrap container, full-width background color, two classic elements inside the container and an image outside.
For this kind of layout, I'd do something like the following:
<!-- /* MAIN WRAPPER -->
<div class="pull-right">
<img src="/img/topright_image.PNG" alt="shape">
</div>
<div class="bg-red"> <!-- Red background color. -->
<div class="container">
<header class="row">
<div class="hidden-sm hidden-xs col-sm-2" id="logo"> <!-- I'm using Bootstrap 3, IIRC there's a better way to do that in Bootstrap 4. -->
<img src="/img/logo.PNG" alt="logo">
</div>
<div class="col-sm-6 col-sm-push-3" id="title"> <!-- First difficulty, how to make sure the title will always be centered without being relative to the logo and no matter its content? -->
<h1>Centered title</h1>
</div>
</header>
</div>
</div>
<div class="bg-green"> <!-- Multiple containers, just to have colored backgrounds at 100% width of the page. -->
<div class="container">
<section></section>
</div>
</div>
<!-- MAIN WRAPPER */ -->
It's a quick draft, but you get the idea. The CSS will then implement arbitrary height for the header and the section (300px and 400px), then the max-width for the container.
How to do that properly?
(And what if I want to make the logo a little above the title; between two rows?)
"Proper" is relative. Which makes this a tough question to answer. Using only TBS, this solution is how I would do it. However, I tend to favor flexbox more than TBS so I'd probably use the TBS container how you have it set up (yes, doing that to the containers is a valid way of achieving your goal. Another method I have used before, is box-shadows. Neither option is better, but now you know), and then handle each row as a flexbox or even just simply use floats and centering. This is not a very heavy layout.
If you are looking to learn how to do it "properly", I'd read other code. Specifically for TBS I'd recommend Start Bootstrap. It has a bunch of TBS themes you can look at. Look at the code, see how they do it, see what you like, start doing that.
Ultimately, in the end, it doesn't matter how you get there[1] it just matters that you do. This is a viable solution, and I don't see anything glaringly wrong or hackish.
It actually does matter. But you appear to still be in the learning
phase[2] so it doesn't matter as much so long as you are willing to
keep an open mind and correct things as they are found
We are all always learning.
When writing HTML, what is the industry standard regarding a Container div?
Is it more popular to have a Container id, or use a container class which I add to the divs I wish to inherit the features?
For example:
<body>
<div id="container">
...etc
</div>
</body>
or
<body>
<div id="main" class="container">
...etc
</div>
</body>
I don't know that there is an industry standard. If it's a container, you should have only one so an ID makes sense. You can use classes and IDs however you see fit, the bigger challenge is having cleanly-written, well-stacking rules that apply to the design you're working with.
Edit: Your question just updated -- it'd be better to have id="container" and then class="home", class="about", etc. as needed. This would make for a neater stylesheet and would give you the option of simply overwriting #container rules if you need to.
Setting an id of container would be most appropriate because you should only have one container. Setting the class = container would imply that more than one container existed. Since a container is designed to wrap all of your page content you should only have 1.
Giving an element an id, implies that that element is unique.
In your case, a container div is usually unique and therefore an id would do.
A class is used when you want multiple items to have the same styling.
Giving different items the same id, is a violation to the w3c standards.
I think this is something you should decide for yourself, I've always used the above way.
HTML document can have several containers, all sharing some style and each with some unique style.
So best practice is giving each both class and ID:
<div id="Header" class="container">
...header goes here...
</div>
<div id="Menu" class="container">
...menu goes here...
</div>
<div id="Contents" class="container">
...main contents come here...
</div>
I am new to web-design. I want to set the page-width so that it appears well in a 800x600 resolution screen. I normally use Tables but I read somewhere that excessive use of Tables slows the performance of the website. What other thing I can use and how to set the width?
Usings DIVs rather than tables would look like this
<div style="width:800px">
<!-- your content here -->
</div>
This produces on column with the width of 800 pixels. Keep in mind that you normally may put your style definitions in an externals *.css file. In reality you will have some nested DIVs too which hold e.g. your main menu and content e.g.
<div id="wrapper">
<div id="topMenu">
<!-- menu items -->
</div>
<div id="content">
<!-- content -->
</div>
</div>
Here I have used IDs for specific items which can be addressed uniquely. It's easy to assign styles to them via CSS:
#wrapper {
width:800px;
}
#topMenu {
width:800px;
height:200px;
}
Sooner or later you will stumble upon the term "floating divs" which is another big topic.
Yes, Tables are so 1995....
Now you're supposed to use DIVs and SPANs.
http://www.smashingmagazine.com/2009/04/08/from-table-hell-to-div-hell/
also, w3schools are the normal resource for html starters
but, why bother, you can use an already made layout from websites like:
http://www.freelayouts.com/websites/html-templates
I found this on net in google search
and see article here: http://www.thatcssguy.com/limit-your-divs/
See his final layout here: http://www.nodivs.com/
Some quotes from article
1
When I limited the use of my divs all
the major browser including both IE6
and IE7 would render the sites nearly
perfectly. Or with very little fixes
needed.
2
it’s magic but proves divs nor tables
are necessary for layout
Should we try to make sites like this?
The article makes a number of good points on how to avoid "divitis", i.e. the usage of div elements where there would be a semantically more fitting element. But this:
When I limited the use of my divs all the major browser including both IE6 and IE7 would render the sites nearly perfectly. Or with very little fixes needed.
is total bullcrap. DIVs are perfectly valid container elements and make sense in a lot of situations. Only where there is a semantically more suitable element (e.g. ul in an unordered list like a menu, h1 h2 h3 for headings, ol for ordered lists) is it wrong to use a div, as it is usually wrong to use a table for layout.
What the author of the site you mention does is blatantly misusing other elements like dl (definition lists) as surrogates of div elements, something that is as idiotic as misusing divs as surrogates for ul ol etc. Look at the W3C's definition of ul, ol, and dl lists and consider for yourself whether those elements are supposed to do layout tasks like the author does use them for.
As far as I can see, the insinuation that not using divs somehow makes sites render better cross-browser is utter humbug. Correct me if I'm wrong, but I can not think of one single instance where this holds true.
He has a point as far as using styles on the elements instead of automatically wrapping them in divs:
<ul class="navList">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
instead of
<div class="navList">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
He lost me though when he used absolute positioning to overlay a h1 with an h2 to create his header.
Maintainability is just as important as clean code. When I see a div named "header" I know what that is as opposed to this:
<h1 class="border">Welcome to NoDivs.com</h1>
<h2 class="border">Contact NoDivs.com <span>1-888-1485</span></h2>
And he doesn't practice what he preach. Anybody who uses a "spacer" div to add padding between divs shouldn't talk about the dangers of divitis. :)
You quote from the article, but in the comments the author himself states:
Not using DIVs tends to make sites render more reliably cross-browsers. You’re removing an element in the code that could be the source of a browser not displaying correctly. Remove the variables and you’ll see less problems.
So: switching divs for headings does not change the reliability of rendering (the article implies that, but the author does not mean that), but removing unnecessary nested divs elements help that, but as a good HTML layouter you should always do that ;)
Just keep in mind that you should prevent Divitis whenever possible, and making use of semantically correct markup helps your SEO efforts and accessability and karma and stuff.
EDIT:
OK, as all know, divitis is bad. Let's have a look at the article's markup:
<body>
<div id="page">
<div id="header">
<h1 id=logo">(some stuff)</h1>
<ul id="nav1">navi</ul>
</div>
<div id="columns">
(Content)
</div>
<div class="box6">
<div class="top"></div>
<div class="spacer">
<div class="col3">
</div>
<div class="col3">
</div>
<div class="col3 last">
</div>
<br class="fix">
</div>
<div class="bot"></div>
</div>
<div id="footer">
(Footer Content)
</div>
</div>
(Script tags)
</body>
Let's see: <div id="page"> to center the page with margin: 0 auto;. Apply this style to <body> and you can remove one div. The whole content of the <div class="box6"> is not exactly clean of divs, and absolutely unnecessary. And for the rest: See for yourself.