Solved

I've got no clue what's wrong...

Posted on 2015-01-08
5
70 Views
Last Modified: 2015-01-10
Head out to http://hihatwebdesign.com/crystal/header.php

This should be cake and ice cream. All I want to do is center the nag bar beneath the existing content. Instead, it's parked up at the top, not centered and I'm sure if it could laugh at me, it would.

Again, all I want to do is position the nag bar underneath the current content and center it. I'm missing something, but I don't know what.

Here's my HTML:

<?php
include 'Mobile_Detect.php';
$detect = new Mobile_Detect();
if ($detect->isMobile()) {
// Any mobile device.
header("Location:mobile/index.php");
exit();
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Crystal Clear Family Dentistry |1210 Hazelwood Drive Suite A, Smyrna, TN 37167 | 615-459-0566 </title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
	
<!-- jquery stuff for testimonial carousel -->
<script src="js/jquery-1.6.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.innerfade.js"></script>
<script type="text/javascript">
$(document).ready(
	function(){
	$('ul#portfolio').innerfade({
		speed: 1000,
		timeout: 10000,
		type: 'sequence',
		containerheight: '119px'
	});
});
</script>

<script type="text/javascript">
		<!--//--><![CDATA[//><!--
			var images = new Array()
			function preload() {
				for (i = 0; i < preload.arguments.length; i++) {
					images[i] = new Image()
					images[i].src = preload.arguments[i]
				}
			}
			preload(
				"images/home_up.png",
				"images/home_down.png",
				"images/about_up.png",
				"images/about_down.png",
				"images/service_up.png",
				"images/services_down.png",
				"images/patients_up.png",
				"images/patients_down.png",
				"images/sedation_up.png",
				"images/sedation_down.png",
				"images/contact_up.png",
				"images/contact_down.png",
				"images/header.png.png",
				"images/background.png"
				)
		//--><!]]>
	</script>
<script>
function inputFocus(i){
    if(i.value==i.defaultValue){ i.value=""; i.style.color="#000"; }
}
function inputBlur(i){
    if(i.value==""){ i.value=i.defaultValue; i.style.color="#888"; }
}
</script>
<map name="header">
<area shape="rect" coords="26,70,493,197" href="index.php">
<area shape="rect" coords="46,289,159,310" href="https://www.facebook.com/pages/Crystal-Clear-Family-Dentistry/834181449977996" target="_blank">
</map>
<?php
/*include("carter.inc"); 
$cxn = mysqli_connect($host,$user,$password,$database)
or die ("couldn't connect to server");*/
?>
</head>

<body>
<div id="clouds">
<div id="cloud_left"></div><div id="cloud_right"></div>
</div>

<div id="header">
	<div id="header_image"><IMG SRC="images/header.png" usemap="#header" border="0">
	<div id="carousel"><?php include('carousel.php'); ?></div>
	</div>
</div>
<?php include('nav_bar.php'); ?>
<!--<div id="top_graphic"><?php //include('marquee.php'); ?></div>
<div id="body_filler">-->

Open in new window


...and here's my stylesheet:

@media screen and (max-width: 1024px) { /* Specific to this particular image */
  img.bg {
    left: 50%;
    margin-left: -512px;   /* 50% */
  }
}

body {
background-image:url(images/new_background.jpg);
background-repeat:repeat-x;
}

#clouds {
position:absolute;
margin:0px;
width:100%;
height:318px;
z-index:1;
}

#cloud_left {
position:relative;
float:left;
background-image:url(images/left_clouds.png);
width:446px;
height:314px;
margin-left:-10px;
z-index:1;
}

#cloud_right {
position:relative;
float:right;
margin-top:-10px;
margin-right:-10px;
z-index:0;
width:503px;
height:318px;
background-image:url(images/right_clouds.jpg);
}

#header {
position:absolute;
z-index:2;
text-align:center;
height:335px;
width:100%;
}

#header_image {
position:relative;
width:1012px;
height:335px;
margin:auto;
}

#carousel {
position:absolute;
float:right;
margin-left:533px;
margin-top:0;
width:479px;
height:335px;
z-index:3;
top:0px;
}


/*This defines my container, as in the area of the nav bar with the background image of the nav_bar.png*/
#navcontainer {
background-color:#000000;
width:1012px;
height:46px;
top:0px;
margin:auto;
padding-left:0px;
}

/*this sets up my bulleted list, which is my list of graphic buttons */
#navcontainer ul {
position: absolute;
padding:0;
margin: 0px;
background-image:none;
list-style-type:none;

}

/*here's my list characteristics as far how things are displayed and how they're "floated" */
#navcontainer ul li {
position: relative;
display: block;
float: left;
z-index:10;
}

#navcontainer ul li a {
text-decoration: none;
display: block;
padding-right: 0px;
}

/* this command tells my li's within the first tier of ul's to bust out with a pulldown menu */
#navcontainer ul li:hover > ul 
{
display: block;
}

/* now we're getting jiggy with it by establishing the rules for the actual pulldown menu */
#navcontainer ul ul {
display: none;
background: none;
margin-top: 0px;
padding: 0;
width: 225px;
position: absolute;
background-color: #C9BDAF;
border-style:solid;
border-width: thin;
border-color:#7D674F;
line-height:35px;
height:auto;
z-index:100;
}

#navcontainer ul ul li {
float:none;
margin:0px;
padding:0;
}

#navcontainer ul ul li a {
display: block;
float:none;
margin: 0 0 0 10px;
padding: 0;
font-family: Helvetica, Microsoft Sans Serif;
font-size: 18px;
color:#493417;
padding-left:0px;
z-index:10;
}	

#navcontainer ul ul li:hover > ul 
{
display: block;
}

#navcontainer ul ul li:hover {
display:block;
}

#navcontainer:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}

a.home_button {
width:125px;
height:46px;
background-image:url(images/home_up.png);
background-repeat:no-repeat;
}

a.home_button:hover {
width:125px;
height:46px;
background-image:url(images/home_down.png);
background-repeat:no-repeat;
}

a.about_button {
width:128px;
height:46px;
background-image:url(images/about_up.png);
background-repeat:no-repeat;
}

a.about_button:hover {
width:128px;
height:46px;
background-image:url(images/about_down.png);
background-repeat:no-repeat;
}

a.services_button {
width:192px;
height:46px;
background-image:url(images/service_up.png);
background-repeat:no-repeat;
}

a.services_button:hover {
width:192px;
height:46px;
background-image:url(images/services_down.png);
background-repeat:no-repeat;
}

a.patients_button {
width:157px;
height:46px;
background-image:url(images/patient_up.png);
background-repeat:no-repeat;
}

a.patients_button:hover {
width:157px;
height:46px;
background-image:url(images/patient_down.png);
background-repeat:no-repeat;
}

 a.sedation_button {
width:260px;
height:46px;
background-image:url(images/sedation_up.png);
background-repeat:no-repeat;
}

a.sedation_button:hover {
width:260px;
height:46px;
background-image:url(images/sedation_down.png);
background-repeat:no-repeat;
}

a.contact {
width:150px;
height:46px;
background-image:url(images/contact_up.png);
background-repeat:no-repeat;
}

 a.contact:hover {
width:150px;
height:46px;
background-image:url(images/contact_down.png);
background-repeat:no-repeat;
}


#top_graphic {
position:relative;
margin:auto;
width:1012px;
height:34px;
background-image:url(images/top_graphic.png);
background-repeat:none;
}

#marquee {
position:relative;
margin:auto;
text-align:center;
padding-top:5px;
width:985px;
}

#body_filler {
position:relative;
margin:auto;
width:1012px;
min-height:600px;
height:100%;
background-image:url(images/body_filler.png);
background-repeat:repeat-y;
}

#left_container {
position:relative;
float:left;
width:699px;
height:100%;
}

#left_copy {
padding-left:20px;
width:660px;
height:100%;
font-family: Helvetica, Microsoft Sans Serif;
font-size: 14px;
}

#right_container {
position:relative;
float:left;
width:313px;
height:900px;
}

#right_copy {
padding-right:10px;
width:300px;
height:100%;
font-family: Helvetica, Microsoft Sans Serif;
font-size: 14px;
}

#request_form {
position:relative;
width:314px;
height:357px;
background-image:url(images/form.png);
background-repeat:none;
}

#request_content {
position:absolute;
margin-top:75px;
margin-left:28px;
width:285px;
height:365px;
}

#address_content {
position:absolute;
margin-top:460px;
margin-left:26px;
height:250px;
}

#academy {
position:absolute;
margin-top:720px;
margin-left:4px;
}

#braces {
position:absolute;
z-index:2;
width:250px;
height:49px;
margin-left:400px;
margin-top:-25px
}

#staff_display {
font-family: Helvetica, Microsoft Sans Serif;
color:#ffffff;
font-size:12pt;
}

#staff_display_bold {
font-family: Helvetica, Microsoft Sans Serif;
color:#ffffff;
font-size:12pt;
font-weight:strong;
}


input.form {
width:230px;
border:2px solid #dadada;
font-size:14px;
padding:5px;
margin-top:-10px;    
}

input.form:focus { 
outline:none;
border-color:#f6e3cc;
box-shadow:0 0 10px #f6e3cc;
}

textarea.comment {
width:230px;
height:200px;
border:2px solid #dadada;
font-size:14px;
padding:5px;
}

textarea.comment:focus {
outline:none;
border-color:#f6e3cc;
box-shadow:0 0 10px #f6e3cc;
}



td {
font-family: Helvetica, Microsoft Sans Serif;
font-size: 14px;
}

td.center {
text-align:center;
}

td.marquee {
font-family: Verdana, Microsoft Sans Serif;
font-size: 11px;
color: #000000;
text-align: center;
width:1000px;
font-style: bold;
}

table.center {
text-align:center;
}


#footer {
clear:both;
position:relative;
width:1012px;
margin: 10px auto ;
text-align:center;
font-family: Helvetica, Microsoft Sans Serif;
font-size: 12px;
font-weight:bold;
color: #63513b;
}

#portfolio { margin: 0px; }

#imagefadebox {
  display: inline; 
  position: absolute;  
  list-style-type: none; 
  list-style-position: inside; 
  list-style-image: none; 
  margin-top: 0px; 
  margin-right: 0px; 
  margin-bottom: 0px; 
   margin-left: -40px;
}

#imagefadebox_sidebar {
  display: inline; 
  position: absolute;  
  list-style-type: none; 
  list-style-position: inside; 
  list-style-image: none; 
  margin-top: 5px; 
  margin-right: 0px; 
  margin-bottom: 0px; 
  margin-left: 3px;
}

#portfolio_sidebar { 
margin:0px; 
}

td.video {
font-family: Helvetica, Microsoft Sans Serif;
color:#ffffff;
font-size:12pt;
}

a.home {
margin:0;
display:inline-block; /**** important ****/
width:125px;
height:46px;
background-image:url(images/home_up.jpg);
background-repeat:no-repeat;
}

a.home:hover {
margin:0;
width:125px;
height:46px;
background-image:url(images/home_down.jpg);
background-repeat:no-repeat;
}

a.about{
margin:0;
display:inline-block; /**** important ****/
width:128px;
height:46px;
background-image:url(images/about_up.jpg);
background-repeat:no-repeat;
}

a.about:hover {
margin:0;
width:128px;
height:46px;
background-image:url(images/about_down.jpg);
background-repeat:no-repeat;
}

a.services {
margin:0;
display:inline-block; /**** important ****/
width:192px;
height:46px;
background-image:url(images/service_up.jpg);
background-repeat:no-repeat;
}

a.services:hover {
margin:0;
width:192px;
height:46px;
background-image:url(images/services_down.jpg);
background-repeat:no-repeat;
}

a.patients {
margin:0;
display:inline-block; /**** important ****/
width:157px;
height:46px;
background-image:url(images/patients_up.jpg);
background-repeat:no-repeat;
}

a.patients:hover {
margin:0;
width:157px;
height:46px;
background-image:url(images/patients_down.jpg);
background-repeat:no-repeat;
}

a.sedation {
margin:0;
display:inline-block; /**** important ****/
width:260px;
height:46px;
background-image:url(images/sedation_up.jpg);
background-repeat:no-repeat;
}

a.sedation:hover {
margin:0;
width:260px;
height:46px;
background-image:url(images/sedation_down.jpg);
background-repeat:no-repeat;
}

a.contact {
margin:0;
display:inline-block; /**** important ****/
width:150px;
height:46px;
background-image:url(images/contact_up.png);
background-repeat:no-repeat;
}

a.contact:hover {
margin:0;
width:150px;
height:46px;
background-image:url(images/contact_down.png);
background-repeat:no-repeat;
}


a.footer {
font-family: Helvetica, Microsoft Sans Serif;
font-size: 12px;
font-weight:bold;
color: #63513b;
text-decoration:none;
}

a.footer:hover {
font-family: Helvetica, Microsoft Sans Serif;
font-size: 12px;
font-weight:bold;
color: #63513b;
text-decoration:underline;
}

a.footer:visited {
font-family: Helvetica, Microsoft Sans Serif;
font-size: 12px;
font-weight:bold;
color: #63513b;
text-decoration:none;
}

a.article_display {
font-family: Helvetica, Microsoft Sans Serif;
font-size: 14px;
color:#ffffff;
text-decoration:none;
}

a.article_display:hover {
font-family: Helvetica, Microsoft Sans Serif;
font-size: 14px;
color:#ffffff;
text-decoration:underline;
}

a.article_display:visited {
font-family: Helvetica, Microsoft Sans Serif;
font-size: 14px;
color:#ffffff;
text-decoration:none;
}

A.marquee
{
	font-family: Verdana, Microsoft Sans Serif;
	font-size: 11px;
	font-style:bold;
	color: #000000;
	text-decoration:underline;
}

A.marquee:Hover {
	font-family: Verdana, Microsoft Sans Serif;
	font-size: 11px;
	color: #000000;
	font-style:bold;
	text-decoration:underline;
}

A.marquee:Visited {
	font-family: Verdana, Microsoft Sans Serif;
	font-size: 11px;
	color: #000000;
	font-style:bold;
	text-decoration:underline;
}

Open in new window

0
Comment
Question by:brucegust
  • 2
  • 2
5 Comments
 
LVL 14

Expert Comment

by:Edwin Hoffer
ID: 40539922
Hello brucegust,

I can't understand what do you want to say, please share a image and highlight what you want to do in center.

Thanks
Edwin
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 40539995
All you need to do is put the div id="navcontainer" inside the div id="header" to get the nav bar below the header and centered. The next chore is to move the whole thing up to eliminate the excess space above the header.
0
 

Author Comment

by:brucegust
ID: 40541489
Tom, why does that work? The header container is set to be only 335px high. You're right, it works, but I want to "why" it works and not just "that" it works.

Thing is, even the remainder of my content on the whole page has to be put within the header container. What have I done that I'm having to position everything within that container in order to get things to line correctly underneath? I guess that's my question?
0
 
LVL 38

Accepted Solution

by:
Tom Beck earned 500 total points
ID: 40541928
In html, block elements like divs are not just for dividing your page up into a grid of boxes. They can also be used to group a set of boxes so that they behave as one and styling can be applied to the whole, not just the individual parts. By moving your content inside the div you assigned id="header", it has essentially become your content wrapper. A "wrapper" in html is just another name for a group of boxes (block elements) with common styling. From a semantics point of view, it would be advantageous to change that id="header" to id="wrapper" or something equally descriptive.

Although you have set the height to 335px in your content wrapper (id="header"), you have not defined what to do if the content overflows the container, so it just displays. If you were to add overflow:hidden to the css for that wrapper, the nav bar below the header would be cut off, hidden, unless you increase the height.

With the advent of HTML5, the emphasis has been on pure semantics with regards to html markup. New block elements were introduced to make your markup visually more logical and subsequently easier to troubleshoot.

Instead of:

<body>
<div id="wrapper">
   <div id="header">...</div>
   <div id="content">...</div>
   <div id="footer">...</div>
</div>
</body>

...you can now have:

<body>
<div id="wrapper">
   <header>...</header>
   <article>
       <section>...<section>
   </article>
   <footer>...</footer>
</div>
</body>

It makes it easy to find the area of the markup you want to work on. But they are all just block elements, same as div, with regard to how they behave when displayed in a web browser.
0
 

Author Comment

by:brucegust
ID: 40542116
OK, Tom! I think we're poised on the threshold of great things!

I'm going to go ahead and wrap up this question and I do appreciate you going into detail as far as what's going on and not just a "copy and paste" kind of solution.

I do have one more question and you can see it at http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_28594250.html. It's the same page, I just need to fix one more thing in that my footer is covering up some text in the preceding div and I don'g know why. Would love it if you could weigh in on that one.

Thanks!
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

895 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now