The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Having problems inserting DIV tag using DW CS6, Need help with placement
chakotay2
post Feb 28 2014, 12:52 PM
Post #1


Newbie
*

Group: Members
Posts: 19
Joined: 21-October 07
Member No.: 4,108
I have made a wrapper and inserted a header div. Within that header div I have my logo floated left. I created another div called twothree for column's 2 and 3. Column two floated left and column 3 floated right. Within twothree I have hcenter floated left, and hright floated right. All of that works as expected.

However when I try to put in a new div tag 'menu' within the same wrapper I can't get the menu to align with the header div above it. I have tried inserting after header, inserting after hright, inserting after twothree, but none of it comes out correctly. The actual text area is only a few px wide and the margins within the wrapper aren't correct so it's sitting out on the left. Under menu I eventually want to put a div for content, and under that a div for footer.

I am not much of a coder, but understand a little. I am using Dreamweaver CS6 - mostly gui. I've attached the html code, css, and a photo of what it looks like.

Any help is appreciated. Use small words as I am pretty inexperienced. Thank you for the 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" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<link href="../CSS/stylesheet.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="stmenu.js"></script>
</head>
<body>
<div id="wrapper">
  <div id="header">
    <div id="hleft"><img src="../Images/CCW TECH-LOGO DESIGN-02.jpeg" width="380" height="200" alt="CCW Technology Logo" /><br />
    </div>
    <div id="twothree">
      <div id="hcenter">
        <p><br />
          "Professional Quality...<br />
          At A Price You CAN Afford!"</p>
      </div>
      <div id="hright">
        <p>CCW Technology I.T. Services<br />
          3288 W. Millville Street<br />
          South Jordan, UT 84095 </p>
        <p>801-410-0203<br />
          www.ccwtech.com<br />
          support@ccwtech.com</p>
      </div>
    </div>
  </div>
  <div id="menu">Content for  id "menu" Goes Here</div>
</div>
</body>
</html>

CODE
body {
    margin: 0px;
}
#wrapper {
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
}
#menu {
    height: 200px;
    width: 980px;
    margin-right: auto;
    margin-left: auto;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
}


#header {
    width: 990px;
    margin-right: auto;
    margin-left: auto;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    height: 200px;
}

#hleft {
    height: 200px;
    width: 380px;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    float: left;
}


#twothree {
    height: 200px;
    width: 610px;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    float: right;
}
#hcenter {
    float: left;
    height: 200px;
    width: 305px;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-size: 22px;
    text-align: center;
}


#hright {
    float: right;
    height: 200px;
    width: 305px;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-size: 18px;
    text-align: right;
}


Attached thumbnail(s)
Attached Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 28 2014, 01:16 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
I don't understand where you want the menu. Here's what I see in FF. What do you want different?

Attached Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
chakotay2
post Mar 1 2014, 08:47 PM
Post #3


Newbie
*

Group: Members
Posts: 19
Joined: 21-October 07
Member No.: 4,108
QUOTE(pandy @ Feb 28 2014, 11:16 AM) *

I don't understand where you want the menu. Here's what I see in FF. What do you want different?

Attached Image

That's where I want it, but for me it's appearing like the screen shot I included in my post.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 2 2014, 07:29 AM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
In what browser? What are those gray boxes?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Markup (HTML, XHTML, XML) · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 24th April 2024 - 08:00 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC