Div Layout positioning - borders?

Hello all,
I've slowly been tinkering away at re-making our company's website in downtime between projects. I'm a graphic designer, still getting used to DW. I've had a lot of assistance from searching topics and asking questions on these forums already. I'm pretty confident once I finish a page I can extend that practice throughout the rest of our site. I seem to be stymied at this point:
I've laid out a header and footer with site navigation and content including a "direct to products" menu. I want to place an image of our office here, as pictured:
I've learned tables are bad, and absolute positioning is bad, so I've been laying out the page using margins around divs to keep them in place. This has worked pleasingly so far in all the browers I've tested it in. You can see the margins indicated in the picture above in DW. However, when I delete the position:absolute attribute, I cannot get this div back into the "content" portion of the page (It keeps wanting to default it in or below the left menu- "homenav."
I'm assuming it's not finding a border to work against? I've put a 1px border around the left menu, but it's not working. What's more, when I do a preview in any browser, the image is gone entirely:
Here is a link to the temporary homepage:
http://www.gellerlighting.com/indextemporary.html
I appreciate any help you can give me. I'm assuming there is a CSS attribute I'm not familiar with that I have to assign to the image div, or the menu div on the left? Thanks
Dan

Amend the css for the 'homenav' <div> to exactly as shown below:
#homenav {
    float: left;
    width:210px;
    height:531px;
    background-image: url(Images/front%20page%20nav%20menu.jpg);
    margin-left: 14px;
    margin-top: 15px;
    background-repeat: no-repeat;
Next select your 'apDiv9' <div> (the one which contains your large image which you want positioned next to the left side navigation). Cut it from the code because it's in the incorrect location. Paste it directly after the closing 'homenav' </div> tag.
You can locate the closing tag for the 'homenav' container by clicking on it's tag name which will be shown along the bottom of Design View in Dreamweaver when you click your mouse anywhere inside of the <div>. Switch to code view and scroll down to the end of the highlighted section and paste back in your 'apDiv9' <div> after the highlighted section.
Then amend the 'apDiv9' css to exactly as shown below:
#apDiv9 {
float: left;
    width:535px;
    height:286px;
    margin-left: 26px;
    margin-top: 16px;
To align elements side by side you need to use the 'float' css attribute(as shown in the css above).
See those %20 characters in the path name to your background image? They are spaces in the name. Don't leave spaces. Use underscores to join up the image name like - Images/front_page_nav_menu.jpg
Best practice is also try not to set height on your <divs>. I see no reason why you should assign a height to the 'homenav' <div> and there is no reason to assign one to the 'apDiv9' <div> either.

Similar Messages

Div layout breaks apart

I have created a CSS div layout contained within an overall
div so I can syle layout to a fixed width.
I have styled container "overflow: hidden" but internal divs
still break apart in IE.
I have reduced px width of center content div but that makes
no difference either.
Site URL is:
http://dstall.com/oft/
Layout should look like this screenshot:
http://dstall.com/oft/PIX/Screenshot.jpg
but in IE it's breaking apart like in screenshot2:
http://dstall.com/oft/PIX/Screenshot2.jpg

See if the below html/css helps:
<!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>
<style type="text/css">
#wrapper {
    width: 980px;
    margin: 0 auto;
#header {
    overflow: hidden;
#headerLeft {
    float: left;
    width: 600px;
#headerRight {
    float: right;
    width: 380px;
#mainAreaWrapper {
    overflow: hidden;
#mainAreaLeft {
    float: left;
    width: 240px;
#mainAreaRight {
    float: left;
    width: 740px;
#mainAreaTop {
    min-height: 320px;
    background-color: #CCC;
    margin-bottom: 15px;
        -moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
#mainAreaBlueBox {
    min-height: 250px;
    float: left;
    width: 450px;
    background-color:#09C;
    -moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
#mainAreaGreenBox {
    min-height: 250px;
    float: left;
    width: 280px;
    margin-left: 10px;
    background-color:#6C3;
    -moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="headerLeft">Header Left</div>
<div id="headerRight">Header Right</div>
</div>
<div id="mainAreaWrapper">
<div id="mainAreaLeft">Main Area Left</div>
<div id="mainAreaRight">
<div id="mainAreaTop">Main Area Top</div>
<div id="mainAreaBlueBox">Blue Box</div>
<div id="mainAreaGreenBox">Green Box</div>
</div>
</div>
<div id="footer">Footer</div>
</div>
</body>
</html>

Issues with floated DIV layout

Hi I am having problems with my floated DIV layout on the following site in I.E 6/7 but not 8.
I have tried display: inline thinking it may be a margin/padding issue?
http://www.sopasbeauty.co.uk
what am I doing wrong, should I be adding clearfloats to separate area's of the page??
Mark

First, open the page in DW and use FILE | Convert > XHTML 1.0 Transitional. Then try changing this -
<div class="boxes" id="box1">
<h1>Acrylic Nails</h1>

CS6 div layout issue

http://www.lestock.ca/index.html
I am having a problem with the layouts of the divs here.
As the page loads, the curved border placed around the container appears to load as a small oval, then proceeds to load correctly but there is a small space in the top corner.
I found it necessary to place <p> tags at the end of the side bar and the container in order for the page to maintain its full content.
Thanks
Message was edited by: Pat Krushen
CSS style sheet
@charset "utf-8";
/* CSS Document */
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
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;
background-repeat: no-repeat;
background-color: #FFF;
background-position: 0px;
top: 0px;
background-attachment: fixed;
background-image: url();
.twoColLiqLtHdr #container {
width: 80%;
text-align: left; /* this overrides the text-align: center on the body element. */
overflow: visible;
background-color: #FFFFFF;
border: thin solid #060;
border-radius: 50px;
margin-right: auto;
margin-left: auto;
padding-top: 10px;
padding-right: 15px;
padding-bottom: 10px;
padding-left: 15px;
.twoColLiqLtHdr #header {
background-image: url(greencorner2.jpg);
background-repeat: no-repeat;
font-size: 90%;
background-color: #FFF;
width: 100%;
padding-top: 0;
padding-right: 0px;
padding-bottom: 0;
padding-left: 0px;
.twoColLiqLtHdr #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 */
/* Tips for sidebar1:
1. since we are working in percentages, it's best not to use padding on the sidebar. It will be added to the width for standards compliant browsers creating an unknown actual width.
2. Space between the side of the div and the elements within it can be created by placing a left and right margin on those elements as seen in the ".twoColLiqLtHdr #sidebar1 p" rule.
3. Since Explorer calculates widths after the parent element is rendered, you may occasionally run into unexplained bugs with percentage-based columns. If you need more predictable results, you may choose to change to pixel sized columns.
.twoColLiqLtHdr #sidebar1 {
float: left;
width: 22%; /* top and bottom padding create visual space within this div */
background-color: #FFF;
margin-left: 15px;
background-repeat: no-repeat;
border-right-width: medium;
border-right-style: outset;
border-right-color: #060;
/* Tips for mainContent:
1. the space between the mainContent and sidebar1 is created with the left margin on the mainContent div. No matter how much content the sidebar1 div contains, the column space will remain. You can remove this left margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends.
2. to avoid float drop at a supported minimum 800 x 600 resolution, elements within the mainContent div should be 430px or smaller (this includes images).
3. in the Internet Explorer Conditional Comment below, the zoom property is used to give the mainContent "hasLayout." This avoids several IE-specific bugs.
.twoColLiqLtHdr #mainContent {
margin-top: 0;
margin-bottom: 0;
text-align: left;
float: left;
width: 23%;
margin-left: 20px;
.twoColLiqLtHdr #footer {
background-color: #060;
font-family: Verdana, Geneva, sans-serif;
font-size: x-small;
color: #FFF;
text-align: center;
margin: 0px;
padding-top: 0;
padding-right: 10px;
padding-bottom: 0;
padding-left: 10px;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-color: #090;
border-right-color: #090;
border-bottom-color: #090;
border-left-color: #090;
border-radius: 10px;
.twoColLiqLtHdr #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;
/* Miscellaneous classes for reuse */
.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;
.menudiv {
float: left;
width: 50%;
#menudiv2 {
float: left;
width: 60%;
margin-left: 10%;
padding: 10px;
margin-right: 28%;
.fltrtintroduction {
float: right;
width: 66%;
padding-left: 15px;
font-weight: normal;
color: #333333;
#weatherdiv {
float: right;
width: 200px;
.twoColLiqLtHdr #container #header #slideshow {
float: right;
width: 70%;
margin-left: 35px;
a:link {
color: #090;
text-decoration: none;
a:visited {
color: #FC0;
text-decoration: none;
a:hover {
color: #333;
text-decoration: underline;
a:active {
color: #8E9AB0;
text-decoration: none;
#updatetable {
float: left;
width: 60%;
margin-left: 30px;
background-color: #FFF;
#updatetable table tr {
#updatetable table tr td strong {
color: #FFF;
</style>
.lightfont { font-family: Verdana, Geneva, sans-serif;
font-weight: normal;
#logo {
float: left;
width: 24%;
.current.current {
background-color: #090;
.green {
font-weight: bold;
color: #060;
Message was edited by: Pat Krushen

Replace all of the below - from your fax number to the closing </html> tag with the code marked in red
Fax: (306) 274–2110 </span>
</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p><br />
</p>
<p> </p>

<h1> </h1>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<script type="text/javascript">

</script>
</body>
</html>
Fax: (306) 274–2110 </span>
</p>
</div>
<br style="clear: both;" />
</div>
<script type="text/javascript">

</script>
</body>
</html>

Do I understand AP Divs & relative positioning?

Hello.
So to cut a long story short....
I am newbie & plunged into creating my first website using all AP elements, only to find out that this is not a good way because of the nature of the AP's.
After much help from this forum (PZ in particular) I decided to do my research a little bit more.
I still have to create another website that I guess should really be built in flash (as suggested by someone). But as I dont know Flash this is not an option. (please see attached design concept).
The only elements I really need at this point would be for the "get a quote" & "about", "contact" bubbles to have rollover states that change colour when the mouse goes over them.
I have been trying to find the best way of doing this without AP elements.
1) Create a Div container with the main image for the background, then insert a table and try to insert the rollover images that way. But after research, I am finding that I should be steering away from tables and moving towards CSS. Which then led me to Idea no 2.
2) Create a Div container with the main image for the background, then insert Div's and adjust the margins (relative positioning?) to move to the Divs in correct places I need the rollovers. But again I read that this method should only be done for tweaking a web page and not structuring a webpage as may cause problems.
3) Create a Div container with the main image for the background, then insert Div's in a grid like system (see attached image of my guides where I would place Div's), But this seems a over complicated way to do it and you end up with divs that have no use & lots of unwanted code.
OR am I right in thinking this works?
4) Apply a relative positioned Div, set background image, then place AP div's inside RP Div that I would use for my rollovers? If I did this would this then avoid the problem of the AP divs moving in different browsers?
Or have I got this all completely wrong and have to go back to the drawing board again?
Your thoughts would be appreciated :-)
Many thanks in advance
Louisa

Build your HTML content logically from top of page to bottom of page. Use default CSS positioning (which is no positioning at all) for the majority of your page layout.
Use AP Divs only when absolutely necessary because doing so removes them from normal content flow.
To control APDivs in relation to other content on the page, you many need to wrap them inside a relatively positioned container.
Example of APDivs inside a Relatively positioned container:
http://alt-web.com/DEMOS/CSS-Disjointed-Menu-Rollover.shtml
As far as your design concept goes, you could do this a number of ways. With CSS sprites or an Image Map, for example.
http://alt-web.com/DEMOS/CSS-Sprites.shtml
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

Div layout problem

Hi - stuck on what I think should be a fairly basic layout problem:
I have 2 divs, equal widths but varying heights, one floated to the left and one to the right so that they appear next to eachother on the page. The one on the left contains varying amounts of text, the one on the right contains a flash player so never varies.
Where the text for the left div is long, I want it to start off next to the player, but then flow beneath it rather than continuing downwards at the same width as the div. If I remove the width of the left div, so that it reverts to the container width, the player div positions itself below it, so I can't work out how to get the effect.
Can anyone help?

Hi,
hope I understood in the right way: I used (translated from German DW) "modify table" and so I got one more row and two columns in your Main_Content. In one of the new columns I copied the image and beneath I took the text (you now can replace with image and text of your choice), like this:
If that's not a help for your question, please ask me again.
What concerns the width of the pictures, I would format them with PS or a similar program in the same wide.
Hans-G.

Layer or div tag positioning help wanted

Okay, actually I have two problems: 1) I have managed to
create a navigation bar, but I can't find out how to save it other
than saving the html page it was created on. The help literature
seems to vaguely indicate that a nav bar created can be saved and
used on other pages, but I'll be damned if I can find where there
are any details of this process.
*BTW, my navbar has multiple elements or buttons, so I can't
just copy paste, ctrl/shift doesn't seem to work selecting multiple
elements, tho it works on regular images*
2) Once I solve problem #1, I am goin to want to have the
navigation bar "stay put" in it's position on the screen, immune to
any scrolling that occurs on the page(s). So, I plan on putting
into a layer or div that can be given this behavior or property.
Unfortunately, I can't find or figure out how to do that, either.
Is this a good plan? Is there a better way to make the Nav bar
exempt from page scrolling?

billuminatti wrote:
> Thank you very much for the help. As someone who has
done virtually ZERO
> coding, even something as simple as copying and pasting
code per
> instructions...well, let's just say, it's not my forte.
Needless to say, my
> attempts to do just that, copy and paste per "persistent
layer" instructions,
> have not succeeded yet. There could be several reasons
for this, that I have
> noted, anyway. One is, I have an animated timeline, so
when I replace my body
> tag:
> <body onload="MM_timelinePlay('Timeline1')">
> with the new one (per instructions), my timeline
animation goes bye bye.
> Plus, the "persistence" desired is still not achieved,
which leaves me to my
> next observation: I can't see how the code refers to the
layer that I want to
> persist. IOW, how does it "know" which layer to persist?
> I took the comon-sense measure of having that layer
selected when I pasted my
> code, but I'm not fool enough to think that this would
make any difference.
> I didn't even look into the Server Side Include yet, as
i am just aiming at
> making a layer, any layer, "persist". My comment at this
point is that it seems
> very hard for me to believe that a layer behavior
(persistence, or floating) so
> web-common wouldn't have a "design-view only" solution,
in a package as
> sophisticated as Dreamweaver. This is not a slander on
your answer, BTW, which
> I am sure is a fine one. Thanks again.
>
>
No offense, but I think your approach may be a bit off base
here (of
course I have not seen a link to a a page showing what you
are trying to
achieve, so I could be completely wrong). The first part of
your
question already makes me nervous, because it makes me think
you have
used Fireworks or another image program to create your
navbars.
Depending on which version of Fireworks you are using, that
could be
disastrous or only unwieldly. The navigation bars created by
Fireworks
are definitely not the best solution,and you can go through
years of
posts, particularly by Murray, advising against their use.
If you are interested in an easier way to create your
navigation, post back.
Second, wanting your navigation to stay put while the rest of
the page
scrolls is something I see here a lot, but it's not
necessarily how the
web works. People plunge into frame hell in order to
accomplish it,
but it is like trying to kill a mosquito with a jackhammer.
There is a good extension that will do this for you if you
insist, but
given the problems you are having now, I would first create a
properly
coded page that behaves as a normal web page should, and ONLY
THEN
worry about server-side includes
revisit the issue of fixed and scrolling page elements.
An excellent tutorial for creating a cross-browser friendly,
modern
(e.g.not relying on tables for layout) page can be found at
www.projectseven.com (search for "quickdraw" without the
quotation
marks), where you can also find an excellent tutorial for
creating
horizontal or vertical navigation menus that are simple and
can be used
in templates or server-side includes (search for "uberlink"
without the
quotation marks).
Good luck.
Oh, and don't apologize for not understanding code: learn to
understand
and write good, solid html and css. Elizabeth Castro's book
HTML for
the World Wide Web is excellent. For beginning css you might
want to
start here:
http://www.mako4css.com/
Bonnie in California
kroko at
sbcglobal dot net
http://www.theanimalrescuesite.com/cgi-bin/WebObjects/CTDSites.woa

Design View and a CSS Div layout page

There are a few pages l
ike this. I am assuming it is because everything is layed out w
ith div tags, but there mush be a way to correct the desging view. Everything shows up great o
nline. Here is a screenshot:
Here is the code:
<body onload="initHomePage(); addReferToLinks();">

<script type="text/javascript" src="/shared_assets/toolbar_v2/toolbar.js"></script>

<img src="/profile/image/logo_linknet.gif" />

<form name="frmSearch" action="" method="get" title="Resources" class="scopedSearch">
       <input class="textInput" name="qt" value="THIS SECTION ONLY" id="searchField" size="20" />
       <input class="button" type="submit" value="Search" name="submit" />
       <input type=hidden name="col" value="mpr dno dnos1" />
</form>
    <div id="main">

<div id="newsBox" class="box">
   <div class="boxHeader">
    <div class="headerLeft"><h2>MP News</h2></div>
    <div class="headerRight"><a href="/news/news/index.htm" class="more">more »</a></div>
   </div>
   <div class="boxContent">
    <h3>
     <script type="text/javascript">var x=new Date(); document.write(x.toLocaleDateString());</script>
    </h3>
    <div id="newsContent">
     <div class="loading">
      Loading...
     </div>
    </div>
    
    <h3>My Subscriptions</h3>
     <ul style="list-style-type:none;">
      <li><a href="http://rss/">Setup Subscriptions - Get Help</a></li>
      <li><a href="http://">View Subscriptions</a></li>
     </ul>
    
    <div class="imgFrame"><a href=""><img src="image/mc_logo2.jpg" alt="Media Center" hspace="0" vspace="0" border="0" /></a></div>
    
    <div class="imgFrame"><a href="http/"><img src="image/columns.gif" hspace="0" vspace="0" border="0" alt="The Northwestern Columns" /></a></div>
   </div>
</div>


<div id="content">
   
   
   <div id="alert" class="box highlightBox">
    <div class="boxHeader">
     <div class="headerLeft"><h2>Important Notice</h2></div>
     <div class="headerRight"> </div>
    </div>
    <div id="alertContent" class="boxContent">
     <div class="article">
      <a href="" class="headline">Avoid lock out - Install LINK 22.2 now</a>
      Users who do not install LINK 22.2 before the version enforcement date of July 31 will be
      unable to access their PCs.
     </div>
    </div>
   </div>
            <div id="home_page_id">) Home Page</div>
   
   <div id="activities" class="box highlightBox">
    <div class="boxHeader">
     <div class="headerLeft">Welcome<span id="username"></span><h2>What would you like to do?</h2></div>
     <div class="headerRight"> </div>
    </div>
    <div class="boxContent">
     <div style="width:100%;">
      <ul>
       <li><a title="Find information and tools for recruiting new representatives" onmouseover="showTooltip(this);" onmouseout="hideTooltip(this);">Recruiting: <select style="font:message-box; width:19em;" onchange="if(this.value){window.navigate(appendReferer(this.value))};">
         <option name="selectRecruit" selected="selected">*** make selection ***</option>
         <option value="http.htm">Sourcing & Prospecting</option>
         <option value="http://.htm">Selecting & Assessing Candidates</option>
         <option value="http://_process.htm">Post Acceptance Process</option>
         <option value="http">Developing an Internship Program</option>
         <option value="http.htm">Tracking Activity, Results & Accountability</option>
         <option value="http://.htm">Recruiter Development</option>
        </select></a></li>
       <li><a href="/objective/mpr_secure/mp_ldorgdev.htm" title="Find information and tools for developing leaders in your office" onmouseover="showTooltip(this);" onmouseout="hideTooltip(this);">Leadership & Organizational Development </a></li>
       <li><a href="/objective/mpr_secure/mp_supvsn.htm" title="Find information and tools for effective supervision" onmouseover="showTooltip(this);" onmouseout="hideTooltip(this);">Supervision</a></li>
       <li><a href="/objective/mpr_secure/mp_stfop.htm" title="Find information and tools for   managing your office" onmouseover="showTooltip(this);" onmouseout="hideTooltip(this);">Staffing & Operations</a></li>
       <li><a href="/objective/mpr_secure/mp_plnperform.htm" title="Find information and tools for business planning and performance monitoring" onmouseover="showTooltip(this);" onmouseout="hideTooltip(this);">Planning & Performance</a></li>
          <li><a href="/objective/mpr_secure/mp_mngmntcompben.htm" title="Find information regarding income, fees, expenses, allowances and benefits" onmouseover="showTooltip(this);" onmouseout="hideTooltip(this);">Management Compensation & Benefits</a></li>
          <li><a href="/objective/mpr_secure/mp_repdev.htm" title="Find information and tools regarding mentoring and professional growth" onmouseover="showTooltip(this);" onmouseout="hideTooltip(this);">Representative & Specialist Development</a> </li>
      </ul>
      <div id="slideshow1" class="activitySlideshow" style="height:212px;">
       <img src="image/slideshow_photos/photo06.jpg" />
       <img src="image/slideshow_photos/photo07.jpg" />
       <img src="image/slideshow_photos/photo08.jpg" />
       <img src="image/slideshow_photos/photo09.jpg" />
       <img src="image/slideshow_photos/photo10.jpg" />
      </div>
     </div>
    </div>
   </div>
   
   <div class="leftColumn">
   
    <div class="box">
     <div class="boxHeader">
      <div class="headerLeft"><h2>Events Calendar</h2></div>
     </div>
      <div class="boxContent"><ul>
      <li>April 25-30<br />
     <a href="http_020110.htm" target="_blank"></a></li>
     <li>May 12-14<br />
     <a href="http://030510.htm" target="_blank"></a></li>
       <li>June 16<br />
     <a href="http://.htm" target="_blank">Series conversation</a></li>
                      </ul>
      </div>
    </div>
     
     <div class="box">
      <div class="boxHeader">
       <div class="headerLeft"><h2>Spotlight</h2></div>
       <div class="headerRight"> </div>
      </div>
      <div class="boxContent">
              <div class="article">
      
   <div class="headline"><a href="http.htm?tern Mutual Association dues decline form available</a> </div>
     The $25 association membership fee will be charged to June 30 home
     office supply bills. Representatives who wish to decline membership
     may submit a <a href="http://.htm" target="_blank">decline
     form</a>.
<div class="headline"><a href="http://.htm">Surplus notes information available</a> </div>
     Find answers to common questions and hear insights from about the company’s recent surplus notes offering.
                          <div class="headline"><a href="http://.htm">Stay up to date on 2010 estate tax repeal </a> </div>
     Consider the new Estate Tax Repeal page on LINKnet “home base” for information on the 2010 repeal and resources to use when talking to clients about this topic.
              <div class="headline"><a href="http/index.htm">Withstanding Market Challenges</a> </div>
     Access resources to highlight the company’s strength and stability, find sales strategies and share marketing and market-related materials to help address client concerns.
              <div class="headline"><a href="http:///year.htm">Dividend resources available</a> </div>
     The Current Year Scale page on LINKnet provides the latest information
     and sales support materials based on the 2010 dividend announcement.

               </div>
      </div>
     </div>
   </div>
   <div class="rightColumn">
   
    <div class="box">
     <div class="boxHeader">
      <div class="headerLeft"><h2>Approaching Deadlines</h2></div>
     </div>
     <div class="boxContent">
       <ul>
<li>April 30: <a href="http.htm">Submit 2010 Commitment to Excellence Award nbominee</a></li>
       <li>May 25: <a href="http.htm">Submit applications for Intern Community Service Award</a></li>
                      <li>June 30: <a href="http://pdf">Submit 2010 Managers Membership Award Application to NAIFA</a> <img src="/shared_assets/image/doc_icons/pdf.gif" alt="PDF File" /></li>
                      </ul>
      </div>
    </div>
    
    <div id="techalerts" class="box">
     <div class="boxHeader">
      <div class="headerLeft"><h2>Priority Tech Alerts</h2></div>
      <div class="headerRight"><a href="http://.htm" class="more">more »</a></div>
     </div>
     <div class="boxContent">
      <div class="loading">
       Loading...
      </div>
     </div>
     <iframe name="techalerts" src="/statusdisplay/001_summary.htm" onreadystatechange="if(this.readyState=='complete'){this.previousSibling.innerHTML = formatTechAlert(frames['techalerts'].document.body.innerHTML);}"></iframe>
    </div>
   </div>
</div>

Dreamweaver is pretty good these days at showing the page in Design View how it will be viewed when online. HOWEVER having said that it does largely depend on the way you write the css.
I guess for Dreamweaver it's impossible for it to show every concievable way you can write css correctly. Unfortuantely if your css is not compatible with what Dreamweaver likes it won't make a great job of rendering the site correctly in Design View, that's always been the case.
The css is not wrong but I've seen many display issues in Dreameaver Design View caused as a direct result of the css being overly complex to crack simple presentation. I guess it's in the lap of the gods if you are fortunate enough to have found the way to write css that Dreamweaver likes.

Get layout-position of a component

Hi!
i have a frame applcation with two toolbars.
they can both be dragged to a new position in the borderlayout with the mouse. it was'nt easy to have no problems with the layout-manager when they are set to a new position.
now i want so save the alignment of the toolbars for the next start of the application.
how do i get the current alignment of a toolbar?
the toolbar is an attribute of the class, i know the panel, and that is no other component in the north, south, east or west.
for example the best thing would be to retrieve
String layoutPosition = toolbarPanel.whereTheHellIsTheToolbar(toolbar);
(e.g. "BorderLayout.SOUTH")
to serialize this string and to initialize at the next start
add(toolbar, layoutPosition);
thanks for any help in advance.
Rainer

Not sure, but this thread might help:
http://forum.java.sun.com/thread.jsp?forum=57&thread=340326

Div layout design

My first website and using CSS.
www.smilesofmichigan.com
I would like the text on the left to always use the same space as the text on on the right.
I was struggling with the format layout for the text on the right (office hours). I started with two simple columns but changed the text on the right to 3 different divs. This is the general layout I would like except I would like the days of the week to be all line up the same. Would you please help me better code this?
My next step will be making a contact page. I believe a form is the best method to use. Any other comments about the site would be appreciated.
Carlos

carloscast1 wrote:
My first website and using CSS.
www.smilesofmichigan.com
I would like the text on the left to always use the same space as the text on on the right.
I was struggling with the format layout for the text on the right (office hours). I started with two simple columns but changed the text on the right to 3 different divs. This is the general layout I would like except I would like the days of the week to be all line up the same. Would you please help me better code this?
My next step will be making a contact page. I believe a form is the best method to use. Any other comments about the site would be appreciated.
Carlos
The text on the left and the text on the right will always be of different lengths, no matter how much you try to find a solution.
You should not try and restrict the length of text to any particular area, just let it consume how much space it requires. Designing for the web is different from desk top publishing. The web is fluid and so should your design be.
Some people use a scrolling area to restrict the text to a specific height but this is an ugly solution as it creates unsightly scrollbars. Really it's better practice to build in flexibility to the design and plan for variations in column height.
What you should do is wrap your 'welcome' <div> and the 3 <divs> on the right in another <div>. Attach a repeating background image (half white on the left and half green on the right) to the 'wrapper' <div>. This will at least visually make both left and right sections look equal in depth when one side or the other contains more text. Key is to add 'overflow: hidden;' to the css of the 'wrapper' <div> this ensures that it enclosed around the other <divs> inside it.
Days of the week look fine to me on Firefox. I'd say that information is 'tabular data' so use a table if it means the info lines up better. There are more complex css methods but its not worth the effort.

DIV Layout - Vertically Centre

Hello, how can i centre my div based layout Vertically and
Horizontally?
Tried a lot but vain.
Please See the Code and Help accordingly.

Horizontal is easy. Vertical is not. In your example, a 100%
width element
won't center anyhow, since there is nothing to center! And a
fixed height
element is BEGGING for trouble - if the text size is changed
larger by the
visitor, you will get an overlapping mess.
<!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>Welcome to the Wrong Side of the
Web...</title>
<link href="styles.css" rel="stylesheet" type="text/css"
/>
</head>
<body>
<div id="mainCentre">Content for class mainCentre Goes
Here</div>
</body>
</html>
CSS External
========================================
body {
margin: 0px;
#mainCentre {
width: 980px;
margin:0 auto;
background-color: #999;
http://www.apptools.com/examples/tableheight.php
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"manofspirit" <[email protected]> wrote in
message
news:[email protected]...
> Hello, how can i centre my div based layout Vertically
and Horizontally?
> Tried a lot but vain.
> Please See the Code and Help accordingly.
>
>
>
> XHTML PAGE
>
=============================================================
> <!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>Welcome to the Wrong Side of the
Web...</title>
> <link href="styles.css" rel="stylesheet"
type="text/css" />
> </head>
> <body>
> <div class="mainCentre">Content for class
mainCentre Goes Here</div>
> </body>
> </html>
>
>
>
>
>
>
>
>
>
>
> CSS External
> ========================================
> body {
> margin-left: 0px;
> margin-top: 0px;
> margin-right: 0px;
> margin-bottom: 0px;
> }
> .mainCentre {
> height: 400px;
> width: 100%;
> background-color: #999;
> }
>

Div Layout

Dear All,
I like one design, that is made by div table. I have a best knowledge in table based layout.
Div based layout is attached for your reference.
please help out this, how can make container like this
I am making something like this, my codes are attached for your references.
<!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="untitled.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div align="justify">Container
    <div id="rightside">Right Side </div>
    <div id="leftside">Left Side Navigation </div>
</div>
</div>
<div id="footer">Footer</div>
</body>
</html>
@charset "UTF-8";
#container {
          width: 960px;
          margin-top: 0px;
          margin-right: auto;
          margin-left: auto;
          margin-bottom: 0px;
#leftside {
          width: 420px;
#rightside {
          width: 420px;
          float: right;
#footer {
          width: 960px;
          margin-top: 0px;
          margin-right: auto;
          margin-bottom: 0px;
          margin-left: auto;

See if the below html/css helps:
<!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>
<style type="text/css">
#wrapper {
    width: 980px;
    margin: 0 auto;
#header {
    overflow: hidden;
#headerLeft {
    float: left;
    width: 600px;
#headerRight {
    float: right;
    width: 380px;
#mainAreaWrapper {
    overflow: hidden;
#mainAreaLeft {
    float: left;
    width: 240px;
#mainAreaRight {
    float: left;
    width: 740px;
#mainAreaTop {
    min-height: 320px;
    background-color: #CCC;
    margin-bottom: 15px;
        -moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
#mainAreaBlueBox {
    min-height: 250px;
    float: left;
    width: 450px;
    background-color:#09C;
    -moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
#mainAreaGreenBox {
    min-height: 250px;
    float: left;
    width: 280px;
    margin-left: 10px;
    background-color:#6C3;
    -moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="headerLeft">Header Left</div>
<div id="headerRight">Header Right</div>
</div>
<div id="mainAreaWrapper">
<div id="mainAreaLeft">Main Area Left</div>
<div id="mainAreaRight">
<div id="mainAreaTop">Main Area Top</div>
<div id="mainAreaBlueBox">Blue Box</div>
<div id="mainAreaGreenBox">Green Box</div>
</div>
</div>
<div id="footer">Footer</div>
</div>
</body>
</html>

Can't get DIV to position at bottom of header div

I have created a man nav div inside the header div so that I could position it at the bottom of the header div. I selected the main nav div and applied positioning elements, however, no matter what values I give, the div is unresponsive and stays at the top of the header. Shouldn't I be able to do this? Or do I need to place the nav menu div outside of the header div?
Thanks for some quick feedback.
Samantha

Samantha, can you give us a link to your page, or at least copy in your code (see instructions at the top right of the Forum page). We will be able to give you a MUCH better answer if we can see where you are.
But, without your code, if you place a position: relative; on the header div and a position: absolute; on the nav div, you should be able to include something like bottom: 0;
Here's a small sample of what I am talking about:
<!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>
<style type="text/css">
     div#header {
          width: 300px;
          margin: 0 auto;
          height: 100px;
          background-color: blue;
          position: relative;
          color: white;
          text-align: center;
     div#nav {
          width: 250px;
          height: 40px;
          background-color: white;
          border: solid 1px red;
          position: absolute;
          left: 25px;
          bottom: 0;
          color: red;
</style>
</head>
<body><div id="header">Here is some header text.
<div id="nav">Nav stuff here</div></div>
</body>
</html>
Copy this into a new page on your Dreamweaver and take a look at what it does.
Beth

AP div tags/positioning within a box/can't do it/?

*I've drawn a container box for my home page, into which I want to add an image, and then freely position my interactive/rollover buttons and/or images within the confines of that box. I've got the background...and the box...but Dreamweaver will not let me draw an apdiv tag within the box. I can draw outside the box, but get a circle with a slash when I try to draw within the box.
I have a page online www.bradmarsh.org. I created it by just placing the image and then drawing the button boxes and placing them. They are not placed relative to the confines of the box, so they move when I resize the browser. Also..I might add...it's just a mockup.
At this point, I still don't understand html, but I am starting to grasp it somewhat. If I can solve this little issue, I can carry on with creating my own site.
Help??
Thank you

I've drawn a container box for my home page,
DW is not a graphics application with which you freely draw boxes on a workspace. It's pro-level web authoring software that requires you to possess a working knowledge of Web Design concepts, HTML and CSS code.
Close DW.
Spend some time learning CSS and XHTML first.
Then work through this 3 part tutorial:
Taking a Fireworks comp to a CSS Layout in DW
Part 1 - Initial Design
http://www.adobe.com/devnet/dreamweaver/articles/dw_fw_css_pt1.html
Part 2 - Markup preparation
http://www.adobe.com/devnet/dreamweaver/articles/dw_fw_css_pt2.html
Part 3 - Layout and CSS
http://www.adobe.com/devnet/dreamweaver/articles/dw_fw_css_pt3.html
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

AP div not positioning as expected!

Actually, it's not taking on any positioning that I am trying to applt to it.
I have a circular logo that refers to 75 foot, and I am using a background image to help me position my content as needed, but the 75 foot logo div that I have positioned is falling behind the timer. Infact, the logo should appear infront of it because it has a higher z-index... another confusion for me then!
Have a look at http://www.fortnerf.co.uk and let me know why it doesn't want to work.
The AP div in question is called '75home', and I have placed it everywhere I can think of placing it on the page. It's just a simple div with a logo in it. It positions correctly in DW, but as soon as I test it with live veiw or in a browser, it moves!
The CSS for it and other AP divs is as follows:
#timer {
          position:absolute;
          width:390px;
          height:243px;
          z-index:1;
          left: 710px;
          top: 50px;
#win {
          position:absolute;
          /*width:460px;
          height:365px;*/
          z-index:2;
          left: -40px;
          top: 333px;
#homebuttons {
          position:absolute;
          width:465px;
          height:232px;
          z-index:3;
          left: 561px;
          top: 445px;
#75home {
          position:absolute;
          width:222px;
          height:222px;
          z-index:4;
          top: 261px;
          left: 572px;
I've also tried the following:
#75home {
          position:relative;
          width:222px;
          height:222px;
          z-index:4;
          margin-top: 261px;
          margin-left: -104px;
Thanks.
Mat

Pfft! I didn't know that!!
All these years I have been doing this and I have never known that. I guess it's been pure luck that I have never tried to use a selector that begins with a number before!
Thanks.

Div Layout positioning - borders?

Similar Messages

Maybe you are looking for