Sensitive images CSS help

I usually make my reactive images by adding

max-width:100%; height:auto;

the css class that is called for the image.

However, I have now an image that is used with a hover and click effect that I want to make sensitive and above will not work.

The image I have is in three parts for her. The upper part is the normal state, the central part is pointing State and the lower part is the active state.

The total picture is 280px wide and high 3x125px.

In the css I use:

{.p01-button

Width: 280px;

height: 125px;

background: url('home01.png') top left no-repeat;

}

for the normal state, then:

.P01-button: hover {}

background-position: center left;

}

for the State showed up and

.P01-button: active {}

background-position: bottom left;

padding-top: 0px;

}

for the active state.

This set works very well with a browser full screen, but the images don't fit on smaller screens.

Can I do these sensitive in a manner similar to the first method?

Thanks in advance.

Thank you Nancy. I didn't know that. See you soon.

Tags: Dreamweaver

Similar Questions

  • Sensitive images full screen & Placement of content

    Hello

    Please can I ask the community for help and advice?

    I created a Web of Muse site and used a widget from QooQee called REACT that allows me to place a sensitive image on the first page of my site and meets all the screen resolutions, which is great.  The image fills all browser.  I want the whole image to fill the first page of my site with a page scrolling.

    However, I have a problem and it is the content below my picture to full size browser.

    I'm designing on an iMac 27 "screen and when I preview the design in a browser on the big screen, everything is online and is placed where it should be.  However, when I discovered that a 13 "or 15" Macbook, content drops creating a gap between the bottom of the image full screen and the beginning of the content.

    Anyone know of a way I can continue this drawing, but have the content of the answer, so he's always sitting right under my picture full screen and I have no gap between the image and my content.  I need this to work for 13 ", 15" MacBook and iMac.

    Any help would be appreciated gratefully.

    Link to the test site is Billy Kenny Music | Official website of Billy Kenny

    Thank you very much

    RG.

    Reactive Adobe Muse CC 2015 is now online. Please install the update of CC > Apps.

    What's new: news summary

    Release notes: https://helpx.adobe.com/muse/release-note/adobe-muse-release-notes.html

    Delicate design:

    Adobe help Muse | Create responsive Web sites

    Adobe help Muse | Responsive web design in Adobe Muse

    Adobe help Muse | Migrate existing Adobe Muse Web sites to answer

    Tutorials

    To get started with Adobe Muse (replaces how to make a website with Adobe Muse (coffee of Katie)):

    - https://helpx.adobe.com/muse/how-to/create-responsive-website.html

    Create a sensitive webpage with Adobe Muse:

    - https://helpx.adobe.com/muse/how-to/responsive-web-design.html (more detailed features RWD of Muse demo)

    Thank you

    Sanjit

  • Build an html5 app, I only .html, .js, images, css file folder files / files. How to build a web app/html5 app in that if I did not file config.xml?

    Build an html5 app, I only .html, .js, images, css file folder files / files. How to build a web app/html5 app in that if I did not file config.xml?

    I downloaded the game codes and try to build games using these codes, but I had only

    data folder

    image folder

    js file with .js files

    file .html

    main.js file

    In this case, how build/package web app /html5 app if no config .xml given?

    You will need create your own file config.xml. There are samples and documentation on each of the items on our microsite here:
    https://developer.BlackBerry.com/HTML5/documentation/gold/working_with_config_xml_file_1866970_11.ht...

    Note that all the elements in the samples are not necessary. For each piece, make sure that you actually need in the config.xml file. For example, most web game conversions will not need elements (using the old SDK) since they make use of BlackBerry-specific APIs.

  • I can't install premium photoshop design.  Once downloaded and I click on the file, it says "unrecognized image' Please help

    I can't install photoshop Design Premium.  Once I spent hours to download and click on file, it says "unrecognized Image' Please help

    Download again using another browser and possibly choose a better location to download if the file is not corrupted.

    Mylenium

  • Where are my views? I can see the image numbers, but no image. Help, please.

    Where are my views? I can see the image numbers, but no image. Help, please.

    Hi Rob,

    I just wanted you to know that I'm fine now... I just had to find the original files... must have moved a link or something?

    Thank you for your help.

    See you soon,.

    Lisa

  • Referencing files images, CSS, and Javascript from the system instead of workspace files repository

    Hello

    I am currently using Apex 4.2 and I want to know if you still have to import images, CSS and Javascript files, respectively, in a workspace (like the shared components) to use them in an Application? Alternatively, they could be referenced in a directory on the file system? I'm still not familiar with CSS or Javascript technology and I'm trying to find out as much as possible about how to use and where Apex can do. All comments gratefully received,

    Kind regards

    Kevin.

    Since you're using the EPG you will not be able to reference all files directly in your operating system.  You can load in XDB using FTP, WebDav or PL/SQL location.  The PL/SQL method is described in these posts:

    A random overview of Oracle: loading images in Oracle XDB

    Loading images custom when using EPG

    I don't know if there is any benefit from their download in XDB compared to the APEX workspace.  Guess it would make sense that you had a file that you wanted to be referenced by more than one workspace and do not want to download the file in each workspace.

  • CSS HELP! IT IS NOT CENTERING BACKGROUND

    OK my page's work perfidy everywhere but not in Internet Explorer... I want the background to be centered and fixed also (so it does not scroll), everything I try send page wach hole or it alings he left

    CSS:

    /*****************************************/

    /*************** RESET CSS ***************/

    /*****************************************/

    body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td, ht ml, label, table, tr, td {margin: 0; padding: 0 ;}}

    table {border-collapse: collapse; border-spacing: 0 ;}}

    fieldset, img, an img,: link, img: visited img {border: 0 ;}}

    address, caption, cite, dfn, code, var, th {make-style: normal; make-weight: normal ;}}

    OL, ul {list-style: none ;}}

    Caption, th {text-align: left ;}}

    H1, h2, h3, h4, h5, h6 {make-size: 100% ;}}

    q: before, q: after {content: ";}}

    / * Site * /.

    {body

    Background: #2 c 2825 url(images/topBg-repeat.jpg);

    background-repeat: no-repeat;

    background-position: top center;

    background-attachment: fixed;

    font: 12px / 1.46 Verdana, Verdana, Geneva, without serif.

    margin: 0;

    Color: #000;

    text-align: center;

    }

    TD {make-size: 1em ;}}

    form {}

    Display: inline;

    margin: 0;

    padding: 0;

    }

    H1 {make: normal 1.5em Arial, Helvetica, without serif; color: #0f0f0f;}   }

    H2 {make: normal 1.3em Arial, Helvetica, without serif; color: #0f0f0f;}  padding-bottom: 20px; }

    H3 {make: normal 1.1em Arial, Helvetica, without serif; color: #0f0f0f;}  padding-bottom: 20px; }

    {H2. Header}

    color: #484848;

    padding: 10px;

    background-color: transparent;

    make-weight: bold;

    }

    {p}

    padding-bottom: 10px;

    padding-left: 20px;

    }

    an img {border: 0 ;}}

    a: link {color: #493933 ;}}

    a: visited {color: #493933 ;}}

    a: active {color: #bbb0a8}

    a: hover {color: #bbb0a8 ;}}

    . Clear {clear: both; font-size: 0em; height: 0em ;}}

    .floatRight {float: right ;}}

    .floatLeft {float: left ;}}

    . AlignRight {text-align: right ;}}

    . AlignLeft {text-align: left ;}}

    .AlignCenter {text-align: center ;}}

    .margincenter {auto margin: 0 ;}}

    . Small {make-size: .9em ;}}

    . Smaller {make-size: .8em ;}}

    . Smallest {make-size: .7em ;}}

    signs {size are: 1.1em ;}}

    .larger {size are: 1.2em ;}}

    .largest {size are: 1.3em ;}}

    . Bold {make-weight: bold ;}}

    . Italic {make-style: italic ;}}

    .red {color: #dd0000 ;}}

    . Blue {color: #0000ff ;}}

    . Grey {color: #999999 ;}}

    . NoWrap {white-space: normal ;}}

    . Link-pipe {color: #999999 ;}}

    .input_error {border-color: #cc0000 #ff0000 #ff0000 #ff0000 ;}}

    Select {}

    border-width: 1px;

    border-color: #333333 #bbbbbb #bbbbbb #bbbbbb.

    padding: 1px 2px;

    }

    . Error-message {}

    padding: 4px;

    text-align: center;

    Width: 60%;

    Auto margin: 0;

    color: #dd0000;

    make-weight: bold;

    }

    . LOGN .error-message,

    . AFCL .error-message,

    . ORDL .error-message {}

    margin: 12px 24 PX.

    Width: auto;

    }

    any intelligence-message {}

    padding: 4px;

    text-align: center;

    Width: 60%;

    Auto margin: 0;

    color: #0000dd;

    }

    . LOGN all intelligence-message {}

    margin: 12px 24 PX.

    Width: auto;

    }

    TD. Field textarea {}

    Width: 200px; height: 100px;

    }

    . TextField, select, textarea,

    #tax - fields of entry {} .form_row

    border-width: 1px;

    border-style: solid;

    border-color: #333333 #bbbbbb #bbbbbb #bbbbbb.

    padding: 1px 2px;

    Police: normal Arial, Helvetica, Verdana, without serif 1em;

    }

    . TextField, textarea {}

    Width: 140px; height: 18px;

    }

    button {}

    border: none;

    background-color: #9c1f1c;

    color: #ffffff;

    font-size: .9em;

    padding: 3px;

    margin: 0;

    cursor: pointer;

    Width: auto;

    overflow: visible;

    }

    {#site-container}

    Width: 960px;

    Auto margin: 0;

    text-align: left;

    border-collapse: collapse;

    }

    #bottom-wrap {clear: both; font-size: 0em; height: 0em ;}}

    / Top Navigation * bar * /.

    {#-barre of navigation

    Background: #fff url(images/mainNav-bg.jpg) no-repeat center;

    height: 41px;

    line-height: 0;

    margin-bottom: 20px;

    margin-top: 16px;

    padding: 10px;

    }

    bar of navigation-# ul {}

    Auto margin: 0;

    padding: 8px 0 0 0;

    Width: 560px;

    Clear: both;

    }

    bar of navigation-# li {}

    color: #ffffff;

    list-style: none;

    line-height: 12px;

    float: right;

    text-align: center;

    margin: 0 2px;

    Police-weight: normal;

    }

    navigation bar-# li.navigation - point-on {}

    navigation bar-# li.navigation - point-off}

    / * tab padding * /.

    bar of navigation-# li div div {padding: 5px 18px ;}}

    / * tab off images side * /.

    li.navigation - point-off div.item - left navigation #-barre {background: transparent url() in top left no-repeat scroll ;}}

    li.navigation - point-off div.item - right navigation #-barre {background: transparent no-repeat scroll top right ;} url()}

    / * tab on the side images * /.

    li.navigation - point-on div.item - left navigation #-barre {background: transparent url() in top left no-repeat scroll ;}}

    li.navigation - point-on div.item - right navigation #-barre {background: transparent no-repeat scroll top right ;} url()}

    / navigation bar links * /.

    navigation bar-# li a: link,.

    navigation bar-# li a: visited,

    navigation bar-# li a: hover,

    #-barre of navigation li a: active {}

    color: #fff;

    text-decoration: none;

    }

    {} #nav - box

    #nav - search {}

    {#nav} - basket

    {#nav} - account

    {} #nav - all - products

    {#nav} - showcase

    / * Left navigation * /.

    {#left-navigation}

    padding: 10px 10px 20px 10px;

    vertical-align: top;

    Width: 200px;

    }

    / * Column Pages * /.

    . One-column #left navigation {display: none ;}}

    . One-column #main - content {padding: 20px; width: 940px ;}}

    #shipping - payment .form_row {text-align: left ;}}

    {#category-tree}

    background-color: #e3dad4;

    padding: 10px;

    }

    {#category - tree - top - image}

    Width: 218px;

    }

    {#category - tree - low - image}

    background: transparent url(images/footer-bottom-bg.jpg) low no-repeat;

    padding-bottom: 29px;

    }

    #category - tree {}

    Display: block;

    text-decoration: none;

    color: #0f0f0f;

    do-size: 12px;

    }

    {div #category - tree}

    border-bottom: 1px solid #eee8e5;

    padding: 10px 0;

    }

    tree-category # level - 1 {a}

    padding: 4px 6px 4px 0;

    background: transparent url() right no-repeat;

    }

    #category - tree level-2 a {padding: 4px 6px 4px 20px ;}}

    #category - tree level-3 a {padding: 4px 6px 4px 30px ;}}

    #category - tree level-4 a {padding: 4px 6px 4px 40px ;}}

    #category - tree level-5 a {padding: 4px 6px 4px 50px ;}}

    #category - tree level-6. a {padding: 4px 6px 4px 60px banner ;}}

    #category - tree div.active End Sub

    {#category-tree-header}

    background: top url(images/categoryTitle-bg.jpg) no-repeat scroll Center;

    height: 46px; Width: 218px;

    padding-bottom: 20px;

    }

    {#category - tree - footer

    background: url(images/catTreeSocialFooter-bg.jpg) no-repeat scroll center top transparent;

    height: 200px;

    Padding: 60px banner 0 0 20px;

    Width: 199px;

    margin-top: 15px;

    }

    #category - tree - Footer img {}

    Width: 35px; height: 35px;

    margin-left: 5px;

    }

    {img.social - icons-first #category - tree - footer

    margin-left: 25px;

    }

    / * Content * /.

    {#content container}

    Clear: both;

    margin: 0;

    background-color: #fff;

    }

    {#main - content

    vertical-align: top;

    Width: 730px;

    }

    / * Header/footer global * /.

    {#global-in-head}

    background: url() not high repetition;

    }

    #logo {}

    height: 79px;

    Width: 213px;

    }

    #logo a {}

    Background: URL(images/logo.gif) no-repeat scroll left top transparent;

    cursor: pointer;

    Display: block;

    height: 79px;

    Width: 320px;

    }

    {#search}

    float: right;

    Padding: 40px 10px 4px 0;

    }

    {#header-links}

    float: right;

    Padding: 40px 12px 0 0;

    line-height: 22px;

    color: #ededed;

    text-align: right;

    }

    {#header-links}

    color: #fff;

    }

    {#global-footer}

    border-top: 1px solid #dbcfca;

    margin: 60px banner 0;

    padding-top: 20px;

    text-align: center;

    }

    #footer - links {}

    color: #bbb0a8;

    }

    #footer - links ul {}

    font: normal .9em Verdana, Helvetica, Arial, without serif.

    margin: 8px 0;

    padding: 0;

    }

    #footer - links ul li {}

    list-style-type: none;

    border-left: 1px solid #bbb0a8;

    padding: 0 2px 0 6px;

    margin: 0;

    text-align: center;

    Display: inline;

    }

    #footer - links li.first - child ul {border: 0 ;}}

    #global-footer #footer - links #footer - plan of the site-link {display: none ;}}

    {#miva-link}

    do-size: .8em;

    margin: 16px 0;

    }

    #miva - link has {color: #999999 ;}}

    #-l ' the page header {clear: both ;}}

    page #-pied {clear: both ;}}

    {#maintenance}

    color: #dd0000;

    make-weight: bold;

    }

    / * ACAD, CADE, AFAD, DAVID, OFC * /.

    {.logout-link

    margin: 12px 0;

    float: right;

    }

    #customer - the label fields.

    {label #affiliate - fields}

    Clear: both;

    float: left;

    padding: 2px 5px 3px 0;

    text-align: right;

    white-space: nowrap;

    Width: 170px;

    }

    label #affiliate - commissions,.

    . {Label editable OSEL .not}

    float: left;

    Width: 120px;

    make-weight: bold;

    text-align: right;

    padding: 0 6px 0 0;

    }

    #customer - input.textfield fields,

    #affiliate - input.textfield fields,

    #tax - input fields,

    #affiliate - div.form_row div commissions,

    div.form_row. fix div {}

    Width: 170px;

    margin: 0 4px 0 0;

    }

    #affiliate - commissions div.form_row div {float: left ;}}

    #customer - select fields.

    #affiliate - fields select {}

    Width: 176px;

    margin: 0 4px 0 0;

    }

    #login-details.

    {#affiliate-Info}

    margin: 16px 0 0 0;

    }

    #affiliate - commissions .form_row {margin: 0 8px 0 0;}

    . {#Affiliate - AFAD fields

    Width: 50%;

    Auto margin: 0;

    }

    . Contact-DAVID #affiliate - #affiliate fields,

    . DAVID #affiliate - #affiliate - commissions {} fields

    float: left;

    Width: 50%;

    }

    {.affiliate-code #affiliate - commissions}

    Width: 230px! important;

    }

    {#affiliate - image #affiliate - commissions}

    Width: 236px! important;

    overflow: auto;

    }

    #affiliate-terms {margin-left: 155px ;}}

    #affiliate - .form_row {div. fix fields

    margin: 0 8px 0 0;

    padding: 2px 0 0 0;

    }

    except-button,

    continue-button {}

    Clear: both;

    text-align: right;

    Padding: 24 PX 0 0 0;

    }

    .required {make-weight: bold ;}}

    {H2. Fields-topic

    background-color: #68635f;

    color: #fff;

    margin: 0 12px 0 0;

    padding: 4px 4px 4px 12px;

    }

    .address2-label {margin: 0 14px 0 0;}

    . Controls {}

    Police: normal Verdana, Helvetica, Arial, without serif .7em;

    visibility: hidden;

    }

    #customer - fields .controls label {}

    float: none;

    }

    #ship-to,.

    Bill - to # {}

    Width: 50%;

    float: left;

    }

    #ship - to input.checkbox h2,

    #bill - h2 {input.checkbox}

    margin: 0 2px 12px 0;

    padding: 0;

    Width: 13px;

    height: 13px;

    overflow: hidden;

    }

    div. Invalid input.textfield,

    div. Invalid select,

    #tax - fields of entry {} div.invalid

    border-color: #cc0000 #ff0000 #ff0000 #ff0000.

    }

    tag div. Invalid {color: #dd0000 ;}}

    . Warning-message {}

    padding: 4px;

    text-align: center;

    Width: 60%;

    Auto margin: 0;

    color: #dd0000;

    }

    #customer - fields.editable .form_row,

    {.form_row #affiliate - fields.editable}

    margin: 6px 0 0 0;

    text-align: left;

    }

    #customer - fields.non-{editable .form_row

    margin: 0 4px 0 0;

    text-align: left;

    }

    #customer - editable fields.non-etiquette.

    #affiliate - fields.non-{editable label

    margin: 0 0 0 30px;

    padding: 0 4px 0 0;

    make-weight: bold;

    Width: 110px;

    text-align: right;

    float: left;

    Clear: both;

    white-space: nowrap;

    }

    #customer - fields.non - editable .form_row div,.

    #affiliate - fields.non - editable .form_row div {}

    float: left;

    }

    {#update-record}

    Clear: both;

    margin: 0 0 24 PX 24 PX.

    }

    label fields .tax {make-weight: bold ;}}

    / * LOGN, AFCL, ORDL ORHL * /.

    . AFCL #main - happy,

    . LOGN #main - happy. {#Main - content ORHL

    Width: 940px;

    }

    . ORHL #main - content {}

    . ORDL #main - content {padding: 28px 16px ;}}

    . AFCL hickiing,

    . LOGN hickiing {}

    float: left;

    height: 220px;

    Width: 49%;

    text-align: center;

    }

    . Hickiing {} ORDL

    float: left;

    height: 220px;

    Width: 33%;

    }

    . .Lookup-section {} ORHL

    float: left;

    height: 220px;

    Width: 50%;

    }

    . {.signin-section ORHL

    float: left;

    height: 220px;

    Width: 48%;

    }

    . Lookup-section .form_row {}

    . SignIn-section .form_row {}

    hickiing h3,

    . Lookup-section h3,

    . SignIn-section h3 {}

    text-align: center;

    padding-bottom: 10px;

    }

    {.form_row}

    margin: 6px 0 0 0;

    text-align: center;

    }

    . Label LOGN,

    . Label ORDL,

    . {Label AFCL

    Clear: both;

    Width: 80px;

    padding: 3px 5px;

    }

    . {Label ORHL

    Clear: both;

    padding: 3px 5px;

    text-align: right;

    white-space: nowrap;

    Width: 90px;

    }

    . Grey-border-right {border-right: 1px solid #cccccc ;}}

    . LOGN-entry {width: 120px ;}}

    {# key invalid

    Width: 23px;

    float: left;

    margin: 0 4px 0 0;

    border-width: 1px;

    border-style: solid;

    border-color: #cc0000 #ff0000 #ff0000 #ff0000.

    }

    {}. sign-in-buttons

    text-align: center;

    margin: 12px 0 0 0;

    }

    {forgot password

    font-size: .9em;

    text-align: center;

    margin: 12px 0 0 0;

    }

    / * BASK, ASTC, OPAY, OSEL SE * /.

    #basket - happy. non-modifiables.

    #basket - happy .editable,

    {Table #order - summary

    Width: 100%;

    border-left: 1px solid #d6d6d6;

    border-top: 1px solid #d6d6d6;

    margin-top: 10px;

    }

    #basket - happy. editable non-table.

    table #basket - happy .editable,

    {Table #order - summary

    border-collapse: collapse;

    Width: 100%;

    }

    #basket - happy editable .non-td,

    TD #basket - happy .editable

    #order - content td {}

    background-color: #fff;

    border-bottom: 1px solid #d6d6d6;

    border-right: 1px solid #d6d6d6;

    vertical-align: top;

    Padding: 6px;

    Police: normal 1em Arial;

    }

    #basket - table of contents table tr.basket - section td,

    #basket - table of contents table tr.basket - section td,

    #order - summary table tr.heading td {}

    background-color: #68635f;

    color: #fff;

    make-weight: bold;

    text-align: center;

    do-size: 1em;

    white-space: nowrap;

    }

    #Basketball-content .basket-Qty-input {width: 34px ;}}

    #Basketball-content .item - delete {}

    Width: 8%;

    vertical-align: middle;

    }

    #basket - table of contents table .basket-section name - td.item {}

    text-align: left;

    }

    #basket - happy .editable .item-quantity {}

    Width: 13%;

    text-align: center;

    white-space: nowrap;

    }

    #basket - happy .non-{.item-editable quantity

    Width: 6%;

    text-align: center;

    }

    #Basketball-content .item-name options .item {padding-left: 16px ;}}

    #basket - happy. fix .item-name {width: 59% ;}}

    #basket - happy .editable .item-name {width: 66% ;}}

    #basket - materials td.item - name {text-align: left ;}}

    # price-.item-basketball-content {}

    Width: 10%;

    text-align: right;

    white-space: nowrap;

    }

    #basket - content total .item {}

    Width: 10%;

    text-align: right;

    }

    #basket - .basket-cost materials .charge-description,.

    #Basketball-content .basket-loads load .formatted {}

    make-style: italic;

    text-align: right;

    white-space: nowrap;

    }

    #basket - #basket summary - totals .formatted-total,.

    #basket - #basket - total summary .total-speedy {}

    make-weight: bold;

    text-align: right;

    }

    #Basketball-content .item-options td {}

    .go .item-quantity {width: 8%! important ;}}

    .go .item-name {width: 64%! important ;}}

    #fields-key {margin: 16px 0 ;}}

    .go-button {}

    margin: 12px 10px;

    text-align: right;

    }

    #payment-{} input fields

    border-width: 1px;

    border-style: solid;

    border-color: #333333 #bbbbbb #bbbbbb #bbbbbb.

    padding: 1px 2px;

    Police: normal Arial, Helvetica, Verdana, without serif 1em;

    }

    {label #payment - fields}

    white-space: nowrap;

    text-align: left;

    padding: 3px 5px 3px 0;

    Clear: both;

    margin: 2px 0 0 0;

    }

    # fields - payment td {}

    padding: 0 6px 0 0;

    }

    #shipping - payment .form_row {margin: 10px 0 0 0 ;}}

    {label #shipping - payment}

    float: left;

    Width: 65px;

    white-space: nowrap;

    text-align: left;

    padding: 3px 5px 3px 0;

    Clear: both;

    margin: 2px 0 0 0;

    }

    . OSEL .continue-button,

    . OPAY .continue-button {}

    margin: 0 12px 0 0;

    }

    . OFC #basket - content {margin: 32px 0 0 0 ;}}

    . OPAY .fields-key {margin: 16px 0 0 0;}

    fields-payment # .form_row {margin: 10px 0 0 0 ;}}

    #customer - fields. fix {margin: 32px 0 0 0;}

    #basket - happy. fix {32px margin: 16px 0 0 ;}}

    / * SRCH, PLST, CTGY, OUS1, OUSM * /.

    . Categoy-registration

    . All products,

    product related,

    *.search-results {}

    Clear: both;

    }

    . Product-item {}

    float: left;

    padding: 0 20px 10px;

    Width: 215px! important;

    }

    {.padding .product-point

    background-color: #fff;

    height: 300px;

    overflow: hidden;

    padding: 20px 10px;

    text-align: center;

    color: #484848;

    border: 1px #dbcfca solid;

    }

    previous-next-.product {}

    Clear: both;

    margin: 12px 0;

    }

    . CTGY .product-details,

    . PLST .product-details,

    . SRCH .product-detail {}

    overflow: hidden;

    text-align: center;

    color: #493933;

    padding: 0;

    margin: 0;

    }

    . Product-point .product-thumbnail {}

    margin: 0 12px 0 0;

    text-align: center;

    }

    . Product-point .product-thumbnail img {}

    border: 0px solid #D6D6D6;

    Max-width: 190px; height: 165PX;

    }

    {.purchase-buttons

    text-align: center;

    margin: 16px 0 0 0;

    }

    . Purchase-buttons input.button {}

    margin: 0 0 0 17px;

    padding: 5px;

    float: left;

    }

    {td.item - .line-point buttons

    white-space: nowrap;

    }

    . Item-buttons input.button {}

    float: left;

    margin: 0 0 0 5px;

    padding: 5px;

    }

    . Point-line tr.header - line td {make-weight: bold ;}}

    {.thumbnail-non-availability

    Display: block;

    Width: 110;

    height: 110px;

    background: transparent url() no-repeat scroll left top;

    Auto margin: 0;

    }

    {image-no-availability

    Display: block;

    background: transparent url() no-repeat scroll left top;

    }

    . Next-previous {margin: 12px 0 0 0 ;}}

    . Next-button {float: right ;}}

    . Previous-button {float: left ;}}

    . Search-new {margin: 0 3px 10px;}

    . {#Main - content OUS1

    padding-left: 225px;

    padding-right: 225px;

    }

    . Upsale-section {text-align: center ;}}

    . OUS1 .product-thumbnail {}

    float: left;

    height: 300px;

    Max-width: 300px;

    text-align: center;

    padding: 0 20px 0 0;

    }

    . OUS1 .product-description {margin: 16px 0 0 0 ;}}

    . OUS1 .thumbnail-non-availability {auto margin: 16px ;}}

    . {#Main - content OUSM

    padding-left: 160px;

    padding-right: 160px;

    }

    {.upsale-lot

    Width: 100%;

    padding: 2px;

    }

    . Upsale-lot .heading td {make-weight: bold ;}}

    . Upsale-box {width: 32px ;}}

    . Upsale-name {width: 175px ;}}

    . OUS1 .purchase-buttons textarea {}

    text-align: center;

    Width: 390px;

    height: 100px;

    }

    . OUSM continue-button {text-align: center ;}}

    .line-article table {width: 99% ;}}

    . Line-item table tr.heading td {make-weight: bold ;}}

    . Line-item table td {}

    padding: 10px;

    {border: 1px solid #ccc}

    . Line-item .item-name {width: 30% ;}}

    tr.alt_row .line-item {background-color: #f4ece7 ;}}

    / * PRODUCT DISPLAY * /.

    .product-details-1 {}

    Width: 48%;

    float: left;

    }

    . Product-details-1 p {}

    text-align: center;

    }

    {.product-details-2

    Width: 48%;

    float: left;

    }

    {.purchase .product-details-2 buttons}

    margin: 16px 0;

    text-align: left;

    Width: 200px;

    }

    . Product-details-2 .purchase-keys {}

    font-size: 17px;

    height: 39px;

    margin: 10px 0 0;

    text-shadow: 2px 2px 2px #496E92;

    Width: 140px;

    }

    .product-image {}

    Max-width: 300px;

    margin: 20px 0;

    text-align: center;

    }

    . Product-image img {}

    Max-width: 300px;

    Max-height: 300px;

    }

    . Product-quantity-input {}

    margin: 4px 0;

    overflow: auto;

    Width: 34px;

    text-align: left;

    }

    {} related products

    Clear: both;

    16px margin: 32px 0 0;

    }

    . Product-attributes {}

    margin: 16px 0;

    text-align: left;

    }

    . Product-attributes td {}

    padding: 4px 0;

    }

    . Product-attributes td.prompt}

    vertical-align: top;

    text-align: left;

    padding-right: 5px;

    }

    . Product-attributes td.field}

    text-align: left;

    }

    / * INVC * /.

    . INVC ordering-id,

    . ADR ordering id {}

    float: left;

    make-weight: bold;

    }

    . INVC ordering date,

    . {. Order-date ADR

    float: right;

    text-align: right;

    }

    . INVC ordering period,

    . . Order date of ADR span {}

    make-weight: bold;

    }

    . INVC h3,

    . ADR h3 {}

    Clear: both;

    margin: 16px 0 24 PX 0;

    }

    / * PATROL * /.

    . PATR .continue-button {}

    text-align: right;

    margin: 12px 0;

    }

    / * SMAP * /.

    . SMAP h3 {}

    }

    . SMAP .category {}

    Width: 33%;

    text-align: left;

    float: left;

    }

    . SMAP .category {} .padding

    padding: 2px;

    }

    . SMAP .product {}

    Width: 33%;

    text-align: left;

    float: left;

    }

    . SMAP .product .padding {padding: 2px ;}}

    / * ORDH, ADR * /.

    table #orderhistory - list {border-collapse: collapse ;}}

    {Table #order - summary

    Width: 100%;

    }

    #order - summary table td.

    #orderhistory - list table td {}

    vertical-align: top;

    }

    #orderhistory - list ordering - reorganize {text-align: center ;}}

    #orderhistory - list ordering-Bill {}

    #orderhistory - list ordering-description {text-align: left ;}}

    #orderhistory - list ordering-date {}

    #orderhistory - ordering-bought list {text-align: center ;}}

    #orderhistory - list ordering quantity {text-align: center ;}}

    #orderhistory - list ordering {text-align: center ;}}

    #orderhistory - followed list ordering {text-align: left ;}}

    #orderhistory - ordering-total list {text-align: right ;}}

    #-orderhistory - ordering rix {text - align:right ;}

    #orderhistory - ordering-view list {}

    vertical-align: middle;

    padding: 0 8px;

    }

    #orderhistory - list tr.heading td {}

    make-weight: bold;

    white-space: nowrap;

    }

    #order - summary table tr td.order - reorganize {text-align: center ;}}

    #order - summary table tr td.order - invoice {}

    #order - summary table tr td.order - description {text-align: left ;}}

    #order - summary table tr td.order - date {text-align: left}

    #order - contents table tr td.order - bought {text-align: center ;}}

    #order - summary table tr td.order - quantity {text-align: center ;}}

    #order - summary table tr td.order - status {text-align: left ;}}

    #order - summary table followed tr td.order {text-align: left ;}}

    #order - summary table tr td.order - total {text-align: right ;}}

    #order - summary table tr td.order - price {text-align: right ;}}

    Description - #order - summary table tr td.charge,

    #order - summary table tr td.charge - fairy {}

    make-style: italic;

    text-align: right;

    }

    #order - summary table tr td.charge - fairy {text-align: right ;}}

    #order - summary table tr td.formatted - total,

    #order - summary table tr td.total - speedy {}

    text-align: right;

    make-weight: bold;

    }

    {#customer-fields}

    margin: 16px 0;

    }

    #Order_BillZip {width: 44px ;}}

    .widest {width: 100% ;}}

    / * Homepage elements * /.

    body. SFNT #left navigation {display: none ;}}

    body. SFNT #main - content {width: 960px; padding: 0 ;}}

    body. SFNT #main - content h1, body. SFNT #main - happy h2, body. H3 #main - content SFNT {margin-left: 20px ;}}

    #header {}

    background: url(images/header.jpg) no-repeat scroll center top transparent;

    height: 280px;

    20px margin: 10px 0 0;

    Width: 960px;

    }

    #header a {}

    position: absolute;

    Width: 940px; height: 250px;

    }

    #header has {span

    display: none;

    }

    {#free-shipping}

    background: transparent url(images/shipping-banner.jpg) top no-repeat;

    Width: 960px; height: 50px;

    padding-bottom: 20px;

    float: left;

    }

    #free - shipping a {}

    position: absolute;

    Width: 940px; height: 46px;

    }

    #free - shipping a span {}

    display: none;

    }

    left-ad # {}

    background: transparent url(images/left-ad.jpg) top no-repeat;

    Width: 460px; height: 132px;

    padding-bottom: 20px;

    margin-top: 20px;

    float: left;

    }

    left-ad # a {}

    position: absolute;

    Width: 460px; height: 132px;

    }

    a span {left-ad #}

    display: none;

    }

    right-ad # {}

    background: transparent url(images/right-ad.jpg) top no-repeat;

    Width: 460px; height: 132px;

    padding-bottom: 20px;

    float: right;

    margin-top: 20px;

    }

    right-ad # a {}

    position: absolute;

    Width: 460px; height: 132px;

    }

    right-ad a span {#}

    display: none;

    }

    / * - Welcome banner-* /.

    {#welcome banner}

    background: url(images/welcome-bg.jpg) no-repeat scroll center top transparent;

    float: left;

    height: 128px.

    margin: 15px 0 0 10px;

    padding-bottom: 10px;

    Width: 687px;

    Display: inline;

    }

    #welcome - banner h1 {}

    color: #523F29;

    margin: 0;

    padding: 0;

    }

    #welcome - banner p {}

    color: #523f29;

    Width: 650px;

    margin-top: 10px;

    }

    #welcome - banner a {}

    color: #523f29;

    text-decoration: underline;

    margin-top: 10px;

    padding: 0 20px 10px 20px;

    }

    / * - end welcome banner-* /.

    / * - End newsletter-* /.

    {#social-media}

    background: url(images/socialMedia-bg.jpg) no-repeat scroll center top transparent;

    float: left;

    height: 128px.

    margin: 15px 0 0 20px;

    Width: 220px;

    Display: inline;

    }

    # media social .the-icon {}

    display: inline;

    float: left;

    margin: 55px 0 0 18px;

    padding: 0;

    }

    / * - End newsletter-* /.

    / *-subpages-* /.

    #main - content h1 {}

    margin: 0 20px 20px 10px;

    color: #0f0f0f;

    }

    / * - image css machine-* /.

    .thumbnails {}

    display: block;

    margin: 0 0 0 60px banner;

    padding: 0;

    Width: 230px;

    }

    .thumbnails li {}

    Display: block;

    float: left;

    margin: 5px 5px 0 0;

    padding: 0;

    Width: 150px;

    height: 150px;

    text-align: center;

    border: 1px solid #eeeeee;

    cursor: pointer;

    }

    .thumbnails li span {}

    Display: inline-block;

    height: 100%;

    text-align: center;

    vertical-align: middle;

    }

    .thumbnails li img {}

    vertical-align: middle;

    }

    {.swatches}

    Display: inline;

    margin: 0;

    padding: 0;

    }

    . Swatches li {}

    Display: block;

    float: left;

    margin: 4px 4px 0 0;

    padding: 0;

    Width: 50px;

    height: 50px;

    text-align: center;

    border: 1px solid #eeeeee;

    cursor: pointer;

    }

    . Swatches li span {}

    Display: inline-block;

    height: 100%;

    text-align: center;

    vertical-align: middle;

    }

    . Swatches li img {}

    vertical-align: middle;

    }

    {.product-image-margin

    height: 8px;

    }

    {.closeup}

    position: absolute;

    top: 150px;

    Padding: 15px;

    Background: #fff;

    border: 3px solid #eaeaea;

    text-align: center;

    display: none;

    z index: 9999;

    min-width: 274px;

    min-height: 274px;

    border-radius: 5px;

    -moz-border-radius: 5px;

    -webkit-border-radius: 5px;

    box-shadow: rgba(0,0,0, 0.75) 0px 0px 25px;

    -moz-box-shadow: rgba(0,0,0, 0.75) 0px 0px 25px;

    -webkit-box-shadow: rgba(0,0,0, 0.75) 0px 0px 25px;

    }

    . CloseUp a {}

    cursor: pointer;

    position: absolute;

    right:-15px;

    top:-15px;

    z index: 9999;

    Color: #ff0000;

    }

    {#closeup - legend

    margin: 15px 15px 0;

    padding: 5px;

    Police: "BOLD" 14px Arial, Helvetica, without serif.

    color: #fff;

    Background: #666;

    -moz-border-radius: 5px;

    -webkit-border-radius: 5px;

    box-shadow: rgba(255,255,255, 0.75) 0px 0px 25px;

    display: none;

    }

    {.closeup_backing}

    position: absolute;

    left: 0px;

    Top: 0px;

    Background: #000;

    Background: RGBA (0,0,0,.6);

    Filter:alpha(opacity=60);

    Width: 100%;

    z-index: 100;

    }

    . CTGY .product-details .product name.

    . PLST .product-details .product name.

    . SRCH .product-details .product-name {}

    height: 40px;

    }

    Holy Mexican mole sauce! That's a lot of CSS code.

    All you really need is this:

    {body

    Background: #2 c 2825 url(images/topBg-repeat.jpg) no repeat center top fixed;

    }

    See a live demonstration:

    http://ALT-Web.com/demos/fixed-background.shtml

    Nancy O.

    ALT-Web Design & Publishing

    Web | Graphics | Print | Media specialists

    http://ALT-Web.com/

  • working with sensitive information in help

    All,

    I'm looking for advice on how to deal with including 'sensitive' information in help. Specifically, there is a demand to add information in the help about how our software security settings are managed (i.e. implementation of the security settings for the user to access certain areas or features to the bosom of our software).

    With regard to access, what is the best method or more recommended limit this information to only some users (i.e. system administrators our customers), without their end-users, seeing her? The question would be a 'normal' user access this information and to find a way to change their own settings without the authorization or consent of their sys admin

    The most immediate idea would be to maintain separate versions of "Admin" and "End user" of the help system. It would not be a lot of work on my end, but I don't know if long-term interest to have there different versions are circulating, and of course if a user finds where assistance focused on the admin is...

    I am open to all ideas. FWIW, we use 7 HR and our help is in the Microsoft HTML (.chm) files.

    Hi Lisa

    You can do this by using JavaScript. But it is far from sure. Click here to visit a page that proves it and provides the script.

    See you soon... Rick

  • Width of the image resizing IE in div - CSS help please

    link: http://www.salmansolutions.com/about.html the bullets in the left navigation div are the issue. I tried resizing, using a different image chip which is more square, put online before the descriptive text, put the ball in the CSS list-style- image (blurred with a weird background makes). Can someone tell me why this happens and how to fix it?
    < div id = "hovernav" >
    < ul id = "navigation-left" >
    "< li = 'n-principles' id > < a href =" guidingprinciples.html"> < span > < img src =" dingbullet.png "alt ="ding"width ="20"height ="8"/ > principles </span > < /a > < /li >
    "< id li ="n-Gallery"> < a href =" gallery.html"> < span > < img src =" dingbullet.png "alt ="ding2"width ="20"height ="8"style =" width: 20px; height: 8px; "/ > </Span > < /a > < /li > Gallery
    "< id li ="n-experience"> < a href ="experience.html"> < span > < img src ="dingbullet.png"alt =" "width ="20"height ="8"style =" width: 20px; " height: 8px; ' / > experience </span > < /a > < /li > < /ul >
    < / div >


    style sheet

    {#list3}
    margin: 0em;
    padding: 0px 0px 10px-10px;
    text-indent:-14px;
    do-family: Georgia, "Times New Roman", Times, serif;
    do-size: 12px;
    }


    The best method with a graphics chip, frankly, is to make the
    no repetitive background of the list item and add a left padding to push
    the text to the right, for example,.

    Li {}
    background-image: url (whatever.jpg); background-repeat: repeat no.; padding-left: 20px; list-sty le-type: none;
    }

    The style of list-style-type is to completely eliminate fleas in the normal lists.

    --
    Murray - ICQ 71997575
    Adobe Community Expert
    (If you * MUST * write me, don't don't LAUGH when you do!)
    ==================
    http://www.projectseven.com/go - DW FAQs, tutorials & resources
    http://www.dwfaq.com - DW FAQs, tutorials & resources
    ==================

    "houstonalle" wrote in message
    News:g9gsni$CV2$1@forums. Macromedia.com...
    > link: http://www.salmansolutions.com/about.html bullets in
    > the
    > left navigation div are the issue. I tried resizing, using a different image
    > ball
    > It is more square, put in line in front of the descriptive text.
    > putting
    > the ball in CSS like list-style-image (makes it fuzzy with a weird
    (> background). Can someone tell me why this happens and how to fix it?
    >


    >
    >
    > stylesheet
    >
    > #list3 {}
    > margin: 0em;
    > padding: 0px 0px 10px-10px;
    > text-indent:-14px;
    > do-family: Georgia, "Times New Roman", Times, serif;
    > do-size: 12px;
    > }
    >
    >
    >
    >

  • Adding sensitive Images of XML

    I have people,

    I'm working on my first Web Site responsive.

    I work in XML (two dogs databases that contain the details for each dog and the paths to the image files).

    The site is made with Bootstrap3, HTML5 and CSS3. I already have all the data connections that is not a problem.

    What is the best way to insert my images from XML in my Bootstrap-HTML pages using Dreamweaver to make them responsive and optimized properly?

    I hope that's not too complicated!

    Thanks to anyone who can help me.

    Sylvia

    That's what I've tried so far-

    It's my XML

    <?xml version="1.0" encoding="utf-8"?>
    <breeder>
      <boys>
      <dog>
       <dogs_id>0025</dogs_id>
       <url><img src="/images/boys/dog_profile.jpg" width="530" height="607" alt="Photo of Dog " class="img-responsive image-holder"/></url>
    </dog>
      </boys>
      </breeder>
    

    HTML code of the page

    var dogsImageName = dog.find('url').html ();

    $("#dogsImageHolder").empty ();

    $("#dogsImageHolder").append ("< html >" + dogsImageName + '< /html >');

    < div class = "col-xs-12 col-sm-12 col-md-5 col-lg-5" >

    < div class = "image door-img-reagent" id = "dogsImageHolder" > < / div >

    < / div >

    In Photoshop, I know how to make generator export Adobe and the process of Extraction of the PSD.

    IN Dreamweaver CC, I tried the following three methods to insert images.

    According to W3C When you use the bootstrap information what I have to do is - this

    Then add the .img-responsive class in my CSS. It applies display: block; and max-width: 100%; and height: auto; to the image:

    It works well, but what is the size of the image export from the src =? If I use the larger size, I have a heavy page. The smallest looks terrible during the enlargement process.

    There is the < image > method. Apparently, it's better for when you need to do the art direction, I need this.

    And finally the SRCSET method

    < img src = "small.jpg"

    srcset = "large.jpg 1024w medium.jpg 640w, 320w small.jpg"

    Dimensions = "(min-largeur: 36em)" 33.3vw, 100vw ""

    ALT = 'A rad Wolf' >

    It is difficult to say without seeing the site itself, what size you should take your images.

    You should almost never allow an image to expand it beyond its size native pixel.

    Using max-width: 100% instead of width: 100% in your css will allow the image to cater for smaller devices. It will shrink with your page as the browser window is made smaller, but it will get not much larger than its native pixel dimensions.

  • CSS help

    I want to change the color of my div box for certain pages of my site in my css, but do not know what code to use someone can help I know its simple, but I can't get this right.

    It's my css if you scroll to the bottom where it says body.events is where I want to change the box color thank you.

    I pointed out the css box and events in purple

    /*!

    * Throw Bootstrap - Business Casual theme Bootstrap (http://startbootstrap.com)

    * Code licensed under the Apache 2.0 license.

    * For more details, see www.Apache.org/licenses/license-2.0 .

    */

    {body

    do-family: ' open without ","Helvetica Neue", Helvetica, Arial, sans-serif;

    -webkit-background-size: cover;

    -moz-background-size: cover;

    background-size: cover;

    -o-background-size: cover;

    background-attachment: fixed;

    background-repeat: no-repeat;

    background-position: Center;

    background-image: url (.. / img/event%20places%20pictures/3arena.jpg);

    -webkit-background-size: cover;

    Color: #000;

    padding-bottom: 60px banner;

    }

    H1,

    H2,

    H3,

    H4,

    H5,

    H6 {}

    text-transform: uppercase;

    do-family: "Josefin slab", "Helvetica Neue", Helvetica, Arial, sans-serif;

    make-weight: 700;

    letter-spacing: 1px;

    text-align: left;

    }

    {p}

    line-height: 1.6;

    Color: #000;

    }

    {h}

    Max-width: 400px;

    border-color: #000000;

    }

    . Brand new,

    {p:System.NET.Sockets.IPPacketInformation.address-bar

    display: none;

    }

    {.navbar-brand

    text-transform: uppercase;

    Police-weight: 900;

    letter-spacing: 2px;

    }

    {.navbar-nav

    text-transform: uppercase;

    Police-weight: 500;

    letter-spacing: 3px;

    }

    full {} .img

    min-width: 100%;

    }

    . Brandnew-before,

    {. Brand new-name

    text-transform: capitalize;

    }

    . Brand new-front {}

    margin: 15px 0;

    }

    {. Brand new-name

    margin: 0;

    font size: 4;

    }

    {.tagline-divider

    margin: auto 15px 3px;

    Max-width: 250px;

    border-color: #999999;

    }

    . Box {}

    margin-bottom: 20px;

    padding: 30px 15px;

    background-color: rgba (255,255,255,0.6);

    }

    {text .intro

    text-transform: uppercase;

    font size: 1.25em;

    Police-weight: 400;

    letter-spacing: 1px;

    }

    .IMG-border {}

    float: none;

    margin: auto 0 0;

    border: 1px solid #999999;

    }

    .img-left {}

    float: none;

    margin: auto 0 0;

    }

    {.navbar-footer

    background: rgba (255,255,255,0.8);

    }

    footer p {}

    margin: 0;

    Padding: 50px 0;

    }

    @media screen and (min-width: 768px) {}

    {. Brandnew}

    display: inherit;

    margin: 0;

    padding: 0 10px 30px;

    text-align: center;

    text-shadow: 1px 1px 2px rgba (0,0,0,0.5);

    do-family: "Josefin slab", "Helvetica Neue", Helvetica, Arial, sans-serif;

    font size: 5th;

    make-weight: 700;

    line-height: normal;

    color: #fff;

    background - color:RGBA (51,51,51,0.7);

    text-shadow: 2px 2px #000;

    }

    () .top-divider

    margin-top: 0;

    }

    .img-left {}

    float: left;

    right margin: 25px;

    }

    {p:System.NET.Sockets.IPPacketInformation.address-bar

    display: inherit;

    margin: 0;

    padding: 0 0 40px;

    text-align: center;

    text-shadow: 1px 1px 2px rgba (0,0,0,0.5);

    text-transform: uppercase;

    font size: 1.25em;

    Police-weight: 400;

    letter-spacing: 3px;

    color: #fff;

    background-color: rgba (51,51,51,0.7);

    text-shadow: 2px 2px #000;

    }

    .the {}

    background-color: rgba (51,51,51,0.7);

    display: inherit;

    margin: 0;

    padding-bottom: 20px

    }

    .the li {}

    Display: inline;

    }

    button-share-.fb {}

    position: relative

    top:-7px;

    }

    .FB-like > span {}

    vertical-align: baseline! important;

    }

    {.navbar}

    border-radius: 0;

    }

    {.navbar headed

    display: none;

    }

    {.navbar}

    min-height: 0;

    }

    {.navbar - default

    border: none;

    Background: RGBA (255,255,255,0.8);

    }

    . NAV > li > a {}

    Padding: 25px;

    }

    .NavBar-nav > li > a {}

    line-height: normal;

    }

    {.navbar-nav

    Display: table;

    float: none;

    margin: 0 auto;

    table-layout: fixed;

    font size: 1.15em;

    }

    }

    @media screen and (min-width: 1200px) {}

    . Box: after {}

    content: ";

    Display: table;

    Clear: both;

    }

    / * start of the css for every page of the Conference * /.

    {Body.Gallery}

    background-image: url (.. / img/event%20places%20pictures/3arena.jpg)

    }

    {Body.Academy}

    background-image: url (.. / img/event%20places%20pictures/the%20academy.jpg)

    }

    {Body.Vicar}

    background-image: url (.. / img/event%20places%20pictures/vicar%20st.jpg)

    }

    body. Ambassador {}

    background-image: url (.. / img/event%20places%20pictures/Ambassador.jpg)

    }

    {Body.Aviva}

    background-image: url (.. / img/event%20places%20pictures/aviva.jpg)

    }

    {Body.Arena}

    background-image: url (.. / img/event % 20places %20pictures/02-Arena.jpg)))

    }

    {Body.Croke}

    background-image: url (.. / img/event%20places%20pictures/croke%20park.jpg)

    }

    {Body.Gaiety}

    background-image: url (.. / img/event%20places%20pictures/gaiety-theater.jpg)

    }

    {Body.Gate}

    background-image: url (.. / img/event%20places%20pictures/gate%20theatre.jpg)

    }

    {Body.grand}

    background-image: url (.. / img/event%20places%20pictures/grand%20social.jpg)

    }

    {Body.Laughter}

    background-image: url (.. / img/event%20places%20pictures/laughter%20lounge.jpg)

    }

    {Body.marlay}

    background-image: url (.. / img/event%20places%20pictures/marlay%20park.jpg)

    }

    {Body.Olympia}

    background-image: url (.. / img/event%20places%20pictures/the-olympia-photo.jpg)

    }

    {Body.RDS}

    background-image: url (.. / img/event%20places%20pictures/rds.jpg)

    }

    {Body.Button}

    background-image: url (.. / img/event%20places%20pictures/The_Button_Factory.jpg)

    }

    Body.Whelans {background-image: url (.. / img/event%20places%20pictures/whelans.jpg)}

    }

    Body.signup {background-image: url (.. / img/bianca%20photos/IMG-20150717-WA0024.jpg)}

    }

    {Body.Events}

    background-image: url (.. / img/bianca%20photos/IMG-20150717-WA0024.jpg)

    }

    On your page, the class is "box" and not "events-box.  Because the names match not the CSS will not apply.  Once you synchronize the names so that they match, one way or the other, the CSS must be returned.

  • Gallery of sensitive images in Dreamweaver?

    Hello!

    I'm a designer that makes artist websites and I built galleries of images for them years but now must make the sensitive media. I just bought PVII affinity claiming to easily convert pages of models in CSS. Well as the basic content is to translate well, I can't find a way to translate the Photo Albums of Dreamweaver (usually 12 to 20 images per gallery). Can someone suggest an option for someone who is stronger on the design as on the code, which will work in Dreamweaver CS6 w / affinity?

    Tamlyn

    FancyBox is a nice enough image gallery script, can be made sensitive and quite well documented: fancyBox - fancy Lightbox Alternative jQuery

    If you want to be able to use DW dialog boxes to create your gallery, PVII has some very nice to do the same extensions. I think it's like 'image gallery magic' or similar name.

  • Drop Nav sensitive, sensitive image of centering, footer problem questions

    I'm hoping to help with the coding. I spent a lot of time trying to learn and do it myself, but I'm stuck.

    I have three questions right now:

    1 I know how set up the HTML for a menu drop down under 'products', but with the folding style of nav, I can't work properly.

    2 I know it's basic, but I can't Center the image of background hover at the div.

    3 Osgood has been kind enough to help with this page, but his links footer were side by side. I needed a third and I can't get them lined up correctly when the size falls to "smartphone" I'm sure it's because of my clumsy coding and I guess I have to give to each link an ID then float them but I'm not sure. "»

    <! DOCTYPE HTML >

    < html >

    < head >

    < meta = "charset = utf-8 >"

    Leather Arts Lapinel < title > < / title >

    < name meta = "viewport" content = "width = device-width;" initial-scale = 1.0; maximum scale = 1.0; user-scalable = 0; ">

    < link href =' http://fonts.googleapis.com/css?family=Overlock:400, 700 | Simonetta:400, 900 | Marcellus | Junge"rel ="stylesheet"type =" text/css"> "

    < style >

    header, nav {} section

    display: block;

    }

    * {

    box-sizing: border-box;

    }

    {body

    do-family: "Marcellus", normal;

    background-image: url(DRA-042010-LeatheryTexture-MBFT.jpg);

    do-size: 90%;

    line-height: 140%;

    color: #555;

    margin: 0;

    padding: 0;

    background-color: #FFF;

    }

    {#hover-image}

    background-color: #cfc6b0

    }

    IMG {}

    Max-width: 100%;

    height: auto;

    }

    . Container {}

    Width: 85%;

    Max-width: 1000px;

    margin: 0 auto;

    Color: #000;

    }

    header h1 {}

    font size: 300%;

    line-height: 150%;

    text-align: center;

    letter-spacing: 4px;

    padding: 20px; 0

    Color: #000;

    make-weight: bold;

    }

    {of NAV

    background-color: #E5E4E2;

    }

    NAV ul {}

    display: block;

    text-align: center;

    margin: 0;

    padding: 0;

    }

    nav li {}

    margin: 0;

    padding: 0;

    display: inline;

    }

    NAV a {}

    display: inline-block;

    text-decoration: none;

    padding: 10px 25px;

    color: #555;

    }

    NAV a: hover {}

    background-color: #cfc6b0;

    }

    .about {}

    padding: 0 8%;

    margin: 0 auto;

    text-align: center;

    background-color: #E5E4E2;

    }

    .on h2 {}

    font-size: 260%;

    line-height: 200%;

    margin: 0;

    padding: 0;

    }

    .on p {}

    do-size: 110%;

    line-height: 150%;

    margin: 0;

    padding: 0 0 20px 0;

    }

    {.productsWrapper}

    background-color: #000;

    overflow: hidden;

    padding: 30px 25px;

    }

    . Product {}

    float: left;

    Width: 25%;

    Padding: 12px;

    text-align: center;

    color: #fff;

    }

    . Product img {}

    border: 1px solid #fff;

    }

    {.view_details}

    text-decoration: none;

    display: inline-block;

    padding: 20px 15px;

    border-radius: 6px;

    border: 1px dotted #ccc;

    color: #555;

    background-color: #fff;

    }

    {.view_details:hover}

    background-color: #E5E4E2;

    }

    {#mobileTrigger}

    padding: 10px 25px;

    do-size: 120%;

    display: none;

    Color: #000;

    }

    footer {}

    Clear: both;

    background-color: #cfc6b0;

    padding: 30px;

    color: #fff;

    text-align: center;

    make-weight: bold;

    }

    footer a {}

    text-decoration: none;

    Color: #000;

    }

    @media screen and (max-width: 786px) {}

    . Container {}

    Width: 100%;

    }

    . Product {}

    Width: 50%;

    }

    NAV ul {}

    display: none;

    }

    {#mobileTrigger}

    display: block;

    text-align: right;

    }

    nav li {}

    display: block;

    text-align: left;

    }

    NAV a {}

    display: block;

    do-size: 120%;

    border-bottom: 1px solid #ccc;

    }

    }

    @media screen and (max-width: 480px) {}

    . Product {}

    float: none;

    Width: 100%;

    }

    }

    body, td, th {}

    Police-family: Marcellus, normal;

    }

    #copyright {}

    Color: #000;

    make-weight: bold;

    }

    < / style >

    " < script type =" text/javascript"src =" http://lapinelarts.com/JS/jQuery-1.11.2.min.js "> < / script > .

    " < script type =" text/javascript"src =" http://lapinelarts.com/JS/jQuery.cycle2.min.js "> < / script > .

    < script >

    {$(document) .ready (function ()}

    {$('#mobileTrigger') ('cursor', 'pointer') .css ravishing (function ()}

    $('_nav_ul').toggle ();

    });

    $(window) .one ("Resize", function() {}

    var win = $(this); This = window

    If (win.width () > = 787) {$('_nav_ul').show () ;}

    If (win.width () < = 786) {$('_nav_ul').hide () ;}

    });

    });

    function MM_swapImgRestore() //v3.0 {}

    var i, x = offline. MM_sr; for (i = 0; a & & I <.) Length & & (x = a [i]) & & x.oSrc; i ++) x.src = x.oSrc;

    }

    function MM_preloadImages() {//v3.0

    var d = document; If (d.images) {if(!d.MM_p) d.MM_p = new Array();

    var i, j is d.MM_p.length, a = MM_preloadImages.arguments; for (i = 0; i <.) Length; i ++)

    If (a [i].indexOf("#")! = 0) {d.MM_p [j] = new Image; d.MM_p [j ++] .src = a [i] ;}}

    }

    function MM_findObj (n, d) {//v4.01

    var p, i, x;  if(!d) d = document; If ((p = n.IndexOf ("?")) > 0 & & parent.frames.length) {}

    d = parent.frames [n.Substring(p+1)] .document; n = n.Substring (0, p) ;}

    If (!) () x = d [n]) & & copyrights) x = d.all [n]; for (i = 0;! x & & i < d.forms.length; i ++) x = d.forms [i] [n];

    for (i = 0;! x & & d.layers & & I < d.layers.length; i ++) x = MM_findObj (n, d.layers [i] .document);

    If (! x & & d.getElementById) x = d.getElementById (n); Return x;

    }

    function MM_swapImage() {//v3.0

    var i, j = 0, x, a = MM_swapImage.arguments; document. MM_sr = new Array; for (i = 0; i <(a.length-2); I += 3).

    If ((x = MM_findObj (a [i]))! = null) {document. MM_sr [j ++] = x; if(!x.oSrc) x.oSrc = x.src; x.SRC = a [i + 2] ;}

    }

    < /script >

    < / head >

    < body onLoad = "MM_preloadImages('810_0776_edited-smaller.jpg')" >

    < div class = "container" >

    < header >

    < h1 > LAPINEL ARTS LEATHERWORKS < / h1 >

    < nav >

    < div id = "mobileTrigger" > MENU OPEN < / div >

    < ul >

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

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

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

    < /li >

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

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

    < /ul >

    < / nav >

    < / header >

    < section class = "cycle-slideshow" >

    " < img src = ' http://lapinelarts.com/leather page web/DSC_0035_edited-1. "JPG" > "

    " < img src = ' http://lapinelarts.com/leather web page/DSC_0531_4925.JPG "> "

    " < img src = ' http://lapinelarts.com/leather page web/DSC_1595_edited - 1.jpg "> "

    " < img src = ' http://lapinelarts.com/leather page web/DSC_1593_edited - 1.jpg "> "

    " < img src = ' http://lapinelarts.com/leather web page/DSC_1821.jpg "> "

    < / section >

    < section class = 'about' >

    About Us < h2 > < / h2 >

    < p > Cathy runs all aspects of the present in home-based business. The first step is to buy high quality skins, planning of the cutting process and the preparation for cuts of design. Then is the preparation of all parties that will eventually become belts, cuffs, handbags, clutches, wallets and bags. It is followed by the use of the original designs & amp; stain choices, models, either by stamping, cutting and coloring or by hand. Then is sewing, placement of material, finishing and application of elbow grease for the borders fine finish of the product. Finally, there is the application thorough different finishes to improve and protect the element while almost all the elements are drawings of art performance unique Cathy accept commisioned work. < /p >

    < p > < strong > many of these products are pieces of functional art leather. Some are capricious in nature, some more traditional, but they are all designed in the House. Please enjoy the image of Mr. Squirrel below. < facilities > < / p >

    < / section >

    < div id = "hover-image" >

    "< a href =" # "Mm_swapimgrestore" onMouseOver = "MM_swapImage ('Image6 '", ' 810_0776_edited - smaller.jpg', 1) "> < img id ="Image6"src ="810_0775_smaller.jpg"> < / has > < / div >

    <>footer

    < a href = "mailto: " [email protected] "> E-MAIL CATHY < /a > .

    " < a href =" https://www.Facebook.com/LapinelArtsLeatherwork "> FACEBOOK < /a > < span id = 'copyright' > COPYRIGHT 2015 </span > < / footer > .

    < / div >

    < / body >

    < / html >

    deloid101 wrote:

    Thank you!

    My questions that you helped me with were:

    1 I know how set up the HTML for a menu drop down under 'products', but with the folding style of nav, I can't work properly.

    I have to study the police great web page and the stylesheet that I still don't understand. I know it works, but I would like to know why.

    http://MaxCDN.bootstrapcdn.com/font-awesome/4.3.0/CSS/font-awesome.min.CSS">

    As long as you have a link in your page for the impressive css fonts, you can then use to insert icons into your page using the class name specified on the impressive site of the police.

    I find is only the icons in most of the cases are too heavy in weight. Would be nice if they had a lighter weight option.

  • Need CSS help... Please

    Hello

    I am a photographer who fights with DW CS5.  I spent a few hours trying to understand a CSS code, and I struck out.  I hope that one of the experts here will be kind enough to look and point me in the right direction.

    I just installed a plugin to make a web gallery that will work well in Safari on an iPad or iPhone Lightroom.  (My main site is Flash-based, so it won't work on mobile devices.)  I'm trying to change some colors in the web gallery, and this is where I have a problem.

    Here is a test of the mobile site (images of the sample, not the finals):

    http://www.johnblaustein.com/ipad_test/

    I can set the page background color in Lightroom (c4c0b4), and I added my own identity with a matching background color plate.  (These correspond to my main site).

    Q: what is the CSS code to change the color of the black bar at the top of the page, including all margins?

    Q: what is the CSS code to change the color of the text in the black bar (text goes here if wanted)?

    Q: what is the CSS code to change the color of the white background to select which album to see?

    If you click on one of the albums... then...

    Q: what is the CSS code to change the color of the black bar at the top of the page, including all margins?

    Q: what is the CSS code to change the color of the text in the black bar (GROUP #)?

    I'd appreciate really any help you can give me.

    The CSS files are pasted below.

    Thank you very much!

    John

    www.johnblaustein.com (primary site)

    ---------------------------------------------------------------------------------

    STYLES. CSS

    body {padding: 0; margin: 0; do-family: 'Lucida Grande', Arial, Helvetica, Verdana, without serif; color: #444340; min-height: 417px ;}}

    H1 {}

    color: #CCC;

    text-align: right;

    font size: 1.3em;

    padding: 10px 15px;

    margin: 0;

    }

    H2 {make-size: 1.1em; padding: 10px; margin: 0 ;}}

    IMG {border: none ;}}

    a {color: #444340 ;}}

    #logo {}

    Display: block;

    float: left;

    position: absolute;

    left: 5px;

    top: 5px;

    Max-height: 50px;

    Max-width: 70px;

    }

    #Header {}

    Background: #000000;

    background:-moz-linear-gradient(top, #303130 0%, #000101 100%).

    background:-webkit-gradient (linear, left top, left bottom, color-stop(0%,#303130), color-stop(100%,#000101));

    height: 61px;

    padding: 0;

    border-bottom: 1px solid #3c3c3c;

    }

    #Header img {display: block; margin: 0 auto 0 ;}}

    #MainContent {padding-bottom: 30px ;}}

    #Footer {padding: 10px; border-top: none ;}}

    #SocialLinks {padding: 10px 0 0 0 ;}}

    #SocialLinks: after {clear: penalties; content: "."; display: block; height: 0; visibility: hidden ;}}

    #SocialLinks a {display: block; float: left; padding-right: 15px ;}}

    . Gallery {list-style: none; padding: 0; margin: 0 ;}}

    . Gallery: after {clear: penalties; content: "."; display: block; height: 0; visibility: hidden ;}}

    . Gallery li {}

    background-repeat: repeat no.;

    text-align: center;

    vertical-align: middle;

    float: left;

    / * Width: 33.33333333%; * /}

    /*. Gallery li a {display: block; margin: 5px; border: 1px solid #3c3c3c ;} * /}

    . Gallery li img {}

    background-repeat: repeat no.;

    background-position: center;

    vertical-align: middle;

    text-align: center;

    display: block;

    Width: 75px;

    height: 75px;

    / * Width: 100%;

    height: auto; */

    }

    / * To get examples of the inline only * /.

    #PhotoSwipeTarget {width: 100%; height: 200px ;}}

    #Indicators {text-align: center; margin-top: 20px ;}}

    #Indicators span {display: inline-block; height: 10px; width: 10px; margin: 10px 0 0 0; padding: 0; - webkit-border-radius: 5px; - moz-border-radius: 5px; - o-border-radius: 5px; border-radius: 5px; background: #c5c5c5; overflow: hidden ;}}

    #Indicators span.current {background: #EEBF02 ;}}

    / * LIST GALLERIES * /.

    #AlbumContent ul li {display: block; clear: both; position: relative; list-style-type: none}

    #AlbumContent ul li: first - child {}

    border-top: 1px solid #d5d5d5;

    -moz-border-radius - topleft:10px;

    -webkit-border-top-left-radius: 10px;

    -moz-border-radius - topright:10px;

    -webkit-border-top-right-radius: 10px;

    }

    #AlbumContent ul li: last - child {}

    -moz-border-radius - bottomleft:10px;

    -webkit-border-bottom-left-radius: 10px;

    -moz-border-radius - bottomright:10px;

    -webkit-border-bottom-right-radius: 10px;

    }

    {#Albumlist}

    }

    #Albumlist li {}

    list-style-image: none;

    padding: 5px 5px 5px 6px;

    border: 1px solid #d5d5d5;

    margin-right: 30px;

    border-top: none;

    Background: #fff url (.. / images/listArrow.png) no-repeat right;

    overflow: hidden;

    font size: inherit;

    }

    li > a

    {

    display: block;

    margin:-6px 0 - 6px 0;

    padding: 0 14px 10px 4px;

    text-decoration: none;

    Color: inherit;

    Background: url (.. / images/listArrow.png) no-repeat Center right;

    }

    {#button}

    Display: block;

    float: left;

    position: absolute;

    left: 5px;

    top: 14px;

    padding-left: 3px;

    padding-right: 3px;

    height: 30px;

    min-width: 35px;.

    Max-width: 60px banner;

    line-height: 30px;

    do-family: inherit;

    do-size: 12px;

    make-weight: bold;

    color: #FFFFFF;

    text-shadow: rgba (0, 0, 0, 0.6) 0px - 1px 0;

    text-overflow: ellipsis;

    text-decoration: none;

    white-space: nowrap;

    width of the border: 8px 0 0 14px;

    Background: url (.. / images/btnBack.png) no-repeat;

    -webkit-border-image: url (.. / images/btnBack1.png) 0 8 0 14.

    }

    ---------------------------------------------------------------------------------

    FWD. CSS

    /*

    * photoswipe.css

    * Copyright (c) %% year %% by Code Computerlove (http://www.codecomputerlove.com)

    Under the license MIT

    *

    * Default styles for FWD

    * Avoid any position or side based styles

    * When possible, except if specified already here.

    * The gallery works automatically to the item of the Gallery

    * positions etc.

    */

    Body.PS - active, body.ps, div.ps-, div.ps-building - building

    {

    Background: #000;

    overflow: hidden;

    }

    Body.PS - active *, div.ps - active *.

    {

    -webkit-tap-highlight color: rgba (255, 255, 255, 0);

    display: none;

    }

    Body.PS - active *: focus, div.ps - active *: update

    {

    outline: 0;

    }

    / * Document overlay * /.

    / * div PS-paper-Overlay

    {

    Background: #000;

    }*/

    / * UILayer * /.

    {div. PS-uilayer

    Background: #000;

    cursor: pointer;

    }

    / * Zoom/pan/rotate layer * /.

    {div. PS-zoom-pan-rotation

    Background: #000;

    }

    div. PS-zoom-pan-rotation * {display: block ;}}

    / * Carousel * /.

    div. PS-carousel-point-loading

    {

    Background: url (.. / images/loader.gif) Center no repetition;

    }

    div. PS-carousel-point-error

    {

    Background: url (.. / images/error.gif) Center no repetition;

    }

    / * Legend * /.

    div. PS-legend

    {

    Background: #000000;

    background:-moz-linear-gradient(top, #303130 0%, #000101 100%).

    background:-webkit-gradient (linear, left top, left bottom, color-stop(0%,#303130), color-stop(100%,#000101));

    border-bottom: 1px solid #42403f;

    color: #ffffff;

    font size: 13px;

    do-family: 'Lucida Grande', Arial, Helvetica, Verdana, sans-serif;

    text-align: center;

    }

    div. PS-legend * {display: inline ;}}

    div. PS-legend-low

    {

    border-top: 1px solid #42403f;

    border-bottom: none;

    min-height: 44px;

    }

    div. PS-legend-content

    {

    Padding: 13px;

    display: block;

    }

    / * Toolbar * /.

    div. PS-toolbar

    {

    Background: #000000;

    background:-moz-linear-gradient(top, #303130 0%, #000101 100%).

    background:-webkit-gradient (linear, left top, left bottom, color-stop(0%,#303130), color-stop(100%,#000101));

    border-top: 1px solid #42403f;

    color: #ffffff;

    font size: 13px;

    do-family: 'Lucida Grande', Arial, Helvetica, Verdana, sans-serif;

    text-align: center;

    height: 44px;

    Display: table;

    table-layout: fixed;

    }

    div. PS-toolbar * {}

    display: block;

    }

    div. PS-bar tools-top

    {

    border-bottom: 1px solid #42403f;

    border-top: none;

    }

    div. PS-bar tools-close, div.ps - toolbar-previous, div.ps - toolbar-next, div.ps - toolbar-play

    {

    cursor: pointer;

    Display: table-cell;

    }

    div. PS-toolbar div.ps - toolbar-content div

    {

    Width: 44px;

    height: 44px;

    margin: auto 0 0;

    background-image: url (.. / images/icons.png);

    background-repeat: no-repeat;

    }

    div.PS - div.ps - tools-closing-happy-toolbar toolbar

    {

    background-position: 0 0;

    }

    div.PS - bar tools-content div. PS-toolbar-previous

    {

    background-position:-44px 0;

    }

    div.PS - div.ps - bar tools-previous-people with disabilities-content-toolbar

    {

    background-position:-44px 44px;

    }

    div.PS - div.ps - tools-next-content-toolbar toolbar

    {

    background-position:-132px 0;

    }

    div.PS - div.ps - bar tools-next-people with disabilities-content-toolbar

    {

    background-position:-132px 44px;

    }

    div.PS - div.ps - tools-play-happy-toolbar toolbar

    {

    background-position:-88px 0;

    }

    / * Display high resolution * /.

    @media only screen and (- webkit - min-device-pixel-ratio: 1.5).

    only screen and (min - moz-device-pixel-ratio: 1.5).

    only screen and (min-resolution: 240dpi)

    {

    div. PS-toolbar div.ps - toolbar-content div

    {

    -moz-background-size: 176px 88px;

    -o-background-size: 176px 88px;

    -webkit-background-size: 176px 88px;

    background-size: 176px 88px;

    background-image: url (.. /images/ [email protected]);

    }

    }

    ------------------------------------------------------------------------------------------ ----

    SOURCE CODE:


    <! DOCTYPE html >

    < html >

    < head >

    < title > Insert here if wanted text< /title >

    "< meta name="author" content="Ste Brennan - Code Computerlove - http://www.codecomputerlove.com/"/ >

    "" < meta content= "width = device-width, original scale = 1.0, maximum scale is 1.0, scalable user = 0;" name= "Windows" / > "

    "< meta name="apple-mobile-web-app-compatible" content="Yes"/ >



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

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

    "" "< link rel="stylesheet" type="text/css" media="screen" title="custom settings" href="content / custom.css">"

    " < script type="text/javascript" src="assets/js/klass.min.js"> " " < /script >
    " < script type="text/javascript" src="assets/js/jquery1.6.2.js"> " " < /script >
    " < script type="text/javascript" src="assets/js/code.photoswipe.jquery-3.0.4.js"> " " < /script >



    < script type= "text/javascript" src= "assets/js/albumsview.js" > < /script >



    "< script type="text/javascript">".
    var pictures =]
    {
    'album': "GROUP 1",
    "title:","
    'legend': 'none ',.
    "srclarge": "bin/images/large/como_0005.jpg",
    "srcthumb":"bin/images/thumb/como_0005.jpg,"
    "name": "como_0005.jpg",


    },


    {
    'album': "GROUP 1",
    "title:","
    'legend': 'none ',.
    "srclarge": "bin/images/large/como_0049.jpg",
    "srcthumb":"bin/images/thumb/como_0049.jpg,"
    "name": "como_0049.jpg",


    },


    {
    'album': "GROUP 1",
    "title:","
    'legend': 'none ',.
    "srclarge": "bin/images/large/como_0072.jpg",
    "srcthumb":"bin/images/thumb/como_0072.jpg,"
    "name": "como_0072.jpg",


    },


    {
    'album': "GROUP 1",
    "title:","
    'legend': 'none ',.
    "srclarge": "bin/images/large/como_0080.jpg",
    "srcthumb":"bin/images/thumb/como_0080.jpg,"
    "name": "como_0080.jpg",


    },


    {
    'album': "GROUP 1",
    "title:","
    'legend': 'none ',.
    "srclarge": "bin/images/large/como_0131.jpg",
    "srcthumb":"bin/images/thumb/como_0131.jpg,"
    "name": "como_0131.jpg",


    },


    {
    'album': "GROUP 1",
    "title:","
    'legend': 'none ',.
    "srclarge": "bin/images/large/como_0185.jpg",
    "srcthumb":"bin/images/thumb/como_0185.jpg,"
    "name": "como_0185.jpg",


    },


    {
    'album': "GROUP 2",
    "title:","
    'legend': 'none ',.
    "srclarge": "bin/images/large/como_0297.jpg",
    "srcthumb":"bin/images/thumb/como_0297.jpg,"
    "name": "como_0297.jpg",


    },


    {
    'album': "GROUP 2",
    "title:","
    'legend': 'none ',.
    "srclarge": "bin/images/large/hearey_0414.jpg",
    "srcthumb":"bin/images/thumb/hearey_0414.jpg,"
    "name": "hearey_0414.jpg",


    },


    {
    'album': "GROUP 2",
    "title:","
    'legend': 'none ',.
    "srclarge": "bin/images/large/hearey_0517.jpg",
    "srcthumb":"bin/images/thumb/hearey_0517.jpg,"
    "name": "hearey_0517.jpg",


    },


    {
    'album': "GROUP 2",
    "title:","
    'legend': 'none ',.
    "srclarge": "bin/images/large/hearey_0557.jpg",
    "srcthumb":"bin/images/thumb/hearey_0557.jpg,"
    "name": "hearey_0557.jpg",


    },


    {
    'album': "GROUP 2",
    "title:","
    'legend': 'none ',.
    "srclarge": "bin/images/large/hearey_0765.jpg",
    "srcthumb":"bin/images/thumb/hearey_0765.jpg,"
    "name": "hearey_0765.jpg",


    },


    {
    'album': "GROUP 2",
    "title:","
    'legend': 'none ',.
    "srclarge": "bin/images/large/hearey_0854.jpg",
    "srcthumb":"bin/images/thumb/hearey_0854.jpg,"
    "name": "hearey_0854.jpg",


    },


    {
    'album': "GROUP 2",
    "title:","
    'legend': 'none ',.
    "srclarge": "bin/images/large/hearey_0953.jpg",
    "srcthumb":"bin/images/thumb/hearey_0953.jpg,"
    "name": "hearey_0953.jpg",


    },


    {
    'album': "GROUP 2",
    "title:","
    'legend': 'none ',.
    "srclarge": "bin/images/large/jb_sh_1312.jpg",
    "srcthumb":"bin/images/thumb/jb_sh_1312.jpg,"
    "name": "jb_sh_1312.jpg",


    },


    {
    'album': "GROUP 2",
    "title:","
    'legend': 'none ',.
    "srclarge": "bin/images/large/jb_sh_1492.jpg",
    "srcthumb":"bin/images/thumb/jb_sh_1492.jpg,"
    "name": "jb_sh_1492.jpg",


    },


    {
    'album': "GROUP 2",
    "title:","
    'legend': 'none ',.
    "srclarge": "bin/images/large/jb_sh_1529.jpg",
    "srcthumb":"bin/images/thumb/jb_sh_1529.jpg,"
    "name": "jb_sh_1529.jpg",


    },


    {
    'album': "GROUP 3",
    "title:","
    'legend': 'none ',.
    "srclarge": "bin/images/large/jb_sh_1596.jpg",
    "srcthumb":"bin/images/thumb/jb_sh_1596.jpg,"
    "name": "jb_sh_1596.jpg",


    },


    {
    'album': "GROUP 3",
    "title:","
    'legend': 'none ',.
    "srclarge": "bin/images/large/jb_sh_2470.jpg",
    "srcthumb":"bin/images/thumb/jb_sh_2470.jpg,"
    "name": "jb_sh_2470.jpg",


    },


    {
    'album': "GROUP 3",
    "title:","
    'legend': 'none ',.
    "srclarge": "bin/images/large/jb_sh_2544.jpg",
    "srcthumb":"bin/images/thumb/jb_sh_2544.jpg,"
    "name": "jb_sh_2544.jpg",


    },


    {
    'album': "GROUP 3",
    "title:","
    'legend': 'none ',.
    "srclarge": "bin/images/large/jb_sh_1789.jpg",
    "srcthumb":"bin/images/thumb/jb_sh_1789.jpg,"
    "name": "jb_sh_1789.jpg",


    },


    {
    'album': "GROUP 3",
    "title:","
    'legend': 'none ',.
    "srclarge": "bin/images/large/jb_sh_1851.jpg",
    "srcthumb":"bin/images/thumb/jb_sh_1851.jpg,"
    "name": "jb_sh_1851.jpg",


    },


    {
    'album': "GROUP 3",
    "title:","
    'legend': 'none ',.
    "srclarge": "bin/images/large/jb_sh_1913.jpg",
    "srcthumb":"bin/images/thumb/jb_sh_1913.jpg,"
    "name": "jb_sh_1913.jpg",


    },


    {
    'album': "GROUP 3",
    "title:","
    'legend': 'none ',.
    "srclarge": "bin/images/large/jb_sh_2123.jpg",
    "srcthumb":"bin/images/thumb/jb_sh_2123.jpg,"
    "name": "jb_sh_2123.jpg",


    },


    {
    'album': "GROUP 3",
    "title:","
    'legend': 'none ',.
    "srclarge": "bin/images/large/jb_sh_2166.jpg",
    "srcthumb":"bin/images/thumb/jb_sh_2166.jpg,"
    "name": "jb_sh_2166.jpg",


    },


    {
    'album': "GROUP 4",
    "title:","
    'legend': 'none ',.
    "srclarge": "bin/images/large/jb_sh_2310.jpg",
    "srcthumb":"bin/images/thumb/jb_sh_2310.jpg,"
    "name": "jb_sh_2310.jpg",


    },


    {
    'album': "GROUP 4",
    "title:","
    'legend': 'none ',.
    "srclarge": "bin/images/large/jb_sh_2599.jpg",
    "srcthumb":"bin/images/thumb/jb_sh_2599.jpg,"
    "name": "jb_sh_2599.jpg",


    },


    {
    'album': "GROUP 4",
    "title:","
    'legend': 'none ',.
    "srclarge": "bin/images/large/jb_sh_2676.jpg",
    "srcthumb":"bin/images/thumb/jb_sh_2676.jpg,"
    "name": "jb_sh_2676.jpg",


    },


    {
    'album': "GROUP 4",
    "title:","
    'legend': 'none ',.
    "srclarge": "bin/images/large/jb_sh_2817.jpg",
    "srcthumb":"bin/images/thumb/jb_sh_2817.jpg,"
    "name": "jb_sh_2817.jpg",


    },


    {
    'album': "GROUP 4",
    "title:","
    'legend': 'none ',.
    "srclarge": "bin/images/large/jb_sh_2924.jpg",
    "srcthumb":"bin/images/thumb/jb_sh_2924.jpg,"
    "name": "jb_sh_2924.jpg",


    },


    {
    'album': "GROUP 4",
    "title:","
    'legend': 'none ',.
    "srclarge": "bin/images/large/jb_sh_2936.jpg",
    "srcthumb":"bin/images/thumb/jb_sh_2936.jpg,"
    "name": "jb_sh_2936.jpg",

    }

    ];


    < /script >





    < / head >
    "< body onLoad="AlbumList()">."


    "< div id="header">".
    < h1 > Insert here the text if wanted to< / h1 >


    "< div id="logo">".
    "" < a href= "http://www.johnblaustein.com" > < img class= "logo" src= "content / logo.png" alt= "Logo" > < /a > . "
    < / div >

    < / div >


    "< div id="AlbumContent">."
    "< ul id="Albumlist' > '.


    < /ul >
    < / div >


    "< div id="MainContent">".





    "< ul id="Gallery" class="Gallery">" "

    < /ul >


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

    This piece of code would probably go to the head of your page, which is somewhere betweenand

    There is another solution, it seems, according to the screen size you can see here: http://css-tricks.com/snippets/javascript/redirect-mobile-devices/

    It seems to me that might be a little more inclusive.

    There are plenty of options to do what you want to do, but I don't him did not myself.  If this piece of code is not doing it for you, I would say this marker as replied and repost your question sepearately as, "What is the best way to redirect mobile?"  If you think that you get a range of options, then perhaps, including the possibility of not to do!

    All the best

    Martin

  • Advanced CSS Help!

    I use Dreamweaver CS5.5 under the master CS5.5 collection.

    On my site, I currently have a unique style sheet (named style.css) and it contains 7 styles (background, .networking, .header, .footer, .main, .mainround, .instruction).

    Each page is constructed as follows:

    background is applied

    . Networking is applied to a table top

    . Header is applied to a table under the table of .networking

    .main, .mainround, and/or .instruction is applied to one or more tables in the body of the site

    .footer is applied to the lower table

    What follows is the same on EVERY page of my site.

    The background style is applied to each page (is image background, background-scrolling: scroll; and background-repeat: no-repeat)

    The .networking table will be including links/scripts to share my site on social networking sites.

    .Header table contains my logo to the site as a good turnover 5 images/links.

    The table of .footer inludes rollover images/links.

    What I want to do:

    I want my 'main' style to include all information 4 supra styles in one.  For example, that I will not name the substance of style (in my style.css file).  When I apply the background to the body of my site, to hold this page now have my background and image parameters of the table network with links to work, the table header with my logo and animated buttons and tables of footer with my bearings.  Although nothing does appear in the tables and are contained in something else, that's good, as long as it is eficient and I get the desired style / effect!

    Currently everything is centered on the page with the car left and right margins, the top margin to keep everything in order and well spaced and no bottom margin.  I need these settings/styles to stay, and I need to be able to insert the content between the header and footer of my site.  If I need to exclude from the table footer, I understand, but I think that everything I want to do should be possible.

    Thank you for your help fellow forum users.  You have been an incredible help so far and I look forward to the day when I can actually meet someone any more questions!

    I want my 'main' style to include all information 4 supra styles in one.

    Can't happen, because in the styles that are applied to EVERYTHING, you have styles that should only be applied to certain elements on the page.  This is not to say that you can not improve and simplify your CSS-

    {body

    Width: 800px;

    background-color: #FFF;

    background-image: url(images/background.png);

    background-repeat: no-repeat;

    Auto margin: 0;

    padding: 0;

    }

    . Header {}

    top of the margin: 20px;

    }

    .footer {}

    height: 18px;

    margin-top: 10px;

    }

    .instruction {}

    do-family: 'Myriad Pro', arial, helvetica, sans-serif;

    font size: 24 PX.

    text-align: center;

    vertical-align: middle;

    padding: 5px;

    margin-top: 10px;

    }

    .main {}

    margin-top: 10px;

    do-size: 16px;

    }

    {.mainround}

    margin-top: 10px;

    border-radius: 20px;

    }

Maybe you are looking for