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">
<!--
.test {
width: 100px;
.test1 {
width: 120px;
-->
</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"
> />
> <!-- TemplateBeginEditable name="doctitle" -->
> <title>Document sans titre</title>
> <!-- TemplateEndEditable -->
> <!-- TemplateBeginEditable name="head" --> <!--
TemplateEndEditable -->
> <style type="text/css">
> <!--
> .test {
> position: absolute;
> height: auto;
> width: 100px;
> left: 10px;
> top: 10px;
> }
> .test1 {
> position: static;
> width: 120px;
> }
> -->
> </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>
>

Similar Messages

  • Problems with ap div tags

    Hi I am currently working on a website for a school assignment and I have almost gotten my site done, however when I preview it ic the browser and then I maximize the the webpage moves but the ap div tags I have dont move with the rest of the page. Is there something that I can do about this? Any help would be greatly appreciated
    Thanks Tanya

    No.  You're much better off using default CSS positioning which is none or static along with margins, padding and floats to align page elements.   Tables are strictly for tabular data (spreadsheets, data sets).
    If you're short on time, open one of the starter pages that comes with Dreamweaver.
    File > New > Blank > HTML > Layout...  1 or 2-col, fixed, centered...   This will serve as a framework you can drop your content and images into.
    Good luck,
    Nancy O.

  • 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

  • Nested div tags "Design View" problem

    I have had ongoing problems using nested div tags to layout
    my page. The page displays correct in browser but does not display
    properly in Dreamweaver Design View. Highlighting the CSS id in
    Code View shows the correct groupings. The code also passed the
    validator test.
    I am fairly new at Dreamweaver so I could be missing
    something basic.
    Code is displayed at
    http://www.mektronix-net.campusbizcenter.com/

    I've not see this before, so can't say why it would be happening.  Would the pc be low on resources?  but then again you say it happened even after a restart of the pc.
    Maybe you could try the file cache and the personal configuration folder fix to see if it fixes any issues.
    http://forums.adobe.com/thread/417116#cache
    PS:  While I'm at it, it would be wrong for me to point out that using AP divs is not the optimum way to create a layout....  unless you know the repercussions of using them.
    Here's why:  (from the Dreamweaver FAQ)
    http://forums.adobe.com/thread/477969

  • 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.
    >
    >
    >

  • 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

  • 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>
    <!-- end .navMain --></div>
    <!-- end .header --></div>
    <div class="content">
    <!--carousel-->
    <iframe src="http://www.sbaisden.com/carousel.html" scrolling="auto"></iframe>
    <!--end carousel-->
    <div id="LearnMore">
    <p><a href="#">LEARN MORE</a></p>
    <!--end LearnMore-->
    </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>
    <!--end leftCol--></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>
    <!-- end .greeting --></div>
    <div class="bottom">
    <p>***Certain pages of this site are still "under construction". Please check back for future developments.***</p>
    <!--end bottom--></div>
    <!--end .content--></div>
    <div class="footer">
    <p>Copyright © 2012 Steve Baisden</p>
    <!--end .footer--></div>
    <!--end container--></div>
    </body>
    </html>
    Nancy O.

  • Div tags problem on centered layout

    Like the title says, I'm working on a centered layout and I
    need to place a div tag that has an overflow for scrolling. The
    problem is what do I do so that it does just that. I tried using an
    AP div tag but it doesn't follow the rest of the layout if you play
    with the browser width. And if I simply put a div tag in my table,
    I don't know how to put an overflow on it. I only have a limited
    amount of space for the text, and I have too much text to simply
    put it in the table. It's my first time working on a centered
    layout, so I'm kind of at a lost right now. And that's the only
    thing stopping me from putting it online.

    > And if I simply put a div tag in
    > my table, I don't know how to put an overflow on it.
    <div style="overflow:scroll">
    > I only have a limited
    > amount of space for the text, and I have too much text
    to simply put it in
    > the
    > table.
    If that's the case, then you have a broken layout scheme, and
    a usability
    problem.
    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
    ==================
    "cprime" <[email protected]> wrote in
    message
    news:g6n78v$qmn$[email protected]..
    > Like the title says, I'm working on a centered layout
    and I need to place
    > a div
    > tag that has an overflow for scrolling. The problem is
    what do I do so
    > that it
    > does just that. I tried using an AP div tag but it
    doesn't follow the rest
    > of
    > the layout if you play with the browser width. And if I
    simply put a div
    > tag in
    > my table, I don't know how to put an overflow on it. I
    only have a limited
    > amount of space for the text, and I have too much text
    to simply put it in
    > the
    > table. It's my first time working on a centered layout,
    so I'm kind of at
    > a
    > lost right now. And that's the only thing stopping me
    from putting it
    > online.
    >

  • HTML or PHP visibility div tag problem in IE

    Hi,
    I have a PHP search function on a travel site a programmer
    did for me. When you look at it in FF and Safari, it looks fine.
    But in IE, there is a big blank space where the calendar function
    goes. He has the div tag set to visibility:hidden. Any ideas how to
    make it look right in IE as well?? Any help would be appreciated!
    The PHP code is below:
    He thinks the problem is here in this part of the code:
    <div id="kalendar" style="visibility:hidden; width:0px;
    height:0px; border:0;">
    //then goes some tables
    </div>
    Any help would be much appreciated...we are stumped!
    Thanks

    >
    http://www.bluehippotravel.com/surfingvacations
    404 on that link.
    > Does this tell you anything?
    Unfortunately, yes. The person who coded this has no sense of
    best practice
    in HTML authoring....
    I'd like to see the page in the wild if I could - can you
    investigate the
    404, please?
    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
    ==================
    "Lvanhoff" <[email protected]> wrote in
    message
    news:[email protected]...
    > Murray,
    > As always you are a genius :-)
    >
    > The only problem I still have, and only in IE, not FF,
    is that the drop
    > down
    > menus are cutting part of themselves off...any idea why?
    >
    http://www.bluehippotravel.com/surfingvacations
    > Top left...see how the arrows are cut off on the drop
    downs?
    >
    > Not sure if its ok to post to page??
    >
    > I didn't do this part of the page...so not sure how it
    was done...
    > Does this tell you anything?
    >
    > <table bgcolor="#f7ebb3" class="search"
    style="table-layout: fixed;
    > padding:0px" border="0">
    > <tr><td colspan="4" width="auto">
    > <select size="1" class="search" id="country"
    > onchange="javascript:listajzemlje(this.value)">
    > <?php
    > drzave();
    > ?>
    > </select>
    > </td></tr>
    > <tr><td colspan="4" width="auto">
    > <div id="state1">
    > <input type="hidden" id="state" value="" >
    > <input type="hidden" id="city" value="" >
    >
    > </div></td></tr>
    > <tr>
    >
    >
    > <td colspan="4" width="auto">
    > <input class="search" id="hotel" name="hotel" value="
    Hotel name
    > (optional)" />
    >
    >
    >
    > <tr><td colspan="4" style="cursor:pointer;"
    onClick="showKalendar()"
    > class="search" >
    >
    > <img class="search"
    src="images/btn-hotelmenu-searchbydate.jpg"
    > alt="Search by
    > date (optional) ">
    > </td></tr>
    > <tr><td colspan="4">
    > <div id="kalendar" style="display:none; width:0px;
    height:0px;
    > border:0;layout:fixed">
    >
    > <table border="0" class="submenucolor" align="center"
    width="auto">
    >
    > <tr>
    > <td></td><td></td>
    > <td class="HotelSearchMenu" colspan="2"
    align="right">In:<?
    > $aCalendarParams=array(
    > "sIconPath" => "./img/calendar.png",
    > "iAction" => 1, //0=>reloadCurrentPage with get
    param sDate,
    > 1=>fill
    > field sFieldName
    > "sFieldName" => "DPC_date1",
    > "iStyle" => 1, //0=>display calendar,
    1=>display div on icon
    > click
    > "aMonthNames" => $aMonthNames["EN"],
    > "aDaysNames" => $aDaysNames["EN"],
    > "sDateFormat" => $sDateFormat["EN"]
    >
    > );
    > new oCalendarPicker("calFixe1",$sDate,$aCalendarParams);
    > ?></td>
    >
    >
    >
    >
    >
    > </tr>
    >
    >
    > Thanks!
    >

  • 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?
    >

  • Div tag viewing problem

    When I wrap a div tag around an image - I don't see that
    image in the "designer view"
    I do see it when I look at it in a browser.
    Isn't there some way that I should be able to see the image
    in the designer view?

    Hmm - I must admit, I've never had this problem. Can you tell
    me exactly
    what you are doing, please?
    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
    ==================
    "jfsneumann" <[email protected]> wrote in
    message
    news:ebarml$517$[email protected]..
    > When I wrap a div tag around an image - I don't see that
    image in the
    > "designer
    > view"
    >
    > I do see it when I look at it in a browser.
    >
    > Isn't there some way that I should be able to see the
    image in the
    > designer
    > view?
    >

  • Applet Over DIV tag problem

    Hi,
    we are using Div tag along wth applet. While loading we want to freeze the screen. so we set width and height for DIV tag. All textboxes and other thngs are going behind the DIV but not working for applets like Browser, Grid. Applets are coming over the DIV tag when freezing. We set the high Z index forApplet div and low for freezing DIV and also tried in reverse. But it is not working..
    How to solve this problem?
    Regards,
    Senthil

    The problem is that applets are not part of the DOM.   This is why most commonly; iframes are used whenever you need to "dynamically" need to manipulate a MII applet.   You may be better off using an XSLT style sheet transform or AJAX / Javascript framework so that you can more precisely control your grids.
    Some people have tried using OBJECT tags instead of APPLET but I haven't heard of much success in this route.

  • Image Map in a div tag causing problems in webpage

    I have an image map in a div tag (I'm using Dreamweaver so
    I've place hot spots on a gif within a div tag). When I preview in
    a browser the hot spots are creating an empty space between the
    image and the div tag below it, which there shouldn't be. Prior to
    this I had done the same thing but using layers instead of div tags
    and it was fine... there was no unwanted space. What am I doing
    wrong?

    Hi lauren,
    I tried to replicate the above mentioned issue, but did not get the <div> around the image in Webhelp output. Would it be possible for you to provide more information on this:
    At what point does the <div> start appearing around the image, as soon as the CBT expression is applied?
    If yes, what is the expression?
    What happens when expression is set to None again and individual CBT is under application
    Is there a spacing or the CBT text just follows the inline image?
    Please send us a sample file for the same, if possible. Thanks!
    Amit

  • Problem with Flash in a Hide/Show Div Tag

    What is the best way to handle Flash files on an HTML page
    within a <div> tag you hide and show (via javascript). It
    seems to reload when you hide and then show the <div> tag
    when using display: block.
    Positioning instead (move offscreen)?
    Visibility?
    Other?

    I would say off-screen is going to give you the best
    cross-platform performance. I've found visibility show/hide
    prevents the swf from working in IE while hidden much like you
    alluded to. Of course in mozilla browsers hide doesn't behave the
    same way.

  • Div tag problem

    Hi there,
    i am creating a website.i seem to be having a bit of trouble with div tag...i think.the navigation bar and the main content seem to be overlapping each other.any ideas?id appreciated any help.
    thanks.
    <body>
    <div id="header">Heading</div>
    <div id = "nav">
    <ul id="Fyp">
      <li><a href="html/Index.html">Home</a>  </li>
      <li><a href="html/Conventional.html">Conventional Encryption</a></li>
      <li><a href="#">Public Key Encryption</a>
        <ul>
      <li><a href="html/PublicKey-Confidentiality.html">PublicKey-Confidentiality</a></li>
      <li><a href="html/PublicKey-Authentication.html">PublicKey-Authentication</a></li>
      <li><a href="html/Public Key-Confidentiality and Authentication.html">Public Key-Confidentiality and Authentication</a></li>
        </ul>
      </li>
      <li><a href="#">MAC Encryption</a>
        <ul>
      <li><a href="#">MAC - Message Authentication</a></li>
         <li><a href="#">Message Authentication and Confidentiality (Plaintext)</a></li>
         <li><a href="#">Message Authentication and Confidentiality(Ciphertext)</a></li>
    </ul>
      </li>
       <li><a href="#">HASH Encryption</a>
           <ul>
                <li><a href="#">Encryption after Concatenation</a></li>
                <li><a href="#">Encryption before Concatenation</a></li>
                  <li><a href="#">Authentication</a></li>
                <li><a href="#">Authentication and Confidentiality</a></li>
               <li><a href="#">Secret Value</a></li>
              <li><a href="#">Secret Value and Encryption</a></li>
         </ul>
        </li>
       <li><a href="#">Self Test</a></li>
    </ul>
    </div>
    <div id="main_content">
    <p> </p>
    <p>This is the home page for Message Authentication and Digital Signatures.This page will explain the funamental basis of these elements.</p>
    <p> </p>
    <p><strong>Authentication</strong>:</p>
    <p><a name="#Authtentication"></a> 
    The Authentication service is concerned with assuring that a communication is authentic. Authentication acts as an warning or a alarm signal. The function of the authentication service is to assure the recipient that he message is from the source that it calms to be from.</p>
    <p> </p>
    <p><strong>Confidentiality</strong>:</p>
    <p><a name = "Confidenitiality"></a>
      Confidentiality is the protection of transmitted data from passive attacks. This makes sure that the message sent can not be read by anyboby except for the intended recipient  .
    </p>
    <p> </p>
    <p><strong>Public Key:</strong></p>
    <p><a name = "Public Key"></a>
    </p>
    <p><strong>Digital Signature:</strong>
    <p><a name = "Digital Signature"></a></p>
    </p>
    <p><strong>Integrity:</strong>
    <p><a name = "Integrity"></a> </p>
    <p><strong>MAC Function:</strong></p>
      <p><a name = "MAC"></a> </p>
    <p>A MAC (Message Authentication Code) is a small fixed size block of data that is appended to the message. The technique assumes hat two communicating parties say (Source A and B) share a common secret key(k). When A sends a message to B, it calculates the MAC as a function of the message and the key. The recipient performs the same calculation on the received message using the same key, to generate a new MAC. The received MAC and the calculated MAC are then compared. If the received MAC matches the calculated MAC, then the message is said to be authentic.</p>
    </p>
    </div>
    <div id="footer">
    <p>
    Footer - all about the designer and contact links go here
    </p>
    </div>
    </body>
    </html>

    Here ya go.
    body {
      margin:0px;
      padding:0px;
      text-align:center;
      font-size:1.0em;
      font-family:trebuchet ms, tahoma, arial, sans-serif;
    #container {
    text-align:left;
    margin:0px;
    width:1270px;
    border:1px black solid;
    padding: 0px;
    #header  {
    text-align:center;
    width:1270px;
    #width:1022px;
    height:100px;
    font-size:2.0em;
    background-color:white;
    color:white;
    padding-top:0px;
    padding-right:0px;
    border-bottom:1px black solid;
    #nav {
      width:1270px;
      #width:1270px;
      height:24px;
      font-size:0.8em;
      background-color:#20548E;
      color:black;
      border-bottom:1px black solid;
    #main_content {
      width:1270px;
      #width:1022px;
      font-size:0.9em;
      background-color:white;
      color:black;
      border-bottom:1px black solid;
    #footer {
      text-align:center;
      width:1270px;
      #width:1022px;
      height:100px;
      font-size:1.0em;
      background-color:#20548E;
      color:white;
      border-bottom:1px black solid;
    #Fyp
    { margin: 0;
         padding: 0;
    #Fyp li
    { float: left;
      list-style: none;
      font: 12px Tahoma, Arial;
    #Fyp li a
    { display: block;
      background: #20548E;
      padding: 5px 12px;
      text-decoration: none;
      border-right: 1px solid white;
      width: 140px;
      color: #EAFFED;
      white-space: nowrap;
    #Fyp li a:hover
    { background: #1A4473;
      #Fyp li ul
      { margin: 0;
       padding: 0;
       position: absolute;
       visibility: hidden;
       border-top: 1px solid white;
      #Fyp li ul li
      { float: none;
       display: inline;
      #Fyp li ul li a
      { width: auto;
       background: #9F1B1B;
      #Fyp li ul li a:hover
      { background: #7F1616;

Maybe you are looking for