New Topic
Page 1 of 3 12 ...
Results 1 to 10 of 26

Thread: Minor CSS Help needed.

  1. BlaZe's Avatar
    • My Website(s)
      2Sync.co VPSBiT.com BeastieBay.net FHBTN.com
    • My Statistics
    #1
    2nd Jun 2011, 10:02 AM
    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 - Global Hosting Solutions | VPSBiT.com - Hong Kong & Lithuania VPS
    Offshore Shared Hosting: Ukraine, Panama & Taiwan
    VPS: Ukraine SSD 1Gbps | Serbia 1Gbps | Taiwan | Saudi Arabia
    Dedicated Servers: Netherlands | Hong Kong | Taiwan | Panama | Ukraine | Saudi Arabia | Serbia | Vietnam

  2. Hillside's Avatar
    • My Statistics
    #2
    2nd Jun 2011, 10:19 AM
    #searchbox input {
    margin-left: 15px;
    }

    Tried that?

  3. rahulparekh's Avatar
    • My Website(s)
      PyramidLabs.in RahulParekh.in
    • My Statistics
    #3
    2nd Jun 2011, 12:07 PM
    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. rahulparekh's Avatar
    • My Website(s)
      PyramidLabs.in RahulParekh.in
    • My Statistics
    #4
    2nd Jun 2011, 12:09 PM
    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. Hillside's Avatar
    • My Statistics
    #5
    2nd Jun 2011, 01:04 PM
    it would be better if u link to the site where you're getting the error so we can see the whole code

  6. BlaZe's Avatar
    • My Website(s)
      2Sync.co VPSBiT.com BeastieBay.net FHBTN.com
    • My Statistics
    #6
    2nd Jun 2011, 01:56 PM
    @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 - Global Hosting Solutions | VPSBiT.com - Hong Kong & Lithuania VPS
    Offshore Shared Hosting: Ukraine, Panama & Taiwan
    VPS: Ukraine SSD 1Gbps | Serbia 1Gbps | Taiwan | Saudi Arabia
    Dedicated Servers: Netherlands | Hong Kong | Taiwan | Panama | Ukraine | Saudi Arabia | Serbia | Vietnam

  7. Lock Down's Avatar
    • My Statistics
    #7
    2nd Jun 2011, 03:06 PM
    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. BlaZe's Avatar
    • My Website(s)
      2Sync.co VPSBiT.com BeastieBay.net FHBTN.com
    • My Statistics
    #8
    2nd Jun 2011, 03:09 PM
    @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 - Global Hosting Solutions | VPSBiT.com - Hong Kong & Lithuania VPS
    Offshore Shared Hosting: Ukraine, Panama & Taiwan
    VPS: Ukraine SSD 1Gbps | Serbia 1Gbps | Taiwan | Saudi Arabia
    Dedicated Servers: Netherlands | Hong Kong | Taiwan | Panama | Ukraine | Saudi Arabia | Serbia | Vietnam

  9. Lock Down's Avatar
    • My Statistics
    #9
    2nd Jun 2011, 03:33 PM
    Have you tried padding:15px in the search css. yet?

  10. CJ's Avatar
    CJ
    CJ is offline Respected Member
    • My Statistics
    #10
    2nd Jun 2011, 03:38 PM
    padding-left: 10px;
    width: 165px;

    in #searchbox & it works fine
    You don't hate Justin bieber.You hate the fact you ain't Justin Bieber!

Page 1 of 3 12 ...

Similar Threads

  1. Need a Minor Help on Java
    By Cool Aquarius™ in forum Development Area - Archive
    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 - Archive
    Replies: 0
    Last Post: 18th Jul 2010, 03:36 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •