Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    Regular Coder
    Join Date
    Jan 2004
    Location
    USA
    Posts
    364
    Thanks
    12
    Thanked 6 Times in 6 Posts

    placing a form into a certain div...

    Hi, im trying to place a form into a thin, 15px, div bar. The problem is, when i put the form code into the <div></div>, it seems like i put a couple of <br>'s in front....

    Heres the html:
    Code:
    <div class="bar">
    
    just some plain old text here...
    
    <span title="Search the site">
    <form method="post" action="http.wau4k.com/quyo">
    <input type="hidden" name="crid" value="52318042a4a6" />
    Search:
    <input name="query" size="8" class="search" />
    <input type="button" value="go" alt="Go!" name="submit" />
    </form>
    </span>
    
    </div>
    css:
    Code:
    .bar {
    	display: block;
    	border: 1px solid #B3B3B3;
    	border-bottom: 3px;
    	border-right: 3px;
    	width: 100%;
    	height: 15px;
    	font-family: Tahoma, Verdana, Arial, sans-serif;
    	text-align: center;
    	background-color: #EDEDED;
    	white-space: nowrap;
    }
    Whats wrong? i even tried replacing the button with an image (<input type="image" src="imgbutton.gif" alt="Go!" name="submit">) which is less that 15px...AND made the input box (the thing where you type stuff in) smaller in height... I can't make the whole thing on one line

  • #2
    New Coder
    Join Date
    Dec 2003
    Location
    California
    Posts
    28
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Try setting the margins of the form elements to 0.

    // freak

  • #3
    Regular Coder
    Join Date
    Jan 2004
    Location
    USA
    Posts
    364
    Thanks
    12
    Thanked 6 Times in 6 Posts
    It works, kind of. The "margin: 0px" did take away the giant margin, but the form is still on another line, as if there were one br...
    Attached Thumbnails Attached Thumbnails placing a form into a certain div...-searchdiv.gif  

  • #4
    Senior Coder
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    1,963
    Thanks
    0
    Thanked 0 Times in 0 Posts
    A form is a block elementv (isn't it?). Try putting your span inside the form tags.

    I take no responsibility for the above nonsense.


    Left Justified

  • #5
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    this is more of a question... could you use the css for form (i.e. form {display:inline ... etc}) instead of the div? So you don't have nested block elements?

    -Rich

  • #6
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,253
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Form = block

    Rich,

    sure you can, but there may be reasons unknown why he needs an extra div around it.

    qwertyuiop,

    Since span is an inline element by default and can hold only inline content, it shouldn't contain a complete form; the title attribute can be used on the form element just as well.
    If you still can't figure out where the extra space is coming from, try and set a border for the form as well, and experiment with margin, padding, bits of text here and there to see where they end up, etc. It's not unimaginable that for the non-existent (at least inline) content of the span a space is reserved.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #7
    Regular Coder
    Join Date
    Jan 2004
    Location
    USA
    Posts
    364
    Thanks
    12
    Thanked 6 Times in 6 Posts
    Adding a border shows me that the form takes up the whole row-as if the width were 100%. I added a width attribute (is that what its called?) so:
    Code:
    <div class="bar">
    
    just some plain old text here...
    
    <form method="post" action="http.wau4k.com/quyo" title="Search the site" class="searchtest">
    <input type="hidden" name="crid" value="52318042a4a6" />
    Search:
    <input name="query" size="8" class="search" />
    <input type="button" value="go" alt="Go!" name="submit" />
    </form>
    
    </div>
    css:
    Code:
    .searchtest {border: 1px solid red;
    width: 135px; margin: 0px;}
    if i add some text after the form, the text is thrown down another line (ex. ...</form>textext...), as if there were, a BR! Is this due to the: text-align: center in the bar div css?
    Last edited by qwertyuiop; 02-25-2004 at 12:04 AM.

  • #8
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,253
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Block

    No, form is a block element, so any content that follows it, be it inline or block, is placed underneath it, following the normal flow.

    Update:

    It just occurred to me that the input element might be a block one, too; I tried to get confirmation in the DTD, but I got a bit lost.
    If anyone can confirm or deny this, I'd be interested to know.

    Anyway, you could try display: inline on the inputs to see what happens...
    Last edited by ronaldb66; 02-25-2004 at 10:45 AM.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #9
    Regular Coder
    Join Date
    Jan 2004
    Location
    USA
    Posts
    364
    Thanks
    12
    Thanked 6 Times in 6 Posts

    Smile yay!

    Cool, display: inline works! Thanks ronaldb66!

  • #10
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,253
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Congrats!

    Qwertyuiop,

    you're welcome; sounds like input is a block level element after all!
    Last edited by ronaldb66; 02-26-2004 at 11:50 AM.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #11
    Regular Coder
    Join Date
    Jan 2004
    Location
    USA
    Posts
    364
    Thanks
    12
    Thanked 6 Times in 6 Posts
    I guess so.
    I have a new problem now <sighs>. I want the form to be positioned on the right of the bar div, but the text is still centered in the middle. Ive tried this:
    Code:
    position: relative; right: 1px;
    it doesn't seem to work. Ive also tried something else, and it did align to the right, but it moved the form down (like BR). How can this be accomplished?


  •  

    Posting Permissions

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