trying to create a header with repeat: repeat-x

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

Subscribe Post Reply

✓ answered by JKing

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

HTML

Expand|Select|Wrap|Line Numbers

 
<div id="header">

<div id="header-content">

<div id="logo"></div>

<div id="login"></div>

</div>

</div>

CSS

Expand|Select|Wrap|Line Numbers

#header-content {width:960px;}

4616

JKing

1,206

Expert 1GB

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

 
#header {width:100%;} 

.left {float:left;}

.right {float:right;}

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

The HTML

Expand|Select|Wrap|Line Numbers

 
<div id="header">

<div class="right">I am the right div</div>

<div class="left">I am the left div</div>

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

</div>

Apr 4 '11 #2

JnrJnr

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

1,206

Expert 1GB

Can you give me a link to the project or full markup.

Apr 4 '11 #4

JnrJnr

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

1,206

Expert 1GB

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

HTML

Expand|Select|Wrap|Line Numbers

 
<div id="header">

<div id="header-content">

<div id="logo"></div>

<div id="login"></div>

</div>

</div>

CSS

Expand|Select|Wrap|Line Numbers

#header-content {width:960px;}

Apr 5 '11 #6

JnrJnr

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

1,206

Expert 1GB

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

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

1,206

Expert 1GB

Glad to hear it, good luck with the rest of your project.

Apr 5 '11 #10

by: Patrick Gibbons | last post by:

What I would like to do is create header and footer information for my webpages which are created by calling from a referenced .js page . . . for example in Header.js: <script...

Javascript

Repeating header every x rows

by: Phil Lamey | last post by:

Hi All, I can't believe I am having touble with this ... Perhaps it is so easy and I am so brain dead right now that I am missing something simple. I am trying to build a datagrid that would...

.NET Framework

Datagrid ... Getting header to repeat every 10 rows

by: Phil Lamey | last post by:

I am trying to build a datagrid that would have a header repeat every 10 rows. I don't want a scrollable datagrid because I want the list to be printable. I posted this yesterday and didn't get...

.NET Framework

Is this possible? Equivalent of C++ header file?

by: Adam Clauss | last post by:

OK, lets say I have a C# Windows application. In it is a a series of namespaces, all rooted for a certain namespace A. For ex, the "using" directives would read something like: using A; using...

C# / C Sharp

Header in ASP.Net?

by: Sam | last post by:

I want to create header whereby I could reuse whenever new aspx. However, it is display nothing and please find my coding: index.aspx ========== <%@ Page Language="VB" %> <%@ Register...

ASP.NET

How to create header file with compiling

by: Al | last post by:

I'm still trying to do this but it never worked! In a .cpp file, I write the code, and at the beginning, I write: #ifndef MYLIST_H #define MYLIST_H ....to end: #endif What's wrong with it for...

C / C++

generating word document with header and footerwithout using word object.

by: srk | last post by:

hi to all, i need some help , my problem is that i have to generate a word document withe the data from data base and it should be displayed as tables in word and i have to insert some header and...

ASP.NET

how to create header text for data grid

by: Suresh Kumar | last post by:

Hai all, I need to display some text for each row header in the data grid. that is ., I need to display the text in the gray part for each row starting in the data grid. Can anyone help me...

C# / C Sharp

how to create header files in c/c++

by: bhandarisourabh | last post by:

hi, i m sourabh....... Can any1 tell me how to create a header file in c/c++

C / C++

Easy Steps to Fix "Canon Printer Won't Connect to WiFi Network"

by: taylorcarr | last post by:

A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...

General

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Batch import of multiple excel files into the database

by: ryjfgjl | last post by:

If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...

Data Management

Merging data from multiple Excel files

by: ryjfgjl | last post by:

In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...

Data Management

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

trying to create a header with repeat: repeat-x

✓ answered by JKing

Similar topics