ngreenwood6 Posted October 2, 2008 Share Posted October 2, 2008 I have a css file: body { margin:0 auto; width:800px; height:100%; border:1px solid #000000; } #input { } #get { } #time { float:right; } Then I have an html file: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Untitled Document</title> <script type="text/javascript" src="get.js"></script> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="input"> <form name="form1"> Keyword: <input type="text" name="keyword" onkeyup="showUser(this.value);"/> </form> </div> <div id="get"> </div> <div id="time"> <script type="text/javascript"> show(); </script> </div> </body> </html> On the left side of the page at the very top in the input id it shows keyword and then a text box. Then on the left it shows the time. The problem is that even though it shows the time on the left it is not where I want it. I want it to be on the same line as the keyword and text box but it is about 3 lines down. Any help is appreciated. Link to comment https://forums.phpfreaks.com/topic/126767-solved-why-oh-why-css/ Share on other sites More sharing options...
F1Fan Posted October 2, 2008 Share Posted October 2, 2008 You need to add "display: inline;" to your CSS. Link to comment https://forums.phpfreaks.com/topic/126767-solved-why-oh-why-css/#findComment-655673 Share on other sites More sharing options...
ngreenwood6 Posted October 2, 2008 Author Share Posted October 2, 2008 I tried adding display:inline; to the #time field but it made no difference. Then I attempted to add it to the body of the css file but then it took the border off but the text was inline. Any other suggestions? Link to comment https://forums.phpfreaks.com/topic/126767-solved-why-oh-why-css/#findComment-655707 Share on other sites More sharing options...
F1Fan Posted October 2, 2008 Share Posted October 2, 2008 You need to add it to all elements that you want on the same line. Link to comment https://forums.phpfreaks.com/topic/126767-solved-why-oh-why-css/#findComment-655712 Share on other sites More sharing options...
ngreenwood6 Posted October 2, 2008 Author Share Posted October 2, 2008 So I added the display:inline; to the #input where the form is and #time where the time displays and it still made no difference. Can you provide me with the correct code possibly or check for errrors. Any help is appreciated! Link to comment https://forums.phpfreaks.com/topic/126767-solved-why-oh-why-css/#findComment-655733 Share on other sites More sharing options...
F1Fan Posted October 2, 2008 Share Posted October 2, 2008 #input { display: inline; } #get { display: inline; } #time { display: inline; } Link to comment https://forums.phpfreaks.com/topic/126767-solved-why-oh-why-css/#findComment-655742 Share on other sites More sharing options...
ngreenwood6 Posted October 2, 2008 Author Share Posted October 2, 2008 That is what I had and it is making no difference at all. It just looks exactly the same as it did before. Is there any other way to accomplish this? Link to comment https://forums.phpfreaks.com/topic/126767-solved-why-oh-why-css/#findComment-655747 Share on other sites More sharing options...
ngreenwood6 Posted October 2, 2008 Author Share Posted October 2, 2008 I dont know if this would make a difference or not but I am using ajax,php, and mysql on this page. Link to comment https://forums.phpfreaks.com/topic/126767-solved-why-oh-why-css/#findComment-655753 Share on other sites More sharing options...
F1Fan Posted October 2, 2008 Share Posted October 2, 2008 Ajax, php, and mysql shouldn't have any effect on it. I recently created something like this. If you DON'T use display: inline; they will, by default, display one on top of another. So, not sure what's going on. Link to comment https://forums.phpfreaks.com/topic/126767-solved-why-oh-why-css/#findComment-655765 Share on other sites More sharing options...
ngreenwood6 Posted October 2, 2008 Author Share Posted October 2, 2008 Yeah it was confusing me as well. I have tried several things and nothing seems to fix this issue. Does anyone have any other suggestions? By the way thanks for your help f1fan. If someone might have some spare time and want to copy the pages and try to get them to display correctly it would be appreciated. Maybe I can help with something else Link to comment https://forums.phpfreaks.com/topic/126767-solved-why-oh-why-css/#findComment-655788 Share on other sites More sharing options...
F1Fan Posted October 2, 2008 Share Posted October 2, 2008 Ah hah! I think I figured it out. I just copied your code to one of my sites and tested it. It wasn't displaying properly at first. Then I added display: inline; to the form tag and it worked. This is my exact code (changed a little, because I don't have your js file): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Untitled Document</title> <style type="text/css"> body { margin:0 auto; width:800px; height:100%; border:1px solid #000000; } #input { display: inline; } #get { display: inline; } #time { display: inline; } </style> </head> <body> <div id="input"> <form name="form1" style="display:inline;"> Keyword: <input type="text" name="keyword"/> </form> </div> <div id="get"> get </div> <div id="time"> time </div> </body> </html> Link to comment https://forums.phpfreaks.com/topic/126767-solved-why-oh-why-css/#findComment-655794 Share on other sites More sharing options...
ngreenwood6 Posted October 2, 2008 Author Share Posted October 2, 2008 That worked for the way that you showed it to me. However, when I use the float:right; command in the time div it throws that down to the next line. Any ideas why? Link to comment https://forums.phpfreaks.com/topic/126767-solved-why-oh-why-css/#findComment-655800 Share on other sites More sharing options...
F1Fan Posted October 2, 2008 Share Posted October 2, 2008 The display attribute has always been finicky. I think you may need to try something else, such as text-align: right; or something to that effect. Link to comment https://forums.phpfreaks.com/topic/126767-solved-why-oh-why-css/#findComment-655804 Share on other sites More sharing options...
ngreenwood6 Posted October 2, 2008 Author Share Posted October 2, 2008 Well the text-align:right; puts it on the same line but it is not all the way to the right of the page like the float. Any ideas on that. I appreciate all of your help at this point. Link to comment https://forums.phpfreaks.com/topic/126767-solved-why-oh-why-css/#findComment-655823 Share on other sites More sharing options...
F1Fan Posted October 2, 2008 Share Posted October 2, 2008 Try this for your CSS: body { position: relative; top: 0px; left: 0px; margin:0 auto; width:800px; height:100%; border:1px solid #000000; } #input { display: inline; } #get { display: inline; } #time { position: absolute; top: 0px; right: 0px; display: inline; } Link to comment https://forums.phpfreaks.com/topic/126767-solved-why-oh-why-css/#findComment-655839 Share on other sites More sharing options...
ngreenwood6 Posted October 2, 2008 Author Share Posted October 2, 2008 Wow thanks that worked out really well. It is working exactly how I wanted it too. Thank you for all of your help. If you need anything please let me know. I say this is one of the best communities on the internet. Link to comment https://forums.phpfreaks.com/topic/126767-solved-why-oh-why-css/#findComment-655845 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.