Back to Top
WJunction

Register Now

Welcome Guest!  Register  
Go Back   WJunction - Webmaster Forum > Coding and Graphics > Development Area

Post Reply
 
Thread Tools Display Modes

Old 2nd Jun 2011, 10:02 AM   #1
Respected Member

BlaZe's Avatar
 
Website(s):
BeastieBay.net iPhoneLOL.com
  • My Statistics
I tried my level best, but I couldn't do it.


See this search box.


The text 'Search' is stuck to the borders. I cannot move it a little bit more to right so that it comes inside the box.

Here is the CSS of it.

PHP Code:
#search {
    
displayinline;
    
floatright;
    
margin0px 5px 0 5px;
    
padding0px 0 0;
    
text-alignleft;
    
top0px;
}

#searchbox {
    
width180px;
    
float:left;
    
padding5px 0px 3px 0px;
    
backgroundurl('images/search.png');
    
border0;
    
margin2px 2px 2px 0px;
    
color#fff;
    
font-size11px;
    
font-family"Lucida Grande""Lucida Sans Unicode"ArialHelveticaSans-Serif;
}

.
go {
    
margin-top6px;
    
margin-left: -20px;
    
padding0px;
    
color#000;
    
display:inline;

Here is the form.

PHP Code:
<form method="get" id="search" action="<?php bloginfo('home'); ?>/">
        <div><input type="text" value="Search" name="s" id="searchbox" onFocus="if (this.value == 'Search') {this.value = '';}" onBlur="if (this.value == '') {this.value = 'Search';}" />
        <input type="image" src="<?php bloginfo('template_directory'); ?>/images/go.png" align="top" alt="Search" class="go" value="Search" />
        
        </div>
        </form>
EDIT:

Live Website : http://scenexxx.com (+18, NSFW)

Last edited by BlaZe; 2nd Jun 2011 at 03:17 PM.
BlaZe is offline   Quote
Old 2nd Jun 2011, 10:19 AM   #2
Member

Hillside's Avatar
 
  • My Statistics
#searchbox input {
margin-left: 15px;
}

Tried that?
Hillside is offline   Quote
Old 2nd Jun 2011, 12:07 PM   #3
Member
 
Website(s):
PyramidLabs.in RahulParekh.in
  • My Statistics
Send a message via Yahoo to rahulparekh Send a message via Skype™ to rahulparekh
Code:
#search {
    display: inline;
    float: right;
    margin: 0px 5px 0 5px;
    padding: 0px 0 0;
    text-align: left;
    top: 0px;
}

#searchbox {
    width: 180px;
    float:left;
    padding: 5px 0px 3px 10px;
    background: url('images/search.png');
    border: 0;
    margin: 2px 2px 2px 0px;
    color: #fff;
    font-size: 11px;
    font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
}

.go {
    margin-top: 6px;
    margin-left: -20px;
    padding: 0px;
    color: #000;
    display:inline;
}
That's padding-left. That should fix it.
rahulparekh is offline   Quote
Old 2nd Jun 2011, 12:09 PM   #4
Member
 
Website(s):
PyramidLabs.in RahulParekh.in
  • My Statistics
Send a message via Yahoo to rahulparekh Send a message via Skype™ to rahulparekh
Quote:
Originally Posted by Hillside View Post
#searchbox input {
margin-left: 15px;
}

Tried that?

That's wrong as searchbox is the id for input box itself. Either use input#searchbox or #searchbox.
rahulparekh is offline   Quote
Old 2nd Jun 2011, 01:04 PM   #5
Member

Hillside's Avatar
 
  • My Statistics
it would be better if u link to the site where you're getting the error so we can see the whole code
Hillside is offline   Quote
Old 2nd Jun 2011, 01:56 PM   #6
Respected Member

BlaZe's Avatar
 
Website(s):
BeastieBay.net iPhoneLOL.com
  • My Statistics
@rahul,



Thats what I'm getting
===========

@Hillside,
Its on my localhost.

Here is the whole screenshot if you wanna see.
http://i.imm.io/676L.png
BlaZe is offline   Quote
Old 2nd Jun 2011, 03:06 PM   #7
Respected Developer
 
  • My Statistics
I would suggest the easiest way to be
PHP Code:
value='      Search' 
Just add as many spaces to the front of it to get it aligned where you want it.
Lock Down is offline   Quote
Old 2nd Jun 2011, 03:09 PM   #8
Respected Member

BlaZe's Avatar
 
Website(s):
BeastieBay.net iPhoneLOL.com
  • My Statistics
@Lock Down,

That was the last thing which came to my mind earlier, if I don't get it done with CSS, then I'll add that

EDIT:
Live Website : http://scenexxx.com (+18, NSFW)

Last edited by BlaZe; 2nd Jun 2011 at 03:17 PM.
BlaZe is offline   Quote
Old 2nd Jun 2011, 03:33 PM   #9
Respected Developer
 
  • My Statistics
Have you tried padding:15px in the search css. yet?
Lock Down is offline   Quote
Old 2nd Jun 2011, 03:38 PM   #10
CJ
Moderator

CJ's Avatar
 
Website(s):
loledhard.com
  • My Statistics
padding-left: 10px;
width: 165px;

in #searchbox & it works fine
CJ is offline   Quote
Post Reply

Thread Tools
Display Modes

Similar Threads
Thread Thread Starter Forum Replies Last Post
Need a Minor Help on Java Cool Aquarius™ Development Area 3 20th Jan 2011 07:46 PM
DEDICATED,ACTIVE NEEDED - Moderators/GM's Needed with BENEFITS robert Community Cooperative 0 18th Jul 2010 03:36 PM


All times are GMT. The time now is 03:32 AM.