sensitive images

OK, I put pictures in some divs and I try to make them fill the frame once I have to tackle the size of the cell phone. But they do not resize.

Here is the CSS for the browser of the computer:

{.picr}

Width: 200px;

float: right;

left margin: 8px;

}

{.picl}

Width: 200px;

float: left;

right margin: 8px;

}

.picr .picl img {width: 100 %} }

and then questions from the media:

/ * 700px or less * /.

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

.picr .picl {}

Width: 100%;

height: auto;

float: none;

}

}

Here is the site:

http://vps3147.InMotionHosting.com/~Merwin/about.html

Essentially, what I get is nice, but the floating images (divs) never unfloat and grow when on a smartphone or tablet.

Delete the height & width attributes in your HTML img.  Add a comma between .picr and .picl

.picr, {.picl}

Width: 100%;

Display: block;

float: none;

}

Nancy O.

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

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

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

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

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

  • Position of the image in the Bootstrap model "carousel."

    I thought I would take a shot to boot. There is a starter template in Dreamweaver that does more or less what I want. But I have a problem of tiny design that I can not really the solution. Maybe can someone help?

    I use the included slide show 'Carousel', but I don't think that the proportions of the image should be the same regardless of the size of the viewport. With a large window, I don't want the image in full height, I want not cropped. That's why I added a 'max-height' to the box containing the image. It works very well and the height of the image does never exceed my max value.

    But: the position of the image in the box limited height is not centered vertically. The image is cropped just at the bottom of the box, while I love to crop the top and bottom. I tried many ways to center the image but failed. Normally this wouldn't be a problem for me, but since I am changing the design to someone else, there seems to be something that I don't get.

    This is a simple example of site showing my problem: http://www.linnsideout.se/imgtest/

    That's what I want to with large windows:

    header-1a.jpg

    And that's what I get:

    header-1b.jpg

    Everybody out there is able to tell me the css tricks necessary to center the image vertically at the start of the crop box?

    The way you have the sample is the way it should work. It's because you used the fluid container. If you use just the containing class, you would have cut offs for each device. In this case, you can use the image just for this device.

    Take a look at the use of srcset to load the images. Take a look at the sensitive Images: If you are simply changing resolution, use srcset. | CSS-Tricks

  • Wrapped sensitive pictures?

    Hi all

    I have a site where the I have some images with text wrapped around, but the sensitive image width and size options are grayed out.

    What access to the text is resized in function, the image doesn't.

    The only way I've found that it works to remove the image in a frame separated, completely ruin my planned layout!

    I'm doing something wrong?

    For reference, the site is at http://www.rumour.wedding

    No, sensitive size of inline graphics is not yet implemented in Muse.

  • How to set the text to the center of the image and keep it responsive

    Hi, I'm new in Muse so Hello everyone

    I created a large image and add the text object that I placed in the Center. I have setup the image and width sensitive.

    Keep what reduction in size of the sensitive image browser, but the text is now high position relative to the browser.

    My question is how do you tell the text object to hold the center of the image? (As rather pin to pin object browser)

    Thank you

    I found this one:

    Text the PIN in the center of the image when using fluid width

    He answered my question but not yet a reasonable solution. Muse should allow us to group objects even with width and high sensitive. Another way is to allow pin object to.

  • TEXT ON THE REACTIVE IMAGE

    Is it possible add a text over an image responsive? Thank you

    My code is:

    "" < div class = "container_w" > < img src = "file:///W|/Domini Internet/Siti pubblicati/www.aebsistemi.it/images/header_world.jpg ' class ="img-reagent"alt ="Placeholder Image">

    < div >

    I want to get the image for example...

    img.jpg

    Try this:

    Sensitive images with text overlay - http://alt-web.com/

    or this:

    Figure captions with Bootstrap ToolTips - http://alt-web.com/

  • How can I move the text on an image

    IM from difficulties to move text on an image.  How could I get a text on top of a picture box?

    See the links below for demos of code and examples.

    Figure captions with Bootstrap ToolTips - http://alt-web.com/

    Sensitive images with text overlay - http://alt-web.com/

    Nancy O.

  • Text on a moving image

    Hey,.

    I want to spend a bit of text on an image (in this case the h1). I know that you have a background image on a piece of text but if I do that I can't do a transition for the text. Which is what I want to do. But if I have the text in the div for same as picture and move the text to the top with the 'margin' he does not remain in its place. It moves around when I resize the page. I tried the relative and absolute position and it still doesn't work. All I'm looking for is a big picture, (I have a < img src = "...) ") with a piece of text in the middle of what I can fade when you pass the mouse over it. The bit of transition I know how to do. I just need to get the text on the image and I need to stay in the middle of the image and not move to the top or the bottom of the page that resize you the page. I'm in dreamweaver CC, but I think that the solution will be the same for older versions of dreamweaver.

    Can someone help me with this?

    You will need to use CSS positioning and z-index. See the link below for more details.

    Sensitive images with text overlay - http://alt-web.com/

    Nancy O.

  • How can I make an image full screen on a Web site a page

    I'm making a site page with 5 elements. I want with each element a (sensitive) image full screen. I can do it in Adobe muse?

    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

  • Can someone help me and explain how to assign hotspot/image map with rules of css or any other way?

    I have problem with hotspot because its position cannot be fixed to follow the proportion of the fixed background in different resoulutions.

    You cannot assign hotspots with css. Here are some options different however, you have...

    You can try to use several images that can evolve, linking each image, instead of hot spots.

    You can also look into "sensitive image maps" to get examples of jquery/javascript run interactive images that can be resized.

    According to your image (for example, if you are linking States on a map) you would be able to use the SVG paths and link paths with javascript.

  • loss of image quality

    I was wondering if anyone can shed some light on a problem that I seem to have with my images.
    When you import the jpegs(highest quality) of PS CS3 into Flash CS3, there seems to be a deterioration of the sensitive image, in terms of contrast and saturation. I did a lot of troubleshooting at this point, but nothing works (and I'm trying to avoid having to go back to each image and overcompensate in PS)

    well, I found an easy way to make this change, in PS go to Edition > convert to profile, then the destination space, change this to sRGB.
    Re-save the image and you should be good to go.

Maybe you are looking for

  • Want 4500: Printing WITHOUT reason

    For no reason at all on every 10 minutes, my printer will start printing recipes "allrecipes.com."   I deleted and uninstalled all files with what it is related to ' allrecipes.com, yet whenever I turn on my printer, and every 10 minutes thereafter,

  • Message app - owner not shown avatar photo

    You can solve this problem? It happened with 5.0.2 now happens with 5.1.1. Owner's avatar is not displayed even if it is defined. Put to the test after repaor with PC companion.

  • Intel X 25 - M Solid - State Drive (SSD) does not start on T60

    Hi all- I finally made the plunge and acquired a X 25 - m Solid State drive (SSD) of Intel. I spent a large part of the trial yesterday so he could boot on my T60 with no luck. My first attempt was to clone the current drive in the X 25 - M, but I go

  • Someone please send me an example how to implement the sublayout method

    public void displist(StringTokenizerDemo refdata) { /*while(refdata.hasMoreTokens()) { refdata.nextToken(); // Consume unwanted input String modelName = refdata.nextToken().trim(); refdata.nextToken(); refdata.nextToken(); listField.add(modelName); }

  • Get this warning WLAN AutoConfig service stopped successfully.

    Whenever I turn my laptop on which is connected wireless I get this warning will appear in the event logs I had problems with the connection where occasionally I lose connection for a few seconds and then it reconnects again. Other times, I will try