Div tag placement error

Hi-
I have placed text within a div tag that is wrapped within another div (Figure 1) but I can't seem to identify the proper placement. I tried to solve the problem by assuming that the placement of the div was incorrect. However, I cannot place a div within the area that I want (red arrow indicates correct placement), therefore, the text is appearing at the bottom of where it should, under what seems to another extraneous div. Any help in solving this is greatly appreciated. Thanks!
Two images: website in browser (left) and in design view from Dreamweaver (right).

You need a wider page to hold the floated links and iframe. Also your iframe is too short for the amount of content it needs to display.
I took the liberty of re-coding your page layout and in so doing removed a lot of the images and replaced them with CSS.   Copy & Paste this code into a NEW, blank document and see if it makes sense.
<!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>Steve Baisden | Home</title>
<link rel="shortcut icon" href="favicon.ico" />
<style type="text/css">
body {
background-color:#e4e4e4;
width: 1100px;
margin: 0 auto;
.container {overflow: hidden; /*float containment*/}
.header {
background:#000;
border-radius:20px;
border: 4px solid silver;
min-height:83px;
width:1000px;
.header img.logo {
float:left;
margin:25px 0px 25px 25px;
.navMain {
margin:30px 28px 30px 0px;
float:right;
.navMain ul {
margin:0px;
padding:0px;
.navMain ul li{
margin:0px;
padding:0px 20px;
list-style:none;
display:inline;
.navMain ul li a{
margin:0px;
padding:0px;
color:#FFF;
text-decoration:none;
font-size:18px;
font-family: "Arial Unicode MS";
text-transform:uppercase
.navMain ul li a:hover{
text-decoration:underline;
/**persistent page indicator**/
body.home .navMain li a.home,
body.about .navMain li a.about,
body.portfolio .navMain li a.portfolio,
body.resume .navMain li a.resume,
body.contact .navMain li a.contact{
color:rgb(143,203,3)
.content {
border-radius:20px;
border:4px solid silver;
background-color:#428301;
width:1000px;
margin:10px 0;
padding:0;
overflow:hidden; /*for float containment*/
position:relative;
box-shadow:7px 7px 5px #999
#leftCol {
float:left;
width:249px;
min-height: 370px;
background:#FFF;
border-radius:16px 0 25px 25px;
.wrapLinks {
margin:10px 0px 0px 0px;
padding:3px 0px 0px 0px;
font-family:"Arial Unicode MS";
.wrapLinks li{
margin:0px;
padding:9px 0px 0px 30px;
list-style:none;
.wrapLinks li a {
font-size:13px;
color:#428301;
text-decoration:none;
/**arrow after links**/
.wrapLinks li a:after {
content:' \2799';
.wrapLinks li a:hover{
text-decoration:underline;
h2.title {
margin:0px;
padding:0px;
font-size:24px;
font-weight:normal;
font-family:"Arial Unicode MS";
/**carousel**/
iframe{
position:relative;
float:right;
width: 751px;
height:375px;
border:none;
margin-top:0;
border-radius: 0 16px 0 0;
#LearnMore{
margin:0px;
padding:0px;
background: url(http://www.sbaisden.com/images/button_content.png) no-repeat;
height:75px;
width: 145px;
position:absolute;
right:25px;
top:275px;
opacity: 0.8;
cursor:pointer;
#LearnMore p { /**move text off screen**/
text-indent:-9999em}
#LearnMore:hover{
opacity: 1.0;
.greeting {
clear:both;
font-family: "Arial Unicode MS";
font-size: 20px;
font-style: normal;
color: #FFF;
padding:20px;
.bottom {
text-align:center;
margin:0px auto;
padding:0;
font-family:"Arial Unicode MS";
font-size:16px;
font-weight:bold;
.footer {
font-family:"Arial Unicode MS";
font-size:10px;
color:#666;
padding:0 20px;
margin:0;
clear: both;
</style>
</head>
<body class="home">
<div class="container">
<div class="header">
<a href="index.html"><img class="logo" src="http://www.sbaisden.com/images/header_logo.png" width="241" height="27" border="0" alt="Steve Baisden" /></a>
<div class="navMain">
<ul>
<li><a class="home" href="index.html">Home</a></li>
<li><a class="about" href="about.html">About</a></li>
<li><a class="portfolio" href="portfolio.html">Portfolio</a></li>
<li><a class="resume" href="resume.html">Résumé</a></li>
<li><a class="contact" href="Contact.php">Contact</a></li>
</ul>
</div>
</div>
<div class="content">

<iframe src="http://www.sbaisden.com/carousel.html" scrolling="auto"></iframe>

<div id="LearnMore">
<p><a href="#">LEARN MORE</a></p>

</div>
<div id="leftCol">
<ul class="wrapLinks">
<li><h2 class="title">Transportation</h2><a href="portfolio.html">Get more information</a></li>
<li><h2 class="title">GIS/Data Analysis</h2><a href="portfolio.html">Get more information</a></li>
<li><h2 class="title">Map Design</h2><a href="portfolio.html">Get more information</a></li>
<li><h2 class="title">(Re)Development</h2><a href="portfolio.html">Get more information</a></li>
</ul>
</div>
<div class="greeting">
<h4>Greetings! Welcome to my online portfolio.</h4>
<p>This website contains a collection of my academic papers, projects and maps that I have compiled into one
<br />source, displaying my abilities and skills within the realm of Urban Planning.</p>
<p>Please explore this site and feel free to leave a comment.</p>
</div>
<div class="bottom">
<p>***Certain pages of this site are still "under construction". Please check back for future developments.***</p>
</div>
</div>
<div class="footer">
<p>Copyright © 2012 Steve Baisden</p>
</div>
</div>
</body>
</html>
Nancy O.

Similar Messages

Can you place an image in a div tag and then add type over top of it?

I told someone in class lastweek that I wanted to be able to
place type over an image. They said you can just add the image into
the div tag as a background image, which will allow you to then
type over it if you like. How is this done? I have tried and
failed. I have an image that is 200x590 going down the left side of
my page. I want to run type over it, and keep the image consistent
on every page, but change the header and type. I've seen this in
several sites. How do you do this with the div tag box model method
of building a page. Can I insert an image into the div and then run
type over it. What does the code look like?

Here's an example of using a css and a background image to a
table cell...
sample principle for a div
#div {styles go here{
http://tinyurl.com/yqeptp
You may also want to go through the beginner css tutorials at
the Adobe
site:
http://www.adobe.com/devnet/dreamweaver/css.html
(pay attention to the ones
by Adrian), beginner moving onto to creating full css
layouts.
Hope this helps :-)
Nadia
Adobe® Community Expert : Dreamweaver
CSS Templates |Tutorials |SEO Articles
http://www.DreamweaverResources.com
~ Customisation Service Available ~
http://www.csstemplates.com.au
Forum Posting Guidelines:
http://www.adobe.com/support/forums/guidelines.html
>I told someone in class lastweek that I wanted to be able
to place type
>over an
> image. They said you can just add the image into the div
tag as a
> background
> image, which will allow you to then type over it if you
like. How is this
> done?
> I have tried and failed. I have an image that is 200x590
going down the
> left
> side of my page. I want to run type over it, and keep
the image consistent
> on
> every page, but change the header and type. I've seen
this in several
> sites.
> How do you do this with the div tag box model method of
building a page.
> Can I
> insert an image into the div and then run type over it.
What does the code
> look
> like?
>

Help with placement of div tags

Hello. I am sorry to ask what probably is a dumb question, but I'm new, using Dreamweaver CS5, and I need some help. I'm sure I'll be posting here a few times during this process of building a new site, but I'm hoping it can be a good way for me to learn. I've watched a lot of tutorial videos, and so here I am.
I have my site, but I'm having problems being able to place div tags. I set it up with a wrapper div, a header div, a content div, footer div, etc. But, inside those divs I want to have other div's where I can place things like a client login box, etc. So, I tried and tried to place them after one div, or before one, but I just can't get them to work right. I'm very proficient at Photoshop, but web work is fairly new. I've done a few sites, but in Golive and just basic bringing them in from Photoshop. Now I want to learn correctly, so I'm trying all of this.
I found a way to make a box, using AP Div tag, and then move that where I want it, but, it doesn't work right for me then. I don't want it fixed in the same spot absolutely, but rather I want it to move with the page. I'm going to post a link to the site I'm working on, in case that helps. But, if you look at the site so far, you can see for example I want the text box that says client login to move as you make the page wider or smaller. It's fixed now. But, it's the only possible way I know how to put the box and div tag where I want it. When I just try to insert a div tag (not an AP div) it just goes underneath the div above it.
What I'm asking is, how do I place div's within div's? Or, can I use this AP div to put it where I want, and then change it to a regular div, and it stay in the right spot? I just don't understand how exactly to place divs where I want them, unless I use the AP div box and move it around the screen. Also, if I have a div box setup, is there a way to drag it somewhere else or reposition it somewhere else on the screen just by dragging? It's all a bit hard for me to figure out at this point, but I appreciate any help you can give me.
The AP Div I used is at the top that says client login. That's the box/table/div tag I'm trying to set up correctly, so it moves with the other elements, like the logo, as you make the page wider or less wide.
Here is the link:
http://www.gagephotography.com/boudoir/boudoirsite/index4.html
Thank you again.

DW is not drag & drop friendly like graphics or word processing apps.
APDivs are NOT for primary layouts. They are for special situations and should be handled with care or you'll end up with a mess. Here is why:
http://apptools.com/examples/pagelayout101.php
The best advice I can offer is to familiarize yourself with HTML markup (content) and CSS (styles) before you even open Dreamweaver. Without a working knowledge of code, you're not going to get good results.
Start here:
HTML & CSS Tutorials - http://w3schools.com/
Learn CSS positioning in 10 Steps
http://www.barelyfitz.com/screencast/html-training/css/positioning/
How to Develop with CSS?
http://phrogz.net/css/HowToDevelopWithCSS.html
New DW Starter Pages --
http://www.adobe.com/devnet/dreamweaver/articles/introducing_new_css_layouts.html
Creating your first web site in DW CS5 -
http://www.adobe.com/devnet/dreamweaver/articles/first_website_pt1.html
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Problem to place Div tags

I am developing a web site using div tags under Dreamweaver.
Until now, I succeeded to place the different blocks using
CSS rules.
One of the block has an automatic height definition;
sometimes it can be 100 pixels high, the other time 200 pixels
high.
I need to add a block that will come immediately below the
previous one.
So sometimes it may be placed from 100 to 150 pixels,
sometime it may be placed from 200 to 250 pixels.
I don't know how to define the position of this block :
absolute, relative? I tried different solutions; I do not succeed
to make the block comming immediately after the previous.
Should someone help me?
Thanks a lot.

> I don't understand what does 'normal flow' mean.
Google it, and read about it. It's the process by which the
browser renders
the page from the top of the code to the bottom and places
page elements as
they encounter them.
> The first div
> tag has the following parameters :
> position: absolute;
You will not get anything to float under this div, since
absolute positioned
elements are removed fromt the normal flow, meaning that they
are placed on
the page in that location without regard for what else might
be immediately
before or immediately after it in the code.
This is why best practice is to not use layers for page
layout.
In your case, if you REMOVE the absolute positioning, you
will get exactly
what you want, e.g.,
<style type="text/css">

</style>
You'll also need to change this -
<div class="test">
<html xmlns="
http://www.w3.org/1999/xhtml">
to this -
<html xmlns="
http://www.w3.org/1999/xhtml">
and this -
</html>
</div>
to this -
</html>
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"Annie Benech" <[email protected]> wrote in
message
news:[email protected]...
> Thanks for your answer.
> I don't understand what does 'normal flow' mean.
> Joined, you will find a small program reproducing the
problem. The first
> div
> tag has the following parameters :
> position: absolute;
> height: auto;
> width: 100px;
> left: 10px;
> top: 10px;
> What must the parameters of the second div tag be to
float after the first
> one? Which menu of Dreamweaver should I use to define
those parameters.
> Thanks again for your help.
> Regards.
>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
> "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
> <div class="test">
> <html xmlns="
http://www.w3.org/1999/xhtml">
> <head>
> <meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1"
> />
> 
> <title>Document sans titre</title>
> 
>  
> <style type="text/css">
> 
> </style>
> </head>
>
> <body>
> <div class="test">Placez ici le contenu de class
"test"Placez ici le
> contenu de class "test"Placez ici le contenu de class
"test"</div>
> <div class="test1">Placez ici le contenu de class
"test1"</div>
> </body>
> </html>
> </div>
>

None editable Div tag within a editable Div tag template

I am using a template i created to build a website and the only editable Div is the 'Content'. Using this template i have created a 2nd template for a portfolio page. On my 2nd template i have a Div tag within the 'Content' Div tag with list of all the jobs i have done with hyperlinked to photos. I want this list to be only editable on the template so when i update the 2nd template rest of the files related to this template get updated.
Is it possible to have a none editable Div tag within an editable Div tag?
I hope i have explained this well. Many thanks for your help

Thank you for your respond.
I have a main template with just the 'Content' Div Tag editable. Using this template i created anyother template for my portfolio page. Inside the editable Div Tag i have another Div Tag with 2 sets of tables for my portfolio lists. I want this Div tag to be only editable through the 2nd template only as i will have portfolio lists of over 30 pages/links.
I selected the Div Tag with the 2 set of tables and selected 'Add Object to Library'. First message was that the CSS coding will not be copied but errors messages as follows;
'While executing canInspectSelectio in phatfusion slideShow_FAB75CA2.htm, a JavaScript error occurred.'
'While executing canInspectSelectio in Ken Burns Slideshow.htm, a JavaScript error occurred.'
'While executing canInspectSelectio in Shadowbox3b Gallery_2528933A.htm, a JavaScript error occurred.'
Everytime i click inside the Div Tag, i keep getting these messages.
I went to the library and amended the list but only the 2nd template changed, not the related pages linked to the 2nd template.
Is there a place where i can upload my page in this website so you can see it?
Please see below the coding for the 2nd template for my portfolio pages;
<!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" />
    <META NAME="robots" CONTENT="index, follow">
    <meta name="google-site-verification" content="a_way2ZMkNZuMTtOveF3o1bvtWsVMBQujbA5jw9i0Q0" />
    <META name="y_key" content="d38873598f3b3934" />

<title>???s</title>

<link href="../_css/main.css" rel="stylesheet" type="text/css" />

    <link href="../Galleria/galleria.css" rel="stylesheet" type="text/css" media="screen">
    <script type="text/javascript" src="../Galleria/jquery.min.js"></script>
    <script type="text/javascript" src="../Galleria/jquery.galleria-0.9.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){ $('ul.gallery_demo2').galleria({nextText:'Next portfolio item'}); }) // activates the gallery
    </script>
    <style media="screen,projection" type="text/css">
    p,.caption{
    font-size: 10px;
    color:#006;
    .demo2{
    position:relative;
    clear:both;
    background:black;
    width: 600px;
    .gallery_demo2{
    width: 600px;
    .gallery_demo2 li{
    width:68px;
    height:50px;
    border:thin solid #000;
    background:#111;
    padding-left: 5px;
    overflow: hidden;
    .gallery_demo2 li.active{
    border-color:#623;
    .gallery_demo2 li div{
    top:60px;
    left:0;
    border:3px solid #111;
    background:#111;
    .gallery_demo2 li img.thumb{
    opacity:.3;
    padding-left: 3px;
    .gallery_demo2 li.active img.thumb,.gallery_demo2 li:hover img.thumb{
    opacity:.99;
    </style>
    



<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
    background-color: #FFF;
    background-image: url(../_images/background.jpg);
</style>
</head>
<body>
<div class="container">
<div class="header">
    <div class="header2">
      <h4><strong>ARCHITECTURAL & STRUCTURAL ENGINEERING SERVICES<br />
        PROJECT MANAGEMENT & CONSTRUCTIONS</strong></h4>
    </div>
</div>
<div class="linkBar">
    <ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a href="index.html">HOME</a></li>
      <li><a href="about.html">ABOUT US</a></li>
      <li><a href="service.html" class="MenuBarItemSubmenu">SERVICES</a>
        <ul>
<li><a href="service.html">Overview</a></li>
<li><a href="planning.html">Planning Permission</a></li>
<li><a href="building.html">Building Regulations</a></li>
<li><a href="partywall.html">Party Wall Act</a></li>
          <li><a href="schedule.html">Schedule of Work</a></li>
          <li><a href="project.html">Project Management</a></li>
          <li><a href="structural.html">Structural Surveys</a></li>
        </ul>
      </li>
      <li><a href="portfolio.html">PORTFOLIO</a></li>
      <li><a href="contact.html">CONTACT US</a></li>
    </ul>
</div>

<div class="content">
    <h3>PORTFOLIO- website under construction</h3><div class="portfolioText">
      <h2 class="textSubHeading">Commercial</h2>
      <div class="portfolioCommercial">
        <table width="374" align="right">
          <tr>
            <td width="181" height="20">AA Partner Ltd</td>
            <td width="181" height="20">Railing London Ltd</td>
          </tr>
          <tr>
            <td height="20">Pemon Ltd</td>
            <td height="20"> </td>
          </tr>
          <tr>
            <td height="20"> </td>
            <td height="20"> </td>
          </tr>
          <tr>
            <td height="20"> </td>
            <td height="20"> </td>
          </tr>
          <tr>
            <td height="20"> </td>
            <td height="20"> </td>
          </tr>
          <tr>
            <td height="20"> </td>
            <td height="20"> </td>
          </tr>
          <tr>
            <td height="20"> </td>
            <td height="20"> </td>
          </tr>
          <tr>
            <td height="20"> </td>
            <td height="20"> </td>
          </tr>
          <tr>
            <td height="20"> </td>
            <td height="20">lhjffkhgkhg</td>
          </tr>
        </table>
</div>
      <h2 class="textSubHeading"><br />
      </h2>
      <h2 class="textSubHeading"> </h2>
      <h2 class="textSubHeading"> </h2>
      <h2 class="textSubHeading"> </h2>
      <h2 class="textSubHeading">Residential</h2>
      <div class="portfolioResidential">
        <table width="374" align="right">
          <tr>
            <td width="181" height="20">Batchworth Lane, <span dir="ltr">Northwood</span></td>
            <td width="181" height="20">Derrylands, Harrow</td>
          </tr>
          <tr>
            <td height="20">Pine Walk, Surrey</td>
            <td height="20"> </td>
          </tr>
          <tr>
            <td height="20"> </td>
            <td height="20"> </td>
          </tr>
          <tr>
            <td height="20"> </td>
            <td height="20"> </td>
          </tr>
          <tr>
            <td height="20"> </td>
            <td height="20"> </td>
          </tr>
          <tr>
            <td height="20"> </td>
            <td height="20"> </td>
          </tr>
          <tr>
            <td height="20"> </td>
            <td height="20"> </td>
          </tr>
          <tr>
            <td height="20">teytdytyt</td>
            <td height="20"> </td>
          </tr>
        </table>
</div>
    </div><div class="portfolioSlideshow">
      <p>Project Title Goes Here:</p>
      <div class="demo">
</div>
<div class="demo2">
<ul class="gallery_demo2">
    <li class="active"><img src="../_images/portfolio/planning.jpg" alt="Planning sample drawing" width="600" height="400"></li>
    <li><img src="../_images/portfolio/building.jpg" alt="Building Reg sample drawing" width="600" height="400"></li>
    <li><img src="../_images/portfolio/structural.jpg" alt="Structural sample drawing" width="600" height="400"></li>
    <li><img src="../_images/portfolio/fabrication.jpg" alt="Fabrication sample drawing" width="600" height="400"></li>
</ul>
</div>
    </div>
</div>

<div class="footer">
<table width="1025" border="0">
<tr>
    <td width="500"><h6>??? </h6></td>
    <td width="10"> </td>
    <td width="500" align="right"><h6>???</h6></td>
</tr>
</table>
</div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>

Noob question about DIV tags

Learning DW and CSS so patience is in order .
I've being reading numerous posts here and on the web about avoiding tables for laying out web pages. I can see the advantages in terms of cleaner codes and easiness of updating and changing sites at a later time. So I started learning about DIV tags (although tables is very easy for me) and have practice a few times with fairly good results, love the absolute positioning with it. Having said that, for the love of me, can't find a way of centering horizontally a page designed with DIV tags (due to ignorance), for example, 1 column/three rows page, after defining styles, size and colors I enclosed everything in another DIV tag, wrapper I think is called, but have not found a way of centering it on the page, text-aligment on the DIV tag only centers the text not the DIV itself, how to go about this? Help is appreciated.

love the absolute positioning with it.
Get over it. It's a trojan horse. Absolute positioning is not a general layout method.
To center ANY block (non-absolutely positioned) element, use CSS to give it a width and left/right margins of 'auto'. For example -
<div id="foo">...</div>
That div will be centered with this CSS -
#foo { width:300px; margin:0 auto; }
I think you are on the wrong path already, though. Stick with tables (which you say are very easy for you) UNTIL you a) understand CSS well enough to understand what absolute positioning is and why I say it's bad, and b) understand how to use float, margin, and padding to place things on the page. Then you are ready to move away from tables.

Why aren't my CSS and div tag boxes displaying the background images I'm plugging in?

I'm using the CSS dialog boxes to places images via the background image option into my dreamweaver site. Everything looks fine in dreamweaver but when I view it any of the browsers, two of the images I've place as div tag background images don't work....the overal background image of the site works, but these don't show up ....
here's my code if it helps to answer
<!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>Main</title>
<style type="text/css">
body {
background-image: url(images/realgrade.jpg);
background-repeat: repeat-x;
text-align: center;
html, body {
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-top: 0px;
padding-top: 25px;
#wrapper {
width: 930px;
text-align: left;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
position: relative;
background-image: url(file:///Macintosh%20HD/Users/jimmymoreira/Unnamed%20Site%204/images/possible%20image. jpg);
background-repeat: no-repeat;
#header {
height: 192px;
width: 237px;
background-image: url(images/logo_fill.jpg);
background-repeat: no-repeat;
position: absolute;
left: 35px;
top: -25px;
#mainNav {
background-color: #33F;
height: 200px;
width: 272px;
float: left;
margin-top: 233px;
#maincontent {
height: 600px;
width: 608px;
float: right;
margin-bottom: 45px;
padding-right: 25px;
background-repeat: no-repeat;
background-position: center 270px;
background-image: url(file:///Macintosh%20HD/Users/jimmymoreira/Unnamed%20Site%204/images/opaqueMaincontent .png);
#sidebar {
background-color: #F36;
height: 250px;
width: 272px;
clear: left;
float: left;
#footer {
height: 525px;
width: 870px;
clear: both;
padding-top: 45px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 30px;
background-image: url(images/footer_image.jpg);
background-repeat: no-repeat;
margin-top: 45px;
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
    <p> </p>
    <p> </p>
    <p> </p>
</div>
<div id="mainNav">
<p> </p>
</div>
<div id="maincontent"></div>
<div id="sidebar"></div>
<div id="footer"></div>
</div>
</body>
</html>
here's what I'm going for
here's what I'm getting in the browser
Please help!

Your image files are pointing to your hard drive, not your server. You have this
background-image: url(file:///Macintosh%20HD/Users/jimmymoreira/Unnamed%20Site%204/imag es/opaqueMaincontent.png);
and you should have this
background-image: url(imag es/opaqueMaincontent.png);
Also, is your images file named imag es?
Gary

Help with floating a Div tag?

I am having difficulty properly floating a div tag in my site. The page is http://www.planetwhistler.com/bandbs.html The Div on the bottom of the second column with 'content for right_bandb_div' goes here will not properly float to the right of the Div to the left of it. I have floated the 'right_bandb_' div to the left with enough of a margin to clear the div tag in the first column, I have also put the code for 'right_bandb' before the code for the div to the left of it but for some reason it won't properly place itself. Thanks for any help provided.

I realize my Template isn't exactly like yours, but you can learn from it.
http://alt-web.com/TEMPLATES/CSS-centered-round-boxes.shtml
1) apply min-height values to all your .boxes.
2) add a float clearing between rows.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Search function in DW to flag stray /div tags?

This seems like a very basic question, but searching the site, the discussion threads, and the FAQs didn't produce any answers. Does Dreamweaver have a search function -- or an alternative Validate function for CSS -- to pick up stray </div> tags? I've got a page with one </div> too many or too few, doubtless due to a slight selection oversight on a copy/paste I made from another source. The page is rendering with elements flopping into the wrong places, or disapperaing entirely, so I'm sure it's an odd </div> somewhere; but I'm just not up to eyeballing 500 lines of code right now, trying to figure out where there's an imbalance in <div> and </div> pairs. It seems like a natural job for automation. Thanks.

Use the W3C Validation tools.
HTML - http://validator.w3.org/
I find it helps to insert HTML comments around Divisions.

<div id="DivName>

</div>
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Wrapping a div tag

I'm trying to wrap a div tag and place the smaller tag at the bottom left of the original tag. I can get it in the upper left corner. How do I bring it down to the bottom of the page?

Mini-tutorial on wrapping a div tag
Change this - <div>...</div>
to this - <div><div>...</div></div>
Honestly, we have no idea what you are asking or trying to achieve. Can you help?

Put a div tag on EBS HomePage

I want to put a div tag on the HomePage of EBS. The applications menu can get long and by request of client if possible to put the scroll bars on the menus, but not scroll on the browser so as to see his favorites all the time.
I've read the UIX Developer's Guide and in one section, there was an example on how to mix html code and uix code. The example was about putting a div tag and just supplying the namespace for HTML.
I copied the HomePG.xml from the server, edited it by adding the div tag, and then copy the edited version back to the server. My update doesnt reflect in the browser
I copied and replace /data/erpp/erppappl/fnd/11.5.0/mds/framework/navigate/webui/HomePG.xml
what am i doing wrong? is this really possible in the first place? haven't upgraded the server to 11.5.10 yet... or do i have to recompile?

Typically, a background image is placed in a division's CSS code.
See example below: (view source in browser to see the CSS and HTML code)
http://alt-web.com/DEMOS/fixed-background.shtml
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com

Ap Div Tag Problem

OK so this is my first wbesite in dreamweaver so and i ran into a problem....i made a AP div tag but i can get it where i want it.....my backrground is center in the website and i put my nav links in a AP div tag so i could then put them in a certain area where i wanted.(i think is the only way i know hjow to do this) Well how can i get them centered left and right in the website but the top and bottom i want to place by hand???? they are where they need to be when i preview it in the browser but in the dreamweaver file they are down and to the right......i had to keep messing with it and previewin it until it showed up where i wanted it to in the browser. Im sure i have a setting worng either in my CSS or html.... Please help!

First rule of web design is to stop thinking like a graphic or print designer. Web pages need to be flexible to perform well on different devices, browsers, user settings, screen and text sizes. And web designers have almost no control over these user-centric variables.
The second rule of web design, you cannot precisely position text or other elements on top of big background image and expect it to stick. It just doesn't work.
http://alt-web.com/Backgrounds.shtml
If your navigation bar requires a background, it should be separate from the page background. You'll need to use solid colors or create image slices for your nav bar in your graphics editor.
Third rule, use default CSS positioning (which is no positioning at all). Align objects with CSS margins, padding and floats.
Basic CSS Layout. (No APDivs used, no animals were harmed)
http://alt-web.com/TEMPLATES/Basic-1-col-fixed.html
Also read this tutorial:
Taking a Fireworks (or Photoshop) comp to a CSS based layout in DW
http://www.adobe.com/devnet/fireworks/articles/web_standards_layouts_pt1.html
Good luck with your project!
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

Removing Line between Div tags

Hi all. I am new to this forum - have just started using DIV Tags and am getting a bit messed up!! I have a simple web page that has 2 DIV statements - on loads a menu bar I have created in Fireworks and is rihgt justified, the other is a header that contains an image and is centred. I have specified a coloured page background. Trouble is, I have a line between my two div tags that shows the background colour! I just cant get rid of it - I have tried the "Display - Inline" but that doesn't work. I have tried "Float Left" and "Right" - no-good. I dont know what to do! It could be that I am using these commands in the wrong place? There seems to be quite a lot of stuff on the net about this issue but I cant get any of the solutions to work for me. Please can anyone help?
Here is an example of my 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>
<style type="text/css">
body {
background-color: #C90;
.menu {
BACKGROUND: #000000;
.header {
BACKGROUND: #000000;
</style>
</head>
<body>
<DIV class=menu align="right" >
<P> </P>
<P> </P>
</DIV>
<DIV class=header align= "center">
<P> </P>
<P> </P>
<P> </P>
</DIV>
</body>
</html>

This is invalid markup.
     <DIV class=menu align="right" >
     </DIV>
     <DIV class=header align= "center">
     </DIV>
CSS should look like this:
body {
margin:0;
padding:0;
background: #C90;
color: #000;
#wrapper {
width: 970px; /**some value in px, % or ems**/
margin: 0 auto; /**with width, this centers page**/
background: #FFF;
border: 2px solid #000;
#menu {
background: #000;
text-align:right;
margin:0;
padding:0;
#header {
background: #000;
width: 970px;
margin:0 auto;
padding:0;
Then add the relevant selector ID (or .class) to your markup like so.
<body>
<div id="wrapper>
<div id="menu">
your menu code here
</div>
<div id="header">
your header here
</div>
<p>your content goes here<p>
 </div>
</body>
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

DIV tags disappear when put over swf file background

I am working on a site which has a swf movie as a background
which fills the browser window(SWFobject). When I place DIV tags,
which reference a CSS id and contain swf files as well, over the
top (for absolute positioning, etc.) they disappear when previewed
in a browser . Is there a reason that the swfobject always takes on
top position in the browser? Do I need to change something in the
SWFoject javascript file, in the code or within either the CSS file
or the dreamweaver HTML code? Here is a link to a site that is very
similar to what I am working on.
http://www.pronghornclub.com
Any help would be most appreciated.

All Active content on a page will always rise to the top, so
to speak,
including Flash, certain form elements, Java applets, and
Active X controls.
This means that each of these will poke through layers. There
is not a good
cross-browser/platform reliable way to solve this issue, but
if you can be
confident in your visitors using IE 5+ or NN6+, then you can
use the Flash
wmode parameter (however, Safari does not support this
properly!).
Adobe articles:
http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=tn_15523
http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=tn_14201
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"jlrowedog" <[email protected]> wrote in
message
news:fb53q0$akk$[email protected]..
>I am working on a site which has a swf movie as a
background which fills
>the
> browser window(SWFobject). When I place DIV tags, which
reference a CSS
> id,
> over the top (for absolute positioning, etc.) they
disappear when
> previewed in
> a browser. Is there a reason that the swf file always
takes on top
> position in
> the browser? Do I need to change something in the
SWFoject javascript
> file, in
> the code or within either the CSS file or the
dreamweaver HTML code? Here
> is a
> link to a site that is very similar to what I am working
on.
>
>
http://www.pronghornclub.com
>
> Any help would be most appreciated.
>
>
>

Div tags and text decorations

Hello,
Is there a way to control the a:link text decoration/color within a div tag? It seems as thought the Page Props is the only place, hence controlling everything on the page.
Thank you!!!!!!

Okay so I go to a doctor's aqppointment and look at all the action on this thread.
Just to flesh this out a bit more.
I'd only add one other thing you may not be aware of (not you Murray, rather Esther). You can also have links appear different based on the part of the page they are on. If you have a div, as one example, on the page, you can style all the links in that div, to which you have applied an id="oneID" thusly:
div#oneID a:link {
     color:red;
     text-decoration:none;
     border-bottom: dotted 1px green;
and in another part of the page, say in an unordered list with an id="anotherID":
ul#anotherID a:link{
     color:blue;
     text-decoration:overline;
And of course Murray, you were correct, as usual, in divining the OP's query.
E. Michael Brandt
www.divahtml.com
www.divahtml.com/products/scripts_dreamweaver_extensions.php
Standards-compliant scripts and Dreamweaver Extensions
www.valleywebdesigns.com/vwd_Vdw.asp
JustSo PictureWindow
JustSo PhotoAlbum, et alia

Div tag placement error

Similar Messages

Maybe you are looking for