SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Wizard Blake Tallos's Avatar
    Join Date
    Jun 2008
    Location
    Cuyahoga Falls, Ohio.
    Posts
    1,511
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Nav with a search form

    Code CSS:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="index.css" />
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
     
    * {
        margin:0px;
        padding:0px;
    }
    body {
        font-family:Verdana,Arial,Tahoma,helvetica,sans-serif;
        font-size:15px;
    }
    #container {
        width:600px;
        margin:0 auto;
    }
    #homepagemenu {
        width:714px;
        height:40px;
        background-image: url('http://i41.tinypic.com/2z8zsps.gif');
    }
    #homepagemenu ul {
        margin:10px;
    }
    #homepagemenu li {
        display:inline;
        padding:5px;
    }
    #homepagemenu a:link,a:visited,a:hover,a:active {
        color:#ffffff;
        text-decoration:none;
    }
    #homepagemenu a:hover {
        text-decoration:underline;
    }
    span {
        color:#ffffff;
    }
     
    </style>
    </head>
    <body>
    <div id="container">
    <ul id="homepagemenu">
                <li>
                    <a href="http://www.strappity.com" title="http://www.strappity.com">Home</a>
     
                </li>
     
                    <li>
     
                    <a href="http://www.strappity.com" title="http://www.strappity.com">Veiw Cart</a>
     
                </li>
     
                <li>
     
                    <a href="http://www.strappity.com" title="http://www.strappity.com">My Account</a>
     
                </li>
     
                <li>
     
                    <a href="http://www.strappity.com" title="http://www.strappity.com">Help</a>
     
                </li>
     
                <li>
     
                    <a href="http://www.strappity.com" title="http://www.strappity.com">Contact US</a>
     
                </li>
     
                <label for="searchtxt">
                    <span>Search Terms:</span>
                  </label>
                  <input id=”submitbtn” value="blank" />
                </ul>
                </div><!--end on Container-->
     
        </body>
    </html>

    Why can I get there to be padding up top so that theres room for the links to be aligned in the middle?
    Blake Tallos - Software Engineer for Sanctuary
    Software Studio, Inc. C# - Fanatic!
    http://www.sancsoft.com/


  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,751
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    You set padding on an inline element. Make it inline-block or float it.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Wizard Blake Tallos's Avatar
    Join Date
    Jun 2008
    Location
    Cuyahoga Falls, Ohio.
    Posts
    1,511
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Ryan, what can I do to make the Search span move down closer to the form?
    I tried margin and padding nothing worked? I couldnt figure out a way to make it come down further.

    Code CSS:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="index.css" />
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
     
    * {
    	margin:0px;
    	padding:0px;
    }
    body {
    	font-family:Verdana,Arial,Tahoma,helvetica,sans-serif;
    	font-size:15px;
    }
    #container {
    	width:600px;
    	margin:0 auto;
    }
    #homepagemenu {
    	width:714px;
    	height:40px;
    	background-image: url('http://i41.tinypic.com/2z8zsps.gif');
    	border:1px solid #111;
    }
    #homepagemenu ul {
    	padding:10px;
    }
    #homepagemenu li {
    	float:left;
    	padding:12px;
    	list-style-type:none;
    }
    #homepagemenu a:link,a:visited,a:hover,a:active {
    	color:#ffffff;
    	text-decoration:none;
    }
    #homepagemenu a:hover {
    	text-decoration:underline;
    }
    span {
     
    	color:#ffffff;
    }
    input {
    	margin:-10px 5px 0px;
    	float:right;
    }
     
    </style>
    </head>
    <body>
    <div id="container">
    <ul id="homepagemenu">
    			<li>
    				<a href="http://www.strappity.com" title="http://www.strappity.com">Home</a>
    			</li>
     
    		        <li>
     
    				<a href="http://www.strappity.com" title="http://www.strappity.com">Veiw Cart</a>
     
    			</li>
     
    			<li>
     
    				<a href="http://www.strappity.com" title="http://www.strappity.com">My Account</a>
    			</li>
     
    			<li>
     
    				<a href="http://www.strappity.com" title="http://www.strappity.com">Help</a>
     
    			</li>
     
    			<li>
     
    				<a href="http://www.strappity.com" title="http://www.strappity.com">Contact US</a>
     
    			</li>
     
     
        			<span>Search Terms:</span>
     
      			<input id=&#65533;submitbtn&#65533; value="" />
    			</ul>
    			</div><!--end on Container-->
     
    	</body>
    </html>
    Blake Tallos - Software Engineer for Sanctuary
    Software Studio, Inc. C# - Fanatic!
    http://www.sancsoft.com/


  4. #4
    SitePoint Member zoloadang's Avatar
    Join Date
    Mar 2009
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    maybe you can try use Position to resolve your issue!

  5. #5
    SitePoint Wizard Blake Tallos's Avatar
    Join Date
    Jun 2008
    Location
    Cuyahoga Falls, Ohio.
    Posts
    1,511
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by zoloadang View Post
    maybe you can try use Position to resolve your issue!
    Lol, no worries bro. I figured it out.
    Code CSS:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="index.css" />
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
     
    * {
        margin:0px;
        padding:0px;
    }
    body {
        font-family:Verdana,Arial,Tahoma,helvetica,sans-serif;
        font-size:15px;
    }
    #container {
        width:600px;
        margin:0 auto;
    }
    #homepagemenu {
        width:714px;
        height:40px;
        background-image: url('http://i41.tinypic.com/2z8zsps.gif');
        border:1px solid #111;
    }
    #homepagemenu ul {
        padding:10px;
    }
    #homepagemenu li {
        float:left;
        padding:12px;
        list-style-type:none;
    }
    #homepagemenu a:link,a:visited,a:hover,a:active {
        color:#ffffff;
        text-decoration:none;
    }
    #homepagemenu a:hover {
        text-decoration:underline;
    }
    span {
        padding-bottom:10px;
        color:#ffffff;
    }
    #search {
        color:#ffffff;
        padding-top:12px;
        text-align:left;
    }
     
    </style>
    </head>
    <body>
    <div id="container">
    <ul id="homepagemenu">
                <li>
                    <a href="http://www.strappity.com" title="http://www.strappity.com">Home</a>
     
                </li>
     
                    <li>
     
                    <a href="http://www.strappity.com" title="http://www.strappity.com">Veiw Cart</a>
     
                </li>
     
                <li>
     
                    <a href="http://www.strappity.com" title="http://www.strappity.com">My Account</a>
     
                </li>
     
                <li>
     
                    <a href="http://www.strappity.com" title="http://www.strappity.com">Help</a>
     
                </li>
     
                <li>
     
                    <a href="http://www.strappity.com" title="http://www.strappity.com">Contact US</a>
     
                </li>
     
                <div id="search">
                    Search Terms:
     
                  <input id="submitbtn" value="" />
                </div>
                </ul>
                </div><!--end on Container-->
     
        </body>
    </html>

    Code HTML4Strict:
    <div id="search">
                    Search Terms:
     
                  <input id="submitbtn" value="" />
                </div>
    Code CSS:
    #search {
        color:#ffffff;
        padding-top:12px;
        text-align:left;
    }
    Blake Tallos - Software Engineer for Sanctuary
    Software Studio, Inc. C# - Fanatic!
    http://www.sancsoft.com/


  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,751
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Blake, you can firebug to figure this crap out .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  7. #7
    SitePoint Wizard Blake Tallos's Avatar
    Join Date
    Jun 2008
    Location
    Cuyahoga Falls, Ohio.
    Posts
    1,511
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can someon show me show me how to do this in tables?
    Blake Tallos - Software Engineer for Sanctuary
    Software Studio, Inc. C# - Fanatic!
    http://www.sancsoft.com/


  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,751
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    :OO :O :O :O :O :O

    Why not just use seperate <tr>'s and each <li> (not the actual <li> tag) content can be within a <td>
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  9. #9
    SitePoint Guru james_littler's Avatar
    Join Date
    May 2007
    Location
    Portsmouth, UK
    Posts
    775
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by BlakeAnthony View Post
    Can someon show me show me how to do this in tables?

  10. #10
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,751
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    No offense Blake, but you have a list of content, not tabular data worth of content...reconsider using tables?
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  11. #11
    SitePoint Wizard Blake Tallos's Avatar
    Join Date
    Jun 2008
    Location
    Cuyahoga Falls, Ohio.
    Posts
    1,511
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    No offense Blake, but you have a list of content, not tabular data worth of content...reconsider using tables?
    Lol, chill out guys. It's not my fault. Beleive me If I told my work that I didnt want to use tables inside their CMS id get fired lol. I've told them a million times that tables are not the way to go and obviously they just dont care.
    Blake Tallos - Software Engineer for Sanctuary
    Software Studio, Inc. C# - Fanatic!
    http://www.sancsoft.com/


  12. #12
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,751
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="index.css" />
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
    
    * {
        margin:0px;
        padding:0px;
    }
    body {
        font-family:Verdana,Arial,Tahoma,helvetica,sans-serif;
        font-size:15px;
    }
    #container {
        width:600px;
        margin:0 auto;
    }
    #homepagemenu {
        width:714px;
        height:40px;
        background-image: url('http://i41.tinypic.com/2z8zsps.gif');
        border:1px solid #111;
    }
    #homepagemenu ul {
        padding:10px;
    }
    #homepagemenu li {
        float:left;
        padding:12px;
        list-style-type:none;
    }
    #homepagemenu a:link,a:visited,a:hover,a:active {
        color:#ffffff;
        text-decoration:none;
    }
    #homepagemenu a:hover {
        text-decoration:underline;
    }
    span {
        padding-bottom:10px;
        color:#ffffff;
    }
    #search {
        color:#ffffff;
        text-align:left;
    }
    td{vertical-align:middle;padding-left:7px;}
    </style>
    </head>
    <body>
    <div id="container">
    <table id="homepagemenu" cellpadding="0" cellspacing="0" border="0">
    <tr><td> <a href="http://www.strappity.com" title="http://www.strappity.com">Home</a></td>
    <td><a href="http://www.strappity.com" title="http://www.strappity.com">Veiw Cart</a></td>
    <td><a href="http://www.strappity.com" title="http://www.strappity.com">My Account</a></td>
    <td><a href="http://www.strappity.com" title="http://www.strappity.com">Help</a></td>
    <td><a href="http://www.strappity.com" title="http://www.strappity.com">Contact US</a></td>
    <td><div id="search">Search Terms: <input id="submitbtn" value="" /></div></td>
    </tr></table>
                </div><!--end on Container-->
                
        </body>
    </html>
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  13. #13
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Okay wait wait, why was there a loose label in the menu in the first place?

    I see later it got a div around it, but, it's a label, and a search button... that's a form, man.

    And what's cool about li's is, they can have just about anything inside them. Right now you've got them float left? and leaving the a's? to make a horizontal menu?

    Besides, having the div as a child of the ul directly was illegal, but a li... li's can has cheezburgerz.

    Why not

    <ul>
    <li><a href="">link1</a></li>
    <li><a href="">link2</a></li>
    <li><a href="">link3</a></li>
    <li><a href="">link4</a></li>
    <li><form><div/fieldset><input type="text" name="blah" title="type in your search terms"><input type="submit" value="search"></div/fieldset></form></li>
    </ul>


    (in case it's not clear, div/fieldset means, pick one, though you may want the div since the fieldset's gonna want a legend and that can get really gay in a search box, they're just too obvious what they do and then hiding the legend text in firefox is such a pain... yeah, I'd go with the div)
    (in case one wonders, why no label, the answer is, almost all users know it's a search form because the submit says it all: search. The title attribute is for teh screen readerz, works in all the major ones anyway, very safe)
    It's jawsome. Keep the li's floated, and you may need to set a width smaller on the typed input. No need for a table for this (not sure a table would really be easier).


Bookmarks

Posting Permissions

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