CSS - Two Images With Backgrnd Banner Problem?

Hi All,

I am new to devshed and new to css stuff. I have a problem with a site i am currently building. http://www.foodaffairs.co.za

Basically there is a yellow link box underneath the flash image which in FF(Firefox) is out a little to the right and in IE out to the left. The yellow block is actually an image which is the same width as the flash image but just doesn't wanna line up.

Anyone had this problem or could help me fix it?

Thanks

LoTi

The image that is set to align right keeps moving down some. Is there anyway to get it to be level with the image that's left aligned without using a negative margin or tables?
The problem occurs in Netscape 7 and IE 6. Mysteriously enough it is displayed correctly in Opera 7.
Code:

#title {
	margin-left: 170px;
	background: url(./imgs/title_mdl.gif) repeat-x;
	width: auto;
	height: 40px;
}
#title span {
	font-size: large;
	text-align: center;
}
#title img {
	width: 82px;
	height: 40px;
}

Code:

<div id="title"><img src="./imgs/title_lft.gif" alt="" align="left"><span>Hello</span><img src="./imgs/title_rgt.gif" alt="" align="right"></div>

Well I am having serious problems with CSS floats.

I created a design in Photoshop, sliced it and imported everything in Dreamweaver. So far, so good. However when you slice with Photoshop, you get a CSS with "position: absolute", which I am trying to avoid.

However I managed to get the header partially correctly floated, but for some reason, it doesn't display correctly in Firefox. Not to mention Internet Explorer 8, which shows (empty) spaces everywhere (tried padding/margin 0px, but didn't do anything).

Can someone take a quick peek and see what I am doing wrong here? And if possible correct the errors or tell me what I am doing wrong?

Cause I am really hitting a brick wall at the moment.

Here is the page: link

Thanks in advance.


//edit


Okay I fixed the empty space problem in IE, I seem to have forgotten to set the doctype up correctly; my bad.

But I am still having a problem with the floats.

I'm struggling to find the correct CSS to center a middle column between a left and right column. I need this functionality for a dynamic photo gallery (powered by JS). To put it simply, I need the shaded area to the left and right of an image to expand/contract dynamically based on whether or not the image in the middle is in landscape or portrait format. I've figured out how to hard code it based on orientation, but I need it to be dynamic instead since the JS I'm using isn't aware of the orientation of the image. Examples of what it looks like live are seen below:

Portrait Orientation

www. notcrappy .com/html/portrait/studio-portraits/index.shtml

Landscape Orientation

www. notcrappy .com/html/wedding/favorites/index.shtml

Here's is some simplified HTML that I'm currently using to present the images and with the left/right blue borders:

<div class="left-blank-middle-<PORTRAIT or LANDSCAPE>-right-blank-left-side">&nbsp;</div>

<div class="left-blank-middle-<PORTRAIT or LANDSCAPE>-right-blank-middle-position"><img src="images/01.jpg"/></div>

<div class="left-blank-middle-<PORTRAIT or LANDSCAPE>-right-blank-right-side">&nbsp;</div>

And here is the CSS I'm using to give them the correct spacing when the dimension is known.

.left-blank-middle-landscape-right-blank-left-side {
width: 179px;
background-color: #003366;
float: left;
height: 400px;
margin-right: 3px;
margin-bottom: 10px;
}

.left-blank-middle-landscape-right-blank-middle-position {
float: left;
height: 400px;
margin-bottom: 10px;
width: 600px;
}

.left-blank-middle-landscape-right-blank-right-side {
width: 179px;
background-color: #003366;
float: right;
height: 400px;
margin-left: 3px;
margin-bottom: 10px;
}


.left-blank-middle-portrait-right-blank-left-side {
width: 346px;
background-color: #003366;
float: left;
height: 400px;
margin-right: 3px;
margin-bottom: 10px;
}

.left-blank-middle-portrait-right-blank-middle-position {
float: left;
height: 400px;
margin-bottom: 10px;
width: 266px;
}

.left-blank-middle-portrait-right-blank-right-side {
width: 346px;
background-color: #003366;
float: right;
height: 400px;
margin-left: 3px;
margin-bottom: 10px;
}

Can anyone give me any pointers on what I need to do to make the CSS dynamic based on the orientation of the photos? Thanks so much for your help!

Hi ! Me again :P

So this is a simple test i made to try this out. But I ran into a problem. Take a look for yourself:

(view-source for xhtml and css)

http://fotoz.hit.bg/test/menu.html

The problem is that annoying flickering that happens when you roll over. Any ideas how to fix it ?

And most importantly why does it occur?

Thanks!

p.s

I should explain what i wanted to do here. Basicly 1 big background image to the <div>. It will be holding the "over" state of all the buttons. At the same time the <a> elements will be holding images of the "normal" state buttons, and when you hover over them they will disappear and you will see the "hover" state below.

It works but I get the flickering with visibility:hidden and even if i just move the img out of the way

Hello
I am very new to CSS. One of my problems is that my web experience is only in tools that generate the code. I"m needing what I"m told is a simple thing to do, but not finding it easy for me

I tried to post with some links to my site, etc, but the rules won't let me post any links. I have posted in another CSS site, but fine it very inactive and not getting any help.

What I'm trying to do

All items below to make up the header of the site. A background graphic which fills across the screen, no matter the size of the window. I have this working, although if I shrink the window too far, it overwrites the graphic in item 2 below. A left justified logo graphic. Working fine. A Centered graphic. I have this showing, but it is not quite centered right, and it is a bit smaller than actual, and I cannot get it to space down a bit. (tried padding, does nothing. Trying margin spaces everything down, including item 1 above. A right justified graphic. This shows, but is VERY SMALL, much smaller than original graphic, and it does not right justify.
NOTES
The current code, below, is based on a tutorial I went through, using % for width. The idea being that if it is built based on percent of width, then whatever width of window, it would adjust. I used 900px for original calculations. I find that it only fills the window as if it is 900 px wide. So I redid the percentages based on 1500px.

I've done lots of reading, Googling, and been trying all kinds of stuff and getting not too far with it. Tried px for width too, seems worse.

Here is a print screen of the header:

[IMG]URL[/IMG]

Sigh...sorry...even img code has a url, and even though it showed in preview, I see it will not display it in actual message.

The site I"m working on is shuttermaster.co (not com), where you can see what it looks like now.

CSS Code
Only including the code relevant to the header issue. I do have menu code in CSS, but it is not complete, and I'm not having problems with that.

Code:

	#myHeader {width:auto;height:133px;
		background:url(/photos/i-QXfPgvM/0/S/i-QXfPgvM-S.jpg) repeat-x}

 		#myLogo {
				 float:left;
				 width:10%;
				 height:150px	;
				 margin-left:2.22%;
				 display:inline;
				 background:url(/photos/i-sttGP6Z/1/O/i-sttGP6Z.png) no-repeat}
			   

		#myConame {
				
				width: 15.33%;
				height:90px;
				margin-left:auto;
				margin-right:auto;
				background:url(/photos/i-T3ZjJ8R/2/Th/i-T3ZjJ8R-Th.png) no-repeat}
		
		
		#myBanner {
				float:right;
				width: 29.73%;
				height:150px;
				background:url(/photos/i-BkhSxLJ/1/Th/i-BkhSxLJ-Th.png) no-repeat}

The HTML Code

Code:

<div id="myHeader">
<div id="myLogo"></div>
<div id="myConame"></div>
<div id="myBanner"></div>
<div style="clear: both;"></div>
<div class="menu">
  <ul>
        <li><a href="http://shuttermaster.co">Home</a></li>
        <li><a href="#">Portfolio</a></li>
		<li><a class="drop" href="http://shuttermaster.co/galleries" >Galleries
			<!--[if gte IE 7]><!--></a><!--<![endif]-->
			<!--[if lte IE 6]><table><tr><td><![endif]-->
			<ul>	
				<li><a href="http://rogerewingphotography.smugmug.com/Landscapes/Landscapes/19892237_mHBK84">Landscape</a></li>
				<li><a href="Link">Drop 2</a></li>
				<li><a href="Link">Drop 3</a></li>
        </ul> <!--[if lte IE 7]></td></tr></table></a><![endif]-->
   </li>
        <li><a href="#">About Me</a></li>
        <li><a href="#">Guestbook</a></li>
  </ul>
</div> 
</div>
<div style="clear: both;"></div>

I hope I have been clear enough. Hoping someone can point me the right direction.

Regards, and thanks....

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

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.

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

.

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> 

i am writing a site for fun to learn how websites work. The site i write right now will be like a school newspaper. I have one problem with the background, at the begining i couldnt make it no repeat but later i did it, now, i got something wrong with my code. PLease help me here is my code: ( i mean that the back ground color does not appear!!

Code:

<html>
<head>
<title>
	blah blah
</title>
</head>
<body bcolor="#004d79">
<center>
<img src="/pics/banner.png">
</center>
<h4>
<b>
<center>
blah blah
</center>
</b>
</h4>
<style type="text/css">
<!--
body {background-image: url(pics/background.png); background-repeat: no-repeat;}set to background-repeat: no-repeat;background-position:center;
</style>  
<center>
<b>
	(C) blah blah
</b>
</center>
<center>
<div style="position:absolute;top:130px;left:375px">
<h1>
<b>
<p>
	Our website is under construction!!<br>Thank you for visiting us!!
</p>
</b>
</center>
</h1>
</div>
<div style="position:absolute;top:250px;left:260px">
<b>
<p>
blah blah
</p>
</b>
</center>
</div>
</html>

Thanks alot, J.

Hi,

I just installed Gallery on my website, and I'm trying to integrate it with the main theme of the rest of the site.

Well I'm having a problem with the banner overlapping the logo in FireFox. It renders fine in IE7 (surprisingly), but not in FF.

Have a look he
http://www.lightblu.com/gallery/main.php

un/pass: test/test

You can look at how I want it on the homepage, or anywhere else for that matter.

What am I doing wrong? I tried everything with no success.

Thanks guys
--Waj

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

I've been away for nearly three months and may have forgotten some of the basics of CSS.
Today I added a banner photo to the top of my new bike club site, but cannot remember how to style it so that, when a visitor adjusts the width of their browser window, the banner photo sidles to the left or right to remain centered at the top of their window, along with the the bike club name and pull-down menus immediately below (see http://stallinswebdesign.com/vs/index.php). Can you suggest how I can style that banner photo so that it remains centered whenever a visitor stretches their browser window?

I know you can view source to view my <div> structure and so forth; let me know if you'd like
to see any parts of my style sheet.

Thank you for your valuable time.
Curtis