Test

position banner at the top as the top layer

I removed your inline CSS styles and applied them via CSS rules as follows:

html, body < height : 100%; min-height : 100%; >#banner < position : absolute; top : 0; left : 0; height : 100px; width : 100%; overflow : hidden; background : url('../../images/banner_repeat.jpg') repeat-x; z-index : 2; >#content < position : absolute; top : 100px; left : 0; right : 270px; bottom : 100px; overflow : auto; >#right_column < position : absolute; top : 0; bottom : 0; right : 0; width : 270px; z-index : 3; background : url('../../images/treetrunk7.png') repeat-y; >#footer < position : absolute; left : 0; bottom : 0; right : 270px; height : 100px; overflow : hidden; background : url('../../images/grass.png') repeat-x; z-index : 2; >

And I changed how your HTML is nested to be like this:

BONUS ROUND

You can hide the right column when the page is too narrow using CSS media queries:

@media all and (max-width: 500px) < #right_column < display : none; >#content, #banner, #footer < right : 0; >> 

Here is a demo: http://jsfiddle.net/Wyvk8/1/ (if you make the page less than 500px wide the right column will disappear, only in browsers that support media queries)

You need to apply position: fixed to your top banner, I presume element id «banner_ul». This means it will sit outside the page layout like an absolute positioning, however it is unaffected by scrolling; it will always sit top: 0; left: 0; in relation to the browser window. Remember to appropriately adjust all containers below this so they sit [the banner’s height] from the top of the window, otherwise they will overlap with the banner when the page loads.

I’m not quite sure what you are asking then. I already see the banner above the main text. What do you mean by making it a layer?

It seems you have wrapped your banner div arround all the elements and therefor it wont be layered on top of the container div because it affects that div too since its inside of the banner div.

Источник

Add image banner on top of fixed navbar

I am trying to push an image banner on top of a page using JS. The problem I am facing is with fixed navigation bar. My goal is to put the navigation bar under the image banner but when you scroll down below the image banner, the navigation banner should be fixed again on top of the page. Here is HTML code (the div .top-banner could be also placed outside of wrapper if it is easier/better)

 
 
 
  
Content
 
 

3 Answers 3

(function ($) < $(document).ready(function()< // hide .navbar first $("#nav").hide(); // fade in .navbar $(function () < $(window).scroll(function () < // set distance user needs to scroll before we fadeIn navbar if ($(this).scrollTop() >100) < $('#nav').fadeIn(); >else < $('#navr').fadeOut(); >>); >); >); >(jQuery)); 

Add this jquery and try. You can embed this within script tag

A Javascript solution is to use scrollTop to detect how far the user has scrolled, and toggle a class that applies position: fixed

var banner = document.getElementById('banner'), threshold = banner.offsetTop + banner.clientHeight, nav = document.getElementById('nav'); window.addEventListener('scroll',function() < var scrolled = document.body.scrollTop; if (scrolled >= threshold) < nav.classList.add('fixed'); >else < nav.classList.remove('fixed'); >>)

#nav < padding: 0; background: #f9f9f9; margin: 0 0 0 133px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; background-color: black; height: 51px; font-size: 0; border-top: 0; display: table; min-width: 762px; >#nav.fixed < position: fixed; top: 0; >.top-banner img

 
 
 
  
Content
 
Scrolling
 
Scrolling
 
Scrolling
 
Scrolling
 
Scrolling
 
Scrolling
 
Scrolling
 
Scrolling
 
Scrolling
 
Scrolling
 
Scrolling
 
Scrolling
 
Scrolling
 
Scrolling
 
Scrolling
 
Scrolling
 
Scrolling
 
Scrolling
 
Scrolling
 
Scrolling
 
Scrolling
 
Scrolling
 
Scrolling
 
Scrolling
 

Источник

CSS: Thin banner on top of page (like the orange one on this page)

I need to put a thin banner on the top of the page kinda like the orange notification one on this page. I need it to be absolutely positioned though, because when you click on it it needs to drop down (over the current page, not pushing the current page down). The banner needs to stretch the entire width of window but the content needs to be within 800px in the middle. I have it already made but I am having trouble with the CSS positioning of it. Thanks!!

2 Answers 2

Below is an example. The main #banner element stretches the full screen and is pinned to the top of the viewport using position: absolute; top: 0; left: 0 . The width: 100% makes it stretch the full width.

The #banner-content is where you put your content. This is centered and fixed at 800px in width. I’ve put a border around it so you can see.

Note: I’ve also ‘reset’ the margins and padding of all the elements to clear the default padding. You might want to use something like Eric Meyer’s Reset CSS in your final application.

    * < margin: 0; padding: 0; >div#banner < position: absolute; top: 0; left: 0; background-color: #DDEEEE; width: 100%; >div#banner-content < width: 800px; margin: 0 auto; padding: 10px; border: 1px solid #000; >div#main-content  
 
This is your banner text, centered and fixed at 800px in width
 
 
Main page content goes here
 
   

Источник

Inserting a Banner Image on Top of Every Page CSS

I am learning how to create a website and I have stumbled upon a problem I can’t figure out. I want to place a banner on the top of every webpage page of the site, and I was wondering if this can be done using a .CSS. I have a background already on the .CSS but I can’t seem to insert a picture properly on top. This is my code:

@NicholasV. The «pic2.png» is not the banner i want to put, that is the background, which is displaying properly. The banner I want to insert at the top of every page is another image, which i do not know how to insert.

2 Answers 2

Like this.

JS Fiddle: http://jsfiddle.net/SinisterSystems/Yd4d6/

Or do you want it to dynamically apply the element to your page?

For further insight, we need more data:

• Will your banner be static, that is, always the same size and same place?
• Will this show up on EVERY page, and do you want it just PLACED into the DOM?

If you are trying to actually add elements to your page, CSS only allows to perform pseudo operations with existing elements on your page.

i.imgur.com/fPU9Sdc.png I have attached that image that maybe clarifies what I am asking for. I already have a background that is working correctly (pic2) which is represented in black. Now I want to add a small banner on top of EVERY page and call the .css file from every page. I was wondering if this could be done using .css since I cannot find anything about it.

CSS will not auto generate it, but I can give you an easy solution if you are able to add an item to every page, append an element to every page’s html, be it PHP, JS, or whatever.

Yeah that was what I was doing, but I was wondering if it could be done via CSS because lets say for example i have a huge website with 100 pages and I want to change the banner every 4 months. I would have to open all 100 files and change manually. So i wanted to know if there was a way around that. Guess not. Thanks!

You absolutely can easily! You would have to have

Oh yes that worked! I think i was misunderstanding you because you said something about putting a code on top of every page and i immediately thought that you were referring to putting the img location on every page. But now i understand, thanks!

Источник