I am pretty new to HTML and CSS, and one of the things I have read is that you should keep your <header> and <main> tags separate. When I do this, however, it makes it harder for me to align content on a page the way I want. Currently I'm having issues with the content of the main overlapping with the content of the header elements, and they are both occupying the same space. I tried setting the :root to display: flex;, and then flex-direction: column;, but this didn't seem to prevent the elements from overlapping. I would like them to behave as if the header and main were both in the same flexbox and aligned in a single column, but so far I haven't seen anything addressing this issue. I have attached a Codepen link of what I have so far (the borders in the CSS were just to help me visualize where things were going wrong).
After continuing to mess around with some of the values in the CSS selectors, I found that the one causing the issue was the position: fixed. I knew that I wanted the nav-bar to remain at the top of the screen when scrolling, but I didn't fully understand the implications of having other elements in the same page as a fixed element, without using a relative parent.
When I used position: fixed; it caused that element to essentially be disregarded from the normal flow of the page, and other elements filled the top, making them appear stacked on top of one another. In my particular case, I chose to go with sticky instead, as this accomplishes the same objective without complications.
Related
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'm trying to use a sticky footer, but it seems to having a conflict with my css, I'm following this tutorial, but I want to know why the footer is in the middle of the page, what do I have to do to fix it.
My code:
jsfiddle.net/q2Vuq/
The reason why you're seeing this strange behaviour with the sticky footer is because of your usage of position:absolute; on a number of your elements. Namely, the ones wrapped within the #navigation div.
Take a look at this (this JSFiddle just illustrates the problem more clearly):
I've given the offending elements all a background colour (as well as the body), so you can see that these elements are actually causing the scroll bar to extend beyond the height of the body. Absolute positioning actually takes them outside of the layout - meaning they don't cause their parent #navigation to expand, which in turn does not cause its parent .page-wrap to expand, which ultimately results in the footer not getting moved down. The footer gets put to the bottom of the body (as a result of the sticky footer CSS), which isn't quite low enough since the absolute-positioned elements extend even further below (as they are ignored by the body).
So, with that in mind, how do you fix this behaviour? Unfortunately, your sticky footer relies largely on the assumption that all content will be figured into the layout above it, or at least that the wrapper element above it will be tall enough to account for all its contents. This makes your use of absolute positioning hard to keep.
The best solution is probably to remove your current usage of absolute-positioned elements in your document, and rework how you're going to place your elements. Since I don't know what design you're actually aiming for, I can't provide an example of this. An alternative is to place an internal wrapper element inside of .page-wrap, with a min-height set such that it goes below even the lowest absolute-positioned element. However, this second method isn't too flexible, and I wouldn't recommend it.
If this isn't what you were looking for, or need more assistance in this particular matter, let me know and I'll be happy to help further. Good luck!
so what I'm trying to do basically is have the HTML document extend vertically as I add more text, and at the moment it's just giving me some really weird problems, such as:
The body won't extend downward as I add more text
The footer isn't displaying at all at this point
There are some weird symbols being inserted into the document
The only way I know how to position things is absolute, and I don't know if this is causing some problems (such as getting text under the "Home" image?)
Here's the jFiddle: http://jsfiddle.net/9nYgb/
Any help is appreciated greatly, thank you!
Absolute positioning does tend to cause problems like that. Relative positioning is simple ... instead of using the top-left corner of the document as the origin for reference, the top-left corner of where the element was supposed to be is used as a reference. So <div style="position:relative;top:10px;"> will result in the element being 10px below where it would have been had no style information been provided.
When you position elements absolutely, you take them out of the document flow. This means that other elements will act as if they aren't there. It's good for placing a modal popup div on top of a page, but it's not good for laying out a whole page.
In general, when it comes to laying out a page, I try to stick to a series of divs with height and width set. You can use margin and padding to adjust layout, and float to make items stack up horizontally to one side or the other. Sometimes I also need to set a div's display to inline or inline-block to get them to appear next to one another and act like inline elements. You can also place divs within divs to group elements together and treat them as one by manipulating the outer container(s).
In general I don't find much need for absolute positioning in a page layout.
I have a html layout done using absolutely positioned div elements and a backgroung image. I want to keep the layout the same vertically (each individual part/page representing a data set). I do not wan't to change the div positioning from absolute as this messes up things and I am running out of time for this.
I realize I can have multiple body tags each for every data set and as this html will finally be generated from xml using xslt this is not a problem.
The issue is that as the div elements are absolute they do not appear in the subsequent body tag (only background image appears). I tried changing to relative and the div actually moves to 'next page' (body element), but as there are several divs, when all are laid out they get misaligned.
I will be grateful for some advice on how to tackle this either by fixing my html in some way that will not be too time consuming or by using a tool that can combine several html content in to one flowing page. Any other piece of advice is also very welcome.
From what you've posted, which could really use some of your HTML as an example of what you're trying to do exactly, you should be able to simply wrap each of your "pages" in a div with the position: relative CSS style.
The inner content will then be positioned absolutely from the boundaries of its parent wrap. You would then want to move most of the styles you currently have applied to your body element (like a background image) to the wrapper divs.
Basic example: http://jsfiddle.net/AsWCN/2/
Alright, so this is basically the usual "how to vertically center with CSS" question, but with some catches.
No Javascript. HTML and CSS only. CSS3 is fine as long as it's reasonably well supported by today's browsers.
The element's content, and therefore height, is not known. It may be anywhere from a few dozen to a few hundred pixels. In the future I might even have a script adding and removing elements inside, so it may change height as the user is interacting with it.
There is other content on the page - a navigation bar at the left and a menu at the top. These need to be accessible.
The approach I've used is the three-container-div method using display: table-cell, as documented at: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html this solves issues 1 and 2, but not 3.
http://imgh.us/vcenter.jpg shows the design and the problem. The yellow box is the innermost container. The red and green dotted boxes around the entire page (which have become somewhat blurred together due to JPEG encoding) are the outermost and middle containers respectively. (The out-of-place footer is a separate issue...)
The problem with this layout is the outer containers cover the entire page, and this makes it impossible to click on the navbar, because it's now "under" those containers. Z-index can move them to the bottom, but then it becomes impossible to click on anything inside the red box, because it's now "under" the page's main content box. (XHTML only allows a single element inside the <body>, so I've just wrapped it all in a <div>.) Even if the outer two containers have z-index: -100 and the inner container has z-index: 200, it still ends up under the main content box for some reason. (I did try various position attributes.)
The only solution I've seen is a new CSS3 property, pointer-events, that would in theory allow me to make events pass through the transparent containers as I'd expect; however this seems to be quite new and not yet supported by most browsers outside of SVG, and I imagine I'd have the same trouble as with Z-index.
I do want the element at the center of the page, not the center of the content area (i.e. ignoring navbars in the calculation of position), so placing the container inside the content area isn't an ideal solution. (I'm using this style on the login page as well, which has no navbars, and it'd look a bit strange if the "centered" elements were centered relative to a navbar that isn't always visible.)
In summary what I need is to center, without using Javascript, an element of unknown height on a page with other content at its edges, without covering any of the content with an invisible layer (and thus making it unclickable).
While this is obviously an old question and the OP has undoubtedly solved this problem, I figured I'd add a link to Chris Coyier's marvelous write-up on how to deal with this issue for future wayfarers in need of a similar solution.
http://css-tricks.com/centering-in-the-unknown/