HELP ME! Infinite Header and Background space [Archive]

Click to See Complete Forum and Search --> : HELP ME! Infinite Header and Background space

yungboss

04-27-2009, 01:23 AM

Alright Well I don't know exactly how to state my question correctly but, I do have web development experience, but I have been out of the game for about 3 years now and have forgotten nearly everything and see that there is a lot of new stuff as well but to get to the point.

I am designing a website now, and I am at the point where I am ready to code. But What I want to do is have my HEADER like on the whole page width wise... FOR EXAMPLE. www.littlelines.com If you adjust the width of your browser window the NAV BAR and HEADER move with the browsers size and a scrolling cursor doesn't appear until you have made the window TOO small. How do I place my HEADER and NAV bar like this site did.ANother place is www.pshero.com

yungboss

04-27-2009, 12:20 PM

Can some one help please

skilled1

04-27-2009, 12:42 PM

they do it with css and div tags.

in their header, they link to <link href="/stylesheets/layout.css?1223834782" media="screen" rel="stylesheet" type="text/css" />

eg. this
http://www.littlelines.com/stylesheets/layout.css?1223834782

in the page they call the css in their div

<body id="home" onload="">
<div id="header">
<div class="container">

<div id="logo">
<span><a class="img" href="/"><img src="/images/logo.gif" title="Littlelines, LLC. Connecting the dots on the web" alt="Little Lines logo" /></a></span>
</div>
<div id="radiant"></div>
</div>
</div>
<div id="nav">
<div class="container">
<ul>

<li><a href="/" id="hometab">welcome</a></li>
<li><a href="/blog" id="blogtab">bro blog</a></li>
<li><a href="/work" id="worktab">our work</a></li>
<li><a href="/about" id="abouttab">who we are</a></li>
<li><a href="/contact" id="contacttab">contact us</a></li>
</ul>

</div>
</div>

the code they use for the top is

div#header {
margin: 0;
padding: 0;
height: 200px;
background: #fff url(/images/header-bg.gif) repeat bottom right;
}
div#header #logo {
margin: 65px 0 0 0;
padding: 0;
height: 76px;
width: 231px;
float: left;
display: block;
border-style: none;
background-color: transparent;
}
div#header #radiant{
width: 500px;
height: 200px;
margin: 0;
padding: 0;
background: transparent url(/images/flower.jpg) no-repeat 0 0 ;
position: absolute;
top: 0;
right: 50px;
float: right;
}
div#header a:hover { background: none; }

yungboss

04-27-2009, 12:46 PM

THANKS A BUNCH you really helped!!!! But Are there any tuts on the web to strengthen my knowledge on this specific concept???

Fang

04-27-2009, 12:56 PM

Try this:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script type="text/javascript">
</script>

<style type="text/css">
* {margin:0;padding:0;}
html {background:#33f url(BGimage.jpg) repeat-x;}
body {min-width:400px; max-width:800px;margin:auto;border:1px solid red;}
h1 {background:transparent url(imageLogo.jpg) no-repeat right;padding-left:100px;}
</style>

</head>
<body>
<h1><img alt="text logo" src="textLogo.jpg" height="100" width="100"></h1>
</body>
</html>