Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 3 of 3
  1. #1
    jj1
    jj1 is offline
    Senior Member
    Join Date
    Oct 2008
    Posts
    319
    Member #
    17546
    PLEASE can someone help - tearing my hair out and trying everything on my second Wordpress site!!
    I am creating a header composed of different images layered with z-index settings. They look fine with the browser at normal size; as soon as I resize the browser my main 950px wide image (mainarchimage)moves with the rest of the site but all the other images stay put and won't move.

    My test site is www. http:// jwebsites.co.uk/etica/ - theme is Unique Websites (my own adaptation of a simple theme)
    Relevant code from header file:

    PHP Code:
    <div id="mainarchimage">
    <
    img src="http://jwebsites.co.uk/etica/wp-content/themes/UniqueWebsites/images/arch-masons.png"  />
        </
    div>
     
    <
    div id="mastheadwrap">

    <
    div id="masonsmeeting">
          <
    img src="http://jwebsites.co.uk/etica/wp-content/themes/UniqueWebsites/images/suffolk-royal-arch-meeting.jpg"  />
        </
    div>

    <
    div id="masonicjourneyimg">
            <
    img src="http://jwebsites.co.uk/etica/wp-content/themes/UniqueWebsites/images/masonic-journey.png"  />
        </
    div>

    <
    div id="archoutline">
      <
    img src="http://jwebsites.co.uk/etica/wp-content/themes/UniqueWebsites/images/arch-outline.png" />
          </
    div>

    <!-- 
    end of mastheadwrap div -->

    </
    div
    Relevant code from css:

    Code:
    #header {
        height: 543px;
        margin-bottom: 0px;
        margin: 0 0 0 0px;
        padding: 0 0 0 0px;
          overflow: hidden;
          position: relative;
    
    }
    /* --------------[ header section ]-------------- */
    
    #mainarchimage {
        margin: 0 auto;
        padding: 0 0 0 0;
        height: 513px;
        width: 950px;
            position: relative;
            top: 0px;
            left: -12px;
            border: 0px;
            z-index:50;
    }
    #mastheadwrap {
        height: 513px;
        width: 950px;
        padding: 0 0 0 0px;
        margin: 0 0 0 0px;
          position: relative;
    }
    #masonsmeeting {
        margin: 0 auto;
        padding: 0 0 0 0;
            height: 312px;
        width: 590px;
        position: relative;
            top: -290px;
            left: 124px;
            z-index:30;
    
    }
    
    #masonicjourneyimg {
        margin: 0 auto;
        padding: 0 0 0 0;
            height: 38px;
        width: 576px;
            position: relative;
            top: -358px;
          left: 140px;
            z-index:40;
    
    }
    #archoutline {
        margin: 0 auto;
        padding: 0 0 0 0;
              height: 285px;
        width: 550px;
            position: relative;
            top: -644px;
            left: 143px;
            z-index:90;
    
    }
    You can see from this I tried putting a 950px wide mastheadwrap div with relative position to hold the images but they don't seem to take any notcie of this and they stay static on the screen.

    PS Please take no notice if images aren't properly aligned - once I can get the principle sorted, then I'll go back and minutely position each image.

  2.  

  3. #2
    jj1
    jj1 is offline
    Senior Member
    Join Date
    Oct 2008
    Posts
    319
    Member #
    17546
    Update:

    Eventually after LOTS of searching, managed to fix this by adapting the css from the Morning Coffee theme which used a treble wrap - header insider header-background inside header-wrap:
    Code:
    #header-wrap {
        clear:left;
        height:513px;
        width:100%;
        margin-right:auto;
        margin-left:auto;
        position:relative;
        background-repeat: no-repeat;
        background-position: left top;
    }
    #header-background {
        margin-right: auto;
        margin-left: auto;
        width: 950px;
        background-image: url(images/arch-masons.png);
        background-repeat: no-repeat;
        background-position: left top;
        height: 513px;
    }
    
    #header {
        clear:left;
        height:513px;
        width:950px;
        margin-right:auto;
        margin-left:auto;
        position:relative;
    }
    Other relevant css:
    Code:
    body {
        font-size: 14px; /* Resets 1em to 10px */;
        font-family: Arial, Helvetica, sans-serif;
        background: url('images/stonebk.jpg') repeat;
        text-align: left;
            margin: 0 0 0 0;
        padding: 0;
        height: 100%;
            z-index: 1;
    }
    
    #wrap {
        margin: 0 0 -4em;
        min-height: 100%;
        height: auto !important;
    
    }
    #page {
        margin: 0px auto;
        padding: 0;
        width: 950px;
            background: url('images/arch-sides.png') repeat-y;
                  overflow: hidden;
    }
    Hope this helps someone else at some stage - Wordpress css SHOULD work the same way as elsewhere but there's slight variations in the structure.

  4. #3
    Member Eric Mintz's Avatar
    Join Date
    Mar 2012
    Location
    Atlanta, GA
    Posts
    48
    Member #
    31243
    Liked
    7 times
    This is easy. Give div#header a width (like something a little bigger than 950px), and give it a margin:0 auto.

    That solves the problem and all that's left is minor tweaking.


Remove Ads

Posting Permissions

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

Search tags for this page

positioning multiple images in wordpress

Click on a term to search for related topics.
All times are GMT -6. The time now is 09:55 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com