...

View Full Version : Help with my CSS site



jamessillcock
08-25-2010, 12:25 PM
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:


<!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>

abduraooft
08-25-2010, 12:35 PM
<div class="nav-text-left">

<span>Search</span> Home About Service Policies

</div>

.nav-text-left span {
float:right;
} ?

jamessillcock
08-25-2010, 01:18 PM
Genius.. such simple coding, yet I would never of done it! Thanks, works a treat ;)

jamessillcock
08-25-2010, 01:30 PM
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



<!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>

DJCMBear
08-25-2010, 01:34 PM
This should do the trick as the one I seen messes up the styles when adding the form in.



<!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>

abduraooft
08-25-2010, 01:53 PM
<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>

.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 (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.firstmerch.com%2Ftemplate2.html).

jamessillcock
08-26-2010, 12:05 PM
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 :


<!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>

abduraooft
08-26-2010, 12:46 PM
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

<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>

.navBarRight #keyword, .navBarRight label {
float:left;
}

In this case, you don't need
.nav-text-left div form {
display:inline;
} in your CSS

jamessillcock
08-26-2010, 02:14 PM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum