j.silver
-
Posts
142 -
Joined
-
Last visited
Content Type
Profiles
Forums
Events
Everything posted by j.silver
-
So does that mean z-index -1 is for hiding elements behind other elements or colors, and that to rank elements in terms of priority for overlapping one should use positive values for z-index?
-
Dear all: I have a header with 60% width occupied by a video, to the right of which is an aside section taking the remaining 40%. The aside section has three items fixed horizontally on top of each other. So the header has four elements in total. To account for possible overlaps between the four elements, I declared a z-index of -1 to the top right element, with the rest elements getting z-index 1 to 3. Then the element with z-index -1 disappeared. I then gave it z-index 1 and gave the others 2-4. Why has z-index -1 caused the element to disappear?
-
Dear all: Below code is for the header part of a responsive page. The header, 275px high, is divided into a video on the left and an aside section on the right. The video takes 60% width, the remaining 40% is occupied by the aside section. The aside comprises from top to bottom: flags area with 15% height, bottom link with 25% height, and an h1 in between, set to auto height to take the remaining height. I set the h1 area to begin at 15% height (height of the flags section) and 28% from the bottom (height of the bottom link plus 3% padding). When I checked the height of h1 using a dashed box, I have noticed that it does not begin from 28px as it should. Would you pls. help me with: [*]making h1 auto area starts from where it should;[*]checking all the CSS styles and fix wherever necessary to accomplish a more sound and professional code that would serve in a responsive page. <!DOCTYPE html><html><head><style>@charset "UTF-8";/******************** Layout (global rules for all sizes) ******************************/body {margin: 0; padding: 0;}.home_page_header header a.bottom_link {display: block; position: absolute; background-position: 0px 0px; background-repeat: no repeat;}body {color: #575c7a; line-height: 1.5em; font-family: Arial; font-size: 14px; /* base font*/background: grey repeat-x 0px 0px;}.page {max-width: 980px; margin: 0px auto 0px auto; position: relative; background-color: #fff;}/************************ Layout Large Screen (default for older browsers) ****************//*************************Start Main Header ***********************/.home_page_header {height: 275px; margin: 0px auto;}.home_page_header header {height: 100%; background-size: 980px 275px; background-color: white;}/**********************************Video *************************************************/.mnvid {float: left; width: 60%; height: 100%; margin: 0px; vertical-align: middle;}/********************************Aside Formating***************************/.home_page_header aside {width: 40%; height: 100%; background-color: white; float: left; position:relative;}/******************Aside Language***********************************/.home_page_header aside .lang {display: block; position: absolute; left: 0; right: 0; top: 0; height: 15%; padding: 0px;}/**********************************Aside h1*****************************************/.home_page_header aside h1 {display: block; position: absolute; left: 0; right: 0; top: 15%; bottom: 28%; height: auto; padding: 5% 0 0 0; line-height: 150%; text-align: center; font-size: 2em; font-style: italic;color: #000; border: 1px dashed orange;}/********************Aside Bottom Link**********************************************/.home_page_header aside .bottom_link { position: absolute; left: 0; right: 0; bottom: 0; height: 25%;padding: 3%; font-size: 2em; font-weight: bold; background-color: grey;border-radius: 10px; /*to make rounded corner*/-moz-border-radius: 10px; /*to make rounded corner visible in Mozilla*/-webkit-border-radius: 10px;}/*to make rounded corner visible in browsers supporting webkit*/ .home_page_header aside .bottom_link p {position: absolute; /*to vertically and horizontally center the text*/ top: 50%; /*to vertically and horizontally center the text*/left: 50%; /*to vertically and horizontally center the text*/ margin-right: -50%; /*to vertically and horizontally center the text*/transform: translate(-50%, -50%); /*to vertically and horizontally center the text*/}.home_page_header aside .bottom_link p a {text-decoration: none; text-align: center;color: #FFF;padding: 20px; /*allows activating the link even when the cursor is far from the text. Not affecting total height of aside, so not counted. */}.home_page_header aside .bottom_link p a:hover {color: #FFB280;}</style></head><body><!--Start of main page container--><div class = "page"> <!--Start of main header--><div class = "home_page_header"> <header> <iframe class="mnvid" src="[url=https://www.youtube-nocookie.com/embed/Wc8tidOjhUY?rel=0]https://www.youtube-nocookie.com/embed/Wc8tidOjhUY?rel=0[/url]" frameborder="0" allowfullscreen></iframe><aside><div class="lang">flags here</div><h1>Our Unique Product <span><!--<p><br>-->Tastes Differently</span></h1><div class="bottom_link"><p><a href="#">Free Trial</a></p></div></aside></header></div></div></body></html>
-
Many thanks Ingolme
-
Dear All: In a W3school's tutorial is this tip: Tip: When aligning elements with position, always define margin and padding for the <body> element. This is to avoid visual differences in different browsers. Do we still need to do this if we have already declared the margin and padding for the whole page, e.g. *{margin: 0; padding:0;} and why?
-
If CSS gradients are not helping, you may want to include more code and elaborate a bit on what you exactly want to achieve.
-
Many thanks, Dsonesuk.
-
Yes, I see your point. I was using html commenting in a CSS code. It's ok now. However, I am still wondering, how the html comment managed to restore text decoration back?
-
Dear all: Below is a sample nav formatting from Wschools. In playing with it, I have noticed that when I comment out the text-decoration property of the anchor link, links get underlined and their color changes to blue, which is expected. However, after this line of code, there is another line that changes color to white. Why is this last line not overriding the blue color? <!DOCTYPE html> <html> <head> <style> ul {float: left; width: 100%; padding: 0; margin: 0; list-style-type: none;} a {float: left; width: 6em; text-decoration: none; color: white; background-color: purple; padding: 0.2em 0.6em; border-right: 1px solid white;} a:hover {background-color: fuchsia;} li {display: inline;} </style> </head> <body> <ul> <li><a href="#">Link one</a></li> <li><a href="#">Link two</a></li> <li><a href="#">Link three</a></li> <li><a href="#">Link four</a></li> </ul> <p>In the example above, we let the ul element and the a element float to the left. li elements will be displayed as inline elements (no line break before or after the element). This forces the list to be on one line. The ul element has a width of 100% and each hyperlink in the list has a width of 6em (6 times the size of the current font). We add some colors and borders to make it more fancy. </p> </body> </html>
-
<p class="name">xxx.com <span>| Thank you</span></p> targets the second part. If you want to target xxx.com only, you wrap the span around it, like: <p class="name"><span>xxx.com</span>| Thank you</p>
-
This is one way: <!DOCTYPE html> <html> <head> </head> <style> .navbar-header .name span {whatever properties} </style> <body> <div class="navbar-header"> <p class="name">xxx.com <span>| Thank you</span></p> </div> </body> </html>
-
Many thanks, dsonesuk, for your help. I learned a lot from it.
-
Dear all, I have a code that is almost complete, but I am still struggling with header elements, and I am in desperate need for help. The site is using the box model and is responsive; Header area is 980px in width, 275px in height. A YouTube video is linked, occupies 60% of the left width and takes the full height (275px) I am struggling with the remaining 40%, in which I want: At its bottom, a horizontal link box: height 75px, width 40% of the window, with 'Try the Offer' text. Above the horizontal link two h1 lines on top of each other. Top h1 reads: Experience a Unique Offer. Below h1 reads: Try it First. At the top right corner, vertical flags for language links (e.g. US, France, Germany, etc.), all floating to the right. I tried many attempts, but all failed. I would appreciate your help. Below html and css code. <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content = "text/html; charset=UTF-8" /> <meta name = "viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0" /> <title><?php // Use a default page title if one wasn't provided... if (isset($page_title)) { echo $page_title; } else { echo 'Select From Our Amazing Producs!'; } ?></title> <link rel = "stylesheet" type="text/css" href="css/screen_layout_large.css" /> </head> <body> <!--Start of main page container--> <div class = "page"> <!--Start of main header--> <div class = "home_page_header"> <!--header of other pages is different --> <header> <iframe class = "mnvid" src="https://www.youtube-nocookie.com/embed/KSdk6poA4Ig?rel=0" frameborder="0" allowfullscreen></iframe> </header> <div> </div> </div> </body> </html> @charset "UTF-8"; * { margin: 0px; padding: 0px; } body { color: #575c7a; line-height: 1.5em; font-family: Arial; font-size: 14px; /* base font*/ background: #515673 repeat-x 0px 0px; } .page { max-width: 980px; margin: 0px auto 0px auto; position: relative; background-color: #fff; } .home_page_header { margin: 0px auto; height: 275px; } header { height: 275px; background-size: 980px 275px; background-color: #a6430a; } .mnvid { /*main video*/ width: 60%; height: 275px; margin: 0px; display: inline; vertical-align: middle; }
-
Dear all: I need to select a suitable payment solution provider (e.g. paypal, authorize.net, etc.) for my site. I would therefore appreciate any shared experience on pros and cons of each payment solution provider, recomendations, and order of preference, etc. Best regards,
-
Dear all: I have uploaded a YouTube video succssfully into my website using YouTube's iframe preferred tag. The site is coded using html5. I donot want to show any sugessted videos after the main video finishes, therefore, I did the following: clicked on share under the YouYube video; clicked embed; uncheked the 'Show suggested videos when the video finishes' check box. While the video loads and runs well, there are still videos suggested after it finishes. I would appreciate any help in resolving this issue. Best regards,
-
Dear Justomeguy, that's why I got puzzled, tried again and again but that's what I had been getting all the time, and because I couldn't find a reason, I thought somebody else might share their experience and finding.
-
I forget to state what result I was getting: the result of the last query only.
-
No, both the person in the tutorial and myself were using PhpMyAdmin.
-
Xampp 1.8.3 (sorry for the typo)
-
One example of a multiple query, which runs fine in my server is: SELECT city, name FROM customers However, another way (though not a better way) of writing same has been running fine in a tutorial I saw, but is not running in my case: SELECT city FROM customers; SELECT name FROM customers; I would appreciate any thought on why it runs for that person and not for me, noting that there was no typos in my queries, which I attempted many times. MySQL Server version: 5.6.16, Xampp 1.8.33 for windows.
-
Dear all, some help will be highly appreciated. I have a JS code that has a form for first name and last name. Ajax then communicates with a PHP script and gets back a message from PHP that thanks the user by stating the first and last names of user. The PHP message will show at the bottom of the form without having the page to refresh. The PHP message ensures a successful communication between JS and PHP via Ajax. The JS script:<!DOCTYPE html><html lang="en"><head><script>function ajax_post() {//create our XMLHttpRequest objectvar hr = new XMLHttpRequest();//create some variables we need to send to our PHP filevar url = "my_parse_file.php"; //name of the PHP parsing script.var fn = document.getElementById("first_name").value;var ln = document.getElementById("last_name").value;var vars = "firstname="+fn+"&lastname="+ln; //variables to be sent to PHP scritp.hr.open("post", url, true); //using the open method on XMLHttpRequest object.hr.setRequestHeader("Content_type", "application/x-www-form-urlencoded");// access the onreadystatechange event for the XMLHttpRequest object.hr.onreadystatechange = function() {if (hr.readyState == 4 && hr.status == 200) {var return_data = hr.responseText;document.getElementById("status").innerHTML = return_data;}}// send the data to PHPhr.send(vars);document.getElementById("status").innerHTML = "processing...";}</script></head><body><h2>Ajax Post to PHP and Get Return Data</h2>Your First Name: <input id="first_name" name="first_name" type="text" /><br /><br />Your Last Name: <input id="last_name" name="last_name" type="text" /><br /><br /><input name="myBtn" type="submit" value="Submit Data" onClick="javascript:ajax_post();" /><br /><br /><div id="status"></id></script></body></html>The PHP script:<?phpecho 'Thank you ' . $_POST['firstname'] . ' ' . $_POST['lastname'] . ',says the PHP file.';?>I receive no message back from the PHP script as desired, only the word "processing...".As part of the debugging, I inserted:document.write("Ready State = "+hr.readyState + " Ready Status = "+hr.status);after: hr.onreadystatechange = function() {The message I got was: Ready State = 4 Ready Status = 0.I thought it meant changing the 200 to 0, but still didn't work.My system: Apache, PHP 5.5.9, Windows 64-bit OS, Windows 7
-
Many thanks, Ingolme, for your guidance and the valuable info.
-
Many thanks, Ingolme, for telling me about JSON. As I am unfamiliar with both XML and JSON, I should begin learning one of the two, and I would appreciate some guidance on which to pick. To begin with, the application I am intending to use the language with is:Retrieve two or more data types from one or more MySQL tables into an embedded Google map, e.g., apparel stores, jewelry stores, etc. Apparel stores should have on the map a color and character different than those of the jewelry's to allow for easier recognition. Same data should be also listed separately elsewhere next to the map, in case the map fails to load sometimes.I've gone through some comparisons of the two, and it is hard to find a concrete preference. The website of JSON offers a comparison (http://www.json.org/xml.html). Since their product is in question, it's hard to completely rely on their comparison. However, these two lines from the said website are of very importance:1)JSON is a better data exchange format. XML is a better document exchange format. Use the right tool for the right job.2)JSON does not provide any display capabilities because it is not a document markup language.My questions on the last two lines are:A) I think the data retrieved from the DB into the Google map and arranged as I wanted them to be, as addressed above are data, not document. Is it so? Is my to-be-displayed on the map data falls under the incapability of JSON as in item 2 above?C) I've noticed that XML is still the standard of W3C, which might be a major advantage over JSON. However, everybody knows that, while XMLA is still the standard, HTML5 is the future standard and alternative. Is anyone aware that, while XML is still the standard, JSON might be the future replacement?Regret the lengthy post, but I needed to clear up those points in order to avoid picking up the wrong or soon-to-be obsolete choice.
-
Dear Ingolme, one comprehensive source is:https://developers.google.com/maps/articles/phpsqlajax_v3
-
Dear all. I am planning to embed a google map into a PHP script. The script retrieves data from a MySQL DB into the map. All sources I have come across so far demand the use of XML as an intermediary between MySQL and the map. There is the possibility of writing the map page as a PHP file and outputting JS for markers to be created in the map, but this is claimed to be more problematic method. Is there an easier way to achieve the above without XML or JS?
