CSS - Css And Listing Images 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.

Hello.

Test Page
CSS Page

I'm trying to get my banner working properly. I have a div for the banner itself #banner and then I have an #innerbanner for the contents (images).

I use a BG image in the #banner that allows it to be stretchable.
I want one of my images in #innerbanner to be tight to the left and the 2nd of tight to the right side of the screen.

I tried using a spcaer in the middle to allow for space between the images when it gets stretched but nothing is lineing up properly in firefox or IE 6.

Any suggestions?

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....

Hi, I'm having a slight problem with my css.

I want to display a comment with a number of images to the right of it.

e.g

"Excellent" plus 5 stars next to it (note: images of stars)

so i tried this:

Code:

 <div id = "commentText"> Excellent </div> 
		 
  <div id = "star"> </div>
  <div id = "star"> </div>
  <div id = "star"> </div>
 
  <div id = "commentText"> Fantastic </div> 
   <div id = "star"> </div>
   <div id = "star"> </div>
   <div id = "star"> </div>
   <div id = "star"> </div>

css

Code:

#commentText
{
  font-size: 100%;
  color: #000000;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-weight: normal;
  padding-left: 30px;
}

#star 
{
  display: inline;
  height: 24px;
  background-image: url(images/star.png);
  background-repeat: no-repeat;
  padding-left: 20px;
  
}

I currently have comment with 3 stars displayed underneath it - however they are only half being shown for some reason.

Any help is appreciated to help me get the desired effect. Thanks!

Im just curious, what are the advantages of using css to import all your images (that arnt dynamic) as apposed to inserting them into your html using the <img> tag?

Hi, I can't believe I'm posting this but I can't seem to get this to work. I cannot load a background image through a simple div tag. It works if I switch the id selector to the BODY tag in my code and displays the image but does not work if I use the selector with the DIV tag. I have no idea why. Please help

My HTML file

Quote:
<!DOCTYPE html>
<html>

<head>
<title>Title of the document</title>
<LINK REL=StyleSheet HREF="styles.css" TYPE="text/css">
</head>

<div id="header">
Div Tag here
</div>

<body>
The content of the document......
</body>

</html>


My CSS file

Quote:
#header {
background-image: url(navtext.png);
background-image: no-repeat;
}


Use any image you have to test.

I'm trying to get the 2 tabs of this mini calendar to be right next to each other. I've changed the names of all the divs surrounding the images and still can't get it to take out that padding.

I've also tried
img
{
margin:0px;
padding:0px;
}

and it still doesn't work.

Any ideas?

hey guys..

I was thinking about changing my site from being mostly table based for the layout to css based but for some reason theres a small gap between images in IE... no gap in FF though..

I made two example pages 1 without using images, and just a colored background, and one with images... the height and width for the backgrounds and for the images are both the same.

small gap at the bottom of each of the divs after the image ends.
www.wmbclan.com/test.php

just some background colors.. without any gap between the colors.
www.wmbclan.com/test2.php

anyone know how to fix this?

i can only find the script to show background images in a css style sheet..but how would I go about for example showing an image not as background?

i have style switcher, but I'm wanting to use buttons aswell for example

blue.gif and red.gif using 2 different styles.

how would I show the image in css?, which I can also put a link on maybe in the html or css?

HElP!

thanks

We recently decided to alphabetize the Specialties on our web pages (using the .php files from the Includes folder).

I have re-alphabetized them in both the .php file as well as the default.css file including making the first image coincide with the alphabetized list. However, when I do, the original image (for Hospitality) remains as the default image and only changes when you finally hover over Hospitality or anything below it.

Here's the way part of the original file is set up:

/* Images */
div#specialties ul li a.hospitality span.img {
position: absolute;
top: 0;
right: 0;
width: 222px;
height: 190px;
background-image: url(../images/hospitality.jpg);
background-repeat: no-repeat;
z-index: 0;
}
div#specialties ul li a.hospitality:hover span.img {
position: absolute;
top: 0;
right: 0;
width: 222px;
height: 190px;
background-image: url(../images/hospitality.jpg);
background-repeat: no-repeat;
z-index: 0;
}

And here's what I changed it to:

/* Images */
div#specialties ul li a.apartments span.img {
position: absolute;
top: 0;
right: 0;
width: 222px;
height: 190px;
background-image: url(../images/apartments.jpg);
background-repeat: no-repeat;
z-index: 0;
}
div#specialties ul li a.apts:hover span.img {
position: absolute;
top: 0;
right: 0;
width: 222px;
height: 190px;
background-image: url(../images/apartments.jpg);
background-repeat: no-repeat;
z-index: 0;
}

Help! You can check out the current look at Connell Insurance dot com.
.