How to Scale Images in a Table in Fluid Grid Layout?

I copied over a table full of mouseover images into my new fluid grid layout. It all works fine, but in Mobile mode, all the images are compressed horizontally. How do I fix this?
http://savcp.com/howwemet-fluid.html

Strip out your table code with F&R.  You could greatly reduce your code & page load by using CSS instead of image swap behaviors.  Same size images would produce a nicer appearance, too.
Below, I used floated <p> tags as containers for pictures.  Copy & paste this into a new, blank document and SaveAs test.html.  Preview in browsers with various viewport widths to see the effect.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 document</title>
<style>
body { background: #222 }
/**BEGIN PICS**/
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
#pics {
width: 100%;
overflow:hidden;
margin: 55px auto;
border: 1px solid silver;
#pics p {
float: left;
width: 24%;
text-align: center;
/**space between**/
margin: 0 0.25%;
border: 1px solid #222;
#pics img {
max-width: 100%;
border: 5px solid #333;
/**opacity on linked pics**/
#pics a img {
/**for pre-IE8**/
filter: alpha(opacity=90);
/**for other browsers**/
opacity: .90;
/**on mouseover**/
#pics a img:hover, #pics a img:active, #pics a img:focus {
filter: alpha(opacity=100);
opacity: 1.0;
border-color: #09C;
/**ADJUST BREAKPOINTS AS REQUIRED**/
/* Special Rules for Mobiles */
@media only screen and (max-width: 480px) {
#pics p{    height:110px;}
/* Special Rules for Tablets */
@media only screen and (min-width: 481px) {
#pics p{    height:175px;}
/* Special Rules for Desktops */
@media only screen and (min-width: 600px) {
#pics p{    height:255px;}
/**end PICS**/
</style>
</head>
<body>
<div id="pics">
<p><a href="howwemet/mb3.html">
<img src="http://savcp.com/images/story/mb2.gif">
</a></p>
<p><a href="ww3.html">
<img src="http://savcp.com/images/story/ww2.gif">
</a></p>
<p><a href="bs3.html">
<img src="http://savcp.com/images/story/bs2.gif">
</a></p>
<p><a href="rr3.html">
<img src="http://savcp.com/images/story/rr2.gif">
</a></p>
<p><a href="howwemet/mb3.html">
<img src="http://savcp.com/images/story/mb2.gif">
</a></p>
<p><a href="ww3.html">
<img src="http://savcp.com/images/story/ww2.gif">
</a></p>
<p><a href="bs3.html">
<img src="http://savcp.com/images/story/bs2.gif">
</a></p>
<p><a href="rr3.html">
<img src="http://savcp.com/images/story/rr2.gif">
</a></p>
<p><a href="howwemet/mb3.html">
<img src="http://savcp.com/images/story/mb2.gif">
</a></p>
<p><a href="ww3.html">
<img src="http://savcp.com/images/story/ww2.gif">
</a></p>
<p><a href="bs3.html">
<img src="http://savcp.com/images/story/bs2.gif">
</a></p>
<p><a href="rr3.html">
<img src="http://savcp.com/images/story/rr2.gif">
</a></p>
<p><a href="wk3.html">
<img src="http://savcp.com/images/story/wk2.gif">
</a></p>
<p><a href="ss3.html">
<img src="http://savcp.com/images/story/ss2.gif">
</a></p>
<!--end #pics-->
</div>
</body>
</html>
Nancy O.

Similar Messages

  • Tables in Fluid Grid Layouts

    I having trouble with tables in fluid grid layouts.  They work good in a desktop environment but in tablet and phone views, the table gets cut off past the dimensions of the display giving only part of the table.  Any advice on how to make it work like it should?

    Thanks a lot everyone.  Some good links there.  What I need to do, is be able to display tabular data as seen on my current website at www.richardsinkler.net (click on the "tunings" button).  One thing I have noticed, is the page I created using a template I made using fluid grid layout, doesn't give me the div ID in my css file 3 times (in phone, tablet and desktop sections) like other pages I created from the same template.  I had to not display a div on the phone where I had a pic that would bleed out of the right side of the display.  I was able to set the dislplay attribute to "none" and everything was fine.  I guess I could hand code the same functionality into the css file for what I need, to stop the display of the tables on smaller screens.  Or, could I have 2 divs on my desktop page with my tables in one, and a text version of the tables in the other?  Then I could hide the text div on the larger display and use the tables, and hide the tables on the smaller displays and use the text div.  Sound feasable? 
    Also, what is the difference between "width" and "max-width"?  I will look it up, but find that real people, and not technical writers (although they are real people also), can explain it better for the average person like me.

  • How to Get SWF to be Responsive in Fluid Grid Layout?

    I inserted my swf in a fluid grid layout div tag so it would fit on any screen. But no matter which Scale setting I use for the swf (noborder, default, exactfit, noscale, or showall) nothing works.
    Take a look This one is exactfit. It scales but does not maintain the proper aspect ratio.
    http://savcp.com/index-fluid-05.html

    Line 177 & 189, change:
    <param name="scale" value="exactfit">
    to:
    <param name="scale" value="showAll">
    showAll will maintain proportions while fitting to 100% width & height - but beware your container holding the SWF will show the background color of SWF (black in your case) when you're sizing down. You could consider changing it to your site background (gray) to ensure it doesn't look odd.
    On a sidenote, why are you worried about putting a SWF file into a responsive design? It will not work on mobile devices anyway!

  • How to Get HTML5 Slideshow to Shrink in Fluid Grid Layout?

    I am able to insert images in a Fluid Grid Layour Div Tag and it shrinks according to the platform on which it is viewed.
    But I am trying to have the same result with a slideshow. I used CreateJS to convert the slideshow from Flash to HTML5.
    The problem is it won't shrink.
    Here is the URL.
    http://savcp.com/index-fluid-01.html

    Responsive Layouts require responsive slideshows. 
    Cycle2 is responsive.  Copy & Paste this into a New, Blank document.
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>HTML5 with Cycle2</title>
    <!--helpf for older IE browsers-->
    <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    <!--Latest jQuery Core Library-->
    <script src="http://code.jquery.com/jquery-latest.min.js">
    </script>
    <!--Cycle2 Slideshow Plugin-->
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20130409/jquery.cycle2.min.js"></script>
    <style>
    /**Slideshow**/
    .cycle-slideshow {
    max-width:90%;
    margin: 0 auto;
    text-align: center;
    .cycle-slideshow img {max-width:100%}
    /* prev / next links */
    .cycle-prev, .cycle-next {
    position: absolute;
    top: 0;
    width: 30%;
    opacity: 0;
    filter: alpha(opacity=0);
    z-index: 800;
    height: 100%;
    cursor: pointer;
    .cycle-prev {
    left: 0;
    background: url(http://malsup.github.com/images/left.png) 50% 50% no-repeat;
    .cycle-next {
    right: 0;
    background: url(http://malsup.github.com/images/right.png) 50% 50% no-repeat;
    .cycle-prev:hover, .cycle-next:hover {
    opacity: .7;
    filter: alpha(opacity=70)
    /**END SLIDESHOW STYLES**/
    </style>
    </head>
    <body>
    <!--begin slideshow-->
    <div class="cycle-slideshow"
        data-cycle-fx=scrollHorz
        >
    <!-- prev/next links -->
    <div class="cycle-prev"></div>
    <div class="cycle-next"></div>
    <!--insert your images below-->
    <img src="http://jquery.malsup.com/cycle2/images/p1.jpg">
    <img src="http://jquery.malsup.com/cycle2/images/p2.jpg">
    <img src="http://jquery.malsup.com/cycle2/images/p3.jpg">
    <img src="http://jquery.malsup.com/cycle2/images/p4.jpg">
    <p>Mouse over image for previous / next links</p>
    </div><!--end slideshow-->
    </body>
    </html>
    Nancy O.

  • How do I center a div on a fluid grid layout. The div is a video player restricted to 630px by 350 px?

    I am building a fluid grid website and I have a web player in a <div> that is styled to be no larger than 630px by 350 px. I can't figure out how to get this div to stay center on the page no matter if it is mobile, tablet, or desktop. Can anyone shed some light on this?

    Change display to block, apply the margain: auto.

  • How Do I Put Pictures anywhere in fluid grid layout??

    Hi,
    I was wondering how you put pictures anywhere you want in fluid grid layout without having to use the fluid grid layout div tag. I find it easier to use the ap div and simply insert pictures and move them freely however when i do that they dont stay in the correct place and the other grids? Is there an easier way?

    Sorry but APDiv tags don't work in Fluid Grid layouts.  That's why Adobe removed them from CC.
    You must use the Fluid Grid divs in your layout to hold your text and images.
    <div class="gridContainer clearfix">
         <div class="div1">
              insert image here...
         </div>
         <div class="div2">
              insert image here...
         </div>
    </div>
    Nancy O.

  • How to insert images in a table

    Hi all,
    Iam working On Oracle10g
    can any one explain how to insert images in a table.
    Any help will be much appreciated!!
    Thanks.

    Hi,
    Try like this
    step1: Create a folder & place the image in it.
    for eg: place the image 'Sunset.jpg' in 'IMAGEFILE' folder of D drive
    Step2: Create a Directory in sql*plus as
    CREATE DIRECTORY IMAGEDIR AS 'D:\IMAGEFILE';
    Step3: Grant previlage to user
    GRANT READ ON DIRECTORY IMAGEDIR TO PUBLIC;
    Step4: Create the table in which you want to insert the image
    create table loadalbum
    (name varchar2(100),
    image blob)
    Step5: Create the procedure as
    declare
    l_blob blob;
    l_bfile bfile;
    begin
    insert into loadalbum values ( 'Sunset', EMPTY_BLOB() )
    returning image into l_blob;
    l_bfile := bfilename( 'IMAGEDIR', 'Sunset.jpg');
    dbms_lob.fileopen( l_bfile );
    dbms_lob.loadfromfile( l_blob, l_bfile, dbms_lob.getlength( l_bfile ) );
    dbms_lob.fileclose( l_bfile );
    end;
    Now you can know whether the image is inserted or not by
    SELECT COUNT(*) FROM LOADALBUM;
    COUNT(*)
    1
    which means image is inserted.
    Hope this may help you.

  • How do I center an image inside a div tag using fluid grid layout?

    where do I find and what do i use the image properties position when using the fluid grid layout. I'd like to center the image in the mobile page versus th left position in the desktop.

    This is what my css codes looks like where the image is in the div tag:
    #logo_links {
        clear: both;
        float: left;
        margin-left: 0;
        width: 32.2033%;
        display: block;
    This is the html code where the image is:
      </div>
        <div id="logo_links">
          <div align="center">
            <p><img src="../fluidgrid/images/3_7x2logo.jpg" alt="" width="236" height="110" align="left"></p>
          </div>
        </div>
    I'm going to need more detail where to insert the suggested code as I am a newby!
    Thanks

  • How can i apply border for fluid grid layout div

    How can i apply border for fluid grid layout div

    <!doctype html>
    <!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
    <!--[if IE 7]>    <html class="ie7 oldie"> <![endif]-->
    <!--[if IE 8]>    <html class="ie8 oldie"> <![endif]-->
    <!--[if gt IE 8]><!-->
    <html class="">
    <!--<![endif]-->
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Untitled Document</title>
    <link href="boilerplate.css" rel="stylesheet" type="text/css">
    <link href="CSS/Layout.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="flexslider.css" type="text/css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script src="jquery.flexslider.js"></script>
    <!-- Place in the <head>, after the three links -->
    <script type="text/javascript" charset="utf-8">
      $(window).load(function() {
        $('.flexslider').flexslider();
    </script>
    <!--
    To learn more about the conditional comments around the html tags at the top of the file:
    paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
    Do the following if you're using your customized build of modernizr (http://www.modernizr.com/):
    * insert the link to your js here
    * remove the link below to the html5shiv
    * add the "no-js" class to the html tags at the top
    * you can also remove the link to respond.min.js if you included the MQ Polyfill in your modernizr build
    -->
    <!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <script src="respond.min.js"></script>
    </head>
    <body>
    <div class="gridContainer clearfix">
      <div id="LayoutDiv1"><img src="SJV-Images/Banners/Dark-green-curved-header.png"/></div>
      <div id="LayoutDiv2">
      <div class="flex-container">
      <div class="flexslider">
        <ul class="slides">
          <li>
            <img src="SJV-Images/Stud1.jpg"/>
          </li>
          <li>
            <img src="SJV-Images/Stud2.jpg" />
          </li>
          <li>
            <img src="SJV-Images/Stud3.jpg" />
          </li>
        </ul>
      </div>
    </div> </div>
      <div id="Nav">This is the content for Layout Div Tag "Nav"</div>
      <div id="Special_Features"><h3 align="center">SPECIAL FEATURES</h3>
      <ul>
      <li>
      It is one of the oldest school.</li>
      <li>It was first started as an orphanage for the children of British soldiers, and later moved to its current location.</li>
       <li>Rich in Anglo-Indian tradition dating back to three centuries.</li>
      <li>The campus now has separate buildings within the campus for year 1 to  year 8 (Junior and Sub Junior block) and year 9 to year 12 (Senior and   Super Senior block).</li>
      <li>The school has montessori facilities in a separate building.</li>
      <li>The School also has boarding facilities for students from distant places.</li>
      </ul></div>
      <div id="History"><img src="SJV-Images/His_Image.png" alt="Hisimage" class="floatleft">
      <h3>HISTORY OF OUR SCHOOL</h3><P>In 1750 – a very long time ago,a missionary and a teacher, Christian Frederick Schwartz came to India to work in the Danish Mission at Tranquebar.Due to his own personal charm, genius and integrity, soon he became a trusted envoy to the court of Princes ,both hostile and friendly. He even helped in the training and education of Serfogee Rajah, the adopted son of the Tanjore Raja Tuljagee.</P></div>
    <div id="Photo_Gall"><center>
        <strong>PHOTO GALLERY</strong>
    </center>
      <p><img src="SJV-Images/Photogall.png" width="174" height="70" class="floatright"/></p>
    </div>
      <div id="News_Events"><center>
        <strong>NEWS & EVENTS</strong>
      </center><center>Annual Day<br><center>
        Alumni Meet<br>
        Exam Time Table<br>Parents-Teacher's Meet</center>
      </center>
      <br></div>
      <div id="footer">This is the content for Layout Div Tag "footer"</div>
    </div>
    </body>
    </html>

  • Making my header background image scaleable using fluid grid layout

    I'm sorry I dont really know how to post a link to this site (its not online just on my laptop) But really all I have is a blank screen I just started trying to build this responsive site (the site I was building wasn't responsive so i had to start over so thats where I'm at. I started a new fluid grid layout in dreamweaver cc I use 24 collums at 100%. I deleted the the div (but not the grid container one) . First is that I'm trying to build a header using the fluid grid layout (my laptop screen is 1920 px wide so I use the full screen because I want my site to take up a users full screen). The issue is when I use a image thats 1920 px width for a header background it test great in the browers meaning it scales correct but when I check it out in the smartphone and tablet preview options within dreamweaver cc the image is chop off. How do I get the image and really the rest of the site to scale and resize correctly not just in full screen for my pc but for tablets smartphones and anyones computer? I'm baffled please help? I hope I'm being clear if not I'll try again I need your help thank you

    Try to keep responses in the original thread, it keeps replies from getting confused.
    http://forums.adobe.com/thread/1430668?tstart=0

  • Placing a background image in fluid grid layout

    I am having trouble building a fluid grid layout  I am not sure why but when I shrink the layout it doesn't seem to work correctly
    I need to do 2 things.
    1) make the background image shrink as it is suppossd to. when you scale down the images doesn't shirink to tablet size and isn't there for the phone size (although I think I want a new image for phone with just one side of the (page image). on it so I assume I just link that in there under that section in in the css
    2)It doesn't seem to want to align the writing so that it is only over the page section of the background image on each side (the rightcontent and left content boxes-ie they should look like text on a page)
    also I want to take the page here when it is finished and make it a template for further pages (just changing the text) is that done the same as usual for the fluid grids?
    Thank you in advance for the help
    Here is the link that the site has been temp posted on for detail editing. 
    http://approvalsite.info/

    Kind of makes sense.
    I am not sure how to make the div tag layouts relative to the background image.
    please advise.
    also, I have been playing with it and it seems to be working better now.
    But the issue I have with it now is that the image on the right side of the page keeps showing at the bottom of the page instead of on the top of the page directly next to the wording on the left.
    does anyone know why?
    I am sure it is just a simple coding issue.
    help
    approvalsite.info
    CSS:
    @charset "utf-8";
    /* Simple fluid media
       Note: Fluid media requires that you remove the media's height and width attributes from the HTML
       http://www.alistapart.com/articles/fluid-images/
    img, object, embed, video {
        max-width: 100%;   
    /* IE 6 does not support max-width so default to width 100% */
    .ie6 img {
        width: 100%;
        Dreamweaver Fluid Grid Properties
        dw-num-cols-mobile:        5;
        dw-num-cols-tablet:        8;
        dw-num-cols-desktop:    12;
        dw-gutter-percentage:    25;
        Inspiration from "Responsive Web Design" by Ethan Marcotte
        http://www.alistapart.com/articles/responsive-web-design
        and Golden Grid System by Joni Korpi
        http://goldengridsystem.com/
    /* Mobile Layout: 480px and below. */
    .gridContainer {
        width: 85%;
        padding-left: 1.82%;
        padding-right: 1.82%;
        background: url(../images/DSC_0014.jpg) center fixed;
        -webkit-background-size: cover;
          -moz-background-size: cover;
          -o-background-size: cover;
          -background-size: cover;
    #LayoutDiv1 {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block;
    #header {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block;
    #menubar {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block;
    #leftcontent {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block;
        height:auto;
    #rightcontent {
        clear: both;
        float: right;
        margin-left: 0;
        width: 100%;
        display: block;
        height:auto;
    #footer {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block;
    /* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
    @media only screen and (min-width: 481px) {
    .gridContainer {
        width: 90.675%;
        padding-left: 1.1625%;
        padding-right: 1.1625%;
        background: url(../images/DSC_0013.jpg) no-repeat center center fixed;
          -webkit-background-size: cover;
          -moz-background-size: cover;
          -o-background-size: cover;
          -background-size: cover;
    #LayoutDiv1 {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block;
    #header {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block;
    #menubar {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block;
    #leftcontent {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block;
    #rightcontent {
        clear: both;
        float: right;
        margin-left: 0;
        width: 100%;
        display: block;
    #footer {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block;
    /* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */
    @media only screen and (min-width: 769px) {
    .gridContainer {
        width: 90%;
        max-width: 1232px;
        padding-left: 0.75%;
        padding-right: 0.75%;
        margin: auto;
        background: url(../images/DSC_0013.jpg) no-repeat center center fixed;
          -webkit-background-size: cover;
          -moz-background-size: cover;
          -o-background-size: cover;
          -background-size: cover;
    #LayoutDiv1 {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block;
    #header {
        clear: both;
        float: left;
        margin-left: 5%;
        width: 100%;
        display: block;
    #menubar {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block;
    #leftcontent {
        clear: both;
        float: left;
        margin-left: 15%;
        width: 30%;
        display: block;
        padding-right: 2%;
    #rightcontent {
        clear: none;
        float: right;
        margin-left: 1%;
        width: 49%;
        display: block;
        margin-right: 8%;
    #footer {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block;
    HTML
    <!doctype html>
    <!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
    <!--[if IE 7]>    <html class="ie7 oldie"> <![endif]-->
    <!--[if IE 8]>    <html class="ie8 oldie"> <![endif]-->
    <!--[if gt IE 8]><!-->
    <html class="">
    <!--<![endif]-->
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Untitled Document</title>
    <link href="boilerplate.css" rel="stylesheet" type="text/css">
    <link href="_css/layout.css" rel="stylesheet" type="text/css">
    <!--
    To learn more about the conditional comments around the html tags at the top of the file:
    paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
    Do the following if you're using your customized build of modernizr (http://www.modernizr.com/):
    * insert the link to your js here
    * remove the link below to the html5shiv
    * add the "no-js" class to the html tags at the top
    * you can also remove the link to respond.min.js if you included the MQ Polyfill in your modernizr build
    -->
    <!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <script src="respond.min.js"></script>
    <!-- Start css3menu.com HEAD section -->
    <link rel="stylesheet" href="index_files/css3menu1/style.css" type="text/css" />
    <!-- End css3menu.com HEAD section -->
    </head>
    <body>
    <div class="gridContainer clearfix">
      <div id="header"><h1>Jan Kardy's Literary Agency</h1></div>
    <div id="menubar">
    <!-- Start css3menu.com BODY section id=1 -->
    <ul id="css3menu1" class="topmenu">
        <li class="topfirst"><a href="../index.html" style="height:18px;line-height:18px;">Home</a></li>
        <li class="topmenu"><a href="../about_jankardys.html" style="height:18px;line-height:18px;">About Jan Kardys</a></li>
        <li class="topmenu"><a href="#" style="height:18px;line-height:18px;"><span>Resources</span></a>
        <ul>
            <li><a href="../Education_connection.html">Education Connection</a></li>
            <li><a href="../submission_guidelines.html">Submission Guidelines</a></li>
            <li><a href="#"><span>Blogs</span></a>
            <ul>
                <li><a href="http://unicornwritersconferencect.blogspot.com/">Unicorn Writers Conference</a></li>
                <li><a href="http://advancenetworkingunicorn.blogspot.com/">Advanced Networking Blogs</a></li>
            </ul></li>
            <li><a href="../first_steps_to_publishing.html">First Steps to Publishing</a></li>
            <li><a href="../library_publish_events.html">Library &amp; Publishing Events</a></li>
            <li><a href="#">Art Gallery</a></li>
        </ul></li>
        <li class="topmenu"><a href="#" style="height:18px;line-height:18px;">Clients</a></li>
        <li class="toplast"><a href="#" style="height:18px;line-height:18px;">Contact Jan Kardys</a></li>
    </ul>
    <p style="display:none"><a href="http://css3menu.com/">Horizontal Menu Using CSS Css3Menu.com</a></p>
    <!-- End css3menu.com BODY section -->
    </div>
      <div id="leftcontent">
        <p>Jan   Kardys, President of Black Hawk Literary Agency, has thirty years of   diversified publishing experience for nine major publishing   corporations. Black Hawk Literary Agency LLC represents a broad spectrum   of authors and illustrators, with a focus on new nonfiction and   fiction.  <br />
        </p>
        <p>Jan was Director of   Contracts for Warner Books/Little, Brown &amp; Company, Director of   Contracts at Macmillan Publishing Company, Charles Scribner's Sons, and   Contracts Director at Prentice Hall/Simon &amp; Schuster. Ms. Kardys has   worked at Harcourt Brace Jovanovich, Doubleday, Scholastic, Lippincott   &amp; Crowell, Publishers, St. Martin's Press, Conde Nast Publications,   and Google. Beginning a career in editorial, Jan also worked in art and   production in School publishing. Jan held various executive positions in   subsidiary rights, licensing, database design, imaging, royalty   conversions, contracts, copyrights &amp; permissions departments.<br />
        </p>
        <p></p>
      </div>
        <div id="rightcontent"><p><strong><center>Jan Kardys, Literary Agent<br />
        Black Hawk Literary Agency, LLC. <br />
        17 Church Hill Road,<br />Redding, CT 06896</center></strong></p>
        <p><strong><center>
          <p><img src="images/jankardys.jpg" alt="jankardys_headshot" /></p>
          <p>Blog: <a title="http://bookpublishingteacher.blogspot.com" onkeypress="window.open(this.href); return false;" onclick="window.open(this.href); return false;" href="http://bookpublishingteacher.blogspot.com">http: bookpublishingteacher.blogspot.com</a><br />
          </p>
          <p>Email: <a href="mailto:[email protected]" title="mailto:[email protected]">[email protected]</a> <br />
          </p>
          <p>Phone: 203-938-7405</p>
        </center></strong></p>
      </div>
        <div id="footer"><h6>Webpage designed by Technomage Web Design</h6></div>
    </div>
    </body>
    </html>

  • Background Images in Fluid Grid Layouts

    How can I get the background image that I assign to a fluid grid layout div to fill up 100% of the grid space and at the same time size the background to the fluid boundaries of the div  the same way as if I had placed an image into the div?  Currently, the background image lays in the grid at the pixal size of the background picture with only the portion of the background showing commenserate withthe size of the div contents.  I use CS6.
    Thank you.

    In your CSS Styles menu, if you double click on the layout div you are working on or the grid container, you will find that the image will show if you hit the return key. If you create a table bigger than the div tag or grid container, it will automatically resize and you be able to see your image. Thats a couple of cheat ways so you can see your image when you work and when you publish.
    It just means you will have several of this code: <p> </p>
    The image will only show the width and the height of layout div that you are working in.
    I have been able to place one fluid grid layout div tag inside on another, although I find that if I make this a template file, the template tends to break over time. Not sure it that's because I am giving Dreamweaver a headache with multiple fluid grid layout div tags inside each other.
    The most I have done: 1st level grid container, 2nd level inside grid container were layout div for spry collapse panel menus, 3rd level inside layout div for spry collapse panel menus were sub menus.
    I have tried placing one image in the background of the grid container and then another image over the top in a fluid grid layout div tag. The reason why they move is because of the fixed/scroll option inside the CSS style. I found that when publishing, certain browsers shift both images either up or down. This can be a problem, especially if you create an image with a white box and try to align the second image up inside.
    It probably can be done, and I spent months hand coding and playing with the file. IE8 is a problem and I have added extra code which I found online. Firefox tends to move things on Windows platform, but MAC is not as bad. Safari and Chrome tends to work better with fluid grid layouts. There is an option for the early versions of browsers so they can recognise things.
    To resize everything when in tablet and mobile, I found tablet grid container/layout div tage size 80-90% and mobile to 40-50% grid container/layout div tage size.
    Hope this helps

  • Background images in fluid grid layouts Dreamweaver CS6

    How can I get a background image png or jpg original size 1040w by 840h to scale down in the tablet and mobile layouts in Dreamweaver CS6 fluid grid layout?

    Adding one of these in your CSS should do the trick...
    background-size:contain;
    or
    background-size:cover;
    Depending on the layout of your background image, one may work better than the other.

  • In Fluid Grid layout, I have hidden 2 div for mobile layout. How do I unhide them?

    In Fluid Grid layout, I have hidden 2 <div> for mobile layout. How do I unhide them?

    Hi there,
    I visited your site using Dreamweaver CC and tested it using the default Desktop, Tablet and Mobile sizes, followed by the Smart Phone Size.
    The CSS you currently have sets the featurest <div> to 'display: none' when viewed on screen sizes lower than 480px:
    Another helpful way to find out what is going on with your CSS is to test the site with Firefox using Web Developer Tools to inspect the element (or alternatively, Adobes Inspect tool). You can right-click the image and "Inspect Element" then resize the browser window so you can see exactly which CSS rule is being applied and overrided.
    My suggestion would be to add an additional media query in Dreamweaver to handle all screen sizes below 480px and then set divs or elements you want to hide or show display property to visible.
    Hope this helps!

  • How can I add a jquery effect (parallax bacground effect) in a fluid grid layout? I

    How can I add a jquery effect (parallax bacground effect) in a fluid grid layout? I download it from the web (the effect), I use it in a blank html page and all works correctly. Using it in a  fluid grid and no images appears and no effect.. why?  In the Fluid grid layout I add the .html information inside the container.. and I add the css information in first place.
    I download it from: http://www.jqueryrain.com/2012/02/jquery-scrolldeck-parallax-plugin/

    I've never tried to combine them.  But to be honest, I don't think jQuery Parallax is going to work in FGLayouts b/c Parallax backgrounds are not built on a mobile first approach.  For best results, Parallax requires a min-width of 960px which isn't mobile friendly. 
    Nancy O.

Maybe you are looking for

  • How to open Camera RAW (CR2) files in Photoshop CS3 and CS4? (Mac)

    I have a Canon 7D. I prefer to shoot in raw format, but the CR2 files cannot be opened by either Photoshop CS3 on my Mac in the office OR by Photoshop CS4 on my iMac at home. I have tried dowloading the Adobe DNG Coverter and Camera Raw 4.6 update (w

  • Java text to unicode or UTF-16?

    Hi all, I get a string inputed in by the user, say 〹. I want to add this to an internal string, but as a unicode formated string. Otherwise when I write this string out using a XML formater, it encodes the ampersand character as & Does anybody know h

  • Go back option in OBIEE gives the selected Proj num

    Hi, We have a report PAGE 1 where we have multiple project numbers. clicking on one of them navigates us to a diffrent page PAGE 2 giving detaild info based on that project. we have provided a link on PAGE 2 which takes us to the PAGE1 on that dashbo

  • Nokia 5530, On dialing I can not hear dial tone in...

    Dear All, I have 5530 Xpress Music. 4 days before this problem started that when I dial a number and put the phone to my ear, I can not hear the dial tone going to other end. When other party receive the phone they say Hello/hi I can not hear them, I

  • Shared Reviews - Livelink WebDAV

    One instance of Livelink 9.7.1 has utilised Adobe Acrobats ability to send and collate data for reviewing documents via Shared Reviews. This instance of Livelink require a username and password to gain access, and Acrobat asks for these credentials a