stelthius Posted December 11, 2008 Share Posted December 11, 2008 Hey guys, Sorry if this is in the wrong place but i have a slight dilema, i have a Ajax search engine that allows a user to search for a member see link http://62.31.203.205/test/layout/search.php basicly what my problem is, that i dont want the names to push the page down i want the search results to hover over the page so this doesnt happen, type 1 into the box to see what i mean, anyone have any solution's they can offer ? Thanks Rick Quote Link to comment Share on other sites More sharing options...
gaza165 Posted December 11, 2008 Share Posted December 11, 2008 i would look into css to style your page to make it fit what you are trying to do. Quote Link to comment Share on other sites More sharing options...
stelthius Posted December 11, 2008 Author Share Posted December 11, 2008 Thanks for your reply, However im not fluent with css so have you got any tips i can use to help me out with this one? Thanks Rick Quote Link to comment Share on other sites More sharing options...
gaza165 Posted December 11, 2008 Share Posted December 11, 2008 <html><head><title>AJAX Search</title> <script src="js/jssearch.js"></script> <style type="text/css"> #left { width: 200px; float: left;} </style> </head> <body> <div id="left"> <input type=text name=search-username onkeypress="search(this.value);" /> <div id="txtHint"></div> </div> hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh </body> </html> this really depends what you want the site to look like... this is just an example... Quote Link to comment Share on other sites More sharing options...
stelthius Posted December 11, 2008 Author Share Posted December 11, 2008 Hi, i tried what you suggested but that still persists to push the main page content down hhhhhhhhhhhhhhhhhhhhh is basicly just replicating my page for now the results need to hover over hhhhhhhhhhhhhhhhhhhhh <this being my page content if you get what i mean lol Quote Link to comment Share on other sites More sharing options...
gaza165 Posted December 11, 2008 Share Posted December 11, 2008 <html><head><title>AJAX Search</title> <script src="js/jssearch.js"></script> <style type="text/css"> #users { width: 500px; height:100%: margin:0 auto; background: white; } #content { position:absolute; left:0px; top:0px; z-index:-1 } </style> </head> <body> <div id="users"> <input type=text name=search-username /> <input type="submit" onclick="search(this.value);"/> <div id="txtHint"></div> </div> <div id="content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel dolor. In sit amet augue. Suspendisse eleifend leo at diam. Phasellus luctus. Duis blandit tristique est. Suspendisse elit. Proin vitae neque at nibh tempus sollicitudin. Pellentesque condimentum nulla. Nulla lacus libero, convallis vel, fringilla at, rutrum ac, sem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse pellentesque, ante ut aliquam porta, nisl massa pellentesque quam, eu semper magna dui vel quam. Quisque iaculis eros nec nibh. Donec placerat, ipsum et commodo rhoncus, nulla orci semper enim, non dapibus elit felis quis pede. Phasellus non sem. Ut lacus lacus, semper quis, rutrum et, placerat eu, nulla. Fusce eu purus. In hac habitasse platea dictumst. Quisque molestie orci non metus. Donec vestibulum sem sed pede. Donec in purus ut urna gravida iaculis. Donec vulputate imperdiet nulla. Ut semper ultricies pede. Curabitur non augue. Ut pharetra, lorem et sollicitudin dictum, pede tortor dictum massa, nec suscipit nisi odio at nisi. Nulla metus leo, porta vitae, auctor eu, interdum vitae, magna. Vivamus diam. Suspendisse potenti. Vivamus rutrum convallis ante. Sed quis lacus quis nisl aliquam elementum. Mauris mattis nulla a diam. Curabitur mattis. Maecenas egestas scelerisque augue. Donec bibendum dignissim augue. Aliquam ultrices rutrum felis. Nunc scelerisque eros ac lorem. Maecenas imperdiet lobortis purus. Mauris a leo in nisl posuere dictum. Pellentesque lacinia iaculis dui. Quisque ornare pede ac nisi. Suspendisse potenti. Nulla consequat auctor diam. Etiam suscipit. Nulla facilisi. Nulla facilisi. Morbi congue, urna ullamcorper vestibulum varius, metus neque fermentum quam, in egestas orci tortor eget pede. Etiam risus lacus, faucibus et, aliquet nec, lobortis vitae, diam. Etiam vestibulum. Curabitur sit amet massa. Suspendisse vel orci. Vestibulum vel leo. Aliquam erat volutpat. Aliquam erat volutpat. Mauris auctor odio sit amet nunc. Vestibulum congue vehicula neque. Quisque a massa sed tellus bibendum molestie. Sed elit. Nam ut mi quis est volutpat iaculis. Quisque viverra, nisi mattis varius tincidunt, mauris risus tempor sem, nec luctus tellus felis id nisl. Donec porta ligula a enim. In aliquam mattis ipsum. Aliquam libero lacus, consectetur ultricies, tempus id, vulputate non, urna. Vivamus in justo. Aenean mollis nisi nec turpis. Cras velit nisl, eleifend a, sodales non, facilisis at, lorem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed volutpat pretium nulla. Pellentesque eros ligula, sagittis et, aliquet vel, volutpat at, turpis. Etiam dignissim ligula in quam. Donec blandit risus sit amet nibh. Suspendisse tincidunt urna non ante. Morbi iaculis auctor eros. Quisque egestas magna imperdiet dui. Quisque risus. Vivamus fringilla odio eget erat. Ut scelerisque dui. Nam sodales. Nulla facilisi. </div> </body> </html> you need to use something called z-index , take a look at that code and see what you think. Quote Link to comment Share on other sites More sharing options...
stelthius Posted December 11, 2008 Author Share Posted December 11, 2008 Stunner, thanks paul so much that is the exact thing i need, Awsome guy thanks for your time Quote Link to comment Share on other sites More sharing options...
stelthius Posted December 12, 2008 Author Share Posted December 12, 2008 Ok as it seems i implemented this into my actual layout and it screwed with it big time, im actually at a point were im not sure what to do, as my site is un-finished i dont want to post a link to it here as there is vulnerabilites in the login system (they only remain there as im taking my time out to learn how to make this drop down for the search work properly) so if anyone is kind enough to take a look at this for me privately please let me know so i can pm you the link to the page with the problem, Thanks Rick P.S the code paul has given me works but it is conflicting with my css for the actual page. Quote Link to comment Share on other sites More sharing options...
stelthius Posted December 12, 2008 Author Share Posted December 12, 2008 ok here are my two pieces of CSS that are coliding any help on this would be appretited, Searcdh engine css, <style type="text/css"> #users { width: 500px; height:100%: margin:0 auto; background: white; } #content { position:absolute; left:0px; top:0px; z-index:-1 } </style> Main site's CSS ul, ol {margin-left:30px;} ul ul, ol ol {margin:0; margin-left:20px;} ol {list-style-type:decimal;} li {display:list-item;} dt {font-weight:bold;} dd {margin-left:30px;} /* ---------------------------------------------------------------------------------------------------------- 2) Universal styles (display, float, margin, text-align...) ---------------------------------------------------------------------------------------------------------- */ .box {min-height:1px;} .box:after {display:block; visibility:hidden; clear:both; line-height:0; font-size:0; content:".";} .relative {position:relative;} .clear {clear:both;} .f-left {float:left !important;} img.f-left {float:left; margin-right:10px;} .f-right {float:right !important;} img.f-right {float:right; margin-left:10px;} .t-left {text-align:left !important;} .t-center {text-align:center !important;} .t-right {text-align:right !important;} .t-justify {text-align:justify !important;} .va-top {vertical-align:top;} .va-middle {vertical-align:middle;} .va-bottom {vertical-align:bottom;} .nom {margin:0 !important;} .nomt {margin-top:0 !important;} .nomb {margin-bottom:0 !important;} .noscreen {display:none;} .bigger {font-size:110%;} .smaller {font-size:85%;} /* ---------------------------------------------------------------------------------------------------------- 3) Generally HTML styles (table, ul, dl...) ---------------------------------------------------------------------------------------------------------- */ ul.ul-style01 {margin:15px 0; list-style:none;} ul.ul-style01 li {padding-left:12px; background:url("../design/ul-style01.gif") 0 7px no-repeat;} ul.ul-style01 ul {margin:0; list-style:none;} ul.ul-style01 ul li {padding-left:15px; background:url("../design/ul-style01-sub.gif") 0 3px no-repeat;} /* ---------------------------------------------------------------------------------------------------------- 4) LAYOUT ---------------------------------------------------------------------------------------------------------- */ #main {width:960px; margin:0 auto; background:url("../design/main.gif") 0 0 repeat-y;} #main-in {width:940px; padding:0 10px; background:url("../design/main-in.gif") 0 0 no-repeat; text-align:left;} #header {position:relative; padding:20px 20px 0 20px; background:url("../design/header.gif") 0 0 repeat-x; overflow:hidden;} #logo {margin:0; margin-bottom:10px; width:630px; font:normal 220%/1.4 "arial",sans-serif; letter-spacing:-1px;} #logo span {font-weight:bold;} #logo a {text-decoration:none;} #logo a:hover {text-decoration:underline;} ul#tabs {margin:0; margin-left:225px; padding:0; list-style:none;} ul#tabs li {display:inline; margin:0; padding:0;} ul#tabs li a {display:block; float:left; margin-right:5px; padding:7px 15px; background:url("../design/tabs-link.gif") 0 0 repeat-x; text-decoration:underline;} ul#tabs li#tabs-active a {font-weight:bold; text-decoration:none;} #search {position:absolute; top:20px; right:20px;} #search #search-input {width:150px; padding:3px; font:normal 100%/1.2 "arial",sans-serif;} #search #search-submit {padding:2px; font:normal 100%/1.2 "arial",sans-serif;} #cols {clear:both;} #content {float:right; width:665px; padding:15px 15px 15px 0; overflow:hidden;} #aside {float:left; width:229px; padding:15px 0 100px 15px; overflow:hidden;} #aside .title {margin:0; padding:8px 10px 7px 27px; background:url("../design/aside-title.gif") 10px 15px no-repeat; font-size:100%; font-weight:bold;} .nav {margin:10px 0 10px 13px; padding:0; list-style:none;} .nav li {display:inline; margin:0; padding:0;} .nav li a {display:block; padding:2px 10px 2px 15px; background:url("../design/nav-link.gif") 0 7px no-repeat; text-decoration:underline;} .nav li#nav-active a {font-weight:bold; text-decoration:none;} #footer {clear:both; padding:20px; background:url("../design/footer.gif") 0 0 repeat-x;} #footer p {margin:0;} /* ---------------------------------------------------------------------------------------------------------- 5) Page: Home ---------------------------------------------------------------------------------------------------------- */ #perex-title {margin:0; padding:8px 10px 8px 27px; background:url("../design/perex-title.gif") 10px 15px no-repeat; font-size:100%;} #perex {padding:15px;} .col50 {float:left; width:320px;} Once again any help is greatly appretiated! Rick Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.