Search the Community

I want when onmouseover on particular section to put an OPACITY #fff 0.2 layer on everything except the selected class i.e. table Similarly as you have: .tableHighlight:hover{background-color:#eee} <table id='table-main' class='tableHighlight'> ... but inversed (puts layer on everything else, but not the table itself) --- http://jsfiddle.net/LYcm9/1/

I want a div at the bottom of another div, and I want it centered, just using css not javascript. HTML <div id="parent"> <div id="bottom_element">test</div> </div> CSS #parent {height:100% width:100%} #bottom_element {position:absolute; bottom:5px; width:200px; margin:0 auto} So the issue is that position absolute and margin auto do not seem to work together. What is an alternative without javasript?

Hi everyone. I am using Wordpress and have a calendar plugin I'm using to display events. I'm trying to get the output of a function to display differently in one of my templates (have the output on one line). By default the plugin is having the output appear on multiple lines. Is it possible to wrap the function in a div to target it and remove the line breaks? I haven't been able to find anything to force the output to be on a single line. I'm not sure if I'm doing something wrong since I'm a newbie at this, or if I'd need to use something else other than CSS since the function does use a class, as shown here in the plugin's docs. Any advice or tips would be grealty appreciated, as I'm really lost right now. Thanks for taking the time to read this, and of course, for any assistance! Sean This is what I've added to my template thus far: <div class="tribe-events-event-category-list"> <?php echo Tribe_Register_Meta::event_category( 'tribe_event_category' ) ?> </div> Here are a couple images of how the output is being displayed by default (on two lines). Again, I don't want to change the output everywhere on my site; only on a certain php template.

I’m trying to organize a site and am missing something basic with linking my css.. Right now all the pages are in the root folder. I am using a template that includes a header and footer, only changing the body on each page. The header file contains links to the css and js files. I want to move all my news and events to a sub folder (newsEvents), as I expect a large number of these pages. For example: Folder structure: root/css/main.css root/includes/header.php root/newsEvents.php root/newsEvents/2014-04-29_eventPosting.php Working Page: root/newsEvents.php — loads css and javascript fine Inside of this page is the below line include(includes/header.php); Not working Page: root/newsEvents/2014-04-29_eventPosting.php — Does not load the css or the javascript Inside of this page is the below line include(../includes/header.php); I’m looking at the Debugger in FF, and I’ll see the CSS file listed for each page, but it shows 0 rules on the one not working. On the working page it shows 198 rules. I thought changing the includes path would be enough to load the header, which would included path’s to the css and js files.. But again, I’m missing something basic.. I’m using MAMP for my testing. If that makes a difference.. thank you

Hi I am trying to create a grid like gallery and for some reason it does not look right? I want it to look like pinterest so I am trying to use wookmark jquery. Here is my code and an image to view. Thank you. Here is the css: #gallerycontainer { display: inline-block; background-color: #f0f0f0; padding: 0px; width:850px; /*border: 1px solid #DBDBDB; -webkit-box-shadow: #E4E4E4 0px 0px 5px; -moz-box-shadow: #E4E4E4 0px 0px 5px; box-shadow:#E4E4E4 0px 0px 5px;*/ position:relative; left:0px; bottom:13px; overflow:inherit; top:0px; float: left; padding-right: 0px; margin-left: 10px; overflow: auto; } #gallery{ } #gallery li img { float: left; border: 5px solid #fff; -webkit-transition: box-shadow 0.5s ease; -moz-transition: box-shadow 0.5s ease; -o-transition: box-shadow 0.5s ease; -ms-transition: box-shadow 0.5s ease; transition: box-shadow 0.5s ease; max-width:250px; max-height:200px; padding:0px; } .galleryinfo{ border: 2px solid #fff; padding-bottom: 40px; float: left; margin:9px; background: white; } #gallery li img:hover { -webkit-box-shadow: 0px 0px 7px rgba(255,255,255,0.9); box-shadow: 0px 0px 7px rgba(255,255,255,0.9); cursor: pointer; } .myaccounttitle{ text-align: center; } And here is the php and html. <script type="text/javascript" src="js/jquery.wookmark.js"></script> <script type="text/javascript">$('#gallery li').wookmark();</script> <div class="myaccounttitle">My Images</div> <div id="gallery"> <?php function pictures($query) { while($row = mysql_fetch_array($query)) { $id = $row['id']; $title = $row['title']; $author = $row['userid']; $date = date("F j, Y, g:i a", $row['date']); $picture = $row['picture']; // $likes = $row['likes']; // $favs = $row['favs']; $unique = mysql_num_rows(mysql_query("SELECT * FROM views WHERE picture='$id' GROUP BY ip")); ?> <div class="galleryinfo"> <li id="<?php print $id?>"> <a class="fancybox" rel="group" href="photos/<?php print $picture?>"><img src="photos/<?php print $picture?>"/></a> </li> Views : <?php print($unique) ?> </div> <?php }}} ?> <div id="gallerycontainer"> <?php if($account == "c") { pictures($query2); }else { pictures($query); } ?> </div> All of your help is greatly appreciated.

Hello everyone! I have just finished my first HTML/CSS class, so I have a lot left to learn. One of the unfortunate things that was not covered at all in my class was cross-browser compatability. I made my website where it looked good in Chrome, but had things broken in IE and FireFox. A friend suggested I try converting some of my 'loose html5 coding' to the more strict XHTML. Any feedback or suggestions would be very welcome overall, and specifically checking how this looks across browsers. I'm currently at work where I'm stuck using Win XP with IE7. It looks so broken on IE 7 I wouldn't know where to start. www.rusticspices.com/ (original project) www.rusticspices.com/xhtmltest.html (testing xhtml changes) xhtmltest.html

I am currently building an image viewer something like a Gallery. However, I need to work with several images of different sizes. The viewer currently puts the image in a div and sets the background as a background image. I currently use this CSS code: background: url() no-repeat center cover

We are a Silicon Valley based startup and 30-60 days away from launch. We are seeking a partner and outstanding web developer to be responsible for developing and implementing innovative and secure web application for our eCommerce business. The person would work closely with our Marketing, Sales, Engineering and IT members to develop specifications and make recommendations on the use of new and emerging technologies and then implement those recommendations. Design, Programming, and database administration are all elements of this position. This person must have following experience and skills: - HTML5, XHTML, CSS3, PHP, and JavaScript, AJAX, jQuery, responsive frameworks and other technologies - command of web standards, CSS-layouts, DOM scripting, cross-browser compatibility & browser degradation strategies - working with the various JavaScript and PHP libraries - understanding of dynamic or active web content and the use of CGI, Perl, Java, XML and JSON - experience with SQL database (MySQL) - little understanding of Unix/Linux system and Apache web-server administration - experience working with Google Webmaster Tools, Google Analytics, and Google Custom Search - develop responsive and mobile websites

Hi, I am a ZCE in PHP5. You can visit my profile at http://www.freelancer.com/u/phpopensource.html Thanks

Hi all, I was wondering if you can help me with an issue I am having with my website. I am very new to php/html/css and mysql so I know very little. I have an order form on my website which when filled in send data to my database. I then have an admin page on my site which shows the data in the database. However, I need the data to be stored in a table with a row containing the column name and then each row showing the actual data underneath. Would like it in a grid sort of format. My current code is: <!doctype html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <link href="css/style.css" rel="stylesheet" type="text/css" /> <link href="css/reset.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container2"> <div id="adminpanel"> Admin Page <div id="showorders"><u>Orders</u></div> <?php include('connection.php'); $result = mysql_query("SELECT * FROM orderform"); while($row = mysql_fetch_array($result)) { echo "<span style='color: #333; width: 200px; height: 200px; padding: 1px; border: 1px solid #ff9900;'>" . $row['product'] . " " . $row['productcomments'] . " " . $row['name'] . " " . $row['address'] . " " . $row['age'] . " " . $row['delivery'] . "</span>" ; echo "<br>"; } ?> <div id="showreviews"><u>Reviews</u></div> <?php $result = mysql_query("SELECT * FROM reviewform"); while($row = mysql_fetch_array($result)) { echo "<span style='color: #333; width: 200px; height: 200px; padding: 5px; border: 1px solid #ff9900;'>" . $row['name'] . " " . $row['product'] . " " . $row['comment'] . "</span>" ; echo "<br>"; echo $row['name'] . " " . $row['product'] . " " . $row['comment'] ; echo "<br>"; } ?> </div> </div> </body> This code puts a border around each row but doesnt seperate each column and doesnt show a header. Ultimately, I am going to want to sort each order by different criteria e.g alphabetical, date ordered, product type. All help is really appreciated as I am really pushed for time and a complete beginner. Thanks Jonathan

can someone help me?can you make this script?i dont make the script yet. when i click set as correct..., clicked response become correct answer and the other become default. thanks in advance, sorry for my bad english. iam indonesian.

How to make border appear on the left and right sides of text? Let's say we have a div 200px x 100px with red border and ID of "container" <style type="text/css"> *{padding:0; margin:0;} #container{ width:200px; height:100px; border:2px solid red; } </style> <div id="container"> <p>Happy Potter</p> He was an awesome wizard! </div> Now we want to put the paragraph "Happy Potter" on the top of the div box between the red border. We do that by defining negative margin which will push up the paragraph like this: #container p{ margin-top:-15px; } Now our paragraph is in between the border, almost how we want it to be. Next we want to push it in the middle. So we use margin-left: #container p{ margin-top:-15px; margin-left:50px; } I'd suggest adjusting the left margin i.e. the pushing to the center thing with the developer tools of your browser ( right click on top of the element and Firebug ( for FF ) or Google Chrome Developer tools will pop up ) Next we want to remove the border that is overlapping the text. We do that by defining width of the text and giving it a background color that is the same as the div container and the outside area of it like this: #container p{ margin-top:-15px; margin-left: 50px; width: 83px; background: pink; } In my case the background color of both the container div and the area outside of it was pink so I gave the same color to the paragraph after defining its width. We have the final result: And now we and Harry Potter are happy Final code: <style type="text/css"> *{padding:0; margin:0;} #container{ width:200px; height:100px; border:2px solid red; } #container p{ margin-top:-15px; margin-left: 50px; width: 100px; background: pink; } </style> <div id="container"> <p>Happy Potter</p> He was an awesome wizard! </div>

Hello, I'd like to know if someone know how I can do this. Example when sites use this function is in a store etc. You choose your product-types, if you for example chose a larger size, the price becomes higher and then it updates in real time. So what I mean is like, the number increases/decreases depending on the users selections, if he wants that or not that included, the number changes so he/she can see the exact price he needs to pay for the product. Like this for standard ---------------- 25$ --------------- but if I for example choose a larger size it automatically updates to ------------- 30$ ------------ I hope u understand what I mean. Thanks in advanced

Please help me with this I'm completely lost. The problem is that in Firefox (v12) it worked , but in IE8 and Opera 9 series did not. I know about the bugs that are there , but I can not remove it, so not to break menu. I mention the code in the original version. 1) The end tag \ p delete this should not be there 2) The main problem I see is the repeat of id AB: <li id="AB"> and also the user of class . AB is useless because the class is not there. However that is the main problem: if I remove the id#AB so it is all broken, so you wont see the submenu in IE8 or Opera will not show the backround of the submenu 3 ) the reason why the ids AB were there is to distinguish between the fisrt 4 items in menu and the last item logout. The logout should not be highlighted when you hover over it. I do not understand how the unpack of drop-down submenus works , so maybe that's why i do not know what to do, but it seems to me that the error after removing the # id selector is caused by a more detailed ( some rule that trumps ) for clarification about the dimensions of the elements here is a code with dimensions: http://paste.ofcode.org/NQANEG25v3UXQgWBVu3TMn because in jsfiddle http://jsfiddle.net/WhSzr/ it does not have the correct dimensions I use two width there the first li items, they are narrow, 85px and the submenu ul is 108px wide. I give a link to the picture in FF12 : http://oi39.tinypic.com/502t21.jpg http://oi43.tinypic.com/2qi8u47.jpg Can you help to fix the problem? I need to remove the ids AB from li and fix it to work with IE8.

Okay, here’s the issue: I’m floating a nav menu right with the goal of it being flush with the right side of it’s container. However, no matter what I’ve tried, the menu is still off by a pixel or less. I’m using a reset.css file, Response Grid System’s 12 column css file, and my own styling css file, of course. Any help or insight is greatly appreciated! I’m pulling my hair out over this one. The code is here: http://codepen.io/anon/pen/rKBnt . ( Simplified as much as possible. ‘Line 210 is where the nav menu css is’ *Note: To replicate the probelm hover your mouse over the Contact link. You should see that it is off ever so slightly.

Hey guys, So I have myself a display issue with Safari. I used absolute positioning to place a roll-out comment box on my website (to leave a tag that appears in the background). I put display: none, then display:block on :hover over "TAG ME NOW!". It works great in IE, Firefox and Chrome, but when I checked through an online Safari emulator, the roll-out box appeared behind the video that is below (as a float right element). I put the z-index value for the comment box higher than the youtube video but it didn't change anything. Anyone has a clue ? Here is the website : http://www.blackswanworld.com

Hallo, i need some help with the scripts for a http header request. In the first script you can type the URL and the second shows the information of the header. The output produce an array. I will change this output style with css. How I can manipulate the data output? Here is the code: url.php <table width="65%" border="0" align="center" cellpadding="1" cellspacing="1"> <tr bgcolor="#DFDFFF"> <td> <form name="Form" method="post" action="empfangeURL.php"> <p>URL: <input name="url" type="text" value="http://"> </p> <p> <input type="submit" name="Submit" value="Senden"> <input type="reset" name="Submit2" value="Reset"> </p> </form> </td> </tr> </table> ------------------------------------------------------------------------- empfangeURL.php <title>Receiving</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body> <? # get headers of response $url = $_REQUEST; $scheme = 'http://'; $_response = get_headers($scheme.$url, 1); echo "<pre>\r\n"; echo htmlspecialchars(print_r($_response,1)); echo "</pre>\r\n"; ?> -------------------------------------------------------------------------- echo htmlspecialchars(print_r($_response,1)); produce this output: Array( [0] => HTTP/1.0 301 Moved Permanently [Server] => Array ( [0] => Apache [1] => Apache-Coyote/1.1 [2] => Apache-Coyote/1.1 ) [Location] => Array ( [0] => http://www.ard.de/home/ard/ARD_Home/21920/index.html [1] => /home/ard/ARD_Startseite/21920/index.html ) [Content-Length] => Array ( [0] => 322 [1] => 0 ) [Content-Type] => Array ( [0] => text/html; charset=iso-8859-1 [1] => text/html [2] => text/html;charset=UTF-8 ) [Date] => Array ( [0] => Sun, 05 Jan 2014 20:52:16 GMT [1] => Sun, 05 Jan 2014 20:52:17 GMT [2] => Sun, 05 Jan 2014 20:52:18 GMT ) [Connection] => Array ( [0] => close [1] => close [2] => close ) [1] => HTTP/1.0 301 Moved Permanently [Content-Language] => Array ( [0] => de-DE [1] => de-DE ) [Cache-Control] => Array ( [0] => max-age=45 [1] => max-age=45 ) [2] => HTTP/1.0 200 OK) Any ideas how to manipulate the output? Best, Richard

Hey guys, i am just messing around with the float property and setting up a layout with 3 columns. i am trying to tie in this column layout between a header and footer. code: <!doctype html> <html> <head> <title>Responsive Image</title> <meta charset="utf-8"> <link href="css/demo.css" rel="stylesheet" type="text/css"></link> <script> document.cookie = "device_dimensions=" + screen.width + "x" + screen.height; </script> </head> <body> <div class="header"></div> <div class="left"></div> <div class="center"></div> <div class="right"></div> <div class="footer"></div> </body> </html> and the CSS body{ margin: 0px 0px; padding: 0px 0px; } .header{ height: 50px; width: auto; background-color: gray; } .left{ height: 500px; width: 180px; margin-left: 100px; border: black 3px solid; margin-top: 20px; float:left; } .center{ height: 500px; width: 700px; border: black solid 3px; float: left; margin-top: 20px; margin-left: 20px; } .right{ height: 500px; width: 200px; border: black solid 3px; float: left; margin-top: 20px; margin-left: 20px; margin-bottom: 20px; } .footer{ height: 50px; width: auto; background-color: black; } IMAGE OF FINAL PRODUCT I want the footer to box the content ( 3 columns ) with the header. any suggestions as to why the footer is foregoing the content and sticking to the header ?

So I have three div's that look like this: echo "<div='playerinfo'>"; ......all information goes here echo "</div>"; echo "<div='stats'>"; ......all information goes here echo "</div>"; echo "<div='weapons'>"; ......all information goes here echo "</div>"; in which are in cased in a: echo"<div id='wrapper'>"; Whenever I try to margin-right the "playerinfo" div OR marign-left the "stats" div, the background color stretches to the end of the margin. My CSS for the two div's look like this: body{background: #0D0D0D;} h1{ color: white; text-align: center; } div{ background-color: #422100; color: white; } tab{ float:right; } p{ text-indent: 25px; text-align: justify; color: white; } #wrapper{ height: 100%; width: 100%; background-color: #0D0D0D; } #nav{ position: relative; float: left; clear: left; display: block; width: 100%; height: 3.25%; margin-left: auto; margin-right: auto; list-style-type: none; border-color: white; background-color: #0D0D0D; margin-top: .5%; } #nav ul{ text-align: center; } #nav ul li{ display: inline; position: relative; border: thin solid white; border-radius: 5px; margin: -2px; padding: 5px; box-shadow: 1px 1px 1px; background-color: #422100; } h2, h3, #nav ul li a:link, #logins a:link{color: white;} #nav ul li a:visited, #logins a:visited{color: white;} #logins{ float: right; border: thin solid white; border-radius: 5px; width: 20%; padding-left: 5px; text-align: center; box-shadow: 1px 1px 1px; margin: -6% 0 -5% 0; } #content{ position: relative; float: left; display: block; border: thin solid white; width: 25%; padding: 0 15px 0 15px; border-radius: 5px; box-shadow: 5px 5px 5px; margin-top: 1%; } #content h1,#news h1,#legal h1,#playerinfo h1,#stats h1{ border-bottom: thin solid black; box-shadow: 0 1px 0; } #banner{ border: thin solid white; width: 100%; height: 73px; border-radius: 5px; box-shadow: 5px 5px 5px; color: white; } #news{ position: relative; display: block; float: left; margin-left: 3%; border: thin solid white; padding: 0 15px 0 15px; width: 35%; border-radius: 5px; box-shadow: 5px 5px 5px; margin-top: 1%; } #legal{ position: relative; float: left; border: thin solid white; border-radius: 5px; box-shadow: 5px 5px 5px; width: 25%; margin-left: 4%; margin-top: 1%; padding: 0 15px 0 15px; } form{ border: thin solid white; width: 35%; padding: 0 5px 0 5px; margin-left: auto; margin-right: auto; } #playerinfo{ float: left; border: thin solid white; width: 25%; border-radius: 5px; box-shadow: 5px 5px 5px; padding: 0 15px 0 15px; margin-right: 5%; } #stats{ float: left; margin-left: auto; margin-right: auto; width: 18%; } I'm not understanding why the "margin-right: 5%;" in #playerinfo is stretching the div background color out all the way to the margin's ending point in which I DO NOT want. I just want the black background to show in between the two divs and not the brown (current color that will be changed soon). I would like to see the "stats" div centered also.

Hello, I'm trying to make a sliding bar or how you would describe it. And as the topic says, not a imageslider, where it takes a couple seconds before it changes picture.... I tried to come up with something in Paint to describe what I mean... A rolling bar so to say. I searched the webz like a maniac but only found sliders for images and other random stuff that isn't what I need, so I would hope someone of you guys might know how to do this. I'll attach the image. Thanks in advanced, peace!

One of the sites I manage is trending towards 40% mobile and tablet visitor. Remodeled and greatly expanded the mobile section and am looking for feedback on appearance in mobile/tablet devices. http://vvaarizona.org/mobile/index.html Thanks, Aaron

Hi, I want to put an opaque background behind my website that is a project for school. Here's my project for school: http://gyazo.com/33eddfa1242478b0cdf53dbda114df5a And what I want is an opaque background like the ones found on twitter: http://gyazo.com/59afbe6c4fe9cba669acca916e547c8a http://gyazo.com/55bfed8a0e2431d4acc02f41b72496eb I'm a pretty big noob when it comes to this so any help would be greatly appreciated.

Not sure if this the best forum for this, but here goes: Background: I have an account with Smugmug.com They recently revamped their website. With this revamp, they no longer allow you to add your own Javascript to customize your page. They only allow HTML and CSS modifications. So I created a free website through awardspace that allows me to run JS and PHP scripts. I want to create a way for a client to enter their last name and their password and have their pages opened in new tabs. Question: How do I do this without javascript? I can do it for a single page using PHP, but as far as I can tell PHP cant open multiple tabs... Here's the HTML: <form action="http://myfreescriptingsite.com/ClientSearch.php" method="get"> Name: <input type="text" name="tName"><br> Password: <input type="password" name="tPassword"><br> <input type="submit"> </form> I control the ClientSearch.php file. This could also be an HTML page or a JS file... Here is the ClientSearch.php file: $name = strtolower($_GET["tName"]); $password = $_GET["tPassword"]; switch($name){ case "smitherton": if ($password == "password") {header("Location: http://www.myrealwebsite.com/Clients/Smitherton/SmithertonFamily2013");} break; default: header("Location: http://www.myrealwebsite.com/Client-Search/"); } Again, the above PHP code only works for one location. I need it to load up multiple pages: if ($password == "password") { header("Location: http://www.myrealwebsite.com/Clients/Smitherton/SmithertonFamily2011"); #header("Location: http://www.myrealwebsite.com/Clients/Smitherton/SmithertonFamily2012"); #header("Location: http://www.myrealwebsite.com/Clients/Smitherton/SmithertonFamily2013"); } Any ideas on how to accomplish this? Thanks, Dave

Hi. I have a file upload script and I want to allow css files to be uploaded as well. Here is my code allowing the certain filetipes allowed to be uploaded. || ($_FILES["file"]["type"] == "image/jpeg") || ($_FILES["file"]["type"] == "image/jpg") || ($_FILES["file"]["type"] == "image/pjpeg") || ($_FILES["file"]["type"] == "image/x-png") || ($_FILES["file"]["type"] == "image/png")) When I tried doing this code to allow css files through || ($_FILES["file"]["type"] == "text/css")) it didn't work. Should it? If not, what did I do wrong?

Hi guys, I am new to php programming and need your assistance in developing a registration system for my site .I have developed the registration form using html5 , css, jquery and javascript. and now need a functional php script which is going to work for my registration form. The Registration form includes 4 step process for successful registration of a user.The fields of the form are as follows: First Step: username password re-type password Second step: first name last name email Third step age gender country Fourth step: Summary(displaying all user information which user has given through out the registratioin process) For user viewing,I have included a progress bar, which shows the percentage of completion of the registration process. I have attached the screenshot below for the registration form. Kindly help me in building a functional php script for the registration form. Thanks