Need help? Check out our Support site, then

relative/absolute positioning of jpgs

  1. I want to move two bars to the left that are above and below an image. They are on individual pages. How do I enter the relative and absolute positioning in this case, is it in the text edit window for the specific page? I believe that the repositioning should be done here and not in the customization CSS panel, is this true? If this is true, how do I enter the relative and absolute positioning in the text edit window for a specific page for the images? This is what the code looks like in the text editor window for two of the images. It is the first image that I want moved to the left and the second image that I want to stay where it is.

    <a href=""><img class="alignleft size-full wp-image-924" src="" width="610" height="14" /></a>
    <a href=""><img class="alignleft size-full wp-image-900" alt="CandyCane" src="" width="150" height="105" />
    <p style="padding-top:30px;"></p>

    There is a repetition of the first image that needs to be moved but I believe that I can move it if I understand the positioning of the first two. Thanks.

    The blog I need help with is

  2. Hi there, can you explain a little more of what you are wanting to accomplish, what you want it to look like when you are finished?

  3. There are three images that I want aligned. Two long bars each: width 610px height 14px and a flower image: width 150px height 105px. The bars are above and below the flower image, however right now they all align together and the design is to have the bars separated from the flower by width, so their position now is not far enough to the left. Right now their, align left positioning does not align with the left edge of the body (div# content 521px x 429px color: #DCE3E6) they align left with the entry header further to the right. My goal is for the flower image to stay as it is, align left with the entry header, and the bar images above and below the flower to align left with the body.

  4. Ok, now I understand. Yes, you can use position: relative to do this with the theme you are using. First off, on the Decision-Making page, you have those bars linking to the original file. I would suggest setting the File Link to "none" when you insert them so that they aren't clickable. You will have to create a new image for the bars that is 30px wider since we are moving the bar 30px to the left. Here is the HTML code with the style attributes. I removed the href link stuff in my example below.

    <img width="610" height="14" src="" class="alignleft size-full wp-image-924" style="position: relative; left: -30px;"/>

    Give that a try and see what you think.

  5. @lisarhode, on second thought, the above isn't going to work for you. I'm on my way to lunch, but will come up with a CSS solution that will work and actually be easier for you to use when I get back.

  6. Ok, I got it now. Add this to your custom CSS:

    #band {
    	background: url("") repeat-x scroll 0 0 transparent;
    width: 640px;
    height: 14px;
    position: relative;
    left: -30px;

    In your page, you would put this above and below the photo/text content

    <div id="band-top"></div>

    Give that a try and see what you think.

  7. I should mention, that you will no longer have to insert the image of the band into your posts with the above solution.

  8. These problems occurred:
    -The band didn't move over
    -The code that I put in the CSS custom edit reverted the CSS for the site navigation menu to serif font. The font change is in the custom editor.

    *if you didn't get a chance to see the rest on the site the band is on ALL the pages under the "trainings" navigation menu title so I am not sure how that affects CSS between the custom editor and the page editor.

  9. @lisarhode, the code I gave would not affect the site navigation in anyway. The ID I used in the code is unique and not used in the Sight theme at all.

    I did however miss editing the div style ID in the code I gave you.

    Open your Consensus Decision Making page, switch to the Text tab, copy out the code you have there and paste it into a plain text file for safe keeping. Paste the following into the text tab on that page and save.

    <div id="band"></div>
    <img class="alignleft size-full wp-image-900" alt="CandyCane" src="" width="150" height="105" />
    	<li>I haven’t just trained on consensus—I’ve survived it!</li>
    	<li>I lived in a consensus-based community for seven years</li>
    	<li>I trained managers at one of the first major Labor-Management Partnerships in U.S. history</li>
    	<li>I lived in a consensus-based community for seven years</li>
    <div id="band"></div>

    Next, go to Appearance > Customizer > CSS and paste the following at the very end of your custom CSS and then look at the preview for that page, or navigate to that page in a new tab.

    #band {
    background: url('') repeat-x scroll 0 0 transparent;
    width: 640px;
    height: 17px;
    position: relative;
    left: -30px;

    Once you verify the code works, to use the band above and below an image in a page or post, paste the following before and after the code for your image and text in the text tab in the page or post editor.

    <div id="band"></div>

  10. Thanks.
    It worked. By the way, you were right about the code not effecting the site navigation. It turns out that the site navigation defaults to the original font choice in the custom editor until I cancel out of custom edit.

    I am going to move the bands in the rest of the posts.

  11. Hooray! Glad it is coming together for you and you are welcome.

Topic Closed

This topic has been closed to new replies.

About this Topic