I am trying to remove the background image in the header area of this site and place a rectangular javascript ad on the right of the logo. The various div blocks that the header area consists of are extremely confusing and any content I place next to the logo end up beneath it instead of on the right, even if it's a a few characters of text. There seems to be plenty of room to the right of the logo, so I'm not sure what's wrong.
There's nothing strange going on here; your logo element (#rt-logo) is a block element, which by default doesn't allow inline elements to be positioned next to it. You can either absolutely position your ad box - the parent div of class .rt-omega is relatively positioned, making this simple - or you could give #rt-logo either a float: left; or a display: inline-block; to do what you want.
That said, this is a very basic problem and you might want to take a look at a css tutorial or two. If you're going to spend any amount of time working on websites, it will be worth your while.
Related
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.
I am developing an information board for a university club of mine. I almost have it complete, except I have one annoying bug left: The center image expands beneath the viewport.
The image is supposed to shrink and expand to stay between the two side columns, which it does because of
a percentage width css attribute. However, I would like it to not expand further once the bottom of the image makes contact with the bottom of the viewport; it should simply remain centered.
For the life of me I cannot get a solution that both stops it from growing beyond the bottom of the page without mangling the aspect ratio of the image.
I thought I was on to something with object-fit: contain but alas, it appears width will always prioritize itself over object-fit.
Any help would be much appreciated, as I'm quite new to web dev.
Here is a link to a client-side view of what I have so far:
https://jsfiddle.net/ydumcrnk/
Have you looked into display: flex? You can wrap a div around the three .column classes, give that container div a property of display:flex and then you can add some subsequent properties that will line up the .column classes the way you want.
Here is a page on the subject I reference often.
I have to add a small banner at the top of a page and am having trouble with pushing the existing content down 40px so I can fit in the banner above.
The current layout has a lot of strangley positioned elements and they all keep moving out of place if I wrap the whole body area in a relative block div with a top margin.
Is there a technique that should work for this other than wrapping in a div like this?
If you do this, then you have to be careful that your CSS positioning on the divs that you want to move is not absolute. Because if it is, then they will just stay where they are. It should however, work if you add a div that encompasses everything and put a few pixels of padding on the top with CSS.
Why not just put a at the top of the page and set that div to clear:both afterwards. This should shift the rest of the page down 40px, or whatever you set the height of that div to. Of course, I'm just guessing here without looking at code and/or a sample site. Since I assume by strangely positioned you mean weird usage of position:absolute, this should allow your current setup to remain consistent.
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.
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/