I'm learning HTML and I wanted to practice by recreating a invoice sent to me by Electronics Expo.
However, I used the background-image property and repeated it by repeat-x and now, the background stretches across the page so much that it has a horizontal bar to drag.
http://htmlpocketreference.110mb.com/index.html
You can see what I did in my link above.
Also, I would really appreciate some advice on simplifying my CSS coding. It seems really messy and I have to move every element once something changes. -.-
Thanks!
It's because you have relatively positioned elements that do not have a fixed width - these elements take on the width of their parents, which is the width of your invoice, and stick out of the page, causing the overflow. Give them a background color, and you can see this quite clearly:
Give the elements a fixed width to fix this, or alternatively, look to other methods of laying out your elements, like floating them.
In addition to this problem, you're also repeating the id attribute, which is creating invalid HTML. You should look at using the class attribute for multiple elements sharing the same style, or even better, look at using inheritance and the cascade to not have to give every single element an id.
Further reading:
CSS Positioning 101
Inheritance and Cascade from The Web Standards Curriculum
Problem is not the background. The problem is the position relative you're giving to the block level elements without defining their width...
The h2 elements like (Ship To:) and (Phone) and all the paragraph elements. You need to give these elements a specific width and it will work fine
Try giving these elements a background-color: yellow; to see how the flow inside the document ( for your debugging purpose ) and you will see what I mean
Related
I've been working with HTML and CSS for a while now.
Every time I work in CSS, I have a feeling that I'm not "doing it right".
For instance, when positioning different divs and elements on a webpage, I use "position: absolute" and "position: relative" quite often.
This can sometimes be very tedious to find the "right" position and results in very ugly numbers, such as:
position: relative;
width: 1300px;
height: -720px;
In addition to above, it also makes it very difficult to edit said divs and elements later on if I change my mind about their appearance or position.
I've watched a lot of tutorials on YouTube where people use "margin" and "padding" tags to position the elements on their websites.
I'm very confused by this since those tags are supposed to be used for creating space around elements and not actually change their position.
The strange thing is, that it is much easier to edit the website using "margin" and "padding" tags later on, if you change your mind about the appearance/positioning of those elements since they won't move around and overlap each other.
I apologize for the long query but this has been bothering me a lot lately and I would appreciate any advice regarding the positioning of elements in CSS.
Thank you
The biggest distinction between position and margin or padding is that when you set the position to absolute, relative or fixed, the element is taken out of the "normal flow" of the document and placed in its own layer. This is what allows you to use the z-index property and stack elements on top of each other. This has dramatic advantages when the elements in question are going to be dynamically sized or animated because doing so won't cause all other elements in the document to have to "re-flow", nor will the entire document have to "re-paint". In fact, when working with dynamic sizing or animations it is strongly recommended that you take elements out of the flow this way or performance can suffer.
Beyond this, understanding how absolute, relative and fixed positioning work is essential.
Absolute Positioning positions the element relative to its nearest ancestor that, itself, has been manually positioned or the body element if no ancestor has been positioned. The element is taken out of the flow and any space the element was taking up in that flow is removed.
Relative Positioning positions the element as an offset to its original location in the normal flow, but leaves the original space that the element took up in the document even though the element is now in its own layer.
Fixed Positioning is similar to absolute, except that the position is not relative to anything. It is fixed at an exact location you specify.
While all of these will pull the element into its own layer, how the layers are stacked (via "stacking contexts") are dependent upon which type of positioning you've used and the structure of the elements being positioned.
These are the reasons to use position. If you are not in need of new layers, using CSS float, flexbox are tools that can offer alternative ways to design a layout.
margin and padding should really not be used for the layout itself. They are used for small tweaks within a layout.
In summary, the default way the a browser lays out the contents of a page is the CSS Box Model, but using CSS position is one way to have certain content use that box model in different layers from the main content. CSS floats offer another, separate layout algorithm and Flexbox offers yet another. In the near future, the CSS Grid specification will be standardized and yet another layout paradigm will be available.
But margin and padding are not layout models. They are just tools to use in whatever layout model you happen to be using.
First off, i'm not really a good coder. I'm an IT but more of an infra guy but i do understand concepts about coding and maybe a bit of a good grasp about it. I am working with my website and it's under construction using wordpress. In my homepage, i plan to do it simple as it is and decided to use the page builder and use text or HTML (or any language) to maximize it. I hope some one can help me. I would really appreciate it.
Here it is:
homepage
Those images have onmouseover style and was able to do it.. the thing is i can't arrange it horizontally. :( and unable include arrow so they can move left or right to see each images :(.
I know i can also do the same on the icon part the moment someone help me about the concept i wanted.
Your question is pretty ambiguous as to the specific context of the solution.
However, in general the reason why things don't align horizontally when rendered on screen in a browser, is that most elements (including the popular <div>) have a default styling of display: block; which makes it take up the full width of its parent item if the parent itself has the same styling (cascading of this is a different discussion).
The general solution to this is to define the widths of the elements. And they will be placed on the same line to the extent that the widths of the elements allow for more than one to appear on the same line.
One way to solve this is to have elements widths defined in some way. This could be by applying a class with a width: 25%; for example. This would allow for 4 elements with the same width to fit on the line.
Alternately you can also set the display property value of the elements you want on the same line to inline-block. This will make those elements take the width of it's content (unless the content has no width specified). This will cause the elements to flow along the horizontal line like text would (it will re-flow on the resizing of it's parent element), until there are no more contiguous items containing the inline-block display property.
Since your description also showed carousel style navigation for these rows of items, it may be that these are not the full solutions you are looking for.
If you are using the Bootstrap framework, there is a built-in carousel feature which you could use to contain these horizontally aligned elements on separate "pages" of the carousel. Making this solution fully responsive is another challenge altogether.
I need to position each element of my HTML independently to each other i.e. each element should be able to have each own top and left margin. Setting the margin for an element should not impact or change the margin/positioning of any other element. The html is pasted in an email as a signature, so if a user inserts a line above the elements, they should however move down in unison. I have tried divs with positions and margins to no avail - it seems the first element always impacts the position of the second element. Please help!
Since it is e-mail, I would try using tables. I know tables are frowned upon for layout, but there are so many e-mail clients out there you really want to use the simplest markup possible so it just works and forget about semantics.
You might also want to look at example templates used by e-mail services like MailChimp, and see how they do it. Chances are those are tried and tested solutions that work.
This can be achieved by making an image the first element in the html. Further elements like can then be positioned by using the position:relative and margin properties. Simply subtract the image height from the top margin of the first text element. Using this technique, text can even be positioned above an image.
I am new to the world of coding, XHTML, CSS as well as PHP. I have come across numerous tutorials regarding positioning i.e. relative, absolute and fixed however have no idea when I have to use them or when it is the best to use them. I would appreciate some examples.
ALA has a nice tutorial (there're lots of examples)
CSS positioning can be especially useful when you need to position something that cannot be positioned within normal flow.
For understanding CSS positioning, you need to get familiarize with the "CSS BOX Model"
There are tons of tutorials online.
Here are some good ones with examples for beginners:
http://www.brainjar.com/css/positioning/default.asp
http://www.tizag.com/cssT/position.php
http://www.alistapart.com/articles/css-positioning-101/
Two that I frequently use are:
Relative positioning: helps you style elements relative to other elements. E.g. you want to move an input to the right relative to the div it's inside.
Fixed positioning: great for things like Refresh suggestions that get 'fixed' so that they follow you wherever you scroll.
It's best to play around with them and see for yourself.
To use CSS for layout effectively, it helps to know how it's used to position page content. This article gives an overview of the methods and rules that govern visual rendering in the CSS2 specification. It also points out some things to watch out for.
http://www.handycss.com/how/how-to-use-css-positioning/
My understanding is that we should use positioning either when we want to place any CSS element with respect to view port(position:fixed) or we want to place CSS element with respect to container(container get position:relative and child get position:absolute). But you should know limitation before using position absolute or position fixed. Absolute and fixed don't contribute to height of the parent element. This can create various unexpected results. Suppose you want to apply background image on relative element which has absolute element containing most of content. Background image will not spread over your content as it will not get height of content. Also you should not heavily rely on top/left/bottom/right for placing elements. They might help you to get expected arrangement on one view port size but can distort it completely on other view port size/resolution.
I have noticed a common technique is to place a generic container div in the root of the body tag:
<html>
<head>
...
</head>
<body>
<div id="container">
...
</div>
</body>
</html>
Is there a valid reason for doing this? Why can't the CSS just reference the body tag?
The container div, and sometimes content div, are almost always used to allow for more sophisticated CSS styling. The body tag is special in some ways. Browsers don't treat it like a normal div; its position and dimensions are tied to the browser window.
But a container div is just a div and you can style it with margins and borders. You can give it a fixed width, and you can center it with margin-left: auto; margin-right: auto.
Plus, content, like a copyright notice for example, can go on the outside of the container div, but it can't go on the outside of the body, allowing for content on the outside of a border.
This method allows you to have more flexibility of styling your entire content. Effectively creating two containers that you can style. The HTML body tag which serves as your background, and the div with an id of the container which contains your content.
This then allows you to position your content within the page, while styling a background or other effects without issue. Think of it as a "Frame" for the content.
I faced this issue myself redesigning a website. Troy Dalmasso got me thinking. He makes a good point. So, I started to see if I could get it working without a container div.
I could when I set the width of the body. In my case to 960 pixels.
This is the CSS I use:
html {
text-align: center;
}
body {
margin: 0 auto;
width: 960px;
}
This nicely centers the inline-blocks which also have a fixed width.
The most common reasons for me are so that:
The layout can have a fixed width (yes, I know, I do a lot of work for designers who love fixed widths), and
So the layout can be centered by applying text-align: center to the body and then margin: auto to the left and right of the container div.
Certain browsers (<cough> Internet Explorer) don't support certain properties on the body, notably width and max-width.
This is one of the biggest bad habits perpetrated by front end coders.
All the previous answers are wrong. The body does take a width, margins, borders, etc. and should act as your initial container. The html element should act as your background "canvas" as it was intended. In dozens of sites I've done I've only had to use a container div once.
I'd be willing to be that these same coders using container divs are also littering their markup with divs inside of divs--everywhere else.
Don’t do it. Use divs sparingly and aim for lean markup.
I later found this, years after my answer, and see that there are some follow up replies. And, surely you jest?
The installed placeholder site you found for my domain, which I never claimed was my markup or styling, or even mentioned in my post, was very clearly a basic CMS install with not one word of content (it said as much on the homepage). That was not my markup and styling. That was the Silverstripe default template. And I take no credit for it. It is, though, perhaps one of only two examples I can think of that would necessitate a container div.
Example 1: A generic template designed to accommodate unknowns. In this case you were seeing a default CMS template that had divs inside of divs inside of divs.
The horror.
Example 2: A three column layout to get the footer to clear properly (I think this was probably the scenario I had that needed a container div, hard to remember because that was years ago.)
I did build (not even finished yet) a theme for my domain and started loading content. For this easily achieved example of semantic markup, click the link.
http://www.bitbeyond.com
Frankly, I'm baffled that people think you actually need a container div and start with one before ever even trying just a body. The body, as I heard it explained once by one of the original authors of the CSS spec, was intended as the "initial container".
Markup should be added as needed, not because that’s just the way you've seen it done.
div tags are used to style the webpage so that it look visually appealing for the users or audience of the website. Using container-div in HTML will make the website look more professional and attractive and therefore more people will want to explore your page.
Well, the container div is very good to have, because if you want the site centered, you just can't do it just with body or html...
But you can, with divs. Why container? It’s usually used, just because the code itself has to be clean and readable. So that is the container... It contains all of the website, in case you want to mess around with it :)
Forget the container. It's just a habit from the old, very old days.
Everything you can do using a div—you can also do it on a body tag.
I've never heard of issues using a div class="container" markup. But I have heard of issues using body as a top level container. See this article. Stick with the tried and true; who knows what browsers will do in the future.
Most of the browsers are taking the web page size by default.
So, sometimes the page will not display same in different browser. So, by using <div></div>, the user can change for a specific HTML element. For example, the user can add margin, size, width, height, etc. of a specific HTML tag.