MarkT Posted May 30, 2013 Share Posted May 30, 2013 Hello,Sorry I'm experiencing problems with my css, #title {width: 200px;height: auto;margin-top: -10px;margin-left: 20px;background-color:#000;border-radius: 2px;color: #DF3A01;}#search {width: 600px;height: auto;color: #FFF;margin-top: 28px;position: absolute;margin-left: 190px;display: inline;}#buttons {width: 300px;height: auto;color: #FFF;margin-top: 28px;position: absolute;margin-right: 30px;display: inline;}#buttons li {border-left: 2px dashed #FE9A2E;padding: 5px 5px 5px 5px;display: inline;}#buttons ul {display: inline;}#bar {margin-left: -15px;margin-right: -15px;margin-top: -12px;width: 110%;height: 50px;background-color: #000;position: fixed;border-radius: 3px;padding-left: 15px;padding-right: 15px;padding-top: 12px;} and my html; <div id="bar"><div id="title"><h1 color="#FE9A2E" style="float: left;">PitchIT</h1></div><div id="search"><?PHP// Array for Config variables$Config['CanSearch'] = false; // Falseif($Config['CanSearch'] == true){ echo 'form name="search" method="post" action="<?=$PHP_SELF?>"><input type="text" size="50" name="query" placeholder="Enter Search Query Here..." /> by<Select NAME="field"><Option VALUE="name">Name</option><Option VALUE="email">Email</option><Option VALUE="id">ID</option></Select><input type="hidden" name="searching" value="yes" /><input type="submit" name="search" value="Search" /></form>';}else{ echo 'Search Currently Unavailable!';}?></div><div id="buttons"><ul><li>Bob</li><li>Bob</li></ul></div></div> But it shows as the image attached below. The bob li's show up in the middle f the search and title.they're meant to be on the far right.... Thanks in advance!all help appreciated! Link to comment Share on other sites More sharing options...
MarkT Posted May 30, 2013 Author Share Posted May 30, 2013 (edited) Problem Solved. Action: Added: Float:right; Edited May 30, 2013 by MarkT Link to comment Share on other sites More sharing options...
newseed Posted May 30, 2013 Share Posted May 30, 2013 Glad you got it positioned correctly. I like to add that you are really using was too much css to get this kind of results. Not sure why border-radius is being used. Your #bar background is set to black but you have it called in a few other places as well which is redundant. You also need to apply css reset forcing all tags to zero out the default margins and padding. * {margin: 0; padding: 0;} Here's a stripped down css version that you may want to use: * {margin: 0;padding: 0;}#bar {height: 60px;background-color: #000;position: fixed;padding-left: 2%;padding-right: 2%;width: 96%;}#title h1 {line-height: 60px;color: #DF3A01;padding-right: 20px;}#search {color: #FFF;float: left;line-height: 60px;padding-right: 20px;float: none;width:470px;margin: 0 auto;}#buttons {color: #FFF;float: right;padding-left: 0px;}#buttons ul {line-height: 60px;}#buttons li {border-left: 2px dashed #FE9A2E;padding: 5px 5px 5px 5px;display: inline;} Link to comment Share on other sites More sharing options...
MarkT Posted May 31, 2013 Author Share Posted May 31, 2013 Glad you got it positioned correctly. I like to add that you are really using was too much css to get this kind of results. Not sure why border-radius is being used. Your #bar background is set to black but you have it called in a few other places as well which is redundant. You also need to apply css reset forcing all tags to zero out the default margins and padding. * {margin: 0; padding: 0;} Here's a stripped down css version that you may want to use:* {margin: 0;padding: 0;}#bar {height: 60px;background-color: #000;position: fixed;padding-left: 2%;padding-right: 2%;width: 96%;}#title h1 {line-height: 60px;color: #DF3A01;padding-right: 20px;}#search {color: #FFF;float: left;line-height: 60px;padding-right: 20px;float: none;width:470px;margin: 0 auto;}#buttons {color: #FFF;float: right;padding-left: 0px;}#buttons ul {line-height: 60px;}#buttons li {border-left: 2px dashed #FE9A2E;padding: 5px 5px 5px 5px;display: inline;} Thanks for the stripped down code,Although I haven't used it, it would do the trick. I fixed it using Float:right; Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now