How to Move DIV Down on my Template (need to see picture to understand)

May 10, 2008 02:42pm pdt

1. jason1178 11,300
2. xend 4,000
2. julianop... 4,000
4. Zeffer 3,600
5. b0lsc0tt 3,335
6. Rouchie 2,835
7. v2Media 2,664
8. PaulHews 2,500
9. cb1393 2,000
9. amilan 2,000
9. crooksy88 2,000
9. antontol... 2,000
9. captainr... 2,000
9. tomauger... 2,000
9. logicali... 2,000

1. jason1178 22,800
2. Zeffer 4,100
3. Sheharya... 4,000
3. julianop... 4,000
3. xend 4,000
6. khkremer 3,800
7. blue-genie 3,375
8. b0lsc0tt 3,335
9. Rouchie 3,210
10. v2Media 2,664
11. PaulHews 2,500
12. cb1393 2,000
12. antontol... 2,000
12. fredshovel 2,000
12. Graphixer 2,000
12. archang3l 2,000
12. crooksy88 2,000
12. logicali... 2,000
12. molerner 2,000
12. amilan 2,000
12. captainr... 2,000
12. tomauger... 2,000
12. fuzzboxer 2,000

03.27.2008 at 05:49PM PDT, ID: 23276170

	[x] Attachment Details

[x]

The Solution Rating System

With so many solutions, how can you tell which solutions are most likely to help you and which ones are not? To provide you with a tool to use, we rate our solutions based on various elements that most accurately determine if a solution is a quality solution. To explain what factors affect the solution rating, here are the elements we take into consideration when formulating our solution rating.

The Grade of the Solution
The Zone Rank of the Expert Providing the Solution
The Number of Author and Expert Comments
The Number of Experts Contributing
The Feedback of the Community

Your Input Matters
Because of the way the system is set up, the most important variable in this equation is you. As a member of Experts Exchange, you are able to cast your vote on the quality of the solutions in regard to how complete, accurate, helpful and easy to understand each solution is. When you provide your feedback, each rating is adjusted accordingly. So, if you see a solution that has a poor rating that you think is a good solution, let us know by rating it. As you do, the rating will be adjusted and will become more accurate for other members of our site.

If you have any suggestions that you would like to make for our rating system, please ask a question in the Suggestions Zone of Community Support.

Thank you!

8.2

How to Move DIV Down on my Template (need to see picture to understand)

Zones: Adobe Creative Suite, Macromedia Dreamweaver

OK, I have to add extra <br/> tags at the beginning of every page because the DIV actually starts in the middle of my Navbar. I guessing it does this because the navbar is made with CSS and it doesn't have a way of knowing how big the image file for the navbar is? I don't understand it.

But, I would really appreciate it if someone here could help me out. It's very frustrating and I've put up with it for longer than I'd like.

**That is actually the beginning of the editable table as well**

If you need any more information, just let me know

Attachments:

template.JPG (78 KB) (File Type Details)

Picture of the problem

Start your free trial to view this solution

Question Stats

Zone: Web Development

Question Asked By: ajsmisc

Solution Provided By: ajsmisc

Participating Experts: 1

Solution Grade: A

Translate:

Loading Advertisement...

Microsoft

Internet Protocols
Applications

Development
OS

Hardware
Windows Security

Apple

Operating Systems
Hardware

Programming
Networking

Software

Internet

Search Engines
File Sharing
WebTrends / Stats
Spy / Ad Blockers

Web Browsers
New Net Users
Web Development
Chat / IM

Anti Spam
Web Servers
Anti-Virus
Email Clients

Gamers

Tips
Online / MMORPG
Puzzle
Emulators

Action / Adventure
Role Playing
Consoles
Game Programming

Strategy
Sports
Misc
Computer Games

Digital Living

Hardware
New Net Users
New Users

Software
Digital Music
Gaming World

Home Security
Apple
Networking Hardware

Virus & Spyware

Vulnerabilities
IDS
Encryption
Anti-Virus

Operating Systems Security
Software Firewalls
WebApplications
Cell Phones

Operating Systems
Internet
Hardware Firewalls

Hardware

Handhelds / PDAs
Displays / Monitors
Components
Networking Hardware

Peripherals
Laptops/Notebooks
Storage
Servers

Desktops
New Users
Misc
Apple

Software

System Utilities
Industry Specific
Network Management
Photos / Graphics
Page Layout
VMWare
Misc
Web Development

OS
CYGWIN
Voice Recognition
Message Queue
Quality Assurance
Security
Firewalls
MultiMedia Applications

Development
Database
Office / Productivity
Business Management
OS/2 Apps
Server Software
Internet / Email

ITPro

OS
Storage
Encryption
Operating Systems Security
Apple Hardware
Laptops & Notebooks
Servers
Networking Hardware
Peripherals

Devices
Displays / Monitors
WebTrends / Stats
Search Engines
Firewalls
WebApplications
IDS
Vulnerabilities
Email Clients

File Sharing
Spy / Ad Blockers
Web Browsers
Web Servers
Networking
Anti-Virus
Chat / IM
Anti Spam

Developer

Web Servers
Web Browsers
Game Programming
Dev Tools
Industry Specific
Office / Productivity

Database
CYGWIN
Web Development
Search Engines
File Sharing
WebTrends / Stats

Programming
Content Management
Application Servers
Protocols

Storage

Removable Backup Media
Storage Technology
Servers

Grid
Remote Access
Backup / Restore

Misc
Hard Drives

Miscellaneous
Security
Development
Linux
VMWare

MainFrame OS
Unix
Apple
OS / 2
AS / 400

BeOS
Microsoft
VMS / OpenVMS

Database

Oracle
Miscellaneous
MySQL
Software
Sybase
Contact Management
PostgreSQL
Data Manipulation
Clarion
InterSystems Cache

Siebel
MUMPS
OLAP
SQLBase
SAS
GIS & GPS
4GL
Berkeley DB
DB2
Informix

Interbase / Firebird
FoxPro
Reporting
LDAP
Filemaker Pro
MS SQL Server
dBase
MS Access

Security

Misc
Web Browsers
Software Firewalls
Operating Systems Security
File Sharing

Spy / Ad Blockers
Vulnerabilities
WebApplications
IDS
Anti-Virus

Encryption
Anti Spam
Email Clients
VPN
Chat / IM

Programming

Editors IDEs
Installation
Handhelds / PDAs
Multimedia Programming
System / Kernel

Algorithms
Game
Signal Processing
Project Management
Open Source

Database
Misc
Languages
Processor Platforms
Theory

Web Development

Scripting
Blogs
Web Servers
Software
Search Engines
Web Graphics
Images

Internet Marketing
Images and Photos
Components
Document Imaging
Web Languages/Standards
Illustration
WebApplications

Fonts
WebTrends / Stats
Authoring
Digital Camera Software
Miscellaneous

Networking

Protocols
Apple Networking
Network Management
Message Queue
Application Servers
Content Management
File Servers
Email Servers
Misc
Java Editors & IDEs

Wireless
Networking Hardware
Backup / Restore
System Utilities
ISPs & Hosting
Web Servers
Storage Technology
Removable Backup Media
Servers
Broadband

Grid
OS / 2
Novell Netware
Unix Networking
Windows Networking
Security
Telecommunications
Operating Systems
Linux Networking

Other

Community Advisor
Lounge
Community Support
New Net Users

Philosophy / Religion
Math / Science
Miscellaneous
URLs

Expert Lounge
Politics
Puzzles / Riddles

Community Support

Suggestions
New to EE
New Topics
Community Advisor

CleanUp
Announcements
General

Feedback
Input
EE Bugs

03.27.2008 at 06:00PM PDT, ID: 21227163

Rank: Genius

jason1178:

Hi ajsmisc,

We'll need to see the HTML and CSS code in order to assist.

03.27.2008 at 06:22PM PDT, ID: 21227251

ajsmisc:

Here's the template and I'll add the CSS here in a second.

         
           
             1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:

           
           
             <!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" />
<link rel="stylesheet" href="/p7pm/p7pmh27.css" type="text/css" />
<link rel="stylesheet" href="/css/main.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="/css/form.css" media="all">
<title>Palmer Associates, Inc. - Jayne Palmer 712-943-6753</title>
<script type="text/javascript" src="/p7pm/p7popmenu.js"></script>
<!--[if IE 5]>
<style type="text/css"> 
/* place css box model fixes for IE 5* in this conditional comment */
.twoColFixRtHdr #sidebar1 { width: 220px; }
</style>
<![endif]--><!--[if IE]>
<style type="text/css"> 
/* place css fixes for all versions of IE in this conditional comment */
.twoColFixRtHdr #sidebar1 { padding-top: 30px; }
.twoColFixRtHdr #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->
<style type="text/css">
<!--
.style7 {color: #000000}
-->
</style>
</head>
 
<body onload="P7_initPM(1,27,1,-20,10)" class="twoColFixRtHdr">
<div id="background">
<div id="container">
  <div id="header">
    <img src="/images/banner.jpg" width="910" height="120" alt="Palmer Associates, Inc." /><br />
    
    <ul id="p7PMnav">
      <li><a href="http://jayne-sells.com/">Home</a></li>
      <li><a href="http://jayne-sells.com/pages/correlations.html">Correlations</a></li>
      <li><a href="#" class="p7PMtrg">Publishers</a>
          <ul>
            <li><a href="http://jayne-sells.com/pages/companies/benchmark.html">Benchmark Learning</a></li>
            <li><a href="http://jayne-sells.com/pages/companies/national_geographic.html">National Geographic</a></li>
            <li><a href="http://jayne-sells.com/pages/companies/heinemann_classroom.html">Heinemann Classroom</a></li>
            <li><a href="http://jayne-sells.com/pages/companies/heinemann_professional.html">Heinemann Professional</a></li>
            <li><a href="http://jayne-sells.com/pages/companies/mondo.html">Mondo Publishing</a></li>
            <li><a href="http://jayne-sells.com/pages/companies/red_brick.html">Red Brick Learning</a></li>
          </ul>
      </li>
      <li><a href="#" class="p7PMtrg">Subjects</a>
          <ul>
            <li><a href="#" class="p7PMtrg">English</a>
                <ul>
                  <li><a href="http://jayne-sells.com/pages/subjects/esl.html">ESL/ELL/ELD</a></li>
                  <li><a href="http://jayne-sells.com/pages/subjects/reading_recovery.html">Reading Recovery</a></li>
                </ul>
            </li>
            <li><a href="http://jayne-sells.com/pages/subjects/math.html">Math</a></li>
            <li><a href="http://jayne-sells.com/pages/subjects/science.html">Science</a></li>
            <li><a href="http://jayne-sells.com/pages/subjects/social_studies.html">Social Studies</a></li>
          </ul>
      </li>
      <li><a href="#" class="p7PMtrg">Grade Levels</a>
          <ul>
            <li><a href="http://jayne-sells.com/pages/grades/pre-k.html">Early Education (Pre-K)</a></li>
            <li><a href="http://jayne-sells.com/pages/grades/elementary.html">Elementary School (K-4)</a></li>
            <li><a href="http://jayne-sells.com/pages/grades/middle.html">Middle School (5-8)</a></li>
            <li><a href="http://jayne-sells.com/pages/grades/high.html">High School (9-12)</a></li>
          </ul>
      </li>
      <li><a href="http://jayne-sells.com/pages/form.html">Sample Request</a></li>
      <li><a href="http://jayne-sells.com/pages/about.html">About Us</a></li>
      <li><a href="http://jayne-sells.com/pages/faq.html">FAQ</a></li>
      <!--[if lte IE 6]><style>#p7PMnav a{height:1em;}#p7PMnav li{height:1em;}#p7PMnav ul li{float:left;clear:both;width:100%}</style><![endif]-->
      <!--[if IE 6]><style>#p7PMnav ul li{clear:none;}</style><![endif]-->
    </ul>
    <!-- end #header --></div>
  <div id="companies">
    <table width="125" align="center">
      <tr>
        <th scope="col">
          <h4 align="center" class="style6 style7"><img src="../images/publishers.gif" alt="Publishers" width="123" height="30" /></h4>        </th>
      </tr>
      <tr bgcolor="#FFFFFF">
        <td><div align="center"><a href="http://www.ngschoolpub.org"><img src="/images/geo.gif" alt="National Geographic" width="123" height="34" border="0"/></a></div></td>
      </tr>
      <tr>
        <td><a href="http://hampton-brown.com/Default.aspx"><img src="/images/brown.jpg" alt="Hampton Brown" width="123" height="32" border="0" /></a></td>
      </tr>
      <tr bgcolor="#FFFFFF">
        <td><div align="center"><a href="http://heinemann.com/"><img src="../images/heinemann-web.gif" alt="Heinemann Professional" width="123" height="36" border="0" /></a></div></td>
      </tr>
      <tr bgcolor="#FFFFFF"><th width="193" scope="col"><a href="http://www.heinemannclassroom.com"><img src="/images/heinemann.jpg" alt="Heinemann Classroom" width="123" height="44" border="0" /></a><br />        
      </th>
      <tr bgcolor="#FFFFFF">
        <td><div align="center"><a href="http://www.benchmarkeducation.com/"><img src="/images/benchmark.jpg" alt="Benchmark Learning" width="123" height="39" border="0" /></a></div></td>
      </tr>
      <tr bgcolor="#FFFFFF">
        <td><div align="center"><a href="http://www.redbricklearning.com"><img src="/images/brick.jpg" alt="Red Brick Learning" width="123" height="31" border="0" /></a></div></td>
      </tr>
      <tr bgcolor="#FBE805">
        <td><div align="center"><a href="http://www.mondopub.com/"><img src="/images/mondo.jpg" alt="Mondo Publishing" width="123" height="49" border="0" /></a></div></td>
      </tr>
    </table>
  </div>
  <!-- TemplateBeginEditable name="Main" -->
  <div id="mainContent">
    <div>
      <h3>    Page Coming Soon!    </h3>
    </div>
  
    <!-- end #mainContent -->
  </div>
  <!-- TemplateEndEditable -->
  <p align="left"><br class="clearfloat" />
  </p>
  <div id="footer">
    <h5 align="center">Designed by <a href="mailto:andrew@jayne-sells.com">Andrew Keil</a><br />
      © Copyright Palmer Associates 2008
      <!-- end #footer -->
    </h5>
  </div>
</div>
</div>
</body>
</html>
           
         

Open in New Window

03.27.2008 at 06:23PM PDT, ID: 21227255

ajsmisc:

Here's the CSS

         
           
             1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:

           
           
             @charset "utf-8";
/* CSS Document */
 
body  {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: #ea4443;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #000000;
}
 
.twoColFixRtHdr #background { 
	background: #ea4443 url('/images/bg.jpg') repeat-y;
	background-position: center;
} 
 
.twoColFixRtHdr #container { 
	width: 910px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
	background: #FFFFFF;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	border: 2px solid #000000;
	text-align: left; /* this overrides the text-align: center on the body element. */
} 
.twoColFixRtHdr #header { 
	font: 10pt Verdana, Arial, Helvetica, sans-serif;
	background: #FFFFFF;
	} 
.twoColFixRtHdr #header h1 {
	margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
	padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
}
.twoColFixRtHdr #companies {
	float: right; /* since this element is floated, a width must be given */
	width: 135px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
	background: #ea4443; /* the background color will be displayed for the length of the content in the column, but no further */
	border-left: 2px solid #000000;
	border-top: 2px solid #000000;
	border-bottom: 2px solid #000000;
	padding: 0 0 1px 1px;
}
.twoColFixRtHdr #mainContent { 
	margin: 0 140px 0 0; /* the right margin on this div element creates the column down the right side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
	padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
} 
.twoColFixRtHdr #thankyou { 
	height: 300px;
}
.twoColFixRtHdr #footer { 
	padding: 0 10px 0 20px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
	background:#ffffff; 
} 
.twoColFixRtHdr #footer p {
	margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
	padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
.style6 {
	color: #FFFFFF;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
 
 
<!--[if IE 5]>
/* place css box model fixes for IE 5* in this conditional comment */
.twoColFixRtHdr #sidebar1 { width: 220px; }
</style>
<![endif]--><!--[if IE]>
<style type="text/css"> 
/* place css fixes for all versions of IE in this conditional comment */
.twoColFixRtHdr #sidebar1 { padding-top: 30px; }
.twoColFixRtHdr #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
<![endif]-->

           
         

Open in New Window

03.27.2008 at 08:32PM PDT, ID: 21227812

ajsmisc:

got it....margin was the culprit in the CSS

Accepted Solution

20080236-EE-VQP-29 / EE_QW_2_20070628