Search the Community

I am looking for a resource friendly (on both the server and the visitors browser) for loading css and javascript files. I am currently loading both by external links: <link rel="stylesheet" href="..." /> <script src="..."></script>I have been contemplating on weather or not i should just embed the css in the html file..<style>...</style>Background: I am developing a large scale platform that will host websites. It will deploy itself as a distributed cms. If you have a better idea for performance within this category, please share for the community (and me )

Hello: I ve .css file with background images where paths are not working :/ ex: .cmd {background:url(/assests/theme/theme1/img01.png);} any work around since we can t use base_url() in css of course...

I'm wondering if it's possible in an easy way that when I use while function to call out a bunch of data and put them into table but I want to use css to make it one row with regular background and one row with light background. hopefully what I sad make sense.... this is what I have echo "<style type='text/css'>"; echo "th {background: #CEED5E;}"; echo "</style>"; echo "<table border=1>"; echo "<tr><th>Product ID</th><th>Title</th><th>Author</th><th>Description</th></tr>"; while ($row = mysqli_fetch_assoc($result)) { echo "<tr><td>" . $row["id"] . "</td><td>" . $row["title"] . "</td><td>" . ucwords(strtolower($row["authorFirstName"] . " " . $row["authorLastName"])) . "</td><td>" . $row["description"] . "</td></tr>"; } echo "</table>";

Hi, I'm trying to make it so that my Wrapper fixes to the screen resolution depending on your screen, so I'm basically debugging on both my laptop and my 32"" monitor. Would they be any possible way to make it so: "height: 100%" "width: 100%" If so how would I do this method? I've got this far atm: (The wrapper is help inside the main Container which just has "width: 100%; min-width: 100%; padding: 0; margin: 0; " Excuse my sloppy coding. .index_wrapper { width: 100%; height: 1600px; min-width: 500px; max-width: 100%; min-height: 500px; max-height: 1600px; margin-top: 50px; margin-bottom: 25px; margin-right: auto; margin-left: auto; } .index_content { background-color: #1e1f1f; background-image:url('images/structure/background-2.jpg'); background-repeat: no-repeat; height: 100%; min-height: 100%; width: 100%; min-width: 1452px; border: 1px solid #505050; border-left:none; border-right:none; border-top: none; vertical-align: baseline; }

Hello, wasn't quite sure where I should have posted this, or if appropriate for this forum. I know my web design mechanics fairly well, but i'm not really the best art designer. I've created a calender for a site i'm working on. Click on a day, and you can share what your doing on said day. Simple project, but I feel its ugly. I use a "checkmark" image to show a day has an entry. When the owner clicks a day, they are presented with a pop-in (in-page popup?) that allows them to create or edit. Still need to make a delete control, not hard. When a viewer clicks a day, they get an even more lack-luster view without the text-area. Anyway, this feels really awkward when using it. Any tips for bringing it up to 2012? Attached images for it, thanks in advanced for any advice.

Hi, I'm just messing around with a website and I'm just wondering how would I make it so that it changes the background image to a random one? I was thinking something around this: Images = new Array Images[1] = "Background-1.jpg" Images[2] = "Background-2.jpg" Images[3] = "Background-3.jpg" Images[4] = "Background-4.jpg" But Instead of it just changing when you refresh the page every time, I was hoping to have a timer or something fixed to it? Would it be possible to have it so it gets the time of the server and if that time is equal it'll change? Help will be much appreciated

I am trying to add some responsive design to an existing index page for a client without haveing to completely re-design the entire page or site. My logic is to use two different media queries with coorsponding CSS on the page. One for browser less than 500 and and the other for browsers more than 501. Created two css pages, screenLarge.css and screenSmall.css. Each of the css has a div tag for size and float. The test page I'm doing works fine. On the large browser an area 990px with text. As I make the browser, at 500, the area changes to red with different text. So the re-size works fine. Until I put an html table in to the are of the div class from the screenLarge css. The table appears fine but as I resize the the red 500px area appears for the screenSmall css, the table doesn't go away. I would think that that html element within that Div tag would not appear if the Div tag was not called. I'm obviously missing something. <body> <div class="pageLarge"> tyityiuytuytiuytytity (HTML table would go here) </div> <div class="pageSmall"> asdfasdf </div> </body>

Hi guys Im trying to create a blank 3 column layout using some snippets of code ive found from a template, but i cant get it too work. When viewing the design in dreamweaver, the text and styling in the left and right colum is not visible. Can anybody advise as to why? html: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <link href="style2.css" rel="stylesheet" type="text/css" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title></title> </head> <body> <div id="maincontainer"> <div id="topsection"><div class="innertube"><h1>Title</h1></div></div> <div id="contentwrapper"> <div id="contentcolumn"> <div class="innertube"><b>Content Column: <em>Fluid</em></b></div> </div> </div> <div id="leftcolumn"> <div class="innertube"><b>Left Column: <em>20%</em></b>filltext</div> </div> <div id="rightcolumn"> <div class="innertube"><b>Right Column: <em>15%</em></b>filltext</div> </div> <div id="footer">Footer</div> </div> </body> </html> CSS: body{ margin:0; padding:0; line-height: 1.5em; } b{font-size: 110%;} em{color: red;} #topsection{ background: #EAEAEA; height: 90px; /*Height of top section*/ } #topsection h1{ margin: 0; padding-top: 15px; } #contentwrapper{ float: left; width: 100%; } #contentcolumn{ margin: 0 15% 0 20%; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/ } #leftcolumn{ float: left; width: 20%; /*Width of left column in percentage*/ ; background: #C8FC98; } #rightcolumn{ float: left; width: 15%; /*Width of right column in pixels*/ ; /*Set margin to that of -(RightColumnWidth)*/ background: #FDE95E; } #footer{ clear: left; width: 100%; background: black; color: #FFF; text-align: center; padding: 4px 0; } #footer a{ color: #FFFF80; } .innertube{ margin: 10px; margin-top: 0; } Any help would be greatly appreciated....

HTML FORM DATA <form id="" method="POST" onsubmit="return false;"> Name: <input type="radio" name="DoorFrame" id="DoorFrame" value="Door 1" onclick="sendRequest()" /> Name: <input type="radio" name="DoorFrame" id="DoorFrame" value="Door 2" onclick="sendRequest()" /> <input type="submit" value="submit" /> </form> <div id="show"></div> AJAX <script type="text/javascript" src="prototype.js"></script> <script> function sendRequest() { var DoorFrame = $('DoorFrame').value; new Ajax.Request("test.php", { method: 'POST', postBody: $("DoorFrame").serialize(), onComplete: showResponse }); } function showResponse(req){ $('show').innerHTML= req.responseText; } </script> PHP if (isset($_POST['DoorFrame'])) { echo "image here" . isset($_POST['DoorFrame']) ? "image here" . $_POST['DoorFrame'] : ''; } else { echo "EMPTY"; } The script is currently getting one value from the form but what I want to do is get both values depending on which one is chosen obviously but I also want to add another group of radio buttons and get the value selected from them as well. I am new to ajax but pretty good with php. Kind Regards,

Visual instruction: http://bit.ly/14JyZAz The theme is here : http://demo.wpzoom.com/?theme=meeta I want to remove the title of the site from appearing at the header. But at the same time not removing the title of the site from showing when searching on google or appearing as the name of the tab. I am a complete newbie and would appreciate the help very much, my friends.

Hey guys, I'm still very much a noob in learning. I need help big time. As you will see, this code is designed to make an apple like slider on a webpage. I'm looking to put the slider part with the thumbnails on the top of it instead of the bottom. Here is what I have: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html><head> <title>Welcome To Provision Records</title> <div id="main"> <div id="gallery"> <div id="slides"> <div class="slide"><img src="img/sample_slides/macbook.jpg" width="920" height="400" /></div> <div class="slide"><img src="img/sample_slides/iphone.jpg" width="920" height="400" /></div> <div class="slide"><img src="img/sample_slides/imac.jpg" width="920" height="400" /></div> </div> <div id="menu"> <ul> <li class="fbar"> </li> <li class="menuItem"><a href=""><img src="img/sample_slides/thumb_macbook.png" /></a></li> <li class="menuItem"><a href=""><img src="img/sample_slides/thumb_iphone.png" /></a></li> <li class="menuItem"><a href=""><img src="img/sample_slides/thumb_imac.png" /></a></li> </ul> </div> </div> </div> <style type="text/css"> body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label{ /* Page reset */ margin:0px; padding:0px; } body{ /* Setting default text color, background and a font stack */ color:#444444; font-size:13px; background: #f2f2f2; font-family:Arial, Helvetica, sans-serif; } /* Gallery styles */ #gallery{ /* CSS3 Box Shadow */ -moz-box-shadow:0 0 3px #AAAAAA; -webkit-box-shadow:0 0 3px #AAAAAA; box-shadow:0 0 3px #AAAAAA; /* CSS3 Rounded Corners */ -moz-border-radius-bottomleft:4px; -webkit-border-bottom-left-radius:4px; border-bottom-left-radius:4px; -moz-border-radius-bottomright:4px; -webkit-border-bottom-right-radius:4px; border-bottom-right-radius:4px; border:1px solid white; background:url(img/panel.jpg) repeat-x bottom center #ffffff; display:block; margin-left:auto; margin-right:auto; margin-north:auto; max-width: 100%; max-height:100%; height:auto; margin-top:180px; /* The width of the gallery <______________________________________________________*/ width:900px; overflow:hidden; } #slides{ /* This is the slide area */ height:400px; /* jQuery changes the width later on to the sum of the widths of all the slides. */ width:920px; overflow:hidden; } .slide{ float:left; } #menu{ /* This is the container for the thumbnails */ height:45px; } ul{ margin:0px; padding:0px; } li{ /* Every thumbnail is a li element */ width:60px; display:inline-block; list-style:none; height:45px; overflow:hidden; } li.inact:hover{ /* The inactive state, highlighted on mouse over */ background:url(img/pic_bg.png) repeat; } li.act,li.act:hover{ /* The active state of the thumb */ background:url(img/active_bg.png) no-repeat; } li.act a{ cursor:default; } .fbar{ /* The left-most vertical bar, next to the first thumbnail */ width:2px; background:url(img/divider.png) no-repeat right; } li a{ display:block; background:url(img/divider.png) no-repeat right; height:35px; padding-top:10px; } a img{ border:none; } /* THIS IS WHERE MY CODING SITS */ html{ overflow:hidden } body{ background-image:url(); background-repeat: no repeat; background-size:110%; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> <script type="text/javascript" > $(document).ready(function(){ /* This code is executed after the DOM has been completely loaded */ var totWidth=0; var positions = new Array(); $('#slides .slide').each(function(i){ /* Loop through all the slides and store their accumulative widths in totWidth */ positions= totWidth; totWidth += $(this).width(); /* The positions array contains each slide's commulutative offset from the left part of the container */ if(!$(this).width()) { alert("Please, fill in width & height for all your images!"); return false; } }); $('#slides').width(totWidth); /* Change the cotnainer div's width to the exact width of all the slides combined */ $('#menu ul li a').click(function(e){ /* On a thumbnail click */ $('li.menuItem').removeClass('act').addClass('inact'); $(this).parent().addClass('act'); var pos = $(this).parent().prevAll('.menuItem').length; $('#slides').stop().animate({marginLeft:-positions[pos]+'px'},450); /* Start the sliding animation */ e.preventDefault(); /* Prevent the default action of the link */ }); $('#menu ul li.menuItem:first').addClass('act').siblings().addClass('inact'); /* On page load, mark the first thumbnail as active */ }); </script> </head> <body bgcolor="#FFFFFF"> </body> </html> Also, here is the website where I got this code (I changed it a little, but not much). http://tutorialzine.com/2009/11/beautiful-apple-gallery-slideshow/#comment-1084 Any ideas?

I am currently working on a php quiz which i have completed and is running perfectly. However the problem i am now having is, how do i move the quiz.php code to my css/html template and make the quiz appear there. the following are the codes for quiz.php pages index page: <?php $msg = ""; if(isset($_GET['msg'])){ $msg = $_GET['msg']; $msg = strip_tags($msg); $msg = addslashes($msg); } ?> <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Quiz Tut</title> <script> function startQuiz(url){ window.location = url; } </script> </head> <body> <?php echo $msg; ?> <h3>Click below when you are ready to start the quiz</h3> <button onclick="startQuiz('quiz.php?question=1')">Click Here To Begin</button> </body> </html> questions.php <?php session_start(); require_once("scripts/connect_db.php"); $arrCount = ""; if(isset($_GET['question'])){ $question = preg_replace('/[^0-9]/', "", $_GET['question']); $output = ""; $answers = ""; $q = ""; $sql = mysql_query("SELECT id FROM questions"); $numQuestions = mysql_num_rows($sql); if(!isset($_SESSION['answer_array']) || $_SESSION['answer_array'] < 1){ $currQuestion = "1"; }else{ $arrCount = count($_SESSION['answer_array']); } if($arrCount > $numQuestions){ unset($_SESSION['answer_array']); header("location: index.php"); exit(); } if($arrCount >= $numQuestions){ echo 'finished|<p>There are no more questions. Please enter your first and last name and click next</p> <form action="userAnswers.php" method="post"> <input type="hidden" name="complete" value="true"> <input type="text" name="username"> <input type="submit" value="Finish"> </form>'; exit(); } $singleSQL = mysql_query("SELECT * FROM questions WHERE id='$question' LIMIT 1"); while($row = mysql_fetch_array($singleSQL)){ $id = $row['id']; $thisQuestion = $row['question']; $type = $row['type']; $question_id = $row['question_id']; $q = '<h2>'.$thisQuestion.'</h2>'; $sql2 = mysql_query("SELECT * FROM answers WHERE question_id='$question' ORDER BY rand()"); while($row2 = mysql_fetch_array($sql2)){ $answer = $row2['answer']; $correct = $row2['correct']; $answers .= '<label style="cursor:pointer;"><input type="radio" name="rads" value="'.$correct.'">'.$answer.'</label> <input type="hidden" id="qid" value="'.$id.'" name="qid"><br /><br /> '; } $output = ''.$q.','.$answers.',<span id="btnSpan"><button onclick="post_answer()">Submit</button></span>'; echo $output; } } ?> quiz.php <?php session_start(); if(isset($_GET['question'])){ $question = preg_replace('/[^0-9]/', "", $_GET['question']); $next = $question + 1; $prev = $question - 1; if(!isset($_SESSION['qid_array']) && $question != 1){ $msg = "Sorry! No cheating."; header("location: index.php?msg=$msg"); exit(); } if(isset($_SESSION['qid_array']) && in_array($question, $_SESSION['qid_array'])){ $msg = "Sorry, Cheating is not allowed. You will now have to start over. Haha."; unset($_SESSION['answer_array']); unset($_SESSION['qid_array']); session_destroy(); header("location: index.php?msg=$msg"); exit(); } if(isset($_SESSION['lastQuestion']) && $_SESSION['lastQuestion'] != $prev){ $msg = "Sorry, Cheating is not allowed. You will now have to start over. Haha."; unset($_SESSION['answer_array']); unset($_SESSION['qid_array']); session_destroy(); header("location: index.php?msg=$msg"); exit(); } } ?> <!doctype html> <html> <head> <meta charset="utf-8"> <title>Quiz Page</title> <script type="text/javascript"> function countDown(secs,elem) { var element = document.getElementById(elem); element.innerHTML = "You have "+secs+" seconds remaining."; if(secs < 1) { var xhr = new XMLHttpRequest(); var url = "userAnswers.php"; var vars = "radio=0"+"&qid="+<?php echo $question; ?>; xhr.open("POST", url, true); xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xhr.onreadystatechange = function() { if(xhr.readyState == 4 && xhr.status == 200) { alert("You did not answer the question in the allotted time. It will be marked as incorrect."); clearTimeout(timer); } } xhr.send(vars); document.getElementById('counter_status').innerHTML = ""; document.getElementById('btnSpan').innerHTML = '<h2>Times Up!</h2>'; document.getElementById('btnSpan').innerHTML += '<a href="quiz.php?question=<?php echo $next; ?>">Click here now</a>'; } secs--; var timer = setTimeout('countDown('+secs+',"'+elem+'")',1000); } </script> <script> function getQuestion(){ var hr = new XMLHttpRequest(); hr.onreadystatechange = function(){ if (hr.readyState==4 && hr.status==200){ var response = hr.responseText.split("|"); if(response[0] == "finished"){ document.getElementById('status').innerHTML = response[1]; } var nums = hr.responseText.split(","); document.getElementById('question').innerHTML = nums[0]; document.getElementById('answers').innerHTML = nums[1]; document.getElementById('answers').innerHTML += nums[2]; } } hr.open("GET", "questions.php?question=" + <?php echo $question; ?>, true); hr.send(); } function x() { var rads = document.getElementsByName("rads"); for ( var i = 0; i < rads.length; i++ ) { if ( rads.checked ){ var val = rads.value; return val; } } } function post_answer(){ var p = new XMLHttpRequest(); var id = document.getElementById('qid').value; var url = "userAnswers.php"; var vars = "qid="+id+"&radio="+x(); p.open("POST", url, true); p.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); p.onreadystatechange = function() { if(p.readyState == 4 && p.status == 200) { document.getElementById("status").innerHTML = ''; alert("Thanks, Your answer was submitted"+ p.responseText); var url = 'quiz.php?question=<?php echo $next; ?>'; window.location = url; } } p.send(vars); document.getElementById("status").innerHTML = "processing..."; } </script> <script> window.oncontextmenu = function(){ return false; } </script> </head> <body onload="getQuestion()"> <div id="status"> <div id="counter_status"></div> <div id="question"></div> <div id="answers"></div> </div> <script type="text/javascript">countDown(20,"counter_status");</script> </body> </html> and this code for the html/css template index.html <!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" href="style.css" /> </head> <body> <div class="BackgroundGradient"> </div> <div class="BodyContent"> <div class="BorderBorder"><div class="BorderBL"><div></div></div><div class="BorderBR"><div></div></div><div class="BorderTL"></div><div class="BorderTR"><div></div></div><div class="BorderT"></div><div class="BorderR"><div></div></div><div class="BorderB"><div></div></div><div class="BorderL"></div><div class="BorderC"></div><div class="Border"> <div class="Header"> <div class="HeaderTitle"> <h1><a href="#"><img src="images/dixons.jpg" alt=""></a></h1> <h2></h2> </div> </div><div class="Menu"> <ul><li><a href="#" class="ActiveMenuButton"><span>Home</span></a></li> <li><a href="#" class="MenuButton"><span>Tutorial</span></a></li> <li><a href="#" class="MenuButton"><span>Quiz</span></a></li> <li><a href="#" class="MenuButton"><span>Login</span></a></li></ul> </div><div class="Columns"><div class="Footer"></div> </div> </div> <p class="BackLink"><br/> </p> <p class="BackLink"> </p> <p class="BackLink"> </p> <p class="BackLink"> </p> <p class="BackLink"> </p> <p class="BackLink"> </p> <p class="BackLink"> </p> <p class="BackLink"> </p> <p class="BackLink"> </p> </body> </html> and this is the css for the webpage: body{font-family:Arial,Helvetica,sans-serif;margin:0;background:#FFFAFF;color:#000;background:#FFFAFF url('images/') repeat;} ul{margin:5px;padding-left:20px;} .BodyContent{position:relative;left:0;top:0;width:100%;margin:0 auto 0 auto;} .BackgroundGradient{position:absolute;left:0;top:0;width:100%;height:100%;z-index:-1000;background:url('images/BackgroundGradient.png') repeat-x;} .Border{position:relative;z-index:1;overflow:hidden;padding:23px 23px 23px 23px;color:#000;font-size:13px;} .Border a{color:#070007;text-decoration:underline;} .Border a:visited{color:#070007;text-decoration:underline;} .Border a:hover{color:#000;text-decoration:none;} .BorderBorder{z-index:0;position:relative;margin:5px;} .BorderTL,.BorderTR,.BorderBL,.BorderBR,.BorderL,.BorderT,.BorderR,.BorderB,.BorderC{position:absolute;z-index:-1;overflow:hidden;} .BorderTL,.BorderTR,.BorderBL,.BorderBR{width:20px;height:20px;} .BorderTL{top:0;left:0;background-image:url('images/BorderCorners.png');} .BorderTR div,.BorderBL div,.BorderBR div{ height: 80px; width: 40px; position: absolute; z-index: -1; background-image: url('images/BorderCorners.png'); } .BorderTR div{left:-20px;} .BorderBL div{top:-20px;} .BorderBR div{left:-20px;top:-20px;} .BorderTR{top:0;right:0;} .BorderBL{bottom:0;left:0;} .BorderBR{bottom:0;right:0;} .BorderT,.BorderB{left:20px;right:20px;height:20px;} .BorderT{top:0;background-image:url('images/BorderHorizontal.png');} .BorderB{bottom:0;} .BorderB div{ position: absolute; z-index: -1; top: -20px; height: 100px; width: 100%; background-image: url('images/BorderHorizontal.png'); } .BorderL,.BorderR{top:20px;bottom:20px;width:20px;} .BorderL{left:0;background-image:url('images/BorderVertical.png');} .BorderR{right:0;} .BorderR div{position:absolute;z-index:-1;left:-20px;width:40px;height:100%;background-image:url('images/BorderVertical.png');} .BorderC{left:20px;top:20px;right:20px;bottom:20px;background-image:url('images/BorderCenter.png');} .BorderBorder{width:750px;margin:10px auto;} .Header{position:relative;background-image:url('images/Header.png');background-repeat:no-repeat;padding:0;height:150px;color:#FFF;} .HeaderTitle{height:150px;width:750px;display:table-cell;text-align:Right;vertical-align:Bottom;color:#FFF;font-size:18px;text-decoration:none;font-style:normal;font-weight:bold;} .HeaderTitle h1 a,.HeaderTitle h1 a:link,.HeaderTitle h1 a:visited,.HeaderTitle h1 a:hover{text-decoration:none;color:inherit;} .HeaderTitle h1{margin:0;padding:0 8px;color:#FFF;font-size:26px;text-decoration:none;font-style:normal;font-weight:bold;} .HeaderTitle h2{margin:0;padding:0 8px;font-size:inherit;font-weight:inherit;} .Menu{background:transparent url('images/MenuBar.png') no-repeat;padding:5px 5px 0 5px;margin:0;text-align:left;} .Menu ul{list-style-type:none;padding:0;margin:0;color:#FFF;} .Menu li{display:inline;padding:0;margin:0;} .MenuButton,.MenuButtonInput{border:0;margin:0;background:transparent url('images/MenuButtonAnchor.png') no-repeat top left;position:relative;overflow:hidden;height:25px;padding:0 0 0 18px;display:inline-block;color:#FFF;font-size:13px;vertical-align:middle;zoom:1;} .MenuButton span,.MenuButtonInput span{border:0;margin:0;background:transparent url('images/MenuButton.png') no-repeat right top;display:block;position:relative;color:#FFF;line-height:15px;} .MenuButton span{padding:5px 18px 5px 0;} .MenuButtonInput span{padding:0 18px 0 0;height:25px;} .MenuButtonInput input{color:#FFF;font-size:13px;color:inherit;height:25px;padding:0 18px;margin:0 -18px;overflow:visible;cursor:pointer;background:Transparent;border:0;*left:-18px;} .MenuButtonInput::-moz-focus-inner,input[type=reset]::-moz-focus-inner,input[type=button]::-moz-focus-inner,input[type=submit]::-moz-focus-inner,input[type=file]>input[type=button]::-moz-focus-inner{border:none;} .MenuButton,.MenuButton:link,.MenuButton:visited,.MenuButton:hover,.MenuButton:active{text-decoration:none!important;outline:none;} .MenuButton:hover,.MenuButtonInput:hover{background-position:left center;} .MenuButton:hover span,.MenuButtonInput:hover span{background-position:right center;color:#000;} .MenuButton:active,.MenuButtonInput:active{background-position:left bottom;} .MenuButton:active span,.MenuButtonInput:active span{background-position:right bottom;color:#000;} .ActiveMenuButton,.ActiveMenuButtonInput{border:0;margin:0;background:transparent url('images/ActiveMenuButtonAnchor.png') no-repeat top left;position:relative;overflow:hidden;height:25px;padding:0 0 0 18px;display:inline-block;color:#000;font-size:13px;vertical-align:middle;zoom:1;} .ActiveMenuButton span,.ActiveMenuButtonInput span{border:0;margin:0;background:transparent url('images/ActiveMenuButton.png') no-repeat right top;display:block;position:relative;color:#000;line-height:15px;} .ActiveMenuButton span{padding:5px 18px 5px 0;} .ActiveMenuButtonInput span{padding:0 18px 0 0;height:25px;} .ActiveMenuButtonInput input{color:#000;font-size:13px;color:inherit;height:25px;padding:0 18px;margin:0 -18px;overflow:visible;cursor:pointer;background:Transparent;border:0;*left:-18px;} .ActiveMenuButtonInput::-moz-focus-inner,input[type=reset]::-moz-focus-inner,input[type=button]::-moz-focus-inner,input[type=submit]::-moz-focus-inner,input[type=file]>input[type=button]::-moz-focus-inner{border:none;} .ActiveMenuButton,.ActiveMenuButton:link,.ActiveMenuButton:visited,.ActiveMenuButton:hover,.ActiveMenuButton:active{text-decoration:none!important;outline:none;} .ActiveMenuButton:hover,.ActiveMenuButtonInput:hover{background-position:left center;} .ActiveMenuButton:hover span,.ActiveMenuButtonInput:hover span{background-position:right center;color:#000;} .ActiveMenuButton:active,.ActiveMenuButtonInput:active{background-position:left bottom;} .ActiveMenuButton:active span,.ActiveMenuButtonInput:active span{background-position:right bottom;color:#000;} .Columns{overflow:hidden;} .MainColumn{overflow:hidden;} img{border:0;} h2{margin:0;} blockquote{width:80%;color:#000;border:solid 1px #5F075F;background:#FFF;margin:0 auto;padding:15px;-webkit-border-radius:5px;-moz-border-radius:5px;} blockquote a,blockquote a:link{color:#070007!important;text-decoration:underline;} blockquote a:visited{color:#070007!important;text-decoration:underline;} blockquote a:hover{color:#000!important;text-decoration:none;} .Article{position:relative;z-index:1;overflow:hidden;padding:10px 10px 10px 10px;color:#000;font-size:13px;} .Article a{color:#606;text-decoration:underline;} .Article a:visited{color:#606;text-decoration:underline;} .Article a:hover{color:#000;text-decoration:none;} .ArticleBorder{z-index:0;position:relative;margin:5px;} .Button,.ButtonInput{border:0;margin:0;background:transparent url('images/ButtonAnchor.png') no-repeat top left;position:relative;overflow:hidden;height:29px;padding:0 0 0 21px;display:inline-block;color:#FFF;font-size:13px;vertical-align:middle;zoom:1;} .Button span,.ButtonInput span{border:0;margin:0;background:transparent url('images/Button.png') no-repeat right top;display:block;position:relative;color:#FFF;line-height:13px;} .Button span{padding:8px 21px 8px 0;} .ButtonInput span{padding:0 21px 0 0;height:29px;} .ButtonInput input{color:#FFF;font-size:13px;color:inherit;height:29px;padding:0 21px;margin:0 -21px;overflow:visible;cursor:pointer;background:Transparent;border:0;*left:-21px;} .ButtonInput::-moz-focus-inner,input[type=reset]::-moz-focus-inner,input[type=button]::-moz-focus-inner,input[type=submit]::-moz-focus-inner,input[type=file]>input[type=button]::-moz-focus-inner{border:none;} .Button,.Button:link,.Button:visited,.Button:hover,.Button:active{text-decoration:none!important;outline:none;} .Button:hover,.ButtonInput:hover{background-position:left center;} .Button:hover span,.ButtonInput:hover span{background-position:right center;color:#000;} .Button:active,.ButtonInput:active{background-position:left bottom;} .Button:active span,.ButtonInput:active span{background-position:right bottom;color:#000;} .Footer{color:#FFF;font-size:13px;text-align:Center;background:url('images/Footer.png') bottom left;overflow:hidden;padding:5px 5px;} .Footer a{color:#FFF;text-decoration:underline;} .Footer a:visited{color:#FFF;text-decoration:underline;} .Footer a:hover{color:#FFF;text-decoration:none;} .BackLink{text-align:center;display:block;display:block;font-size:11px;padding:0 0 12px;color:#000;} .BackLink a{color:#000;} .h3heading{text-align:center;display:block;display:block;padding:0 0 12px;color:#000;} .clickbutton{ display:block; text-align:center; }

HI , I am begineer in the field of webdesigning. I am facing problem with a java script which is working at one places but doesnot at another. Test.php -- working fine <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript"> var clone; function cloneRow(){ var rows=document.getElementById('mytab').getElementsByTagName('tr'); var index=rows.length; clone=rows[index-1].cloneNode(true); var inputs=clone.getElementsByTagName('input'), inp, i=0,n ; while(inp=inputs[i++]){ inp.name=inp.name.replace(/\d/g,'')+(index+1); } } function addRow(){ var tbo=document.getElementById('mytab').getElementsByTagName('tbody')[0]; tbo.appendChild(clone); cloneRow(); } function addValue(obj){ obj.value=obj.value.replace(/[^\d]/,''); var fields=document.getElementsByTagName('input'), i=0, tot=0, f; while(f=fields[i++]){ f.name&&f.name.match(/cost/)?tot+=Number(f.value):null; } document.getElementsByName('sum')[0].value=tot; } onload=cloneRow; </script> </head> <body> <?php $host="localhost"; // Host name $username="root"; // Mysql username $password="root"; // Mysql password $db_name="teanest"; // Database name // Connect to server and select databse. $con=mysql_connect("$host", "$username", "$password"); if (!$con) { die('Could not connect: ' . mysql_error()); } mysql_select_db("$db_name")or die("cannot select DB"); $sql="select id,name from items order by name"; $result = mysql_query ($sql); $sql1="select id,name from suppliers order by name"; $result1=mysql_query($sql1); ?> <form action=""> <table> <tr> <td align="right">Item Name:</td> <td align="left"> </td> </tr> <tr> <td align="right">Supplier:</td> <td align="left"> <?php echo "<select name=\"suppliers\" value=''>Supplier</option>"; // printing the list box select command while($nt=mysql_fetch_array($result1)){//Array or records stored in $nt echo "<option value=$nt[id]>$nt[name]</option>"; /* Option values are added by looping through the array */ } echo "</select>";// Closing of list box ?> </td> <tr> <td align="right">Date:</td> <td align="left"><input id='start_dt' class='datepicker' name="date"/></td> </tr> <tr> <td align="right">Bill No:</td> <td align="left"><input type="text" size="10" name="billNo" /></td> </tr> </table> <table id="mytab" border="1"> <tr> <th>Sl No.</th> <th>Item Name</th> <th>Quantity</th> <th>Unit</th> <th>Cost Price</th> </tr> <tr> <td><input type="text" size="3" name="slno"></td> <td> <?php echo "<select name=\"items\" value=''>Item</option>"; // printing the list box select command while($nt=mysql_fetch_array($result)){//Array or records stored in $nt echo "<option value=$nt[id]>$nt[name]</option>"; /* Option values are added by looping through the array */ } echo "</select>";// Closing of list box ?> </td> <td><input type="text" size="4" name="quantity"></td> <td><input type="text" size="4" name="unit"></td> <td><input type="text" size="4" name="costprice" onkeyup="addValue(this)"></td> </tr> </table> <br> <input type="button" value="Add a new row" onclick="addRow()"> <p> Total: <input type="text" name="sum" readonly="readonly" value="Sum of Cost Price inputs"> </form> </body> </html> receivings.php-- doesnot work ... same javascript included in header part <?php include 'includes/header.inc.php'; ?> <div class="sidebar1"> <br><br> <ul class="nav"> <li><a href="#receive">Receive</a></li> <li><a href="#">Link two</a></li> <li><a href="#">Link three</a></li> <li><a href="#">Link four</a></li> </ul> <!-- end .sidebar1 --></div> <?php $host="localhost"; // Host name $username="root"; // Mysql username $password="root"; // Mysql password $db_name="teanest"; // Database name // Connect to server and select databse. $con=mysql_connect("$host", "$username", "$password"); if (!$con) { die('Could not connect: ' . mysql_error()); } mysql_select_db("$db_name")or die("cannot select DB"); $sql="select id,name from items order by name"; $result = mysql_query ($sql); $sql1="select id,name from suppliers order by name"; $result1=mysql_query($sql1); ?> <div id="receive" class="modalDialog"> <div> <a href="#close" title="Close" class="close">X</a> <form name="receive" method="post" action="receive.php"> <fieldset> <legend>Receive:</legend> <table> <tr> <td align="right">Supplier:</td> <td align="left"> <?php echo "<select name=\"suppliers\" value=''>Supplier</option>"; // printing the list box select command while($nt=mysql_fetch_array($result1)){//Array or records stored in $nt echo "<option value=$nt[id]>$nt[name]</option>"; /* Option values are added by looping through the array */ } echo "</select>";// Closing of list box ?> </td> <tr> <td align="right">Date:</td> <td align="left"><input id='start_dt' class='datepicker' name="date"/></td> </tr> <tr> <td align="right">Bill No:</td> <td align="left"><input type="text" size="10" name="billNo" /></td> </tr> </table> <br><br> <!--// receivings transaction table --> <table id="mytab" border="1"> <tr> <th>Sl No.</th> <th>Item Name</th> <th>Quantity</th> <th>Unit</th> <th>Cost Price</th> </tr> <tr> <td><input type="text" size="3" name="slno"></td> <td> <?php echo "<select name=\"items\" value=''>Item</option>"; // printing the list box select command while($nt=mysql_fetch_array($result)){//Array or records stored in $nt echo "<option value=$nt[id]>$nt[name]</option>"; /* Option values are added by looping through the array */ } echo "</select>";// Closing of list box ?> </td> <td><input type="text" size="4" name="quantity"></td> <td><input type="text" size="4" name="unit"></td> <td><input type="text" size="4" name="costprice" onkeyup="addValue(this)"></td> </tr> </table> <br> <input type="button" value="Add a new row" onclick="addRow()"> <p> Total: <input type="text" name="sum" readonly="readonly" value="Sum of Cost Price inputs"> </fieldset> <input type="submit" value="Receive"> </form> </div> </div> <div class="content"> <h1>List Of Receivings:</h1> </div> <!-- end .content --></div> <?php include 'includes/footer.inc.php'; ?> Please help !!!

Hey guys why do i keep getting a problem with a redirect loop... i dont know why and i just get: http://www.powerwashers.co.uk/temp/main/main/main/main/main/main/main/main/main/main/main/main/main/main/main/main/main/main/main/main/main/main/main/main/main/main/main/main/main/main/main/main/main/main/main/main/main/main/main/main/main/main/main/index.php Its mainly when i click that google link although its just been happening on most things i do... also it doesnt display in firefox :/... Can anyone help me please?. http://www.powerwashers.co.uk/temp/main/expo.php <!DOCTYPE html> <head> <title>Brendon Powerwashers - News & Exhibitions</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <meta name="language" content="en"/> <meta name="robots" content="index, follow"/> <meta name="description" content=""/> <meta name="keywords" content=""/> <link rel="stylesheet" href="stylesheet/style1.css" type="text/css"/> <link rel="stylesheet" href="stylesheet/style6.css" type="text/css"/> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/navigation_hide_show.js"></script> <script type="text/javascript" src="js/hover_script.js"></script> <script type="text/javascript" src="js/fader.js"></script> <script type="text/javascript" src="js/bg_fade.js"></script> <script type="text/javascript" src="js/jquery_script01.js"></script> <script type="text/javascript" src="js/app_fader.js"></script> <script type="text/javascript" src="js/navigation_dropdown.js"></script> </head> <body style='display:none;' class='body'> <div id="header"> <?php include('content/navigation2.php'); ?> </div> <div id="page_wrapper"> <div id="page"> <?php include('content/acc_navigation.php'); ?> <div id="fp_top2" style='margin-bottom:-3px;'> <div id="fp_nav"> <ul> <a href="#" id="fade1_link"><li>Exhibitions</li></a> <a href="#" id="fade2_link"><li>Latest News</li></a> <a><li> </li></a><!--id="fade3_link"--> <a><li> </li></a><!--id="fade4_link"--> <a><li> </li></a><!--id="fade5_link"--> <a><li> </li></a><!--id="fade6_link"--> <a><li> </li></a><!--id="fade7_link"--> </ul> </div> <div id="fader_img2"> <img id='fade1' class="fader_images" src="images/exhibition_banner.jpg" alt="Fader"/> <img id='fade2' class="fader_images" src="images/about_fader.jpg" alt="Fader"/> <img id='fade3' class="fader_images" src="images/fader/1_3.jpg" alt="Fader"/> <img id='fade4' class="fader_images" src="images/fader/1_4.jpg" alt="Fader"/> <img id='fade5' class="fader_images" src="images/fader/1_5.jpg" alt="Fader"/> <img id='fade6' class="fader_images" src="images/fader/1_6.jpg" alt="Fader"/> <img id='fade7' class="fader_images" src="images/fader/1_7.jpg" alt="Fader"/> </div> </div> <div> <div id="sheet2_1" class="fader_sheets"> <div class="white_bg"> <h1 style=" text-align:center; font-size:26px">Exhibitions</h1><br/> <?php $expire = date('Ymd'); $select_query8 = mysql_query("SELECT * FROM expos ORDER BY expire"); while($select_query_row8 = mysql_fetch_array($select_query8)){ if($select_query_row8['expire'] > $expire) { echo ' <div style="width:200px; height:300px; border:1px solid #000; float:left; margin-top:10px; margin-left:5px; margin-right:5px; margin-bottom:10px; padding:5px;"> <div style="width:300px; margin:0px auto;"><img src="images/logos/'.$select_query_row8['image_url'].'" alt="Show Logo"/></div> <h1 style="text-align:center;">'.$select_query_row8['header'].'</h1><h1 style="text-align:center; font-size:14px; margin-top:4px">('.$select_query_row8['start_day'].'/'. $select_query_row8['start_month'].'/'.$select_query_row8['start_year']. ' - '.$select_query_row8['end_day'].'/'. $select_query_row8['end_month'].'/'.$select_query_row8['end_year'].')</h1><br/>'; echo '<p style="text-align:center">'.$select_query_row8['content'].'<br/><a href="www.google.com" class="expo1" >www.google.com</a></p> </div> '; } } ?> </div> </div> <div id="sheet2_2" class="fader_sheets"> <div class="white_bg"> <h1 style=" text-align:center; font-size:26px">Latest News</h1> <p>Coming Soon...</p> </div> </div> <div id="sheet2_3" class="fader_sheets"> <div class="white_bg"> </div> </div> <div id="sheet2_4" class="fader_sheets"> <div class="white_bg"> </div> </div> <div id="sheet2_5" class="fader_sheets"> <div class="white_bg"> </div> </div> <div id="sheet2_6" class="fader_sheets"> <div class="white_bg"> </div> </div> <div id="sheet2_7" class="fader_sheets"> <div class="white_bg"> </div> </div> </div> </div> </div> <div id="background"></div> </body> </html>

Hey All, I have two divs, one floats right and the other left, right next to each other. The one of the left has a z-index, is set to absolute positioning, and has a drop shadow on its right edge so it looks like it is over the other column. The problem is that when the left div goes longer than the right it falls out of the wrapper and past the footer. I have a br tag styled with clear both to give the wrapper its height after the two floating divs. Any help with this height problem?? Thanks in advance,

Hey Guys, I've got a pop up box showing the cookie warning (for the EU laws). I've got it in the corner of the screen and that's working fine but I want to centre it to the middle of the page. This is the code that I use to place the popup overlay top right, how can I change the css to make it centred? <style> #tpmask { background-color: #000000; z-index: 9999; display: block; position: absolute; left: 0; top: 0; opacity: 0.6; height: 100%; width: 100%; } #boxes .window { right:20px; top:20px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; width:auto; height:auto; display:none; z-index:9999; padding:20px; box-shadow: 0 0 18px rgba(0, 0, 0, 0.4); } #boxes #dialog { position: absolute; width: auto; margin: auto; max-width: 800px; height: auto; _width: 0; white-space: normal; overflow: visible; padding: 10px; font-family: 'Lucida Grande', Arial, 'Arial Unicode MS', Helvetica, sans-serif !important; color: #FFFFFF; font-size:13px !important; } #dialog a:link, a:visited, a:hover { color: #000000 } *html #boxes .window { position: absolute; } #boxes .window .close { background-attachment: scroll; background-clip: border-box; background-color: transparent; background-image: url('images/close.png'); background-origin: padding-box; background-position: 0% 0%; background-repeat: no-repeat; background-size: auto; height: 36px; right: -19px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; position: absolute; top: -19px; width: 36px; } </style>

I have a sidebar on a page, this will contain facebook and twitter feeds, however if I put jquery tabs on the page outside of the sidebar, the tab content only shows after the height of the sidebar HTML <div id="sidebar1"> <h3>Sidebar1 Content</h3> <p>The background color on this div will only show for the length of the content. If you'd like a dividing line instead, place a border on the right side of the #mainContent div if it will always contain more content. </p> <p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p> <!-- end #sidebar1 --><!--</div> --> <div id="mainContent"><!-- InstanceBeginEditable name="main-content" --> <h1>Charges</h1> <div id="tabs"> <ul> <li><a href="#tabs-1">Details</a></li> <li><a href="#tabs-2">Feedback</a></li> </ul> <div id="tabs-1"> <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p> </div> <div id="tabs-2"> <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p> </div> </div> sidebar css .twoColFixRtHdr #sidebar1 { float: right; /* since this element is floated, a width must be given */ width: 200px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */ padding: 15px 10px; } any ideas why?

Hi, I want to scrolling down all posts in homepage. I have installed this plugin http://wordpress.org/extend/plugins/infinite-scroll/. But i could't configure the CSS settings in the infinite-scroll setting for my theme. Here is my site http://www.adventureseeker.org/ Need help. Thanks in advance. Regards.

*I wasnt quite sure what forum to put this at, so since im coding in PHP i posted it here* I am currently creating a League of Legends Champion site where i want it to when i hover over a Champion (Character) i want its counters to get a red/green border (depending on if the champion is good against it or the champion itself is good vs it) So i started using the CSS:hover way, but looking at this i cant help but to notice that it will require a whole lot of code, so im kinda wondering if theres another way of doing it with like Jquery or plain javascript (Maybe even a PHP Function?) I got all the counters stored in a Database Built up as following: CREATE TABLE `counters` ( `Name` TEXT NULL, `Counter 1` TEXT NULL, `Counter 2` TEXT NULL, `Counter 3` TEXT NULL, `Counter 4` TEXT NULL, `Counter 5` TEXT NULL, `Counters 1` TEXT NULL, `Counters 2` TEXT NULL, `Counters 3` TEXT NULL, `Counters 4` TEXT NULL, `Counters 5` TEXT NULL, `Good With 1` TEXT NULL, `Good With 2` TEXT NULL, `Good With 3` TEXT NULL, `Good With 4` TEXT NULL, `Good With 5` TEXT NULL ) i already know how to fetch the data and such, so thats not the problem (just included this if it would be usefull in anyway) But ye, to summarize it im asking if theres another way to do it with Javascript/PHP or anything like that, and also if you would be kind enough to give me a hint about how to do that (i dont need you to write the whole code since i enjoy that myself) but simply a hint on how to do it. And also once again i apologize if this is the wrong part of the forum to put it (move it if needed)

<div id="logo"><img src="logo.jpg"</div> <div id="login">login page </div> <table> <tr><td >Name</td><td width><input type=text name=myname></td></tr> <tr><td>Age</td><td><input type=text name=myage></td></tr> <tr> <td> </td> <td><input type=submit value=submit> <input name="Reset" type=reset value=Reset></td> </tr> </table> </div> css code is #logo { float:left; width: 50px; height:10px; } #login { width:100%; font:"Courier New", Courier, mono; font_size:50px; height:50px; margin_left:150px; background:blue; margin_top:10px;

Hi Everyone, I am having trouble with something that I would think should be reasonably simple: On a standard webpage there is a automatic 5px (approx) white space stretching around all sides of the page. I would like to be able to make div elements on my page stretch to the very edge. Does anyone know how to do this in HTML or CSS. Thanks in advance, Timothy

Hello All, I was wondering if anyone had some fluid techniques for nav bars. I want to evenly distribute each li in the nav bar and have them be fluid. Structure like the following: <nav id="nav" class="width"> <div id="slide" class="body"> <ul id="bar"> <li><a href="#">NEWS</a></li> <li><a href="#">SPORTS</a></li> <li><a href="#">OPINION</a></li> <li><a href="#">LIFESTYLES</a></li> <li><a href="#">A&E</a></li> <li><a href="#">BLOG</a></li> <li><a href="#">ABOUT</a></li> </ul> </div> </nav> the width class is 100% and the body is 80% centered with the margin 0px auto. I need to know the padding for each li to make it fluid and evenly distributed through the ul bar. Thanks in advance!

Hello, I am trying to output a grid of 3 columns (even if there is only 2 rows returned from the database) similar to a data table, but with divs instead. The data is coming from the database. Below is my current code (which is not working): <?php $end_row = 0; $columns = 3; $loop = 0; foreach ($events as $event) { if ($end_row == 0 && $loop++ != 0) { ?> <div class="left13 section_home"> <?php } ?> <h2><?php echo $event['event_title']; ?></h2> <a href="#"><img src="<?php echo ($event['photo_thumbnail'] != '') ? base_url() . 'media/photos/thumbnail/' . $event['photo_thumbnail'] : base_url() . 'images/no_photo_thumbnail.png'; ?>" alt="" title="" /></a> <p><?php echo ($event['event_description'] != '') ? substr($event['event_description'], 0, strpos($event['event_description'], ' ', 200)) : 'No description yet...'; ?></p> <a href="#" class="section_more"><span class="swirl_left"><span class="swirl_right">View This Event</span></span></a> <?php $end_row++; if($end_row >= $columns) { ?> </div> <?php $end_row = 0; } } if ($end_row != 0) { while ($end_row < $columns) { ?> <div class="left13 section_home"> </div> <?php $end_row++; } ?> <?php } ?> Here is how it should look. How can I adjust my current code to get this? <div class="left13 section_home"> <h2>Wedding <span>Location</span></h2> <a href="#"><img src="images/image_13.jpg" alt="" title="" /></a> <p>Ut enim ad minima veniam, quis nostru <strong>exercitationem</strong> ullam corporis laboriosam, nisi ut aliquid ex ea commodi <strong><a href="#">consequatur</a></strong> </p> <a href="#" class="section_more"><span class="swirl_left"><span class="swirl_right">read more</span></span></a> </div> <div class="left13 section_home"> <h2>Honeymoon <span>Destination</span></h2> <a href="#"><img src="images/image_13_2.jpg" alt="" title="" /></a> <p>Ut enim ad minima veniam, quis nostru <strong>exercitationem</strong> ullam corporis laboriosam, nisi ut aliquid ex ea commodi <strong><a href="#">consequatur</a></strong> </p> <a href="#" class="section_more"><span class="swirl_left"><span class="swirl_right">read more</span></span></a> </div> <div class="left13 section_home"> <h2>Girft <span>Registry</span></h2> <a href="#"><img src="images/image_13_3.jpg" alt="" title="" /></a> <p>Ut enim ad minima veniam, quis nostru <strong>exercitationem</strong> ullam corporis laboriosam, nisi ut aliquid ex ea commodi <strong><a href="#">consequatur</a></strong> </p> <a href="#" class="section_more"><span class="swirl_left"><span class="swirl_right">read more</span></span></a> </div>

Hi. I have a page set up with a large box in the middle. I want to display content pulled from my server in a repeating sequence, in say, 4 items per row, and as many rows as needed to display all the relevant data. The relevant data will be defined by the bottom part of the box, where you have 12 tabs to choose from, each signifying a category for the dynamic content to filter by. IE: <?php $relevantData = mysql_query("SELECT * FROM table WHERE 'category' = '$CurrentCategory' "); while($row = mysql_fetch_array($relevantData)){ //list array here } ?> So each tab at the bottom links the user to: "thispage.php?cat=$whateverCategoryIsSelected" When that tab is active, an active tab graphic is the background for the tab, it just looks like its the page/section youre on. When no on the tab, it looks like a page tab underneath the current tab. Clicking an inactive tab would make it active and link you to another category. THE PROBLEM: After spending the last 6 hours banging my head against a wall trying to figure out how to do this, expending various resources including tenuous google searchs and hundreds of php, html, css, guides, I come here, to see if some really super awesome individual would be willing to help me out. Any help would be greatly appreciated! You can contact me at: Skype: xxEndtimesxx email: endtimes@moxiegaming.com

Hi, I have to center a div in an absolute parent div. The usual suspect giving a width and adding margin:0 auto doesn't work. It "sorta" works if I put left:25% in the div I'm trying to center, but it doesn't adjust if I resize the screen. How do I do this? <div id="rest"> <div class="wrap-reset"> some content in center.. </div> </div> .wrap-reset { width:960px; position:relative; margin:0px; } #rest { position:absolute; top:0px; } Thanks,