1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Please help

Discussion in 'HTML & Website Design' started by shelby1324, Mar 7, 2013.

  1. #1
    I'm having a problem with the image on my site. www.therecomplife.com
    I want the Image I made to fill in the black region. I have used firebug but to no prevail. The theme I'm using is called Lucid. I paid for the theme but I did not pay for the support forums. Any help would be much appreciated.
    shelby1324, Mar 7, 2013 IP
  2. matt_62

    matt_62 Well-Known Member

    Messages:
    1,331
    Likes Received:
    276
    Best Answers:
    12
    Trophy Points:
    195
    #2
    the only black region that i can see is down the very bottom of the page? is that the region you are looking to fill? if so what is the image (provide link please)
    matt_62, Mar 7, 2013 IP
  3. shelby1324

    shelby1324 Greenhorn

    Messages:
    22
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #3
    I was messing with the code. it is now back to the way it was when I posted this. Its allows me to add a logo but this is as big as the logo will get no matter what dimensions I set it to in photoshop.
    shelby1324, Mar 7, 2013 IP
  4. TheLimeDesign

    TheLimeDesign Active Member

    Messages:
    476
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    60
    #4
    Well, you can't do this directly from the theme settings. You will have to alter the code a bit. If you see closely, the header defines the width to a fixed size and under the logo, a margin has been defined. Also, if you are using the theme's built in setting to assign the image, the script might be resizing it upon uploading.
    TheLimeDesign, Mar 7, 2013 IP
  5. Masim man

    Masim man Member

    Messages:
    71
    Likes Received:
    4
    Best Answers:
    2
    Trophy Points:
    33
    #5
    I can't explain in the detail but if you want to fill in the black region with image, try to remove the main-header and logo-area bottom margin property.

    #main-header
    margin-bottom: 60px;
    #logo-area
    margin-bottom: 57px;

    And specify the height attribute for image in the <img> tag, (better to use the actual size of the image).
    Masim man, Mar 7, 2013 IP
  6. TheLimeDesign

    TheLimeDesign Active Member

    Messages:
    476
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    60
    #6
    He won't even have to specify the height for the image once the containers' margins are removed
    TheLimeDesign, Mar 7, 2013 IP
  7. shelby1324

    shelby1324 Greenhorn

    Messages:
    22
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #7
    Thank you guys. I edited the css and its looking better. I was looking for more of a way to make the picture bigger instead of the getting rid of the margin's. I know you guys are doing this for free and I appreciate it alot. www.therecomplife.com the theme is updated with your suggested margin-bottom's gone. I want it to be bigger and stretch throughout the whole page.
    shelby1324, Mar 7, 2013 IP
  8. TheLimeDesign

    TheLimeDesign Active Member

    Messages:
    476
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    60
    #8
    You need to specify a width first because images will not stretch themselves as the site gets wider
    TheLimeDesign, Mar 7, 2013 IP
  9. shelby1324

    shelby1324 Greenhorn

    Messages:
    22
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #9
    Where in the code do I specify the height and width for the image?
    shelby1324, Mar 7, 2013 IP
  10. TheLimeDesign

    TheLimeDesign Active Member

    Messages:
    476
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    60
    #10
    You have to specify a width for the container first so it doesn't shift around. Then alternatively you can add the attributes to the image. Here's a logic to help you out:

    <div id="header">
    <div id="imageholder" style="width:xxxxpx;height:xxxxpx;margin:0 auto;">
    <img src="xxx" height="xxxpx" width="xxxpx" />
    </div>
    </div>

    Note that you can use the "style" attribute as CSS. This will help. You will not get an image that always fill 100% of the content due to different screen resolutions and the fact that image are ratio based entities.
    TheLimeDesign, Mar 7, 2013 IP
  11. shelby1324

    shelby1324 Greenhorn

    Messages:
    22
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #11
    please forgive me if this is annoying, but I specified a width for the logo container for 2000px, but as you can see my site looks a little "off" lol. as far as the code you provided above I dont know exactly where to put that.
    shelby1324, Mar 7, 2013 IP
  12. shelby1324

    shelby1324 Greenhorn

    Messages:
    22
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #12
    the div id header is shown to be the search bar and social icons, so I don't want to mess with that area.
    shelby1324, Mar 7, 2013 IP
  13. Masim man

    Masim man Member

    Messages:
    71
    Likes Received:
    4
    Best Answers:
    2
    Trophy Points:
    33
    #13
    I just noticed that you're using the responsive template, so I think you don't need to specify both of them.
    Just edit your image with image editor and (scale/crop) set the width 960px and set the height you desire.
    Masim man, Mar 7, 2013 IP
  14. shelby1324

    shelby1324 Greenhorn

    Messages:
    22
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #14
    lol oh gawd this theme is bending me over backwards. Did as you suggested but as you can see I'm still left with a website that is horrid. I really am glad that you guys are trying to help me though.
    shelby1324, Mar 7, 2013 IP
  15. TheLimeDesign

    TheLimeDesign Active Member

    Messages:
    476
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    60
    #15
    I'm going to dig through the source code. But before you make changes like these, you need to switch off the WP-Supercache. It will not show you the latest version.
    TheLimeDesign, Mar 7, 2013 IP
  16. Masim man

    Masim man Member

    Messages:
    71
    Likes Received:
    4
    Best Answers:
    2
    Trophy Points:
    33
    #16
    You're almost there, you just need to remove the logo container's width (2000px).

    And redesign your image with dimension 960px X 250px to make it look much bigger as you wish.
    Masim man, Mar 7, 2013 IP
  17. TheLimeDesign

    TheLimeDesign Active Member

    Messages:
    476
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    60
    #17
    Yep..Do this:
    In your style.css, look for the following:

    .container #logo-area {
    margin-bottom: 0px;
    text-align: center;
    width: 2000px; // <-- Remove this!
    }

    Then set your image dimensions to your taste. It will flow with the container.
    TheLimeDesign, Mar 7, 2013 IP
  18. shelby1324

    shelby1324 Greenhorn

    Messages:
    22
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #18
    I did everything mentioned above, but I'm still left with the black region. lol am I really just this much of an idiot or is there something I'm missing? I'm looking to achieve this result.[​IMG]
    shelby1324, Mar 8, 2013 IP
  19. cam1960

    cam1960 Greenhorn

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #19
    Hey man I'll help you out-send me a copy of your source files and I'll do it for you with an analysis of what to do.
    cam1960, Mar 8, 2013 IP