By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,962 Members | 1,967 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,962 IT Pros & Developers. It's quick & easy.

trying to create a header with repeat: repeat-x

JnrJnr
P: 88
Hi guys and girls Im trying to make my header repeat.

What I have:
I have a straight-forward <div> header with two <div>'s (logo and login)inside the header. The <div> logo is on the left and the <div> login is on the right.

HTML
<div id = "header">
<div id = "logo"> <div/>
<div id = "login"> <div/>
<div/>

CSS
#header
{
width: 1400px;
height: 173px;
background-color: blue;
background-repeat: repeat-x;
margin-left: auto;
margin-right: auto;
}
#logo
{
margin-left: 50px;
width: 370px;
height: 173px;
float: left;
}
#login
{
margin-left: 590px;
width: 370px;
height: 115px;
float: left;
}

What I want:
The header <div> should repeat itself. As soon as I take out the width: in the header <div> then it does repeat itself but then the two <div>'s inside the header <div> dont follow the page like it does with the width: element.
My header is the same as that of Facebook's main/register page where you have the blue header that repeats, then the logo on the left and the login on the right: http://www.facebook.com/
Now I just want my header to repeat like theirs.
Your help would be appreciated!
Apr 4 '11 #1

✓ answered by JKing

If you add an extra fixed width div it should solve the problem.

HTML
Expand|Select|Wrap|Line Numbers
  1. <div id="header">
  2. <div id="header-content">
  3. <div id="logo"></div>
  4. <div id="login"></div>
  5. </div>
  6. </div>
  7.  
CSS
Expand|Select|Wrap|Line Numbers
  1. #header-content {width:960px;}
  2.  

Share this Question
Share on Google+
9 Replies


JKing
Expert 100+
P: 1,206
Hello.

background-repeat is for background images not solid colors. Facebook accomplishes their blue bar by setting it's width to 100% and setting the background color to their chosen tint of blue.

Now, since you are floating two divs inside of your header div, it is important that you also clear those floats.

Clearing can be accomplished several ways but I personally choose to use a clearing div because of the ease of use and cross browser compatability. Here is an example on clearing.

The CSS
Expand|Select|Wrap|Line Numbers
  1. #header {width:100%;} 
  2. .left {float:left;}
  3. .right {float:right;}
  4. .clear {{clear:both;height:1px;overflow:hidden;mergin-top:-1px;}
  5.  
The HTML
Expand|Select|Wrap|Line Numbers
  1. <div id="header">
  2. <div class="right">I am the right div</div>
  3. <div class="left">I am the left div</div>
  4. <div class="clear"><!-- --></div>
  5. </div>
  6.  
Apr 4 '11 #2

JnrJnr
P: 88
Thank you for your reply.
I did try your example and it works BUT the headers content does not flow with the page and remain center when dragging the form smaller adn now Im back to my original problem.
Before I explain let me first correct my mistake...I do have an image for my header instead of just the background-color.
Ok, my original problem was that as soon as I start to drag the form smaller (to the left or right) at a certain location the right <div> jumps out of its original location.
I want the form to overlap/cover the div when you drag the form smaller and the header content to flow with the page and stay center just like Facebook's header.

Could you please help I know there must be a way
Apr 4 '11 #3

JKing
Expert 100+
P: 1,206
Can you give me a link to the project or full markup.
Apr 4 '11 #4

JnrJnr
P: 88
This is what I did like you explained:
HTML
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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 runat="server">
<title></title>

<link rel = "Stylesheet" href = "StyleSheet.css" type = "text/css" />

<style type="text/css">


.flashLogo
{
margin-left :50px;
width:377px;
height:173px;
float:left;
position:relative;

}
.loginspace
{

width: 370px;
height: 115px;
float: right;
}
</style>

</head>
<body >
<form id="form1" runat="server">

<div id="header">

<div class = "flashLogo" runat= "server" >

</div>

<div class = "loginspace" >
login goes here</div>

<div class = "clear"></div>

</div>


</form>
</body>

</html>

CSS
#header
{
height : 173px;
width:100%;
background-image: url('images/flash_background.jpg');
background-repeat :repeat;
margin-left :auto;
margin-right : auto;
margin-top : 20px;
margin-bottom : auto;
}

.clear
{
clear:both ; height:1px;
overflow :hidden; margin-top: -1px;
}

This is what I had before:
HTML
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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 runat="server">
<title></title>

<link rel = "Stylesheet" href = "StyleSheet.css" type = "text/css" />

<style type="text/css">


#flashLogo
{
margin-left :50px;
width:377px;
height:173px;
float:left;
position:relative;

}
#loginspace
{

width: 370px;
height: 115px;
float: right;
}
</style>

</head>
<body >
<form id="form1" runat="server">

<div id="header">

<div id= "flashLogo" runat= "server" >

</div>

<div id = "loginspace" >
login goes here</div>

<div class = "clear"></div>

</div>


</form>
</body>

</html>

CSS
#header
{
height : 173px;
width:1400px;
background-image: url('images/flash_background.jpg');
background-repeat :repeat;
margin-left :auto;
margin-right : auto;
margin-top : 20px;
margin-bottom : auto;
}
Here is a video of my project
The first part is what I want exept that the header must repeat. The second part is what I did after you explained but the login <div> jumps...
http://s1218.photobucket.com/albums/...rent=helps.mp4
Apr 4 '11 #5

JKing
Expert 100+
P: 1,206
If you add an extra fixed width div it should solve the problem.

HTML
Expand|Select|Wrap|Line Numbers
  1. <div id="header">
  2. <div id="header-content">
  3. <div id="logo"></div>
  4. <div id="login"></div>
  5. </div>
  6. </div>
  7.  
CSS
Expand|Select|Wrap|Line Numbers
  1. #header-content {width:960px;}
  2.  
Apr 5 '11 #6

JnrJnr
P: 88
Thanks but what I did was use overflow: hidden;
to prevent my my login <div> from jumping
http://s1218.photobucket.com/albums/...rrent=help.mp4 It would be better if the login <div> was still visible when the form is resized smaller. Any ideas?
Apr 5 '11 #7

JKing
Expert 100+
P: 1,206
Setting the overflow to hidden does just that. It hides whatever is too large for the container. Try setting overflow to scroll instead of hidden. If that doesn't work try the fixed width div as I suggested previously.

Edit: Your videos are pretty neat by the way.
Apr 5 '11 #8

JnrJnr
P: 88
Haha awesome! Iv been trying to get this right for 3 days now. Im new to CSS...
I used your idea of adding another fixed-width div.
I previously tried the extra div idea by using
z-index: -1; etc etc but you got exactly what I wanted.
http://s1218.photobucket.com/albums/...t=Resolved.mp4

Thank you!
Apr 5 '11 #9

JKing
Expert 100+
P: 1,206
Glad to hear it, good luck with the rest of your project.
Apr 5 '11 #10

Post your reply

Sign in to post your reply or Sign up for a free account.