Joe18

Forum Replies Created

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

    (@joe18)

    Thank you very much for your response.

    Thread Starter Joe18

    (@joe18)

    Ok…I’ve been working it. I did a lot of trial and error before coming back. I think I fell into the grand canyon on a part of the instructions.
    Feeling like a failure. (My folder is on the server holding the images. We will call it foldername…) I understand what you are saying that I can not trust the auto generated code coming from other applications. Just having a hard time figuring out what to take away and what to add.
    I understand the concept of once images add up to 600 pixels in width I then go to the next line. Not sure how to set it up though. Can we pretend that the first two images add up to 600pixels in width combined and the following two as well combined 600 pixels in width and show me how to set this up along with the CSS. (not understanding the image1.<div id=”image1″> I understand div’s I just don’t understand how you want me to set this up and if I’m suppose to rename everything )

    So on my page for example…
    <div id=”wrapper”>
    <div style=”background-image:url(/wp-content/themes/theme22336/foldername/infographic_600_03.png); position:absolute; left:205px; top:0px; width:219px; height:146px;” title=””>
    </div>
    <div style=”background-image:url(/wp-content/themes/theme22236/foldername/infographic_600_04.png); position:absolute; left:213px; top:0px; width:381px; height:60px;” title=””>
    </div>
    <div style=”background-image:url(/wp-content/themes/theme22236/foldername/infographic_600_05.png); position:absolute; left:508px; top:0px; width:176px; height:60px;” title=””>
    </div>
    <div style=”background-image:url(/wp-content/themes/theme22236/foldername/infographic_600_06.png); position:absolute; left:208px; top:0px; width:424px; height:60px;” title=””>
    </div>
    </div>

    I don’t know what I should be removing or changing after wrapper.

    On the CSS doc. this is what I have now. (I removed all my trial & error code I had.)
    #wrapper {
    width: 600px;
    }

    Thread Starter Joe18

    (@joe18)

    (Sorry in advance if this thread went through twice. I’m putting it in again because it looks like on my end it didn’t go through. Luckily I still had my wording saved in a doc.)

    Thanks…it’s making sense. I will check out the sites you gave me above.
    Almost there!
    My only issue right now is
    ? my image is falling partially behind the footer or rather the footer is overlapping on the image
    ? I can’t seem to get the image centered and in a perfect world would like it to work on all browsers and devices.

    This is the output code from slicing that was at the top of the page of code after slicing.
    <body bgcolor=”#FFFFFF” leftmargin=”0″ topmargin=”0″ marginwidth=”0″ marginheight=”0″>
    <div style=”position:absolute; left:25%; top:0px; width:600px; height:334px;”>

    Now into the wordpress page.
    I had removed the above code from the top of the page. Didn’t feel like I needed the bgcolor etc. and figured the position information could be moved to CSS.

    So I then started with the below code…I’m on the wordpress page….remember the image is showing up but half behind the footer.

    [span12]
    <div class=”info graphic”>

    the next bit of code is all image code information. Only giving one since its just repeated basically….
    <div style=”background-image:url(/wp-content/themes/theme22336/foldername/infographic_600_03.png); position:absolute; left:205px; top:0px; width:176px; height:146px;” title=””>

    </div>
    [/span]

    Then in style.css
    I put…

    .infographic {
    display:block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
    }

    I did have display: absolute….. I’ve been using trial and error. I’m just giving you my last attempt and I keep changing it. So Im still fighting with it.

    Thank you for your time.

    Thread Starter Joe18

    (@joe18)

    Thanks!!!!!!….I was on the right track! I did have my path correct actually. Because I didn’t totally understand the relationship of some of the code…. I had removed a part of it…
    background-image:url and the ( )
    I still don’t understand why when the images are .png and have no background. Unlsess it’s just an output setting from slicing. Explain please. If it’s something I should know at this point in my life I will look it up on my own. LOL
    So I put that part of the code I removed all back in and its working now. I just need to play with the CSS.

    Thread Starter Joe18

    (@joe18)

    This is not a good example of what I’m trying to do because it’s slightly obnoxious visually. You will have to scroll down and you will come to the bars. They open up.
    https://www.ibm.com/smarterplanet/us/en/ibmwatson/implement-watson.html
    They dont have a gradient which I want either.

    This example shows the bar going all the way across. Yes…I need it to do that so I can show what it will look like once the gradient is put into each bar.

    But I also need to show it only as the width of my allowable container/content area.

    I hope I gave enough information. I have no link of my own to give you since what I have done so far is a mess and I need to just start over.

Viewing 5 replies - 1 through 5 (of 5 total)