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.
-
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 appliesdisplay: block;
andmax-width: 100%;
andheight: 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:
And that's what I get:
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.
-
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...
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.
-
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
-
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.
-
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