PDA

View Full Version : trouble with the menu bar on the page, help please


pepelpue
03-26-2015, 03:30 PM
Hi:

I am new to dreamweaver and I am designing my website. I am having trouble with my menu bar. It is only in left side of the page and not covering the entire page from left to right. I have attached an image of the page. Also, bellow are the index and the css codes. Thank you for your help.

<!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>
<link href="MadHatter.css" rel="stylesheet" type="text/css" />
</head>

<body class="Main">
<div class="Heading">
</div>
</body>
</html>





@charset "utf-8";
/* CSS Document */



.Main {
font-size: 14px;
background-color: #664431;
margin: 0px;
height: 900px;
width: 1000px;
background-image: url(BG%20Texture.png);
}
.Main .Heading {
background-color: #3d1d00;
height: 50px;
margin-top: 75px;
margin-right: 0px;
margin-left: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: normal;
color: #FFF;
text-align: center;
border-top-width: 1px;
border-right-width: 0px;
border-bottom-width: 10px;
border-left-width: 0px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #b38760;
border-right-color: #b38760;
border-bottom-color: #b38760;
border-left-color: #b38760;
}

Ricky55
03-27-2015, 01:29 AM
that's just down to the width you have set on the parent element.

On .Main you set a width of 1000px so the div inside will just stretch to fill.

What are you trying to do?

You have far too much CSS going here. The border property can be set like so:

.heading {
border-top: 1px solid #b38760;
border-bottom: 10px solid #b38760;
}

Always use lowercase for your class names.

If you want to center something you can use margin: auto.

Something similar to this would look like


<!DOCTYPE html>
<html lang=en>
<head>
<meta charset="utf-8">

<title>Enter a Title</title>

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

body {
font-family: sans-serif;
font-size: 16px;
background: url(BG/Texture.png);
}

.wrap {
width: 1000px;
margin: 0 auto;
}

header {
height: 50px;
background: #3d1d00;
border-top: 1px solid #b38760;
border-bottom: 10px solid #b38760;
}


</style>

</head>
<body>

<div class="wrap">

<header>
<p>I am the heading</p>
</header>

<main>
<h1>I am a heading</h1>
<p>Some text.</p>
</main>

</div>

</body>
</html>

edbr
03-27-2015, 01:34 AM
you are causing this by giving a width attribute in main. i have shortened your header styles abit

.Main{
font-size: 14px;
background-color: #664431;
margin: 0px;
height: 900px;
background-image: url(BG%20Texture.png);
}
.Main .Heading {
background-color: #3d1d00;
height: 50px;
margin: 75px 0px 0px 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: normal;
color: #FFF;
text-align: center;
border 1px 0px 10px 0px;
border:#b38760 solid;
}</style>
</head>


<body class="Main">

<div class="Heading"></div>

edbr
03-27-2015, 01:37 AM
haha berrer ricky55

pepelpue
03-27-2015, 02:56 AM
Thank you very much guys, it did the trick prefectly. I was just wondering why you have your style code in the source code instead of in the css file?

edbr
03-27-2015, 04:46 AM
just for ease of posting, move it to a css file

pepelpue
03-27-2015, 09:38 AM
okay, I did move them in to the css file. I was just wondering why. Thank you for your help.

pepelpue
03-27-2015, 11:17 AM
If you dont mind I have one more issue. I am trying to place the logo in top of the menu bar so it will by over the left side of the menu bar( with the height of it be above and bellow the menu bar. I try to play with the "Z-index", but it did not move the logo on top of the menu bar.


here is the source code:

<body class="main"><img src="logo.png" width="226" height="113" alt="logo" />
<div class="menu">Lunch Dinner Dessert Contact Gallery</div>
</body>
</html>

I attached image of the position of the logo in the current website and the correct position of the logo the final website.
Thank you for your help.

edbr
03-28-2015, 01:04 AM
one way would be to add a image class to uir header. make the pareth (header relative and position the image absolutely

.Main .Heading { position:relative;
background-color: #3d1d00;
height: 50px;
margin: 75px 0px 0px 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: normal;
color: #FFF;
text-align: center;
border 1px 0px 10px 0px;
border:#b38760 solid;
}

.Main .Heading img{ position:absolute; left:10px; top:-5px;}


then html
<div class="Heading">
<img src="images/pics01.jpg" width="100" height="100"></div>

pepelpue
03-28-2015, 01:49 PM
Thank you. I tried it but it still comes out all funky. I have attached an image of the site and the codes are as follows:


The Source Code:

<body class="main">
<div class="heading"><img src="logo.png" width="226" height="113" alt="logo" />Lunch Dinner Dessert Contact Gallery</div>
</body>
</html>



The CSS File:


.main {
font-size: 14px;
background-color: #664431;
margin: 0px;
height: 900px;
background-image: url(BG%20Texture.png);
}

.main .heading {
position:relative;
background-color: #3d1d00;
height: 50px;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 20px;
font-style: normal;
color: #FFF;
text-align: center;
border-top: 1px solid #b38760;
border-bottom: 10px solid #b38760;
line-height: 50px;
font-weight: bold;
word-spacing: 2em;
width: 1000px;
margin: 75px 0px 0px 0px;
margin: auto; /*This centers the item*/

}

.main .heading .logo {
position: absolute;

}

Ricky55
03-28-2015, 08:18 PM
That looks ok to me, how do you want it to look?