Je moet kijken welke HTML code er gemaakt wordt…dan kun je dat stijlen in de stylesheet (style.css). Ik weet zo niet uit mijn hoofd welke code WP standaard genereert.
Dus even in de bron kijken van je pagina.
Zal denk ik iets zijn als:
<div class="search-box">
Als ik on de broncode kijk staat dit er:
<div id="search">
<form method="get" id="searchform" action="http://fcgroningenblog.nl">
<input id="s" type="text" name="s" value="" widdit="on" autocomplete="off">
<input id="searchsubmit" type="submit" value="Search">
</form><div id="predictad_div" class="predictad"></div>
</div>
Hier zie je even de style.css van het gebied ‘search’:
/* The Search */
#search {
height:30px;
width:320px;
margin-top:0px;
margin-bottom:6px;
padding:3px 0px 5px 5px;
float:right;
display: inline;
background: #008b59;
}
#search form {
margin: 0;
padding: 0;
}
#search fieldset {
margin: 0;
padding: 0;
border: none;
}
#search p {
margin: 0;
font-size: 85%;
}
#s {
float: left;
width:160px;
padding: 4px 5px 4px 5px;
background:#ececec;
border:1px solid #464f46;
font: normal 100% "Tahoma", Arial, Helvetica, sans-serif;
color:#000;
margin-right:2px;
margin-top:3px;
}
input#searchsubmit {
width:70px;
float: right;
background:#732C7B;
border:1px solid #421C52;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #FFFFFF;
height:23px;
line-height:20px;
margin-right:74px;
margin-top:4px;
}
Yasp0 wat moet ik nu doen?
Iemand die mij kan helpen???
Er zit wel een float:right op #search zie ik…vreemd. Er is wel ruimte voor de div? Omdat hij 320px breed is.
Heb je wat online staan? Dat maakt het stuk makkelijker.
Kijk eens hoe de pagina is opgebouwd.
Je hebt een #menucontainer met daarbinnen #menu, die je menu weergeeft in een lijst. Dat is prima. Maar binnen die lijst roep je dan de zoekbalk (#search) op. Dat is niet logisch. Je wilt eerst je menu en dan je zoekbalk…en die moeten vervolgens naast elkaar worden geplaats (float:left voor menu…en float:right voor search).
Daarom is de weergave nu ook niet goed…
Zo is het nu:
<div id="menucontainer">
<div id="menu">
<ul>
<li></li>
<div id="search">
</div>
</ul>
</div>
</div>
Een logisch opbouw is:
<div id="menucontainer">
<div id="menu">
<ul>
<li></li>
</ul>
</div>
<div id="search">
</div>
</div>
Waarom kan ik dit bovenstaaande nergens vinden in de header?
Het was zo:
<div id="menucontainer">
<div id="menu">
<ul>
<li><a href="<?php echo get_settings('home'); ?>">Home</a></li>
<?php wp_list_pages('title_li=&depth=4&sort_column=menu_order'); ?>
<?php include (TEMPLATEPATH . '/searchform.php'); ?>
</ul>
</div>
</div>
En nu zo:
<div id="menucontainer">
<div id="menu">
<ul>
<li><a href="<?php echo get_settings('home'); ?>">Home</a></li>
<?php wp_list_pages('title_li=&depth=4&sort_column=menu_order'); ?>
</ul>
</div>
<?php include (TEMPLATEPATH . '/searchform.php'); ?>
</div>
</div>
En de site doet nu heel raar: http://www.fcgroningenblog.nl
Gelukt, alleen nu staat hij nog niet helemaal recht, kan ook zijn omdat ik de grootte van de zoekbalk heb verkleind, hoe gaat dit goed?
Dit is de CSS:
/* The Search */
#search {
height:30px;
width:320px;
margin-top:0px;
margin-bottom:6px;
padding:3px 0px 5px 5px;
float:right;
display: inline;
background: #008b59;
}
#search form {
margin: 0;
padding: 0;
}
#search fieldset {
margin: 0;
padding: 0;
border: none;
}
#search p {
margin: 0;
font-size: 85%;
}
#s {
float:left;
width:160px;
padding: 4px 5px 4px 5px;
background:#ececec;
border:1px solid #464f46;
font: normal 100% "Tahoma", Arial, Helvetica, sans-serif;
color:#000;
margin-right:2px;
margin-top:3px;
}
input#searchsubmit {
width:70px;
float:right;
background:#732C7B;
border:1px solid #421C52;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #FFFFFF;
height:23px;
line-height:20px;
margin-right:6px;
margin-top:4px;
}
