Jump to content

terryds

Members
 View Profile  See their activity

  • Posts

    174

  • Joined

  • Last visited

 Content Type 

Posts posted by terryds

    How to auto-adjust time by users' timezone ?

    in PHP

    Posted

    Most systems give the user a dropdown with a list of time zones to choose from. The settings for the user are saved in a database. When the user is logged in, the user's settings are loaded from the database. Dates on the pages are shown in the user's timezone using methods such as DateTime::setTimeZone()

     

    That's not something most websites do. If you log out of the forum now you'll see that the post times are shown in UTC time.

     

    If you want to figure out a user's time offset you can try Geolocation or have Javascript send their local time so you can compare it to the server's time. You can check the offset in hours between the the client and the server and add that to the dates before showing them. Some time zones have half-hour offsets, so you would probably have to take that into account as well.

     

    Thanks for your answer :)

    FOREIGN KEYs as well as PRIMARY KEYs

    in SQL

    Posted

    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..

    Please help me fix my benchmark snippet

    in PHP

    Posted · Edited by terryds

    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 ?

    Please help me fix my benchmark snippet

    in PHP

    Posted · Edited by terryds

    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

    Please help me fix my benchmark snippet

    in PHP

    Posted · Edited by terryds

    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.

    Please help me fix my benchmark snippet

    in PHP

    Posted

    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.

     

    Please help me fix my benchmark snippet

    in PHP

    Posted · Edited by terryds

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

    Appending the parent function in OOP ?

    in PHP

    Posted

    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.

     

    How to adjust the time by the visitors' timezone

    in PHP

    Posted · Edited by terryds

    Do you want to assume their computer has the correct local time?

    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

    How to adjust the time by the visitors' timezone

    in PHP

    Posted

    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

    The parameter of exit?

    in PHP

    Posted

    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 :)

    Dropdown menu not working

    in CSS

    Posted

    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...

    Dropdown menu not working

    in CSS

    Posted

    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 ...

    Position trick not working

    in CSS

    Posted · Edited by terryds

    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...