Learn VBA & Macros in 1 Week!

CSS - Trouble With Positioning Dynamic Banner

Full Excel VBA Course - Beginner to Expert

Trouble With Positioning Dynamic Banner	View Content

I have a problem that I've been wrestling for the past hour and a half, and I've come to the conclusion that I will most likely never solve it on my own, so here I am.

I have a header area of a website. It has a logo(basically the name of the website in a fancy font). The logo is in the bottom-left area of the header.

I also have a banner. This banner can be anywhere from 468x60 to 728x90 pixels in dimension, depending on user input from a back end.

I want the banner positioned near the bottom-right of the header, with a bit of space in between it and the right edge of the browser window.

I'm having a lot of trouble accounting for the varying banner sizes. I can't use margins and floats to position the banners because the banner image size changes, therfore I thought it would be a good idea to use absolute positioning (relative to the header). This works perfectly, except when I resize the window, the banner overlaps the logo image. So, I guess I can't use absolute positioning.

My HTML is:

Code:

<body>
	<div id="header">
			
		<div id="header_ads">
		<?php display_banner() ?>
		</div>
			<h1 id="heading"><span class="invisible">This is the heading</span></h1>
	</div>
</body>

My CSS is:
Code:

* {margin:0;padding:0;}

body {width:100%}

.invisible {visibility:hidden;}

/*Header*/
#header {margin-bottom:3em;background-color:rgb(80, 80, 82);padding:0 0 0.2em 0;height:8em;width:100%;position:relative;}

#header #heading {background:url("../images/logo.jpg") no-repeat;height:70px;width:400px;position:absolute;top:1.6em;left:1em}

#header_ads {float:right;margin-top:-1.5em;margin-right:1em;position:absolute;bottom:0.3em;right:4em}

The above CSS/HTML yields the exact desired result, but does strange things when the browser window is resized...

I would greatly appreciate any help!

Full Excel VBA Course - Beginner to Expert

Similar Tutorials

Having Trouble With Centering A Banner.

Positioning Banner On Top Of Header Background

Banner Positioning Movement When Resizing Window

Div Positioning Trouble

Positioning Trouble

Trouble With Picture Positioning

Trouble Positioning Elements

Dynamic Div Positioning

Trouble Positioning A Menu And Content Box.

Trouble Positioning A Menu On The Page

Dynamic Positioning With Divs

Trouble Positioning Menu Next To Image... Unwanted Break

Css Positioning - Footer Positioning Problem

Expandable Banner

Adjusting Banner

Stretchy Css Banner?

Corner Banner Within Div

Banner Rendering In Ie7

Logo With Banner Positioned To The Right

Css Layer Over Flash Banner

Learn VBA & Macros for Excel in 1 Week!

Having Trouble With Centering A Banner.

Similar Tutorials

Positioning Banner On Top Of Header Background

Similar Tutorials

Hi everyone,
I'm somewhat new to CSS and so far I have been able to solve everything except for this one problem.

This is code from the styles.css file in the blog that I'm building, now this is a free template that I'm using and there is also a header.php file but that has only php code.

In the frist part of the css file this appears:

body {
font-family: Verdana, sans-serif, Arial;
font-size: 80%;
color: #232323;
margin: 0px;
padding: 0px;
background: url(images/header.png) no-repeat top;
}

The background line is the image that appears as the background for the header portion of the site, and it is 960px X 150px.

Then there's this part:

#header {
float: left;
width: 960px;
height: 156px;
}

Then towards the middle of the code there is this other part which also relates to the header:

.top-header {
float: left;
width: 960px;
height: 62px;
padding-top: 60px;
}

.top-header a {
color: #000000;
text-decoration: none;
}

.top-header h1 {
color: #000000;
margin: 0px;
padding: 0px;
float: left;
width: 960px;
font-size: 26px;
}

.top-header p {
color: #000000;
margin: 0px;
padding: 0px;
float: left;
width: 960px;
}

So the problem I'm having is that I have designed a logo that is about 460px X 100px and I want this to go on top of the already defined background layer above in the body part. I have tried "positioning" and also tried to set it as another background and it just appears all over the place. Also the picture I crafted in photoshop has an invisible background so that only the decorative text of the log shows up, so if I use the background method to insert it, it appears with a white background.

So any pointers on this would be a great help. I have tried researching this all kinds of ways and I'm still not sure what to do

Thanks
Chas.

Banner Positioning Movement When Resizing Window

Similar Tutorials

Whenever I change my browser window size all my content moves with it. I feel like this has something to do with my banner being in %'s and not absolute and pixels but I have no idea how to change it. not being able to put in URLS and images probaly won't help.
If any 1 has skype please add me ethan.pidcock. I've tried fixing this for like 8 hours. My css knowledge is bad sadly

Div Positioning Trouble

Similar Tutorials

In the header section design, I have three parts. Menu; upper left, gallery; lower left and Logo right. So in my stylesheet, I created three parts. The problem I am having is logo is not centered as in the design (check the attachment). I could not figure why not. Looking for suggestions.

http://www.refinethetaste.com/AT/

Positioning Trouble

Similar Tutorials

I'm having trouble with creating a nav bar in css. The code I'm using is this for the html:

Code:

<div id="wrap"> 	<div id="nav"><a id="home" href="#" title="home"><span>home</span></a> 	</div> </div> <div id="bottom"></div> </div>

and this for the css:

Code:

@charset "utf-8"; /* CSS Document */ body { overflow:hidden; padding:0; border:0; margin-left:50%; color: #000000; line-height: 100%; font-family: verdana; font-size: 12px; text-indent: 0cm; background-image: url('bg.png'); background-position: top center; background-attachment: fixed; background-repeat:repeat-x;  }  #bottom { position:absolute; height:100%; width:100%; background-image:url('lbg.png'); background-position:bottom center; background-attachment:fixed; background-repeat:no-repeat; margin-left:-340px; }  #wrap { background-color: #FFFFFF; border-color: #660000;  border-style: double; position:absolute; width:900px; height:750px; margin-left:-450px; }  #nav { height:50px; }  #home {   display: block;   width: 226px;   height: 50px;   background: url("home.gif") no-repeat 0 0;  }  #home:hover {    background-position: 0 -50px; }  #home span {   display: none; }

The button shows up but only half the link works! And I have put in other bottons to the right of it and they don't work at all... can anyone help pls? thank you.

Trouble With Picture Positioning

Similar Tutorials

I have a 3 column layout: 1st -> 350px, 2nd -> 500px, 3rd -> remainder of containing div.

In the 2nd div, I have 15 pictures arranged to form the letter R, each picture is 100x100 px. I am not using absolute positioning.

I want the first and second column to have a background color of black that is 100% the height of the viewport. The middle column should have a white background and be 100% height. The problem is, the margins I am using for the pictures is throwing things off and I'm not sure how to fix it short of not arranging the pictures the way I want. Is there another way to arrange them to achieve the R shape?

Code:

<div id='container'>
     <div id='first'></div>
     <div id='second'>All of the images are loaded here.</div>
     <div id='third'></div>
</div>

Code:

#img1, #img2, #img3, #img4, #img5, #img6, #img7, #img8, #img9, #img10, #img11, #img12, #img13, #img14, #img15, #img16, #img17, #img18, #img19, #img20 {
	display: block;
	border: 3px solid #B8860B;
	width: 100px;
	height: 100px;
}
#img1, #img2, #img3, #img4, #img5 {
	margin-left: 10px;
}
#img1 {
	margin-top: 60px;
}
#img2 {
	margin-top: 10px;
}
#img3 {
	margin-top: 10px;
}
#img4 {
	margin-top: 10px;
}
#img5 {
	margin-top: 10px;
}
#img6 {
	margin-top: -590px;
	margin-left: 125px;
}
#img7 {
	margin-top: -136px;
	margin-left: 240px;
}
#img8 {
	margin-top: -76px;
	margin-left: 355px;
}
#img9 {
	margin-top: 10px;
	margin-left: 380px;
}
#img10 {
	margin-top: 10px;
	margin-left: 355px;
}
#img11 {
	margin-top: -87px;
	margin-left: 240px;
}
#img12 {
	margin-top: -125px;
	margin-left: 125px;
}
#img13 {
	margin-top: 30px;
	margin-left: 305px;
}
#img14 {
	margin-top: 10px;
	margin-left: 365px;
}

Trouble Positioning Elements

Similar Tutorials

Im having issues positioning a div that contains a background image. The idea is to have the image positioned in the lower right hand corner of the screen. I get it there, but then the problem is that the image floats to the height of the div it contains.

i need it to just be in the bottom right hand corner. how can I do this?

here is the page, im so embarrased to have to ask this but i swear, the CSS people could not have made this more confusing if they tried.

http://www.doublethinkdesigns.com/main.php

Dynamic Div Positioning

Similar Tutorials

Hi all-

I am building a tableless site out of divs/css and cant seem to get the one div positioned properly. I need to make the site as dynamic and liquid as possible so absolute positioning (i.e. width:320px; etc) is out of hte question...

http://verticalextreme.com/about/hours_pricing.html

i am trying to have the HOURS div and hte PRICING div inline with each taking up 50% of the main content width

i currently have the following css:

Code:

#hours {
	display: inline;
	clear: none;
	width: 50%;
}

#pricing {
	clear: none;
	display: inline;
	width: 50%;

}

Thanks for any help in advance - rock on

Trouble Positioning A Menu And Content Box.

Similar Tutorials

I've been developing a content management system, and one of the final things I have to clean up is a stylesheet problem involving the float property. I'm trying to position two boxes next to each other id: menu and id: content, but until I set the width property on content it would drop beneath menu. I want the content box to fill any remaining space to the right of the menu, with appropriate padding and spacing and such.

Can anyone help make suggestions as to the best way of achieving this?

Here is some of my css code which is also viewable on the website which is located at: 8< snip >8

Code:

#container 
{
	margin: 1em 4em 1em 4em;
	/* width: 750px;  dynamic width */
	text-align: left;
	background: #FFFFCC;
	border: 2px solid black;
}

#menu 
{
	float: left; 
	margin-top: 20px;
	margin-bottom: 20px;
	margin-left: 20px;
	margin-right: 20px;
	font-family: Verdana;
	font-size: 12px;
	width: 150px;
	display: inline;
}

#content 
{
	float: right;
	width: 20em;
	margin-top: 0px;
	margin-right: 20px;
	margin-bottom: 0px;
	/* margin-left: 170px; */
	padding-top: 5px;
	padding-left: 20px;
	padding-bottom: 20px;
	border-left: 2px solid black;
	height: 100%;
}

Thanks for trying to help, I've been getting really frustrated trying to get css to work in both ie and firefox.

BTW: I've been finding the Web Developer firefox extension very helpful for this kind of work.

Trouble Positioning A Menu On The Page

Similar Tutorials

Hello! I'm hoping someone can help me out here. I'm sure it's something simple I'm overlooking, but I've trialed-and-errored it enough and it's time to seek help!

I'm trying to adjust the location of the "main menu" on this page he

http://www.jeditemplearchives.com/hasbrodb/welcome.php

Currently, it is set in reference to the side of the browser in this CSS code:

Code:

.menuContainer
{
	position: absolute;
	top:113px;
	right:210px;
	margin: 10px;
	margin-top: 50px;

}

I've tried making the position relative but it really whacks out the page when I do that. I want to make it relative to the border of the content so that no matter what size resolution or if the browser is minimized it stays fixed and doesn't float left. I was able to do this to the links directly above it, but the same thing doesn't seem to work for this. Here's the code for the 'advanced' and 'login' links:

Code:

#header ul.headerLinks
{
	list-style-type: none;
	margin: 0px;
	padding: 10px;
	position: absolute;
	right: 0px;
	top: 95px;
	white-space: nowrap;
}

Thanks for any suggestions anyone comes up with!

Dynamic Positioning With Divs

Similar Tutorials

Is there a way to add a property to a div that will position it according to the div above it? I'm trying to create content pages for my site, but the text on some is much longer than others. Giving a new id to each one just seems too tedious, there must be something I'm missing.

Trouble Positioning Menu Next To Image... Unwanted Break

Similar Tutorials

Hey guys,

Here's my problem:

http://www.3rdcoastpc.com/moonstoys/

Basically I want the menu in the rounded rectangle area, not underneath (outside) of it. You can see what's happening in the URL. If I use a span tag instead of a div in the head_content class, the background (the right corner of the rounded rectangle) doesn't show. I'm not sure what's going on here because in my HTML I'm putting the <ul> tags right after the logo image, so I would think that it would sit next to the logo and not underneath it. I'm just confused as this is my first attempt at doing a tableless design.

Here's my css:
http://www.3rdcoastpc.com/moonstoys/main.css

and the HTML:
http://www.3rdcoastpc.com/moonstoys/index.html

Thanks in advance!
Dustin

Css Positioning - Footer Positioning Problem

Similar Tutorials

I have problem with footer DIV in this layout (the order of DIV's in code after <body> should be - content, left, right, right2, header, footer - positioned centraly with fixed values):

It needs to be sticked to fit after content of 4 column DIV's like it is in example.

http://www.split.info/dev/less-content/
http://www.split.info/dev/more-content/

Code:

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Title of website</title>
<style type="text/css">
<!--
body {margin: 0px 0px 0px 0px; background-image:url(images/bg.jpg); background-position:center; background-repeat:repeat-y;}
#wrapper {width: 1000px; margin: 0 auto; text-align: left; position: relative;}
#contentPane {width: 468px; float: left; position: absolute; margin-left: 3px; padding: 0px 0px 0px 0px; background-color:#0099FF; left: 126px; top: 150px;}
#leftPane {width: 125px; float: left; left: 0px; position: absolute; background-color: #99FFFF;  top: 150px;}
#rightPane {width: 173px; float: right; right: 226px; background-color:#999966;  position: absolute;  top: 150px;}
#rightPane2 {width: 220px; float: right; right: 0px; background-color:#99FF00; top: 150px; position: absolute;}
#headwide {background-image: url(images/head_bg.jpg); background-position: center; background-repeat: no-repeat; width: 100%; height: 142px; position: absolute; top: 0px;}
#header {margin: 0pt auto; width: 1000px; background-color:#CC6600; height: 142px; }
#footer {position: absolute; width: 100%; top: auto; bottom: 0px; background-color: #CCFFCC; height: 50px;}
-->
</style>
</head>
<body>
<div id="wrapper">
	<div id="contentPane">Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
	</div>
	<div id="leftPane">Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
	</div>
	<div id="rightPane">Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
	</div>
	<div id="rightPane2">Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
	</div>
</div>
<div id="headwide">
	<div id="header">Header area</div>
</div>
<div id="footer"><strong>Content from above 4 column div's need to push footer DIV below (after them)! </strong>Footer area that is on bottom of div with biggest height (content, left, right or right 2 pane)... foooter follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns). Current state like it is in this document happens that if you add more data f.i. in content area (outside one screen), it will go trough footer... So footer can be either moved in code after rightpane2 div after end of wrapper. Pls help. Thx!</div>
</body>
</html>

Content from above 4 column div's need to push footer DIV below (after them)!

Foooter need to follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns).

Current issue like it is in this layout happens that if you add more data f.i. in content area (outside one screen), it will go trough footer...

So in your resolution footer can be also moved in code after rightpane2 DIV, after end of wrapper. Pls help. Thx!

Echo

Expandable Banner

Similar Tutorials

hmm i cant get this to work...

i have the left side of the banner that needs to be expandable wich is a long picture.....and the right side is 10px wide.

how can i get this 2 in a div wich get width by % and center aligned on the page?

and also on a layer above other stuff

Adjusting Banner

Similar Tutorials

Hi and thank you in advance for any advice or help.

my website: http://earlystartdc.com/

Im having trouble trying to find the right css code so that i can adjust the banner underneath the menu in order to remove the white spaces in the module. I would like for the banner to be at margin 0 so that its all the way to the top without any white space in between.

any help??

Thank you

P.s - This is what my css files look like from my template/css folder

.

Stretchy Css Banner?

Similar Tutorials

I'm trying to figure out a way to create a banner across the top that consists of an image, but whose right edge extends all the way to the right edge of the browser -- regardless of the window size.

At the same time, I need to do the same thing with the left column: fill it with an image whose bottom edge extends all the way to the bottom of the window.

I can do this with tables, but can't figure out a cross-browser way to do it in CSS.

The "stretchy" right edge of the banner is simply a 1 pixel wide slice of the banner's right edge, repeated as necessary. Similarly, the "stretchy" bottom of the left column is a 1 pixel slice of the bottom of the column's image. I can't get these to appear in Mozilla.

Here's my code:

Styles.css:
PHP Code:
.banner
  {
  background-image:url(./images/banner-fill.gif);
  width:100%;
  }

.nav
  {
  background-image:url(./images/nav-fill.gif);
  width:104px;
  height:100%;
  }

.content
  {
  position:absolute;
  left:140px;
  top:140px;
  }

Template.htm:
PHP Code:
<html>
<head>
<title>Template</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>

<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="height:100%;width:100%">
<div class="banner"><img src="images/banner.jpg" width="800" height="134" border="0"></div>
<div class="nav"><img src="images/nav.jpg" width="104" height="327" border="0"></div>
<div class="content">
  <p>Page Content</p>
</div>
</body>
</html>

Corner Banner Within Div

Similar Tutorials

Banner Rendering In Ie7

Similar Tutorials

Hi there,
I have the following in my css file:
} #headerBannerWrapper {
background-image: url(/GREENLOGO.jpg);
background-position: bottom left;
background-repeat: no-repeat;
background-color: #DEF2B0;
padding: 0px;
margin: 0px;
} #headerBannerWrapper img {
padding: 0px;
margin: 0px;
vertical-align: bottom;
However the banner doesn't get rendered in IE7. It renders OK in IE8

Any help most appreciated.

The above is linked to the following class:
.clearFix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;

NB If the banner has content inside then it renders OK, however if there is no contents inside then the banner (green background) is not displayed.

Logo With Banner Positioned To The Right

Similar Tutorials

Css Layer Over Flash Banner

Similar Tutorials

Hi, I need to add some content (small div) over the top of a flash banner. I tried adding wmode="transparent" to both the object and embed tag but that didnt work. Any other suggestions?

thanks