CSS - Header Needs Serious Help

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.

what in gods name am I doing wrong?
I want the header image to scale with the web page, I can't stand how it shows the scroll bar when you resize firefox's window.

themidnighter .ca/test

Thanks!

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

hi my site uses class i press, a wordpress theme (www,grimsbyforsale,com) how do i make my header bigger so my logo image does not overlap? what values on what code would i need to change i am new to all this ?

I have a Header, and inside that header I want to have a Black empty I guess you would say mini Header that will be at the top of my main Header.

How would one glue the mini Header to the top of the Main Header?

Would one use Position: Relevant, Margin ? ?, top: ? Left: ?....?

Thank you

My website works perfectly on IE, but not in IE. The page loads fine in Firefox, but after a few seconds, the page jumps and the header cuts in half and almost hides behind my toolbar.

Hi guys,

So, I've been working on my portfolio site over the past week or so and I'm really pleased with how it's looking. You can view it here eyeforillustration.com It is on the Cargo Collective platform.

I have just one last problem that I just can't get my head around.

Basically, I can't get the header image aligned with the thumbnails and footer properly.

I would also like the header to slide like the thumbnails and footer when you resize the page. Also, when viewing it in different resolutions it seems to jump around depending on the width?

I'm pretty sure it's something to do with the header container but I've tried everything and can't get it working.

If you guys could take a quick look, any help would be much appreciated.

Jack

(If anyone would like an invitation to try Cargo out, I do have a couple to give away, just let me know)

Hey everyone. I've been working on a redesign of a website I run. Up until now, I hardly used CSS for anything at all. My new redesign is using XHTML-Strict and CSS.

I'm having some big problems working out the layout of the header.

The new website layout is located at:
hxxp://Schiz0.securityexploits.com/~Schiz0/skittles_beta/home.php
(If you get some php errors, just refresh the page. It's a work in progress).

Basically, this is what I WANT it to look like:
hxxp://img140.imageshack.us/img140/8765/headerit2.png

I want the entire header is aligned on FOUR rows: Left News, Banner, Right News Username, Date, Donations bar AP/Rank, Search Boxes, Donate link Navigation Links
The problem I'm having is...the objects aren't aligned properly in rows, and it's kinda throwing off the whole layout of the header. You can see in the following screenshot what I mean. The Donations bar isn't aligned with the date and username row.

hxxp://img139.imageshack.us/img139/5341/sitescreenshotuj3.png

I tried using both div's and span's. I also played around with the css for quite a while, and still can't get it.

The CSS for that website is located at:
hxxp://schiz0.securityexploits.com/~Schiz0/skittles_beta/stylesheets/Schiz0.css

If anyone can help me out, I would greatly appreciate it. I'm so close to just using html tables instead of these div's and span's

Note: Sorry for the "hxxp" links...Apparently new user accounts, such as mine, aren't allowed to post links.

Hello,

I am trying to create a header with a background color and a padding
of the text.
I know that if I apply the background color to the header it will
expand 100%.
So I did the following:

<h1><span>Header</span></h1>

h1 {}

h1 span {
background-color: #252525;
color: #D2D2D2;
font: normal 1.2em/1.8 Verdana, Geneva, sans-serif;
letter-spacing: 0.1em;
padding: 0.8em;
}

But now I am not able to apply the top and bottom padding.

How should I create this header?

Thanks,
Miguel

I'm trying to put together a CSS layout for a blog, and unfortunately my meager skills have crapped out on me.

The page currently looks like this: http://prestonandtread.com/test/

I want it to be a full screen header while the footer is fixed and the width of the content. I thought I had it pieced together ok enough from different tutorials, but the top and left sides of the screen show background and the content isn't parking itself on the page correctly. Help me get this to where it should be!

Code:

<style type="text/css">
html,
body {
	margin:0;
	padding:0;
	height:100%; /* 100 % height */
}
#header {
	width: 100%;
	height: 150px;
}
html>body #header {
	position:fixed;
	z-index:10; /* Prevent certain problems with form controls */
}
html>body #wrap {height:100%;} /* 100 % height */
#wrap {
	width:479px;
	margin:0 auto;
}
html>body #content-wrap {height:100%;} /* 100 % height */
html>body #content {padding:10px 10px 10px 10px;} /* 6em = height of #header and #footer + 1em, 1em = give the content some breathing space */
#footer {
	width:479px;
	height:160px;
}
html>body #footer {
	position:fixed;
	bottom:0;
	z-index:10; 
}
html,
body {
	background-color: #99CCFF;
}
#header {
    text-align: center;
    background-image: url(background.jpg);
	background-position: top left;
    background-repeat: repeat-x;
	background-color: #99CCFF;
}
#footer {
    text-align: center;
    background-image: url(eyes.jpg);
	background-color: #99CCFF;
}
#content-wrap,
#content {
	background-color: #FFFFFF;
}
#footer a {color:#111;}
	</style>

OK, my site looks good in every browser except IE.
Here's the site: here

Can someone tell me how to fix the CSS for IE?

thanks

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 All,

Having real issues with a header bar here. What I am trying to do is a headerbar with 3 divs. The left and rights are just for an image that I stretch out to match the size of the div. The center one is where I am having troubles. I just want the image for it to stretch to fill in between the left and right divs. I'm happy for the left and right divs to be fixed width however i want the center to be flexible.

Any help greatly appreciated. BTW some of the css is redundant from me stuffing around with different tags to get it right.

Cheers,

J


The CSS:


Code:

#topbar {
  width:100%;
  heigh:200px;
  margin:0;
  border:0;
}

#topleftbox {
  float: left;
  width: 100px;
  border: 0;
  margin: 0;
  height: 200px;
}  


.topbar img {
  height: 100%;
  width: 100px;
 
}

#toprightbox {
  float: right;
  width: 100px;
  border: 0;
  margin: 0;
  height: 200px;
}  



#header {
  margin-left: 100px;
  height: 200px;
}  

.headbar img{
  height: 100%;
  width: 100%;
  
}
  

#logo {
  margin: 10px;
  width: 300px;
  height: 180px;
  position: absolute;
  float: left;
  margin-top: 10px;
  background-image: url("images/logo.png");
  background-image: no-repeat;
}




.blue { 
  background-color: #E0E0FF; 
}

body{
  margin: 0px;
  block: inline;
}


.topbar {
  width: 100%;
}

and the html:

Code:

<div id="topbar">
	<div id="topleftbox" class="topbar blue">
	  <img src="images/leftborder.png" />
  	  </div>
	<div id="toprightbox" class="topbar blue">
	  <img src="images/rightborder.png" />
  	  
	</div>
	<div id="header" class="headbar">
          <div id="logo"></div>
	  
  	  <img src="images/headerbar.png" />
		
	</div>

	
</div>

Hi,

I'm new to CSS and am using the weebly website builder. I need to add a link to my header image. Could anyone help me with this?

This is the CSS:

#header{
width: 961px;
height: 141px;
border-top: 2px solid #cccccc;
border-left: 2px solid #cccccc;
border-right: 2px solid #cccccc;
border-bottom: 1px solid #cccccc;
}

.weebly_header{
background: url(%%HEADERIMG%%) no-repeat;
}

thank you!