Search box alignen

[Saro Verhees]

Hallo,

Ik ben bezig met deze layout te basen, maar zat vast bij het search box stuk. Ik weet namelijk niet hoe ik dat kan oplossen (heb ook niet veel verstand van CSS/HTML).

Dit is wat ik tot nu toe gedaan heb:
Photoshop-leren.be

HTML:

<!--Start Header--> 
<div id="header_wrap"> 
<div id="header"> 
<a href="#"><img id="logo" src="images/logo.jpg" alt="logo" height="128" width="444" ></a> 
  <div class="hide"> 
    <h1>Blogname</h1> 
    <h2>Blog Descrition</h2> 
  </div> 
<!--Search--> 
      <div id="search_wrap"> 
	  	<form id="searchform" method="get" action="http://www.themeforest.net"> 
				<fieldset> 
					<input type="text" name="s" id="s" size="10" /><br /> 
					<input type="submit" value="Go" id="button" /> 
				</fieldset> 
			</form> 
      </div> 
</div> 
</div> 
<!--End Header-->

CSS:

/*HEADER*/

#header {
	margin: 0;
	padding: 0;
	background:url(images/logo.jpg) no-repeat;
	height: 128px;
	width: 444px;
	position: relative;
}

/*
-Search-
*/



#search_wrap {
	top: 20px;
	right: 0;
	position: absolute;
}

#s {
	background: #676767;
	border: 1px solid #8a8a8a;
	padding: 5px 10px 6px 6px;
	font-size: 13px;
	color: #cacaca;
	width: 180px;
	font-family: Tahoma, Arial, Helvetica, sans-serif;
}
#button {
	position: absolute;
	top: -2px;
	right: -23px;
	height: 43px;
	width: 43px;
	background: url(images/search.png) no-repeat 0 0;
	text-indent: -9999px;
	cursor: pointer;
}

Ik heb al hard gezocht, maar ik kan het probleem maar niet vinden!

Alvast bedankt,
Saro Verhees

[XiroN19]

Als ik de width van je header op 100% zet staat het zoekveld tegen de rechterkant..

[Curahee Q]

Wat ik altijd doe als er iets niet lukt is er een border rond plaatsen:

border: 1px solid red;

Ik vermoed dat het iets te maken heeft met het feit dat je right:0; hebt staan terwijl het right: 0px; moet zijn. Of je kan ook een float: right; meegeven.

[Saro Verhees]

@XiroN19: Heel erg bedankt!

Als iemand tijd/zin heeft om me duidelijk te maken waarom, zou dat fijn zijn ^^

[XiroN19]

euhm dat is zo omdat je header (dus waar je zoekbalkje inzit) maar een width had van 444px dus kon je zoekbalk niet verder naar rechts gaan dan de lijn die er getrokken was op 444px

en idd ik heb het gevonden door rond die header-div en border te zetten werkt heel goed als je probleempje hebt hoe je niet te gokken waar je border van de div eventueel zou kunnen uitkomen :P

[koebeest]

Basen is zowat het domste woord dat ik ooit al hoorde. Wie daar mee afkwam :/ zucht... slicen ok... basen ... nee toch niet

[Saro Verhees]

Oke bedankt voor die tip beide!

@Koebeest: Nouwja, ik slice niet met de slice tool dus vind ik basen wat geschikter. Ik ben ook eerder met graphics getrouwd dan met code, so don't get to harsh one me.

[Zero Grav]

Ik vermoed dat het iets te maken heeft met het feit dat je right:0; hebt staan terwijl het right: 0px; moet zijn.

Nul is nul, en dat is dan ook de enige waarde waar ge geen type bij móet vermelden.

[Curahee Q]

Ah oké, doe het uit gewoonte altijd en ik denk dat je dat best uit gewoone ook zo doet. Maarja, persoonlijke voorkeur.