Note that there are some explanatory texts on larger screens.

plurals
  1. POMake Search Box Centre
    primarykey
    data
    text
    <p>This should be a relatively easy question. Though I am yet to find a solution as I'm a beginner. All I would like to do is center my search box. The html is as follows:</p> <p><a href="http://jsfiddle.net/QUCqn/" rel="nofollow"><strong>jsFiddle</strong></a></p> <pre class="lang-html prettyprint-override"><code> &lt;div class="colums"&gt; &lt;li class="share"&gt; &lt;a target="_blank" href="#"&gt;&lt;/a&gt; &lt;/li&gt; &lt;div id='search-box'&gt; &lt;form action='/search' id='search-form' method='get' target='_top'&gt; &lt;input onwebkitspeechchange="voiceInputOver(this.value)" x-webkit-speechname='q' placeholder='Search Contrabang...' type='text' /&gt; &lt;/form&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="colums"&gt; &lt;div class="cntratop"&gt; &lt;ul&gt; &lt;li class="live"&gt; &lt;a target="_blank" href="#"&gt;+Contrabang&lt;/a&gt; &lt;/li&gt; &lt;li&gt;&lt;a target="_blank" href="#"&gt;Blog&lt;/a&gt; &lt;/li&gt; &lt;li&gt;&lt;a target="_blank" href="#"&gt;Events&lt;/a&gt; &lt;/li&gt; &lt;li&gt;&lt;a target="_blank" href="#"&gt;About&lt;/a&gt; &lt;/li&gt; &lt;li&gt;&lt;a target="_blank" href="#"&gt;Contact&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="columa"&gt; &lt;div id="text-display"&gt; &lt;span&gt;Your Daily Dose of Contrabang&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>The CSS is as follows:</p> <pre class="lang-css prettyprint-override"><code>.columa { background:transparent; width: 960px; height: 500px; margin-left: auto; margin-right: auto; text-align: center; padding: 0px; } .colums { background:transparent; width: 960px; margin-left: auto; margin-right: auto; text-align: center; padding: 0px; } .cntratop { font-family: sans-serif; font-size: 14px; } .cntratop ul { list-style:none; margin-top:12px; background:; width:760px; padding:0px 0px 0px 0px; margin-left: auto; margin-right: auto; } .cntratop li { display:inline-block; } .cntratop li:first-child { margin-left:0px; } /*navbar text*/ .cntratop a { display:inline; margin-left: -9px; padding:15px; text-decoration:none; color:#999; cursor:pointer; } .cntratop a:hover, /* .cntratopli.live*/ a { font-weight:bold; color:#E94F78; } #search-box { list-style-type: none; display: inline; margin-left: 0px; margin-right:0px; } #search-form { width:0px; background-color: transparent; position: relative; margin-top: -23px; } #search-box input[type="text"] { width: 760px; font-family:Georgia; font-style: italic; font-size: 90.0%; padding: 3px 2 2px 10px; color: #999; outline: none; } #search-text { font-size: 13px; font-family:Georgia; font-style: italic; border-width: 0; background: transparent; } #search-button { position: absolute; top: 0; right: 0; height: 32px; width: 80px; font-size: 13px; color: #fff; text-align: center; line-height: 0px; border-width: 0; background-color: #3d3d3d; cursor: pointer; } #text-display { background-color:#E94F78; } #text-display { top:; position: relative; display:inline-block; padding:5px 10px; font-family: sans-serif; font-weight:bold; font-size:50px; color: white; text-align: center; line-height: 1.2em; margin:50px; } </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload