HTML Help

waitwhat · Joined: 17 Nov 2008 Posts: 28

Hi, I have designed a nav bar and wanted to make the .jpg a background so that I can place text over it as links. My page is here:

http://www.mattboehlerresume.com/backend/index.php

The nav bar is green, and located here:

http://www.mattboehlerresume.com/backend/main-images/ni_banner_03.jpg

This is how I have the code in my .php file

Quote: <img src="main-images/ni_banner_01.jpg"><img src="main-images/ni_banner_02.jpg">

<div id="Top">
</div><img src="main-images/ni_banner_04.jpg">
<?php include("menu2.php"); ?>

Where the div #Top is the top nav bar

sticks464 · Joined: 31 Dec 2006 Posts: 2309

It's not going to work that way. Put the four ni_banner images into one image and set it as the background for the header. I've changed the code to indicate the menu positioning on top of a single banner image and added a doctype. You can add back in the preloader script and move the css to your stylesheet.

Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Nutritional Institute and Health Nuts Radio</title>
<style type="text/css">
#main {
width: 1000px;
margin:0 auto;
}
#header {
position:relative;
height:144px;
background:url('main-images/ni_banner.jpg');
}
#top{
width: 591px;
margin:120px 0 0 176px;/*change margins to position menu*/
}
#mainbox{
width: 669px;
position: absolute;
}
#rightbox{
width: 331px;
float: right;
vertical-align: top;
}
#testi{
background-image: url('main-images/small_box_middle.jpg') repeat-y;
}
#footer{
width: 1000px;
background-position: left;
}
</style>

</head>

<body>
<div id="main">
<div id="header">
<div id="top"
<?php include("menu2.php"); ?>
</div>
</div>

<div id="mainbox">
<img src="main-images/main_box_top.jpg">
<p font-size: 18px; >Text goes here.<p>
<p font-size: 18px; >Text goes here.<p>
<p font-size: 18px; >Text goes here.<p>

<p font-size: 18px; >Text goes here.<p>
<p font-size: 18px; >Text goes here.<p>
<p font-size: 18px; >Text goes here.<p>
<p font-size: 18px; >Text goes here.<p>
<img src="main-images/main_box_bottom.jpg">
</div>

<div id="rightbox">

<img src="main-images/linda_newsletter.jpg">

<img src="main-images/small_box_top.jpg">
<img src="main-images/small_box_middle.jpg">

<img src="main-images/small_box_bottom.jpg">

<div id="testi">
<img src="main-images/small_box_top.jpg">
<p align="center">Testimonial<br><br>Testimonial<br><br>Testimonial<br><br></p>
<img src="main-images/small_box_bottom.jpg">

</div>
</div>

<div id="footer">

<img src="main-images/ni_footer.jpg">

</div>
</body></html>

waitwhat · Joined: 17 Nov 2008 Posts: 28

since you added the DOCTYPE, does that mean I have to use an .html extension instead of .php?

sticks464 · Joined: 31 Dec 2006 Posts: 2309

No, looks like the only reason your using a php extension is because of the includes statement.

waitwhat · Joined: 17 Nov 2008 Posts: 28

hey, so I uploaded the .php and .css under the name asap, can you go here and tell me what I need to correct?

http://www.mattboehlerresume.com/backend/asap.php

also, is there any chance you can put dummy text over the green nav bar so I can see where it will go, as it corresponds to the .php doc?

sticks464 · Joined: 31 Dec 2006 Posts: 2309

This will correct all the errors and position the navigation in the center of the green bar
Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Nutritional Institute and Health Nuts Radio</title>

<style type="text/css">
* {
margin:0;

padding:o;
}
#main {

width: 1000px;

margin:0 auto;

}

#header {

position:relative;

height:144px;

background:url(main-images/ni_banner.jpg);

}

#top{
position:absolute;

top:120px;

left:204px;

width: 591px;

}

#mainbox{

width: 669px;

position: absolute;

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

background-repeat: repeat-y;

}

#rightbox{

width: 331px;

float: right;

vertical-align: top;

}

#testi{

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

background-repeat: repeat-y;

}

#footer{

width: 1000px;

background-position: left;

}

#mainbox p {font-size:18px;}

#testi p {text-align:center;}
</style>
<script type="text/JavaScript">

</script>


</head>

<body>
<div id="main">
<div id="header">
<div id="top">
<a href="newsarchives.php" onMouseOver="handleOverNews();return true;" onMouseOut="handleOutNews();return true;"><img name=NewsButton src="buttons/newrolls_01.jpg" alt=""></a><a href="resources.php" onMouseOver="handleOverResource();return true;"onMouseOut="handleOutResource();return true;"><img name=ResourceButton src="buttons/newrolls_02.jpg" alt=""></a><a href="reports.php" onMouseOver="handleOverReports();return true;" onMouseOut="handleOutReports();return true;"><img name=ReportsButton src="buttons/newrolls_03.jpg" alt=""></a><a href="recipes.php" onMouseOver="handleOverRecipe();return true;" onMouseOut="handleOutRecipe();return true;"><img name=RecipeButton src="buttons/newrolls_04.jpg" alt=""></a><a href="askdoc.php" onMouseOver="handleOverAsk();return true;" onMouseOut="handleOutAsk();return true;"><img name=AskButton src="buttons/newrolls_05.jpg" alt=""></a><a href="consol.php" onMouseOver="handleOverConsol();return true;" onMouseOut="handleOutConsol();return true;"><img name=ConsolButton src="buttons/newrolls_06.jpg" alt=""></a><a href="about.php" onMouseOver="handleOverAbout();return true;"onMouseOut="handleOutAbout();return true;"><img name=AboutButton src="buttons/newrolls_07.jpg" alt=""></a><img src="buttons/newrolls_08.jpg" alt=""><img src="buttons/botbar_02.jpg" alt="">
</div>
</div>

<div id="mainbox">
<img src="main-images/main_box_top.jpg" alt="">
<p>Text goes here.<p>
<p>Text goes here.<p>
<p>Text goes here.<p>

<p>Text goes here.<p>
<p>Text goes here.<p>
<p>Text goes here.<p>
<p>Text goes here.<p>

<img src="main-images/main_box_bottom.jpg" alt="">
</div>

<div id="rightbox">

<img src="main-images/linda_newsletter.jpg" alt="">

<img src="main-images/small_box_top.jpg" alt=""><img src="main-images/small_box_middle.jpg" alt=""><img src="main-images/small_box_bottom.jpg" alt="">

<div id="testi">
<img src="main-images/small_box_top.jpg" alt="">
<p>Testimonial<br><br>Testimonial<br><br>Testimonial<br><br></p>
<img src="main-images/small_box_bottom.jpg" alt="">

</div>
</div>

<div id="footer">
<img src="main-images/ni_footer.jpg" alt="">
</div>
</div>
</body>
</html>

waitwhat · Joined: 17 Nov 2008 Posts: 28

There is supposed to be 2 navigation bars at the top. Please look at this image here:

http://www.mattboehlerresume.com/backend/NI_HN_Radio_web_page.jpg

I am reading about CSS drop-down tabs for the green top row (Home, Products, Specials, etc.) So that is what I am referring to. I want to type in Home, Products, Specials. I want the yellow nav bar with rollovers to be underneath it, like in the picture.

I really appreciate all your help, thank you!

sticks464 · Joined: 31 Dec 2006 Posts: 2309

Ok, I only say code for one. I'll sort it out when I get home this afternoon and post it.

sticks464 · Joined: 31 Dec 2006 Posts: 2309

There are all kinds of drop menushttp://www.stunicholls.com/ and http://www.cssplay.co.uk/menu/gallery.html. Tell me the menu you want to use and what goes under each topic. The right menu will have to be a separate menu too.

sticks464 · Joined: 31 Dec 2006 Posts: 2309

Do you have the bottom menu image without the links and search box as a single image? I need it to be 1000px with no links or text on it so it can be set as a background.

waitwhat · Joined: 17 Nov 2008 Posts: 28

Hey sticks, I've got a change of plans from my boss. She doesn't want the rollovers to be drop-down menus. BUT, I still would like to make 'Newsletter Archives', 'Resources', 'Free Reports' etc. actual text instead of .jpgs, like they currently are. I have the green nav bar and yellow nav bar as 1000px images. Is that the problem, that the background image has to be 1000px, or as long as the div tag it is under?

sticks464 · Joined: 31 Dec 2006 Posts: 2309

The header image with the green background is ok (the last one you posted). It's easy to get a menu on top of the image lined up with the green stripe. What I was wanting was to do a css menu over the yellow stripe instead of the javascript one your using (users with script turned off cannot see the menu).
Then position the search box over the top of both the green and yellow stripes. But I need the yellow stripe without the menu or search box on it.

waitwhat · Joined: 17 Nov 2008 Posts: 28

The yellow menu bar is here:

http://healthnutsradio.com/backend/ni_nav_bar.jpg

so I can position the 1st nav bar over the big green banner?

waitwhat · Joined: 17 Nov 2008 Posts: 28

I still need help putting Text links over an image. I have two images. One is here, for which I want the links to be underneath the banner in the green horizontal space:

http://www.healthnutsradio.com/backend/main-images/ni_banner.jpg

And the other is here:

http://www.healthnutsradio.com/backend/ni_nav_bar.jpg

Can someone help me with this?

sticks464 · Joined: 31 Dec 2006 Posts: 2309

Here's what you need to make this page work

css
Code: * {
margin: 0;
padding: 0;
border: none;
}
:focus {outline:none;}
body {
font-family:Arial, Helvetica, sans-serif;
font-size:small;
background:#fff;
}
#container {
width:1000px; /* any width including 100% will work */
margin:10px auto;
background:#FFF url(images/ni_background.gif) repeat-y top left;
}
#header {
width: 100%;
height: 144px;
background:url(images/ni_banner.jpg) no-repeat;
}
#menu {
height:24px;
background:url(images/ni_nav_bar.jpg) no-repeat top left;
}
#content {
float: left;
margin: 0 -341px 0 0;
width: 100%;
}
#content .wrapper {
margin: 0 341px 0 0;
overflow: hidden;
}
#sidebar {
float: left;
width: 331px;
}
.clearer {
height: 10px;
font-size: -1px;
clear: both;
}
#footer {
clear: both;
height:97px;
text-align: center;
font-size: 70%;
background:url(images/ni_footer.jpg) no-repeat;
}

/* content styles */
#header h1 {
padding: 0 0 0 5px;
}
#footer a {
position:relative;
top:20px;
margin-right:10px;
}
.box {
border:2px solid #a7cf6e;
padding:2px;
margin:12px 0;
background:url(images/ni_background.gif) repeat-y top left;
}
.rightbox {
border:2px solid #a7cf6e;
padding:2px;
margin:10px 0 0 13px;
background:url(images/ni_background.gif) repeat-y top right;
width:98%;
text-align:center;
color:#990099;
}
#bookmark {
width:125px;
height:16px;
margin:20px auto;
}
form {
float:right;
margin: 2px 25px 0 0;
}
form input {
border:2px solid #a7cf6e;
color:#990099;
}

/*-----upper menu -----*/
#upper-nav {
position:relative;
width:610px;
top:124px;
left:140px;
list-style: none;
z-index:5;
height:25px;
text-align:left;
z-index:15;
}
#upper-nav li {
#b958a5;
float: left;
}
#upper-nav li a {
display: block;
text-decoration: none;
color: #b958a5;
padding: 0 10px;
border-right: 2px solid #b958a5;
font-weight:bold;
margin-bottom:-1px;
min-height:0;
}
#upper-nav li:hover a,#nav li.over a,
#upper-nav li:hover li a:hover,#nav li.over li a:hover {
color: #e89eca;
}

#upper-nav li:hover li a,#upper-nav li.over li a {
color: #b958a5;
background-color: #ffffcc;
font-weight:normal;
width:100px;
}

/*-----lower menu-----*/
#lower-nav {
   position:relative;
list-style: none;
}
#lower-nav li {
position: relative;
float: left;
margin: 5px 0 0 5px;
border-right:2px solid #b958a5;
}
#lower-nav li.last, #upper-nav a.last {
margin-right:0;
border-right:none;
}
#lower-nav li a {
display: block;
text-decoration: none;
color: #b958a5;
padding:0 5px 0 0;
font-weight:bold;
}
#lower-nav li a:hover {
color:#e89eca;
}

html
Code: <!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="js/curvycorners.js"></script>


<script type="text/JavaScript">

window.onload = function()
{
/*
The new 'validTags' setting is optional and allows
you to specify other HTML elements that curvyCorners
can attempt to round.

The value is comma separated list of html elements
in lowercase.

validTags: ["div", "form"]

The above example would enable curvyCorners on FORM elements.
*/
settings = {
tl: { radius: 6 },
tr: { radius: 6 },
bl: { radius: 6 },
br: { radius: 6 },
antiAlias: true,
autoPad: true,
validTags: ["div"]
}

/*
Usage:

newCornersObj = new curvyCorners(settingsObj, classNameStr);
newCornersObj = new curvyCorners(settingsObj, divObj1[, divObj2[, divObj3[, . . . [, divObjN]]]]);
*/
var myBoxObject = new curvyCorners(settings, "box");
   myBoxObject.applyCornersToAll();
   var myBoxObject = new curvyCorners(settings, "rightbox");
myBoxObject.applyCornersToAll();
}

</script>

</head>

<body>
<div id="container">
<div id="header">
<ul id="upper-nav">
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Specials</a></li>
<li><a href="#">Health & Eco Blog</a></li>
<li><a href="#">Guest Speaker</a></li>
<li><a href="#">Radio</a></li>
<li><a class="last" href="#">Contact Us</a></li>
</ul>
</div>
<div id="menu">
<ul id="lower-nav">
<li><a href="#">Newsletter Archives</a></li>
<li><a href="#">Resources</a></li>
<li><a href="#">Free Reports</a></li>
<li><a href="#">Organic Recipes</a></li>
<li><a href="#">Ask the Doc</a></li>
<li><a href="#">Consultations</a></li>
<li class="last"><a href="#">About Us</a></li>
</ul>
<form name='Search' action='' method='get'>
<input type='text' name='InputString' size='30' maxlength='50' />
<input type='submit' name='Action' value='GO' />
</form>

</div>
<div id="content">
<div class="wrapper">

<div class="box">
<p>Broadcast from the beautiful Chicagoland area, Health Nuts Radio provides listeners with healthy products and foods, health education and health and environmental news. Our goal is to help empower America to become healthier, feel more confident and function at your highest level physically, mentally and emotionally. We hope the show makes a difference in your health.</p>
</div>

</div>
</div>

<div id="sidebar">
<img style="margin-left:10px;" src="images/linda_newsletter.jpg" alt="Linda" usemap="#newsmap" border="0" /><map name="newsmap"> <area shape="rect" coords="225,115,329,133" href="subscribe.php" alt="Subscribe!" /></map>
<div class="rightbox">
<p>Testimonial<br><br>Testimonial<br><br>Testimonial<br><br></p>
<p>Click Here for More Testimonials</p>
</div>
<div id="bookmark">
<script type="text/javascript">var addthis_pub="nieusa";</script><a href="http://www.addthis.com/bookmark.php?v=20" onmouseover="return addthis_open(this, '', '[URL]', '[TITLE]')" onmouseout="addthis_close()" onclick="return addthis_sendto()"><img src="http://s7.addthis.com/static/btn/lg-share-en.gif" width="125" height="16" alt="Bookmark and Share" style="border:0"/></a><script type="text/javascript" src="http://s7.addthis.com/js/200/addthis_widget.js"></script>
</div>
</div>
<div class="clearer"></div>

<div id="footer">
<a href="copyright_notice.php">Copyright Notice</a><a href="privacy_policy.php">Privacy Policy</a><a href="#">Sitemap</a>
</div>

</div>

</body>
</html>

Go here and download the files. Use the javascript file curvycorners.js with the above code to generate the round corners. You will have to complete the link paths and the search function.