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?
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.
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;}
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 :
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.
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”>
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”>.
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.
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!
