DarkxPunk Posted September 20, 2012 Share Posted September 20, 2012 (edited) I am doing a site for the iphone and need a element to float over top, well I had it working, decided to clean up the css later, and now it not working. I said okay lets just revert my work. Still not working -_-CSS: This is the tweaked code /* Reset */* {margin: 0;border: 0;padding: 0;font-family: "Lucida Sans Unicode",sans-serif;background: none;z-index: 0;}html,body {width: 100%;height: 100%;}body {background: url(../images/bgNav.gif) repeat-x;}h1 {font-size: 200%;} h2 {font-size: 150%;} h3 {font-size: 120%;} h4 {font-size: 100%;} h5 {font-size: 80%;} h6 {font-size: 70%;}p,li,label {font-size: 100%;} sup {font-size: 55%;} input {font-size: 70%;} #mSearch label {font-size: 120%;} #mSearch input {font-size: 90%;}/* Group Formatting */h1,h2,h3,h4,h5,h6 {color: #6ac5f2;}a {text-decoration: none;color: #cca300;}input { outline: none;}#wrap,#header {margin: 0 auto 0;}#header,#nav,.nav,.nav a {height: 40px;}.nav a {display: inline-block;}#nav,#nav li {float: left;}form *,.nav a,#footer h6 {color: #888888;}.current a {color: #000000;}#qSearch,#qsImage,#msImage,#logo {float: right;}#nav,#qSearch,#mSearch,#qsButton,#email,#subject,#message,#conSubmit,.blogEnd,.moreInfo {border: 2px solid #e7e5e5;padding: 5px;background-color: #ffffff;}#qSearch,#mSearch,#conSubmit {padding: 0 5px 0;}/* Wrap */#wrap {width: 980px;min-height: 100%;height: auto !important;height: 100%;}/* Header */#header {padding: 10px 0 0 0;}/* Navigation */#nav {display: none;position: relative;left: 1px;top: 1px;border-top: 0;border-width: 1px;padding: 0;width: 150px;height: 200px;background: #ffffff;z-index: 999;-webkit-border-radius: 0px 0px 5px 5px;}#nav li {position: relative;left: 1px;top: 1px;z-index: 998;}#naviPhone,#nav li {margin: 0 1px 0 0;list-style: none;line-height: 2.8;}.nav {overflow: hidden;padding: 0 0 0 5px;}.nav a {display: inline-block;padding: 0 15px 0 10px;}.naviPhoned {background: url(../images/btndL.gif) no-repeat left top;}.naviPhoned a {background: url(../images/btndR.gif) no-repeat right top;}.naviPhone {background: url(../images/btnL.gif) no-repeat left top;}.naviPhone a {background: url(../images/btnR.gif) no-repeat right top;}/* Search */#qsButton {display: none;}#qSearch,#mSearch {width: 290px;height: 30px}#qsText,#msText {width: 217px;height: 35px;outline: none;background: none;}#qsImage,#msImage {padding: 3px 0;}#mSearch {margin: 5px auto 0;}/* Banners */#bannerMain,#logo {height: 250px;}#logo {position: absolute;margin: 0 87px 0 0;width: 210px;background: url(../images/logoBig.gif) no-repeat;margin: 0;z-index: -1;}#bannerMain h1 {padding: 0 0 0 30px;}#bannerMain h3 {padding: 50px 0 0 10px;}#banner {margin: 0 0 0 20px;height: 140px;background: url(../images/logoSmall.gif) no-repeat left center;}/* Portrait */@media screen and (max-width: 320px){#wrap {width: 320px;}#header {width: 276px;}#qsButton {display: block;float: right;position: relative;top: 3px;padding: 0;width: 30px;height: 30px;background: #ffffff url(../images/btnSearch.gif) no-repeat center center;-webkit-border-radius: 0.5em;}#qSearch {display: none;position: absolute;left: 8px;top: 52px;z-index: 998;width: 290px;}#logo {left: 110px;}#banner {margin: 0 auto 0; background: url(../images/logoSmalliPhone.gif) no-repeat center center;}}/* Landscape */@media screen and (min-width: 321px) and (max-width: 480px){#wrap {width: 480px;}#header {width: 436px;}#logo {left: 270px;}#qSearch {display: block !important;}} HTML: <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>ORMT: Home</title> <meta name="description" content="ORMT: Ontario Registered Massage Therapists is a network for RMTs to advertise and attract new clientel by offering a simple, yet intricate search engine to find the best RMT to suit a clients needs."> <meta name='viewport' content='width=device-width; minimum-scale=1.0; maximum-scale=1.0; user-scalable=0;'> <script src="js/iphone.js" type="text/javascript"></script> <link href='css/iphone.css' type='text/css' rel='stylesheet'> </head><body> <div id="wrap"> <div id="header"> <div id='qsButton' onclick='hideShowqSearch()'></div> <form id="qSearch" action="index.php" method="get"> <label>Find:</label> <input id="qsText" type="text" name="qsInput" value="a Therapist by Name, Skill, Location" title="Start typing than hit enter" onfocus="csText(this)" onblur="fsText(this)"> <input id="qsImage" type="image" name="qsSubmit" title="Find" alt="Find" src="images/btnSearch.gif"> </form> <div id='naviPhone' class='naviPhoned nav'><a onclick='hideShowNav()'>MENU</a></div> <ul id="nav"> <li class="current nav"><a href="index.php">HOME</a></li> <li class=" nav"><a href="about.php">ABOUT ORMT</a></li> <li class=" nav"><a href="rmts.php">OUR RMTs</a></li> <li class=" nav"><a href="involved.php">GET INVOLVED</a></li> <li class=" nav"><a href="contact.php">CONTACT US</a></li> </ul> </div> <div id='bannerMain'> <div id='logo'></div> <h3>Ontario</h3> <h1>Registered Massage Therapists</h1> <form id='mSearch' action='index.php' method='get'> <label>Find:</label> <input id='msText' type='text' name='msInput' value='a Therapist by Name, Skill, Location' title='Start typing than hit enter' onfocus='csText(this)' onblur='fsText(this)'> <input id='msImage' type='image' name='msSubmit' title='Find' alt='Find' src='images/btnSearch.gif'> </form> </div> </div></body></html> I need the menu to hover over the text. Why is it not? Edited September 23, 2012 by DarkxPunk Link to comment Share on other sites More sharing options...
reg1965 Posted September 21, 2012 Share Posted September 21, 2012 Show us the js file 'iphone.js' please. Link to comment Share on other sites More sharing options...
dsonesuk Posted September 21, 2012 Share Posted September 21, 2012 Using position: relative; it will still has substance and can be detect by other element that will move out of the way to accommodate it, using position: absolute; removes it from the flow of other elements so it has no substance, so elements remain where they were. #header { padding: 10px 0 0; position: relative;} #nav { background: none repeat scroll 0 0 #FFFFFF; border-width: 1px; display: none; height: 200px; left: 1px; padding: 0; position: absolute; top: 51px; width: 150px; z-index: 999;} The position relative is required for the #header, so its edges will now determine where #nav will positioned itself when using left, top etc properties. Link to comment Share on other sites More sharing options...
DarkxPunk Posted September 21, 2012 Author Share Posted September 21, 2012 Show us the js file 'iphone.js' please.That is it.Using position: relative; it will still has substance and can be detect by other element that will move out of the way to accommodate it, using position: absolute; removes it from the flow of other elements so it has no substance, so elements remain where they were. #header { padding: 10px 0 0; position: relative;} #nav { background: none repeat scroll 0 0 #FFFFFF; border-width: 1px; display: none; height: 200px; left: 1px; padding: 0; position: absolute; top: 51px; width: 150px; z-index: 999;} The position relative is required for the #header, so its edges will now determine where #nav will positioned itself when using left, top etc properties. Okay but how come it worked before and not now? Link to comment Share on other sites More sharing options...
dsonesuk Posted September 21, 2012 Share Posted September 21, 2012 Okay but how come it worked before and not now? I don't know! all i know is this is the usual method of setting up a dropdown menu, however yours is different in that the 'Menu' is usully used as the parent within the unorderlist itself with 'home' to contact us as its child submenus, whereas yours it is set outside the ul list completely. Link to comment Share on other sites More sharing options...
DarkxPunk Posted September 23, 2012 Author Share Posted September 23, 2012 (edited) I don't know! all i know is this is the usual method of setting up a dropdown menu, however yours is different in that the 'Menu' is usully used as the parent within the unorderlist itself with 'home' to contact us as its child submenus, whereas yours it is set outside the ul list completely. The reason I put it outside is because it only loads when a iPhone is detected using PHP. I seem to have solved it: Here is the completed CSS:/* Reset */* {margin: 0;border: 0;padding: 0;font-family: "Lucida Sans Unicode",sans-serif;background: none;}html,body {width: 100%;height: 100%;}body {background: url(../images/bgNav.gif) repeat-x;}h1 {font-size: 200%;} h2 {font-size: 150%;} h3 {font-size: 120%;} h4 {font-size: 100%;} h5 {font-size: 80%;} h6 {font-size: 70%;}p,li,label {font-size: 100%;} sup {font-size: 55%;} input {font-size: 70%;} #mSearch label {font-size: 120%;} #mSearch input {font-size: 90%;}/* Group Formatting */h1,h2,h3,h4,h5,h6 {color: #6ac5f2;}a {text-decoration: none;color: #cca300;}input {outline: none;}#wrap,#header {margin: 0 auto 0;}#header,#nav,.nav,.nav a {height: 40px;}.nav a {display: inline-block;}#nav,#nav li,#content,#ads {float: left;}form *,.nav a,#footer h6 {color: #888888;}.current a {color: #000000;}#qsButton,#qSearch,#qsImage,#msImage,#logo {float: right;}#qsButton,#qSearch,#mSearch,.end,#ads {border: 2px solid #e7e5e5;padding: 5px;background-color: #ffffff;}#qSearch,#mSearch,#conSubmit {padding: 0 5px 0;}#contentWrap,#content,#ads {overflow: hidden;}.blogWrap a:hover {text-decoration: underline;}.blogWrap h1 {border-bottom: 1px solid #e7e5e5;}/* Wrap */#wrap {margin-bottom: -110px;width: 980px;min-height: 100%;height: auto !important;height: 100%;}/* Header */#header {padding: 10px 0 0 0;}/* Navigation */#nav li {margin: 0 1px 0 0;list-style: none;line-height: 2.8;}.nav {padding: 0 0 0 5px;background: url(../images/btndL.gif) no-repeat left top;}.nav a {padding: 0 15px 0 10px;background: url(../images/btndR.gif) no-repeat right top;}.current {background: url(../images/btnL.gif) no-repeat left top;}.current a {background: url(../images/btnR.gif) no-repeat right top;}/* Quick Search */#qSearch {width: 300px;height: 30px;}#qsText {width: 220px;height: 35px;}#qsImage {padding: 3px 0;}/* Banners */#bannerMain,#logo {height: 250px;}#logo {margin: 0 90px 0 0;width: 260px;background: url(../images/logoBig.gif) no-repeat;}#bannerMain h1 {padding: 0 0 0 30px;}#bannerMain h3 {padding: 50px 0 0 10px;}#banner {margin: 0 0 0 20px;height: 140px;background: url(../images/logoSmall.gif) no-repeat left center;}/* Main Search */#mSearch {margin: 10px 0 0 60px;width: 400px;height: 40px;}#msText {width: 320px;height: 45px;}#msImage {padding: 8px 0;}/* Content */.blogWrap {padding: 5px 5px 30px;}.blog {padding: 20px 20px 20px 10px;}.start,.end {font-size: 70%;word-spacing: 4px;}.start a,.end a {word-spacing: 0px;}.start {padding: 5px 20px 0 10px;}.end {border-width: 1px;background: #eeeeee;}#ads {margin: 0 0 0 14px;border-width: 0 0 0 1px;padding: 0;width: 180px;}#footer,#push {clear: both;height: 110px;}#footer {height: 100px;padding: 10px 0 0 0;}/* Wrap */#wrap {width: auto;}/* Navigation */#nav {display: none;position: absolute;border: 1px solid #e7e5e5;border-top: 0;padding: 0;width: 150px;height: 200px;background: #ffffff;z-index: 999;-webkit-border-radius: 0px 0px 5px 5px;}#naviPhone {margin: 0 1px 0 0;list-style: none;line-height: 2.8;}.nav,.nav a {background: none;}.naviPhoned {background: url(../images/btndL.gif) no-repeat left top;}.naviPhoned a {background: url(../images/btndR.gif) no-repeat right top;}.naviPhone {background: url(../images/btnL.gif) no-repeat left top;}.naviPhone a {background: url(../images/btnR.gif) no-repeat right top;}.current a {color: #000000;}/* Search */#mSearch {margin: 10px auto 0;width: 300px;height: 30px;}#msText {width: 220px;height: 35px;}#msImage {padding: 3px 0;}#mSearch label {font-size: 100%;}#mSearch input {font-size: 70%;}/* Banner */#logo {position: absolute;width: 210px;margin: 0;z-index: -1;}/* Content *//* Portrait */@media screen and (max-width: 320px){#header { width: 276px;}#qsButton { position: relative; top: 3px; padding: 0; width: 30px; height: 30px; background: #ffffff url(../images/btnSearch.gif) no-repeat center center; -webkit-border-radius: 0.5em;}#qSearch { display: none; position: absolute; left: 3px; top: 52px; z-index: 998;}#logo { left: 110px;}#banner { margin: 0 auto 0; background: url(../images/logoSmalliPhone.gif) no-repeat center center;}#bannerMain h3,#bannerMain h1 { padding-left: 5px;}}/* Landscape */@media screen and (min-width: 321px) and (max-width: 480px){#header { width: 436px;}#logo { left: 270px;}#qsButton { display: none !important;}#qSearch { display: block !important;}#bannerMain h3 { padding-top: 10px;}} HTML: <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>ORMT: Home</title> <meta name="description" content="ORMT: Ontario Registered Massage Therapists is a network for RMTs to advertise and attract new clientel by offering a simple, yet intricate search engine to find the best RMT to suit a clients needs."> <meta name='viewport' content='width=device-width; minimum-scale=1.0; maximum-scale=1.0; user-scalable=0;'> <script src="js/standard.js" type="text/javascript"></script> <script src='js/iphone.js' type='text/javascript'></script> <link href='css/standard.css' type='text/css' rel='stylesheet'> <link href='css/iphone.css' type='text/css' rel='stylesheet'> </head><body> <div id="wrap"> <div id="header"> <div id='qsButton' onclick='hideShowqSearch()'></div> <form id="qSearch" action="index.php" method="get"> <label>Find:</label> <input id="qsText" type="text" name="qsInput" value="a Therapist by Name, Skill, Location" title="Start typing than hit enter" onfocus="csText(this)" onblur="fsText(this)"> <input id="qsImage" type="image" name="qsSubmit" title="Find" alt="Find" src="images/btnSearch.gif"> </form> <div id='naviPhone' class='nav naviPhoned'><a onclick='hideShowNav()'>MENU</a></div> <ul id="nav"> <li class="current nav"><a href="index.php">HOME</a></li> <li class=" nav"><a href="about.php">ABOUT ORMT</a></li> <li class=" nav"><a href="rmts.php">OUR RMTs</a></li> <li class=" nav"><a href="involved.php">GET INVOLVED</a></li> <li class=" nav"><a href="contact.php">CONTACT US</a></li> </ul> </div> <div id='bannerMain'> <div id='logo'></div> <h3>Ontario</h3> <h1>Registered Massage Therapists</h1> <form id='mSearch' action='index.php' method='get'> <label>Find:</label> <input id='msText' type='text' name='msInput' value='a Therapist by Name, Skill, Location' title='Start typing than hit enter' onfocus='csText(this)' onblur='fsText(this)'> <input id='msImage' type='image' name='msSubmit' title='Find' alt='Find' src='images/btnSearch.gif'> </form> </div> <div id="contentWrap"><div id="content"><div id="blog-ABC-00-0000" class="blogWrap"> <h1>Blog Post</h1> <div class="start">Author: <a href="">Person A</a> | Tags: <a href="">tag1</a> <a href="">tag2</a></div> <div class="blog"> <p>Aasldjaslkd asdjlkasdasjd askdjlaksdjasd aksljdlkasjd klasjdlkasjd laskjdalksjd lkasj dlkasjd lksajdlk asjd lsajd laksdj lkasjdlkasjdl k lkasjdlkasjdl jlkas jdlkasd jlasjasdjasld jasdjaslkdja sdl asdjlasjd alskjdaksjdas djasjdlkasjd kjsadlk jaskld jaksldlkasjd dsg sdlgjfsd f l askJasflsd fkjls akddfjs lsdk fj fl sdjflksda j dfslasdf sldfkj lsdj flsdkj fsdlkjf </p> </div> <div class="end"><a href="">Read More</a> | <a href="">Comments</a> | <a href="">August 5th 2012</a></div></div><div id="blog-ABC-01-0000" class="blogWrap"> <h1>Blog Post</h1> <div class="start">Author: <a href="">Person A</a> | Tags: <a href="">tag1</a> <a href="">tag2</a></div> <div class="blog"> <p>Aasldjaslkd asdjlkasdasjd askdjlaksdjasd aksljdlkasjd klasjdlkasjd laskjdalksjd lkasj dlkasjd lksajdlk asjd lsajd laksdj lkasjdlkasjdl k lkasjdlkasjdl jlkas jdlkasd jlasjasdjasld jasdjaslkdja sdl asdjlasjd alskjdaksjdas djasjdlkasjd kjsadlk jaskld jaksldlkasjd dsg sdlgjfsd f l askJasflsd fkjls akddfjs lsdk fj fl sdjflksda j dfslasdf sldfkj lsdj flsdkj fsdlkjf </p> </div> <div class="end"><a href="">Read More</a> | <a href="">Comments</a> | <a href="">August 5th 2012</a></div></div><div id="blog-ABC-02-0000" class="blogWrap"> <h1>Blog Post</h1> <div class="start">Author: <a href="">Person A</a> | Tags: <a href="">tag1</a> <a href="">tag2</a></div> <div class="blog"> <p>Aasldjaslkd asdjlkasdasjd askdjlaksdjasd aksljdlkasjd klasjdlkasjd laskjdalksjd lkasj dlkasjd lksajdlk asjd lsajd laksdj lkasjdlkasjdl k lkasjdlkasjdl jlkas jdlkasd jlasjasdjasld jasdjaslkdja sdl asdjlasjd alskjdaksjdas djasjdlkasjd kjsadlk jaskld jaksldlkasjd dsg sdlgjfsd f l askJasflsd fkjls akddfjs lsdk fj fl sdjflksda j dfslasdf sldfkj lsdj flsdkj fsdlkjf </p> </div> <div class="end"><a href="">Read More</a> | <a href="">Comments</a> | <a href="">August 5th 2012</a></div></div></div> </div> <div id="push"></div> </div> <div id="footer"> CONTENT </div></body></html> Edited September 23, 2012 by DarkxPunk 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