Jump to content
  • Similar Content

    • By GrahamUK33
      I have a boarder around an image, but when a caption is added underneath the image, I am after the boarder to encapsulate the caption.

      .php
      <div id="attachment_55" style="width: 810px" class="wp-caption aligncenter"><img class="wp-image-55 size-full" src="http://ithorizon.online/wp-content/uploads/britain-at-war.jpg" alt="britain at war" width="800" height="600" srcset="http://ithorizon.online/wp-content/uploads/britain-at-war.jpg 800w, http://ithorizon.online/wp-content/uploads/britain-at-war-300x225.jpg 300w, http://ithorizon.online/wp-content/uploads/britain-at-war-768x576.jpg 768w" sizes="(max-width: 800px) 100vw, 800px"><p class="wp-caption-text">Britain at War</p></div>
      .css
      /*-- image, video --*/ img, video {     height: auto; /* maintain scaled height. */     max-width: 100%; /* width of container. */ } img.alignleft, img.alignright {     float: none;     margin: 0; } img.size-full {   padding: .4rem .4rem .4rem .4rem;   background-color: #fdf8f1;   border: 1px solid #f8e4ca;   border-radius: 4px;   -webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);   box-shadow: 1px 2px 4px rgba(0, 0, 0, .5); } /*-- image, video caption --*/ .wp-caption, .gallery-caption {     color: #666;     font-style: italic;     margin-bottom: 1rem; /* margin before text */     max-width: 100%; } .wp-caption img[class*="wp-image-"] {     display: block;     margin-left: auto;     margin-right: auto; } .wp-caption .wp-caption-text {     margin: 0; /* text padding */ }  
      As you will notice, I am creating a WordPress theme. I am not sure if I have called up the all the right tags in CSS for the image and caption.
    • By drkirkby
      My company (Kirkby Microwave) website was coded in XHTML, and had no errors on the W3C validator. It has been suggested that nobody uses XHTML, and I should switch to HTML 5. So I changed the bit at the top of the webpages to read
      <!DOCTYPE html >
       
      After making some minor changes, mainly removing the setting of the width inside the <img src> tag, I can get pages to almost validate. Some don't, but that is simply because I have not got around to fixing the errors. But the W3C validator is always complaining
      Warning: This document appears to be written in English. Consider adding lang="en" (or variant) to the html start tag.
      I can't seem to see how to fix this.  Despite reading the links on the W3C validator page, no matter what I try does not work! Feel free to look at the source of my homepage, and let me know how to fix this.
      I only speak English, so just want to leave it as English, and nothing else.
      I did not post the link to my homepage, as I'd be interested if anyone that Googles Kirkby Microwave finds a .com domain. There is a .com, but it should be hidden from Google, but anyone on the BT broadband network may be able to see it, as the IP address range is restricted to those that BT seems to serve me up.
      Dave
    • By Randallrbaker
      Here is my website. www.vibe432.com  please check every link and every possible page ans let ne know whats wrong. Id  evenlike to have the responsiveness looked at too. Im having someone do the css and html for me so i need to tell them exactly what wrong and why it's wrong. 
    • By 98sfsdf8
      Hi all,
      I am trying to change through images when scrolling, (and I understand that maybe the jquery is a bit messy but it seems to be working) but i would like:
      - to be able to have images of different heights and widths, not all the same size (as it is now).
      - vertically/horizontally centered.
      Here is a fiddle: https://jsfiddle.net/postcolonialboy/WTkqn/486/
      Thanks!
      HTML:
      <div id="contentwrapper">       <div class="centreme">         <img src="https://picsum.photos/200/200?image=1" id="animation" />         <img class="hidden" src="https://picsum.photos/200/200?image=1" />         <img class="hidden" src="https://picsum.photos/200/200?image=2" />         <img class="hidden" src="https://picsum.photos/200/200?image=3" />         <img class="hidden" src="https://picsum.photos/200/200?image=4" />         <img class="hidden" src="https://picsum.photos/200/200?image=5" />         <div id="bottommark"></div>       </div>     </div> CSS:
      body,       html {         height: 7000px;         margin: 0;         background-color: grey;       }       .hidden {         position: absolute;         top: -9999999px       }       #bottommark {         position: absolute;         bottom: 0;       }       #contentwrapper {         width: 100%;         height: 100%;         position: fixed;       }       .centreme {         position: fixed;         width: 200px;         /* the image width */         height: 200px;         /* the image height */         top: 50%;         left: 50%;         margin-top: -100px;         /* half the image height */         margin-left: -100px;         /* half the image width */       } JS:
      $(document).ready(function() { var a = $(document).height(); var b = a - $("#bottommark").position().top; $(window).scroll(function() { var e = $(document).height(); var f = $(window).scrollTop(); var c = e - $("#bottommark").position().top - f; var d = b / 5; $("span").html(c); if (c > d * 4) { $("#animation").attr("src", "https://picsum.photos/200/200?image=1") } if ((c < d * 4) && (c > d * 3)) { $("#animation").attr("src", "https://picsum.photos/200/200?image=2") } if ((c < d * 3) && (c > d * 2)) { $("#animation").attr("src", "https://picsum.photos/200/200?image=3") } if (c < d * 2 && c > d * 1) { $("#animation").attr("src", "https://picsum.photos/200/200?image=4") } if (c < d) { $("#animation").attr("src", "https://picsum.photos/200/200?image=5") } }) });  
    • By charlyanderson
      Hello everyone :)
      I am working on a grid type layout and really having troubles and hoping someone might be able to help.
      The background colours should be full width whilst the content should be contained and have a max-width. I have managed to extend the background colours outside of the content areas by absolutely positioning them. This however, doesn't work when there is more than two blocks per row.
      I have attempted this about 20 times and cannot figure out how to achieve this on a responsive website. Can anyone help.
      Attached is a very basic example of what I am trying to achieve.
      Thanks in advance.

  • Recently Browsing

    No registered users viewing this page.

  • Member Statistics

    • Total Members
      58,574
    • Most Online
      4,970

    Newest Member
    David Rodriguez
    Joined
  • Forum Statistics

    • Total Topics
      65,793
    • Total Posts
      453,272
×