CSS - Css Table Header Problem

hello

i have a header on my website with an image in it positioned to the left.

so in my html it's:

<div id="header">
<img src="blabla.jpg">
</div>

and css is:

#header {
background-color: #FFFFFF;
padding-left: 25px;
}

this works perfectly but in that same header i want to place 2 more images but positioned to the right.

i have searched for many possible solutions but haven't found any. maybe i'm trying to hard and i'm overlooking the simplest solution... anyone has any suggestions ?

thanks in advance !

Hi
Please see
watermark.sc
It works fine in Firefox but
header alignment is not proper in IE
What might be the problem?
San

Hi,
I have a margin or spacing between the header image and the navigation bar. I'm unsure of how to remove it. I want the navigation to be directly underneath the header.

This is the HTML

Code:

<div id="navbar"> 
<ul> 
<li><a href="index.html">Home</a></li> 
<li><a href="horses.html">Horses</a>
<ul>
<li><a href="stallions.html">Stallions</a></li>
<li><a href="mares.html">Mares</a></li>
<li><a href="geldings.html">Geldings</a></li> 
<li><a href="foals.html">Foals</a></li> 
</ul>
</li>
<li><a href="showteam.html">Show Team</a></li> 
<li><a href="showresults.html">Show Results</a></li>
<li><a href="youths.html">Youths</a></li> 
<li><a href="sales.html">Sales</a></li> 
<li><a href="contactus.html">Contact Us</a></li> 

</ul> 
</div> 

This is the CSS
Code:

#header {
	
	background:#ddd;
	border-left:1px solid #FFF;
	border-right:1px solid #FFF;
	border-top:1px solid #FFF;
	
}

#navbar {
	font-family: Edwardian Script ITC, Verdana, Arial, sans-serif;
	font-size:36px;
	width:100%;
	margin-top:0px;
	padding:0px;
	height:63px;
	background-color:#FFF;
	}
	
#navbar li {
	list-style: none;
	float: left; 
	}
	
#navbar li a {
	display: block;
	padding: 7px 8px;
	background-color: white;
	color: black;
	text-decoration: none; 
	}
	
	#navbar li ul {
	display: none; 
	width: 5em; /* Width to help Opera out */
	background-color: white;
}
	
	#navbar li:hover ul {
	display: block;
	position: absolute;
	margin: 0;
	padding: 0; }

#navbar li:hover li {
	float: none; }

#navbar li:hover li a {
	background-color: white;
	border-bottom: 1px solid #000;
	color: #000; }

#navbar li li a:hover {
	background-color:#FFC; }

Any help would be appreciated! It's really frustrating me. I've tried looking around other websites for help too.


Kim

Help! I've been holding my head on this one for a couple days.

I have a wordpress theme that works fine in IE7, but in Firefox the header and navigation aligns left instead of center. I have not tested in IE6 yet. I can't, for the life of me, figure out what's causing it.

Any help would be greatly appreciated!

www dot sccustomfacade dot com slash site


Thank you!

this is what i got: a menuBox


Code:

<tr align="center" valign="top" height="120">
  <td height="120">
    <div class="menuBox">
      <div class="menuBoxHeader">Menu</div>
      <p><a href="blah-blah4">4.</a></p>
      <p><a href="blah-blah5">5.</a></p>
      <br>
      <p>some text>
    </div>
   </td>
</tr>

I use for the links

Code:

a:link, a:visited, a:active { color: #336699; text-decoration: none;
font: bold 11px/1px Verdana, Arial, Helvetica;
}

for the menuBox

Code:

.menuBox     { color: #c36;
 font-style: normal;
 font-weight: bold;
 font-size: 9px;
 line-height: 2px; font-family: Verdana;
 background-color: #fef;
 border: solid 1px #c36 }

and for the menuBoxHeader

Code:

.menuBoxHeader    {
	color: #efe;
	font-style: normal;
	font-weight: bold;
	font-size: 9px;
	line-height: 13px;
	font-family: Verdana, Arial, Helvetica;
	background: #c36 0px 0px;
	margin: 1px 0px 0px;
	position: relative;
	top: 0px;
	left: 0px;
	width: 130px;
	height: 16px }

So now my two questions.

1.
What do I have to do to let it look in all the browsers the same?
In Netscape 7.2 the links are to close to each other. In IE6 to width ( vertical ).

2.
The menuHeader is on the most browsers correct ( mac and Win ) except MS. There is no 1px between the border and the red area. Or... are the others wrong and MS right?

I hope that someone can help me?

So, here's what I've got:

http://www.anthonycarboni.com

The header is supposed to appear 50 pixels high, flush with the top (no margins), with the header text middle aligned inside of it. This is working in IE 6 and 7, but is not working well in FF (mac/pc) or in Safari.

Here is all code that pertains to that section. It is sure to be woefully poor, as I'm just getting into CSS:

Code:

body {
    color: #FFFFFF;
	background-color: #000000;
    font-family: 'ArialMT', 'Arial', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    letter-spacing: 0;
    line-height: 19px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    opacity: 1.00;
    padding-bottom: 0px;
    padding-top: 0px;
    text-align: center;
    text-decoration: none;
    text-indent: 0px;
    text-transform: none;
    min-width: 800px;
}

.main{
		background-color: #202020;
		width: 800px;
		margin-left: auto;
		margin-right: auto;
		text-align: left;
}

.header{
		height: 50px;
		background-image: url('images/header.jpg');
		background-repeat: repeat;
}

p.headline {
		font-size: 32px;
		font-weight: bold;
		text-transform: uppercase;
		text-align: center;
		letter-spacing: 0.8em;
		vertical-align: middle;
}

And there you have it. I'm tearing my hair out over what I'm sure is some small thing that anyone with experience would notice immediately. Any help would be greatly appreciated.

Thanks!

I've mocked up a page using 960.gs that has has several elements fixed in a div under which the content of the of the page is to flow. The background of this div is a CSS gradient, and has a height of 100% (if the gradient is applied to to the actual body of the page it doesn't actually extend the whole width of the page). As the user scrolls up, the content is to be viewable behind an opaque menu.

bit.ly/f2a4rC

The layout works as I want in FF and Chrome, but the content of the page scrolls over the fixed upper area in IE7.

I understand that a new stacking context is being created, but I've been unable to resolve this by fiddling with the z-index of the elements in question, or their parents. I know I can consolidate some of the extra divs used by the grid, but I've been unable to do so in a way that keeps the gradient and transparency effects.

How can I achieve this look in IE7?

Hello all, still a little new to css layout problem-shooting in older browsers, so thanks for your help in advance!

I'm having a problem which is only occurring in Internet Explorer 6, but I just can seem to figure out what's wrong.


if you look at the page in any other browser, you can see the header <div> stretches the width: 100%, but in IE6, the header <div> does not extend all the way to the left, but rather starts where the margin:auto Main <div> tag starts from the left side.

What I am lost on is that the footer <div> performs this just fine, but it's position is not fixed and there is no z-index. here is the code for both, and thanks again for having a look:

#header {
width: 100%;
height: 107px;
display: block;
position: fixed;
margin: 0px;
padding: 0px;
background-color: #000000;
background-image: url(../images/main/bhs_design_header_gradient.jpg);
z-index: 100;

}

#footer {
width: 100%;
height: 35px;
display: block;
background-color:#000000;
margin-top: 10px;
clear: both;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #EBEAE8;
margin: 0px;
background-image: url(../images/main/bhs_design_footer_gradient.jpg);
}

I want to do this design:
http://hermann.sonyextreme.com/upload/design.png
* means it should be "the rest". Just like when working with frames. So the sites height is 100% and width is 800px.

I've set it up like this:
Code:

<div id="container">
  <div id="header">
  </div>
  <div id="main">
    <div id="menu">
    </div>
    <div id="content">
    </div>
  </div>
  <div id="footer">
  </div>
</div>

But no matter what I try, the css just keeps ****ing with me
So do you have any tricks/know any sites who have done this succesfully... or just anything to help me, then I'd love to hear from you

Thanks in advance
Hermann

Hi

I am quite familiar with CSS but am stumped on how I could do the following.

Basically I need a template with a header, body and footer, I know, sounds simple right, but I need to have the middle body section of the page stretching to the height of the browser, so that the space in between the header and footer is filled in with the middle container.

The middle container that stretches to the required height needs to have a background image that cannot be covered over by the header or the footer.

This is the problem, because if the middle container is set to 100% height, then a scroll bar is always present because of the header and footers height.

I have been able to create what I am trying to do with a table, but obviously I want to avoid using a table for a layout.

Is there any way to recreate this but via CSS?

Take a look at the table layout and change the size of your browser to see the effect I am aiming for, but in CSS

http://labwaves.com/temp/index3.php

This is an attempt in CSS, but It requires me to set the headers and footers background image to the same as the bodys background image, with I can't have .

http://labwaves.com/temp/index2.php


Congratulations on making it to the end of this long, but hopefully un-confusing post

Thanks and any reply's are really, really appreciated as I am so stuck on this one!

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

I have a dynamic table that is in the cell of another table. For the life of me I cant get it to stick to the top of the cell. It wants to sit at the midline of it vertically.

Thanks for reading.

Hello,

I'm working now on div layout that contains 3 sections (header, body, footer) in one centered wrapper with border (divs with background imgs).

My problem is:

- divs that are in fact borders (id="l_outerborder_b" and id="r_outerborder_b") don't stretch when main container (id="body_content_text") grows.

Here is a html code:

Code:

<!--BEGIN TEMPLATE HEADER -->

<!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>
   	
<link href="template.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="template.js" />
</head>
<body onload="onloadprocedures()">
<div id="main_container">
	<div id="template_header">
		<div id="tl_outerborder"></div>
		<div id="t_outerborder"></div>
		<div id="tr_outerborder"></div>
		<div id="l_outerborder_h"></div>
		<div id="header_content">
			<div id="logo"><img src="img/logo.png" alt="" /></div>
			<div id="slogan"><img src="img/slogan.png" alt="Centrum zdrowia" /></div>
		</div>
		<div id="r_outerborder_h"></div>
	</div>
  
  <!-- END TEMPLATE HEADER -->
  <!-- BEGIN TEMPLATE BODY -->
	  <div id="template_body">
		<div id="l_outerborder_b"></div>
		<div id="body_content">
			<div id="body_content_text">
			  <p>TEST</p>
			</div>
		</div>
		<div id="r_outerborder_b"></div>
		
	  </div>
  <!-- END TEMPLATE BODY -->
  <!-- BEGIN TEMPLATE FOOTER -->
	<div id="template_footer">
		<div style="clear:both"></div>
		<div id="l_outerborder_f"></div>
		<div id="footer_content"></div>
		<div id="l_outerborder_f"></div>
		<div id="bl_outerborder"></div>
		<div id="b_outerborder"></div>
		<div id="br_outerborder"></div>
	</div>
</div>
</body>
</html>
<!-- END TEMPLATE FOOTER -->

and CSS:

Code:

@charset "utf-8";
/* CSS Document */
body {
	background-color:#FFFFFF;
	font-family:Tahoma, Verdana, "Times New Roman", Arial;
	font-size:12px;
}
a:link {text-decoration: none}      /* unvisited link */
a:visited {text-decoration: none}  /* visited link */
a:hover {text-decoration: none}  /* mouse over link */
a:active {text-decoration: none}  /* selected link */
#main_container {
	position:relative;
	margin:auto;
	width:960px;
	height:auto;
}
#template_header {
	float:left;
	position:relative;
	width:960px;
	height:300px;
}
#header_content {
	float:left;
	position:relative;
	width:900px;
	height:270px;
}
#logo {
	width:310px;
	height:130px;
	position:relative;
	float:left;
	top:0px;
	left:0px;
}
#slogan {
	width:580px;
	height:100px;
	position:relative;
	float:left;
	top:0px;
	left:0px;
}
#tl_outerborder {
	float:left;
	position:relative;	
	background-image:url(img/tl_outerborder.png);
	width:30px;
	height:30px;
}
#t_outerborder {
	float:left;
	position:relative;
	background-image:url(img/t_outerborder.png);
	width:900px;
	height:30px;
}
#tr_outerborder {
	float:left;
	position:relative;
	background-image:url(img/tr_outerborder.png);
	width:30px;
	height:30px;
}
#l_outerborder_h {
	float:left;
	position:relative;	
	background-image:url(img/l_outerborder.png);
	background-repeat:repeat-y;
	width:30px;
	height:270px;
}
#r_outerborder_h {
	float:right;
	position:relative;
	background-image:url(img/r_outerborder.png);
	background-repeat:repeat-y;
	width:30px;
	height:270px;
}
#body_content {
	float:left;
	position:relative;
	width:900px;
	
	overflow:hidden;
}
#body_content_text {
	float:left;
	position:relative;
	width:600px;
	
	margin: auto;
	overflow:hidden;
}
#l_outerborder_b {
	float:left;
	position:relative;	
	background-image:url(img/l_outerborder.png);
	background-repeat:repeat-y;
	width:30px;
	height:inherit;
}
#r_outerborder_b {
	float:right;
	position:relative;
	background-image:url(img/r_outerborder.png);
	background-repeat:repeat-y;
	width:30px;
	height:inherit;
}
#l_outerborder_f {
	float:left;
	position:relative;	
	background-image:url(img/l_outerborder.png);
	background-repeat:repeat-y;
	width:30px;
	height:inherit;
}
#r_outerborder_f {
	float:right;
	position:relative;
	background-image:url(img/r_outerborder.png);
	background-repeat:repeat-y;
	width:30px;
	height:inherit;
}
#template_body {
	float:left;
	position:relative;
	width:960px;
	
	overflow:hidden;
}
#bl_outerborder {
	float:left;
	position:relative;	
	background-image:url(img/bl_outerborder.png);
	width:30px;
	height:30px;
	
}
#b_outerborder {
	float:left;
	position:relative;
	background-image:url(img/b_outerborder.png);
	width:900px;
	height:30px;
}
#br_outerborder {
	float:left;
	position:relative;
	background-image:url(img/br_outerborder.png);
	width:30px;
	height:30px;
}

Thanks in advance for info how to stretch those doomed divs

EDIT: Here is layout concept.

URL
hTTp://qsrc.pl/layout.jpg

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 have a CSS defined table that is giving me a problem in IE.

In Firefox, the table cells have no space between them, but I can't get rid of the space between cells in IE. It's only a couple of pixels between each cell but this is messing up the look of the page.

[code]

CSS

#tabnav
{
position : absolute;
left: 28px;
top: 7px;
}

#tabnav tr td
{
position: relative;
float: left;
margin: 0px;
padding: 1px;
border-collapse: collapse;
border-style: solid;
border-width: 1px;
border-color: black;
width: 100px;
height: 35px;
text-align: center;
vertical-align: middle;
}

[code]