Search the Community
Showing results for tags 'html5'.
-
Hi all, I'm working on a button which has a gradient from top to bottom using the colors #0072ba & #004881. I would like to create a 2px border around this button with the same gradient but reverse... so top being #004881. How can I do this using CSS3 or any other methods. The code to the button is attached? Any help would be much appreciated a.CSS3_Button { position:relative; left:65px; top:100px; display: inline-block; border: 2px solid blue; padding: 8px 18px; width:590px; height:120px; z-index:1111111; text-decoration: none; color: #FFFFFF; font-size: 13px; font-weight: bold; font-family: GillSans; margin-bottom:35px; -webkit-box-shadow: 1px -1px 4px rgba(50, 50, 50, 0.66); -moz-box-shadow: 1px -1px 4px rgba(50, 50, 50, 0.66); box-shadow: 1px -1px 4px rgba(50, 50, 50, 0.66); }
-
I've been trying to solve this for the past 2 days! Please help. I get this message while trying to validate the code. bad value %20images/image_name%20 for attribute src on element img: Whitespace in path component. Use %20 in place of spaces. There is no white spave in the lines below. OR is there? I have put %20 in all white space if (is_file(MM_UPLOADPATH . $row['picture']) . filesize(MM_UPLOADPATH . $row['picture']) > 0){echo'%20<a href="pictures.php">%20<img src="%20' . MM_UPLOADPATH . $row['picture'] . '%20" alt="sevenoaks latest pic" style="width:75px; maxheight:110px; margin:5px; padding:5px;"></a>';
-
so I hope some of you understand kinda whats going on just from the title... mainly of course I have a content element that is going outside the area of the container for it. I have a screen shot of whats going on. now I've tried lots of things to see if I can fix this issue but I am still stumped after a few weeks trying to deal with this. now I know lots of people get this every once in a while, just for me i am lost in what to do about this issue, yes its a tabbed content box all in CSS, no JS or JQ for the tab. For the code, there is a lot involved in this one page, I will post everything to deal with this one page excluding my connectiong script for mysql Main Page Code: <!doctype html> <!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]--> <!--[if IE 7]> <html class="ie7 oldie"> <![endif]--> <!--[if IE 8]> <html class="ie8 oldie"> <![endif]--> <!--[if gt IE 8]><!--> <html> <!--<![endif]--> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Pure Audio Centre</title> <link href="boilerplate.css" rel="stylesheet" type="text/css"> <link href="layout.css" rel="stylesheet" type="text/css"> <link href="style.css" rel="stylesheet" type="text/css"> <link href="menu.css" rel="stylesheet" type="text/css"> <link href="test.css" rel="stylesheet" type="text/css"> <!--[if lt IE 9]> <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <script src="respond.min.js"></script> </head> <body> <div class="gridContainer clearfix"> <div id="Header"><img src="images/logo.png" style="padding-left:15px;" /> <div class="head_info"> Phone: (250) 871-PURE(7873)<br /> #2 - 720 30th STREET<br /> Courtenay BC, V9N 7S7 </div> </div> <div id="Menu"> <nav> <a href="index.php"><div class="home"></div></a><div class="dots"><img src="images/menu_dots.png"></div> <a href="products.php"><div class="products2"></div></a><div class="dots"><img src="images/menu_dots.png"></div> <a href="specials.php"><div class="specials"></div></a><div class="dots"><img src="images/menu_dots.png"></div> <a href="services.php"><div class="services"></div></a><div class="dots"><img src="images/menu_dots.png"></div> <a href="contact.php"><div class="contact"></div></a> </nav> </div> <div id="Menu2"> Home : Products : Speacials : Services : Contact </div> <div id="contain"> <div id="leftbar"> <div class="block"> JL Audio Stealthbox <br /> <img src="images/companylogo/x01_447006.png" width="150px" /><br /> <img src="images/companylogo/JL-Audio-Stealth-Box.png" width="150px" /> </div> </div> <div id="Main"> <div class="block-main"> <center> <?php echo '<div class="content">'; include 'connect.php'; $page = $_GET['page']; $get_company = $_GET['name']; $model = $_GET['model']; $get_id = $_GET['id']; switch($page) { case "product_info": echo '<div class="bread"><div id="pad_content"><a href="products.php">Products</a> > <a href="products.php?page=company&name=' . $get_company . '">' . $get_company . '</a> > ' . $model . '</div></div>'; echo '<div class="c_header"><div id="pad_content">' . $get_company . ' ' . $model . '</div></div>'; echo '<div class="c_taber"><div id="pad_content">'; echo '<a href="images/product/'.$get_company.'-'.$model.'.png"><img src="images/product/'.$get_company.'-'.$model.'-thumb.png"></a>'; $tab_results = mysqli_query($con,"SELECT * FROM product_info WHERE tabs='" . $get_id . "'") or die('Tab Results error: '. mysqli_error($con)); if(!$tab_results){ echo 'No Information at This Time. Please Come Back Later.'; } ?> <div class="container-tab"> <article class="tabs"> <?php while($row = mysqli_fetch_array($tab_results)) { extract($row); ?> <span id="<?php echo $id; ?>" class="anchor"></span> <div class="panel"> <a class="tab-link" href="#<?php echo $id; ?>"><?php echo $tab_name; ?></a> <div> <?php echo $content; ?> </div> </div> <?php } ?> </article> </div> <?php echo '</div></div>'; echo '<div class="c_date"><div id="pad_content"></div></div>'; break; case "company": echo '<div class="bread"><div id="pad_content"><a href="products.php">Products</a> > ' . $get_company . ' ></div></div>'; echo '<div class="c_header"><div id="pad_content">'. $get_company .' Products</div></div>'; echo '<div class="c_content"><div id="pad_content">'; $product_result = mysqli_query($con,"SELECT * FROM products WHERE company='". $get_company ."'") or die('Result error: '. mysqli_error($con)); $row_product = mysqli_num_rows($product_result); if($row_product == 0){ echo 'No Information at This Time. Please Come Back Later.'; } while($row = mysqli_fetch_array($product_result)) { extract($row); echo '<a href="products-2.php?page=product_info&name=' . $get_company . '&model=' . $model . '&id=' . $id . '">' . $product_name . '</a>'; } echo '</div></div>'; echo '<div class="c_date"><div id="pad_content"></div></div>'; break; default: echo '<div class="bread"><div id="pad_content">Products ></div></div>'; echo '<div class="c_header"><div id="pad_content">Manufacture</div></div>'; echo '<div class="c_content"><div id="pad_content">'; $company_result = mysqli_query($con,"SELECT * FROM manufacture") or die('Result error: '. mysqli_error($con)); $row_company = mysqli_num_rows($company_result); if($row_company = 0){ echo 'No Information at This Time. Please Come Back Later.'; } while($row = mysqli_fetch_array($company_result)) { extract($row); echo '<a href="products-2.php?page=company&name=' . $company . '">' . $company . '</a> : '; } echo '</div></div>'; echo '<div class="c_date"><div id="pad_content"></div></div>'; } echo '</div>'; ?> </center> </div> </div> <div id="rightbar"> <div class="block"> Custom Boxes<br /> <img src="images/companylogo/883396_496430483737520_2127125254_o.png" width="150px" /><br /> <img src="images/companylogo/886750_491317497582152_1975245904_o.png" width="150px" /><br /> SPL Meter!!<br /> <img src="images/companylogo/901979_496429530404282_1320296857_o.png" width="150px" /> </div> </div> </div> <div id="Featured"> <div class="fbox1"><img src="images/companylogo/Pacific-Accessory-Corp-logo.png" width="160px" /></div> <div class="fbox2"><img src="images/companylogo/focal-logo-pack1.png" /></div> <div class="fbox2"><img src="images/companylogo/Metra-logo.png" /></div> <div class="fbox1"><img src="images/companylogo/morel-logo.png" /></div> </div> <div id="Footer">2013 Pure Audio Centre All Rights Reserved.<br />Designed & Developed by GuberX.</div> </div> </body> </html> Boilerplate.css @charset "utf-8"; /* ========================================================== normalize ==========================================================*/ * { -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ } /* ============================================================================= HTML5 display definitions ========================================================================== */ article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; } audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; } audio:not([controls]) { display: none; } [hidden] { display: none; } /* ============================================================================= Base ========================================================================== */ html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } body { margin: 0; font-size: 13px; line-height: 1.231; } body, button, input, select, textarea { font-family: sans-serif; color: #222; } /* ============================================================================= Links ========================================================================== */ a { color: #00e; } a:visited { color: #551a8b; } a:hover { color: #06e; } a:focus { outline: thin dotted; } /* Improve readability when focused and hovered in all browsers: h5bp.com/h */ a:hover, a:active { outline: 0; } /* ============================================================================= Typography ========================================================================== */ abbr[title] { border-bottom: 1px dotted; } b, strong { font-weight: bold; } blockquote { margin: 1em 40px; } dfn { font-style: italic; } hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } ins { background: #ff9; color: #000; text-decoration: none; } mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; } /* Redeclare monospace font family: h5bp.com/j */ pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; } /* Improve readability of pre-formatted text in all browsers */ pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; } q { quotes: none; } q:before, q:after { content: ""; content: none; } small { font-size: 85%; } /* Position subscript and superscript content without affecting line-height: h5bp.com/k */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } /* ============================================================================= Lists ========================================================================== */ ul, ol { margin: 1em 0; padding: 0 0 0 40px; } dd { margin: 0 0 0 40px; } nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; } /* ============================================================================= Embedded content ========================================================================== */ img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; } /* * Correct overflow not hidden in IE9 */ svg:not(:root) { overflow: hidden; } /* ============================================================================= Figures ========================================================================== */ figure { margin: 0; } /* ============================================================================= Forms ========================================================================== */ form { margin: 0; } fieldset { border: 0; margin: 0; padding: 0; } /* Indicate that 'label' will shift focus to the associated form element */ label { cursor: pointer; } /* * 1. Correct color not inheriting in IE6/7/8/9 * 2. Correct alignment displayed oddly in IE6/7 */ legend { border: 0; *; padding: 0; } /* * 1. Correct font-size not inheriting in all browsers * 2. Remove margins in FF3/4 S5 Chrome * 3. Define consistent vertical alignment display in all browsers */ button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; } /* * 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet) * 2. Correct inner spacing displayed oddly in IE6/7 */ button, input { line-height: normal; *overflow: visible; } /* * Reintroduce inner spacing in 'table' to avoid overlap and whitespace issues in IE6/7 */ table button, table input { *overflow: auto; } /* * 1. Display hand cursor for clickable form elements * 2. Allow styling of clickable form elements in iOS */ button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; } /* * Consistent box sizing and appearance */ input[type="checkbox"], input[type="radio"] { box-sizing: border-box; } input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /* * Remove inner padding and border in FF3/4: h5bp.com/l */ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /* * 1. Remove default vertical scrollbar in IE6/7/8/9 * 2. Allow only vertical resizing */ textarea { overflow: auto; vertical-align: top; resize: vertical; } /* Colors for form validity */ input:valid, textarea:valid { } input:invalid, textarea:invalid { background-color: #f0dddd; } /* ============================================================================= Tables ========================================================================== */ table { border-collapse: collapse; border-spacing: 0; } td { vertical-align: top; } /* ==|== primary styles ===================================================== Author: ========================================================================== */ /* ==|== non-semantic helper classes ======================================== Please define your styles before this section. ========================================================================== */ /* For image replacement */ .ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; } .ir br { display: none; } /* Hide from both screenreaders and browsers: h5bp.com/u */ .hidden { display: none !important; visibility: hidden; } /* Hide only visually, but have it available for screenreaders: h5bp.com/v */ .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } /* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */ .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } /* Hide visually and from screenreaders, but maintain layout */ .invisible { visibility: hidden; } /* Contain floats: h5bp.com/q */ .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { zoom: 1; } /* ==|== print styles ======================================================= Print styles. Inlined to avoid required HTTP connection: h5bp.com/r ========================================================================== */ @media print { * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */ a, a:visited { text-decoration: underline; } a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */ pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } thead { display: table-header-group; } /* h5bp.com/t */ tr, img { page-break-inside: avoid; } img { max-width: 100% !important; } @page { margin: 0.5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } } DW CS6 FluidGrid "Layout.css" @charset "utf-8"; /* Simple fluid media Note: Fluid media requires that you remove the media's height and width attributes from the HTML http://www.alistapart.com/articles/fluid-images/ */ /* Dreamweaver Fluid Grid Properties ---------------------------------- dw-num-cols-mobile: 5; dw-num-cols-tablet: 8; dw-num-cols-desktop: 10; dw-gutter-percentage: 25; Inspiration from "Responsive Web Design" by Ethan Marcotte http://www.alistapart.com/articles/responsive-web-design and Golden Grid System by Joni Korpi http://goldengridsystem.com/ */ /* Mobile Layout: 480px and below. */ .gridContainer { margin: 0 auto; width: 96%; } #Header { clear: both; float: left; margin-left: 0; width: 100%; display: block; } #Menu { clear: both; float: left; margin-left: 0; width: 100%; display: none; } #Menu2 { clear: both; float: left; width: 100%; display: block; text-align: center; } #Footer { clear: both; float: left; margin-left: 0; width: 480px; display: block; } #Main { clear: both; float: left; margin-left: 0; width: 100%; display: block; } #leftbar { clear: both; float: left; display: none; } #rightbar { clear: both; float: left; display: none; } #Featured { clear: both; float: left; margin-left: 0; width: 100%; display: block; } .feature { display: none; } .fbox1 { display: none; } .fbox2 { display: none; } .head_info { display: block; float: right; margin: 30px 30px 0 0; font-weight: bold; } /* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */ @media only screen and (min-width: 768px) { .gridContainer { width: 768px; margin: 0 auto; } #Header { clear: both; float: inherit; margin: 0 auto; width: 768px; display: block; background: url(images/header_top.png) no-repeat; height: 141px; } #Menu { clear: both; float: inherit; margin: 0 auto; width: 768px; display: block; background:url(images/menu_bg.png) no-repeat; height: 78px; text-align: center; } #Menu2 { clear: both; float: left; margin: 0 auto; display: none; } #Footer { clear: both; float: inherit; margin: 0 auto; height: 73px; width: 768px; display: block; background:url(images/main_box_footer-2.png) no-repeat; text-align: center; padding-top: 20px; } #Main { clear: none; margin: 0; width: 768px; min-height: 450px; display: table-cell; background: url(images/main_box_top-2.png) no-repeat; } #leftbar { clear: none; display: none; } #rightbar { clear: none; display: none; } #Featured { clear: both; float: inherit; margin: 0 auto; width: 728px; display: block; } #contain { width: 768px; margin: 0 auto; } .feature { display: block; width: 708px; height: 188px; background: url(images/feature_box.png) no-repeat; } .fbox1 { display: inline-block; background: url(images/mini_box_blue.png) no-repeat; width: 179px; height: 179px; } .fbox2 { display: inline-block; background: url(images/mini_box_white.png) no-repeat; width: 179px; height: 179px; } .head_info { display: block; float: right; margin: 30px 30px 0 0; font-weight: bold; } } /* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */ @media only screen and (min-width: 1128px) { .gridContainer { width: 1128px; margin: 0 auto; } #Header { clear: both; float: inherit; margin: 0 auto; width: 768px; display: block; background: url(images/header_top.png) no-repeat; height: 141px; } #Menu { clear: both; float: inherit; margin: auto; width: 768px; display: block; background:url(images/menu_bg.png) no-repeat; height: 78px; text-align: left; } #Menu2 { clear: both; float: left; margin: 0 auto; display: none; } #Footer { clear: both; float: inherit; margin: 0 auto; height: 73px; width: 768px; display: block; background:url(images/main_box_footer-2.png) no-repeat; text-align: center; padding-top: 20px; } #Main { clear: none; margin: 0; width: 768px; min-height: 450px; display: block; background: url(images/main_box_top-2.png) no-repeat; } #leftbar { clear: none; margin: 0; width: 180px; max-width: 180px; min-height: 450px; display: table-cell; background: url(images/side_box_top.png) no-repeat; text-align: center; } #leftbar img { margin-top: 5px; margin-bottom: 5px; border-radius: 10px; box-shadow: 2px 2px 5px #000000; } #rightbar img { margin-top: 5px; margin-bottom: 5px; border-radius: 10px; box-shadow: 2px 2px 5px #000000; } #rightbar { clear: none; margin: 0; width: 180px; max-width: 180px; min-height: 450px; display: table-cell; background:url(images/side_box_top.png) no-repeat; text-align: center; } #Featured { clear: both; float: inherit; margin: 0 auto; width: 728px; height: 179px !important; display: block; } #contain { width: 1128px; margin: 0 auto; } .feature { display: block; position: relative; width: 708px; height: 188px; background: url(images/feature_box.png) no-repeat; } .fbox1 { display: inline-block; position: relative; background: url(images/mini_box_blue.png) no-repeat; width: 179px; height: 179px; line-height: 171px; text-align: center; } .fbox2 { display: inline-block; position: relative; background: url(images/mini_box_white.png) no-repeat; width: 179px; height: 179px; line-height: 171px; text-align: center; } .head_info { display: block; float: right; margin: 30px 30px 0 0; font-weight: bold; } } Style.css /* CSS Document */ body { background: #FAA71A url(images/main_bg.png) no-repeat top center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; font-family: Helvetica, Arial, sans-serif; } .block-main { width: 750px; margin: 8px 12px; } .block { width: 156px; margin: 8px 12px; } .bad { cursor:not-allowed; } .contactinfo { display: inline-block; float: left; } nav { text-align: center; } nav .dots { display: inline-block; position: relative; } .content { display: block; width: 708px; font-weight: bold; text-align: left; padding: 0; } .content .c_header { display: inline-block; background: url(images/t_content.png) no-repeat top; height: 45px; width: 708px; font-size: 18px; line-height: 45px; padding: 0; } .content .c_content { display: inline-block; background: url(images/c_content.png) repeat-y center; width: 708px; text-indent: 2em; padding: 0; height: 100%; } .content .c_taber { display: inline-block; background: url(images/c_content.png) repeat-y center; width: 708px; padding: 0; height: 100%; } .content .c_date { display: inline-block; background: url(images/b_content.png) no-repeat bottom; height: 45px; width: 708px; text-align: right; padding: 0; } .content .bread { display: inline-block; width: 708px; padding: 0; } #pad_content, #pad_content p { padding-top: 0px; padding-left: 12px; padding-right: 12px; padding-bottom: 0; word-spacing: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } Menu.css /* Menu */ nav .home { display: inline-block; position: relative; background: url(images/menu/home.png) no-repeat; background-position: 0 0; width: 85px; height: 33px; top: 12px; } nav .home:hover { background-position: 0 -33px; } nav .products { display: inline-block; position: relative; background: url(images/menu/products.png) no-repeat; background-position: 0 0; width: 148px; height: 33px; top: 12px; } nav .products:hover { background-position: 0 -33px; } nav .specials { display: inline-block; position: relative; background: url(images/menu/specials.png) no-repeat; background-position: 0 0; width: 131px; height: 33px; top: 12px; } nav .specials:hover { background-position: 0 -33px; } nav .services { display: inline-block; position: relative; background: url(images/menu/services.png) no-repeat; background-position: 0 0; width: 134px; height: 33px; top: 12px; } nav .services:hover { background-position: 0 -33px; } nav .contact { display: inline-block; position: relative; background: url(images/menu/contact.png) no-repeat; background-position: 0 0; width: 128px; height: 33px; top: 12px; } nav .contact:hover { background-position: 0 -33px; } nav .home2 { display: inline-block; position: relative; background: url(images/menu/home.png) no-repeat; background-position: 0 -66px; width: 85px; height: 33px; top: 12px; } nav .home2:hover { background-position: 0 -33px; } nav .products2 { display: inline-block; position: relative; background: url(images/menu/products.png) no-repeat; background-position: 0 -66px; width: 148px; height: 33px; top: 12px; } nav .products2:hover { background-position: 0 -33px; } nav .specials2 { display: inline-block; position: relative; background: url(images/menu/specials.png) no-repeat; background-position: 0 -66px; width: 131px; height: 33px; top: 12px; } nav .specials2:hover { background-position: 0 -33px; } nav .services2 { display: inline-block; position: relative; background: url(images/menu/services.png) no-repeat; background-position: 0 -66px; width: 134px; height: 33px; top: 12px; } nav .services2:hover { background-position: 0 -33px; } nav .contact2 { display: inline-block; position: relative; background: url(images/menu/contact.png) no-repeat; background-position: 0 -66px; width: 128px; height: 33px; top: 12px; } nav .contact2:hover { background-position: 0 -33px; } test.css (this is for my tabber content0) @charset "utf-8"; /* CSS Document */ .container-tab { width: 100%; max-width: 960px; margin: 50px auto; font: 90% arial; } article, header { display: block; } header h1, header p { margin:0 auto; position:relative; font-family:Arial, Helvetica, sans-serif; text-align:center; margin-top: 10px; } header a { text-decoration:none; } a:hover { text-decoration:underline; } .tabs { width: 100%; max-width: 600px; background: #ccc; margin: 50px auto 0; position: relative; } span.anchor { position: fixed; display: none; } .panel div { opacity:0; background: #eee; float: left; width: 100%; position: absolute; top: 19px; left: 0; padding: 10px; box-sizing: border-box; line-height: 1.5em; border-radius: 5px; border-top-left-radius: 0; -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -ms-transition: all 0.6s ease; -o-transition: all 0.6s ease; transition: all 0.6s ease; } .panel .tab-link { margin-top: -20px; float: left; width: 20%; padding: 10px; background: #eee; margin-right: .5%; text-decoration: none; box-sizing: border-box; font-weight: bold; font-size: 1.1em; color: #333; text-align: center; border-top-left-radius: 5px; border-top-right-radius: 5px; -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -ms-transition: all 0.6s ease; -o-transition: all 0.6s ease; transition: all 0.6s ease; } .panel .tab-link:visited { color: #333; } .anchor:target + .panel div { opacity: 1; background: #ccc; } .anchor:target + .panel .tab-link { background: #ccc; } @media screen and (max-width:300px) { .panel .tab-link { font-size: 0.8em; padding: 12px 10px 12px 10px; } } and then there is just the Respond.min.js for responsive design (not my script, its from GitHub - scottjehl) and my mySQL connection script Now that all of that is there for everyone, I hope I can get some suggestions to help me with his issue... Thanks
-
http://gamebu.co.uk/phpfreaks.txt Hi, I have recently created http://www.gamebu.co.uk and would like some testing done before I add more features. Gamebu is a site where you can play online games for free. Game types include Flash, Unity3D and HTML5. I have a collection of over 1000 games so far from sites such as MochiGames, FreeOnlineGames and FlashGamesDistribution. I would like to know if there are any security vulnerabilities and if everything works as expected (ie no dead links). Thanks Carl
-
Hiya I've been searching for an encompassing solution to a problem for 2 days now and was wondering if anybody could shed some light on it? I've setup a html5 video to play on various web browsers and finally got it to work for android phones. I also use flash for older browsers that will not work with the html5 code. Android seems to be the most tricky as it requires js to call the video to play. Furthermore Its worth noting as far as I have seen that android doesnt even support https video streaming which is a nightmare and pretty short sighted of them. Heres the working code so far: <script> function vidEvent() { var videos = document.getElementsByTagName('video'); var vidCount = videos.length; for(i=0;i<vidCount;i++) { videos[i].addEventListener('click',bang,false); } } function bang() { this.play(); } window.onload = vidEvent; </script> <video width="560" height="320" autoplay="autoplay"> <source src="videos/Landing-Page.mp4" type="video/mp4" /> <source src="videos/Landing-Page.mv4" type="video/mv4" /> <source src="videos/Landing-Page.ogv" type="video/ogg" /> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="560" height="320"> <!--[if !IE]>--> <object type="application/x-shockwave-flash" data="videos/player.swf" width="560" height="315"> <!--<![endif]--> <param name="movie" value="videos/player.swf" /> <param name="wmode" value="transparent" /> <param name="bgcolor" value="#FFFFFF" /> <param name="quality" value="high" /> <param name="allowFullScreen" value="true" /> <param name="allowscriptaccess" value="always" /> <a href="http://www.adobe.com/go/getflash"> <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /> </a> <param name="flashvars" value="vdo=videos/Landing-Page.flv&autoplay=true" /> <!--[if !IE]>--> </object> <!--<![endif]--> </object> </video> Ok so it works on android phones (galaxy s i9000) and works in FF (if http NOT https), Chrome, IE and Safari (on my laptop). It doesn't seem to work on iphones at all so would assume thats the same for ipads.. Can you see anything obviously wrong with my code? I wonder if the js is causing the problem with iphone. Does any body know of a workable solution where a html5/flash video can be embeded on a website to be able to play on iphone/ipad, kindle, android and desktop/laptop older browsers. If anybody can shed any light on this I would so happy because this is just a mine field. Thank you
-
Hi, I have been working on a side scrolling shooter for the past couple of weeks and I would like to get some testing done. The game is similar in style to many retro shooters like Gradius, UN Squadron etc. The game play is a simple wave style, where you complete a level that has certain groups of enemies come at you in different patterns/amounts. This version only contains 1 level and is quite short to help with debugging and testing. Let me know what you think and if there are any issues that you can see. The graphics are basic atm, I will be getting better ones made once the games mechanics are stable. Thanks http://cjmarkham.co.uk/projects/canvas-shooter-2 http://cjmarkham.co.uk/projects/canvas-shooter-2/php_freaks.txt
-
I'm trying to figure out how to make a template objects (like you would in HTML3) where you can set up readable regions. Reason for this is I have a 12 page website it that shows my work, ie my reel, graphic.... You would have your 1. header wrapper section ( ie log and menu area) 2. this is where I would want a readable regions 3. have another readable region 4 then have your footer wrapper section Here is my html 5 <body> <!-- header-wrap --> <div id="header-wrap"> <header> <!-- <hgroup> <h1><a href="index.html"></a></h1> </hgroup> --> <nav> <ul> <li><a href="#main">Home</a></li> <li><a href="#services">Graphics</a></li> <li><a href="#portfolio">Web</a></li> <li><a href="#about-us">My Reel</a></li> <li><a href="#styles">Media</a></li> <li><a href="#styles">Bio</a></li> <li><a href="#contact">Contact Info</a></li> <li><a href="#styles">Links</a></li> </ul> </nav> </header></div> <!--logo and information --> <!-- header-wrap --> <div id="logo-wrap"> <logo> <lgroup> <h1><a href="index.html"> </a></h1> <h3>Welcome to my website</h3> </lgroup> <nav> <ul> <li>Phone: 714-504-8895 • </li> <li>e-mail: <a href="#mailto:www.damonwongdesign@yahoo.com">damonwongdesign</a></li></ul> </nav> </logo></div> ///---this is where i want to place the readable regions--// ///--this is where I would like to have the footer wrapper---/// </body> </html> This is part of the ccs3 code /* ------------------------------------------------------ STRUCTURE --------------------------------------------------------- */ #header-wrap { width: 100%; height: 45px; z-index: 99999; position: fixed; top: 0; left: 0; } header { position: relative; width: 940px; height: 45px; margin: 0 auto; } /*new information*/ logo-wrap { width: 100%; height: 65px; /* z-index: 99999; */ position: fixed; top: 65px; left: 0; } logo { position: relative; width: 940px; height: 65px; margin: 0 auto; } /*end of new information*/ /* ------------------------------------------- Header -------------------------------------------- */ /*header hgroup { position: absolute; background: url(../images/xxxxdesign.gif) no-repeat; height: 61px; width: 340px; display: block; top: 10px; left: 0; */ } header hgroup h1 a { text-indent: -9999em; display: block; height: 31px; width: 130px; } header hgroup h3 { text-indent: -9999em; height: 0; } /* Main Navigation */ header nav { float: right; margin-top: 25px; } header nav ul { font: bold 12px/25px Helvetica, Arial, Sans-serif; margin-right: -5px; padding: 0; list-style: none; } header nav ul li { float: left; } header nav ul a:link, header nav ul a:visited { color: #c5c4c4; margin-right: 20px; text-shadow: 0 -1px 0 rgba(10, 10, 10, 1); } header nav ul a:hover, header nav ul a:active { color: #17a231 } /*new information ie logo and contact info*/ /* Logo */ logo lgroup { position: absolute; background: url(../images/xxxx.gif) no-repeat; height: 61px; width: 340px; display: block; top: 45px; /*controls height*/ left: 0; } logo lgroup h1 a { text-indent: -9999em; display: block; height: 65px; width: 340px; } logo lgroup h3 { text-indent: -9999em; height: 0; } /* Main Navigation */ logo nav { float: right; margin-top: 60px; /*controls height*/ } logo nav ul { font: bold 12px/25px Helvetica, Arial, Sans-serif; margin-right: -5px; padding: 0; list-style: none; } logo nav ul li { float: left; } logo nav ul a:link, header nav ul a:visited { color: #000000; margin-right: 20px; text-shadow: 0 -1px 0 rgba(10, 10, 10, 1); } logo nav ul a:hover, logo nav ul a:active { color: #17a231 } /*end of new information*/ Any help would be great. Thanks Damon
-
Seriously, HTML 5 Canvas really lacks functionality. I searched how to clear a text written on it, and all what I am getting is to clear the whole damn canvas. Moreover, clearing all itself is not working. Here are my codes: HTML <img src="jjj.jpg" width="252" height="144" id="image"> <canvas id="canvas" width="252" height="144"></canvas> <input type="button" onclick=" insertImg ();"> <input type="text" id="text"/> <input type="button" onclick="writeText();"> <input type="button" value="Clear" onclick="clearCanvas();"> Javascript //Draw image function insertImg () { var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); var image = document.getElementById("image"); context.drawImage(image, 0, 0); } //Write text function writeText () { var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); var style = 'italic'; var size = '50pt'; var family = '"Arial Black", Gadget, sans-serif' var text = document.getElementById("text").value; context.font = style + " " + size + " " + family; context.fillStyle = 'blue'; context.fillText(text, 50, 50); } //Clear canvas function clearCanvas () { context.clearRect(0, 0, 252, 144); } Everything is working correctly, except, the canvas is not clearing when I click on the clear button. I will be glad if we can clear the text also separately from clearing canvas as a whole.
-
Hi, I have an IFrame. Good. And I have a Canvas as well. Good again! The user can write on the IFrame as I set the design mode ON. I am using document.execcomand to do the stuff, just like a simple text editor. I do not have issues on this. Here are my questions: 1/ What I want is, how to make the text written in the IFrame, appears on the Canvas? I mean, when the user is typing in the IFrame, the text is appearing simultaneously on the Canvas. If the user changes the text color, font color, bold, italic or whatever, of course the text also changes on the Canvas simultaneously. How to do that? 2/ Can I make all the elements draggable and resizable in the Canvas? I mean the text or anything but NOT the canvas? Help!
-
Well, I am planning to make something complex. Ok, I still have not done it but I want to know how to proceed to do it. Suppose there is a Canvas, and I am dragging and dropping images in it which can resize. The issue is not on the drag/drop and resize stuffs. What I want is, once an image is in the Canvas, how to write on it by double click? I mean if I double click, the cursor turn to text and people can write. How to proceed to do this? The canvas will be saved in image format later. All I want to know now, is this writing stuff, the rest I do not care too much now! Thank
-
Im trying to figure out the best way to switch content when menu options are selected. I have a media player that I want to continuously play when navigating the website. With iframe I am limited with options for it. Using PHP still reloads the page therefore stopping the music play. The "iframe" will hold the main content for the page I just would like to see what people have to suggest for a better alternative for what I'm trying to do.
-
How to make a datalist in javascript. Html datalist does not work in old browser so i want to make a datalist in javascript.please help me.
-
Using the h1, h2, and h3 with the following info in css (a,b and c) (titlte1, title2 and title3). I am not sure if I have done it correct in css, need help to find out what I an doing wrong, or did I missing something. html { font-family: sans-serif; line-height: 1.15; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } body { margin: 0; font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #212529; text-align: left; background-color: #fff; } h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: 0.5rem; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { margin-bottom: 0.5rem; font-family: inherit; font-weight: 500; line-height: 1.2; color: inherit; } h1, .h1 { font-size: 2.5rem; } h2, .h2 { font-size: 2rem; } h3, .h3 { font-size: 1.75rem; } h4, .h4 { font-size: 1.5rem; } h5, .h5 { font-size: 1.25rem; } h6, .h6 { font-size: 1rem; } h1 .aa{ /* use to make text glow in dashboard.php */ background-image: url("move.gif"); background-size: cover; color: transparent; -moz-background-clip: text; -webkit-background-clip: text; text-transform: uppercase; font-size: 80px; margin: 5px 0; } h2 .bb { /* use to make text glow in dashboard.php */ background-image: url("move.gif"); background-size: cover; color: transparent; -moz-background-clip: text; -webkit-background-clip: text; text-transform: uppercase; font-size: 40px; margin: 10px 0; } h3 .cc { /* use to make text glow in dashboard.php */ background-image: url("move.gif"); background-size: cover; color: transparent; -moz-background-clip: text; -webkit-background-clip: text; text-transform: uppercase;y font-size: 40px; margin: 10px 0; } .title { font-family: 'Comic Neue', cursive; text-align: center; color: #FFF; display: flex; flex-direction: column; align-items: center; justify-content: center; height: -1vh; letter-spacing: 1px; line-height:2 } .title1 { /* use to make text glow in dashboard.php */ font-family: 'Coming Soon', cursive; text-align: center; color: #FFF; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 20vh; letter-spacing: 1px; line-height:2 } .title2 { /* use to make text glow in dashboard.php */ font-family: 'Allerta Stencil'; text-align: center; color: #FFF; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 1vh; letter-spacing: 1px; line-height:2 } .title3 { /* use to make text glow in dashboard.php */ font-family: 'Kanit', sans-serif; text-align: center; color: #FFF; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 10vh; letter-spacing: 1px; line-height:2 } <div class="row"> <div class="col-12 col-sm-6 col-md-5"> <div class="info-box"> <div class="info-box-content"> <h1 class="cc" "title2">aaaaaaaaaaaaaaaaaaaaaaaa</h1> </div> </div> </div> <div class="col-12 col-sm-6 col-md-5"> <div class="info-box mb-3"> <div class="info-box-content"> <h2 class="cc" "title2">AAAAAAAAAAAA</h2> </div> </div> </div> </div> <div class="col-12 col-sm-6 col-md-4"> <div class="info-box mb-3"> <div class="ms-3"> <h2 class="bb" "title2">AAAAAAAAAAAABBBBBBBBBBBBDDDDDDDDDDD</h2> </div> </div> </div> ReplyReport It should look like the 2 screenshots
