Jump to content

terryds

Members
  • Content Count

    174
  • Joined

  • Last visited

Everything posted by terryds

  1. What's the best way to sanitize user input ? Is htmlspecialchars() enough ? Or, filter_var() is better? In sanitizing string to avoid XSS, which one performs better, htmlspecialchars() or filter_var() ??
  2. Hmm.. maybe, Facebook uses IP Address to track the location. $_SERVER['REMOTE_ADDR']
  3. How to auto-adjust the time by users' timezone ? Must the user fill the form asking for his/her timezone ? Do browsers send the user timezone information when interacting with the server ? Can we just use PHP to auto-adjust the time ? Or, Do we need javascript ?
  4. What's better ? Using foreign key ON DELETE CASCADE ON UPDATE CASCADE, so it can automatically delete/update the rows. Or... Just manually delete it (using query) ? Please tell me the pros and cons.
  5. My query generates error. (errno:150) CREATE TABLE userrole ( userid BIGINT NOT NULL, roleid INT NOT NULL, PRIMARY KEY(userid,roleid), CONSTRAINT fk_userid FOREIGN KEY (userid) REFERENCES user(user_id), CONSTRAINT fk_roleid FOREIGN KEY (roleid) REFERENCES role(role_id) ) Please tell me how to solve it..
  6. I just want to check which one is faster (isset or strlen) So , I use this code <?php include 'function.speedster.php'; $username = "myusername"; // Using strlen() $code = "if(strlen($username) > 5);"; // This line is what i want to benchmark speedster($code, 10, 'strlen()'); // Using isset() $code = "if(isset($username[4]));"; // This line is what i want to benchmark speedster($code, 10, 'isset()'); Could you please show me the way to benchmark the speed ?
  7. I changed the isset section into // Using isset() $code = "if(isset('$username[4]'));"; speedster($code, 10, 'isset()'); Then, I print out the code if(isset('s')); But, I don't know why error still occurs. Output : if(strlen('myusername') > 5); The time consumed by strlen() method is 0.000248194 seconds. if(isset('s')); ( ! ) Parse error: syntax error, unexpected ''s'' (T_CONSTANT_ENCAPSED_STRING) in C:xampphtdocsterrytesttestersfunction.speedster.php(14) : eval()'d code on line 1 Call Stack # Time Memory Function Location 1 0.0006 135416 {main}( ) ..strlen()_vs_isset().php:0 2 0.0014 140704 speedster( ) ..strlen()_vs_isset().php:11( ! ) Parse error: syntax error, unexpected quoted-string (T_CONSTANT_ENCAPSED_STRING) in C:xampphtdocsterrytesttestersfunction.speedster.php(14) : eval()'d code on line 1 Call Stack # Time Memory Function Location 1 0.0006 135416 {main}( ) ..strlen()_vs_isset().php:0 2 0.0014 140704 speedster( ) ..strlen()_vs_isset().php:11( ! ) Parse error: syntax error, unexpected quoted-string (T_CONSTANT_ENCAPSED_STRING) in C:xampphtdocsterrytesttestersfunction.speedster.php(14) : eval()'d code on line 1 Call Stack # Time Memory Function Location 1 0.0006 135416 {main}( ) ..strlen()_vs_isset().php:0 2 0.0014 140704 speedster( ) ..strlen()_vs_isset().php:11( ! ) Parse error: syntax error, unexpected quoted-string (T_CONSTANT_ENCAPSED_STRING) in C:xampphtdocsterrytesttestersfunction.speedster.php(14) : eval()'d code on line 1 Call Stack # Time Memory Function Location 1 0.0006 135416 {main}( ) ..strlen()_vs_isset().php:0 2 0.0014 140704 speedster( ) ..strlen()_vs_isset().php:11( ! ) Parse error: syntax error, unexpected quoted-string (T_CONSTANT_ENCAPSED_STRING) in C:xampphtdocsterrytesttestersfunction.speedster.php(14) : eval()'d code on line 1 Call Stack # Time Memory Function Location 1 0.0006 135416 {main}( ) ..strlen()_vs_isset().php:0 2 0.0014 140704 speedster( ) ..strlen()_vs_isset().php:11( ! ) Parse error: syntax error, unexpected quoted-string (T_CONSTANT_ENCAPSED_STRING) in C:xampphtdocsterrytesttestersfunction.speedster.php(14) : eval()'d code on line 1 Call Stack # Time Memory Function Location 1 0.0006 135416 {main}( ) ..strlen()_vs_isset().php:0 2 0.0014 140704 speedster( ) ..strlen()_vs_isset().php:11( ! ) Parse error: syntax error, unexpected quoted-string (T_CONSTANT_ENCAPSED_STRING) in C:xampphtdocsterrytesttestersfunction.speedster.php(14) : eval()'d code on line 1 Call Stack # Time Memory Function Location 1 0.0006 135416 {main}( ) ..strlen()_vs_isset().php:0 2 0.0014 140704 speedster( ) ..strlen()_vs_isset().php:11( ! ) Parse error: syntax error, unexpected quoted-string (T_CONSTANT_ENCAPSED_STRING) in C:xampphtdocsterrytesttestersfunction.speedster.php(14) : eval()'d code on line 1 Call Stack # Time Memory Function Location 1 0.0006 135416 {main}( ) ..strlen()_vs_isset().php:0 2 0.0014 140704 speedster( ) ..strlen()_vs_isset().php:11( ! ) Parse error: syntax error, unexpected quoted-string (T_CONSTANT_ENCAPSED_STRING) in C:xampphtdocsterrytesttestersfunction.speedster.php(14) : eval()'d code on line 1 Call Stack # Time Memory Function Location 1 0.0006 135416 {main}( ) ..strlen()_vs_isset().php:0 2 0.0014 140704 speedster( ) ..strlen()_vs_isset().php:11( ! ) Parse error: syntax error, unexpected quoted-string (T_CONSTANT_ENCAPSED_STRING) in C:xampphtdocsterrytesttestersfunction.speedster.php(14) : eval()'d code on line 1 Call Stack # Time Memory Function Location 1 0.0006 135416 {main}( ) ..strlen()_vs_isset().php:0 2 0.0014 140704 speedster( ) ..strlen()_vs_isset().php:11 The time consumed by isset() method is 0.015677929 seconds. Please help me solve this error
  8. I have changed the username variable into "'myusername'" (single quoted in double quote)But, it doesn't solve the problem and the error occurs.Parse error: syntax error, unexpected ')', expecting :: (T_PAAMAYIM_NEKUDOTAYIM) in C:xampphtdocsterrytesttestersfunction.speedster.php(13) : eval()'d code on line 1Printed out code : if(isset(s));Please help me fix my function.
  9. Thanks for the advice, justsomeguy. Now, I have rewritten the code and it tells me an error (parse error) This is my function <?php function speedster($code="", $repetition=1, $name="this") { $eval_start = microtime(true); for ($i=0; $i < $repetition; $i++) { eval(""); } $eval_time = microtime(true) - $eval_start; $time_start = microtime(true); for ($i=0; $i < $repetition; $i++) { eval($code); } $time_end = microtime(true); $total_time = $time_end - $time_start - $eval_time; printf("<p>The time consumed by $name method is %.9f seconds.</p>", $total_time); } This is how i use it <?php include 'function.speedster.php'; $username = "myusername"; // Using strlen() $code = "if(strlen($username) > 5);"; speedster($code, 10, 'strlen()'); // Using isset() $code = "if(isset($username[4]));"; speedster($code, 10, 'isset()'); And, it gives me this error : Notice: Use of undefined constant myusername - assumed 'myusername' Then, I changed the username variable into "'myusername'" But, it doesn't solve the problem and the error occurs. Parse error: syntax error, unexpected ')', expecting :: (T_PAAMAYIM_NEKUDOTAYIM) in C:xampphtdocsterrytesttestersfunction.speedster.php(13) : eval()'d code on line 1 Please help me fix my function.
  10. The first post has been updated.. Please help me...
  11. I have a php benchmarking function, but it doesn't work as expected. <?php function speedster($arg, $name="") {static $time_start; if($arg == 'start') {echo "<p>The time consumed by $name method is ";$time_start = microtime(true);} elseif ($arg == 'end') {$time_end = microtime(true);$time_ex = $time_end - $time_start;printf("%.9f seconds.</p>", $time_ex);}else {die('Invalid argument');}} This is how i use the code : <?php include 'function.speedster.php'; $password = 'passwordku'; speedster('start','isset()'); if(isset($password[4])); speedster('end'); speedster('start','strlen()'); if(strlen($password) > 5); speedster('end'); And, the result is very different from the one without function (which always tells that isset() is faster than strlen()) <?php $password = 'passwordku'; $timestart = microtime(true); if(isset($password[4])); $timeend = microtime(true); $totaltime = $timeend-$timestart; printf("<p>The time consumed by isset() method is %.9f seconds.</p>", $totaltime) ; $timestart = microtime(true); if(strlen($password) > 5); $timeend = microtime(true); $totaltime = $timeend-$timestart; printf("<p>The time consumed by strlen() method is %.9f seconds.</p>", $totaltime) ;
  12. What is the advantage and disadvantage using persistent connection to MySQL database server ?? When to use it and when not to use it ?
  13. I want to make a child class from the PDO class. I want to count the queries by the parent class, so I make a property called $queries. I'm thinking about if(parent::query) { ++$this->queries }; But, i don't know where to put it. Please, help me.
  14. Yes, i do. So, the illustration is below. I posted an article in my site. The timezone set in the configuration setting is GMT+4 (assume the time is 11:45 A.M.) Then, I want my site visitors in other timezone see that the time i posted the article is adapted by their timezone ( If the man is in GMT+2 timezone, so he will see that the time i posted the article is 9:45 A.M.) Please tell me how to do that Sorry for my bad English skill
  15. Hi.. How to adjust the time by visitors' timezone ? I mean, by my timezone (GMT+4), I posted an article at 11:45 A.M. And, I want my visitor see the time adjusted to his/her timezone. For instance, if a man in GMT+2 see the time, it'll be 09:45 A.M. Thanks in advance
  16. What I don't understand is the difference among exit(), exit(0), exit(123), exit(-1) I don't understand what the integer parameter is for.. Please give me some practical examples.. Thanks for any answers
  17. I want to make a semantic html of a bulletin board (forum) I wonder if the <section> tag is good for categories and I also wonder if <article> tag is good for topics Is it good for me to do that ? You can see my html code at http://jsfiddle.net/terryds/yW85T/
  18. Hi, Please look at http://jsfiddle.net/terryds/H3A4M/4/ When i mouse over the portfolio list item, then mouse over the wordpress theme, the second and third list item ('blue' and 'red') doesn't take up the full width. I mean, the first item's width is the same as its unordered list parent, but the second and the third's width isn't Please tell me how to solve the problem and why that happens ?
  19. But, when i turn it into a block element and give some value of its margin-top, it will leave white area at the top of the page.. Can you tell me how to fix that? Should i just use padding ?
  20. See http://jsfiddle.net/terryds/H3A4M/ The margin-top i want to add isn't working... I've tried the margin-bottom, and it gives me nothing too... Please help me...
  21. HTML <!DOCTYPE html><html><head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="css/style_v2.css"> <title>Far Far Away - A folktale at Faraway Island</title></head><body> <header> <div id="logonslogan"> <a href="#">Well-Designed Blog</a> <p id="slogan">Created by Terry</p> </div> <div id="navnsearch"> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Portfolio</a> <ul> <li><a href="#">Wordpress Theme</a></li> <li><a href="#">Blogger Theme</a></li> </ul> </li> <li><a href="#">Contact</a></li> <li><a href="#">About</a></li> </ul> </nav> <section id="search"> <form action="#"> <input type="search" name="search" id="site_search" placeholder="Enter keywords"> <input type="submit" class="button" id="submit_search"> </form> </section> </div> </header> <section id="categories"> <ul> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">Javascript</a></li> </ul> </section> <section id="blog_posts"> <article> <header> <h1>Far far away</h1> <p>Published <time datetime="2013-12-26 pubdate">December 26, 2013</time> by dummytext</p> </header> <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p> <p>A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. </p> <p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p> <p>The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way.</p> <p>When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek, then</p> <section id="comments"> <h2>Comments</h2> <a class="count">1 comment</a> <ul class="commentlist"> <li class="comment" id="comment_id1"> <div class="thiscomment"> <div class="box"> <img src="images/ava.gif" alt="user1avatar" class="ava"> <h3>User1</h3> <p class="datetime_comment"> <time datetime="2013-12-27" class="date"> December 27, 2013 </time> <span class="time"> 11:33 </span> </p> <div class="commentcontent"> <p>I really enjoyed seeing stories in this site. Keep up the good work !<br> Regards, <br> User1 </p> </div> </div> <div class="toolbar"> <a href="#">Vote Up</a> <a href="#">Vote Down</a> <a href="#">Share</a> </div> </div> </li> </ul> </section> </article> </section> <div id="rightcontent"> <section id="popularPosts"> <hgroup> <h2>Popular posts</h2> <h3>See popular post</h3> </hgroup> <ul class="popularpostslist"> <li class="popularpost"> <img src="images/ava.gif" alt="Lorem Ipsum's post image"> <h4>Lorem Ipsum</h4> <p class="datetime"> <time datetime="2013-12-27">December 27, 2013</time> <span class="time">11:46</span> </p> <p>Unterwegs traf es eine Copy. Die Copy warnte das Blindtextchen, da, wo sie herkäme wäre sie zigmal umgeschrieben worden und alles, was von ihrem Ursprung noch übrig wäre, sei das Wort "und" und das Blindtextchen solle umkehren und wieder in sein eigenes, sicheres Land zurückkehren.Doch alles Gutzureden konnte es nicht überzeugen und so dauerte es nicht lange, bis... <span class="readmore">Read More</span> </p> </li> <li class="popularpost"> <img src="images/ava.gif" alt="postimg"> <h4>Lurem Ipsam</h4> <p class="datetime"> <time datetime="2013-12-27">December 27, 2013</time> <span class="time">11:46</span> </p> <p>Tatarwags traf as aina Copy. Dia Copy warnta das Blindtaxtchan, da, wo sia harkäma wära sia zigmal umgaschriaban wordan Tad allas, was von ihram UrsprTag noch übrig wära, sai das Wort "Tad" Tad das Blindtaxtchan solla umkehren Tad wieder in sein eigenes, sicheres Land zurückkehren.Doch alles Gutzureden konnte es nicht überzeugen Tad so dauerte es nicht lange, bis... <span class="readmore">Read More</span> </p> </li> </ul> </section> <section id="trendingtopics"> <hgroup> <h2>Trending Topics</h2> <h3>See what's booming now</h3> </hgroup> <ul id="trendinglist"> <li class="trending"><a href="#">#LoremIpsum</a></li> <li class="trending"><a href="#">#FarFarAway</a></li> <li class="trending"><a href="#">#KingKnights</a></li> <li class="trending"><a href="#">#DummyMummy</a></li> <li class="trending"><a href="#">#Wallball</a></li> </ul> </section> </div> <footer class="clear" id="footer"> <p>All contents are hand-wroten by <a href="mailto:terrydjony@gmail.com">Terry DS</a></p> <small>All Rights Reserved, 2013 Terry DS©</small> </footer></body></html> CSS /* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}/* The author stylesheet */body { font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Liberation Sans", Verdana, sans-serif; background-color: #E8E8E8;}a { color: inherit; text-decoration: none;}h1 { font-size: 200%;}h2 { font-size: 150%;}h3 { font-size: 133%;}h4 { font-size: 120%;}h5 { font-size: 110%;}body > header { background-color: #333333; position: relative; overflow: hidden;}body > header a, body > header p { color: #FFFFFF;}#logonslogan { float: left;}#navnsearch { background-color: #990100; float: right; width: 55%; overflow: hidden; position: relative;}#navnsearch nav ul { list-style: none; padding: 0 3%; display: inline-table;}#navnsearch nav ul:after { content: ""; clear: both; display: block;}#navnsearch nav ul li { float: left;}#navnsearch nav ul li a { display: block; padding: 1em; margin: 1em; text-align: center;}#navnsearch nav ul li:hover { background-color: #B90504; background-color: rgba(0,0,0,.3);}#navnsearch nav ul li:hover a { box-shadow: 0 0 3px 2px; -webkit-box-shadow: 0 0 3px 2px; -moz-box-shadow: 0 0 3px 2px; border-radius: 50%;}#navnsearch nav ul ul { display: none;}#navnsearch nav ul li:hover > ul { display: block;}#navnsearch nav ul ul { position: absolute; top: 100%;}#navnsearch nav ul ul li { float: none; border-top: 1px solid #6b727c; border-bottom: 1px solid #575f6a; position: relative;}#navnsearch nav ul ul li a { padding: 15px 40px; color: #fff;} #navnsearch nav ul ul li a:hover { background: #4b545f;}#navnsearch nav ul ul ul { position: absolute; left: 100%; top:0;}#navnsearch #search { position: absolute; bottom: 0; right: 2em;}#navnsearch #site_search { padding: .5em;} I made the second unordered list not displayed (display: none), then when i hover the list item of the first unordered list, i want the second unordered list to be display so i give nav ul li:hover > ul { display:block; } But, it doesn't work... The second ul is not displayed when i hover the list item of the first unordered list... Please help me solve the problem...
  22. HTML <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="css/style_v2.css"> <title>Far Far Away - A folktale at Faraway Island</title> </head> <body> <header> <div id="logonslogan"> <a href="#">Well-Designed Blog</a> <p id="slogan">Created by Terry</p> </div> <div id="navnsearch"> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Portfolio</a> <ul> <li><a href="#">Wordpress Theme</a></li> <li><a href="#">Blogger Theme</a></li> </ul> </li> <li><a href="#">Contact</a></li> <li><a href="#">About</a></li> </ul> </nav> <section id="search"> <form action="#"> <input type="search" name="search" id="site_search" placeholder="Enter keywords"> <input type="submit" class="button" id="submit_search"> </form> </section> </div> </header> <section id="categories"> <ul> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">Javascript</a></li> </ul> </section> <section id="blog_posts"> <article> <header> <h1>Far far away</h1> <p>Published <time datetime="2013-12-26 pubdate">December 26, 2013</time> by dummytext</p> </header> <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p> <p>A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. </p> <p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p> <p>The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way.</p> <p>When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek, then</p> <section id="comments"> <h2>Comments</h2> <a class="count">1 comment</a> <ul class="commentlist"> <li class="comment" id="comment_id1"> <div class="thiscomment"> <div class="box"> <img src="images/ava.gif" alt="user1avatar" class="ava"> <h3>User1</h3> <p class="datetime_comment"> <time datetime="2013-12-27" class="date"> December 27, 2013 </time> <span class="time"> 11:33 </span> </p> <div class="commentcontent"> <p>I really enjoyed seeing stories in this site. Keep up the good work !<br> Regards, <br> User1 </p> </div> </div> <div class="toolbar"> <a href="#">Vote Up</a> <a href="#">Vote Down</a> <a href="#">Share</a> </div> </div> </li> </ul> </section> </article> </section> <div id="rightcontent"> <section id="popularPosts"> <hgroup> <h2>Popular posts</h2> <h3>See popular post</h3> </hgroup> <ul class="popularpostslist"> <li class="popularpost"> <img src="images/ava.gif" alt="Lorem Ipsum's post image"> <h4>Lorem Ipsum</h4> <p class="datetime"> <time datetime="2013-12-27">December 27, 2013</time> <span class="time">11:46</span> </p> <p>Unterwegs traf es eine Copy. Die Copy warnte das Blindtextchen, da, wo sie herkäme wäre sie zigmal umgeschrieben worden und alles, was von ihrem Ursprung noch übrig wäre, sei das Wort "und" und das Blindtextchen solle umkehren und wieder in sein eigenes, sicheres Land zurückkehren.Doch alles Gutzureden konnte es nicht überzeugen und so dauerte es nicht lange, bis... <span class="readmore">Read More</span> </p> </li> <li class="popularpost"> <img src="images/ava.gif" alt="postimg"> <h4>Lurem Ipsam</h4> <p class="datetime"> <time datetime="2013-12-27">December 27, 2013</time> <span class="time">11:46</span> </p> <p>Tatarwags traf as aina Copy. Dia Copy warnta das Blindtaxtchan, da, wo sia harkäma wära sia zigmal umgaschriaban wordan Tad allas, was von ihram UrsprTag noch übrig wära, sai das Wort "Tad" Tad das Blindtaxtchan solla umkehren Tad wieder in sein eigenes, sicheres Land zurückkehren.Doch alles Gutzureden konnte es nicht überzeugen Tad so dauerte es nicht lange, bis... <span class="readmore">Read More</span> </p> </li> </ul> </section> <section id="trendingtopics"> <hgroup> <h2>Trending Topics</h2> <h3>See what's booming now</h3> </hgroup> <ul id="trendinglist"> <li class="trending"><a href="#">#LoremIpsum</a></li> <li class="trending"><a href="#">#FarFarAway</a></li> <li class="trending"><a href="#">#KingKnights</a></li> <li class="trending"><a href="#">#DummyMummy</a></li> <li class="trending"><a href="#">#Wallball</a></li> </ul> </section> </div> <footer class="clear" id="footer"> <p>All contents are hand-wroten by Terry DS</p> <small>All Rights Reserved, 2013 Terry DS©</small> </footer> </body> </html> CSS /* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0} /* The author stylesheet */ body { font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Liberation Sans", Verdana, sans-serif; background-color: #E8E8E8; } a { color: inherit; text-decoration: none; } h1 { font-size: 200%; } h2 { font-size: 150%; } h3 { font-size: 133%; } h4 { font-size: 120%; } h5 { font-size: 110%; } body > header { background-color: #333333; position: relative; overflow: hidden; height: 6em; } body > header a, body > header p { color: #FFFFFF; } #logonslogan { float: left; } #navnsearch { background-color: #990100; float: right; width: 55%; overflow: hidden; position: relative; } #navnsearch nav ul { list-style: none; padding: 0 3%; display: inline-table; } #navnsearch nav ul:after { content: ""; clear: both; display: block; } #navnsearch nav ul li { float: left; } #navnsearch nav ul li a { display: block; padding: 1em; margin: 1em; text-align: center; } #navnsearch nav ul li:hover { background-color: #B90504; background-color: rgba(0,0,0,.3); } #navnsearch nav ul li:hover a { box-shadow: 0 0 3px 2px; -webkit-box-shadow: 0 0 3px 2px; -moz-box-shadow: 0 0 3px 2px; border-radius: 50%; } #navnsearch nav ul ul { display: none; } #navnsearch nav ul li:hover > ul { display: block; } #navnsearch nav ul ul { position: absolute; top: 100%; } #navnsearch nav ul ul li { float: none; border-top: 1px solid #6b727c; border-bottom: 1px solid #575f6a; position: relative; } #navnsearch nav ul ul li a { padding: 15px 40px; color: #fff; } #navnsearch nav ul ul li a:hover { background: #4b545f; } #navnsearch nav ul ul ul { position: absolute; left: 100%; top:0; } #navnsearch #search { position: absolute; bottom: 0; right: 2em; } #navnsearch #site_search { padding: .5em; } First i make the second unordered list not displayed (display: none;), then when i hover the list item, the second unordered list should be displayed (display: block) But, when i hover the list item, it doesnt display the second unordered list... Please help me solve the problem ...
  23. So, the best choice is to use float, isn't it ?
  24. Here is my code... I know it's somewhat long, but you may skip it and see the problem at the bottom of this post... HTML <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="css/style_v2.css"> <title>Far Far Away - A folktale at Faraway Island</title> </head> <body> <header> <div id="logonslogan"> <a href="#">Well-Designed Blog</a> <p id="slogan">Created by Terry</p> </div> <div id="navnsearch"> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Portfolio</a> <ul> <li><a href="#">Wordpress Theme</a></li> <li><a href="#">Blogger Theme</a></li> </ul> </li> <li><a href="#">Contact</a></li> <li><a href="#">About</a></li> </ul> </nav> <section id="search"> <form action="#"> <input type="search" name="site_search" placeholder="Enter keywords"> <input type="submit" class="button" id="submit_search"> </form> </section> </div> </header> <section id="categories"> <ul> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">Javascript</a></li> </ul> </section> <section id="blog_posts"> <article> <header> <h1>Far far away</h1> <p>Published <time datetime="2013-12-26 pubdate">December 26, 2013</time> by dummytext</p> </header> <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p> <p>A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. </p> <p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p> <p>The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way.</p> <p>When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek, then</p> <section id="comments"> <h2>Comments</h2> <a class="count">1 comment</a> <ul class="commentlist"> <li class="comment" id="comment_id1"> <div class="thiscomment"> <div class="box"> <img src="images/ava.gif" alt="user1avatar" class="ava"> <h3>User1</h3> <p class="datetime_comment"> <time datetime="2013-12-27" class="date"> December 27, 2013 </time> <span class="time"> 11:33 </span> </p> <div class="commentcontent"> <p>I really enjoyed seeing stories in this site. Keep up the good work !<br> Regards, <br> User1 </p> </div> </div> <div class="toolbar"> <a href="#">Vote Up</a> <a href="#">Vote Down</a> <a href="#">Share</a> </div> </div> </li> </ul> </section> </article> </section> <div id="rightcontent"> <section id="popularPosts"> <hgroup> <h2>Popular posts</h2> <h3>See popular post</h3> </hgroup> <ul class="popularpostslist"> <li class="popularpost"> <img src="images/ava.gif" alt="Lorem Ipsum's post image"> <h4>Lorem Ipsum</h4> <p class="datetime"> <time datetime="2013-12-27">December 27, 2013</time> <span class="time">11:46</span> </p> <p>Unterwegs traf es eine Copy. Die Copy warnte das Blindtextchen, da, wo sie herkäme wäre sie zigmal umgeschrieben worden und alles, was von ihrem Ursprung noch übrig wäre, sei das Wort "und" und das Blindtextchen solle umkehren und wieder in sein eigenes, sicheres Land zurückkehren.Doch alles Gutzureden konnte es nicht überzeugen und so dauerte es nicht lange, bis... <span class="readmore">Read More</span> </p> </li> <li class="popularpost"> <img src="images/ava.gif" alt="postimg"> <h4>Lurem Ipsam</h4> <p class="datetime"> <time datetime="2013-12-27">December 27, 2013</time> <span class="time">11:46</span> </p> <p>Tatarwags traf as aina Copy. Dia Copy warnta das Blindtaxtchan, da, wo sia harkäma wära sia zigmal umgaschriaban wordan Tad allas, was von ihram UrsprTag noch übrig wära, sai das Wort "Tad" Tad das Blindtaxtchan solla umkehren Tad wieder in sein eigenes, sicheres Land zurückkehren.Doch alles Gutzureden konnte es nicht überzeugen Tad so dauerte es nicht lange, bis... <span class="readmore">Read More</span> </p> </li> </ul> </section> <section id="trendingtopics"> <hgroup> <h2>Trending Topics</h2> <h3>See what's booming now</h3> </hgroup> <ul id="trendinglist"> <li class="trending"><a href="#">#LoremIpsum</a></li> <li class="trending"><a href="#">#FarFarAway</a></li> <li class="trending"><a href="#">#KingKnights</a></li> </ul> </section> </div> <footer class="clear" id="footer"> <p>All contents are hand-wroten by <a href="mailto:terrydjony@gmail.com">Terry DS</a></p> <small>All Rights Reserved, 2013 Terry DS©</small> </footer> </body> </html> CSS /* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0} /* The author stylesheet */ body { font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Liberation Sans", Verdana, sans-serif; background-color: #E8E8E8; } a { color: inherit; text-decoration: none; } body > header { background-color: #333333; position: relative; overflow: hidden; } body > header a, body > header p { color: #FFFFFF; } #logonslogan { float: left; } #navnsearch { background-color: #990100; float: right; width: 55%; position: relative; } #navnsearch nav ul { list-style: none; padding: 0 3%; overflow: hidden; margin-top: 1em; position: absolute; left: 0; } #navnsearch ul li { float: left; } #navnsearch ul li a { display: block; padding: 1em; } #navnsearch ul ul { display: none; } #navnsearch ul li:hover > ul { display: block; } #navnsearch #search { position: absolute; right: 0; } What I want actually is like below #navnsearch +------------------------------------------------------------+------------------------------------+------------------------------------+ + #logonnav + #nav + #search + +------------------------------------------------------------+------------------------------------+------------------------------------+ So, i float the #logonnav to the left, and #navnsearch to the right, then make the header overflow:hidden I know that if i float the #nav to the left and #search to the right will solve the problem But, i want to do the trick with positioning ...... The trick i learned is at http://css-tricks.com/absolute-positioning-inside-relative-positioning/ So, I give the #navnsearch { position: relative } #nav {position: absolute; left: 0} #search {position: absolute; right: 0 } But, it makes the #navnsearch and #nav not displayed I know if i give the #navnsearch some height, it will work properly But, I think it's unwise to declare the height of #navnsearch because the height should be automatically sized... Please help me solve this problem in a good way.... I appreciate any answers...
×
×
  • Create New...