CSS Layout Issue/Attempt

Discussion in 'CSS' started by takuhii, Mar 1, 2007.

  1. #1
    I'm trying to replicate the attached layout, but am REALLY struggling to get this to:

    1.) WORK!
    2.) Work in IE AND FireFox.

    If someone could look at my attachment to see the layout I am trying to achieve and suggest a viable solution. I have posted to code below:

    CSS:
    BODY { background-color: #369; margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; }
    
    /* centered layout */
    #wrapper {
    	background-color: #FFF;
    	border: 3px solid #CCC;
    	_width: 774px;
    	min-width: 774px;
    	max-width: 926px;
    	margin: 15px auto 10px auto; 
    }
    /* end centered layout*/
    
    /* logo and rounded corner presentational layer */
    #header { margin:0; padding-top:8px; width:100%; }
    #header h1#logo { background: transparent url('images/logo.gif') no-repeat left top; width: 154px; height: 65px; text-indent: -999em; margin-left: 7px; margin-top: 6px;}
    
    #leftcorner { float:left; background: transparent url('images/bkg_header_left.gif') no-repeat left top; margin-left: -3px; margin-top:-3px; width:35px; }
    #rightcorner { float:right; background: transparent url('images/bkg_header_right.gif') no-repeat right top; margin-right: -3px; margin-top:-3px; width:35px; }
    /* end logo and rounded corner presentational layer */
    
    /* shopping tools */
    #header #toplinkswrap { float: right; margin-top: -90px; margin-right: 16px; font-size:small; _font-size: x-small; }
    #header #toplinkswrap ul { margin:0; padding:0 }
    #header #toplinkswrap ul li { display:inline; padding: 0 0.4em; background: #fff url('images/bkg_toplinkdiv.gif') no-repeat right top; }
    #header #toplinkswrap ul li a:link, #toplinkswrap ul li a:visited, #toplinkswrap ul li a:hover, #toplinkswrap ul li a:active { padding:0 0.4em; color:#656565; font-weight:normal; }
    #header #toplinkswrap ul li#tlhelp a { font-weight:bold; }
    #header #toplinkswrap ul li#trolley { background-image:none; }
    #trolleyitems, #trolleyprice { color:#309a30 !important }
    #trolleylink {
    	background: transparent url('images/icon_trolley.gif') no-repeat right top !important;
    	font-weight:bold !important;
    	padding-left:.3em;
    	padding-right:2.3em !important;
    	color:#309a30 !important;
    }
    /* end shopping tools */
    
    /* header search box */
    #searchwrap {
    	float: right;
    	clear:both;
    	width: 43em;
    	background: #ec2e2c url('images/bkg_search.gif') no-repeat left top;
    	padding: .3em 0 .3em 0;
    	font-size: small;
    	_font-size: x-small;
    }
    form#sb { margin:0; padding:0; text-align:right; }
    #fssearch { color:#fff; margin-left:3em; float:left; }
    #searchheader { font-weight:bold; }
    #atoztext { display:inline;padding:0 .7em 0 20px; }
    #atoztext a:link, #atoztext a:visited, #atoztext a:hover, #atoztext a:active { background-color:#ec2e2c; color:#fff; }
    #btnsearch { vertical-align: top }
    input#search { border:1px solid #C00; padding:0 .3em 0 .3em; margin:0 .6em}
    /* end header search box */
    Code (markup):

    HTML:
    <body>
    <div id="wrapper">
    	<span id="leftcorner">&nbsp;</span>
    	<span id="rightcorner">&nbsp;</span>
            <div id="header"><h1 id="logo">Site Title Text to Aid Search Engine Compatibility</h1>
    		<div id="toplinkswrap">
    			<ul>
    				<li id="tlhome"><a href="#" title="home">Home</a></li>
    				<li id="tllogreg"><a href="#" title="login or register">Login/Register</a></li>
    				<li id="tlstorelocator"><a href="#" title="store locator">Store Locator</a></li>
    				<li id="tlhelp"><a href="#" title="help">Help</a></li>
    				<li id="trolley"><a href="#" id="trolleylink" title="trolley">Trolley</a> <span id="trolleyitems">99 Items = </span><span id="trolleyprice">&pound;1000.00</span></li>
    			</ul>
    		</div>
    		<div id="searchwrap">
    		<form id="sb" name="sb" action="">
    			<fieldset id="fssearch" title="Search the site">
    				<label for="search"><span id="searchheader">Search</span> by word, or catalogue number</label>
    				<input id="search" type="input" value="search string"/>
    				<input id="btnsearch" type="image" value="go" alt="Search button" src="images/b_search.gif" />
    			</fieldset>
    		</form>
    		<p id="atoztext"><a href="#" title="A to Z Index">A - Z Index of Services</a></p>
    		</div>
            </div>
    </div>
    </body>
    Code (markup):
     
    takuhii, Mar 1, 2007 IP