probleem met positioneren zoekbalk

[Provisia]

Kan iemand mij helpen met het volgende probleem?
Ik wil in mijn forum de zoekbalk centreren in de header.

De searchbarcode in overal_header is op dit moment:

Code: Selecteer alles

			<div id="search-box">
				<form action="{U_SEARCH}" method="post" id="search">
				<fieldset>
					<input name="keywords" id="keywords" type="text" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="inputbox search" value="<!-- IF SEARCH_WORDS-->{SEARCH_WORDS}<!-- ELSE -->{L_SEARCH_MINI}<!-- ENDIF -->" onclick="if(this.value=='{LA_SEARCH_MINI}')this.value='';" onblur="if(this.value=='')this.value='{LA_SEARCH_MINI}';" />
					<input class="button2" value="{L_SEARCH}" type="submit" />
					<input class="button2" value="{L_SEARCH_ADV}" type="button" ONCLICK="window.location.href='{U_SEARCH}'"/>
				 {S_SEARCH_HIDDEN_FIELDS}
				</fieldset>
				</form>
			</div>

			
		<!-- ENDIF -->

en de searchbar code in common.css is

Code: Selecteer alles

	color: #FFFFFF;
	padding: 0px 0px;
	position: absolute;
	margin-top: 130px;
	left: 50%;
	width: 500px;
	margin-left: -250px;
	white-space: nowrap; /* For Opera */

ik heb het ook al geprobeerd om met margin-left: auto; en margin-right: auto; te zetten maar dit werkte ook niet.
Iemand een idee wat ik verkeerd doe?

[Robin Huurman]

Weet je zeker dat de code in de css als volgt is?

Code: Selecteer alles

#search-box {
   color: #FFFFFF;
   padding: 0px 0px;
   position: absolute;
   margin-top: 130px;
   left: 50%;
   width: 500px;
   margin-left: -250px;
   white-space: nowrap; /* For Opera */
}

[Provisia]

Ja, heb het letterlijk gekopieert uit mijn css bestand. Het gekke is ook dat wanneer ik de width verander, dat hij dan in werkelijkheid helemaal niet veranderd. Ik heb dit gecontroleerd door er even een border omheen te zetten. Wat ik ook invul qua waarde voor de width, hij veranderd niet in het eindresultaat. wanneer ik in plaats van percentages gewoon pixels opgeef werkt het opeens wel, maar dit is niet gewenst aangezien ik wil dat het geheel kan schuiven op verschillende resoluties.

Is er misschien nog een andere manier?

[Provisia]

gebruikmakend van de bovenstaande code resulteerd in:



zoals je ziet is deze niet helemaal gecentreerd. Misschien is het een andere instelling in mijn css bestand?
Voor de zekerheid voeg ik alle css bij uit mijn common.css:

Spoiler: bekijk

/* General proSilver Markup Styles
---------------------------------------- */

* {
/* Reset browsers default margin, padding and font sizes */
margin: 0;
padding: 0;
}

html {
font-size: 100%;
/* Always show a scrollbar for short pages - stops the jump when the scrollbar appears. non-IE browsers */
height: 100%;
margin-bottom: 1px;
}

body {
/* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
font-family: Verdana, Helvetica, Arial, sans-serif;
color: #828282;
background-color: #FFFFFF;
/*font-size: 62.5%; This sets the default font size to be equivalent to 10px */
font-size: 10px;
margin: 0;
padding: 12px 0;
}

h1 {
/* Forum name */
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
margin-right: 200px;
color: #FFFFFF;
margin-top: 15px;
font-weight: bold;
font-size: 2em;
}

h2 {
/* Forum header titles */
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: normal;
color: #3f3f3f;
font-size: 2em;
margin: 0.8em 0 0.2em 0;
}

h2.solo {
margin-bottom: 1em;
}

h3 {
/* Sub-headers (also used as post headers, but defined later) */
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-transform: uppercase;
border-bottom: 1px solid #CCCCCC;
margin-bottom: 3px;
padding-bottom: 2px;
font-size: 1.05em;
color: #989898;
margin-top: 20px;
}

h4 {
/* Forum and topic list titles */
font-family: "Trebuchet MS", Verdana, Helvetica, Arial, Sans-serif;
font-size: 1.3em;
}

p {
line-height: 1.3em;
font-size: 1.1em;
margin-bottom: 1.5em;
}

img {
border-width: 0;
}

hr {
/* Also see tweaks.css */
border: 0 none #FFFFFF;
border-top: 1px solid #CCCCCC;
height: 1px;
margin: 5px 0;
display: block;
clear: both;
}

hr.dashed {
border-top: 1px dashed #CCCCCC;
margin: 10px 0;
}

hr.divider {
display: none;
}

p.right {
text-align: right;
}

/* Main blocks
---------------------------------------- */
#wrap {
padding: 0 20px;
width: 900px;
margin: 0 auto;

}

#simple-wrap {
padding: 6px 10px;
}

#page-body {
margin: 4px 0;
clear: both;
}

#page-footer {
clear: both;
}

#page-footer h3 {
margin-top: 20px;
}

#logo {
float: left;
width: auto;
padding: 10px 13px 0 10px;
}

a#logo:hover {
text-decoration: none;
}

/* Search box
--------------------------------------------- */
#search-box {
color: #FFFFFF;
padding: 0px 0px;
position: absolute;
margin-top: 130px;
left: 50%;
width: 500px;
margin-left: -250px;
white-space: nowrap; /* For Opera */



}

#search-box #keywords {
width: 95px;
background-color: #FFF;
}

#search-box input {
border: 1px solid #b0b0b0;
}

/* .button1 style defined later, just a few tweaks for the search button version */
#search-box input.button1 {
padding: 1px 5px;
}

#search-box li {
text-align: right;
margin-top: 4px;
}

#search-box img {
vertical-align: middle;
margin-right: 3px;
}

/* Site description and logo */
#site-description {
float: left;
width: 70%;
}

#site-description h1 {
margin-right: 0;
}

/* Round cornered boxes and backgrounds
---------------------------------------- */
.headerbar {
background: #ebebeb none repeat-x 0 0;
color: #FFFFFF;
margin-bottom: 4px;
padding: 0 5px;
height: 160px;

}

.navbar {
background-color: #ebebeb;
padding: 0 10px;
}

.forabg {
background: #b1b1b1 none repeat-x 0 0;
margin-bottom: 4px;
padding: 0 5px;
clear: both;
}

.forumbg {
background: #ebebeb none repeat-x 0 0;
margin-bottom: 4px;
padding: 0 5px;
clear: both;
}

.panel {
margin-bottom: 4px;
padding: 0 10px;
background-color: #f3f3f3;
color: #3f3f3f;
}

.post {
padding: 0 10px;
margin-bottom: 4px;
background-repeat: no-repeat;
background-position: 100% 0;
}

.post:target .content {
color: #000000;
}

.post:target h3 a {
color: #000000;
}

.bg1 { background-color: #f7f7f7;}
.bg2 { background-color: #f2f2f2; }
.bg3 { background-color: #ebebeb; }

.rowbg {
margin: 5px 5px 2px 5px;
}

.ucprowbg {
background-color: #e2e2e2;
}

.fieldsbg {
/*border: 1px #E2DDDB solid;*/
background-color: #eaeaea;
}

span.corners-top, span.corners-bottom, span.corners-top span, span.corners-bottom span {
font-size: 1px;
line-height: 1px;
display: block;
height: 5px;
background-repeat: no-repeat;
}

span.corners-top {
background-image: none;
background-position: 0 0;
margin: 0 -5px;
}

span.corners-top span {
background-image: none;
background-position: 100% 0;
}

span.corners-bottom {
background-image: none;
background-position: 0 100%;
margin: 0 -5px;
clear: both;
}

span.corners-bottom span {
background-image: none;
background-position: 100% 100%;
}

.headbg span.corners-bottom {
margin-bottom: -1px;
}

.post span.corners-top, .post span.corners-bottom, .panel span.corners-top, .panel span.corners-bottom, .navbar span.corners-top, .navbar span.corners-bottom {
margin: 0 -10px;
}

.rules span.corners-top {
margin: 0 -10px 5px -10px;
}

.rules span.corners-bottom {
margin: 5px -10px 0 -10px;
}

/* Horizontal lists
----------------------------------------*/
ul.linklist {
display: block;
margin: 0;
}

ul.linklist li {
display: block;
list-style-type: none;
float: left;
width: auto;
margin-right: 5px;
font-size: 1.1em;
line-height: 2.2em;
}

ul.linklist li.rightside, p.rightside {
float: right;
margin-right: 0;
margin-left: 5px;
text-align: right;
}

ul.navlinks {
padding-bottom: 1px;
margin-bottom: 1px;
border-bottom: 1px solid #FFFFFF;
font-weight: bold;
}

ul.leftside {
float: left;
margin-left: 0;
margin-right: 5px;
text-align: left;
}

ul.rightside {
float: right;
margin-left: 5px;
margin-right: -5px;
text-align: right;
}

/* Table styles
----------------------------------------*/
table.table1 {
/* See tweaks.css */
}

#ucp-main table.table1 {
padding: 2px;
}

table.table1 thead th {
font-weight: normal;
text-transform: uppercase;
color: #FFFFFF;
line-height: 1.3em;
font-size: 1em;
padding: 0 0 4px 3px;
}

table.table1 thead th span {
padding-left: 7px;
}

table.table1 tbody tr {
border: 1px solid #cfcfcf;
}

table.table1 tbody tr:hover, table.table1 tbody tr.hover {
background-color: #f6f6f6;
color: #000;
}

table.table1 td {
color: #6a6a6a;
font-size: 1.1em;
}

table.table1 tbody td {
padding: 5px;
border-top: 1px solid #FAFAFA;
}

table.table1 tbody th {
padding: 5px;
border-bottom: 1px solid #000000;
text-align: left;
color: #333333;
background-color: #FFFFFF;
}

/* Specific column styles */
table.table1 .name { text-align: left; }
table.table1 .posts { text-align: center !important; width: 7%; }
table.table1 .joined { text-align: left; width: 15%; }
table.table1 .active { text-align: left; width: 15%; }
table.table1 .mark { text-align: center; width: 7%; }
table.table1 .info { text-align: left; width: 30%; }
table.table1 .info div { width: 100%; white-space: nowrap; overflow: hidden; }
table.table1 .autocol { line-height: 2em; white-space: nowrap; }
table.table1 thead .autocol { padding-left: 1em; }

table.table1 span.rank-img {
float: right;
width: auto;
}

table.info td {
padding: 3px;
}

table.info tbody th {
padding: 3px;
text-align: right;
vertical-align: top;
color: #000000;
font-weight: normal;
}

.forumbg table.table1 {
margin: 0 -2px -1px -1px;
}

/* Misc layout styles
---------------------------------------- */
/* column[1-2] styles are containers for two column layouts
Also see tweaks.css */
.column1 {
float: left;
clear: left;
width: 49%;
}

.column2 {
float: right;
clear: right;
width: 49%;
}

/* General classes for placing floating blocks */
.left-box {
float: left;
width: auto;
text-align: left;
}

.right-box {
float: right;
width: auto;
text-align: right;
}

dl.details {
/*font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;*/
font-size: 1.1em;
}

dl.details dt {
float: left;
clear: left;
width: 30%;
text-align: right;
color: #000000;
display: block;
}

dl.details dd {
margin-left: 0;
padding-left: 5px;
margin-bottom: 5px;
color: #828282;
float: left;
width: 65%;
}

/* Pagination
---------------------------------------- */
.pagination {
height: 1%; /* IE tweak (holly hack) */
width: auto;
text-align: right;
margin-top: 5px;
float: right;
}

.pagination span.page-sep {
display: none;
}

li.pagination {
margin-top: 0;
}

.pagination strong, .pagination b {
font-weight: normal;
}

.pagination span strong {
padding: 0 2px;
margin: 0 2px;
font-weight: normal;
color: #FFFFFF;
background-color: #bfbfbf;
border: 1px solid #bfbfbf;
font-size: 0.9em;
}

.pagination span a, .pagination span a:link, .pagination span a:visited, .pagination span a:active {
font-weight: normal;
text-decoration: none;
color: #747474;
margin: 0 2px;
padding: 0 2px;
background-color: #eeeeee;
border: 1px solid #bababa;
font-size: 0.9em;
line-height: 1.5em;
}

.pagination span a:hover {
border-color: #d2d2d2;
background-color: #d2d2d2;
color: #FFF;
text-decoration: none;
}

.pagination img {
vertical-align: middle;
}

/* Pagination in viewforum for multipage topics */
.row .pagination {
display: block;
float: right;
width: auto;
margin-top: 0;
padding: 1px 0 1px 15px;
font-size: 0.9em;
background: none 0 50% no-repeat;
}

.row .pagination span a, li.pagination span a {
background-color: #FFFFFF;
}

.row .pagination span a:hover, li.pagination span a:hover {
background-color: #d2d2d2;
}

/* Miscellaneous styles
---------------------------------------- */
#forum-permissions {
float: right;
width: auto;
padding-left: 5px;
margin-left: 5px;
margin-top: 10px;
text-align: right;
}

.copyright {
padding: 5px;
text-align: center;
color: #555555;
}

.small {
font-size: 0.9em !important;
}

.titlespace {
margin-bottom: 15px;
}

.headerspace {
margin-top: 20px;
}

.error {
color: #bcbcbc;
font-weight: bold;
font-size: 1em;
}

.reported {
background-color: #f7f7f7;
}

li.reported:hover {
background-color: #ececec;
}

div.rules {
background-color: #ececec;
color: #bcbcbc;
padding: 0 10px;
margin: 10px 0;
font-size: 1.1em;
}

div.rules ul {
margin-left: 20px;
}

p.rules {
background-color: #ececec;
background-image: none;
padding: 5px;
}

p.rules img {
vertical-align: middle;
}

p.rules a {
vertical-align: middle;
clear: both;
}

#top {
position: absolute;
top: -20px;
}

.clear {
display: block;
clear: both;
font-size: 1px;
line-height: 1px;
background: transparent;
}

Hoop dat iemand me kan helpen.
Alvast bedankt voor de moeite

[Robin Huurman]

Dat komt omdat je search-box 500px breed is, die 500px zet de browser wel in het midden, maar alles wat in die 500px staat centreerd hij toch nog naar links. Je zou kunnen proberen om het blok wat smaller te maken.

[Provisia]

Dat komt omdat je search-box 500px breed is, die 500px zet de browser wel in het midden, maar alles wat in die 500px staat centreerd hij toch nog naar links. Je zou kunnen proberen om het blok wat smaller te maken.

Het vreemde is dat wanneer ik varieer in het aantal pixels bijv. van 500 naar 200, dat er dan niets veranderd. Ik word er eerlijk gezegd een beetje moedeloos van ...

Een divje moet toch niet zo moeilijk te centreren zijn?..
is er niet nog een andere oplossing?