Search the Community

CSS in one of my nightmares, it is the one thing that causes me the most frustration. I have a question for those who are a bit more graceful with it than I am - I have a comment area in a practice project, it looks like this -> <div class="comment-content d-flex"> <div class="comment-author"> <img src="img.jpg" alt="author"> </div> <div class="comment-meta"> <a href="#" class="post-author">Commenter Name</a> <a href="#" class="post-date">Comment date</a> <p>Donec turpis erat, scelerisque id euismod sit amet, fermentum vel dolor. Nulla facilisi. Sed pellen tesque lectus et</p> </div> <!-- I added this area myself <div class='d-flex align-items-center'> <a href='#' class='comment-like'><span><i class="fa fa-thumbs-up"></i> like</span></a>&nbsp;&nbsp; <a href='#' class='comment-respond'><span><i class="fa fa-comment"></i> respond</span></a> </div> --> </div> in the area that I commented that I added myself .comment-like and .comment-respond are not yet defined. At the moment it flows to the right of the comment area and I want them below it. Easy enough to do with positioning except that I need it to be positioned relative to the content of the comment that it belongs to. This whole block will eventually be echoed from a PHP class but I like to get the styling and html correct on the page it will display on first (probably like most people). Can I get some advice on the best way to resolve this issue from you folks please. TIA

In my project I have a CSS custom variables like this: :root { --primary-color: #e04c4c; --secondary-color: #2c2c5e; --text-color: #d67900; } In my LESS files I have used LESS color functions to get more colors base on its primary and secondary. This is how its look like: .component1 { background: darken(--primary-color, 10%); } .component2 { background: lighten(--secondary-color, 5%); } But when I compile this, it gives an error like this? When googling I found a solution for SASS, but not for LESS. Can anybody tell me is there any possible workaround for this particular case? Thank you.

I have made a small CSS image slider for my webpage, but have a few issues with the slider and my images. The images differ in size on the screen (although I have made sure the images were the same size before upload). I have written code for three images, the first image of the slider is too high, the second image is great, third image is lower than the second and first image... and then it shows a fourth blank image? HTML Code: <div id="slider"> <figure> <li><img src="http://xxx/jkhzmGV.jpg" /></li> <li><img src="http://xxx/49RqNB5.jpg" /></li> <li><img src="http://xxx/7nrTa5p.jpg" /></li> </figure> </div> CSS Code: @keyframes slider { 0% { left: 0; } 20% { left: 0; } 25% { left: -100%; } 45% { left: -100%; } 50% { left: -200%; } 70% { left: -200%; } 75% { left: -300%; } 95% { left: -300%; } 100% { left: -400%; } } #slider { overflow: hidden; } #slider figure img { width: 20%; float: left; } #slider figure { position: relative; width: 500%; margin: 0; left: 0; text-align: left; font-size: 0; animation: 30s slider infinite; } }

Hi to all, As per my client suggested, i need to change the info box background color for every info box (circular way). So i used the CSS3 pseudo nth-child algoritham to assign each info box background color with different background colors. Here is my html code <div class="row flexslider carousel" id="appList"> <ul class="slides"> <li> <div class="col-lg-3 col-md-6 col-sm-6"> <div class="info-box"> <img src="img/shortcuts/money.png" alt=""> <div class="count">1</div> <div class="title">New users</div> <div class="desc">Purchase</div> <div class="desc f-bold">Test</div> </div> </div> </li> <li> <div class="col-lg-3 col-md-6 col-sm-6"> <div class="info-box"> <img src="img/shortcuts/money.png" alt=""> <div class="count">2</div> <div class="title">New users</div> <div class="desc">Purchase</div> <div class="desc f-bold">Test</div> </div> </div> </li> <li> <div class="col-lg-3 col-md-6 col-sm-6"> <div class="info-box"> <img src="img/shortcuts/money.png" alt=""> <div class="count">3</div> <div class="title">New users</div> <div class="desc">Purchase</div> <div class="desc f-bold">Test</div> </div> </div> </li> <li> <div class="col-lg-3 col-md-6 col-sm-6"> <div class="info-box"> <img src="img/shortcuts/money.png" alt=""> <div class="count">4</div> <div class="title">New users</div> <div class="desc">Purchase</div> <div class="desc f-bold">Test</div> </div> </div> </li> <li> <div class="col-lg-3 col-md-6 col-sm-6"> <div class="info-box"> <img src="img/shortcuts/money.png" alt=""> <div class="count">5</div> <div class="title">New users</div> <div class="desc">Purchase</div> <div class="desc f-bold">Test</div> </div> </div> </li> </ul> </div> Here is CSS code .info-box { min-height: 140px; border: 1px solid black; margin-bottom: 30px; padding: 20px; color: white; -webkit-box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 0.35), 0 3px 1px -1px rgba(0, 0, 0, 0.1); -moz-box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 0.35), 0 3px 1px -1px rgba(0, 0, 0, 0.1); box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 0.35), 0 3px 1px -1px rgba(0, 0, 0, 0.1); } .info-box i { display: block; height: 100px; font-size: 60px; line-height: 100px; width: 100px; float: left; text-align: center; border-right: 2px solid rgba(255, 255, 255, 0.5); margin-right: 20px; padding-right: 20px; color: rgba(255, 255, 255, 0.75); } .info-box img { display: block; height: auto; font-size: 46px; line-height: 46px; width: auto; float: left; text-align: center; border-right: 2px solid rgba(255, 255, 255, 0.5); margin-right: 20px; padding-right: 20px; color: rgba(255, 255, 255, 0.75); } .info-box .count { margin-top: -10px; font-size: 34px; font-weight: 700; } .info-box .title { font-size: 12px; text-transform: uppercase; font-weight: 600; } .info-box .desc { margin-top: 10px; font-size: 12px; } #appList ul.slides li div div.info-box:nth-child(5n+1) { background: #fabb3d; border: 1px solid #f9aa0b; } #appList ul.slides li div div.info-box:nth-child(5n+2) { background: #ff5454; border: 1px solid #ff2121; } #appList ul.slides li div div.info-box:nth-child(5n+3) { background: #67c2ef; border: 1px solid #39afea; } #appList ul.slides li div div.info-box:nth-child(5n+4) { background: #79c447; border: 1px solid #61a434; } #appList ul.slides li div div.info-box:nth-child(5n) { background: #20a8d8; border: 1px solid #1985ac; } But when i tried with the above code, the info box only accepts (5n+1) CSS code. Can any one please suggest me the way to get the solution.

The URL is http://crispylogs.com/writing-high-quality-posts-to-increase-traffic-top-20-tips/ I am trying to add an effect, like a magazine's "drop-cap," but it's not working for me, and I don't know why. The following is the CSS code I have used: .single .entry p:first-child:first-letter { float: left; color: #903; font-size: 47px; line-height: 40px; padding-top: 0px; padding-right: 8px; padding-left: 3px; font-family: Georgia; }

hi i would like to have my css test box attached to the side of the box like it is on the second picture ... any way to do it ? #socialbox { background-color: #FFF; padding: 7px; height:200px; width:35px; border: 1px solid #DBDBDB; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; -webkit-box-shadow: #E4E4E4 0px 0px 5px; -moz-box-shadow: #E4E4E4 0px 0px 5px; box-shadow:#E4E4E4 0px 0px 5px; margin-bottom: 5px; /* max-width:50px; max-height:100px; */ float:right; margin-right:180px; }

I find this website is very good for downloading PHP + MySQL, HTML5 + CSS, WordPress, Magento document and video tutorial. I am happy to share with you, guys, Have a nice day. http://dvdit.org/

Hi, I'm turning a 2 level nav into a 3 level and running into a few difficulties. The 3rd level displays where and as predicted but when the 'grandparent' is hovered over, not the parent of the items I want displayed. I've been fooling around with the css for a while and I cannot get it to respond how I'd like. Any help is appreciated. There is a fiddle as my explanation might be somewhat lacking. http://jsfiddle.net/6TGaf/ Code from fiddle: #nav{ background: #bada55; width: 99%; margin-top:-5px; } #nav ul{ list-style: none; margin: 0; padding: 0; height: 40px; } #nav ul li{ /*child elements positioned absolutley will be relative to this*/ position: relative; border-top: 1px solid #e9e9e9; float: left; } #nav a{ color: ghostwhite; padding: 12px 0px; /*fill hori space*/ display: block; text-decoration: none; /*apply transition to background property, taking 1s to change it */ transition:padding 1s, background 1s; -moz-transition:padding 1s, background 1s; -webkit-transition:padding 1s, background 1s; -o-transition:padding 1s, background 1s; font-family:tahoma; font-size:13px; text-transform:uppercase; padding-left:20px; } /*hover pseduo class*/ #nav a:hover{ /* RGBA background for transparancy: last number(0.05) is the transparency */ padding-left:35px; background: RGBA(255,255,255,0.05); color:#fff; } #nav ul li:hover ul{ /*diplay when hovered*/ display: block; } #nav ul ul{ position: absolute; left: 0px; top: 40px; border-top: 1px solid #e9e9e9; display: none; /*width: 304px;*/ z-index: 1; } #nav ul ul li{ width: 150px; background: #f1f1f1; border: 1px solid #e9e9e9; border-top: 0; /*float:left;*/ } #nav ul ul li a{ color:#000000; font-size:12px; text-transform:none; } #nav ul ul li a:hover { color:#929292; } /*3rd level...*/ #nav ul ul ul{ position: absolute; left: 150px; top: 0px; border-top: 1px solid #e9e9e9; display: none; /*width: 304px;*/ z-index: 1; } #nav ul ul ul li{ width: 150px; background: #f1f1f1; border: 1px solid #e9e9e9; border-top: 0; } #nav ul ul ul li a{ color:#000000; font-size:12px; text-transform:none; } #nav ul ul ul li a:hover { color:#929292; } #nav ul ul li:hover ul{ /*diplay when hovered*/ display: block; } <nav id = "nav"> <ul> <li> <a href="#">1.1</a> <ul> <li> <a href="#">1.1.1</a> <ul> <li><a href="#">1.1.1.a</a></li> <li><a href="#">1.1.1.b</a></li> </ul> </li> <li><a href="#">1.1.2</a></li> <li><a href="#">1.1.3</a></li> </ul> </li> </ul> </nav>

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

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

Hi guys, I have added simple CSS3 opacity animation on scroll down and everything works. Now I am trying to add cool bounce CSS3 effect and it works but disappears after the effect is completed. The effect is applyed to the 'footer' with "addClass('animated bounceInDown');". I don't think that is CSS problem as the animation should just stop playing when its done. Any ideas? <script type="text/javascript"> $(document).ready(function() { /* Every time the window is scrolled ... */ $(window).scroll( function(){ /* Check the location of each desired element */ $('.hideme','footer').each( function(i){ var bottom_of_object = $(this).position().top + $(this).outerHeight(); var bottom_of_window = $(window).scrollTop() + $(window).height(); /* If the object is completely visible in the window, fade it it */ if( bottom_of_window > bottom_of_object ){ $(this).animate({'opacity':'1'},500); $(this).addClass('animated bounceInDown'); } }); $('img').load(function() { $(this).addClass('active'); }); }); }); </script>

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

Hello fellow coders! I am trying to use tutorials to understand how to make dropdown menus with CSS3. So far so good, except for one little snag. Let me begin by showing you my HTML: <nav id='tabmenu'> <ul> <li><h2><a href='about.php' class='inactive'tabindex='4'>About</a></h2></li> <li><h2><a href='flash.php' class='inactive'tabindex='4'>Flash</a></h2></li> <li><h2><a href='writing.php' class='inactive'tabindex='4'>Writing</a></h2> <ul> <li> <a href='#' class='inactive' id='tech' onclick='toggleWritingType(this)' tabindex='10'>Technical</a> <a href='#' class='inactive' id='jour' onclick='toggleWritingType(this)'' tabindex='9'>Journalism</a> </li> </ul> </li> <li><h2><a href='design.php' class='inactive'tabindex='4'>Design</a></h2></li> <li><h2><a href='webs.php' class='active' tabindex='4'>Webs</a></h2> <ul> <li><a href='#' class='active' id='cobra' onclick='toggleSShots(this)' tabindex='9'>Cobra Cabana</a></li> <li><a href='#' class='inactive' id='hughes' onclick='toggleSShots(this)' tabindex='10'>Hughes, PhD</a></li> <li><a href='#' class='inactive' id='rasche' onclick='toggleSShots(this)' tabindex='11'>Rasche</a></li> </ul> </li> </ul> </nav> So, as you can see I have two submenus, and potentially one more if I can get this working. The tuts I found online created an absolute position for one submenu, which does not apply well to the second menu since they should not be in the exact same location. I think I now have a good understanding about how to use CSS3 to make submenus appear and reappear, but I'm not so clear on the placement. Is there a way to write one rule that applies to any submenu to appear beneath (relative to) it's parent <ul>? Here is my CSS for the nav: #tabmenu { width: 985px; margin: 0 auto 10px; height: 40px; border-bottom: 1px #fff solid; } #tabmenu a{ background-color: #000; color: #fff; width:150px; height:40px; line-height: 40px; float: right; text-align:center; text-decoration: none; } #tabmenu a.inactive:hover { color: #999; opacity: 0.7; filter: alpha(opacity=70); -khtml-opacity: 0.7; -moz-opacity: 1; } #tabmenu a.active, #tabmenu ul a.active { background-color: #fff; color:#000; } #tabmenu ul ul { display: none; } #tabmenu li:hover > ul { //This is the major area of concern, I believe. display: block; top: 40px; position: relative; height: 120px; width: 150px; } I made a fiddle: http://jsfiddle.net/cTcVT/ Thanks!

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.

I'm trying to fade in a div using CSS3 only. The CSS code I currently have written is: @-webkit-keyframes FadeIn { 0% { opacity:0; } 100% { opacity:1; } } #example { -webkit-animation-name:FadeIn; -webkit-animation-timing-function:ease-in; -webkit-animation-duration:2s; } This fades works in Google Chrome but not in Firefox, Internet Explorer or Opera (as I expect). How can expand on this code using CSS3 code to support Firefox, Internet Explorer and Opera etc?