Image CSS trumps Text CSS… how?

  • Resolved siounis

    (@siounis)


    18 years, 1 month ago

    Using the Default template, changed the X axis from like 700px to 900 and removed the sidebar, with latest WP.

    Okay here is what i need:
    I want the text to be in a margin in the middle of the canvas. so lets say its space is 600 px with 150 px on either side.

    BUT

    I want the images, all images, to go from 1 to 900 px across and not from 150 to 900 px.

    | | – Content (900px)
    | |X| | – Text (p padding:{0 150 0 150})
    ||XXXXX|| – Img (900px)

    What i tried so far:

    – Negative Padding
    I added a tag to my css for the text. the “p” tag. and i put the “img” tag below it with a padding tag with a negative value of -150 which worked! It tumpted the p tag!
    but if i had two images next two each other they overlap each other cause the one to the right would move back 150 px and over lap the first one.

    Ive seen this on other websites and searched a bit for help. Please help. I’ll give you a cookie ??

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter siounis

    (@siounis)

    |_______| – Content (900px)
    |__|X|__| – Text (p padding:{0 150 0 150})
    ||XXXXX|| – Img (900px)

    Thread Starter siounis

    (@siounis)

    p {
    padding: 0px 0% 0px #px;
    }

    img {
    margin: 0px 0px 0px -#px;
    }

    Thread Starter siounis

    (@siounis)

    damn, wordpress gota give us an option to edit posts.

    anyway,

    solution is:

    p {
    padding: 0px 0% 0px #px;
    }

    img {
    margin: 0px 0px 0px -#px;
    }

    Add padding to the left by any number of pixels then use a negative margin with the same pixels

    Thread Starter siounis

    (@siounis)

    shit no wait that doesnt work,
    if two images are next two each other they over lap

    Thread Starter siounis

    (@siounis)

    it turns out WP automaticly adds the <p> to all content

    hence a class tag is in order.

    add a class to the p style in the css

    p {
    margin: 0 150px 0 150px;
    }

    p.img {
    width: 100%;
    }

    then everytime you write a post add this to it:

    <p class=”img”> IMAGE CODE </p>

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Image CSS trumps Text CSS… how?’ is closed to new replies.

Tags