logo-dw

Go Back   Dreamweaver Club Forums > Dreamweaver forums > Dreamweaver General
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 03-26-2015, 03:30 PM   #1
pepelpue
 
Join Date: Mar 2015
Posts: 5
Default trouble with the menu bar on the page, help please

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.
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>
<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;
}

Last edited by pepelpue; 03-27-2015 at 11:11 AM..
pepelpue is offline   Reply With Quote
Old 03-27-2015, 01:29 AM   #2
Ricky55
Ricky55's Avatar
 
Join Date: Oct 2005
Location: West Yorkshire, UK
Posts: 1,855
Default

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

Code:
<!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>
__________________
Qwerty Design

Check out my blog for web design insights.
http://www.qwerty-design.co.uk/
Follow me on Twitter: @QwertyDesignUK
Ricky55 is offline   Reply With Quote
Old 03-27-2015, 01:34 AM   #3
edbr
edbr's Avatar
 
Join Date: Aug 2005
Location: Bali
Posts: 11,164
Default

you are causing this by giving a width attribute in main. i have shortened your header styles abit
Code:
.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>
__________________
If you're happy and you know it shake your meds!
different style links examples

Flight / Hotel search
Free script download
Bali Villas
edbr is offline   Reply With Quote
Old 03-27-2015, 01:37 AM   #4
edbr
edbr's Avatar
 
Join Date: Aug 2005
Location: Bali
Posts: 11,164
Default

haha berrer ricky55
__________________
If you're happy and you know it shake your meds!
different style links examples

Flight / Hotel search
Free script download
Bali Villas
edbr is offline   Reply With Quote
Old 03-27-2015, 02:56 AM   #5
pepelpue
 
Join Date: Mar 2015
Posts: 5
Default

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?
pepelpue is offline   Reply With Quote
Old 03-27-2015, 04:46 AM   #6
edbr
edbr's Avatar
 
Join Date: Aug 2005
Location: Bali
Posts: 11,164
Default

just for ease of posting, move it to a css file
__________________
If you're happy and you know it shake your meds!
different style links examples

Flight / Hotel search
Free script download
Bali Villas
edbr is offline   Reply With Quote
Old 03-27-2015, 09:38 AM   #7
pepelpue
 
Join Date: Mar 2015
Posts: 5
Default

okay, I did move them in to the css file. I was just wondering why. Thank you for your help.
pepelpue is offline   Reply With Quote
Old 03-27-2015, 11:17 AM   #8
pepelpue
 
Join Date: Mar 2015
Posts: 5
Default

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.

Last edited by pepelpue; 03-28-2015 at 01:48 PM..
pepelpue is offline   Reply With Quote
Old 03-28-2015, 01:04 AM   #9
edbr
edbr's Avatar
 
Join Date: Aug 2005
Location: Bali
Posts: 11,164
Default

one way would be to add a image class to uir header. make the pareth (header relative and position the image absolutely

Code:
.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
HTML Code:
<div class="Heading"> 
<img src="images/pics01.jpg" width="100" height="100"></div>
__________________
If you're happy and you know it shake your meds!
different style links examples

Flight / Hotel search
Free script download
Bali Villas
edbr is offline   Reply With Quote
Old 03-28-2015, 01:49 PM   #10
pepelpue
 
Join Date: Mar 2015
Posts: 5
Default

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;

}
Attached Images
File Type: jpg modefied website.jpg (90.2 KB, 2 views)
pepelpue is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 09:13 PM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com