Site Reference Forums

GP Michal · 2007-09-25 19:35:30

Hi y'all,

I was trying to figure out how to create a page header for my site (which I'm getting ready to rebuild) that would curve upwards near the middle or even have certain pictures where the bottom of the pic is below the bottom of the header and the top half of the pic is above the bottom of the header. (See http://www.picnic-basket.com for an example of the curved header bottom idea or http://www.winepicnicbaskets.com/ for the header bottom bisecting the pic idea.) Anyway, after looking at the source code of the above site and also "saving image as" various parts of the header and then looking at the pics, I think I figured out how they did it. It looks like they ceated their entire header, curves and all, in something like Photoshop or some other similar software. Then, they sectioned off the header and put the sections in various cells of a table. This allowed them to fit the search field directly below the high part of the curved header bottom because they weren't restricted to display the entire header in a large rectangular box.

Anyway, I think I could duplicate what they've done with tables, but I would rather use CSS positioning instead. Can anyone tell me the easiest way to duplicate what they've done using CSS?

Thanks,
GP

Last edited by GP Michal (2007-09-25 20:00:22)

Northie · 2007-09-26 02:13:47

don't slice the image and use

background-image:url(/path/to/image.jpg);
background-repeat:no-repeat;

as the css on the containing div of your page

Ryan_steyn · 2007-09-26 03:29:09

Basically all they did was create a pretty picture in fireworks/photoshop and sliced it up. Then they exported to html and bobs your uncle.. you have a shiny header. Why don't you try make it better? if you use css and divs you can create the various components and just put them on top of each other (using z-index), it will make alterations much easier. For example, make the curvy bit one jpg, make the links as gif or png with invisible background. I have no problem helping out with some of the sticky bits if you need a hand big_smile i just finished the design of an entire site using only divs - so its still fresh i my mind

elizabethrichardson · 2007-09-26 04:17:51

Ryan_steyn wrote:
I have no problem helping out with some of the sticky bits if you need a hand

Now, watch out for Ryan's stcky bits...some of us had a good look at them with his last avatar...gees, I wish I'd kept the link for that one!

ER

Ryan_steyn · 2007-09-26 06:08:37

elizabethrichardson wrote:
Ryan_steyn wrote:
I have no problem helping out with some of the sticky bits if you need a hand
Now, watch out for Ryan's stcky bits...some of us had a good look at them with his last avatar...gees, I wish I'd kept the link for that one!

ER

hahahaha... sticky bits.... hands.... hahhahaha lol

GP Michal · 2007-09-26 08:55:56

Hey Northie,

My first thought was to do exactly what you suggested. The only thing that wouldn't be desirable (at least I think) is that the seach field box and text situated directly under the highest vertex of the curve would not be able to be planted where it is on the example website. This would be because when you create a div it actually creates a box. How could one put additional elements within the header div when the contents of header div is one large .jpg (and have the add'l element show up "within" the confines of the .jpg?) Is is possible to overlap divs and choose one or the other to be "on top" ? Perhaps with the use of the z-index?

GP

Ryan_steyn · 2007-09-26 09:12:30

Gp... yes you can do that... and you should read the replies a bit more carefully... you just suggested exactly what i said you should do... and you dont put them in your background div, leave that as is and just put the header images in seperate divs.

Northie · 2007-09-26 10:24:31

css allows a background image that behave just like a background colour

The div is still "empty" - there is no img tag or anything; so the text (or other elements) appears to be on top the image

Div s are block level elements; which mean they are basically rectangles.

By default block level elements are full width and only as high as they need to be. CSS can over ride these.

As RS says, there's also the z-index. This defaults to 0 but can be positive or negative and allows you to layer elements that are either floated or absolutely positioned

GP Michal · 2007-09-26 11:18:52

OK...thanks Northie and RS...sorry for not reading the replies close enough...

I think I got it. Create my header as a background and put it in its own div. This will be full width and as high as I tell it to be. Then...I could have a GIF or a PNG in it's own div, restrict the width of it to what ever I wanted to, and then absolutely position it anywhere I wanted to...even if the top of the div was above the bottom of the header background div. Sounds lke fun! I'll play around with it tonight!

One question though. If I wanted to put a search field box with associated text over the background header, would I simply put it into it's own div as well and then absolutey position it? Or...perhaps it wouldn't need to be in a div. I could simply put them in a <p> element and absolutely position that?

GP

Northie · 2007-09-26 11:24:30

It's even simpler than that

Code: html

<div class='header'>

 <h1>Hello world</h1>

 <img src='me.png' />

</div>

Code: css

.header {

     background-image:url(header.jpg);

     background-repeat:no-repeat;

     width:800px;

     height:120px;

}



.header h1 {

     text-align:center;

}

//and if css3 was properly suppoted, you could use selectors like this



.header img[@src='me.png'] {

     float:right;

     z-index:2;

}

GP Michal · 2007-09-26 13:16:38

Thanks Norhie,

I'll try your example tonight. The only thing I'm concerned about is that it the code makes it look like I won't have specific control of the positioning of the <h1> and the <img>. I would guess that they will end up in the horizontal center of the div, but I'm not sure where they'll end up vertically.

Steven_A_S · 2007-09-26 14:43:46

If you're using that method, you can get some control back by adjusting margins and/or padding. Say you wanted to move that image in 20 pixels from the right side of the div, just add margin-right:20px; to that element. Even more tricksey, if you wanted to put the image on the border of the div (for whatever reason), you could set margin-right:-10px;

If you're putting a little bit of text like a label in front of your text box, use a much overlooked html tag <label> around both the text and the textbox, then control both at the same time by writing your css to the label element.

GP Michal · 2007-09-26 15:24:59

Ahhh...I see what you mean Steven. Instead of using the "text-align: center property", I could use a margin property on the <h2> or the <img> element. (as long as I referred to the selectors as ".header h1" and ".header img"...or both of them together enclosed in the <label> element.)

I could also use the margin property to get the desired vertical alignment as well. How nifty!

Last edited by GP Michal (2007-09-26 15:27:14)

Northie · 2007-09-26 17:23:23

Where did the label element come into this????

You have control over everything with almost complete simplicity using CSS

you could absolutely position things

element {
position:absolute;
top:35;
left:250;
}

These are just examples give that we have no idea what element you want on the page. So far we've got a div with a graphic behind it, a title (should be H1) an image and a search box.

Use semantic HTML to structure the page - don't use HTML for formatting

Then...we can use CSS to style the page to suit our needs.

For example:

Code: html

<html>

 <head>

  <title>My Site</title>

  <link type='text/css' rel='stylesheet' href='styles.css' />

 </head>

 <body>

  <div id='page-wrapper'>

   <div id='header'>

    <h1>Title</h1>

    <img src='me.jpg' />

   </div>

   <div id='left'>

    <form name='search' id='search' action='search.php'>

     <input type='text' name='q' />

     <input type='submit' value='Search' />

    </form>

    <ul>

     <li>a href='#'>Nav Link 1</a></li>

     <li>a href='#'>Nav Link 2</a></li>

     <li>a href='#'>Nav Link 3</a></li>

     <li>a href='#'>Nav Link 4</a></li>

    </ul>

   </div>

   <div id='main'>

    <h2>Sub Headding</h2>

    <p>Some copy</p>

   </div>

   <div id='footer'>

    <p>Copyright Northie 2007</p>

   </div>

  </div>

 </body>

</html>

Using CSS selectors we can style the <p> tag in the main div differenly from the <p> tag in the footer

The h1 can have margin/padding/positioning, whatever

The left div would have a width on it and be floated left, the main div probably just floated left, then cleared

You could then end up with

+----------+--------------------------+ | | +----------+--------------------------+ | | | | | | | | | | | | | | | +----------+--------------------------+ | | +----------+--------------------------+

images can be placed as background images without the need for them to get in the way of text, etc.

The background images on this page - http://www.articledocs.com/ are not part of the DOM; if you can, turn CSS off and then look at the site again - there is a clear semantic structure to the HTML and the CSS makes it look pretty

Steven_A_S · 2007-09-26 22:56:46

Northie wrote:
Where did the label element come into this????

It was a suggestion for use on his search field.

Ryan_steyn · 2007-09-27 01:19:14

personally i would simply put the search field in a div at the bottom of my code, absolute position it to where it needs to go. Remember, css gives you complete control... for example when i layout my pages i have the content first, current news second.... bugger it, just look glad

Code: html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

  <meta http-equiv="content-type" content="text/html; charset=windows-1250">

  <meta name="generator" content="PSPad editor, www.pspad.com">

  <title></title>

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

  </head>

  <body>

  <div id="wrapper">

                                

                                <div id="content"> PAGE CONTENT

                                <?php include ("content/travel_tips/travel_tips_body.html") ?>

                                </div>

  

                    

                    

            <div id="left_article"> LEFT HAND ARTICLE

            <?php include ("content/travel_tips/travel_tips_news.html") ?>

            </div>

            

            

                                <div id="footer_navigation"> FOOTER MENU

                                <?php include ("menus/bottom_menu.html") ?>

                                </div>

            

            

            

            <div id="left_navigation"> LEFT HAND MENU

            <?php include ("menus/left_menu.html") ?>

            </div>

                    

                                                    <div id="right_details">

                                                    <?php include ("contact_details.php")?>

                                                    </div>

                                                    

                                                    <div id="right_image1"> RIGHT IMAGE

                                                     <img src="content/travel_tips/children_on_safari.jpg">

                                                    </div>

                                                    

                                                    <div id="right_image2"> RIGHT IMAGE

                                                    <img src="content/travel_tips/lalibela_sunset.jpg">

                                                    </div>

                                                    

                                                    <div id="right_image3"> RIGHT IMAGE

                                                    <img src="content/travel_tips/lalibela_landing_strip.jpg">

                                                    </div>

                                                    

                                                    

                                                    

                                <div id="header_navigation"> TOP MENU

                                <br />

                                <?php include ("menus/top_menu.html") ?>

                                </div>

                                                      

                                <div id="header_image"> HEADER PICTURE

                               <img src="images/map_headers/map.jpg">

                                </div>

                                

                                

             <div id="left_buttons"> MY LEFT HAND AAB BUUTONS

             <?php include ("menus/three_buttons.html") ?>

             </div>  

             

             <div id="quote"> THIS QUOTE SITS ON TOP-BUT IS POINTLESS So ITS AT THE BOTTOM OF MY CODE

             <p><b><i>"the only man i envy is the man who has not yet been to Africa, for he has so much to look forward to"</i></b</p>

             </div>

             

                                

  </div>

  </body>

</html>

That is complete control... I use php include for my content etc just because it keeps things neater and more manageable but you can obviously replace those includes with whatever you want as long as it is html.

Northie · 2007-09-27 02:21:47

Steven_A_S wrote:
If you're putting a little bit of text like a label in front of your text box, use a much overlooked html tag <label> around both the text and the textbox, then control both at the same time by writing your css to the label element.

Steven_A_S wrote:
Northie wrote:
Where did the label element come into this????
It was a suggestion for use on his search field.

Sorry, missed that! glad

GP Michal · 2007-09-27 10:26:46

I thank all of you for your help...and it WAS very helpful.

I had a chance to play around with all the ideas last night and all went relatively well. I was able to use a .jpg as a background for the header and position an <h1> and an <img> exactly where I needed them to be by using absolute positioning and the z-index.

Code: html

<html>

<head>



<link rel="stylesheet" type="text/css"

href="stylesheets/mystyle.css" />





</head>

<body>



<div class="header">

<img src="images/basket.jpg" />

<h1>Basket4picnic.com</h1>

</div>



</body>

</head>

Code: css

body {

margin: 0;

}



.header {

margin: 0;

background-image: url(../images/springpicnicbig.jpg);

background-repeat: repeat-x;

height: 498px;

}

.header h1 {

font-size: 4em;

position: absolute;

left: 5%;

top: 40%;

color: magenta;

font-weight: bold;

font-family: Verdana;

z-index: 2;

}

.header img {

position: absolute;

top: 45%;

left: 69%;

width: 199px;

height: 250px;

z-index: 1;

}

Thanks again!

GP

Steven_A_S · 2007-09-27 11:48:37

One thing I would mention on using absolute positioning: The way you're doing it positions it relative to the page, which works well in most cases. But if the user is using a plugin that adds information on the top of the page, it will push down the header element (background) while the positioned elements stay the same distance from the top of the page (not the header element). You can test this behavior with the SeoQuake plugin for Firefox, which does just that.

There is a simple fix for that, just add a position:relative; property (nothing else) to the .header element. Keep the position:absolute; properties on the other elements. This property makes the header a positioned element even though it goes where it would naturally go, then elements inside this one will always be positioned in the same spot based on the header rather than on the page.

Last edited by Steven_A_S (2007-09-27 11:51:18)

GP Michal · 2007-09-27 14:15:09

Thanks Steven...great point! So when I revise my CSS code the .header should look like this?

Code: css

.header {

position: relative;

margin: 0;

background-image: url(../images/springpicnicbig.jpg);

background-repeat: repeat-x;

height: 498px;

}

Last edited by GP Michal (2007-09-27 14:15:50)

Sponsored Results

Site Reference Forums

#1 2007-09-25 19:35:30

Curvy page header using CSS

#2 2007-09-26 02:13:47

Re: Curvy page header using CSS

#3 2007-09-26 03:29:09

Re: Curvy page header using CSS

#4 2007-09-26 04:17:51

Re: Curvy page header using CSS

Ryan_steyn wrote:

#5 2007-09-26 06:08:37

Re: Curvy page header using CSS

elizabethrichardson wrote:

Ryan_steyn wrote:

#6 2007-09-26 08:55:56

Re: Curvy page header using CSS

#7 2007-09-26 09:12:30

Re: Curvy page header using CSS

#8 2007-09-26 10:24:31

Re: Curvy page header using CSS

#9 2007-09-26 11:18:52

Re: Curvy page header using CSS

#10 2007-09-26 11:24:30

Re: Curvy page header using CSS

Code: html

Code: css

#11 2007-09-26 13:16:38

Re: Curvy page header using CSS

#12 2007-09-26 14:43:46

Re: Curvy page header using CSS

#13 2007-09-26 15:24:59

Re: Curvy page header using CSS

#14 2007-09-26 17:23:23

Re: Curvy page header using CSS

Code: html

#15 2007-09-26 22:56:46

Re: Curvy page header using CSS

Northie wrote:

#16 2007-09-27 01:19:14

Re: Curvy page header using CSS

Code: html

#17 2007-09-27 02:21:47

Re: Curvy page header using CSS

Steven_A_S wrote:

Steven_A_S wrote:

Northie wrote:

#18 2007-09-27 10:26:46

Re: Curvy page header using CSS

Code: html

Code: css

#19 2007-09-27 11:48:37

Re: Curvy page header using CSS

#20 2007-09-27 14:15:09

Re: Curvy page header using CSS

Code: css

Active Discussions

Review Requests and Introductions

Board footer