Positioning of child div within parent div

Hello Everyone,
I have several divs sat within divs that contain information that can only be viewed entirely when clicked on. (please see 'why choose us' section on site below) As you can see when the "read more" link is selected on this category, the rest of the information appears across the page, which is great BUT each sub category is nested within rows so that, for example when the 'funeral services' category is selected, currently the information is forced to sit to the right of the screen as the rows dictate. So what i would like to know, is there a way of getting each of these category divs to sit central across the page regardless of position within the parent div?
CSS used for child div
#funeralServ{
    width:1200px;
    background-color:#ccccff;
    padding-left: 4px;
    padding-right: 4px;
    position:absolute;
    z-index:1000;
http://www.clockdoctors.co.uk/test/#funeralServices

Actually, osgood_'s idea is the better one, i.e. using Bootstrap.
Copy and paste the following into a new document and view in your favourite browser.
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>Untitled Document</title>
<link type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-xs-12">
            <h2>Heading</h2>
            <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
            <!-- Trigger the modal with a button -->
            <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
        </div>
    </div>
</div>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>

Similar Messages

  • Draggable div inside "parent" div

    Hi,
    Newbie in Edge Animate and needing some help with draggable items..
    So here's the problem:
    I'm doing some kind of "map-application" and I want to do draggable "map"-div into div (the map-div is larger than the "upper" div - so this "upper" div should identify this lower's "map"-div edges).
    This map-div contain map-image including some text elements and some actions.
    I have tried to do this with jQuery draggable-function and added that containment-definition, but it won't work properly ( I think that syntax was incorrect also.. )
    I found awesome jQuery-function draggable_background.  That works perfectly, BUT I need same function for div-element not background-image..
    I hope you get the point.
    Have anyone ideas or maybe even complete solution for my problem?
    PS. This map should also work with touchable devices.
    -Mariian-

    Hi,
    here is some screenshots of my work. Are these big enough?
    And that warning-sign is telling that my picture is larger than 1024 px and so on..I will reduce that image..
    -Mariian-

  • IE6 child div expands width of parent div

    I have a problem that has been vexing me...hopefully someone can answer it.
    I want to have a child div expand to overlap the div next to it. It is for a calendar so that all day events that stretch for multiple days can stretch over and cover multiple days.
    In IE6, the child div expands the width of the parent div and wrecks my display. The "proper" way that FF, Safari, and IE 7 & 8 do is that the child div will overlay the parent. The parent div's width remains unchanged, no matter what the width of the child is. IE6 incorrectly expands the width of the parent div to match that of the child div.
    I've set up a small example so you can see the difference. Check it out in FF and then in IE 6. Notice that in IE6 the "parent" div is too wide. In FF it looks fine.
    Any way to get IE6 to behave like FF in this case?
    Thanks!
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Div Test</title>
    <style type="text/css">
    <!--
    .parent {
         width: 200px;
         background-color: #FFC;
         border: 1px solid #000;
         float: left;
    .child {
         width: 300px;
         background-color: #CAEDFF;
         border: 1px solid #000;
         z-index: 20;
         position: relative;
    -->
    </style>
    </head>
    <body>
        <div class="parent">
        Parent Content
        </div>
        <div class="parent">
        Parent Content
        </div>
        <br>
        <br>
        <div class="parent">
          <div class="child">Child Content</div>
        </div>
        <div class="parent">
        Parent Content
        </div>
    </body>
    </html>

    I see now you posted your code.  Thanks.
    For best cross browser results, the floated container needs to be wide enough to accomodate everything inside it. Some browsers will resize others won't.   For another approach see my code.  This uses a disjointed rollover method.
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Div Test</title>
    <style type="text/css">
    .parent {
         padding: 8px;
         width: 200px;
         background-color: #FFC;
         border: 1px solid #000;
         float: left;
    /**formerly know as .child**/
    .parent a span {
         width: 300px;
         padding: 10px;
         background-color: #CAEDFF;
         border: 1px solid #000;
         position:absolute;
         top:55px; /**adjust as required**/
         left:55px; /**adjust as required**/
         display:block;
         visibility:hidden;
    .parent a:hover span,
    .parent a:active span,
    .parent a:focus span {visibility:visible}
    .parent a:hover,
    .parent a:active,
    .parent a:focus {text-decoration:none; visibility:visible;}
    </style>
    </head>
    <body>
    <div class="parent">
    <p>Parent content</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis purus. </p>
    <a href="http://alt-web.com/DEMOS/CSS-Disjointed-Text-Rollover.shtml">Link to Child Layer<span>Child Content renamed to <strong>.parent span</strong>.  Content inside the span tag is absolutely positioned. <br>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis purus.</span></a>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis purus. </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis purus. </p>
    </div> <!--end parent -->
    </body>
    </html>
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists
    http://alt-web.com/
    http://twitter.com/altweb
    http://alt-web.blogspot.com

  • Centering a Horizontal CSS only, jQuery, or Spry navigation bar within a Div

    Hello all.  I need a solution for centering a horizontal style nav bar whether it be css only, jQuery or Spry based.  I've been trying to use widgets from the adobe widget browser or other ones I've been able to find online.  I have been able to get the graphic that goes behind the links to span the entire width of the Div, but I can't move the actual links to the center of the screen and get it to stay in the middle like the rest of the elements do when you resize the page.  The links always stay anchored to the left side of the page.  I've been able to move them all the way to the right side of the page through a certain css change, but that is not what I'm looking for.  Do I need to resize the Div, or add a div within the div?  Do I need to split the horizontal width of the single div into three div's and put the nav bar into the middle one?  If that is the solution, how do I add the div's next to each other, I tried  adding a div within the div, but nothing really appears to show up, so that must essentially be a wrong way of going about it.
    Well anyways, I need some advice, somebody please lead me in the right direction on how to get this right.  In the div above the one I'm trying to make this happen in, I have a flash object and it just centers itself perfectly with the div and moves with the rest of the page fluidly when you resize.  And the same goes for a div right above that which contains the company logo.
    Thanks for help in advance.

    This is what I mean by the dotted lines not lining up evenly at the ends.
    Here is the source code for the page, followed by the css:
    <!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 name="description" content="Common Wealth Web Solutions: Web Development, Graphic Design, Media Consultant, Community Engagement" />
    <meta name="keywords" content="Common,Wealth,Web,Solution,Design,Graphic,Development,Interactivity,services,fla sh,php,javascript,ajax,professional,Caleb Wright, Peter Wallis,artist,video,multimedia,production,search engine optimization,SEO,video production design" />
    <meta http-equiv="Content-Type" content="text
    /html; charset=UTF-8" />
    <title>Common Wealth Web Solutions: Web Development, Graphic Design, Media Consultation, Community Engagement</title>
    <link href="stylesMain.css" rel="stylesheet" type="text/css" />
    <!--[if lt IE 7]>
    <link rel="stylesheet" type="text/css" href="PNGfix.css" />
    <![endif]-->
    <!--[if lte IE 7]>
    <style type="text/css">
    #hornav ul li { padding: 0 0 0 10px; }
    </style>
    <![endif]-->
    <!--[if lte IE 6]>
    <style type="text/css">
    #wrapper-body, #wrapper-1, #wrapper-2, #wrapper-3 { height: 1%; }
    </style>
    <![endif]-->
    <script type="text/javascript" src="scripts.js"></script>
    <script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
    <style type="text/css">
    #apDiv1 {
        position:absolute;
        width:1844px;
        height:43px;
        z-index:1;
        left: 64px;
        top: 253px;
    body {
        background-color: #FFF;
    </style>
    <link href="SpryAssets/SpryAccordion_flexible.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    a:link {
        color: #00F;
    </style>
    <style type="text/css">
    #menu {
    width: 700px;
    margin: 0 auto;
    #menu ul {
    padding: 0;
    margin: 0;
    text-align:center;
    list-style:none
    #menu li{
    padding: 0;
    margin: 0;
    display:inline;
    margin-right: -2px;
    #menu a {
    background-color:#66F;
    padding: 6px 15px;
    color: #fff;
    text-decoration: none;
    #menu a:hover {
    background-color:#39C;
    </style>
    <script type="text/javascript">
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-3119473-5']);
      _gaq.push(['_setDomainName', 'none']);
      _gaq.push(['_setAllowLinker', true]);
      _gaq.push(['_trackPageview']);
      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    </script>
    <script type="text/javascript">
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-3119473-6']);
      _gaq.push(['_setDomainName', 'none']);
      _gaq.push(['_setAllowLinker', true]);
      _gaq.push(['_trackPageview']);
      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    </script>
    <link href="CSSOnlyMenu4/css/menu4.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    /* BeginOAWidget_Instance_2141545: #OAWidget */
    #menu4 ul {
        font-family: Verdana, Geneva, sans-serif;
        font-size: 30px;
        letter-spacing: -3px;
        border-top:5px dotted #003399;
        border-bottom:5px dotted #003399;
        margin:20px;
    #menu4 ul li a{
        color: #003399;
        padding: 10px 5px 10px 10px;
        width: 170px;
    #menu4 ul li a:hover span.title{
        color:#00adef;
    #menu4 ul li a span.text{
        font-family: Georgia, serif;
        font-size: 13px;
        color:#c7e7f3;
    /* EndOAWidget_Instance_2141545 */
    </style>
    <script type="text/xml">
    <!--
    <oa:widgets>
      <oa:widget wid="2141545" binding="#OAWidget" />
    </oa:widgets>
    -->
    </script>
    </head>
    <body>
    <div id="wrapper-body">
      <div id="wrapper-1">
        <div id="branding">
          <h1>
          <div>
            <p><img src="images/lorentzpaintinglogo_cropped2.png" width="317" height="110" alt="Lorenz Painting Co." longdesc="http://www.lorenzpainting.com" /></p></div>
          <div id="flash">
          <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="700" height="250" id="FlashID" title="Lorenz Painting Co Flash Widget">
            <param name="movie" value="LorentzBanner.swf" />
            <param name="quality" value="high" />
            <param name="wmode" value="opaque" />
            <param name="swfversion" value="6.0.65.0" />
            <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
            <param name="expressinstall" value="Scripts/expressInstall.swf" />
            <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
            <!--[if !IE]>-->
            <object type="application/x-shockwave-flash" data="LorentzBanner.swf" width="700" height="250">
              <!--<![endif]-->
              <param name="quality" value="high" />
              <param name="wmode" value="opaque" />
              <param name="swfversion" value="6.0.65.0" />
              <param name="expressinstall" value="Scripts/expressInstall.swf" />
              <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
              <div>
                <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
                <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
                </div>
              </div>
              <!--[if !IE]>-->
            </object>
            <!--<![endif]-->
          </object>
          </h1>
    <div>
      <div id="menu4">
        <ul>
          <li><a href=""> <span class="title">Home</span> <span class="text">Why us?</span> </a> </li>
          <li><a href="">Services<span class="text">What we do</span> </a> </li>
          <li><a href=""> <span class="title">Testimonials</span> <span class="text">What they say</span> </a> </li>
          <li><a href=""> <span class="title">Contact</span> <span class="text">How to get in touch</span> </a> </li>
        </ul>
    </div>
    <p> </p>
      <p> </p>
      <p> </p>
    </div>
          <div></div>
        </div>
        <div id="wrapper-2">
          <div id="content-top" class="png"></div>
          <div id="wrapper-3">
            <div id="content-1">
              <div class="content-wrap">
                <p>Home</p>
                <p>Contact</p>
              </div>
            </div>
            <div id="content-2">
              <div class="content-wrap">
    stuff
    <p> </p>
              </div>
            </div>
            <div id="content-bottom"></div>
          </div>
          <div id="footer">
            <p><strong>Lorentz Painting Co., 2011</strong><strong></strong></p>
          </div>
        </div>
      </div>
    </div>
    <script type="text/javascript">
    swfobject.registerObject("FlashID");
    jQuery("#jQueryUIAccordion").accordion({
            event: "click",
            collapsible: false,
            autoHeight: true
    </script>
    </body>
    </html>
    Be forewarned, there are a bunch of rules in here that don't apply to anything anymore, as it's from a recycled rules from another site I built.  Sorry.
    I will first put the CSS for the main style sheet, and I will put the CSS for the Horizontal Nav Bar in after.
    CSS:
    Main style sheet:
    @charset "UTF-8";
    body
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 1.2em;
        color: #6B6B6B;
        background: #8D927C url(images/bg_body.jpg) repeat-x;
        margin: 0;
        padding: 0;
        min-width: 800px;
        text-align: center;
        background-color: #000;
    h2, h3, h4
        font-size: 16pt;
        font-weight: normal;
        margin: 15px 0 0 0;
    #wrapper-3 p
        padding: 0;
        line-height: 1.35em;
        margin-top: 8px;
        margin-right: 0;
        margin-bottom: 8px;
        margin-left: 0;
    #wrapper-3 ul
        list-style-type: none;
        margin: 8px 0;
        padding: 0;
    #branding
        margin: 0 0 0 0;
    @Generic anchor (link) styles
    a:link, a:visited
        color: #4f4f3f;
    a:hover, a:active
        color: #000000;
    @Inline image styles
    img.float-left
        float: left;
        margin: 0 6px 6px 0;
    img.float-right
        float: right;
        margin: 0 0 6px 6px;
    img.border
        background: #FFF;
        padding: 2px;
        border: 1px solid #999;
    @Tab navbar styles
    #hornav ul
        margin: 0;
        list-style-type: none;
        line-height: normal;
        padding: 0;
        text-align: center;
        margin-bottom: 60px;
        font-size: 0.8em;
        text-transform: uppercase;
    #hornav ul li
        display: inline;
        margin: 0 2px 0 0;
        padding: 3px 0 3px 10px;
    #wrapper-body #wrapper-1 #hornav ul li a br {
        height: 400px;
    #hornav ul li a
        text-decoration: none;
        margin: 0;
        background-repeat: inherit;
        background-position: center center;
        padding-top: 50%;
        padding-right: 10px;
        padding-bottom: 3px;
        padding-left: 10px;
    #hornav ul li a:link, #hornav ul li a:visited
        color: #3e3f2f;
    #hornav ul li a:hover, #hornav ul li a:active
        color: #000000;
    @Secondary navigation styles
    #navcontainer
        background: transparent url(images/bg_navlist-top.jpg) no-repeat top center;
        margin: 0;
        padding: 12px 0 0 0;
    #navcontainer ul
        margin: 0;
        list-style-type: none;
        line-height: normal;
        padding: 0 0 12px 0;
        border-top: 1px solid #FFF;
        background: transparent url(images/bg_navlist-bottom.jpg) no-repeat bottom center;
    #navcontainer a
        display: block;
        padding: 3px 6px;
        width: 168px;
        margin: 0 10px;
        background-color: #c4bfac;
        border-bottom: 1px solid #FFF;
    #navcontainer a:link, #navlist a:visited
        color: #FFF;
        text-decoration: none;
    #navcontainer a:hover
        background-color: #90937e;
        color: #FFF;
    @Masthead text styles
    #branding
        margin: 0;
        padding: 0;
    #branding h1
        color: #000;
        padding: 10px 0 0px 0;
        border-top: 4px solid #656e5d;
        text-align: center;
        text-transform: uppercase;
        letter-spacing: 0.3em;
        font-family: Georgia, "Times New Roman", Times, serif;
        font-size: 28px;
        font-style: normal;
        line-height: normal;
        font-weight: normal;
        font-variant: normal;
        margin: 0;
    @Layout styles
    #wrapper-body
        background: transparent url(images/bg_wrapper-body.jpg) no-repeat top right;
        width: inherit;
        margin: 0;
        padding: 0;
    #wrapper-1
        width: auto;
        background: transparent url(images/bg_wrapper-1.jpg) no-repeat;
        margin: 0;
        padding: 0;
    #wrapper-2
        width: 45em;
        text-align: center;
        margin-top: 0;
        margin-right: auto;
        margin-bottom: 0;
        margin-left: auto;
    #wrapper-3
        background: url(images/bg_wrapper-3.jpg) repeat-y;
        color: #333;
        text-align: left;
    #content-top
        margin: 0;
        height: 1em;
        background: url(images/bg_content-top.jpg) no-repeat;
        font-size: 0;
        line-height: 0;
    #content-1
        float: left;
        width: 12em;
        font-size: 0.9em;
        padding: 0;
        margin-top: 2em;
        margin-right: 2em;
        margin-bottom: 0em;
        margin-left: 0em;
    #content-2
        float: left;
        width: 40em;
        padding: 0;
        font-size: 0.8em;
        margin-top: 2em;
        margin-right: 0px;
        margin-bottom: 0em;
        margin-left: 0em;
    #content-3
        float: left;
        width: 250px;
        font-size: 10pt;
        margin: 0;
        padding: 0;
    #content-4 {
        width: 190px;
        padding: 0px;
        line-height: 0px;
    #content-bottom
        clear: both;
        height: 1em;
        background: url(images/bg_content-bottom.jpg) no-repeat;
        font-size: 0;
        line-height: 0;
    .content-wrap
        margin: 0;
        padding-top: 0px;
        padding-right: 2em;
        padding-bottom: 5px;
        padding-left: 0px;
    #footer p
        font-size: .75em;
        margin: 12px 0;
    p.content-wrap {
        font-size: 9pt;
        color: #999;
    @Blog post styles
    .date
        float: left;
        height: 52px;
        width: 52px;
        background: url(images/date.png) no-repeat;
        margin-right: 10px;
        padding-top: 0px;
        line-height: normal;
    .date .month
        display: block;
        text-align: center;
        color: #FFF;
        font-size: 11px;
        padding-top: 4px;
        text-transform: uppercase;
    .date .day
        display: block;
        text-align: center;
        padding-top: 5px;
        color: #222;
        font-size: 18px;
        font-weight: bold;
    .meta
        display: block;
        font-size: 11px;
        color: #666;
        clear: right;
    .blog-entry
        clear: both;
        padding-top: 2px;
    #searchform
        margin: 8px 0;
        padding: 0;
    @Search form styles
    #searchform fieldset
        margin: 0;
        padding: 0;
        border: 0;
    #searchform label
        color: #999;
        display: none;
    #searchform input
        width: 160px;
        color: #222;
    #searchform #submitquery
        display: none;
    #wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-2 .content-wrap p {
        line-height: 1.35em;
        text-align: justify;
    #wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-1 .content-wrap #Accordion1 .AccordionPanel.AccordionPanelOpen .AccordionPanelContent p {
        line-height: 1em;
    #wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-2 .content-wrap #Contact Us #sprytextarea1 span .content-wrap {
        font-size: .5em;
    #wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-2 .content-wrap #Contact Us #website {
    #wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-2 .content-wrap #Contact Us #website {
        display: none;
    #wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-2 .content-wrap #Contact Us #website label {
        display: none;
    #website {
        display: none;
    #wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-2 .content-wrap #Contact Us fieldset legend {
        font-size: 1.1em;
    #wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-2 .content-wrap #Contact Us fieldset legend {
        font-size: 1.1em;
    #wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-2 .content-wrap #Contact Us fieldset legend {
        font-size: 4em;
    #wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-2 .content-wrap #Contact Us fieldset .AccordionPanelContent {
        font-size: 1em;
    #wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-2 .content-wrap #Contact Us fieldset .AccordionPanelContent {
        font-size: 3em;
    .fieldname {
        font-size: .9em;
    CSS for Horizontal Nav Bar:
    #menu4 {
        width: 829px;
        margin: 0 auto 0 auto;
    #menu4 ul {
        list-style:none;
        font-family: Helvetica, Arial, sans-serif;
        font-size: 30px;
        letter-spacing: -3px;
        line-height: 1.2em;
        border-top:5px dotted #c7e7f3;
        border-bottom:5px dotted #c7e7f3;
        float:left;
        clear:both;
        margin:20px;
        text-align:center
    #menu4 ul li{
        float:left;
    #menu4 ul li a{
        display:block;
        text-decoration:none;
        padding:10px 10px 5px 10px;
        color:#66b8d8;
        width:170px;
    #menu4 ul li a span{
        display:block;
    #menu4 ul li a span.title{
    #menu4 ul li a:hover span.title{
        color:#00adef;
    #menu4 ul li a span.text{
        padding:0px 5px;
        font-family: Georgia, serif;
        font-size: 13px;
        font-style: italic;
        font-weight: normal;
        letter-spacing: normal;
        line-height: 1.6em;
        color:#c7e7f3;
        visibility:hidden;
    #menu4 ul li a:hover span.text{
        visibility:visible;
    Thanks!

  • Parent div isn't expanding

    If anyone has a free moment please have a look at this code and tell me why the #content div isn't expanding to include the child div's within it.
    Source code and style sheet below:
    <!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>Index</title>
    <link href="global.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="container">
      <div id="header">
        <div id="logo"></div>
        <!-- end .header --></div>
    </div>
    <div id="content">
      <div id="pagetext">
        <h1>Instructions</h1>
        <p>Be aware that the CSS for these layouts is heavily commented. If you do most of your work in Design view, have a peek at the code to get tips on working with the CSS for the fixed layouts. You can remove these comments before you launch your site. To learn more about the techniques used in these CSS Layouts, read this article at Adobe's Developer Center - <a href="http://www.adobe.com/go/adc_css_layouts">http://www.adobe.com/go/adc_css_layouts</a>.</p>
        <h2>Clearing Method</h2>
        <p>Because all the columns are floated, this layout uses a clear:both declaration in the .footer rule.  This clearing technique forces the .container to understand where the columns end in order to show any borders or background colors you place on the .container. If your design requires you to remove the .footer from the .container, you'll need to use a different clearing method. The most reliable will be to add a &lt;br class=&quot;clearfloat&quot; /&gt; or &lt;div  class=&quot;clearfloat&quot;&gt;&lt;/div&gt; after your final floated column (but before the .container closes). This will have the same clearing effect.</p>
        <h3>Logo Replacement</h3>
        <p>An image placeholder was used in this layout in the .header where you'll likely want to place  a logo. It is recommended that you remove the placeholder and replace it with your own linked logo. </p>
        <p> </p>
      </div>
      <div id="sidebar1">
        <p> The above links demonstrate a basic navigational structure using an unordered list styled with CSS. Use this as a starting point and modify the properties to produce your own unique look. If you require flyout menus, create your own using a Spry menu, a menu widget from Adobe's Exchange or a variety of other javascript or CSS solutions.</p>
        <p>If you would like the navigation along the top, simply move the ul.nav to the top of the page and recreate the styling.</p>
        <!-- end .sidebar1 --></div>
      <div id="photobar">Content for  id "photobar" Goes Here</div>
      <!-- end .content --></div>
    <div id="footer">
      <p>This .footer contains the declaration position:relative; to give Internet Explorer 6 hasLayout for the .footer and cause it to clear correctly. If you're not required to support IE6, you may remove it.</p>
      <!-- end .footer --></div>
    </body>
    </html>
    @charset "UTF-8";
    /* CSS Document */
    body {
              background: #42413C repeat;
              margin: 0;
              padding: 0;
              color: #000;
              font-family: Verdana, Arial, Helvetica, sans-serif;
              font-size: 90%;
              line-height: 1.4;
    /* ~~ Element/tag selectors ~~ */
    ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists# For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain# Remember that what you do here will cascade to the #nav list unless you write a more specific selector# */
              padding: 0;
              margin: 0;
    h1, h2, h3, h4, h5, h6, p {
              margin-top: 0;           /* removing the top margin gets around an issue where margins can escape from their containing div# The remaining bottom margin will hold it away from any elements that follow# */
              padding-right: 15px;
              padding-left: 15px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math# A nested div with side padding can also be used as an alternate method# */
    a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
              border: none;
    /* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect# ~~ */
    a:link {
              color: #42413C;
              text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
    a:visited {
              color: #6E6C64;
              text-decoration: underline;
    a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse# */
              text-decoration: none;
    /* ~~this fixed width container surrounds the other divs~~ */
    #container {
              width: 960px;
              background: #FFF;
              margin: 0 auto;
              /* [disabled]position: relative; */
              height: 150px;
    /* ~~ the header is not given a width# It will extend the full width of your layout# It contains an image placeholder that should be replaced with your own linked logo ~~ */
    #header {
              background: #ccc;
              height: 152px;
    #logo {
              position: relative;
              height: 460px;
              width: 300px;
              background: transparent url(../images/logo.png) no-repeat 0px 0px;
              top: 10px;
              float: right;
              /* [disabled]right: -650px; */
    #content {
              padding: 10px 0;
              width: 960px;
              margin: 0 auto;
              background: #fff;
              /* [disabled]position: static; */
    #pagetext {
              float: left;
              width: 600px;
    #sidebar1 {
              float: left;
              width: 300px;
              background: #EADCAE;
              /* [disabled]padding-bottom: 10px; */
              /* [disabled]margin-top: 320px; */
              /* [disabled]clear: left; */
              /* [disabled]margin-left: 60px; */
    #photobar {
              clear: both;
              float: left;
              height: 50px;
              width: 100%;
              background: #666;
    /* ~~ This grouped selector gives the lists in the #content area space ~~ */
    #content ul, #content ol {
              padding: 0 15px 15px 40px; /* this padding mirrors the right padding in the headings and paragraph rule above# Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention# These may be adjusted as you wish# */
    /* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */
    ul#nav {
              list-style: none; /* this removes the list marker */
              border-top: 1px solid #666; /* this creates the top border for the links - all others are placed using a bottom border on the LI */
              margin-bottom: 15px; /* this creates the space between the navigation on the content below */
    ul#nav li {
              border-bottom: 1px solid #666; /* this creates the button separation */
    ul#nav a, ul#nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
              padding: 5px 5px 5px 15px;
              display: block; /* this gives the link block properties causing it to fill the whole LI containing it# This causes the entire area to react to a mouse click# */
              width: 160px;  /*this width makes the entire button clickable for IE6# If you don't need to support IE6, it can be removed# Calculate the proper width by subtracting the padding on this link from the width of your sidebar container# */
              text-decoration: none;
              background: #C6D580;
    ul#nav a:hover, ul#nav a:active, ul#nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
              background: #ADB96E;
              color: #FFF;
    /* ~~ The footer ~~ */
    #footer {
              padding: 10px 0;
              background: #FF0;
              position: relative;/* this gives IE6 hasLayout to properly clear */
              clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
    /* ~~ miscellaneous float/clear classes ~~ */
    .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. The floated element must precede the element it should be next to on the page. */
              float: left;
              margin-right: 8px;
    .clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
              clear:both;
              height:0;
              font-size: 1px;
              line-height: 0px;

    Change this:
    #container {
              width: 960px;
              background: #FFF;
              margin: 0 auto;
              /* [disabled]position: relative; */
              height: 150px;
    To this:
    #container {
              width: 960px;
              background: #FFF;
              margin: 0 auto;
              position:relative; /**to control APDivs**/
    Change this:
    #logo {
              position: relative;
              height: 460px;
              width: 300px;
              background: transparent url(../images/logo.png) no-repeat 0px 0px;
              top: 10px;
              float: right;
              /* [disabled]right: -650px; */
    to this:
    #logo {
         position:absolute:
         top:xxpx; /**adjust as required**/
         left:xxpx; /**adjust as required**/
         z-index:100;
         height: 460px;
         width: 300px;
         background-image:url(../images/logo.png);
    And add this to your #content.
    #content {
         position:relative:
         z-index:1;
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists 
    http://alt-web.com/
    http://twitter.com/altweb

  • Divs being removed from parent div when a float style is applied

    Divs being removed from parent div when a float style is applied
    Hi All,
    I hope someone is able to help me with the below issue.
    I apologise if the questions I have been asking lately are really basic, I’m just teaching myself web design.
    I really do appreciate the help you guys offer, so a big thank you in advance.
    I am confused as to why I am not getting my desired effect for the below code. I am creating a website for someone and have structured the website in the following way:
    <body>
    <div id="wrap">
    <div id="title"></div><!-- end #title -->
    <div id="shopping_cart"></div><!-- end #shopping_cart -->
    <div id="content_wrap">
    <h2 class="header">Header goes here</span></h2>
    <div id="nav_bar">
    <table>table goes here</table>
    </div><!-- end #nav_bar -->
    <div id="side_bar">
    <h1>text here</h1>
    <table>table goes here</table>
    </div><!-- end #side_bar -->
    <div id="content">
    <p>text here</p>
    <div id="content_image"></div>
    </div><!-- end #content -->
    <div id="footer">
    <div id="logo"></div>
    <div id="flags"></div>
    <div id="v_wd"></div>
    </div><!-- end #footer -->
    </div><!-- end #content_wrap -->
    </div><!-- end #wrap -->
    </body>
    Now I don't know if I am structuring my website the right way this is just the way that makes sense to me. It might not even be the source code that’s the issue and may be the CSS so I have also pasted that in below.
    Now the problems I am having are as follows:
    I want to have my whole site wrapped in one big div #wrap so I can centre the whole site. Within that div I want all my other divs (which some have divs inside those as well).
    To start #title seems to fit inside #wrap without a problem but #shopping_cart gets push outside of #wrap even though it is inside the opening and closing #wrap tag.
    My next div #content_wrap, it seems to be inside #wrap however the margin-top I have applied to #content_wrap pushes it down from #title not #shopping_cart even though #content_wrap is below #shopping_cart not #title.
    The second problems seem to be with the divs that are or supposed to be inside #content_wrap.
    h2 .header seems to fit inside #content_wrap without any problems. Now it gets really confusing, for me anyway. Any div I put below h2 .header which is inside #content_wrap doesn’t seem to actually go inside #content_wrap or #wrap they get pushed below #wrap even though in the source code they are inside the opening and closing div tags.
    Also #side_bar and #content together equal 860px which is the width of their surrounding div #content_wrap so they should fit perfectly side by side. This I know ties into a previous discussion I raised in discussion (http://forums.adobe.com/message/4501038#4501038). I have taken Murry’s advice on board from this discussion and tried floating just #side bar to the left and left enough margin for #content to clear, I also tried floating both to the left. Nothing worked.
    As I have been writing this I’ve gone through my code, all the above issues only occur if I float a div. If I float a div for some reason it removes that div from any div surrounding it and pushes it below every single div. I don’t know how to position my divs in the exact place I want without floating them but if I float they get moved out of their parent div and therefore aren’t in the position I want them in either.
    If you are able to help me resolve this issue it will help me with all future projects. I really do appreciate any help you can give.
    Kind Regards
    Elliot
    CSS
    I have marked out where I would float a particular div */style*/ which I know would cancel that style. Therefore the problems I am having are with divs #shopping_cart, #side_bar and #content.
    body {
    background:url(images/body_bg.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;}
    #wrap {
    height:auto;
    width:895px;
    margin:0 auto;}
    #title {
    Background-image:url(images/title.png);
    height:67px;
    width:895px;
    margin-top:50px;
    margin-left:auto;
    margin-right:auto;}
    #shopping_cart {
    background: url(images/shopping_cart.jpg);
    height:46px;
    width:142px;
    margin-top:15px;
    margin-right:25px;
    /*float:right;*/}
    #content_wrap {
    background:url(images/content_bg.png) repeat;
    border:2px solid #666;
    height: auto;
    width:862px;
    margin-top:15px;
    margin-left:auto;
    margin-right:auto;}
    #nav_bar {
    width:809px;
    height:59px;
    margin-left:26px;}
    #side_bar {
    height:auto;
    width:285px;
    margin-top:20px;
    border-right:1px solid #666;
    /*float:left;*/}
    #content {
    height:auto;
    width:575px;
    margin-top:20px;
    /*float:left;*/}
    #content_image {
    background-image:url(images/couple.jpg);
    height:184px;
    width:271px;
    margin:0 auto;}
    #footer {
    background-color:#0F0;
    width:860px;
    height:200px;}
    #kejo_logo {
    background-image:url(images/kejo.png);
    height:100px;
    width:227px;}
    #flags {}
    #viscari_wd {}
    #copyright {}
    #pp_tu {}
    .header {
    color: #FFF;
    font-size:44px;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    margin-left:10px;}
    .header_small {
    color: #FFF;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 25px;
    margin-left:10px;}
    #content_wrap #side_bar h1 {
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    color: #4b4a4a;
    font-size:20px;
    padding-left:15px;}
    #content_wrap #content p {
    color: #484747;
    text-align:center;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size:20px;
    padding-right:15px;}

    Hi guys,
    Thanks for your help but still having a few problems;
    In design view the code you advised I should add seems to have placed #shopping_cart back into #wrap under #title and above #content_wrap but hasn't when previewed in browser as there is no margin between #content_wrap & #shopping_cart.
    #side_bar and #content now seem to sit side by side each other fine in design view and in the browser, however #footer which is in #content_wrap but under #side_bar and #content is behind #side_bar and #content. How do I get #footer to position under #side_bar and #content?
    I have added a green background to #footer to make it stand out. I have also added two images one of the site in design view and one previewed in the browser so you can see the difference. I've also pasted the amended code.
    Again thanks for your continued help and advice.
    <body>
    <div id="wrap">
    <div id="title"></div><!-- end #title -->
    <div id="shopping_cart"></div><!-- end #shopping_cart -->
    <div id="content_wrap">
    <h2 class="header">Header goes here</span></h2>
    <div id="nav_bar">
    <table>table goes here</table>
    </div><!-- end #nav_bar -->
    <div id="side_bar">
    <h1>text here</h1>
    <table>table goes here</table>
    </div><!-- end #side_bar -->
    <div id="content">
    <p>text here</p>
    <div id="content_image"></div>
    </div><!-- end #content -->
    <div id="footer">
    <div id="logo"></div>
    <div id="flags"></div>
    <div id="v_wd"></div>
    </div><!-- end #footer -->
    </div><!-- end #content_wrap -->
    </div><!-- end #wrap -->
    </body>
    CSS
    body {
    background:url(images/body_bg.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;}
    #wrap {
    width:895px;
    margin:0 auto;
    overflow:hidden;}
    #title {
    background:url(images/title.png);
    height:67px;
    width:895px;
    margin-top:50px;
    margin-left:auto;
    margin-right:auto;}
    #shopping_cart {
    background: url(images/shopping_cart.jpg);
    height:46px;
    width:142px;
    margin-top:15px;
    margin-right:25px;
    float:right;}
    #content_wrap {
    background:url(images/content_bg.png) repeat;
    border:2px solid #666;
    width:862px;
    margin-top:15px;
    margin-left:auto;
    margin-right:auto;
    overflow: hidden;
    clear: both;}
    #nav_bar {
    width:809px;
    height:59px;
    margin-left:26px;}
    #side_bar {
    height:auto;
    width:285px;
    margin-top:20px;
    border-right:1px solid #666;
    float:left;}
    #content {
    height:auto;
    width:575px;
    margin-top:20px;
    float:right;}
    #content_image {
    background-image:url(images/couple.jpg);
    height:184px;
    width:271px;
    margin:0 auto;}
    #footer {
    background-color:#0F0;
    width:860px;
    height:200px;}
    #kejo_logo {
    background-image:url(images/kejo.png);
    height:100px;
    width:227px;}
    #flags {}
    #viscari_wd {}
    #copyright {}
    #pp_tu {}
    .header {
    color: #FFF;
    font-size:44px;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    margin-left:10px;}
    .header_small {
    color: #FFF;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 25px;
    margin-left:10px;}
    #content_wrap #side_bar h1 {
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    color: #4b4a4a;
    font-size:20px;
    padding-left:15px;}
    #content_wrap #content p {
    color: #484747;
    text-align:center;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size:20px;
    padding-right:15px;}

  • In a content editable page right clicking within a div highlights all content within the div

    Open the following page in firefox. In a separate tab open another page, highlight some content and copy it. Move back to the original tab and try pasting the content. Whenever you right click in the area which is within the div tags the whole content between them gets highlighted.
    &lt;html&gt;
    &lt;head&gt;&lt;title&gt;edit area&lt;/title&gt;&lt;/head&gt;
    &lt;body contenteditable="true"&gt;
    &lt;div style="font-family: 'Times New Roman'; font-size: 16px;"&gt;These are a few of my&lt;br&gt;favourite&lt;br&gt;things :&lt;br&gt;&lt;br&gt;&lt;/div&gt;
    &lt;/body&gt;
    &lt;/html&gt;

    Go to File > New page from template. 
    Select your Template.dwt file from the list and hit Create.
    Save your child page.
    Nancy O.

  • Position Spry Menu Bar inside Header Div

    Hi,
    I have a horizontal menu bar that I am trying to position inside a header div at the top of my site. FYI, the layout of my site is that I have an outer wrapper div and the first div within the outer wrapper is the header div. I am following isntructions from a video tutorial I foudn that suggests that I set the ul.MenuBarHorizontal CSS rule to be "position - absolute" and "bottom - 0px". When I do this, it positions the menu bar at the bottom of the page, outside the margins of the header div. When I say bottom of the page, I don't mean at the bottom of the website page, but for some reason, at the bottom of the dreamweaver page, even outside of the outer wrapper div, depending on what I have the zoom set to. I hope the way I'm explaining this makes sense because it is completely baffling.
    All I want to do is have the menu bar positioned at the bottom and horizontally centered inside the header div. Any suggestions?

    I've put up an example of what you're attempting to do here:
    http://perrelink.com.au/forum/sky/menu-in-header.php
    Instructions on the page  :-)
    Hope this helps.
    Nadia
    Adobe® Community Expert : Dreamweaver
    http://www.perrelink.com.au
    Unique CSS Templates | Tutorials | SEO Articles
    http://www.DreamweaverResources.com
    http://twitter.com/nadiap

  • Should I format type within the div?

    I would like to know what is considered more acceptable:
    1. If I have <p>'s within a <div>
    -a) I could specify type positioning by specifying padding in the <div> or I could specify margins for the <p> within the <div>.
    -b) I could specify type formatting either in the <div> or the <p>.
    Which would be better?
    What would be the prefered method regarding <a>'s within a <div>?
    Thanks!
    Mark

    Block: Takes up the full width available, with a new line before and after (display:block;)  <p>  is a block element
    Inline:  Takes up only as much width as it needs, and does not force new lines (display:inline;)   <a> is an inline element
    Helpful Resources:
    http://www.w3schools.com/CSS/css_howto.asp
    http://www.dave-woods.co.uk/index.php/block-and-inline-elements-part-one/
    http://www.maxdesign.com.au/presentation/inline/
    Nadia
    Adobe® Community Expert : Dreamweaver
    Unique CSS Templates |Tutorials |SEO Articles
    http://www.DreamweaverResources.com
    Book: Ultimate CSS Reference
    http://www.sitepoint.com/launch/005dfd4/3/133
    http://twitter.com/nadiap

  • AP Div within a centralised container Div?

    Is there a cunning way to use AP Divs within normal floating
    or centralised
    container Divs?
    Cheers
    ss.

    Synapse Syndrome <[email protected]> wrote:
    >
    >>>>>> Is there a cunning way to use AP
    Divs within normal floating or
    >>>>>> centralised container Divs?
    >>>>>>
    >>>>>
    >>>>> You can give the container
    position:relative; so the AP Div
    >>>>> takes it's position from that
    container's top-left coordinate.
    >>>>>
    >>>>
    >>>> Ah great. I'll look into that.
    >>>>
    >>>
    >>> Hmmn, I can't get it to work.
    >>>
    >>> I give the #container position:relative;?
    >>>
    >>> The apDiv is still not moving with the
    #container when the browser
    >>> size is changed.
    >>>
    >>> What am I doing wrong?
    >>>
    >>
    >> A wild guess as I don't know what your code looks
    like: You don't have
    >> the AP Div inside the container div code.
    >>
    >> This works:
    >>
    >>
    >> #container {
    >> position:relative;
    >> background-color:#BBCCFF;
    >> width: 300px;
    >> float: right;
    >> }
    >> #apDiv1 {
    >> position:absolute;
    >> width:200px;
    >> height:115px;
    >> z-index:1;
    >> left: 51px;
    >> top: 54px;
    >> background-color:#FFCC99;
    >> }
    >>
    >>
    >>
    >>
    >> <div id="container">
    >> <p>Container Div</p>
    >> <div id="apDiv1">AP Div</div>
    >> <p>Container Div</p>
    >> <p>Container Div</p>
    >> <p>Container Div</p>
    >> <p>Container Div</p>
    >> <p>Container Div</p>
    >> </div>
    >>
    >
    > Ah, I can see where I was going wrong now. Thanks a lot
    for your help.
    I keep on doing this - forgettig to save the CSS file after
    editing it
    through the CSS box. Is there a keyboard shortcut for Save
    All, or do I
    have to use the menu all the time? (CS3).
    ss.

  • How do I vertically align my text to center within a div?

    any solutions?

    nevermind I found a way to do it. It's probably not the most efficient way but since I only have a single line of text within the div I managed to vertically center the text using line height. I am new to web design and have been studying and watching tutorials for the last month on dreamweaver. I am getting better but I must say dreamweaver is quite glitchy when it come to accurately displaying the actual design of the webpage in split view. Only when I view my work in line view can I actually see what is really going on.

  • When double clicking a word with an adjacent br Firefox is reporting the endContainer of the selected range as the parent div, but when selecting with a mouse drag Firefox reports the endContainer is a text node. Is this expected behavior?

    Double click on break and the end container appears to be the parent div, but if you select just break with mouse the end container is a text node. If you continue to drag your mouse past the end of break you also get the parent div. Sample html:<br />
    <br />
    <pre><nowiki><!doctype html>
    <html>
    <body>
    <div id="surroundingDiv1">
    Break<br/>
    </div>
    <p>
    <a href="#" onclick="showSelectionInfo()">Show Selection Info</a>
    </p>
    <label for="output"></label><textarea id="output" rows="20" cols="50"></textarea>
    <script>
    function showSelectionInfo() {
    var range = null;
    var sel = window.getSelection();
    if (sel.rangeCount > 0 && sel.getRangeAt(0).toString() != "") {
    range = sel.getRangeAt(0);
    if (range != null) {
    document.getElementById("output").innerHTML =
    "Text: " + range.toString() +
    "\n\nendContainer - " +
    "\n\tid: " + range.endContainer.id +
    "\n\tnodeName: " + range.endContainer.nodeName +
    "\n\tnodeValue: " + range.endContainer.nodeValue +
    "\n\tnodeType: " + range.endContainer.nodeType +
    "\n\nstartContainer - " +
    "\n\tid: " + range.startContainer.id +
    "\n\tnodeName: " + range.startContainer.nodeName +
    "\n\tnodeValue: " + range.startContainer.nodeValue +
    "\n\tnodeType: " + range.startContainer.nodeType;
    </script>
    </body>
    </html></nowiki></pre>

    In general theory, one now has the Edit button for their posts, until someone/anyone Replies to it. I've had Edit available for weeks, as opposed to the old forum's ~ 30 mins.
    That, however, is in theory. I've posted, and immediately seen something that needed editing, only to find NO Replies, yet the Edit button is no longer available, only seconds later. Still, in that same thread, I'd have the Edit button from older posts, to which there had also been no Replies even after several days/weeks. Found one that had to be over a month old, and Edit was still there.
    Do not know the why/how of this behavior. At first, I thought that maybe there WAS a Reply, that "ate" my Edit button, but had not Refreshed on my screen. Refresh still showed no Replies, just no Edit either. In those cases, I just Reply and mention the [Edit].
    Also, it seems that the buttons get very scrambled at times, and Refresh does not always clear that up. I end up clicking where I "think" the right button should be and hope for the best. Seems that when the buttons do bunch up they can appear at random around the page, often three atop one another, and maybe one way the heck out in left-field.
    While I'm on a role, it would be nice to be able to switch between Flattened and Threaded Views on the fly. Each has a use, and having to go to Options and then come back down to the thread is a very slow process. Jive is probably incapable of this, but I can dream.
    Hunt

  • Does anyone know why all of a sudden any new parent divs I add won't display in browser preview?

    Does anyone know why all of a sudden any new parent divs I add won't display in browser preview?

    yes styles are applied. What does not show up are the container divs - they all have the thin purple borders.
    The "Blog Lovers" image shows up but it is inside the #blogindex div - which seems to be invisible because the elements inside #blogindex div are just piled on top of each other. (see below html) This is now happening on all the pages of this site.
    (I test a different site in DW and I was able to add divs and borders and content inside divs just fine.)
    <!-- start #blogindex --> 
         <div id="blogindex">
            <div id="blog_image1"><img src="images/bloglovers.gif" alt="Blog Lovers" /></div>   
             <div id="blog_image2"><img src="images/gcblogheader350x70.jpg" alt="Gina Charles Blog" /></div>
          <div id="blogindex_text">
          <p class="blackbolditalic">Visit the blog for happenings, highlights and conversation! </p></div>
          </div>     
       <!-- end #blogindex -->
    http://www.newworldapparel.com/tests/  -scroll 1/2 way down page to see the "Blog Lovers" pile up!

  • Can't get parent div to expand vertically.

    I know the right column floats and I tried a few things I found online but can't get it!
    http://thecottagesongoldenpond.com/mc_family.html
    AND I'm making all pages from my initial template, so I will need to add "the missing code" to that template - each page may require taller or shorter page..

    So for your footer do a clear:
    #footer {
              clear: both;  
              background-color: #7D6A8A;
              text-align: center;
              height: 100px;
              width: auto;
              color: #FFFFFF;
              font-size: 13px;
              padding-top: 10px;
              font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
    Or you can make a line break do that:
    </map>
    </div>
    <br class="clearfloat />
    </div>
    and your CSS for the clearfloat class:
    .clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
              clear:both;
              height:0;
              font-size: 1px;
              line-height: 0px;

  • How to position two buttons on top of div element inside a div container?

    Hello!
    Good news...
    I have created my very first thumbnail slider for my website that actually works!
    Bad news...
    The buttons that help scroll the div element, which is wrapped inside a center container, are no longer positioned on top of the div.
    Here is the html:
    <div id="centerContainer">
    <div id="aemcSlider">
       <ul>
        <li>
            <a class="aemcPkgBut" href="" target="" alt="AEMC Packaging" title="AEMC Packaging"> </a>
            </li>
            <li>
             <a class="aemcGroundFlexBut" href="" target="" alt="GroundFlexAd" title="GroundFlex Ad"> </a>
             </li>
         <li>
          <a class="aemcClampBut" href="" target="" alt="Clamp-On Ad" title="Clamp-On Ad"> </a>
          </li>
              <li>
              <a class="aemcMetrixBut" href="" target="" alt="Metrix Ad" title="Metrix Ad"> </a>
              </li>
         </ul>
    </div>
    <div id="leftBut">
    <a class="arrowLeft" href="" target="" alt="Left" title="Left"> </a>
    </div>
    <div id="rightBut">
    <a class="arrowRight" href="" target="" alt="Right" title="Right"> </a>
    </div>
    </div>
    Here is the CSS:
    Main container:
    #centerContainer
    {width: 800px; margin: 0 auto; background-color:#0e210e; position:relative}
    Div Element:
    #aemcSlider
        text-align:center;
        list-style:none;
        width: 450px;
        height: 114px;
        margin: 0 auto;
        padding-top: 0px;
        padding-right: 0px;
        padding-bottom: 0px;
        padding-left: 0px;
        top: 67px;
        position: relative;
        overflow: hidden;
    #aemcSlider a {margin-right: -12px;}
    Left & Right Buttons:
    a.arrowLeft
        width: 29px;
        height: 96px;
        float:left;
        position:absolute;
        margin: 0 auto;
        display: block;
        background-image: url(../Images/arrowLeft.png);
        background-repeat: no-repeat;
        left: 311px;
        top: 91px;
        opacity: 0;
    a.arrowLeft:hover
    background-image: url(../Images/arrowLeft.png);
    opacity: 0.5;
    a.arrowRight
        width: 29px;
        height: 96px;
        position:absolute;
        float:right;
        margin: 0 auto;
        display: block;
        background-image: url(../Images/arrowRight.png);
        background-repeat: no-repeat;
        opacity: 0;
        left: 720px;
        top: 92px;
    a.arrowRight:hover
    background-image: url(../Images/arrowRight.png);
    opacity: 0.5;
    Here are the things I've done to troubleshoot:
    If I put the div element as an absolute container, the left button disapears.
    I get the same effect when I change the position to relative.
    I tried changing the position to relative for both buttons.
    I also tried to position the buttons outside the Main Div container and no go.
    How can I position the relative div element under these controller button?
    Any help would be muchly appreciated.
    ~LA

    OK,
    Got the site onto a public web space.
    Here sre the links...
    http://www.aliciaalmeidagraphicdesigner.com/Work.html
    http://www.aliciaalmeidagraphicdesigner.com/style/Body.css
    http://www.aliciaalmeidagraphicdesigner.com/js/functions.js
    Anyone can help me out, please?
    Thanks!
    LA
    PS: Dissapointed...my website looks much better from my local file than remote

Maybe you are looking for

  • Calendar will not sync with Yahoo via DM

    First timer here....researched this issue in this forum and have tried everything being offered but I have not had any luck.  Here is what has happened....initailly tried to set up google calendar (business) to go along with yahoo calendar (personal)

  • How to create user in Express database through express command

    Hi In our application we need add/delete new user to the OFA. Is there any way of doing this through the automated express.? Is there any Express command to add new user ? If so,Please let me know how to do that. Thanks Murugesan

  • Non Optional Parameters

    Hello, I am trying to design a fillable form for our payroll department to calculate payroll adjustments. I am using a OLEDB Database connection to our SQL Server and grab information from a stored procedure. I want the form to populate certain field

  • Workflow display related issues

    Hi This issue is related to workflow display. We are not able to see vendor number, Invoice number etc for idocs coming from a particular vendor. However we are able see these details for idocs coming from all other vendors. We compared control recor

  • Lost all my contact. how do i recover them

    i lost all my contact. how do i recover them