Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Aug 2010
    Posts
    34
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Help with my CSS site

    Hi,

    For hours now I've been trying to do something which I would think is very simple, but the layout keeps braking and am getting very frustrated!!

    Take a look at what I have done so far:

    http://www.firstmerch.com/template2.html

    What I want to do is to is to have the word "Search" aligned to the right side of the row which has "Home About Servies Polices".

    I've tried floating but the layout just breaks. I'm not CSS expert but thought even I could manage this, but is just becoming a frustrating and time consuming experience going nowhere!

    Could anyone take a look, either by adding "Search" at the right side of that row, or to tell me how to do it?

    The code for the above page is here:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css"> 
    * {
    	padding:0;
    	margin:0;
    }
     
    body {
    	font-size:13px;
    	font-family:Arial, Helvetica, sans-serif;
    	background: #3c3c3c url('page-bottom-bg.gif') 50% 100% no-repeat;
    }
     
    #page {
    	background: url('page-top-bg.gif') 50% 0 no-repeat;
    }
     
    p {
    	margin:20px 0;
    }
     
    #wrapper {
    	width:952px;
    	margin:auto;
    }
     
    #header {
    	height:141px;
    	background:#;
    	margin:auto;
    }
     
    #top-nav {
    	background:#;
    }
     
    .nav-text-left {
    	height:px;
    	background:#;
    	  font-family: impact;
      font-size: 18px;
      color: #FFFFFF;
      	padding: 14px 0px 14px 14px;
      text-transform: uppercase;
       color: #E7A900;
       word-spacing: 14px;
       
    }
     
    .nav-text-right {
    	height:px;
    	background:#;
    }
     
    #container {
    	overflow:auto;
    	background:url('bg.gif') repeat-y;
    }
     
    #left {
    	float:left;
    	width:157px;
    	margin-right: 14px;
    	background: url('lcol-bg.gif') no-repeat;
    }
     
    #content {
    	margin:0 171px;
    	width: 781px;
    	background: url('main-bg.gif') no-repeat;
    }
     
    #footer {
    	clear:both;
    	border-top:1px solid #333333;
    	background:#;
    	margin:auto;
    }
     
    .infobox-heading {
      background: url(iboxhead-bg.gif) 100% 0 no-repeat;
      padding: 15px 10px 0;
      text-align: center;
      color: #E7A900;
      height: 40px;
      font-family: impact;
      font-size: 18px;
    }
     
    .infobox-heading-center {
      background: #7D7D7D url(cboxhead-bg.gif) 6px 6px no-repeat;
      margin: 14px;
      padding: 8px 35px 8px 35px;
      width: 653px;
        font-family: impact;
      font-size: 20px;
      color: #000000;
    }
     
    </style>
    </head>
    <body>
    <div id="page">
    <div id="wrapper">
    		<div id="header"> </div>
            
            <div id="top-nav">
            <div class='nav-text-left'>
            
               Home About Service Policies
             
            </div>
            
            </div>
    		<div id="container">
    				<div id="left">
    						<div class="infobox-heading">Categories</div>
    						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et leo
    								semper justo consectetur tincidunt nec tristique urna.</p>
    						<p> Nunc a risus arcu, at malesuada tellus. Mauris est lacus, pharetra
    								et feugiat at, semper id dolor. Aliquam erat volutpat. Duis a velit orci.
    								Vivamus lobortis, lorem at vehicula eleifend, ante nisi semper arcu,
    								euismod tempor tellus sapien porttitor felis. Phasellus non mi nulla,
    								at accumsan enim. Phasellus sem justo, egestas nec vestibulum faucibus,
    								mattis non nulla</p>
    				</div>
    				
    				<div id="content">
    						<div class="infobox-heading-center">Main Content</div>
    						<p> Nunc a risus arcu, at malesuada tellus. Mauris est lacus, pharetra
    								et feugiat at, semper id dolor. Aliquam erat volutpat. Duis a velit orci.
    								Vivamus lobortis, lorem at vehicula eleifend, ante nisi semper arcu,
    								euismod tempor tellus sapien porttitor felis. Phasellus non mi nulla,
    								at accumsan enim. Phasellus sem justo, egestas nec vestibulum faucibus,
    								mattis non nullafffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</p>
    						<p> Nunc a risus arcu, at malesuada tellus. Mauris est lacus, pharetra
    								et feugiat at, semper id dolor. Aliquam erat volutpat. Duis a velit orci.
    								Vivamus lobortis, lorem at vehicula eleifend, ante nisi semper arcu,
    								euismod tempor tellus sapien porttitor felis. Phasellus non mi nulla,
    								at accumsan enim. Phasellus sem justo, egestas nec vestibulum faucibus,
    								mattis non nulla</p>
    						<p> Nunc a risus arcu, at malesuada tellus. Mauris est lacus, pharetra
    								et feugiat at, semper id dolor. Aliquam erat volutpat. Duis a velit orci.
    								Vivamus lobortis, lorem at vehicula eleifend, ante nisi semper arcu,
    								euismod tempor tellus sapien porttitor felis. Phasellus non mi nulla,
    								at accumsan enim. Phasellus sem justo, egestas nec vestibulum faucibus,
    								mattis non nulla</p>
    						<p> Nunc a risus arcu, at malesuada tellus. Mauris est lacus, pharetra
    								et feugiat at, semper id dolor. Aliquam erat volutpat. Duis a velit orci.
    								Vivamus lobortis, lorem at vehicula eleifend, ante nisi semper arcu,
    								euismod tempor tellus sapien porttitor felis. Phasellus non mi nulla,
    								at accumsan enim. Phasellus sem justo, egestas nec vestibulum faucibus,
    								mattis non nulla</p>
    						<p> Nunc a risus arcu, at malesuada tellus. Mauris est lacus, pharetra
    								et feugiat at, semper id dolor. Aliquam erat volutpat. Duis a velit orci.
    								Vivamus lobortis, lorem at vehicula eleifend, ante nisi semper arcu,
    								euismod tempor tellus sapien porttitor felis. Phasellus non mi nulla,
    								at accumsan enim. Phasellus sem justo, egestas nec vestibulum faucibus,
    								mattis non nulla</p>
    				</div>
    		</div>
    		<div id="footer">
    				<h3>Footer Content </h3>
    				<p> Nunc a risus arcu, at malesuada tellus. Mauris est lacus, pharetra et
    						feugiat at, semper id dolor. Aliquam erat volutpat. Duis a velit orci.
    						Vivamus lobortis, lorem at vehicula eleifend, ante nisi semper arcu, euismod
    						tempor tellus sapien porttitor felis. Phasellus non mi nulla, at accumsan
    						enim. Phasellus sem justo, egestas nec vestibulum faucibus, mattis non
    						nulla</p>
    		</div>
    </div>
    </div>
    </body>
    </html>

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Code:
    <div class="nav-text-left">
            
              <span>Search</span> Home About Service Policies
             
            </div>
    Code:
    .nav-text-left span {
    float:right;
    }
    ?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    jamessillcock (08-25-2010)

  • #3
    New Coder
    Join Date
    Aug 2010
    Posts
    34
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Genius.. such simple coding, yet I would never of done it! Thanks, works a treat

  • #4
    New Coder
    Join Date
    Aug 2010
    Posts
    34
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Ahh.. I have one new problem..

    I'm trying to fit in a search box next to the search text but the layout is being broken by it?

    Do you know why this is?


    http://www.firstmerch.com/template2.html


    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css"> 
    * {
    	padding:0;
    	margin:0;
    }
     
    body {
    	font-size:13px;
    	font-family:Arial, Helvetica, sans-serif;
    	background: #3c3c3c url('page-bottom-bg.gif') 50% 100% no-repeat;
    }
     
    #page {
    	background: url('page-top-bg.gif') 50% 0 no-repeat;
    }
     
    p {
    	margin:20px 0;
    }
     
    #wrapper {
    	width:952px;
    	margin:auto;
    }
     
    #header {
    	height:141px;
    	background:#;
    	margin:auto;
    }
     
    #top-nav {
    	background:#;
    }
     
    .nav-text-left {
    	height:px;
    	background:#;
    	  font-family: impact;
      font-size: 18px;
      color: #FFFFFF;
      	padding: 14px 0px 14px 14px;
      text-transform: uppercase;
       color: #E7A900;
       word-spacing: 14px;
       
    }
     
    .nav-text-right {
    	height:px;
    	background:#;
    }
     
    #container {
    	overflow:auto;
    	background:url('bg.gif') repeat-y;
    }
     
    #left {
    	float:left;
    	width:157px;
    	margin-right: 14px;
    	background: url('lcol-bg.gif') no-repeat;
    }
     
    #content {
    	margin:0 171px;
    	width: 781px;
    	background: url('main-bg.gif') no-repeat;
    }
     
    #footer {
      text-align: center;
      color: #fff;
      font-size: 10px;
      padding: 35px;
    
    }
     
    .infobox-heading {
      background: url(iboxhead-bg.gif) 100% 0 no-repeat;
      padding: 15px 10px 0;
      text-align: center;
      color: #E7A900;
      height: 40px;
      font-family: impact;
      font-size: 18px;
    }
     
    .infobox-heading-center {
      background: #7D7D7D url(cboxhead-bg.gif) 6px 6px no-repeat;
      margin: 14px;
      padding: 8px 35px 8px 35px;
      width: 683px;
        font-family: impact;
      font-size: 20px;
      color: #000000;
    }
    
    .nav-text-left span {
    float:right;
    padding: 0px 14px 0px 0px;
    color:#FFFFFF;
    }
     
    </style>
    </head>
    <body>
    <div id="page">
    <div id="wrapper">
    	<div id="header"> </div>
            
            <div id="top-nav">
            <div class="nav-text-left">
            
              <span>Search: 
              
              <form method="POST" action="$storeVersion.searchResults" name="msearch" class="navBarRight">
    				<input type="text" name="keyword" size="30" class="inputFormat" style="height:23px"><input type="submit" class="btn_advanced_search" value="Search" />
    			</form>
              
              </span> Home About Service Policies
             
            </div>
            
            </div>
    	<div id="container">
    				<div id="left">
    						<div class="infobox-heading">Categories</div>
    						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et leo
    								semper justo consectetur tincidunt nec tristique urna.</p>
    						<p> Nunc a risus arcu, at malesuada tellus. Mauris est lacus, pharetra
    								et feugiat at, semper id dolor. Aliquam erat volutpat. Duis a velit orci.
    								Vivamus lobortis, lorem at vehicula eleifend, ante nisi semper arcu,
    								euismod tempor tellus sapien porttitor felis. Phasellus non mi nulla,
    								at accumsan enim. Phasellus sem justo, egestas nec vestibulum faucibus,
    								mattis non nulla</p>
    				</div>
    				
    				<div id="content">
    						<div class="infobox-heading-center">Main Content</div>
    						<p> Nunc a risus arcu, at malesuada tellus. Mauris est lacus, pharetra
    								et feugiat at, semper id dolor. Aliquam erat volutpat. Duis a velit orci.
    								Vivamus lobortis, lorem at vehicula eleifend, ante nisi semper arcu,
    								euismod tempor tellus sapien porttitor felis. Phasellus non mi nulla,
    								at accumsan enim. Phasellus sem justo, egestas nec vestibulum faucibus,
    								mattis non nullafffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</p>
    						<p> Nunc a risus arcu, at malesuada tellus. Mauris est lacus, pharetra
    								et feugiat at, semper id dolor. Aliquam erat volutpat. Duis a velit orci.
    								Vivamus lobortis, lorem at vehicula eleifend, ante nisi semper arcu,
    								euismod tempor tellus sapien porttitor felis. Phasellus non mi nulla,
    								at accumsan enim. Phasellus sem justo, egestas nec vestibulum faucibus,
    								mattis non nulla</p>
    						<p> Nunc a risus arcu, at malesuada tellus. Mauris est lacus, pharetra
    								et feugiat at, semper id dolor. Aliquam erat volutpat. Duis a velit orci.
    								Vivamus lobortis, lorem at vehicula eleifend, ante nisi semper arcu,
    								euismod tempor tellus sapien porttitor felis. Phasellus non mi nulla,
    								at accumsan enim. Phasellus sem justo, egestas nec vestibulum faucibus,
    								mattis non nulla</p>
    						<p> Nunc a risus arcu, at malesuada tellus. Mauris est lacus, pharetra
    								et feugiat at, semper id dolor. Aliquam erat volutpat. Duis a velit orci.
    								Vivamus lobortis, lorem at vehicula eleifend, ante nisi semper arcu,
    								euismod tempor tellus sapien porttitor felis. Phasellus non mi nulla,
    								at accumsan enim. Phasellus sem justo, egestas nec vestibulum faucibus,
    								mattis non nulla</p>
    						<p> Nunc a risus arcu, at malesuada tellus. Mauris est lacus, pharetra
    								et feugiat at, semper id dolor. Aliquam erat volutpat. Duis a velit orci.
    								Vivamus lobortis, lorem at vehicula eleifend, ante nisi semper arcu,
    								euismod tempor tellus sapien porttitor felis. Phasellus non mi nulla,
    								at accumsan enim. Phasellus sem justo, egestas nec vestibulum faucibus,
    								mattis non nulla</p>
    				</div>
    	</div>
    	<div id="footer">
    				Home Advanced Search View Cart Checkout About Us Service Policies
    				  <br />
    				  <br />
    	  Copyright © 2010 clothingthatrocks. All Rights Reserved.</div>
    </div>
    </div>
    </body>
    </html>

  • #5
    Senior Coder DJCMBear's Avatar
    Join Date
    Mar 2010
    Location
    United Kindom
    Posts
    1,173
    Thanks
    14
    Thanked 136 Times in 136 Posts
    This should do the trick as the one I seen messes up the styles when adding the form in.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css"> 
    * {
      padding:0;
      margin:0;
    }
     
    body {
      font-size:13px;
      font-family:Arial, Helvetica, sans-serif;
      background: #3c3c3c url('http://www.firstmerch.com/page-bottom-bg.gif') 50% 100% no-repeat;
    }
     
    #page {
      background: url('http://www.firstmerch.com/page-top-bg.gif') 50% 0 no-repeat;
    }
     
    p {
      margin:20px 0;
    }
     
    #wrapper {
      width:952px;
      margin:auto;
    }
     
    #header {
      height:141px;
      background:#;
      margin:auto;
    }
     
    #top_nav {
      height: 50px;
      background:#;
    }
    
    .nav_text_left, .nav_text_right {
      font-family: impact;
      font-size: 18px;
      color: #FFFFFF;
      text-transform: uppercase;
      color: #E7A900;
      word-spacing: 14px;
      list-style: none;
    }
     
    .nav_text_right {
      float: right;
    }
     
    .nav_text_left {
      float: left;
    }
    
    .nav_text_left li {
      float: left;
      padding: 14px 0px 14px 14px;
    }
    
    #nav_search {
      margin: 14px 0 0 0;
    }
    
    #nav_search td {
      vertical-align: top;
    }
    
    #nav_search input {
      color: #FFFFFF;
      border: 1px solid #000000;
      background-color: #7D7D7D;
      padding: 1px 5px 2px 5px;
    }
     
    #container {
      overflow:auto;
      background:url('http://www.firstmerch.com/bg.gif') repeat-y;
    }
     
    #left {
      float:left;
      width:157px;
      margin-right: 14px;
      background: url('http://www.firstmerch.com/lcol-bg.gif') no-repeat;
    }
    
    #left p {
      margin: 0 0 10px 0;
      padding: 0 10px 0 15px;
    }
     
    #content {
      margin:0 171px;
      width: 781px;
      background: url('http://www.firstmerch.com/main-bg.gif') no-repeat;
    }
    
    #content p {
      padding: 0 40px 0 40px;
    }
     
    #footer {
      clear:both;
      border-top:1px solid #333333;
      background:#;
      margin:auto;
    }
     
    .infobox-heading {
      background: url(http://www.firstmerch.com/iboxhead-bg.gif) 100% 0 no-repeat;
      padding: 15px 10px 0;
      text-align: center;
      color: #E7A900;
      height: 40px;
      font-family: impact;
      font-size: 18px;
    }
     
    .infobox-heading-center {
      background: #7D7D7D url(http://www.firstmerch.com/cboxhead-bg.gif) 6px 6px no-repeat;
      margin: 14px;
      padding: 8px 35px 8px 35px;
      width: 653px;
      font-family: impact;
      font-size: 20px;
      color: #000000;
    } 
    </style>
    </head>
    <body>
    <div id="page">
      <div id="wrapper">
        <div id="header">
        </div>
        <div id="top_nav">
          <ul class="nav_text_left">
            <li>Home</li>
            <li>About</li>
            <li>Service</li>
            <li>Policies</li>
          </ul>
          <div class="nav_text_right">
            <form method="get" action="/search.php">
              <table id="nav_search">
                <tr>
                   <td>Search:</td>
                   <td><input type="text" name="q" value="" id="q" /></td>
                   <td><input type="submit" value="Search" /></td>
                </tr>
              </table>
            </form>
          </div>
        </div>
        <div id="container">
          <div id="left">
            <div class="infobox-heading">Categories</div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et leo
            semper justo consectetur tincidunt nec tristique urna.</p>
            <p> Nunc a risus arcu, at malesuada tellus. Mauris est lacus, pharetra
            et feugiat at, semper id dolor. Aliquam erat volutpat. Duis a velit orci.
            Vivamus lobortis, lorem at vehicula eleifend, ante nisi semper arcu,
            euismod tempor tellus sapien porttitor felis. Phasellus non mi nulla,
            at accumsan enim. Phasellus sem justo, egestas nec vestibulum faucibus,
            mattis non nulla</p>
          </div>
          <div id="content">
            <div class="infobox-heading-center">Main Content</div>
            <p> Nunc a risus arcu, at malesuada tellus. Mauris est lacus, pharetra
            et feugiat at, semper id dolor. Aliquam erat volutpat. Duis a velit orci.
            Vivamus lobortis, lorem at vehicula eleifend, ante nisi semper arcu,
            euismod tempor tellus sapien porttitor felis. Phasellus non mi nulla,
            at accumsan enim. Phasellus sem justo, egestas nec vestibulum faucibus,
            mattis non nullafffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</p>
            <p> Nunc a risus arcu, at malesuada tellus. Mauris est lacus, pharetra
            et feugiat at, semper id dolor. Aliquam erat volutpat. Duis a velit orci.
            Vivamus lobortis, lorem at vehicula eleifend, ante nisi semper arcu,
            euismod tempor tellus sapien porttitor felis. Phasellus non mi nulla,
            at accumsan enim. Phasellus sem justo, egestas nec vestibulum faucibus,
            mattis non nulla</p>
            <p> Nunc a risus arcu, at malesuada tellus. Mauris est lacus, pharetra
            et feugiat at, semper id dolor. Aliquam erat volutpat. Duis a velit orci.
            Vivamus lobortis, lorem at vehicula eleifend, ante nisi semper arcu,
            euismod tempor tellus sapien porttitor felis. Phasellus non mi nulla,
            at accumsan enim. Phasellus sem justo, egestas nec vestibulum faucibus,
            mattis non nulla</p>
            <p> Nunc a risus arcu, at malesuada tellus. Mauris est lacus, pharetra
            et feugiat at, semper id dolor. Aliquam erat volutpat. Duis a velit orci.
            Vivamus lobortis, lorem at vehicula eleifend, ante nisi semper arcu,
            euismod tempor tellus sapien porttitor felis. Phasellus non mi nulla,
            at accumsan enim. Phasellus sem justo, egestas nec vestibulum faucibus,
            mattis non nulla</p>
            <p> Nunc a risus arcu, at malesuada tellus. Mauris est lacus, pharetra
            et feugiat at, semper id dolor. Aliquam erat volutpat. Duis a velit orci.
            Vivamus lobortis, lorem at vehicula eleifend, ante nisi semper arcu,
            euismod tempor tellus sapien porttitor felis. Phasellus non mi nulla,
            at accumsan enim. Phasellus sem justo, egestas nec vestibulum faucibus,
            mattis non nulla</p>
          </div>
        </div>
        <div id="footer">
          <h3>Home Advanced Search View Cart Checkout About Us Service Policies</h3> 
        </div>
      </div>
    </div>
    </body>
    </html>
    Official BinPress hand picked coder.
    For anyone worried about SQL injection go have a look at my small yet powerful script here.
    Go Pledge for Light Table, if it hit's $300,000 Python and other languages will get added.
    I am 1 of 65,608 people to get a Pebble Watch :P

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Code:
    <div>Search: 
              
              <form method="POST" action="$storeVersion.searchResults" name="msearch" class="navBarRight">
    				<input type="text" name="keyword" size="30" class="inputFormat" style="height: 23px;"><input type="submit" class="btn_advanced_search" value="Search">
    			</form>
              
              </div>
    Code:
    .nav-text-left div {
    float:right;
    padding: 0px 14px 0px 0px;
    color:#FFFFFF;
    }
    .nav-text-left div form{
    display:inline;
    }
    PS: Validate your code and fix the errors.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #7
    New Coder
    Join Date
    Aug 2010
    Posts
    34
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Thanks you for both of your replies. It works!

    Bear - I did try your code, but it broke the layout. So thank you abdura for also posting your code!

    So now my CSS website looks like this:

    http://www.firstmerch.com/template4.html

    I don't like to keep posting for help, but after continually trying I'm just not getting anywhere - I am trying to customize the search form section that has just been put in. I've done a bit.. I've inserted my own search button image, and fiddled with the look of the text field to enter words for the search.

    But it just looks messy and can't get it looking how I want.

    What I mean is, it's aligned not how I want it.

    The word "Search" has sunk a bit and now not in-line with the other words (Home, About etc) at the left side.

    The search input text field has completely sunk - touching the main content section below it!!

    I think the search imge button is aligned ok but I'm not completely sure.

    Basically, I need all this to be aligned horizontally in the middle of the row. The Search text should be in-line with the other text to the left. Can anyone help?

    If anyone can, here is the code for my website :

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css"> 
    * {
    	padding:0;
    	margin:0;
    }
     
    body {
    	font-size:13px;
    	font-family:Arial, Helvetica, sans-serif;
     background: #3c3c3c url("page-bottom-bg.gif") 50% 100% no-repeat;
    
    
    }
     
    #page {
      background: url("page-top-bg.gif") 50% 0 no-repeat;
    
    }
     
    p {
    	margin:20px 0;
    }
     
    #wrapper {
    	width:952px;
    	margin:auto;
    }
     
    #header {
    	height:141px;
    	background:#;
    	margin:auto;
    }
     
    #top-nav {
    	background:#;
    }
     
    .nav-text-left {
    	height:px;
    	background:#;
    	  font-family: impact;
      font-size: 18px;
      color: #FFFFFF;
      	padding: 14px 0px 14px 14px;
      text-transform: uppercase;
       color: #E7A900;
       word-spacing: 14px;
       
    }
     
    .nav-text-right {
    	height:px;
    	background:#;
    }
     
    #container {
    	overflow:auto;
    	background:url('bg.gif') repeat-y;
    }
     
    #left {
    	float:left;
    	width:157px;
    	margin-right: 14px;
    	background: url('lcol-bg.gif') no-repeat;
    }
     
    #content {
    	margin:0 171px;
    	width: 781px;
    	background: url('main-bg.gif') no-repeat;
    }
     
    #footer {
      text-align: center;
      color: #fff;
      font-size: 10px;
      padding: 35px;
    
    }
     
    .infobox-heading {
      background: url(iboxhead-bg.gif) 100% 0 no-repeat;
      padding: 15px 10px 0;
      text-align: center;
      color: #E7A900;
      height: 40px;
      font-family: impact;
      font-size: 18px;
    }
     
    .infobox-heading-center {
      background: #7D7D7D url(cboxhead-bg.gif) 6px 6px no-repeat;
      margin: 14px;
      padding: 8px 35px 8px 35px;
      width: 683px;
        font-family: impact;
      font-size: 20px;
      color: #000000;
    }
    
    
    
    .nav-text-left div {
    float:right;
    padding: 0px 14px 0px 0px;
    color:#FFFFFF;
    }
    .nav-text-left div form{
    display:inline;
    }
    
    .account {
    float: right;
    
    margin: 28px 14px 14px 14px;
    }
    
    .account2 {
    float: right;
    
    margin: 28px 0px 14px 14px;
    }
    
    .account-heading {
    
    background: url(cart.gif) 0px 2px no-repeat;
    font-size: 15px;
    font-weight: bold;
    padding: 0px 0px 0px 17px;
    color:#000000;
    }
    
    .cart-heading {
    
    background: url(account.gif) 0px 2px no-repeat;
    font-size: 15px;
    font-weight: bold;
    padding: 0px 0px 0px 19px;
    color:#000000;
    }
    
    .account-text {
    
    background: url(arrow2.gif) 8px 5px no-repeat;
    font-size: 13px;
    font-weight: ;
    padding: 1px 0px 1px 19px;
    color:#ffffff;
    }
    
    .ctr {
    background-color: #000000;
    color: #bbbbbb;
    font-family: arial, verdana, ms sans serif;
    font-weight: bold;
    font-size: 8pt;
    height: 18px;
    border: 0px;
    padding: 1px;
    width: 150px;
    } 
     
     .ctr2 {
    margin-left: 14px;
    } 
     
    </style>
    </head>
    <body>
    <div id="page">
    <div id="wrapper">
    	<div id="header">
        
        <div class="account">
        <div class="account-heading">Shopping </div>
         <div class="account-text">View Cart</div>
         <div class="account-text">Checkout</div>
         <div class="account-text"># of Item(s): 1</div>
         <div class="account-text">Total: £14.21</div>
        </div>
        
        <div class="account2">
        <div class="cart-heading">My Account</div>
         <div class="account-text">Sign In</div>
         <div class="account-text">Register</div>
         <div class="account-text">Account History</div>
         <div class="account-text">Lost Password</div>
        </div>
       
        
         </div>
            
            <div id="top-nav">
            <div class="nav-text-left">
            
              <span><div>Search: 
              
              <form method="POST" action="$storeVersion.searchResults" name="msearch" class="navBarRight">
    				<input type="text" name="keyword" value="eg. band name" class="ctr";"><input type="image" name="submit" src="price-bg2.png" width="62" height="28" class="ctr2"> 
    			</form>
              
              </div> 
              
              </span> Home About Service Policies
             
            </div>
            
            </div>
    	<div id="container">
    				<div id="left">
    						<div class="infobox-heading">Categories</div>
    						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et leo
    								semper justo consectetur tincidunt nec tristique urna.</p>
    						<p> Nunc a risus arcu, at malesuada tellus. Mauris est lacus, pharetra
    								et feugiat at, semper id dolor. Aliquam erat volutpat. Duis a velit orci.
    								Vivamus lobortis, lorem at vehicula eleifend, ante nisi semper arcu,
    								euismod tempor tellus sapien porttitor felis. Phasellus non mi nulla,
    								at accumsan enim. Phasellus sem justo, egestas nec vestibulum faucibus,
    								mattis non nulla</p>
    				</div>
    				
    				<div id="content">
    						<div class="infobox-heading-center">Main Content</div>
    						<p> Nunc a risus arcu, at male suada tellus. Mauris est lacus, pharetra
    								et feugiat at, semper id dolor. Aliquam erat volutpat. Duis a velit orci.
    								Vivamus lobortis, lorem at vehicula eleifend, ante nisi semper arcu,
    								euismod tempor tellus sapien porttitor felis. Phasellus non mi nulla,
    								at accumsan enim. Phasellus sem justo, egestas nec vestibulum faucibus,
    								mattis non nullafffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</p>
    						<p> Nunc a risus arcu, at malesuada tellus. Mauris est lacus, pharetra
    								et feugiat at, semper id dolor. Aliquam erat volutpat. Duis a velit orci.
    								Vivamus lobortis, lorem at vehicula eleifend, ante nisi semper arcu,
    								euismod tempor tellus sapien porttitor felis. Phasellus non mi nulla,
    								at accumsan enim. Phasellus sem justo, egestas nec vestibulum faucibus,
    								mattis non nulla</p>
    						<p> Nunc a risus arcu, at malesuada tellus. Mauris est lacus, pharetra
    								et feugiat at, semper id dolor. Aliquam erat volutpat. Duis a velit orci.
    								Vivamus lobortis, lorem at vehicula eleifend, ante nisi semper arcu,
    								euismod tempor tellus sapien porttitor felis. Phasellus non mi nulla,
    								at accumsan enim. Phasellus sem justo, egestas nec vestibulum faucibus,
    								mattis non nulla</p>
    						<p> Nunc a risus arcu, at malesuada tellus. Mauris est lacus, pharetra
    								et feugiat at, semper id dolor. Aliquam erat volutpat. Duis a velit orci.
    								Vivamus lobortis, lorem at vehicula eleifend, ante nisi semper arcu,
    								euismod tempor tellus sapien porttitor felis. Phasellus non mi nulla,
    								at accumsan enim. Phasellus sem justo, egestas nec vestibulum faucibus,
    								mattis non nulla</p>
    						<p> Nunc a risus arcu, at malesuada tellus. Mauris est lacus, pharetra
    								et feugiat at, semper id dolor. Aliquam erat volutpat. Duis a velit orci.
    								Vivamus lobortis, lorem at vehicula eleifend, ante nisi semper arcu,
    								euismod tempor tellus sapien porttitor felis. Phasellus non mi nulla,
    								at accumsan enim. Phasellus sem justo, egestas nec vestibulum faucibus,
    								mattis non nulla</p>
    						<p>&nbsp;</p>
    						<p>&nbsp;</p>
    						<p>&nbsp;</p>
    						<p>&nbsp;</p>
    				</div>
    	</div>
    	<div id="footer">
    				Home Advanced Search View Cart Checkout About Us Service Policies
    				  <br />
    				  <br />
    	  Copyright © 2010 clothingthatrocks. All Rights Reserved.</div>
    </div>
    </div>
    
    </body>
    </html>

  • #8
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    What I mean is, it's aligned not how I want it.

    The word "Search" has sunk a bit and now not in-line with the other words (Home, About etc) at the left side.

    The search input text field has completely sunk - touching the main content section below it!!
    Sorry for the confusion. You don't need that span there. You can't nest a form or div inside a span, which will produce invalid markup (Missed the link to validator in my above post?).

    You've made many changes to the original requirement. The correct semantic tag to display the text for an input element is <label>. Now, try
    Code:
    <div class="nav-text-left">
            
           <div>
              
              <form method="POST" action="$storeVersion.searchResults" name="msearch" class="navBarRight">
    				<label for="keyword">Search: </label><input type="text" name="keyword" value="eg. band name" class="ctr" id="keyword"><input width="62" type="image" height="28" name="submit" src="price-bg2.png" class="ctr2"> 
    			</form>
              
              </div> 
              
              Home About Service Policies
             
            </div>
    Code:
    .navBarRight #keyword, .navBarRight label {
    float:left;
    }
    In this case, you don't need
    Code:
    .nav-text-left div form {
    display:inline;
    }
    in your CSS
    Last edited by abduraooft; 08-26-2010 at 12:52 PM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • The Following 2 Users Say Thank You to abduraooft For This Useful Post:

    Decker (08-26-2010), jamessillcock (08-26-2010)

  • #9
    New Coder
    Join Date
    Aug 2010
    Posts
    34
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Abdura - Thank you - you have been soo helpful! It's looking better now. I will validate my code - it's all rather a mess at the moment so it does need a tidy up as well. The only theing that isn't aligned well is the search button go image, but I'm sure that it's only because it's too big in height compared to the form and the search text, if I resize the image height down it should look great. Thanks again.


  •  

    Posting Permissions

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