Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

put header in a container 1

Status
Not open for further replies.
singersower

singersower

Technical User
Jan 5, 2005
20
US
I want my header to view properly and still be liquid. I am trying to get away from using include pages and go with strict xhtml and css.
view problem:
Here's what I WANT it to look like: but with css and drop down menus.


So: how would I use a container and/or absolute values to properly position my header and navigation bar?

The code for my latest page looks like this (using an external style sheet)

style sheet looks like this:
[/* CSS Document */
body{
font-family: Georgia, Arial, "Courier New", Verdana;
color: #4D4C97;
font-size: 100%;
margin-left: 0px;
margin-top: 0px;

}
#leftbluenav {
background: url(images/blb_bg.gif);
}
#navigation {
position: absolute;
width: 846px;
height: 97px;
z-index: 1;
left: 155px;
top: 220px

}
h1 {margin-top: 3%;
margin-left: 5%;
font-size: 150%;
}

h2 {
margin-left: 5%;
margin-top: 3em;
margin-bottom: 3em;
}
h3.purpose {text-decoration: underline;
margin-left: 5%;
}
.subheading {margin-left:5%;
font-style: italic;
}
ul { list-style-type: disc;
margin-left: 5%;
}

<!---------css for left navigation--------->
<!----display: block makes the entire width of the button clickable------------------->

#button {

border-right: 1px solid #000;
padding: 0 0 0 0;
margin-bottom: 1em;
font-face: Georgia, 'Lucida Grande',
Verdana, Lucida, Geneva, Helvetica,
Arial, sans-serif;
background-color: #2175bc;
color: #333;
}
#button ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
width: 15em;
}

#button li {
border-bottom: 1px solid #90bade;
margin: 0;
}


#button li a {
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 10px solid #C6C6C6;
border-right: 10px solid #C6C6C6;
background-color: #414A94;
color: #fff;
text-decoration: none;
width: 15em;
}

html>body #button li a {
width: 15em;
}

#button li a:hover {
border-left: 10px solid #6699FF;
border-right: 10px solid #6699FF;
background-color: #5B65BA;
color: #fff;
}

<!-------------end of navigation----------------->
<!--------------begin main page header------------->

#Table_01 {
position:absolute;
left:0px;
top:0px;
width:1001%;
height:233px;
}

#bfheader107747p-01_ {
position:absolute;
left:0px;
top:0px;
width:994px;
height:104px;
}

#bfheader107747p-02_ {
position:absolute;
left:0px;
top:104px;
width:1001px;
height:76px;
}

#bfheader107747p-03_ {
position:absolute;
left:0px;
top:180px;
width:994;
height:52px;
}

#minutes {
border: 1px solid #000;
margin: 2em;
width: 10em;
padding: 5px;
}

<!-------------begin child page headers-------------------->

#pageheader h1 {background:transparent pastorspage.gif no-repeat top left;
margin-top: 0px;
width: 1001px;
height:
float: left;
}

#pageheader h2 {background:transparent announcements.gif no-repeat top left;
margin-top: 0px;
width: 1001px;
height:
float: left;
}

]
HTML LOOKS LIKE THIS
[<body >
<div class="Table_01">
<img id="bfheader107747p_01" src="images/bfheader107747p_01.gif" width="994" height="104" alt="" /></div><div class="bfheader107747p-02_"><img id="bfheader107747p_02" src="images/bfheader107747p_02.gif" width="994" height="76" alt="" /></div>
<div class="bfheader107747p-03_ ">
<img id="bfheader107747p_03" src="images/bfheader107747p_03.gif" width="158" height="52" alt="" /><img id="bfheader107747p_04" src="images/bfheader107747p_04.gif" width="152" height="52" alt="" /><img id="bfheader107747p_05" src="images/bfheader107747p_05.gif" width="120" height="52" alt="" /><img id="bfheader107747p_06" src="images/bfheader107747p_06.gif" width="122" height="52" alt="" /><img id="bfheader107747p_07" src="images/bfheader107747p_07.gif" width="112" height="52" alt="" /><img id="bfheader107747p_08" src="images/bfheader107747p_08.gif" width="134" height="52" alt="" /><img id="bfheader107747p_09" src="images/bfheader107747p_09.gif" width="80" height="52" alt="#" /><img id="bfheader107747p_10" src="images/bfheader107747p_10.gif" width="116" height="52" alt="#" />
</div>
<div><marquee style="color: #000080; font-family: Arial">Welcome to the Home Page of a dynamic community of&nbsp; Christians called "Believers Fellowship."   Take a look around and let us know what you think.</marquee></div>
<script type="text/javascript" src="dropdownmenu.js"></script>
<script type="text/javascript" src="SDDM.js"></script>

<div class="navigation" id="layer1">
<a href="pastorspage.htm"onMouseOut="SDDM_deactivate(1);" onMouseOver="SDDM_activate(1);"><img name="SDDM_image1" id="SDDM_image1"src="images/bfheaderbuttongr19.gif" width="125" height="25" border="0"></a><a
href="youth.htm"onMouseOut="SDDM_deactivate(2);" onMouseOver="SDDM_activate(2);"><img name="SDDM_image2" id="SDDM_image2" src="images/bfheaderbuttongr04.gif" width="125" height="25" border="0"></a><a
href="ladies.htm"onMouseOut="SDDM_deactivate(3);" onMouseOver="SDDM_activate(3);"><img name="SDDM_image3" id="SDDM_image3" src="images/bfheaderbuttongr07.gif" width="125" height="25" border="0"></a><a
href="mens.htm"onMouseOut="SDDM_deactivate(4);" onMouseOver="SDDM_activate(4);"><img name="SDDM_image4" id="SDDM_image4" src="images/bfheaderbuttongr10.gif" width="125" height="25" border="0"></a><a
href="calendar.htm"onMouseOut="SDDM_deactivate(5);" onMouseOver="SDDM_activate(5);"><img name="SDDM_image5" id="SDDM_image5" src="images/bfheaderbuttongr01.gif" width="125" height="25" border="0"></a><a
href="missions.htm"onMouseOut="SDDM_deactivate(6);" onMouseOver="SDDM_activate(6);"><img name="SDDM_image6" id="SDDM_image6" src="images/bfheaderbuttongr16.gif" width="125" height="25" border="0"></a>
</div>




<p> <a href=" src=" alt="Valid XHTML 1.0!" height="31" width="88" /></a>
</p>

</body>

</html>]


Thanks for any help :)
singersower
 
Sort by date Sort by votes
Let's start from the top... why does the header graphic need to be cut into three imgs? Based on what you showed, this springs to mind:
[tt]
--------------------------------------
|header graphic up to the shadow part|
--------------------------------------
|curly end part| menu |
--------------------------------------
|ticker |
--------------------------------------
left | content |
menu | |
--------------------------------------
[/tt]
Let me know if that sounds about right. If it does, we can go on looking how to achieve that in the easiest of fashions.
 
Upvote 0 Downvote
I sliced up the graphic to reduce the image size and increase loadability. I have been experimenting with using is as a background for the page, but can't seem to get the right css to make it not repeat.

You are correct in your layout, that is what I'm trying to achieve.

The curly end part is all part of the same graphic, as well as the white space that the menu is floated over.

thanks,
allette
 
Upvote 0 Downvote
Ok, this is pretty quick, but how about something like this:
Code: 
<style type="text/css">
#header {
  position: relative;
  width: 993px;
  height: 267px;
  background: blue url(/images/MyWholeheaderGraphic.jpg) top left no-repeat;
}

#header #menu {
  position: absolute;
  bottom: 55px;
  left: 155px;
  width: 839px;
  height: 30px;
}

#header #ticker {
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 25px;
}
</style>

<div id="header">
 <div id="menu">
  ...menu code...
 </div>
 <div id="ticker">
  ...ticker code...
 </div>
</div>
[code]
So much for the header part. I really don't know if you can gain much better results with three images like you have versus one.
 
Upvote 0 Downvote
Looks like you really want that BIG chunk of graphics as a page header. A bit too big to my taste :) However, I made this as an example for you:


Now, this is back to square one -only two graphic chunks...

Feel free to copy ;-)

Regards


Jakob
 
Upvote 0 Downvote
Ah!! That is Great!!

What Wizards! It is awesome to see such a small amount of code, so well organized!!!

Exactly what I'd love to be able to come up with on my own someday!!!

THANK YOU SO MUCH, you have no idea how long I have been working on this!
here's the final: YAY!!!

(now to finish with the content)


allette
 
Upvote 0 Downvote
I have been experimenting with using is as a background for the page, but can't seem to get the right css to make it not repeat.
Click to expand...

body {
background-repeat: no-repeat;
}


 
Upvote 0 Downvote
I am trying to get away from using include pages and go with strict xhtml and css.
Click to expand...
Why are you trying to get away from includes? If you're talking about server-side includes, they're totally compatible with strict xhtml and a great way to control common content on multiple pages.

Vragabond,

Do you really need to use positioning at all? If you're content to put the header image as a background one, you could just use one <div> for the header and menu:

<div id="headmenu">
...menu code...
</div>

Then give it enough top and left padding to be sure of clearing the image:
Code: 
div#headmenu {
  width: 993px;
  background: url(/images/MyWholeheaderGraphic.jpg) top left no-repeat;
  padding-top: 100px;
  padding-left: 155px;
}
The ticker and the rest of the page can then follow on quite naturally. I try to avoid positioning (especially absolute positioning) where it isn't necessary as support for it in some (old) browsers is a bit flaky.

Haviong said that, I'd be inclined to make the header a foreground image - then you can give it some alt text, and be confident that it'll come out if the page is printed. So I'd think about this:
Code: 
<img src="wholeheader.gif" alt="Believers' Fellowship - Come as you are" height="104" width="994" />
<div id="menu">
...menu code...
</div>
<div id="ticker">
...etc...

This time I would use postioning - relative postioning on the menu bar to push it up over the graphic
Code: 
div#menu {
   margin-left: 155px;
   position: relative;
   top: -30px;
}

Just goes to show that there's always more than one way to do it.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
420
spamjim
spamjim
scorney
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
345
3esolar
3
Alt255
  • Locked
  • Question
Searching for a string that contains brackets
Replies
0
Views
128
Alt255
Alt255
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
729
Chris Miller
Chris Miller
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
651
Mike Lewis
Mike Lewis

Part and Inventory Search

Sponsor

Back
Top