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
Related
What is the difference between these two? What difference does it make if we put another div inside the first div?
<div class="blah">
<div class="blahInner>
<img src="pony.jpg">
</div>
</div>
<div class="blah">
<img src="pony.jpg">
</div>
Multiple divs allow you to customise your HTML with different effects based on properties assigned to different CSS attributes. Additionally, the use of multiple divs allow you to add different kinds of CSS and, jS to elements of your HTML page. Rather than have all your CSS within one selector, you can then spread it across multiple divs which allows you or someone else working on your code to easily make sense of it.
You may also want to pair different sets of styling for different parts of the webpage, and having multiple divs will enable you to easily call the same divs and form combinations of the attributes from different selectors. Ultimately, you could just use them as follows,
<div class="art" id="dart">
Text
</div>
OR with multiple divs as shown below.
.dart {
color: white;
}
#art {
background-color: #ADFF2F;
width: 115px;
height: 20px;
}
<div id="art">
<div class="dart">
I am dummy text
</div>
</div>
Essentially, there is no difference and is therefore useless unless you use it in your linked CSS or JavaScript.
The difference is that there is another <div> element for other web languages like CSS or JavaScript to act upon.
It gives the other languages a chance to add special positioning, animations, and styles to the containing <div> element.
I hope this answer was informative.
Let me know if you have any complaints.
As others have pointed out, extra div acts as a sub-category.
Extending to your example, lest's say there are 2 sub classes (blahInner1 & blahInner2) within the class blah. We can easily manipulate font of blahInner2 only.
<div class="blah">
<div class="blahInner1">
<img src="pony.jpg">
This is 1st caption.
</div>
<br/>
<div class="blahInner2">
<img src="pony.jpg">
This is 2nd caption.
</div>
</div>
<style>.blahInner2{color: red;}</style>
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.
So, I'm attempting to make my own website (Yeah, I finally sucked it up and started doing markup, sigh) - problem I'm having is I'm trying to center a button, and it's offset a little. Without the <center> it's all the way to the left.
Also tried :
style="align-items:center"
<div id="form-container" style="align-items:center;">
<div>
<fieldset>
<center><input class="button0" value="Install Redux" type="button" /></center>
</fieldset>
</div>
</div>
You just have to put <center> before your <div> and close it after </div>.
Like this:
<center>
<div id="form-container" style="align-items:center;">
<div>
<fieldset>
<input class="button0" value="Install Redux" type="button" />
</fieldset>
</div>
</div>
</center>
I've also made a CodePen and a JSFiddle for you.
Try text-align:center on the parent, or use left:0;top:0;position:relative;webkitTransform:translate3d(-50%,0%,0%); where parent doesn't have position:static (the default)
I would also recommend checking out Bootstrap because it has a nice grid layout that lets you define which 12ths of the page you want columns to lay in, simply by defining classes like .btn-default or .nav or in your case class="col-xs-12" inside that other column
They also have really nice styles for forms and input buttons etc. (see video on my example site below)
Try resizing your browser while looking at their examples. Pretty much, you define class="col-xs-12" if you want it to appear as 12/12 width of the row on extra small (mobile) and LARGER devices, and you can mix them class="col-xs-12 col-md-6" so it will split the row on larger (tablet) size devices. It's the number 1 repository on GitHub, and only takes about 30 minutes to read through the Grid Layout and search around for "Nav" and "Button" elements.
I recently made a quick site http://neaumusic.github.io, feel free to check it out, and good luck
Two ways:
1) Set margin-left: auto; AND margin-right: auto; to the containing div OR
2) Set display:flex; AND justify-content:center;to the parent container.
Google flex box for a little more information, its very useful for layout once you get the hang of it.
As stated in the comments, the center tag is no longer supported.
What about if you try #form-container { text-align: center; } ? It will center all children, including button.
I would definitely recommend using flexbox, the only issue being ie8/9 support.
It really makes layout so much easier and you don't have to create very specific, often arbitrary margins to get your stuff to align nicely, particularly vertical alignment.
Your alignment options are split between the container and the items. It does row and column layout too.
Here is a link I used to get me started.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
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.
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>