7 Replies Latest reply on Sep 4, 2013 6:45 PM by Kel_Leach

    How do I make an image placeholder not have an outline when 'live'

    Kel_Leach Level 1

      I have a logo in the top left hand corner of my page and also one in the top right. For the top right one to be in the position I wanted, I used an image placeholder in between the two logos. But the outline of the placeholder is visible on the 'live' page, how do I make it disappear but still keep my logos in the position I want?

        • 1. Re: How do I make an image placeholder not have an outline when 'live'
          John Waller Adobe Community Professional & MVP

          For the top right one to be in the position I wanted, I used an image placeholder in between the two logos.

           

          You don't need to use image placeholders to 'prop' page elements into place. That's how things were done in the 90s.

           

          Use CSS to set the RHS logo in the correct spot e.g. float: right, padding and margin. That's what they're for.

           

          If you need more specific help, please upload your page to the web and post a link so we can view it in our browsers.

          • 2. Re: How do I make an image placeholder not have an outline when 'live'
            Kel_Leach Level 1

            Thanks John. The page I'm working on is a replacement for an existing one. Is there a way of uploading my 'under construction' page to the web, so you can see it, without replacing the existing one?

            • 3. Re: How do I make an image placeholder not have an outline when 'live'
              John Waller Adobe Community Professional & MVP

              In DW, just File > Save As....test.html

               

              Then upload it.

              1 person found this helpful
              • 5. Re: How do I make an image placeholder not have an outline when 'live'
                Nancy OShea Adobe Community Professional & MVP

                You might approach it like this:

                 

                 

                <!doctype html>
                <html>
                <head>
                <meta charset="utf-8">
                <title>HTML5, Fluid</title>
                
                <meta name="viewport" content="width=device-width, initial-scale=1">
                
                <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
                
                <style>
                * {
                /**put this into your CSS Reset**/
                box-sizing: border-box;
                -moz-box-sizing: border-box;
                -webkit-box-sizing: border-box;
                margin:0;
                padding:0;
                }
                
                body {
                font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
                font-size: 100%;
                background-color: #536475;
                margin: 0 auto;
                padding: 0;
                min-width:320px;
                }
                
                /**in smaller viewports, images will re-scale**/
                img {
                max-width: 100%;
                display: block;
                vertical-align:middle;
                }
                
                header {
                min-height: 50px;
                background: #444;
                color: #CCC;
                }
                header h1, header h2 {display:inline; margin-left: 2%;}
                
                header img {
                float: left;
                width: 33.33%;
                padding: 0 1%;
                }
                
                section {
                width: 82%;
                margin: 0 auto;
                padding: 12px;
                background: #FFF;
                overflow: hidden;
                }
                
                article img {
                float: left;
                padding: 12px;
                border: 1px solid #CCC;
                margin-right: 6px;
                }
                
                footer {
                border-top: 5px solid #999;
                font-size:x-small;
                }
                
                /**clear floats after**/
                .clearfix:after {
                content: '.';
                clear: both;
                display: block;
                visibility:hidden;
                }
                
                </style>
                </head>
                
                <body>
                <header>
                <h1>Site Name</h1>  |  <h2 class="clearfix">Some pithy slogan</h2>
                <img alt="description" src="http://placehold.it/184x130">
                <img alt="description" src="http://placehold.it/184x130">
                <img alt="description" class="clearfix" src="http://placehold.it/184x130">
                
                <nav>
                    Your menu goes here...
                </nav>
                </header>
                
                <section>
                <article>
                <img alt="description" src="http://placehold.it/184x130">
                <h3>Heading 3</h3>
                <p class="clearfix">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus. Aenean tristique enim ut ante dignissim.</p>
                
                <img alt="description" src="http://placehold.it/184x130">
                <h3>Heading 3</h3>
                <p class="clearfix">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus. Aenean tristique enim ut ante dignissim.</p>
                
                <img alt="description" src="http://placehold.it/184x130">
                <h3>Heading 3</h3>
                <p class="clearfix">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus. Aenean tristique enim ut ante dignissim.</p>
                </article>
                
                <footer>Your footer goes here...</footer>
                </section>
                </body>
                </html>
                

                 

                 

                Nancy O.

                1 person found this helpful
                • 6. Re: How do I make an image placeholder not have an outline when 'live'
                  Kel_Leach Level 1

                  Thank you! I have worked out how to place them using the padding and margins etc.

                  • 7. Re: How do I make an image placeholder not have an outline when 'live'
                    Kel_Leach Level 1

                    Thanks Nancy! I haven't put it in exactly as above but it has given me a clearer picture of how the float/margins/padding etc work and I have managed to position the logos without the use of an image placeholder.