SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Space between images and text

    Hi all,

    http://www.cookingexchange.info/

    I'd like to put a bit of breathing room between the images and post excerpts (including the "Read More" buttons"). I have no idea what section of css governs this.

    Also in the third column "Advertising" I'd like to put a line break between banners. Is this possible?

    Thanks.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,173
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    This should be pretty easy, but your link bombs out for me ("not found"). Can you check the link?

  3. #3
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Ralph. That's odd that the link doesn't work for you. The site is cookingexchange.info.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,173
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Yep, still no access for me.

  5. #5
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,798
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    My dislike for wp comes from it's class overkill.

    anyway, try adding rules via these: I added some sample spacing . Unless there are other rules targeting the SAME element via different classes in your stylesheets, these should work.

    Code:
          article.post{
           /*wraps around each post*/
          }
          article.post header{ /* targets the the headline*/ 
          
          }
          
          article.post .attachment-post-thumbnail { float:left;margin-right:1em}
          
          article.post .button{ margin-top:1em; 
          
          display:inline-block;  /* try it w/o this line first*/ 
          
          }
          
          article.post .post-content{ overflow:hidden; background:pink;}

  6. #6
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    My dislike for wp comes from it's class overkill.

    anyway, try adding rules via these: I added some sample spacing . Unless there are other rules targeting the SAME element via different classes in your stylesheets, these should work.

    Code:
          article.post{
           /*wraps around each post*/
          }
          article.post header{ /* targets the the headline*/ 
          
          }
          
          article.post .attachment-post-thumbnail { float:left;margin-right:1em}
          
          article.post .button{ margin-top:1em; 
          
          display:inline-block;  /* try it w/o this line first*/ 
          
          }
          
          article.post .post-content{ overflow:hidden; background:pink;}
    Thanks dresden_phoenix! Luckily, this theme has an override section for issues like this. Not ideal but it works.

  7. #7
    Non-Member
    Join Date
    Mar 2013
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    While it's very easy to add any number of images to a website, not many people know how to successfully create the exact amount of space between images that they want for design purposes. Because different web browsers display images and interpret code in different ways, you may need to try several HTML and CSS solutions to get the pictures to display properly.

    Instruction :
    1) Log in your a/c with your web host and choose to the file managing system where you keep the HTML files for your websites. After choosing the option edit the HTML page and modify the an image you have uploaded.
    2) Find the <IMG SRC> tag that has the location of the image that needs to have space added on the sides. Add in an additional attribute to the end of the tag to create the space. Type in the "ALIGN" attribute if you have three or less images in a row and no text on the sides. Use the attribute to specify on which side of the page the image should be displayed, such as <A HREF="http://webpage.com/image.gif" ALIGN="LEFT"> or <A HREF="http://webpage.com/image.gif" ALIGN="CENTER">
    3) Save the HTML file and try viewing the web page in multiple web browsers to ensure the images have enough space between them. Edit the file again if the images are not displaying the way you want them to. Go back to the <IMG SRC> tag and instead add in the "HSPACE" and "VSPACE" attributes for a greater level of control over the horizontal and vertical white space around an image. Type in the number of pixels of white space you want around the image in each direction, such as <A HREF="http://webpage.com/image.gif" HSPACE="5" VSPACE="5">.
    4) After saving the file again, check how the images are being displayed. Return to the HTML file again if the images don't have the correct amount of space that you want.
    5) Redesign your website using CSS instead of normal HTML if the space around the images still isn't correct. Specify that you are using CSS by typing in <style type="text/css"> between the <head> and <body> tags of the page. Type in the "{" character to indicate that you are adding a new element. Type in the code "background-image: url('http://webpage.com/image.gif');" on the next line to specify that the new element will be the image you want to display. Use the "position" tag to specify exactly where on the page the image will go, such as "background-position: 100px 150px;" Add in your other images on the page using the same CSS tags and leave gaps between the number of pixels to create space between the images. For example, if you place one at "100 pix, 150 px" and another at "150 px, 200 px" they will have 50 pixels of space between them.
    I think in above data you received your answer. Good Luck!

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,173
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    @Harshada

    Stuff like this is way out of date now:

    ALIGN="LEFT"
    ALIGN="CENTER"
    HSPACE="5"
    VSPACE="5"

    Use CSS for such things.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •