www.webdeveloper.com
Results 1 to 3 of 3

Thread: Problem with multiple images in header-> left, center, right...floating;

  1. #1
    Join Date
    Nov 2011
    Posts
    2

    Problem with multiple images in header-> left, center, right...floating;

    I'm not finding any posts here specifically related to this.

    I have been attempting for a few days to create a header on my site using CSS. Maybe I should use a different method. My problem is my WEB experience is with tools that generate the code, and I need to put in native code.

    What I want to do is supposedly pretty simple. I want to have a graphic that forms a border at the top, and repeats across, so it fills across no matter the size of the window. I'm successful with this.

    I then want to place 3 graphics on top of that. One at far left; one center; one far right, that remain in those positions no matter the size of the window.

    I'be been trying to use float settings. I've been reading quite a bit on this, and understand there can be issues with things if you try to stuff more in than will fit.

    One thing that has been real crazy for me. I can place the first graphic, and it displays fine, to the left. The second one I can get to place correct, but it is much smaller than actual size. SAme for the third one, and it displays below. Here is a link to an image of what I"m talking about. (This is not what you will see in my site link below....this was a test). The center blue graphic square actually has a black 1 in it but you can just barely see the top of it in the lower right corner. I had put a width of 50px and height of 50px, which is the actual size of the graphic but in this case it is as if that graphic is a lot larger. On the other hand, that graphic to the right is actually a lot larger than it is displaying.

    Link to the graphic.

    The actual pixel sizes should fit fine, if I add them up.

    Hoping someone can give me some advice. Maybe not use CSS? POint me to another code to do this?

    I will post the site and code below:

    Site Link.

    CSS Code

    I"m leaving off the menu code, as it is working and not pertinent.

    Code:
    	#myHeader {width:auto;height:133px;
    		background:url(/photos/i-QXfPgvM/0/S/i-QXfPgvM-S.jpg) repeat-x}
    
     		#myLogo {
    				 float:left;
    				 width:10%;
    				 height:150px	;
    				 margin-left:2.22%;
    				 display:inline;
    				 background:url(/photos/i-sttGP6Z/1/O/i-sttGP6Z.png) no-repeat}
    			   
    
    		#myConame {
    				
    				width: 15.33%;
    				height:90px;
    				margin-left:auto;
    				margin-right:auto;
    				background:url(/photos/i-X3mrbpt/0/Ti/i-X3mrbpt-Ti.png) no-repeat}
    		
    		
    		#myBanner {
    				float:right;
    				width: 29.73%;
    				height:150px;
    				background:url(/photos/i-BkhSxLJ/1/Th/i-BkhSxLJ-Th.png) no-repeat}
    HTML Code

    Code:
    <div id="myHeader">
    <div id="myLogo"></div>
    <div id="myConame"></div>
    <div id="myBanner"></div>
    <div style="clear: both;"></div>
    <div class="menu">
      <ul>
            <li><a href="http://shuttermaster.co">Home</a></li>
            <li><a href="#">Portfolio</a></li>
    		<li><a class="drop" href="http://shuttermaster.co/galleries" >Galleries
    			<!--[if gte IE 7]><!--></a><!--<![endif]-->
    			<!--[if lte IE 6]><table><tr><td><![endif]-->
    			<ul>	
    				<li><a href="http://rogerewingphotography.smugmug.com/Landscapes/Landscapes/19892237_mHBK84">Landscape</a></li>
    				<li><a href="Link">Drop 2</a></li>
    				<li><a href="Link">Drop 3</a></li>
            </ul> <!--[if lte IE 7]></td></tr></table></a><![endif]-->
       </li>
            <li><a href="#">About Me</a></li>
            <li><a href="#">Guestbook</a></li>
      </ul>
    </div> 
    </div>
    <div style="clear: both;"></div>
    Thanks a lot.

  2. #2
    Join Date
    Oct 2011
    Location
    Vero Beach, Florida
    Posts
    70
    I think what may work better for you is to first, use float:left on all three div's that you want to position as you said. Probably what's happening with the size is since you have no html content in those div's, they are being displayed with the minimum size. Try including your images in the div's as html with <img> rather than as a background image.
    space
    Orchid Technical Services
    Website Design/Development and Technical Support

  3. #3
    Join Date
    Nov 2011
    Posts
    2

    Came up with a solution...

    Thanks for the reply.

    I came up with a solution yesterday. Here is the associated code:
    (I thought about not including the menu code here, but given I had it in the first post, it is included. The issues were really related to the code before the menu here)

    CSS Code

    Code:
    #myHeader {
        background: url(/photos/i-QXfPgvM/0/S/i-QXfPgvM-S.jpg) repeat-x;
        padding: 10px;
        height: 150px;
        position: relative;
        top: 10px;
        }
    #myLogo {
        position: absolute;
        left: 0;
        height: 150px;
        width: 150px;
        background: url(/photos/i-sttGP6Z/1/O/i-sttGP6Z.png) no-repeat;
    }
    			   
    
    #myConame {
        height:90px;
        width: 230px;
        background:url(/photos/i-T3ZjJ8R/2/X3/i-T3ZjJ8R-O.png) no-repeat;
        margin: 25px auto 0 auto;
    }		
    		
    #myBanner {
        position: absolute;
        right: 0;
        top: 0;
        height:90px;
        width: 300px;
        margin: 30px 5px 0 0;
        background:url(/photos/i-6tx4SXp/0/X3/i-6tx4SXp-X3.png) no-repeat;
    }
    
    		
    /* CSS Dropdown Nav Bar */
    /* Original code by Stu Nicholls of */
    /* http://www.cssplay.co.uk/ */
    /* Edited for content, formatting and some elements */
    /* Please help support CSSPlay at: */
    /* http://www.cssplay.co.uk/support.html */
    
    /* CSS Section */
    
          /* style the outer div to give it width */
    .menu {
       z-index:99;
       position:fixed;
       right: 0;
       top: 5px;
       width: 500px;
    }
    
          /* remove all the bullets, borders and padding from the default list styling */
    .menu ul {
       z-index:99;
       padding:0;
       margin:0;
       list-style-type:none;
    }
    
          /* float the list to make it horizontal and a relative position so that you can control the dropdown menu positon */
    .menu li {
       float:left;          /* float right will reverse the main buttons */
       text-align:left;
       width:auto; 
       position:relative;
       padding: 0;
    }
    
          /* style the links for the top level */
    .menu a, .menu a:visited {
       display:block;
       text-decoration:none;  /* none, overline, underline */
       color:white;
       background:none;
       /*border:1px solid rgb(15,86,196);         * optional *
       border-width:1px 1px 1px 1px;   * optional */
       font-size:12pt;
       font-family: verdana, Comic Sans MS, tahoma, helvetica, arial, sans-serif;
       width:auto;         /* Defines the main box dimensions. */
       height:20px;        /* How tall your cells are */
       line-height:20px;   /* vertical text alignment in cell */ 
       padding: 0 10px;    /* top/bottom R/L */
       min-width: 60px;    /* set to smallest text and use R/L padding above to space out */
    }
    
          /* main hover */
    .menu a:hover, .menu :hover > a {
       color:red;
       background:white;
    }
    
          /* a hack so that IE5.5 faulty box model is corrected */
    * html .menu a, * html .menu a:visited {width:130px; w\idth:130px;}
    
          /* style the table so that it takes no part in the layout */
    .menu table {position:absolute; top:0; left:0;}
    
    
    
          /* ***** LEVEL 2 ***** LEVEL 2 ***** LEVEL 2 ***** */
    
          /* another hack for IE5.5 */
    * html .menu ul ul {top:20px; t\op:21px;}   /* IE gap between main bar and the dropdown items */
    
    
          /* hide the sub levels and give them a position absolute so that they take up no room */
    .menu ul ul {
       visibility:hidden;
       position:absolute;
       height:0;
       top:20px;       /* move drop vertically */
       left:0;         /* move drop horizontally   */
       width:150px;    /* Size of the daughter cells */
    }
    
          /* style the second level background non-hover */
    .menu ul ul a.drop, .menu ul ul a.drop:visited {background:yellow;}  /* if 3rd level exists */
    
          /* style the second level hover */
    .menu ul ul a.drop:hover {background:red;}
    .menu ul ul :hover > a.drop {background:red;}
    
          /* style the second level links */
    .menu ul ul a, .menu ul ul a:visited {
       color:red;
       background:rgb(139,179,241);
       height:20px; 
       line-height:20px; 
       width:150px;
    }
    
    .menu ul ul :hover > a.drop  {background:purple;}   /* 2nd if 3rd level exists */
    
          /* yet another hack for IE5.5 */
    * html .menu ul ul a {width:120px; w\idth:120px;}
    
          /* 2nd level hover */
    .menu ul ul a:hover, .menu ul ul :hover > a {
       color:purple;
       background:rgb(246,232,137);
    }
    
    
    
          /* ***** LEVEL 3 ***** LEVEL 3 ***** LEVEL 3 ***** */
    
          /* position the third level flyout menu */
    .menu ul ul ul {
       left:150px; 
       top:0;
       width:150px;
       height:auto;
    }
    
    .menu ul ul ul li a {color:purple;}
    .menu ul ul ul li a:hover {color:green;}
    
          /* style the third level background */
    .menu ul ul ul a, .menu ul ul ul a:visited {background:purple;}  /* not FF */
    
          /* style the third level hover */
    .menu ul ul ul a:hover {background:yellow;}
    .menu ul ul ul :hover > a {background:yellow;}     /* 3rd (w/o 4th) 4th hover */
    
          /* style the third level links */
    .menu ul ul ul a, .menu ul ul ul a:visited {
       color:pink;              /* hover 2nd > 3rd & 4th */
       background:orange;       /* hover 3rd > 4th */
       height:20px; 
       line-height:20px; 
       width:150px;
    }
    
    
          /* ***** LEVEL 4 ***** LEVEL 4 ***** LEVEL 4 ***** */
    
          /* position the fourth level flyout menu */
    .menu ul ul ul ul {
       left:150px; 
       top:0;
       width:150px;
       height: auto !important;
    }
    
         /* 4th level non-hover */
    .menu ul ul ul ul li a {
       color:blue;
       width:150px;
    }
    
          /* style the fourth level hover */
    .menu ul ul ul ul a:hover {background:white;}
    .menu ul ul ul ul :hover > a {background:white;}
    
    
          /* make the 2nd level visible when hover on 1st level */
    .menu ul :hover ul {visibility:visible;}
          /* make the 3rd level visible when you hover over 2nd level */
    .menu ul :hover ul :hover ul {visibility:visible;}
          /* make the 4th level visible when you hover over 3rd level */
    .menu ul :hover ul :hover ul :hover ul {visibility:visible;}
          /* keep the 3rd level hidden when you hover on 1st level */
    .menu ul :hover ul ul {visibility:hidden;}
          /* keep the 4th level hidden when you hover on 2nd level */
    .menu ul :hover ul :hover ul ul {visibility:hidden;}
    
    /* End Navbar Code */
    HTML Code

    Code:
    <div id="myHeader">
    <div id="myLogo"></div>
    <div id="myConame"></div>
    <div id="myBanner"></div>
    </div>
    
    <div class="menu">
      <ul>
    		<li><a class="drop" href="Link">Home</a></li>
            <li><a href="#">Portfolio</a></li>
    		<li><a class="drop" href="http://shuttermaster.co/galleries">Galleries
    			<!--[if gte IE 7]><!--></a><!--<![endif]-->
    			<!--[if lte IE 6]><table><tr><td><![endif]-->
    			<ul>	
    				<li><a href="http://rogerewingphotography.smugmug.com/Clients">Client Login</a></li>
    				<li><a href="http://rogerewingphotography.smugmug.com/FamilyFriends">Family/Friends</a></li>			
    				<li><a href="http://rogerewingphotography.smugmug.com/Landscapes/Landscapes/19892237_mHBK84">Landscape</a></li>				
    			</ul> <!--[if lte IE 7]></td></tr></table></a><![endif]-->
    		</li>
    		<li><a class="drop" href="Link">Info
            <!--[if gte IE 7]><!--></a><!--<![endif]-->
            <!--[if lte IE 6]><table><tr><td><![endif]-->
            <ul>
                <!--<li><a href="Link">About Me</a></li>-->
                <li><a href="<a href="/" onclick="return false;" class="customContactButton">Contact Me</a></li>
    			<!--<li><a href="Link">Guarantee</a></li> -->
            </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
       </li>
    		
            <li><a href="#">Guestbook</a></li>
      </ul>
    </div> 
    
    <div style="clear: both;"></div>
    I have updated the menu quite a bit too.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles