How to make a banner always visible?

[Tata]

I play wit a template, where the whole page is organized in rows (banner_row, locator_row, content_row et.). There is a logo planned in the banner_row and I would like the baner row keep always visible, while the rest of the page would scroll behind the banner (similar to fixed admin bar when editting the webpage). I can§t find the trick. It would though have something with z-indexing to do?

[maeg]

Hi

Code: Select all

position: fixed;

I think that will work

[Tata]

Exactly, finally I have found this. But another problem flowed out from this solution.
I have:

Code: Select all

<div class="banner_line">BANNER</div> //with position:fixed
<div class="big_navig_buttons_line">BIG BUTTONS</div> // with padding-top value of the banner line height and links e.g.: href="./?My_page#content
<div class="content_line">CONTENT</div> // with anchor "#content"
<div class="newsboxes_line">NEWSBOXES</div>
<div class="footer_line">FOOTER</div>

When the banner line isn't in fixed position, the links work fine and the whole page moves with the anchors in the top. When the banner line is in fixed position, the anchoring doewsn't work and the page doesn't move.
Have allo at link in PM.

[cmb]

When the banner line is in fixed position, the anchoring doewsn't work

Unfortunately, this is how it works, and there's not much you can do against it, AFAIK. One option is to set an appropriate margin-top for the anchors, what most likely looks awful. Another option is to correct the "displacement" with JavaScript, what obviously won't work if JavaScript is disabled.

[Tata]

Well, an absolutely dirty trick is possible if making a secondary template without a banner and assign it to the content pages. Namely in my template I have large newsboxes over the content. In these newsboxes there are large buttons calling the rest of the content.

[Tata]

The problem with banner is solved (another way, however).
Now something different wonders me.
[ external image ]
I have in CSS:

Code: Select all

/*content + right column line */
.main_line{
	min-height: 500px;
	padding: 20px 0;
	background: rgba(148,32,146,0.6);
	}
	/* content container with space to the right */
	.main_left{
		width: 65%;
		min-height: 500px;
		height: 400px; background: yellow;
		float: left;	
	}
		/* visible content */
		.main_left_in{
			width: 100%;
			min-height: 500px;
			}
		/* right columnt */	
	.main_right{
		width: 35%;
		height: 200px;
		float: left;	
	}

In template then:

Code: Select all

<div class="main_line">
	<div class="limit">
		<div class="main_left">
			<div class="main_left_in">
				<div class="links_btn">
					LILNKS BUTTONS
				</div>	
				<div class="break"></div>
				<div class="content">
					<?php echo editmenu();?>
					<?php echo content();?>
					<div class="break"></div> <!-- clear:both -->
				</div>
				<div class="break"></div>
				<div class="subnav_btn">
					<?php echo previouspage();?>   |   
					<?php echo top();?>   |   
					<?php echo nextpage();?>
				</div>
				<div class="break"></div> <!-- clear:both -->
			</div>
			<div class="break"></div> <!-- clear:both -->
		</div>	
		<div class="main_right">
			<div class="box_in">
				<div class="box">BOX 1</div>	
				<div class="box">BOX 2</div>	
				<div class="box">BOX 3</div>	
				<div class="box">BOX 4</div>	
				<div class="box">BOX 5</div>	
				<div class="box">BOX 6</div>	
				<div class="box">BOX 7</div>	
				<div class="box">BOX 8</div>	
			</div>
			<div class="break"></div> <!-- clear:both -->	
		</div>	
		<div class="break"></div> <!-- clear:both -->
	</div>
	<div class="break"></div> <!-- clear:both -->
</div>

I don't know what is wrong, but the editor doesn't use the full width of parent containers and it overlaps the height of them.

[cmb]

I assume the following is the problem:

Code: Select all

.main_left{
      width: 65%;
      min-height: 500px;
      height: 400px; background: yellow;
      float: left;   
   }

You set a height of 400px for the container, but the editor_height in the configuration is apparently not limited accordingly (you'll have to use less than 400, I believe, maybe 300 or so).

Regarding the reduced with: I'm not sure how to fix it, but we had a similar problem with one of the new standard templates. In that case it was caused by a missing width property, IIRC. Anyway, you could force an certain editor width in the init_*.js file, if all else fails.

[Tata]

You set a height of 400px for the container, but the editor_height in the configuration is apparently not limited accordingly (you'll have to use less than 400, I believe, maybe 300 or so).

Yes, that was it. It is my way to start new template with functionless containers and differ them by collors. This one have I overseen.

Regarding the reduced with...

Again, I used old content, where some container were put in with defined classes. This caused the CSS conflict.
Now everything works as expected.

[DaniNet]

Sometimes it's the small things, that are hard to find but easy to fix, but cause the stupidest problems.