Jump to content
Sign in to follow this  
MarkT

Css Problems Alignment

Recommended Posts

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!

post-156097-0-44782600-1369917913_thumb.png

Share this post


Link to post
Share on other sites

Problem Solved. Action: Added:

Float:right;

Edited by MarkT

Share this post


Link to post
Share on other sites

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;}

Share this post


Link to post
Share on other sites
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;

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...