Forum Articles
WJunction


  1. #1
    Respected Member BlaZe's Avatar

    Website(s):
    2Sync.co BeastieBay.net FHBTN.com
    • My Statistics

    Default Minor CSS Help needed.

    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.
    2Sync.co - Quality Offshore Hosting Solutions
    Experience the topnotch premium 1Gbit VPS located in Serbia (Use 1OFF coupon code)
    Shared Hosting (Panama) | Dedicated Servers (HongKong/Panama/Serbia) | Serbia VPN

  2. #2
    Member Hillside's Avatar

    • My Statistics

    Default

    #searchbox input {
    margin-left: 15px;
    }

    Tried that?

  3. #3
    Member

    Website(s):
    PyramidLabs.in RahulParekh.in
    • My Statistics

    Default

    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.
    Designer & Front-end Developer at Pyramid Labs - A Web Design & Development Studio

  4. #4
    Member

    Website(s):
    PyramidLabs.in RahulParekh.in
    • My Statistics

    Default

    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.
    Designer & Front-end Developer at Pyramid Labs - A Web Design & Development Studio

  5. #5
    Member Hillside's Avatar

    • My Statistics

    Default

    it would be better if u link to the site where you're getting the error so we can see the whole code

  6. #6
    Respected Member BlaZe's Avatar

    Website(s):
    2Sync.co BeastieBay.net FHBTN.com
    • My Statistics

    Default

    @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
    2Sync.co - Quality Offshore Hosting Solutions
    Experience the topnotch premium 1Gbit VPS located in Serbia (Use 1OFF coupon code)
    Shared Hosting (Panama) | Dedicated Servers (HongKong/Panama/Serbia) | Serbia VPN

  7. #7
    Respected Developer

    • My Statistics

    Default

    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.

  8. #8
    Respected Member BlaZe's Avatar

    Website(s):
    2Sync.co BeastieBay.net FHBTN.com
    • My Statistics

    Default

    @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.
    2Sync.co - Quality Offshore Hosting Solutions
    Experience the topnotch premium 1Gbit VPS located in Serbia (Use 1OFF coupon code)
    Shared Hosting (Panama) | Dedicated Servers (HongKong/Panama/Serbia) | Serbia VPN

  9. #9
    Respected Developer

    • My Statistics

    Default

    Have you tried padding:15px in the search css. yet?

  10. #10
    CJ
    CJ is offline
    Respected Member CJ's Avatar

    • My Statistics

    Default

    padding-left: 10px;
    width: 165px;

    in #searchbox & it works fine


    Domain Clearance Sale!!! || Selling ScriptMonsterz.com

    You don't hate Justin bieber.You hate the fact you ain't Justin Bieber!

Results 1 to 10 of 26

Similar Threads

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