SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2006
    Location
    VA
    Posts
    53
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    DEADLINE LOOMS and having trouble with image in design

    Have a test page setup at http://www.keenwebdesign.com/marinef...esourcesb.html

    On the page there is an area down at the bottom (footer) which has several image swaps as well as an accordion menu. The portion of the menu labeled 'EMPLOYMENT' has an image behind it...but I can't get the image to show through so it appears that it is a 'menu list'. Anyone have any clue what I'm missing. I have done several things from moving the z-index to a different div to slicing the image but it isn't working in any respect.

    HELP! PLEASE!
    Thanks!
    Lynn
    ~:*:~ Lynn ~:*:~
    www.primitivecountrygraphics.com, www.keenwebdesign.com,
    I SING: www.lynnkeen.com, TRAVEL GUIDES: www.dcandaway.com
    ~*~ ~*~ ~*~ ~*~ ~*~ ~*~ ~*~ ~*~ ~*~ ~*~

  2. #2
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    are you talking about listimg.png? http://www.keenwebdesign.com/marinef...es/listimg.png cannot be found...
    Ryan B | My Blog | Twitter

  3. #3
    SitePoint Enthusiast
    Join Date
    Apr 2006
    Location
    VA
    Posts
    53
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK...It is now official... I'm an idiot! Yes, the image was apparently not pushed over to the testing area. Just love when things don't happen.

    Any reason why the images on the bottom have a tendency to 'scramble' around the page. I've seen this little 'quirk' but thought it had been fixed.

    Thanks!
    Lynn
    ~:*:~ Lynn ~:*:~
    www.primitivecountrygraphics.com, www.keenwebdesign.com,
    I SING: www.lynnkeen.com, TRAVEL GUIDES: www.dcandaway.com
    ~*~ ~*~ ~*~ ~*~ ~*~ ~*~ ~*~ ~*~ ~*~ ~*~

  4. #4
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Your page is taking a really long time to load, so I cannot look.
    Ryan B | My Blog | Twitter

  5. #5
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    rGuy84 has it right - at 700k the site is ridiculously huge given how LITTLE content there is. I'm trying to figure out what's up with all the broken elements in opera, though I can see 99% of your problem clear as day.

    >> function MM_swapImgRestore() { //v3.0


    DREAMWEAVER or some other Adobe product -- and worse, working off one of their stock templates that hasn't seen a code update since sometime around 1998.

    Scripting doing CSS' job, images for text, fixed height areas resulting in content blowing out if it's containers, tables for layout, tables for NOTHING, fixed metric fonts on everything making it an accessibility /FAIL/, attributes like ALIGN and STYLE which have no place in modern markup or so simple a layout, comment placement proven to cause IE rendering bugs, line-breaks doing padding's job, empty elements that are not used on page, meaningless/vague classnames, font tags doing HEADING's job... I could keep going for an hour with what's wrong.

    First order of business is throwing away the markup and starting with something modern/sensible, starting with a MODERN doctype and semantic markup.

    Something like:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html
    	xmlns="http://www.w3.org/1999/xhtml"
    	lang="en"
    	xml:lang="en"
    ><head>
    
    <meta
    	http-equiv="Content-Type"
    	content="text/html; charset=utf-8"
    />
    
    <meta
    	http-equiv="Content-Language"
    	content="en"
    />
    
    <link
    	type="text/css"
    	rel="stylesheet"
    	href="screen.css"
    	media="screen,projection,tv"
    />
    
    <title>
    	Marine For Life
    </title>
    
    </head><body>
    
    <div id="pageWrapper">
    
    	<h1>
    		MARINE FOR LIFE<br />
    		<small>Connecting Marines with Opportunity</small>
    		<span></span>
    	</h1>
    	
    	<div id="content">
    	
    		<div id="resources">
    		
    			<h2>Pay for School</h2>
    			
    			<p class="standout">
    				Click the links below to learn more about paying for schools and colleges.
    			</p>
    			
    			<h3>
    				<a href="http://www.mcsfex.net/">
    					Scholarship &amp; Financial Aid Explorer
    				</a>
    			</h3>
    			<p>
    				Includes links to military-friendly scholarship opportunities.
    			</p>
    			
    			<h3>
    				<a href="http://studentaid.ed.gov/">
    					Federal Student Aid
    				</a>
    			</h3>
    			<p>
    				The Web site of the U.S. Department of Education’s office of Federal Student Aid. A free source of information on preparing for and funding education beyond high school.
    			</p>
    			
    			<h3>
    				<a href="http://www.fafsa.ed.gov/">
    					Federal Student Aid Application
    				</a>
    			</h3>
    			<p>
    				A free, online application for federal student aid.
    			</p>
    			
    		<!-- #resources --></div>
    		
    	<!-- #content --></div>
    		 
    	<div id="footer"> 
    	
    		<ul class="bigMenu">
    			<li class="current">
    				<a href="marines.html">MARINES<span></span></a>
    			</li><li>
    				<a href="mentors.html">MENTORS</a>
    			</li><li>
    				<a href="employer.html">EMPLOYERS</a>
    			</li>
    		</ul>
    		
    		<div class="subMenu">
    			<div class="borderTop"></div>
    			<h2>Employment</h2>
    			<ul>
    				<li><a href="jobsites.html">Job Sites</a></li>
    				<li><a href="resume.html">Resume Writing</a></li>
    				<li><a href="career.html">Career Fairs</a></li>
    				<li><a href="jobresources.html">More Resources</a></li>
    			</ul>
    			<div class="borderBottom"></div>
    		</div>
    		
    		<div class="subMenu">
    			<div class="borderTop"></div>
    			<h2>Education</h2>
    			<ul>
    				<li><a href="edbenefits.html">Benefits</a></li>
    				<li><a href="findschool.html">Find a School</a></li>
    				<li><a href="payschool.html">Pay for School</a></li>
    				<li><a href="edresources.html">More Resources</a></li>
    			</ul>
    			<div class="borderBottom"></div>
    		</div>
    		
    		<div class="contactAndConnect">
    			
    			<a href="marine_contactus.html"
    				class="connectNow"
    			>
    				Marines Connect Now<br />
    				<small>Click Here To Activate Your Network</small>
    			</a>
    			
    			866.645.8762
    			
    			<ul>
    				<li>
    					<a href="index.html" class="home">
    						Home
    						<span></span>
    					</a>
    				</li><li>
    					<a href="aboutus.html">
    						About Us
    						<span></span>
    					</a>
    				</li><li>
    					<a href="gen_contactus.html">
    						Contact Us
    						<span></span>
    					</a>
    				</li>
    			</ul>
    			
    		<!-- .contactAndConnect --></div>
    	
    	<!-- #footer --></div>
    
    <!-- #pageWrapper --></div>
    
    </body></html>
    Pitching about 5k (almost two thirds) of your markup on the floor. (the empty spans are for gilder-levin image replacement and/or sliding doors effects) EVERYTHING else you were trying to do on that page likely belongs in the CSS... and I don't think it even NEEDS javascript to do any of the stuff that page was.

    If I have time tomorrow morning I'll belt out the matching CSS and remastered images that would make that work.


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
  •