Page header with multiple backrounds?

Graeme

Hi all.

This is driving me mad!

What I am after is a page header that will look roughly like: (the dots and
arrows would be centered and are graphics)

.............> page header text <............ ..

I'd hoped to to this by having three background images that would display
the ...> and <..... graphics and a plain one behind the text and I'd hoped
to make it all relative with no fixed widths.

After a few days of banging my head off a wall using nested divs I'm still
no further on - is what I want even possible?

BT

Apr 8 '06 #1

Subscribe Reply

1704

Gerry Vandermaesen

Maybe something like this:

<div id="leftbg">
<div id="rightbg">
<div id="headertext" >page header text</div>
</div>
</div>

#leftbg {
background: img(leftbg.png) repeat-y;
}

#rightbg {
background: img(rightbg.png ) repeat-y top right;
}

#headertext {
width: 500px;
margin: 0px auto;
}

Graeme wrote:

Hi all.

This is driving me mad!

What I am after is a page header that will look roughly like: (the dots and
arrows would be centered and are graphics)

............> page header text <............ ..

I'd hoped to to this by having three background images that would display
the ...> and <..... graphics and a plain one behind the text and I'd hoped
to make it all relative with no fixed widths.

After a few days of banging my head off a wall using nested divs I'm still
no further on - is what I want even possible?

BT

Apr 8 '06 #2

Els

Graeme wrote:

Hi all.

This is driving me mad!

What I am after is a page header that will look roughly like: (the dots and
arrows would be centered and are graphics)

............> page header text <............ ..

I'd hoped to to this by having three background images that would display
the ...> and <..... graphics and a plain one behind the text and I'd hoped
to make it all relative with no fixed widths.

After a few days of banging my head off a wall using nested divs I'm still
no further on - is what I want even possible?

Not tested nor tried in any way, but:
One div with a background of dots only , and two nested divs for the
page header text, one (div#one) with the left arrow as background
image positioned left center, the other (div#two) with the right arrow
positioned right center. Then give div#two a solid background colour
and put the <h1> inside of that one.
All you then need is set auto margins and max-width on div#one to make
the dots visible on either side.

If you also want a graphic behind the <h1> instead of solid background
colour, just give div#two enough padding to show the arrows on the
side of the <h1>.

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

Now playing: Camel - Supertwister

Apr 8 '06 #3

jim

Graeme,
Hi, still pulling your hair out?
my suggestion is a bit different perhaps, but it seems to work in msie
and firefox; the border and font-sizes of the style sheet are for
effect, but the main layout and positioning exists in the inline
styles; i set a width on the middle text-holding div and used
line-height to keep the text in the middle; this worked on msie but not
in firefox; also, by using image align properties you can align the
left and right images with the text that way. adjust the margins and
padding percentages of the #parent div box if the image sizes blow the
structure out.:
<head><title>gr aeme solution</title>
<style type="text/css">
#parent div {font-family:arial; font-weight:bold; font-size:12pt;
color:brown; border:1px navy dotted;}
#parent {border:1px red dashed; }
</style>
</head>
<body>
<div id="parent" style="text-align:center;ma rgin:5%; padding:5%"
align="center">
<div style="display: inline; text-align:right; padding:0px; width:32%;">
---->(holds left arrow image)</div>
<div style="display: inline; width:32%; margin:0px; padding:0px;
background-color:white;

text-align:center; height:45px; line-height:2em">you r title text
here</div>
<div style="display: inline; text-align:left; padding:0px; width:32%;">
<----(holds right arrow image)</div>
</div>
</body>

Apr 8 '06 #4

Graeme

Hi everybody

Thank you for the help - after pulling out more hair - I've given up on this
one!

I'd been trying to emulate an existing graphic layout using just CSS and
background images - however it simply will not work correctly enough across
different browsers - so I'm either going to have to go with absolute
positioning or convince the boss she wants something else :-))

Thank you for all the pointers.

Graeme
"jim" <ji*******@aol. com> wrote in message
news:11******** ************@j3 3g2000cwa.googl egroups.com...

Graeme,
Hi, still pulling your hair out?
my suggestion is a bit different perhaps, but it seems to work in msie
and firefox; the border and font-sizes of the style sheet are for
effect, but the main layout and positioning exists in the inline
styles; i set a width on the middle text-holding div and used
line-height to keep the text in the middle; this worked on msie but not
in firefox; also, by using image align properties you can align the
left and right images with the text that way. adjust the margins and
padding percentages of the #parent div box if the image sizes blow the
structure out.:
<head><title>gr aeme solution</title>
<style type="text/css">
#parent div {font-family:arial; font-weight:bold; font-size:12pt;
color:brown; border:1px navy dotted;}
#parent {border:1px red dashed; }
</style>
</head>
<body>
<div id="parent" style="text-align:center;ma rgin:5%; padding:5%"
align="center">
<div style="display: inline; text-align:right; padding:0px; width:32%;">
---->(holds left arrow image)</div>
<div style="display: inline; width:32%; margin:0px; padding:0px;
background-color:white;

text-align:center; height:45px; line-height:2em">you r title text
here</div>
<div style="display: inline; text-align:left; padding:0px; width:32%;">
<----(holds right arrow image)</div>
</div>
</body>

Apr 9 '06 #5

Similar topics

2177

Error Page header or footer.... In Crystal reports for VS.NET

by: V.Boomessh | last post by:

I am facing hte following in Crystal report for VS.NET, can any please help me out of this issue The structure of the report is as follows 0.Report Heade 1.Page Heade 2. Group Header

.NET Framework

4544

Make a forced new page be an odd number

by: Chuck | last post by:

A report has many different groups of multiple pages each. Each group starts on a new page. The report is printed on both sides of the paper. I would like to be able to have each group start on a right hand page, that is, to be printed on an odd numbered page. something like iif(page mod0 is true then force to next page). All suggestions will be gratefully received. Chuck ....

Microsoft Access / VBA

1191

Multiple ASP.NET Forms within the same page

by: Jason | last post by:

Hello, I am converting an old ASP website to ASP.Net and I am running into a problem. I have created a header control that I am loading on every page. This control is gathering some information and displaying it on the screen. There is also a drop down that is populated if they have access to more than one profile and they can switch between them.

ASP.NET

6356

Understanding simplest HTML page

by: Eric Lindsay | last post by:

I have been trying to get a better understanding of simple HTML, but I am finding conflicting information is very common. Not only that, even in what seemed elementary and without any possibility of getting wrong it seems I am on very shaky ground . For example, pretty much every book and web course on html that I have read tells me I must include <html>, <head> and <body> tag pairs. I have always done that, and never questioned it. ...

HTML / CSS

4904

Can't make this page work

by: scottyman | last post by:

I can't make this script work properly. I've gone as far as I can with it and the rest is out of my ability. I can do some html editing but I'm lost in the Java world. The script at the bottom of the html page controls the form fields that are required. It doesn't function like it's supposed to and I can leave all the fields blank and it still submits the form. Also I can't get it to transfer the file in the upload section. The file name...

Javascript

3859

No object definitions in header files?

by: zouyongbin | last post by:

Stanley B Lippman in his "C++ Primer" that a definition like this should not appear in a header file: int ix; The inclusion of any of these definitions in two or more files of the same program will result in a linker error complaining about multiple definitions. So this kind of definition should be avoided as much as possible. But as we know, the definition of a class is always in a header file. And we can use "#ifndef" to eliminate...

C / C++

3999

Multiple page subreport cuts off in report header

by: wjfraser | last post by:

Hello, I have a report with a subreport in its header. When I run the subreport by itself, it shows multiple pages, correctly. When I view the main report, the subreport prints to the bottom of the first page and does not go on to display the rest of its records - the records of the main report begin on the second page. I have tried setting the CanGrow property of everything to "yes" and experimented with lots of the other properties. Does...

Microsoft Access / VBA

2249

Does one need a header file?

by: The Cool Giraffe | last post by:

Please note that i do intend to use a header file. However, i'm not sure if it's really needed or just a convention. Suppose we have the following two files. // Something.h class Something { private: int number; public: Something ();

C / C++

2913

Printing Page Heaer of a sub report

by: Simon | last post by:

Dear reader, In case a report is a sub report the Report Header of the sub report is printed in the report but the Page Header of the sub report will not be printed. This is the same for Page Footer of the sub report. Is there a possibility to force printing Page Header and Page Footer of a sub report.

Microsoft Access / VBA

9656

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...

General

9498

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 effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...

Windows Server

10173

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...

Online Marketing

10110

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...

Windows Server

9967

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...

General

7517

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...

Microsoft Access / VBA

6750

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...

C# / C Sharp

5536

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET

2894

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

by: bsmnconsultancy | last post by:

In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

General