Search box positioning

rockarena666 · Post by **rockarena666** » Sat Jul 14, 2007 10:08 pm

Hi everyone,

I'm having trouble with the positioning of my Search box. It's used on this site: www.rockcafe.be/index.php
As you can see the box is always beneath my breadcrumbs but I want it positioned on the right side but I tried almost everything and nothing works.

This is my css code and the relevant code is breadcrums and everything underneath it:

Code: Select all

a {text-decoration: none;}

body {
	
	color: #BBB;
	font: normal 62.5% "Lucida Sans Unicode",sans-serif;
        background: #000 url(uploads/images/rock/top-back_final.gif) repeat-x ;
}

p,ul {
	font-size: 1.2em;
	padding-bottom: 1.2em;
}

blockquote {font: bold 1em sans-serif;}

code {
	background: #444;
	display: block;
	font-size: 12px;
	margin: 0 10px 12px;
	overflow: auto;
	padding: 8px 10px;
	white-space: pre;
}

img {border: none;}

ul {margin-left: 2em;}
h1 {font: normal 2.4em sans-serif;}
h2 {
	font: bold 1.6em Verdana,sans-serif;
	padding-bottom: 4px;
}

/* misc */
.clearer {clear: both;}
.stripes {
	background: #333 url(uploads/images/rock/stripe.gif);
	height: 6px;
}
.left {float: left;}
.right {float: right;}
[color=red][b]
.breadcrumbs {
   background:#303030;
  padding-right:360px;
position:relative;
   font-size: 90%;        /* its good to set fontsizes to be relative, this way viewer can change his/her fontsize */
   
}


p.crumb{
		
		font-weight: bold;
		padding: 10px 30px;
		margin: 0;
	}
/*
zoek*/
#breadcrumbs #zoek{
		
position:absolute;
		top: 7px;
		right: 30px;
	}[/b][/color]
/* header */
.header {
	background: #111 url(uploads/images/rock/rockback.gif);
        height: 231px;
	border: 0px solid #333;
	font: normal 2em sans-serif;
	
}

.header a {
	color: #888;
	display: block;
	line-height: 120px;
	text-decoration: none;
	width: 100%;
}
.header span {padding-left: 32px;}
.header a:hover {
	background: #191919;
	color: #BBB;
}

/* structure */
.container {
width: 900px;
	background: #111 ;
	border-top: none;

}

.main {
border-left: 1px solid #414141;
        border-right: 1px solid #414141;
	background: #303030;
	border-bottom: 0px solid #414141;
	
}
.main .left {width: 75%;}
.main .right {width: 25%;}

.content {
	
	border-top: 0px solid #444;
	padding: 16px;
}

/* content elements */
.content h1 {
	background: url(uploads/images/rock/bgh1.gif) repeat-x left bottom;
	color: #EEE;
	margin-bottom: 10px;
	padding: 6px 0 4px;
}
.content a {
	color: #999;
	text-decoration: underline;
}
.content a:hover {color: #CCC;}
.content .descr {margin-bottom: 5px;}

/* navigation */
.nav {background: #191919 url(uploads/images/rock/nav.gif);
border-right: 1px solid #414141;
border-left: 1px solid #414141;
}
.nav a {
	background: #191919 url(uploads/images/rock/nav.gif);
	border-right: 1px solid #161616;
	color: #CCC;
	float: left;
	font: bold 1em Verdana,sans-serif;
	line-height: 51px;
	padding: 0 20px;
}
.nav a:hover {
	background: #191919 url(uploads/images/rock/nav_hover.gif);
}

/* sub-navigation */
.subnav {
	background: #2A2A2A;
	border-left: 1px solid #414141;
        border-bottom: 1px solid #414141;
	border-top-color: #1E1E1E;	
	padding: 12px;
}
.subnav h1 {padding-top: 8px;}
.subnav ul {margin: 0;}
.subnav li {
	background: url(uploads/images/rock/li.gif) no-repeat left bottom;
	list-style: none;
	margin: 0;
}
.subnav li a {
	color: #777;
	line-height: 2.4em;
	padding-left: 18px;
	text-decoration: none;
}
.subnav li a:hover {color: #BBB;}

/* footer */
.footer {
	background: #000;
	border-top: 1px solid #414141;
	color: #999;
	padding: 3% 3% 1%;
}
.footer ul {
	border-top: 1px solid #262626;
	margin: 0;
}
.footer li {
	border-bottom: 1px solid #262626;
	list-style: none;
}
.footer li a {
	display: block;
	line-height: 2em;
	padding-left: 4%;
	width: 96%;
}
.footer a {color: #666;}
.footer a:hover {
	color: #BBB;
	background: #222;
}

.col3,.col3center {
	float: left;
	width: 31%;
}
.col3center {margin: 0 3%;}

/* bottom */
.bottom {
	color: #666;
	clear: both;
	font-size: 1.1em;
}
.bottom a {color: #888;}

This is my HTML implementation:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<__html>

<head>
{metadata}
{stylesheet}
<title>{sitename} - {title}</title>
</head>
<!-- default margin = default layout -->
</__body style="margin: 0 12%;">

<div class="container">

	<div class="header">
		
	</div>

	<div class="stripes"><span></span></div>
	<div class="nav">

{menu template='rock' number_of_levels='1'}
<a href="http://www.rockcafe.be/forum/index.php">Forum</a>
<div class="clearer"><span></span></div>
		
	</div>
	<div class="stripes"><span></span></div>
	<div class="breadcrumbs">
<p class="crumb">
{breadcrumbs starttext='U bevindt zich hier' root='Home' delimiter='»'}
</p>
<div class="zoek">
{search}
</div>
</div>
<div class="stripes"><span></span></div>

	<div class="main">


		<div class="left">
			<div class="content">
				{content}
			</div>
		</div>
			
		<div class="right">
			<div class="subnav">

			
{menu template='rock_v' start_level='2' collapse='1'}
	
			</div>
		</div>
		<div class="clearer"><span></span></div>
	</div>
	<div class="footer">

			<div class="bottom">
	
			<span class="left">© 2007 <a href="index.html">{sitename}</a>. Valid <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> & <a href="http://validator.w3.org/check?uri=referer">XHTML</a>.</span>

				<div class="clearer"><span></span></div>
			</div>
	</div>
</div>
<__body>
</__html>

Can anybody see the problem because I'm out of options at the moment.

RonnyK · Post by **RonnyK** » Sun Jul 15, 2007 7:20 am

Why don't you use the logic that comes with the default templates for "breadcrumbs" and "search".

Template:

Code: Select all

   <!-- Start Search-->
   <div id="search">
          {search}
   </div>
   <!-- End Search -->


   <!-- Start Breadcrumbs -->
   <div class="breadcrumbs">
        {breadcrumbs starttext='You are here' root='Home' delimiter='»'}
   <hr class="accessibility" />
   </div>
   <!-- End Breadcrumbs -->

CSS:

Code: Select all

div#search {
   float: right;
   width: 23em;     /* enough width for the search input box */
   text-align: right;
   padding: 0.6em 0 0.2em 0;
   margin: 0 1em;
}

div.breadcrumbs {
   padding: 1em 0 1.2em 0; /* CSS short hand rule first value is top then right, bottom and left */
   font-size: 90%;             /* its good to set fontsizes to be relative, this way viewer can change his/her fontsize */
   margin: 0 1em;              /* css shorthand rule will be opened to be "0 1em 0 1em" */
   border-bottom: 1px dotted #000;
}

So position search first in the template, as it floats, you push that one to the right first, then the breadcrumbs, just plain on the left.

Ronny

rockarena666 · Post by **rockarena666** » Sun Jul 15, 2007 8:13 am

Should have thought of that

Can I change the place of the submit button too? It looks kinda silly now:
http://www.rockcafe.be/index.php

Edit: very silly in IE! Just check it out! How is that possible. When I dismiss the search function it doesn't do that.

RonnyK · Post by **RonnyK** » Sun Jul 15, 2007 8:25 am

The width of the search should be bigger "25em" as you have it in Dutch, then it will be on the right on one line, it is now pushed over because it has a width of 23em (wide enough for US not for NL)

Ronny

RonnyK · Post by **RonnyK** » Sun Jul 15, 2007 8:29 am

I call search as follows:

Code: Select all

{search  searchtext="" resultpage="Zoekresultaat"}

searchtext: the text inside the searchbox before entering text.
resultpage: the page to open the results in, instead of overwriting the current page-content.

I always use the resultpage, create a content-page, uncheck the "show in menu", as I don't want it in the menu, but it has to be active to be able to call it. Then that page is opened to show the results, it shows better, having it's own title instead of the title that was opened when the search was started.

Ronny

rockarena666 · Post by **rockarena666** » Sun Jul 15, 2007 8:42 pm

RonnyK wrote: I call search as follows:
Code: Select all
{search  searchtext="" resultpage="Zoekresultaat"}
searchtext: the text inside the searchbox before entering text.
resultpage: the page to open the results in, instead of overwriting the current page-content.

I always use the resultpage, create a content-page, uncheck the "show in menu", as I don't want it in the menu, but it has to be active to be able to call it. Then that page is opened to show the results, it shows better, having it's own title instead of the title that was opened when the search was started.

Ronny

That's a good idea so I tried it out. I did as you said so I created a page called Zoekresultaat and adjusted my call to the search but it's still showing the resuts as before so not in de Zoekresultaat page. I probably forgot something. Thanx for the help on these things! The rest of the problems are solved.

RonnyK · Post by **RonnyK** » Mon Jul 16, 2007 8:13 am

Can you post the module call for search?

Ronny

rockarena666 · Post by **rockarena666** » Mon Jul 16, 2007 10:11 am

RonnyK wrote: Can you post the module call for search?

Ronny

{search searchtext="" resultpage="Zoekresultaat"}

CMS Made Simple Forums

Search box positioning

Search box positioning

Re: Search box positioning

Re: Search box positioning

Re: Search box positioning

Re: Search box positioning

Re: Search box positioning

Re: Search box positioning

Re: Search box positioning