CSS - Mixing Css With Php For Header Images

All,
I have a header on this page backup.whiteslimo.com with 3 images inserted into it listing the company name, service, and contact info. My problem is that when they are displayed there is a thin white border on the bottom and right hand sides of each image. But the image doesn't have these borders. If you are in Firefox/Mozilla and you right click on the individual images and select View Image, you will see that the image itself does not have these borders. I am thinking that somewhere along some attribute is being added that is causing this but since I am a CSS neophyte (This is still my first week lol) I am not sure. Any help is much appreciated.

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

--edit 2 SORRY FOR CONFUSING YOU ALL ----

it works but everytime i click on the link i get extra space underneath the <tr with id>???

http://plumstead-mosque.co.uk/test/admin/outofStock.php

here is the revised code:

PHP Code:
 $res = mysql_query($q);?>
<table>
 <tr>
  <td>Product Id</td>
  <td>Name</td>
  <td>Stock Left</td>
  <td></td>
 </tr><?php
while($ro = mysql_fetch_array($res)){
    echo "<tr><td><a href=\"javascript:toggle('$ro[0]');\">$ro[0]</a></td><td>$ro[1]</td><td>$ro[2]</td></tr>";
    $q2 = "select * from productsizes where productid = '{$ro[0]}'";
    $res2 = mysql_query($q2); 
    while($ro2 = mysql_fetch_array($res2)){
        //if
        echo "<tr style=\"display:none; font-size:smaller; color:grey;\" id=\"$ro[0]\">";
        echo "<td>$ro2[1]</td><td>$ro2[2]</td><td>$ro2[3]</td></tr>";
    }    
}    
echo "</table>";
?> 





----edit 2


is it possible to do this:

<table> <div><tr><td></td></tr></table ??

because i have a link that hides/unhides this div. and it doesnt seem to be working? but if i remove all the tables then it works?

basically i do know the solution (i think) currently i have id and style on div that says "display:none" and change it using JS. so i THINK i can move them to the tr? the only problem with this would be if there are more than one tr as i cant have two tr with same id..
--edit
never mind got this to work, each tr will have "unique" id so there is no point using class. HOWEVER when i used class as
var m = document.getElementByClass("name") it didnt work

---

PHP Code:
 $res = mysql_query($q);?>
<table>
 <tr>
  <td>Product Id</td>
  <td>Name</td>
  <td>Stock Left</td>
  <td></td>
 </tr><?php
while($ro = mysql_fetch_array($res)){
    echo "<tr><td><a href=\"javascript:toggle('$ro[0]');\">$ro[0]</a></td><td>$ro[1]</td><td>$ro[2]</td></tr>";
    echo "<div style=\"display:none; font-size:smaller; color:grey;\" id=\"$ro[0]\">";
    $q2 = "select * from productsizes where productid = '{$ro[0]}'";
    $res2 = mysql_query($q2); 
    while($ro2 = mysql_fetch_array($res2)){
        echo "$ro2[1] $ro2[2] $ro2[3]";
    }
    echo "</div>";        
    }    
    echo "</table>"; 

Hi guys, thanks for reading my thread (once again!)

I have the code below that is my first ever "play" with CSS. The site is nothing serious yet but I am learning how to lay things out in a clear fashion and get used to CSS syntax.

Code:

<HTML>

<TITLE>My Page</TITLE>

<HEAD>
<STYLE type="text/css">
body {background-color:#ffffff; font: 13px;}
div {border: 0px}
#main {margin: 0px auto; width=800px; position: absolute; left: 0%;}

#headerlogo {float: left; width: 200px; height: 55px; background-color: #7EC0EE; text-align: center;}
#headertext {float: left; width: 350px; height: 55px; background-color: #7EC0EE; text-align: left; font: 13px;}
#blankspace {float: left; width: 25px; height: 55px; background-color: #F5F5F5;}
#headerlogin {float: left; width: 225px; height: 55px; background-color: #7EC0EE;}

</STYLE>
</HEAD>

<BODY>

<div id="main">

	<div id="headerlogo">
		<h3>Site Logo</H3>
	</div>

	<div id="headertext">
		Site text goes here.  This sentence is a test to see how much text I can fit in this div before things start to go out of line.  It appears that there can be quite a lot
	</div>

	<div id="blankspace">
	</div>	

	<div id="headerlogin">
		<table width="220" border="0"><FORM NAME="login" ACTION="dologin.asp">
			<tr><td width="70" STYLE="font: 13px">Login:</td><td width="80"><INPUT STYLE="width:70px; height:20px; font: 12px;" TYPE="text" NAME="loginname" SIZE="4"></td><td width="70" rowspan="2"><INPUT STYLE="width: 70px; height: 20px; font: 12px;" TYPE="submit" NAME="submit" VALUE="Login"></td></tr>
			<tr><td width="70" STYLE="font: 13px">Password:</td><td width="80"><INPUT STYLE="width:70px; height:20px; font: 12px;" TYPE="password" NAME="Password" SIZE="4"></td></tr>

			</FORM>
	
		</table>
	</div>

</div>

</BODY>
</HTML>

The result can be seen by pasting the above into a notepad file.

I have got a mock "login form" on the right panel, and the only way that I could get the fields to display how I wanted was to put them in a small table. I get the impression (from reading other peoples threads) that mixing tables with CSS is bad practice as it is mixing style and structure. Other posts have said that a small amount of tables is ok.

Should the tables above be replaced with CSS? I tried to set it up myself, but all I could do was get the elements to line up under each other! :

Login:
<text field>
Password:
<pass field>
<submit button>

Also, is there any way to get the two text fields (as in, rows of the table) closer together when using CSS? In a table sense I guess it is the opposite of "cell top and bottom padding?"

Thanks for any help anyone can offer me.

Regards,

Porky

Hello

I'm kinda new to css. (PHP programmer by day) and would like some help making something like this.

stevenbarre dot com / sample.jpg

I want the whole thing to stay in the browser (100% width and height) so you never get scroll bars.

The top orange part should have a height in px as well as the bottom purple part. The green should have a width in px and the blue should be whatever is left over.

I've done some googleing but haven't been able to find much on 100% height designs.

Your help is much appreciated as well as links.

I have 2 columns. I have a very tall, narrow column on the left that needs to be exactly 22em wide. I also have a short, fat column on the right that I want to take up the rest of the screen's width.

The problem is that I have to contian my code so that after all of the formatting syntax is done, I can put in a whole ton of text and the text will stay in the right column, and then when the text gets past bttom of the left column it will take the entire width of the screen.

The way I'm doing it right now is by floating to the left both columns and using 29% width for the thin left column and 70% width for the fat right column. This adds up to less than 100% so the browser places them paralell. But if I were to absolutely size the left column (as I want to), 22em + 100% is definately more than 100%. I can't constrain it so it thinks 100% is 100% of the space available to the right column because the text has to be in that "corner" between the right side of the left column and the bottom of the right column.

Any ideas on how I could solve this? If you can do it without floats, that would be even better- it might solve another of my problems.

The page in question is here by the way. All of the formatting code is transcluded in, you probably won't be able to see it unless you're familiar with wikipeida. Please don't edit the page directly

Thanks,
froth

Hello,

I am trying to absolute position two elements within a relatively positioned DIV. My relatively positioned DIV is necessary to center my content on the page. The elements within this DIV must be placed in the upper left corner of the DIV. The reason why is because I want them to be placed on top of one another. Here is the code I have thus far:

<div>
<div id="elem1Container" style="height:400px; width:400px; position:relative; top:0px; left:0px;">
<img id="myItem1" src="image1.png" />
</div>
<div id="elem2Container" style="height:400px; width:400px; position:relative; top:0px; left:0px;">
<img id="myItem2" src="image2.png" />
</div>
</div>

Can anyone help me accomplish my goal? For some reason, the second image is always below the first image. In reality I need it right on top of the first image. At the same time, these two images centered in relation to my page. That is why I placed them in a general div element.

Thank you!
Crystal

Common scenario: A floated div that is set to have width:100% to fill up the entire horizontal space.

Here's the problem: I want to bump the div 45px from the left (i.e. adding a 45px left margin). Having both the width: 100% and margin-left: 45px declaration in the CSS expands the div way too far (100% of the screen + 45px for the margin). Because of the design, I cannot use a 45px left padding instead.

A constraint: I don't want to touch the HTML. I know an easy way would be to add a div within the floated div and use a 45px left padding on the floated div.

Almost makes me pine for the IE5.0 broken box model...

p.s. any one have any general advice when mixing 100% widths with absolute values for padding/margins for both floated and non-floated elements?

I am using style sheet for fonts etc. I was wondering is it OK to use style sheet and <Font> tags at the same time on a page. I mean if you are using certain font only once. Why bother creating a class in style sheet and then calling using that class ..

I'm trying to create a header bar with some navigational links.

The basic idea is that I have a little banner image about 400 pixels wide on the left. To the right of it, I have 5 navigational links listed horizontally. I want them to be evenly spaced across the rest of the page, regardless of its width. I could do this with percentages if I had them in a parent element equal to the width of the page minus the width of the image to the left.

So basically, I know this isn't actual CSS syntax, but I'm looking for the functional equivalent of saying: #linkContainer{width:100%-400px;}

Anybody know a good way to do something like this?

This would be easy with a table, but I'm trying to stick to CSS for layout and tables only for tabular data.

Hi all,

I need some help. I have implemented a fixed header on my site, but certain content is scrolling above the header while other is scrolling behind. I would like it all to scroll behind the fixed div's.

I'm not confident enough with CSS to just use it, so I'm mixing it with some tables too.

I want a layout with two tables next to each at the top and then another below.

The two at the top are working fine, but the one below keeps jumping back up to the top.

I've managed to get an ugly fix by putting in a load of <br> but this doesn't work in IE7 (unless I add a lot more, pushing the content way down in other browsers) and isn't much of a solution.

The other problem I have is that I want to have the majority of my page with a white background, but to get a surrounding border I've set the body background to be a colour and then placed a div around all the content. I want this div to be the size of the page and so set it's height to 100%, but this makes it too small. Not sure why.

Here is my code for my page and CSS.

If anyone can help I'd be most grateful.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="incl/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
<!--
function navon(num) {
	document.getElementById("nav" + num).style.backgroundColor = '#CDEB8B';
	document.getElementById("nav" + num).style.paddingTop = '0px'
	document.getElementById("nav" + num).style.paddingBottom = '0px'; 
	document.getElementById("nav" + num).style.borderTopWidth = '10px';
	document.getElementById("nav" + num).style.borderBottomWidth = '10px';
	
}

function navoff(num) {
	document.getElementById("nav" + num).style.backgroundColor = '#C3D9FF';
	document.getElementById("nav" + num).style.paddingTop = '8px'
	document.getElementById("nav" + num).style.paddingBottom = '8px'; 
	document.getElementById("nav" + num).style.borderTopWidth = '2px';
	document.getElementById("nav" + num).style.borderBottomWidth = '2px';
}
//-->
</script>

</head>

<body>
<div class="main">

<table width="29%" border="0" cellpadding="2" cellspacing="5" align="left">
<tr>
<td><img src="" alt="" width="230" height="80" border="0" /></td>
</tr>
</table>

<table width="70%" height="60px" border="0" cellpadding="2" cellspacing="5" align="right">
<tr>
<td width="180px" class="nav" id="nav1" onmouseover="navon('1')" onmouseout="navoff('1')">link</td>
<td width="180px" class="nav" id="nav2" onmouseover="navon('2')" onmouseout="navoff('2')">link</td>
<td width="180px" class="nav" id="nav3" onmouseover="navon('3')" onmouseout="navoff('3')">link</td>
<td width="180px" class="nav" id="nav4" onmouseover="navon('4')" onmouseout="navoff('4')">link</td>
<td width="180px" class="nav" id="nav5" onmouseover="navon('5')" onmouseout="navoff('5')">link</td>
</tr>
</table>
<br /><br /><br /><br /><br /><br />
<table width="100%" border="0" cellpadding="2" cellspacing="5" align="center">
<tr>
<td width="70%">
some content
</td>
<td width="30%">
some more content
</td>
</tr>
</table>
</div>
</body>
</html>

Code:

@charset "utf-8";
/* CSS Document */

body {
	padding-right: 4%;
	padding-left: 4%;
	padding-top: 30px;
	padding-bottom: 30px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	letter-spacing: 0.1em;
	color: #000000;
	background-color: #EEEEEE;
}
a:link {
	color: #000000;
	text-decoration: none;
}
a:visited {
	color: #000000;
	text-decoration: none;
}
a:active {
	color: #000000;
	text-decoration: none;
}
a:hover {
	color: #000000;
	text-decoration: underline;
}
.main {
	background:#FFFFFF;
	border: 10px solid #36393D;
	width: 89%;
	padding: 5%;
}
.nav {
	padding: 8px;
	background-color: #C3D9FF;
	vertical-align: middle;
	text-align: center;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 24px;
	color: #36393D;
	cursor:pointer;
	border: 2px solid #36393D;
}

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,

How do I indent my H1 tag as they are too close to the edge of the page. I tried all the functions for a <p> but they dont work for headers

Thanks

Why is the second header on his site is located at the bottom of the page, I can't seem to figure it out. Can anyone take a look at the page and maybe point me in the right direction? The url is <NO LONGER AVAILABLE> I know that is has to have something to do with #clearheader1 or #clearheader2 calls. Maybe where they are placed or something.