Div tag, align right

Hello

It should be easy and for some reason, I'm missing it. This is a php page and it has a navigation panel with fireworks on the left side, but I'm removing all the extranuous stuff just to let the div tags that are governed by a CSS page.


Why is not it? And, is there a way to control with CSS?

Thank you

The problem was in the CSS. I had to fill for the 'content' div and nothing for the div. "nav" for a reason, it was make the div "nav" I put padding for the "nav" div and took the filling of the upper part of the div 'content', the page now appears correctly.

Thanks for the help Osgood... !

Tags: Dreamweaver

Similar Questions

  • alignment with the < div > tags

    I am having trouble getting my 3rd < div > tag align (id = flash). It is left in line with the edge of the tag '#content' < div >. Essentially left alignment on the edge of my centered layout. Here is my code, anyone can have an idea on what I'm missing? I am new to do not use tables.

    Thank you

    < head >
    < meta http-equiv = "Content-Type" content = text/html"; Charset = UTF-8 "/ >"
    < Title > page < /title >
    < style type = "text/css" >
    {body
    do-family: Arial, Helvetica, without serif.
    background-color: #FFF;
    margin: 0px;
    padding: 0px;
    }
    #container {}
    margin: 0 auto;
    Width: 999px;
    }
    #content {}
    Width: 100%;
    }
    {#flash}
    position: absolute;
    top: 134px;
    left: 216px;
    }
    < / style >
    < / head >

    < body >
    < div id = "container" >
    < div id = "content" > < img src = "images/background.jpg" width = "997" height = "2400" / > "
    < div id = "flash" >

    This is a decision by aligning

    < / div >
    < / div >
    < / div >
    < / body >
    < / html >

    The same can be applied to the normal margins:

    {#flash}

    margin: 134px 216px 0px 0px;

    }

    Is that what you are looking for?

    Nick

  • Div tags do not align

    I can't get my div tags to align correctly.  I have a DIV set to float left and the other right float.  I can get the first set of work, but as soon as I add in another series, they both float left.  I played around with the margins, borders and padding and nothing seems to work.  Here is the code:

    < style type = "text/css" >
    {.pageborder}
    Width: 795px;
    height: 1000px;
    border: medium solid #008478;
    do-family: Verdana, Geneva, without serif.
    do-size: 10pt;
    }
    {.prodboxleft}
    do-family: Verdana, Geneva, without serif.
    do-size: 10pt;
    background-color: #76c6be;
    text-align: left;
    Width: 369px;
    float: left;
    height: 150px;
    border: medium dashed #008478;
    top of the margin: 5px;
    right margin: 5px;
    margin-bottom: 5px;
    left margin: 12px;
    padding: 0px;
    }
    {.prodboxright}
    do-family: Verdana, Geneva, without serif.
    do-size: 10pt;
    background-color: #76c6be;
    text-align: left;
    Width: 369px;
    float: right;
    height: 150px;
    border: medium dashed #008478;
    top of the margin: 5px;
    right margin: 12px;
    margin-bottom: 5px;
    margin-left: 5px;
    padding: 0px;
    }
    < / style >
    < / head >

    < body >
    < div class = "pageborder" > < div class = "prodboxleft" > content of class "prodboxleft" goes here < / div >
    < div class = "prodboxright" > content of class "prodboxright" goes here < / div >
    < div class = "prodboxleft" > content of class "prodboxleft" goes here < / div >
    < div class = "prodboxright" > content of class "prodboxright" goes here < / div >
    < div class = "prodboxleft" > content of class "prodboxleft" goes here < / div >
    < div class = "prodboxright" > content of class "prodboxright" goes here < / div >
    < / div >

    You are welcome.

    When you get a chance, please mark "compensation float" as the correct answer.  It helps others who might find this thread in the forum search.

    Nancy O.

  • The alignment of the div tags/content

    I have a div class = "wrapLinks" (unordered list) and a div class = "slider" (image carousel), and both are within the class = "content" div  At some point, "wrapLinks" were in the top left of the content.  After you create the div class is 'slider', the 'wrapLinks' have been 'pushed' down under the "cursor" that comes from taking up space at the top left of the content.  Ideally, I want the two (aligned horizontally) inline with eachother. First, I tried to change the margin for both classes of div in the css, but that doesn't seem to work.  I then tried to add "float: left;" to the "wrapLinks" and "float: right;" for the "cursor" in the css, but that also does not work.  I also try to put a button on the cursor.  I think that's what we call a 'floating div tag", but not sure.  I feel that I write the CSS properly for each class of div.

    Any ideas on what I can / should I do?

    I have provided a reference image.

    div_tag_help.JPG

    Even with the following addition/changes, the carousel seems too wide to fit completely on the page:

    .wrapLinks UL

    {

    margin: 10px 0px 0px;

    padding: 4px 0px 0px;

    do-family: "Arial Unicode MS";

    / * + 9px placement: shift-346px; * /

    position: relative;

    left: 9px;

    top:-346px;

    }

    .float-right

    {

    float: right;

    margin: 225px 60px banner 0px 0px;

    / * + placement: Maj 51px-301px; * /

    position: relative;

    left: 51px;

    high:-301px;

    }

    /*################*/

    . Slider

    {

    / * + placement: Maj 248px 8px; * /

    position: relative;

    left: 248px.

    top: 8px;

    }

  • Align 4 div tags?

    I have a total of 4 div tags, I need to align correctly. The first will at the top left of the page and is 455w x 255 h. The next, which will display in line with the first and be placed in the upper right is 327w x 214 h. (note the difference in height). The third div is 455w x 261 h will be at the bottom left of the page. The last div at the bottom right is 327w x 344 h.

    Now the delicate parts. The background div 2 must align their funds. Because they have elements that cover the two divs and need to align horizontally. I would like the right div down to expand upward into vertical space left by the height of the 2nd div (top-right).

    Please see the gif attached for a Visual.

    I can reach the bottom of the tail, but it seems that I can only do with tables. I'm looking to break up tables form and I'd appreciate any help.

    Thank you!

    -Change

    http://www.Macromedia.com/go/getflashplayer"type =" application/x-shockwave-flash"width ="327"height ="344">
           

    on this subject.

    http://www.Macromedia.com/go/getflashplayer"type =" application/x-shockwave-flash"width ="327"height ="344">

    It is whitespace gotcha!

  • Settings for the right column div tag

    Hi guys

    Inside my base model home page, I want a column on the right that starts at the top right under the header. This will serve to show the news and contact and so.

    I have a separate div for the text on the left and a div to the right column. The right div is set to "position: absolute" because he must remain top-right under the header.

    But as you can see on the screenshot, social media icons that are part of the model appear just below the div to the left.

    How can I configure the right column div tag to keep it at the top right, the text on the left remains where it is and that the right column corresponds to the div model so that social media icons will be displayed automatically below the contact information on the right.

    The second screenshot shows the result as it should be for the social media icons, so below all the content of the page.

    Schermafbeelding 2013-07-26 om 00.03.11.pngSchermafbeelding 2013-07-26 om 00.09.46.png

    Some fundamental fixes you should do first:

    • Yourtag begins after you have already a meta tag and tag style open on your page. Solve this problem
    • For this reason, the tag appears as away during validation. If you set the point #1, this should be resolved

    Now coming to your question in the discussion.

    You have

    more than once on your page. It's illegal markup. ID can only be used once per page. If you want to repeat the same style for more than 1 item, make a class and style it in CSS with .body_right instead of #body_right. In this way, you can re - use this element never how many times you want.

    In the file/styles/style. CSS, line 2200:

    {#column_right}

    Display: block;

    position: absolute;

    high: 25;

    Width: 25%;

    left: 75%;

    z-index: auto;

    }

    Who to change:

    {#column_right}

    Display: block;

    float: right;

    Width: 25%;

    }

    Get rid of everything that isn't here in my code above ^.

    See how your position elements / line up and post back if you need assistance.

  • Responsive Design - Show and hide the div tags

    Hello

    I am building a website using sensitive design. I want a certain div tag to be read on a desktop and a tablet but then to disappear and a different div be made visible on the mobile device.

    I realized the above with the code below, but I found a problem. The problem I found is that the div is hidden here still an empty space remains there then it creates a large empty space. Anyway is to hide this great space?

    (mobile)

    {#tab-container}

    display: none;

    visibility: hidden;

    Clear: both;

    float: none;

    left margin: 0;

    Width: 96%;

    display: block;

    margin-right: auto;

    left margin: auto;

    padding-top: 10px;

    padding-bottom: 10px;

    text-align: center;

    border-top-width: 1px;

    border-bottom-width: 1px;

    border-top-style: solid;

    border-bottom-style: solid;

    border-bottom-color: #000;

    border-bottom-color: #000;

    }

    {#phone-tabs}

    display: block;

    visibility: visible;

    Clear: both;

    float: none;

    left margin: 0;

    Width: 96%;

    display: block;

    margin-right: auto;

    left margin: auto;

    padding-top: 10px;

    padding-bottom: 10px;

    text-align: center;

    border-top-width: 1px;

    border-bottom-width: 1px;

    border-top-style: solid;

    border-bottom-style: solid;

    border-bottom-color: #000;

    border-bottom-color: #000;

    line-height: 30px;

    }

    (Tablet)

    {#tab-container}

    display: block;

    visibility: visible;

    Clear: both;

    float: none;

    left margin: 0;

    Width: 96%;

    display: block;

    margin-right: auto;

    left margin: auto;

    padding-top: 10px;

    padding-bottom: 10px;

    text-align: center;

    border-top-width: 1px;

    border-bottom-width: 1px;

    border-top-style: solid;

    border-bottom-style: solid;

    border-bottom-color: #000;

    border-bottom-color: #000;

    }

    {#phone-tabs}

    display: none;

    visibility: hidden;

    Clear: both;

    float: none;

    left margin: 0;

    Width: 96%;

    display: block;

    margin-right: auto;

    left margin: auto;

    padding-top: 10px;

    padding-bottom: 10px;

    text-align: center;

    border-top-width: 1px;

    border-bottom-width: 1px;

    border-top-style: solid;

    border-bottom-style: solid;

    border-bottom-color: #000;

    border-bottom-color: #000;

    }

    (office)

    {#tab-container}

    display: block;

    visibility: visible;

    Clear: both;

    float: none;

    left margin: 0;

    Width: 70%;

    display: block;

    margin-right: auto;

    left margin: auto;

    padding-top: 10px;

    padding-bottom: 10px;

    text-align: center;

    border-top-width: 1px;

    border-bottom-width: 1px;

    border-top-style: solid;

    border-bottom-style: solid;

    border-bottom-color: #000;

    border-bottom-color: #000;

    }

    {#phone-tabs}

    display: none;

    visibility: hidden;

    Clear: both;

    float: none;

    left margin: 0;

    Width: 70%;

    display: block;

    margin-right: auto;

    left margin: auto;

    padding-top: 0px;

    padding-bottom: 0px;

    text-align: center;

    border-top-width: 0px;

    border-bottom-width: 0px;

    border-top-style: solid;

    border-bottom-style: solid;

    border-bottom-color: #000;

    border-bottom-color: #000;

    }

    Thanks for your help!

    Alex

    Try to delete the two lines, as shown below.

    Display: block overrides display: no because it is further down in the code.

    For this reason, visibility: hidden comes into play. This statement is exactly intended to hide the contents, while leaving the blank space.

    Edit: I think that really is all you need:

    {#tab-container}

    display: none;

    }

    (mobile)

    {#tab-container}

    display: none;

    visibility: hidden;

    Clear: both;

    float: none;

    left margin: 0;

    Width: 96%;

    display: block;

    margin-right: auto;

    left margin: auto;

    padding-top: 10px;

    padding-bottom: 10px;

    text-align: center;

    border-top-width: 1px;

    border-bottom-width: 1px;

    border-top-style: solid;

    border-bottom-style: solid;

    border-bottom-color: #000;

    border-bottom-color: #000;

  • Problem with the text in the div tag

    Hey there,

    the question that I have is that every time that I add text to a div tag and press 'enter' to start on another paragraph, the text on the first paragraph right guard moved down to about a paragraph. It happens in Dreamweaver and the browser when available is presented as a preview. I have included a few pictures below, please advise.

    First added text, which seems fine:

    Screen shot 2013-10-09 at AM 09.27.43.png

    But when I try to type the text after pressing "enter".

    Screen shot 2013-10-09 at AM 09.28.20.png

    I want the text to align to the top instead of from a paragraph down. Something like this (made in InDesign):

    Screen shot 2013-10-09 at AM 09.28.42.png

    I will include the code as well. When I select the div tag, it's what is highlighted in the code pane:

    < div id = "about6" >

    < p > Hey there < /p >

    < p > Hey there 2 < /p >

    < p > Hey there 3 < /p >

    < p > Hey there 4 < /p >

    < / div >

    A screenshot of the of type parameters for this div:

    Screen shot 2013-10-09 at AM 09.42.39.png

    Any help would be appreciated. Thank you.

    Paragraphs, titles etc. have legacy browser style rules.

    We can remove the style by adding rules to the top of the stylesheet

    * {

    padding: 0;

    margin: 0;

    }

    Even better is to include a CSS reset set of rules such as found here http://meyerweb.com/eric/tools/css/reset/

    By the way, please note that the use of identifiers will limit your fun by using style rules. You should not use ID unless needing a single login. In your case, I would use a class.

    Heights of adjustment are also going to strangle the natural flow of your document, especially if you intend to start on the drawings of fluid

    I hope this helps.

  • Images inside div tags appear broken

    I don't have a ton of experience in the use of div tags, but I'm learning and have met a "roadblock". Search for an answer to these days, I'm not finding exactly what I live... I'm looking on the forum for help and advice.

    So I designed a layout with divs. When I preview the design of in Dreamweaver, the site appears flawelssly in Safari, Firefox and Chrome - everything seems perfect, and there is no broken images. But as soon as I download all my files on my server dev online - it's where things go wrong and I see broken images. But the broken images are not consistent. Some look perfectly while others are broken. I do not understand why an image appears while another image is not, I used the same approach on each div I built. I know that my image paths are correct, then this isn't the problem... which leads me to believe that I have something wrong in my code div itself. But being new to the div... I do not see where I was wrong. I have not used 'float' correctly? Has not used to position correctly? I am very confused and frustrated at this point and I really want to come back to the use of tables... any help will be grately appreciated.

    Here is the site on my dev server: http://studio2adv.com/dev/mignognacollision/

    Here is my css:

    @charset "UTF-8";

    / * CSS document * /.

    / * = Global properties START = * /.

    {body

    background-color: #e9cb9c;

    Width: auto;

    height: 100%;

    margin: 0 auto;

    do-family: Verdana, Geneva, without serif.

    do-size: 12px;

    line-height: 1.4em;

    Color: #000;

    }

    HTML {}

    background: #e9cb9c;

    margin: 0 auto;

    padding: 0;

    outline: 0;

    vertical-align: left top;

    do-size: 100%;

    }

    . Container {}

    margin: 0 auto;

    Width: 1000px;

    height: inherit;

    background-color: #fff;

    }

    #header {}

    Width: 956px;

    height: 125px;

    margin: 0 auto;

    vertical-align: middle;

    background-color: #fff;

    }

    {#footercontainer}

    Width: 956px;

    height: 67px;

    margin: 0 auto;

    border-top-style: solid;

    border-right-style: none;

    border-bottom-style: solid;

    border-left-style: none;

    border-color: orange;

    background-color: #fff;

    }

    {#footercontainer2}

    Width: 956px;

    height: 55px;

    margin: 0 auto;

    background-color: #005baa;

    }

    {#endtag}

    margin: 0 auto;

    Width: 956px;

    height: 70px;

    background-color: #fff;

    }

    / * = Global properties END = * /.

    /* ==================== Start header ========================== */

    {.header1}

    float: left;

    Width: 70%;

    Padding: 50px 0px 0px 0px;

    }

    {.header2}

    float: left;

    Width: 12%;

    padding: 20px 0px 0px 0px;

    }

    {.header3}

    float: left;

    Width: 18%;

    padding: 10px 0px 0px 0px;

    }

    /* ==================== END header ========================== */

    /* ==================== Text ========================== */

    {.topphone}

    do-family: Verdana, Geneva, without serif.

    do-size: 16px;

    make-weight: bold;

    color: #005baa;

    text-align: right;

    vertical-align: top of the text;

    }

    H1 {}

    do-family: Verdana, Geneva, without serif.

    do-size: 18px;

    make-style: italic;

    color: #f7931e;

    text-align: left;

    line-height: 1.5em;

    }

    H2 {}

    do-family: Verdana, Geneva, without serif.

    font-size: 15px;

    make-style: italic;

    Police-weight: normal;

    color: #005baa;

    }

    H3 {}

    do-family: Verdana, Geneva, without serif.

    do-size: 12px;

    color: #f7931e;

    }

    {#preferredtext}

    do-family: Verdana, Geneva, without serif.

    do-size: 9px;

    text-align: center;

    Color: #000;

    }

    . FooterText {}

    do-family: Verdana, Geneva, without serif.

    do-size: 10px;

    color: #fff;

    }

    {p.footerendtag}

    do-family: Verdana, Geneva, without serif.

    do-size: 10px;

    Color: #000;

    text-align: center;

    }

    {p.testimonials}

    do-family: Verdana, Geneva, without serif.

    do-size: 14px;

    make-style: italic;

    Color: #000;

    text-align: left;

    }

    . Blue {}

    do-family: Verdana, Geneva, without serif.

    do-size: 14px;

    make-style: italic;

    make-weight: bold;

    color: #005baa;

    text-align: left;

    }

    {.listorange}

    color: #f7931e;

    }

    {.listblack}

    Color: #000;

    }

    {.listboldblack}

    make-weight: bold;

    Color: #000;

    }

    /* ==================== END Text ========================== */

    /* ==================== DIVs ========================== */

    {#topphone}

    Width: 670px;

    height: 30px;

    float: right;

    padding: 0px 0px 19px 265px;

    position: top of the page.

    }

    {.homefloatleft}

    Width: 143px;

    height: 195px;

    float: left;

    padding: 0px 0px 0px 22px;

    }

    {.homefloatmiddle}

    Width: 585px;

    height: inherit;

    float: left;

    padding: 0px 15px 0px 15px;

    }

    {.homefloatright}

    Width: 198px;

    height: auto;

    float: right;

    padding: 22px 0px 0px 0px;

    }

    {.aboutfloatmain}

    Width: 752px;

    height: 195px;

    float: left;

    padding: 0px 0px 0px 22px;

    }

    {.aboutfloatleft}

    Width: 250px;

    height: 245px;

    float: left;

    padding: 0px 0px 0px 22px;

    }

    {.aboutfloatmiddle}

    Width: 442px;

    height: inherit;

    float: left;

    padding: 0px 15px 0px 15px;

    }

    {.gsfloatleft}

    Width: 228px;

    height: 245px;

    float: left;

    padding: 0px 0px 0px 22px;

    }

    {.gsfloatmiddle}

    Width: 480px;

    height: inherit;

    float: left;

    padding: 0px 15px 0px 15px;

    }

    {.adfloatleft}

    Width: 250px;

    height: 245px;

    float: left;

    padding: 0px 0px 0px 22px;

    }

    {.adfloatmiddle}

    Width: 450px;

    height: inherit;

    float: left;

    padding: 0px 15px 0px 15px;

    }

    {.formfloatleft}

    Width: 80px;

    height: 245px;

    float: left;

    padding: 0px 0px 0px 22px;

    }

    {.formfloatmiddle}

    Width: 750px;

    height: 1200px;

    float: left;

    padding: 0px 15px 15px of 20px;

    }

    {.formfloatright}

    Width: 50px;

    height: auto;

    float: right;

    padding: 22px 0px 0px 0px;

    }

    {.clearfloat}

    Clear: both;

    }

    /* ==================== END DIVs ========================== */

    /* ==================== Start main nav ========================== */

    {#navlist}

    Width: 956px;

    }

    #navcontainer ul {}

    padding-left: 0px;

    left margin: 0px;

    background-color: #005baa;

    color: white;

    float: left;

    Width: 100%;

    do-family: Verdana, Geneva, without serif.

    }

    #navcontainer ul li {display: inline ;}}

    #navcontainer ul li a {}

    Padding: .7em 3.5em;

    background-color: #005baa;

    color: white;

    text-decoration: none;

    float: left;

    border-left: 1px solid #fff;

    }

    #navcontainer ul li a: active {}

    background-color: #f7931e;

    color: #fff;

    }

    #navcontainer ul li a: hover {}

    background-color: #f7931e;

    color: #fff;

    }

    #navcontainer ul li a: selected {}

    background-color: #f7931e;

    color: #fff;

    }

    /* ==================== END main nav ========================== */

    / * = Start slideshow = * /.

    {.rslides}

    position: relative;

    list-style: none;

    overflow: hidden;

    Width: 100%;

    padding: 0;

    margin: 0;

    }

    .rslides li {}

    -webkit-backface-visibility: hidden;

    position: absolute;

    display: none;

    Width: 100%;

    left: 0;

    top: 0;

    }

    .rslides li: first - child {}

    position: relative;

    display: block;

    float: left;

    }

    .rslides img {}

    display: block;

    height: auto;

    float: left;

    Width: 100%;

    border: 0;

    }

    /* ==================== End Slideshow ========================== */

    /* ==================== Start footer ========================== */

    {#footer1}

    float: left;

    Width: 12%;

    padding: 20px 20px 0px 20px;

    }

    {#footer2}

    float: left;

    Width: 24%;

    padding: 20px 0px 0px 0px;

    }

    {#footer3}

    float: left;

    Width: 60%;

    padding: 10px 0px 0px 0px;

    }

    {#footer4}

    float: left;

    Width: 55%;

    padding: 0px 0px 0px 10px;

    }

    {#footer5}

    float: right;

    Width: 40%;

    padding: 0px 10px 0px 0px;

    }

    {a.footerendtag:Link}

    color: #005baa;

    text-decoration: underline;

    }

    {a.footerendtag: active}

    color: #f79122;

    text-decoration: underline;

    }

    {a.footerendtag:hover}

    color: #f79122;

    text-decoration: underline;

    }

    {a.footerendtag:visited}

    color: #005baa;

    text-decoration: underline;

    }

    {#footercurrentlink}

    color: #f79122;

    text-decoration: underline;

    }

    /* ==================== END footer ========================== */

    Check that the images are not damaged and were saved for web RGB and CMYK not.

    Nancy O.

  • div tag

    I have an index.cfm which uses the dic to have the browser on the left and content on the right with a header and a footer.

    The left float div tag and the right float works in index.cfm.

    I want to place a Login.cfm on header and use the tag div, but the label title and invites always vertical connection, but not float left and right.

    Here is my code

    <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional / / IN" "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 > < /title > header form


    "" < link href = "... / Styles/MyCSS.css" rel = "stylesheet" type = "text/css" / >
    < / head >

    < body >
    < cfform >
    < div class = "container" >
    < div class = "HomeTitle >"
    < table border style = "hidden" >
    < b >
    < td border-style = "hidden" >

    "< cfinput type ="image"name ="Logo"class ="logo"id ="logo1"dir ="ltr"lang ="en"src="/GBS/Apps/Image/MyImage.png "alt ="Image ".

    align = "top" width = "50" height = "60" hspace = "50" hspace = "20" >
    < table >

    < td border-style = "hidden" >

    < label for = class "Title" = "GBStitle" > GBS America region Home Page < / label >

    < table >
    < /tr >
    < /table >
    < / div >
    < div class = "Login" >
    "< model CFINCLUDE ="... / Commmon/Login.cfm ">"
    <!-end.-> connection
    < / div >
    < / div >
    < / cfform >

    < / body >
    < / html >

    / * CSS document * /.
    {GBStitle}
    font-size: 10cm;
    do-family: Verdana, Geneva, without serif.
    background-color: #ADB96E;
    background-repeat: repeat;
    position: relative;
    visibility: inherit;
    color: #C00;
    text-decoration: underline;
    make-weight: bold;
    Width: 200px;
    }

    }
    . {HomeTitle}
    float: left;
    Width: 500px;
    background-color: #ADB96E;
    }

    . {Login
    do-family: Verdana, Geneva, without serif.
    background-color: #FFF;
    float: right;
    Width: 500px;
    }

    . Container {}
    Width: 1024px;
    background-color: #FFF;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    left margin: auto;
    }

    I use the Dreamweaver template to create this file, I think that model Dreamweaver using the.

    Certainly not. But anyway, the two elements to be floated next to each other must be in the same container.

  • How use align = 'right' for the text in a &lt; dl &gt; environment?

    I use a < dl > environment to control the vertical line spacing widely (in thousands of pages).  Here's the goal:

    Screen shot 2013-02-27 at 9.47.40 AM.png

    But I also need to have the generation numbers, for example "2.2.1" stalled right on a page width.  I tried different ways to achieve this by using < div >, < span >, etc.  Each has unintended consequences.  The foregoing is created using < table > in the < dt > line.  But each time the W3C validator objects.

    Here is my script:

    Screen shot 2013-02-27 at 9.50.16 AM.png

    Or, if that is easier to read:

    < class dt = "type_U_XXX" > < table width = "720" border = "0" cellpadding = "0" >

    < b >

    < td width = "680" > Johann Peter Bayer (* 23.10.1716 Undenheim) < table >

    < td width = "40" align = "right" > 2.2.4 < table >

    < /tr >

    < / table > < /dt >

    < dd class = "col_0" > Taufpate war Johann Peter Cohn, Gau-Odernheim. < foreigners >

    < dd class = "col_0" > von war of Johann Peter Bayer 1751-1788 St.Albans - Hofmann, to Undenheim.  ER ist als 'see und emsiger Mann' und "der Hof-Peter" als uberliefert.  Am 04.02.1744 his er in Undenheim < i > Anna Catharina Dapper aus Sörgenloch < /i >.  Trauzeugen waren Joh. Matthaeus Bayer und Joh. Peter Dapper. < br / > < br / > < / DD >

    < class dt = "col_1" > Kinder: (13) < /dt >

    < class dt = "type_U_XXXsX" > < table width = "680" border = "0" cellpadding = "0" >

    < b >

    < td width = "640" > Johann Bayer Mathäus (* 03.04.1745, + 02.10.1746) < table >

    < td width = "40" align = "right" > 2.2.4 / 1 < table >

    < /tr >

    < / table > < /dt >

    < dd class = "col_1" > Taufpate war Joh. Matthaeus Lahr. < br / > < br / > < / DD >

    How do I right align numbers in a < dl > environment?  It must be in the line < dt >, not SD <>.  Using the < dd > line back from the left margin, which is not acceptable.

    Thanks for your help.  Be very explicit.  Please show me the line or two of script that is needed, not just say for example, to use a < div > tag.

    Create a CSS class selector called "numbers".

    Assign the right float attribute

    In the body of your page, select and apply this class by wrapping your numbers between span tags.

    Paste this code into a separate HTML document to see the concept

    Paragraph2.2.1

    Paragraph2.2.2

    Paragraph2.2.3

    Paragraph2.2.4

  • Dreamweaver cs5.5 - div tags don't float next to eachother

    I'm trying to get 2 div tags to float next to each other for hours! I've been playing with the float and messing around with the margins, but what ever I don't the div is always somewhat my another div tag I want that they completely off. I tried to change the top and bottom margins, but that does not work either. How can I get them side by side? We call it "textbox" and the other "imagewrapper". The code is:

    < ! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional / / IN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > ""

    " < html xmlns =" http://www.w3.org/1999/xhtml ">

    < head >

    < meta http-equiv = "Content-Type" content = text/html"; charset = utf-8 "/ >"

    < title > Untitled Document < /title >

    < script src = "SpryAssets/SpryMenuBar.js" type = "text/javascript" > < / script > "

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

    < link hand. CSS"rel ="stylesheet"type =" text/css"/ >

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

    <!-integrated styles for this page only-->

    < style type = "text/css" >

    {body

    margin: 0;

    padding: 0;

    font: 1em/1.5 ' Lucida without ","Lucida Sans Unicode ";

    }

    {#wrapper}

    Width: 1064px;

    margin: 0 auto; / * with width, this centers on screen page * /.

    Background: #FFF;

    text-align: center;

    }

    / * This styles image container * /.

    #thumbs p {}

    float: center;

    Width: 50px;

    height: 75px;

    / * This text caption styles * /.

    font: 14px italic/1.5 Geneva, Arial, Helvetica, without serif.

    color: #666;

    text-align: center;

    border: 1px solid silver;

    margin-top: 10px;

    right margin: 5px;

    margin-bottom: 18px;

    margin-left: 5px;

    }

    / * recommend using images of even size * /.

    #thumbs img {}

    Width: 50px; / * adjust the width to the photo * /.

    height: 75px; / * to the picture height adjustment * /.

    / * CSS3 drop shadows * /.

    -moz-box-shadow: 5px 5px 5px #666;

    -webkit-box-shadow: 5px 5px 5px #666;

    -khtml-box-shadow: 5px 5px 5px #666;

    box-shadow: 5px 5px 5px #666;

    }

    / * float clearing * /.

    #thumbs: after {}

    Display: block;

    visibility: hidden;

    height: 0;

    do-size: 0;

    content: "";

    Clear: left;

    }

    #wrapper #thumbs #imagewrapper {}

    height: 362px;

    Width: 280px;

    float: right;

    right margin: 720px;

    }

    #wrapper #thumbs #imagewrapper img {}

    height: 362px;

    Width: 280px;

    }

    {#wrapper #textbox}

    float: right;

    height: 300px;

    Width: 600px;

    right margin: 70px;

    }

    {.clearing}

    Clear: left;

    height: px;

    Width: 100%;

    }

    < / style >

    < / head >

    < body >

    < div id = 'wrapper' >

    < img src = "photos/header.png product and site" width = "1064" height = "116" alt = "header" / >

    <! - start menu - >

    < ul id = "MenuBar1" class = "MenuBarHorizontal" >

    < li > < a href = "#home.html" > home < /a > < /li >

    < li > < a href = "#" class = "MenuBarItemSubmenu" > shop < /a > < ul >

    < li > < a href = "#" class = 'MenuBarItemSubmenu' > women < /a > < ul >

    < li > < a href = "bwt.html" > top < /a > < /li > ""

    < li > < a href = "bws.html" > skirts/Shorts < /a > < /li > ""

    < li > < a href = "bwl.html" > pants/Leggings < /a > < /li >

    < li > < a href = "bwa.html" > Accessories < /a > < /li > ""

    < li > < a href = "bwd.html" > dresses < /a > < /li > < /ul > < /li > ""

    < li > < a href = "#" class = "MenuBarItemSubmenu" > < /a > men

    < ul >

    < li > < a href = "#" > Tops < /a > < /li >

    < li > < a href = "#" > money < /a > < /li >

    < li > < a href = "#" > Accessories < /a > < /li >

    < /ul >

    < /li >

    < li > < a href = "#" > semi Unique < /a > < /li >

    < /ul >

    < /li >

    < li > < a class = "MenuBarItemSubmenu" href = "#" > T-shirt Shop < /a > < ul >

    < li > < a href = "t-shirt shop.html" > men < /a > < /li >

    < li > < a href = 't-shirt shop.html' > women < /a > < /li >

    < li > < a href = "t-shirt shop.html" > single < /a > < /li >

    < /li > < /ul >

    < li > < a href = "clearance.html" > release < /a > < /li > ""

    < li > < a href = "#" > on < /a > < /li >

    < /ul >

    < h2 > < / h2 >

    < div id = "textbox" > < / div >

    < div id = "thumbs" >

    < div id = "imagewrapper" > < / div >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    <! - end wrapper - > < / div >

    < hr align = "center" size = "10" noshade = "noshade" class = "clear" color = "#999999" / >

    < div align = "left" > & copy; 2012, your footer text goes here < / div >

    < / div >

    < script type = "text/javascript" >

    var MenuBar1 = new Spry.Widget.MenuBar ("MenuBar1", {imgDown: "SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});})

    < /script >

    < / body >

    < / html >

    I made a sample for you here: http://forwardfocus.in/sandbox/leftrightfloat/

  • I want to use a div tag or another to hide a video flash on my web site

    Hi, I have same video flash for many of my web pages. I'm trying to use the div tag to hide the header when it is not necessary. but it works only broser Firefox not IE. Here's what I did

    Is the above correct? What is the best way to do it?

    < div class = "wrapper" > < div class = "overlay" > african < / div > < span class = "blok_header" >

    < object classid = "clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase ="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8, 0,0,0" width = "94%" height = "97%" id = "main" align = "middle" >

    < param name = "allowScriptAccess" value = "sameDomain" / >

    < param name = "movie" value = "main.swf" / > "

    < param name = "quality" value = "high" / >

    < param name = "scale" value = "noborder" / >

    < param name = "salign" value = "t" / >

    < param name = "bgcolor" value = "#ffffff" / >

    < embed src = "main.swf" quality = "high" scale = "noborder" salign = "t" bgcolor = "#ffffff" width = "900" height = "600" name = align 'main' = 'left' allowscriptaccess = "sameDomain" type = "application/x-shockwave-flash" pluginspage ="http://www.macromedia.com/go/getflashplayer" / >

    < / embed >

    < / object >

    </span >

    < / div >

    Thank you

    What I'm saying is, the flash video has a header with a button. I want to permanently hide the part containing the header. The user will never see it. I use the div I want to replace my menu in the header bar. Diving ovelay will contain my Web site menu. When I do, it works great on firefox, but on Internet Explorer, my menu is behinf and usercan see the flash header.

    The parameters of Divs are:

    Wrapper {}

    position: relative;

    height: 600px;

    Width: 900px;

    Top: 0px;

    padding: 0px;

    margin: 0px;

    }

    . Overlay {}

    background-color: #CCC;

    position: absolute;

    height: 98px;

    Width: 900px;

    Top: 0px;

    margin: 0px;

    padding: 0px;

    border-bottom-width: medium;

    border-bottom-style: solid;

    border-bottom-color: #999;

    border-right-color: #999;

    border-bottom-color: #999;

    border-left-color: #999;

    }

    Flash video setting. It is imbaded in the Wrapper Div

    http://fpdownload.Macromedia.com/pub/Shockwave/cabs/Flash/Swflash.cab#version=8, 0,0,0 "width ="94% "height ="110% "id ="main"align ="middle">

    http://www.Macromedia.com/go/getflashplayer"/ >

  • Div tag is not growing with content... Help please!

    Hello

    First of all, I'm pretty new to this so I'm stoopid, so it is possible that I am.

    I built a page CSS based with DIV tags What I'm trying to achieve is a html body that has a #wrapper centered on the page, then a #header, #nav, #banner, #content and #footer consecutively to the bottom of the page. Then inside I want to place a #leftColumn and a #rightColumn. What I have achieved. I have a problem with is to have the content div expand with the divs two columns it contains. I've included the main.css file I use below as well as the source code for the "content" of the page section. Any help would be greatly appreciated.

    See you soon,.

    Philamon

    @charset "UTF-8";

    {body

    color: #FFF;

    text-align: center;

    margin: 0px;

    padding: 0px;

    }

    {#wrapper}

    color: #000;

    text-align: left;

    width: 760px;

    margin-top: 0px;

    margin-right: auto;

    margin-bottom: 0px;

    margin left: auto;

    }

    #header {}

    color: #000;

    top of the margin: 12px;

    margin-bottom: 12px;

    }

    #content {}

    color: #000;

    width: auto;

    margin-top: 0px;

    padding-top: 0px;

    padding-left: 5px;

    overflow: auto;

    }

    #footer {}

    color: #000;

    top of the margin: 5px;

    margin-bottom: 0px;

    clear: both;

    text-align: center;

    bottom: 0px;

    left: 0px;

    right: 0px;

    position: relative;

    }

    #logo {}

    color: #000;

    height: 71px;

    padding-bottom: 10px;

    padding-right: 5px;

    }

    #nav {}

    color: #000;

    height: 28px;

    }

    #banner {}

    color: #000;

    height: 200px;

    text-align: center;

    }

    {#leftColumn}

    color: #000;

    float: left;

    width: 70%;

    padding-right: 5px;

    padding-bottom: 30px;

    padding-left: 5px;

    }

    {#rightColumn}

    color: #000;

    float: right;

    width: 20%;

    padding-right: 5px;

    padding-left: 5px;

    padding-bottom: 30px;

    }

    {.fltrt}

    float: right;

    }

    < div id = "content" >
    Welcome to the Division of Groundswell < h1 > < / h1 >
    < div id = "left column" >
    Mission statement < h2 > < / h2 >
    < p > The Groundswell Division aims to: < /p >
    < p > participate in mold in the future of the Australian performing arts industry by attracting new audiences, are working to find new forms and contribute to broaden the scope of the arts scene in Australia. < br / >
    Provide vital, diverse and stimulating of public art works, both locally in Melbourne, in the Australia and abroad. < br / >
    Provide a platform for practitioners of the arts of the local scene that are currently underutilized within the industry. < br / >
    Offer an umbrella for independent artists present their works within an established business support. < br / >
    All decisions regarding the control and artistic direction in an open and honest forum by members of the democratic Committee of the society. < /p >
    < / div >
    < div id = "by" rightColumn >»»
    Subheading < h2 > < / h2 >
    < p > Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut developed and pain magna aliquyam erat, sed diam voluptua. At vero eos and accusam and justo duo dolores and ea rebum. STET clita kasd gubergren, no sea takimata sanctus is Lorem ipsum dolor sit amet. < /p >
    < / div > < div id = "leftColumn2" >
    < h2 > < / h2 >
    < / div >
    < / div >

    You should be able to get #content to expand changing overflow: auto; to overflow: hidden; in the style of #content {...}.

    That may seem paradoxical, but overflow: auto; you will get scroll bars, not expansion. He might not even have you that, if you do not have a specified height. Overflow: hidden; should be #content stretch to lock up the sidebar divs.

    Beth

  • problem of div tag

    Hello

    I create a website.i seem to have a little trouble with the div tag... I have think.the the navigation bar and the main content seem to overlap each other.any ideas? appreciated all the help ID.

    Thank you.

    < body >
    < div id = "header" > heading < / div >
    < div id = "nav" >

    < ul id = "Five-year Plan" >
    < li > < a href = "html/Index.html" > home < /a > < /li >
    < li > < a href = "html/Conventional.html" > < /a > < /li > conventional encryption ""
    < li > < a href = "#" > < /a > public key encryption
    < ul >
    < li > < a href = "html/PublicKey - Confidentiality.html" > PublicKey-privacy < /a > < /li >
    < li > < a href = "html/PublicKey - Authentication.html" > authentication by public key < /a > < /li >
    < li > < a href = "html/Public Key-privacy and Authentication.html" > Public Key-privacy and authentication < /a > < /li > ""
    < /ul >
    < /li >
    < li > < a href = "#" > < /a > MAC encryption
    < ul >
    < li > < a href = "#" > MAC - authentication of Message < /a > < /li >
    < li > < a href = "#" > authentication and Message confidentiality (Plaintext) < /a > < /li >
    < li > < a href = "#" > authentication of Message and Confidentiality (Ciphertext) < /a > < /li >
    < /ul >
    < /li >
    < li > < a href = "#" > encryption HASH < /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 privacy < /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 homepage for the authentication of Message and Signatures.This digital page will explain these elements funamental base. < /p >
    < p > < / p >

    Strong authentication > < p > < < facilities >: < /p >
    < p > < a name = "#Authtentication" > < / a >
    The authentication service is concerned to ensure that communication is authentic. Authentication acts as a warning or an alarm signal. The function of the authentication service is to ensure the recipient that it message comes from the source that she come. < /p >
    < p > < / p >
    < p > < strong > privacy < facilities >: < /p >
    < p > < a name = "Confidenitiality" > < / a >
    Confidentiality is the protection of data transmitted against passive attacks. This is so that the message cannot be read by anyboby except for the intended recipient.
    < /p >
    < p > < / p >
    Strong public key > < p > < <: facilities > < / p >
    < p > < a name = "Public key" > < / a >
    < /p >
    Strong digital signature > < p > < <: facilities >
    < p > < a name = "Digital Signature" > < /a > < /p >
    < /p >
    < p > < strong integrity >: < facilities >
    < p > < a name = "Integrity" > < /a > < /p >

    Strong MAC function > < p > < <: facilities > < / p >
    < p > < a name = "MAC" > < /a > < /p >
    < p > A MAC (Message Authentication Code) is a block of small fixed size of data that are added to the message. The technique involves Hat connecting two parties say (Source A and B) share a key (k) common secret. When A sends it a message to B, it calculates the MAC based on 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 MAC has received and the computed MAC are then compared. If the received MAC corresponds to the computed MAC, the message is supposed to be authentic. < /p >
    < /p >
    < / div >
    < div id = "footer" >
    < p >
    Footer - all about the designer and contact links go here
    < /p >
    < / div >
    < / body >
    < / html >

    You have an additional} (support) after your 'head' css selector that prevents the css cascade (see below). Remove it and see if the problem goes away.

    #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 solid black;
    }
    }

Maybe you are looking for