SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Images on header not aligned correctly

    Ok I am at a loss as to how to take the two side images on my header and spread them farther apart. The site is at http://foxdenwebsolutions.com/discri...lry/index.html. I tried using the inspect mode of Chrome and when I move it over by using a negative value, part of the image disappears. The site is responsive and I am using the 1140 grid framework. Don't pay attention to the smaller versions as I have not fixed those yet. The header container is more than 960 pixels and so is the row element. I just don't understand what I am doing incorrectly. The logo is also sitting on the header. If you have a more efficient way of handling all three, please let me know so I can get this done for the client. She wanted something on the header besides the logo as it looked bare to her. Thanks.

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,580
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Hi, cgacfox. Let me suggest a couple of changes.

    In your HTML page, change div "container header" so it looks like this:
    Code:
    <div class="container header">
        <div class="row">
        	<div class="flourish1"></div> <!--flourish-->
            <div class="flourish2"></div> <!--flourish-->
            <div class="logo"><h1>Discriminating Lady Jewelry</h1></div> <!--logo-->
        </div> <!--row--> 
    </div> <!--container header-->
    In style.css, make the following changes:

    Line 64
    Code:
    .header .logo {
        width: 435px;
        height: 412px;
        background: url(http://foxdenwebsolutions.com/discriminatingladyjewelry/images/logo.png) no-repeat;
        margin-left: 340px;    /* DELETE ME */
        position:relative;     /* ADD ME */
        margin:0 auto;         /* ADD ME */
    }
    Line 86
    Code:
    .flourish2 {
        background: url(http://foxdenwebsolutions.com/discriminatingladyjewelry/images/header_flourish2.png) no-repeat;
        height: 370px;
        width: 214px;
        float: right;
        margin-top: 29px;    /* CHANGED FROM -385px */
    }
    The indents in the HTML were a little confusing. Re-indenting made the solution clear.

    The floating flourishes need to preceed the non-floating Jewelry Lady in HTML.

    Both flourishes have the same properties, except that flourish1 floats left and flourish2 floats right.

    The Jewelry Lady is given {margin:0 auto;} so she is centered on the page. {position:relative} will keep her above the flourishes, should the page narrow that much.

  3. #3
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thank you, ronpat. I appreciate your help and guidance. Now on the changing things for different devices. Smaller devices will not have all the background images because of bandwidth complications. I will opt for just the background colors.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •