WordPress.org

1. bendrucker
   Member
   Posted 2 years ago #

   I am currently working on my new website. I am trying to integrate social networking into it much more so than my existing site. I have a twitter and facebook banner at the bottom of the contact page. However, I want both of them on the same line. I am using a theme designed for photographers, so I went poking around in the CSS and found a section that set "Auto" left and right margins for all img elements, thereby centering all images. However, even after overriding this margin and getting the banners to align to the left, a margin still appears on the right of each banner, making it impossible for them to be on the same line. Can anyone help me? I ultimately want them both next to each other, centered on the page.

2. @mercime
   Member
   Posted 2 years ago #

   You could float the images to the left with right padding and so on. But then we could help you better with your site url.

3. bendrucker
   Member
   Posted 2 years ago #

   Whoops. Totally forgot to include that. The url is http://testing.bdrucker.com

   The specific page in question is the contact page

4. iridiax
   Member
   Posted 2 years ago #

   This in your theme's style.css could be causing it:

   .image img, img {
   	display:block;
   	margin: 0 auto;
   }

5. bendrucker
   Member
   Posted 2 years ago #

   I looked at changing that. Because the theme is designed for photographers, it centers the img attribute, assuming you are going to be uploading photos. I've found it's slightly inconvenient when the image you're using is not in fact a photo. I'll play around a little with that code again tomorrow. I'd assume "block" would cause the issue. I think I may have forgotten to override it in the special class I created for logos by setting it as inline. I'll give that a shot and see if it fixes it.

6. nazcar
   Member
   Posted 2 years ago #

   try using an old school table tags:
   

   <table border="0" cellpadding="0" cellspacing="0" width="100%">
   	<tr>
   		<td>img1</td>
   		<td>img2</td>
   	</tr>
   </table>

   or defining a new class in your css.
   it must have the attribute display: inline; margin: 0;

7. @mercime
   Member
   Posted 2 years ago #

   or try adding this to your style.css without adding any table
   

   #content img .logo, #content img .logo a
   { margin: 0; padding: 0; float: left; width: 310px; padding-right: 20px; }

8. bendrucker
   Member
   Posted 2 years ago #

   I'd prefer to stay away from table if at all possible. Unfortunately, none of the CSS solutions given, all very similar to what I've tried, have worked. I guess I'll leave them centered on separate lines. If anybody figures out what's going on, I'd be forever in their debt.

9. bendrucker
   Member
   Posted 2 years ago #

   Well, I disabled CSS in my browser and the images promptly snapped together onto one line. So it's not the HTML. Maybe I'll just start deleting chunks of CSS until I find the offending piece of code.

10. bendrucker
    Member
    Posted 2 years ago #

    OK, this is really getting on my nerves. I can't just abandon having multiple images on one line. I'm finding more and more areas within the site that I need it. I'll keep poking around in the CSS, but I'm not really making any progress. Can anyone help me out? It seems that no matter what, there is always one margin that extends the entire width of the content area, whether on the right or left.

11. bendrucker
    Member
    Posted 2 years ago #

    I messed around with the code a little, and making a class called no center designed to get rid of the block element and remove the centering. The code looks as following:
    

    .nocenter{
    	margin-left: 0;
    	margin-right: 0;
    	display: inline;
    }

    I then contain the set of images w/in a div and center that.

Topic Closed

This topic has been closed to new replies.