Jump to content

TonyR

Members
  • Content Count

    26
  • Joined

  • Last visited

Everything posted by TonyR

  1. Hi I have managed to get a clear button working in an input field but I do not know how to get to appear only when there is text in the field. You can see what I have at the moment here: https://codepen.io/TonyRuttle/pen/EJNyVN I am not sure if this is a CSS issue but a JS topic but I have added this topic in the CSS category. Tony
  2. Thank you requinix. This is working perfectly. Duly noted regarding the id/class. I have edited the above link to add your changes.
  3. Hi I am having a problem with my form output. No matter what I search I get "No matching records". Even if I am searching words that I know should return a result. Any help would be much appreciated <?php define("PERPAGE", 15); // number of records on each page /************************************************************************************** * function to output page selection buttons * * @param int $total total records * @param int $page current page number * @return string selection buttons html */ function page_selector($total, $page) { if ($total==0) { return ''; } $kPages = ceil($total/PERPAGE); $filler = '&nbsp;&middot;&nbsp;&middot;&nbsp;&middot;&nbsp;'; $lim1 = max(1, $page-2); $lim2 = min($kPages, $page+3); $p = $page==1 ? 1 : $page - 1; $n = $page== $kPages ? $kPages : $page + 1;; $out = "$kPages page" . ($kPages==1 ? '' : 's') . " &emsp;"; if ($kPages==1) { return $out; } $out .= ($page > 1) ? "<div class='pagipage' data-pn='$p'>Prev</div>&ensp;" : ''; if ($page > 4) { $out .= "<div class='pagipage' data-pn='1'>1</div> $filler"; } elseif ($page==4) { $out .= "<div class='pagipage' data-pn='1'>1</div>"; } for ($i=$lim1; $i<=$lim2; $i++) { if ($page==$i) $out .= "<div class='pagicurrent'>$i</div>"; else $out .= "<div class='pagipage' data-pn='$i'>$i</div>"; } if ($page < $kPages-3) { $out .= "$filler <div class='pagipage' data-pn='$kPages'>$kPages</div>"; } $out .= $page < $kPages ? "&ensp;<div class='pagipage' data-pn='$n'>Next</div>" : ''; return $out; } /*********************************************** ** SEARCH FOR MATCHING TVS ************************************************/ $showResults = 0; $search = ''; if (isset($_GET['tag'])) { $showResults = 1; $search = $_GET['tag']; $srch = array_unique(explode(' ', trim($_GET['tag']))); foreach ($srch as $t) { $repl[] = "<span class='hilite'>$t</span>"; $placeholders[] = '?'; $params[] = $t; } $params[] = count($srch); // // FINDTOTAL RECORDS IN SEARCH RESULTS // $res = $db->prepare("SELECT COUNT(*) as tot FROM television WHERE MATCH(title,description,keywords) AGAINST(? IN BOOLEAN MODE) "); $res->execute($params); $total = $res->fetchColumn(); $page = $_GET['page'] ?? 1; $params[] = ($page-1)*PERPAGE; // append parameters offset $params[] = PERPAGE; // and number of records for limit clause // // GET A PAGEFUL OF RECORDS // $sql = "SELECT id , title , description , keywords FROM television WHERE MATCH(title,description,keywords) AGAINST(? IN BOOLEAN MODE) ORDER BY TITLE LIMIT ?,? "; $stmt = $db->prepare($sql); $stmt->execute($params); if ($stmt->rowCount()==0) { $results = "<h3>No matching records</h3>"; } else { $results = "<tr><th>Product Id</th><th>Title</th><th>Description</th><th>Tags</th><th>Edit</th></tr>\n"; foreach ($stmt as $rec) { $alltags = str_replace($srch, $repl, $rec['keywords']); $results .= "<tr><td>{$rec['id']}</td><td>{$rec['title']}</td><td>{$rec['description']}</td><td>$alltags</td> <td><a href='?action=edit&id={$rec['id']}'><img src='edit-icon.png' alt='edit'></a></td> </tr>\n"; } } } ?> <div id='title'>Television Search</div> <form id='form1'> <fieldset> <legend>Search for tags</legend> <input type='text' name='tag' size='50' value='<?=$search?>' placeholder='Search for...' > <input type="hidden" name="page" id="page" value="1"> <input type="hidden" name="action" id="page" value="search"> <input type="submit" name="btnSub" value="Search"> </fieldset> <div id='formfoot'></div> </form> <?php if ($showResults) { ?> <div class="paginate_panel"> <?=page_selector($total, $page)?> </div> <table border='1'> <?=$results?> </table> <?php } ?>
  4. TonyR

    Problem with form output

    Thank you Psycho for your reply. What I am trying to do is join two pieces of code together to make a search form. Both Code A and Code B work but what I would like to do is to add Code B to Code A. I have tried to remove parts of Code A and insert the code from Code B which is where I am at in the original post above. No matter what I search I get "No matching records". CODE A <?php define("PERPAGE", 15); // number of records on each page /************************************************************************************** * function to output page selection buttons * * @param int $total total records * @param int $page current page number * @return string selection buttons html */ function page_selector($total, $page) { if ($total==0) { return ''; } $kPages = ceil($total/PERPAGE); $filler = '&nbsp;&middot;&nbsp;&middot;&nbsp;&middot;&nbsp;'; $lim1 = max(1, $page-2); $lim2 = min($kPages, $page+3); $p = $page==1 ? 1 : $page - 1; $n = $page== $kPages ? $kPages : $page + 1;; $out = "$kPages page" . ($kPages==1 ? '' : 's') . " &emsp;"; if ($kPages==1) { return $out; } $out .= ($page > 1) ? "<div class='pagipage' data-pn='$p'>Prev</div>&ensp;" : ''; if ($page > 4) { $out .= "<div class='pagipage' data-pn='1'>1</div> $filler"; } elseif ($page==4) { $out .= "<div class='pagipage' data-pn='1'>1</div>"; } for ($i=$lim1; $i<=$lim2; $i++) { if ($page==$i) $out .= "<div class='pagicurrent'>$i</div>"; else $out .= "<div class='pagipage' data-pn='$i'>$i</div>"; } if ($page < $kPages-3) { $out .= "$filler <div class='pagipage' data-pn='$kPages'>$kPages</div>"; } $out .= $page < $kPages ? "&ensp;<div class='pagipage' data-pn='$n'>Next</div>" : ''; return $out; } /*********************************************** ** SEARCH FOR MATCHING PRODUCTS ************************************************/ $showResults = 0; $search = ''; if (isset($_GET['tag'])) { $showResults = 1; $search = $_GET['tag']; $srch = array_unique(explode(' ', trim($_GET['tag']))); foreach ($srch as $t) { $repl[] = "<span class='hilite'>$t</span>"; $placeholders[] = '?'; $params[] = $t; } $params[] = count($srch); // // FINDTOTAL RECORDS IN SEARCH RESULTS // $res = $db->prepare("SELECT COUNT(*) as tot FROM ( SELECT id FROM ( SELECT v.id , v.title , GROUP_CONCAT(tag SEPARATOR ' ') as alltags FROM product v JOIN product_tag t ON v.id = t.product_id GROUP BY v.id ) v JOIN product_tag t ON v.id = t.product_id WHERE tag IN (" . join(",", $placeholders) . ") GROUP BY id HAVING COUNT(t.tag) = ? ) found; "); $res->execute($params); $total = $res->fetchColumn(); $page = $_GET['page'] ?? 1; $params[] = ($page-1)*PERPAGE; // append parameters offset $params[] = PERPAGE; // and number of records for limit clause // // GET A PAGEFUL OF RECORDS // $sql = "SELECT id , title , alltags FROM ( SELECT v.id , v.title , GROUP_CONCAT(tag SEPARATOR ' ') as alltags FROM product v JOIN product_tag t ON v.id = t.product_id GROUP BY v.id ) v JOIN product_tag t ON v.id = t.product_id WHERE tag IN (" . join(",", $placeholders) . ") GROUP BY id HAVING COUNT(t.tag) = ? LIMIT ?,? "; $stmt = $db->prepare($sql); $stmt->execute($params); if ($stmt->rowCount()==0) { $results = "<h3>No matching records</h3>"; } else { $results = "<tr><th>Product Id</th><th>Title</th><th>Tags</th><th>Edit</th></tr>\n"; foreach ($stmt as $rec) { $alltags = str_replace($srch, $repl, $rec['alltags']); $results .= "<tr><td>{$rec['id']}</td><td>{$rec['title']}</td><td>$alltags</td> <td><a href='?action=edit&id={$rec['id']}'><img src='edit-icon.png' alt='edit'></a></td> </tr>\n"; } } } ?> <div id='title'>Product Search</div> <form id='form1'> <fieldset> <legend>Search for tags</legend> <input type='text' name='tag' size='50' value='<?=$search?>' placeholder='Search for...' > <input type="hidden" name="page" id="page" value="1"> <input type="hidden" name="action" id="page" value="search"> <input type="submit" name="btnSub" value="Search"> </fieldset> <div id='formfoot'></div> </form> <?php if ($showResults) { ?> <div class="paginate_panel"> <?=page_selector($total, $page)?> </div> <table border='1'> <?=$results?> </table> <?php } ?> CODE B $txt = $_GET['search'] ?? ''; $whereclause = ''; $search_values = []; if (isset($_GET['search'])) { $where = ['active <> 0']; $search_values = []; if ($_GET['search'] != '') { $words = array_filter(explode(' ', $_GET['search'])); $badft = array_filter($words, function($v) { return strlen($v) <= 3;}); $goodft = array_filter($words, function($v) { return strlen($v) > 3;}); array_walk($goodft, function(&$v, $k) { // add the +'s to the search tags $v = '+'.$v; }); if ($goodft) { $srch = join(' ', $goodft); $where[] = "MATCH (title, description, keywords) AGAINST (? IN BOOLEAN MODE)"; $search_values[] = $srch; } foreach ($badft as $w) { $w = trim($w, ', '); $where[] = "((title LIKE ?) OR (description LIKE ?) OR (keywords LIKE ?))"; array_push($search_values, "%$w%", "%$w%", "%$w%"); } } if ($where) { $whereclause = "WHERE " . join(' AND ', $where); } } $count = $db->prepare("SELECT COUNT(*) FROM television $whereclause "); $count->execute( $search_values ); $total_recs = $count->fetchColumn(); $page = isset($_GET['page']) ? $_GET['page'] : 1; if (intval($page) == 0) $page = 1; $offset = ($page - 1) * PERPAGE; $limit = PERPAGE; array_push($search_values, $offset, $limit); // add offset and limit to the search parameters $stmt = $db->prepare("SELECT image , title , description , url , id FROM television $whereclause ORDER BY upload DESC LIMIT ?,? "); $stmt->execute( $search_values ); $search_results = ''; if ($txt) { foreach ($stmt as $row) { $search_results .= '<li> <a href="' . 'product.php?id=' . $row['id'] . '"><img src="' . $row['image'] . '" class="thumbnail" alt="' . $row['title'] . '"></a> <div> <h1><a href="' . 'product.php?id=' . $row['id'] . '">' . $row['title'] . '</a></h1> <p>' . $row['description'] . '</p> </div> </li>' . PHP_EOL; } $search_msg = count($rows) > 0 ? "$total_recs products found" : "Please check your spelling or try a more generic search term"; } else { $total_recs = 0; $search_msg = "Please enter your search text."; }
  5. TonyR

    Problem with form output

    Apologies to start this up again but I had some personal problems at home which meant I had to stop my coursework. My college had made arrangements for me to restart this after the Easter holidays but I felt I wanted to get back into this. I really have racked my brains trying to figure out the issue with the $params but to no avail. Any more help please?
  6. TonyR

    Problem with form output

    Thank you Barand and mac_gyver for your replies. I guess I’ll go back to looking at the $params and not any other issues with the code.
  7. TonyR

    Problem with form output

    Unfortunately my teacher would not fix the code for me so I am back. After doing some reading online I read that I cannot use placeholders for table names, column names or limit values. So LIMIT ?,? is not correct as well as the $param issue that you have mentioned. Is that correct?
  8. TonyR

    Problem with form output

    My php knowledge is very limited (it is improving) but unfortunately this bug is too difficult for me. I wish I had seen your post this morning before I went to college. Then I could've asked my teacher for some help. I will tell him tomorrow morning that the issue is with the $params and hopefully he will help me. If not, I'm sure I will be back here. Thank you requinix.
  9. Hi I am struggling to connect to my database and was wondering if someone could please help me. I am not sure what I need to put on line 10 in this code <?php define('DB_HOST', 'localhost'); define('DB_USER', 'root'); define('DB_PASS', ''); define('DB_NAME', 'tonyruttle'); define("PERPAGE", 10); $mydb = (DB_HOST, DB_USER, DB_PASS, DB_NAME); /*********************************************** ** SEARCH FOR MATCHING PRODUCTS ************************************************/ $showResults = 0; $search = ''; if (isset($_GET['srch'])) { $search = $_GET['srch']; $showResults = 1; $srch = array_filter(array_unique(explode(' ', trim($_GET['srch'])))); array_walk($srch, function(&$v, $k) { // add the +'s to the search tags $v = '+'.$v; }); $tagparam = join(' ', $srch); // // FINDTOTAL RECORDS IN SEARCH RESULTS // $params[] = $tagparam; $res = $db->prepare("SELECT COUNT(*) as tot FROM television p WHERE MATCH(title,keywords) AGAINST(? IN BOOLEAN MODE) "); $res->execute( $params ); $total = $res->fetchColumn(); $page = $_GET['page'] ?? 1; $params[] = ($page-1)*PERPAGE; // append parameters offset $params[] = PERPAGE; // and number of records for limit clause // // GET A PAGEFUL OF RECORDS // $sql = "SELECT id , title , active FROM television p WHERE MATCH(title,keywords) AGAINST(? IN BOOLEAN MODE) ORDER BY TITLE LIMIT ?,? "; $stmt = $db->prepare($sql); $stmt->execute($params); if ($stmt->rowCount()==0) { $results = "<h3>No matching records</h3>"; } else { $results = "<tr><th>Product Id</th><th>Title</th><th>Active</th><th colspan='2'>Action</th></tr>\n"; foreach ($stmt as $rec) { $cls = $rec['active']==0 ? "class='inactive'" : ''; $results .= "<tr $cls><td>{$rec['id']}</td><td>{$rec['title']}</td><td class='ca'>{$rec['active']}</td> <td class='ca'><a href='?action=edit&id={$rec['id']}'><img src='images/edit-icon.png' alt='edit'></a></td> </tr>\n"; } } } ?> <div id='title'>Product List</div> <form id='form1' "> <fieldset> <legend>Search titles and tags</legend> <input type='text' name='srch' id='srch' size='50' value='<?=$search?>' placeholder='Search for...' > <input type="hidden" name="page" id="page" value="1"> <input type="hidden" name="action" value="search"> <input type="submit" name="btnSub" value="Search"> </fieldset> <div id='formfoot'></div> </form> <?php if ($showResults) { ?> <div class="paginate_panel"> <?=page_selector($total, $page, PERPAGE)?> </div> <table border='1'> <?=$results?> </table> <?php } ?>
  10. TonyR

    Problem with form output

    Thank you requinix for the reply. Excuse my ignorance but do you mean this: <?php $host = 'localhost'; $username = 'root'; $password = ''; $database = 'tonyruttle'; $dsn = "mysql:dbname=$database; host=$host; charset=utf8"; $db = new pdo($dsn, $username, $password, [ PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION, PDO::ATTR_EMULATE_PREPARES => false, PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC ]); If you do then I'm still getting the same results.
  11. TonyR

    Error connecting to database

    I managed to get rid of that error. For anyone else who gets this error basically the MATCH clause should be in the same order as the fulltext index and include all the fulltext indexes.
  12. TonyR

    Error connecting to database

    I will definitely do what you recommended and remove some variables and run the query directly. Also I am interested in you saying that this is a SQL error. Does that mean the PHP code has no errors? I have been struggling with this code for around a week now so I'll be very pleased to know the code is clean.
  13. TonyR

    Error connecting to database

    When I do SHOW INDEX FROM television it comes back with PRIMARY id FT title FT description FT keywords
  14. TonyR

    Error connecting to database

    Thank you NotionCommotion for the reply. I have managed to connect to the database. I am now having a fatal error. I understand the error but just don't know how to fix it. The fulltext columns in my database are title, description and keywords. Uncaught PDOException: SQLSTATE[HY000]: General error: 1191 Can't find FULLTEXT index matching the column list on line 65 <?php define("PERPAGE", 15); // number of records on each page /************************************************************************************** * function to output page selection buttons * * @param int $total total records * @param int $page current page number * @return string selection buttons html */ function page_selector($total, $page) { if ($total==0) { return ''; } $kPages = ceil($total/PERPAGE); $filler = '&nbsp;&middot;&nbsp;&middot;&nbsp;&middot;&nbsp;'; $lim1 = max(1, $page-2); $lim2 = min($kPages, $page+3); $p = $page==1 ? 1 : $page - 1; $n = $page== $kPages ? $kPages : $page + 1;; $out = "$kPages page" . ($kPages==1 ? '' : 's') . " &emsp;"; if ($kPages==1) { return $out; } $out .= ($page > 1) ? "<div class='pagipage' data-pn='$p'>Prev</div>&ensp;" : ''; if ($page > 4) { $out .= "<div class='pagipage' data-pn='1'>1</div> $filler"; } elseif ($page==4) { $out .= "<div class='pagipage' data-pn='1'>1</div>"; } for ($i=$lim1; $i<=$lim2; $i++) { if ($page==$i) $out .= "<div class='pagicurrent'>$i</div>"; else $out .= "<div class='pagipage' data-pn='$i'>$i</div>"; } if ($page < $kPages-3) { $out .= "$filler <div class='pagipage' data-pn='$kPages'>$kPages</div>"; } $out .= $page < $kPages ? "&ensp;<div class='pagipage' data-pn='$n'>Next</div>" : ''; return $out; } /*********************************************** ** SEARCH FOR MATCHING TVS ************************************************/ $showResults = 0; $search = ''; if (isset($_GET['tag'])) { $showResults = 1; $search = $_GET['tag']; $srch = array_unique(explode(' ', trim($_GET['tag']))); foreach ($srch as $t) { $repl[] = "<span class='hilite'>$t</span>"; $placeholders[] = '?'; $params[] = $t; } $params[] = count($srch); // // FINDTOTAL RECORDS IN SEARCH RESULTS // $res = $db->prepare("SELECT COUNT(*) as tot FROM television p WHERE MATCH(title,keywords) AGAINST(? IN BOOLEAN MODE) "); $res->execute($params); $total = $res->fetchColumn(); $page = $_GET['page'] ?? 1; $params[] = ($page-1)*PERPAGE; // append parameters offset $params[] = PERPAGE; // and number of records for limit clause // // GET A PAGEFUL OF RECORDS // $sql = "SELECT id , title , keywords FROM television p WHERE MATCH(title,keywords) AGAINST(? IN BOOLEAN MODE) ORDER BY TITLE LIMIT ?,? "; $stmt = $db->prepare($sql); $stmt->execute($params); if ($stmt->rowCount()==0) { $results = "<h3>No matching records</h3>"; } else { $results = "<tr><th>Product Id</th><th>Title</th><th>Tags</th><th>Edit</th></tr>\n"; foreach ($stmt as $rec) { $alltags = str_replace($srch, $repl, $rec['keywords']); $results .= "<tr><td>{$rec['id']}</td><td>{$rec['title']}</td><td>$alltags</td> <td><a href='?action=edit&id={$rec['id']}'><img src='edit-icon.png' alt='edit'></a></td> </tr>\n"; } } } ?> <div id='title'>Television Search</div> <form id='form1'> <fieldset> <legend>Search for tags</legend> <input type='text' name='tag' size='50' value='<?=$search?>' placeholder='Search for...' > <input type="hidden" name="page" id="page" value="1"> <input type="hidden" name="action" id="page" value="search"> <input type="submit" name="btnSub" value="Search"> </fieldset> <div id='formfoot'></div> </form> <?php if ($showResults) { ?> <div class="paginate_panel"> <?=page_selector($total, $page)?> </div> <table border='1'> <?=$results?> </table> <?php } ?>
  15. TonyR

    Position of navigation menu dropdown

    Thank you so much for your help requinix. I'm sure with your advice I will resolve the issue no problem. I have already managed to change the markup to include UL/LI instead of just A links. Best regards Tony
  16. I have created a navigation menu bar with a dropdown on one of the links but I am having trouble getting the position correct. Here is my code: http://www.onlineavenue.com/code/ As you can see the dropdown appears within the navigation bar but I would like to get the dropdown menu to align with the bottom of the nav bar. In this page here : http://www.onlineavenue.com/code/index2.html I have added margin-top 8px to the dropdown-content ID which does align the dropdown, but when I hover the mouse over the sub menu links the dropdown disappears before having the chance to select the link. Any help would be greatly appreciated. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1"> <title>OnlineAvenue.com</title> </head> <body> <div id="block-wrapper"> <div id="block-container"> <div id="menu"> <div> <ul> <li><a href="#home">Home</a></li> <li><a href="#about">About Us</a></li> <li id="dropdown"> <a href="javascript:void(0)">Videos <span id="caret"></span></a> <div id="dropdown-content"> <a href="#full">Full Videos</a> <a href="#clips">Small Clips</a> </div> </li> <li><a href="#contact">Contact</a></li> </ul> </div> </div><!--menu--> <div id="text-container"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vehicula imperdiet euismod. Integer a odio consectetur, sodales mi eu, condimentum dolor. Vivamus a vestibulum nibh. Pellentesque quam leo, viverra non felis quis, congue fermentum libero. Ut finibus, justo a ornare elementum, nulla ex tempor magna, at interdum lacus dui nec tortor. Donec nibh nulla, placerat in purus quis, luctus vestibulum ante.</p> <p>Mauris vulputate ultricies lacus, sit amet commodo quam pretium ut. Donec eros ligula, porta ac mauris tristique, iaculis vulputate leo. Donec at quam nec sem mollis dignissim. Nulla sodales euismod ex vel malesuada. Vestibulum sed urna at purus ullamcorper varius. Sed tincidunt massa mattis, vehicula magna sit amet, aliquet quam. In tempor metus ante. Fusce auctor feugiat turpis sed lacinia. Nullam eleifend in odio tincidunt fringilla. Integer venenatis diam velit. Morbi consectetur pulvinar erat, at volutpat enim posuere sed. Vivamus bibendum viverra diam quis faucibus.</p> <p>Suspendisse vel ipsum eget arcu semper dignissim. Sed maximus ipsum diam, nec convallis leo egestas tincidunt. Proin in porttitor ante. Praesent sem sapien, mattis sed lectus quis, cursus imperdiet ex. Cras eu leo velit. Nullam cursus id lorem sed consequat. Nullam nibh libero, porttitor eu nisl nec, rutrum aliquet leo. Suspendisse elit neque, tristique aliquet sagittis sed, fermentum vehicula eros. Donec maximus commodo leo, sit amet mollis magna sollicitudin eget. Ut fermentum in risus id eleifend. Ut sed erat id odio tincidunt faucibus. Etiam feugiat sed urna sed ultricies.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a elit in enim tempus lacinia. Aenean in varius augue. Sed porttitor, velit et scelerisque hendrerit, felis tellus ultrices felis, tincidunt congue quam nunc quis nisl. Vestibulum et faucibus ante. Pellentesque semper nibh sed justo dapibus, nec rutrum lectus consectetur. Phasellus maximus ultricies posuere.</p> </div><!--text--> </div><!--block-container--> </div><!--block-wrapper--> </body> </html> body { padding: 0; color: #000; font-family: sans-serif; font-weight: 400; line-height: 1.625; background: #fdfbf5; } p { margin-bottom: 1.5em; } #menu { max-width: 100%; line-height: 1.7em; background: linear-gradient(#45959c, #37787e, #295458); } #menu ul{ font-size: .8em; font-family: "proxima-nova", sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: 0.02em; list-style: none; margin: 0 auto; margin-top: 0.9em; padding-left: 0; text-align: center; display: inline-block; } #menu li { float: left; position: relative; } #menu a { color: #fff; display: block; padding: 0 1.2125em; text-decoration: none; } #menu li:hover > a { color: #fff; } #caret { display: inline-block; width: 0; height: 0; margin-top: -1px; margin-left: 2px; vertical-align: middle; border-top: 5px solid #fff; border-right: 4px solid transparent; border-bottom: 0 dotted; border-left: 4px solid transparent; content: ""; } #dropdown-content { display: none; position: absolute; background: linear-gradient(#45959c, #37787e, #295458); text-transform: none; min-width: 125px; z-index: 1; } #dropdown-content a { display: block; text-align: left; margin-top: 8px; margin-bottom: 8px; } #dropdown-content a:last-child { margin-bottom: 10px; } #dropdown:hover #dropdown-content { display: block; } #block-wrapper { width: 100%; } #block-container { max-width: 960px; margin: 0 auto; } #text-container { max-width: 900px; margin: 0px 30px; padding-top: 20px; padding-bottom: 1px; font-size: 0.875em; text-align: justify; }
  17. TonyR

    Position of navigation menu dropdown

    Thank you requinix. Just to confirm (as my CSS knowledge is limited), I should change the dropdown-content div to a ul and the links to li's? That way it would create the parent/child relationship? Also after reading my post I may not have explained myself clearly. I do not want to hide the search bar in mobile view but to display the search bar inside the menu. Currently it is showing the search bar even before clicking the menu tab. Finally you say that to hide the Home link in mobile view I need to edit the show/hide rule where it currently only effects the links?
  18. TonyR

    Position of navigation menu dropdown

    Thank you for the reply once again requinix. Whilst working on the nav bar I came across a page on the w3 website which had a nav bar. With some editing I have managed to get the dropdown to align and also add a search bar to the right-hand side. The problem I am having is that I cannot seem to hide the search bar in mobile view. When in mobile view the search bar stays outside of the menu. What I want is for the search to go inside of the menu and then when clicking the 3-bar icon the menu along with the search bar should appear. Also the Home link in mobile view should not show but after trying everything I have become stuck. http://www.onlineavenue.com/code Any help would be much appreciated, thank you.
  19. I am having a problem with my code and would be grateful if someone could point me in the right direction. Please see my code below: <?php $dbcon = mysqli_connect('localhost','user','','videos'); $sql='SELECT * FROM videos'; $result = mysqli_query($dbcon, $sql); $row = mysqli_fetch_array($result); $image = $row['image']; $title = $row['title']; $description = $row['description']; echo '<a href="#"> <div class="thumb" style="background-image: url("' . $image . '");"></div> </a> </div> <div class="column-content"> <p class="column-title">Latest Video</p> <p class="column-heading"><a href="#">' . $title . '</a></p> <div class="video-description"> <p>' . $description . '</p>' mysqli_close($dbcon); ?> Now the connection to the database works, also the title and description is fine too. The problem is with the image. I cannot get it to display and I'm sure it has something to do with the quotation marks but I don't know in what order they should be. If I just use html the code for the image would be : <div class="thumb" style="background-image: url('image.jpg');"></div> with just a single quotation around the image url. Any help would be much appreciated. Tony
  20. TonyR

    Problem with quotation marks

    Thank you requinix. This post completely fixed the problem and the image now displays perfectly.
  21. TonyR

    Problem with quotation marks

    Thank you cyberRobot. I did what you mentioned and the output still did not show my image. The html read: <div class="thumb" style="background-image: url(\"image.jpg\");"></div>. I have added the missing semi colon, thank you for that.
  22. TonyR

    Height on li in CSS

    Thank you very much requinix. I did what you suggested and with a little tweaking of the margins I have got it to work.
  23. TonyR

    Height on li in CSS

    Hi I am really struggling to get my page to display correctly. For some reason my UL list will not display in a straight line but one LI tag just skips the line and goes to the next line. I have tried to add the height on the ul#video-archive li in my css and but it does not work. I have added an image below along with the code. Any help would be much appreciated. Best regards Tony <div id="content"> <div class="entry-content"> <ul id="video-archive"> <li> <a href="#"><img src="http://footage.framepool.com/shotimg/qf/334331654-filament-lights-on-on-electricity-light-bulb.jpg" alt="#"></a> <div> <h1><a href="#">Lorem ipsum dolor sit amet consectetur adipiscing elit suspendisse vel</a></h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ullamcorper vehicula erat non sagittis. Duis rhoncus neque diam, tincidunt sodales ante volutpat eu. Praesent nec est accumsan, commodo diam mattis, pretium metus. Phasellus vitae erat.</p> </div> </li> <li> <a href="#"><img src="http://footage.framepool.com/shotimg/qf/334331654-filament-lights-on-on-electricity-light-bulb.jpg" alt="#"></a> <div> <h1><a href="#">Lorem ipsum dolor sit amet consectetur adipiscing elit nam nisl magna tristique ut ornare</a></h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam posuere dui et efficitur rhoncus. Donec elementum, lectus at interdum rutrum, enim mi iaculis mi, quis.</p> </div> </li> <li> <a href="#"><img src="http://footage.framepool.com/shotimg/qf/334331654-filament-lights-on-on-electricity-light-bulb.jpg" alt="#"></a> <div> <h1><a href="#">Lorem ipsum dolor sit amet consectetur adipiscing elit suspendisse vel</a></h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ullamcorper vehicula erat non sagittis. Duis rhoncus neque diam, tincidunt sodales ante volutpat eu. Praesent nec est accumsan, commodo diam mattis, pretium metus. Phasellus vitae erat.</p> </div> </li> <li> <a href="#"><img src="http://footage.framepool.com/shotimg/qf/334331654-filament-lights-on-on-electricity-light-bulb.jpg" alt="#"></a> <div> <h1><a href="#">Lorem ipsum dolor sit amet consectetur adipiscing elit nam nisl magna tristique ut ornare</a></h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam posuere dui et efficitur rhoncus. Donec elementum, lectus at interdum rutrum, enim mi iaculis mi, quis.</p> </div> </li> <li> <a href="#"><img src="http://footage.framepool.com/shotimg/qf/334331654-filament-lights-on-on-electricity-light-bulb.jpg" alt="#"></a> <div> <h1><a href="#">Lorem ipsum dolor sit amet consectetur adipiscing elit suspendisse vel</a></h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ullamcorper vehicula erat non sagittis. Duis rhoncus neque diam, tincidunt sodales ante volutpat eu. Praesent nec est accumsan, commodo diam mattis, pretium metus. Phasellus vitae erat.</p> </div> </li> <li> <a href="#"><img src="http://footage.framepool.com/shotimg/qf/334331654-filament-lights-on-on-electricity-light-bulb.jpg" alt="#"></a> <div> <h1><a href="#">Lorem ipsum dolor sit amet consectetur adipiscing elit nam nisl magna tristique ut ornare</a></h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam posuere dui et efficitur rhoncus. Donec elementum, lectus at interdum rutrum, enim mi iaculis mi, quis.</p> </div> </li> <li> <a href="#"><img src="http://footage.framepool.com/shotimg/qf/334331654-filament-lights-on-on-electricity-light-bulb.jpg" alt="#"></a> <div> <h1><a href="#">Lorem ipsum dolor sit amet consectetur adipiscing elit suspendisse vel</a></h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ullamcorper vehicula erat non sagittis. Duis rhoncus neque diam, tincidunt sodales ante volutpat eu. Praesent nec est accumsan, commodo diam mattis, pretium metus. Phasellus vitae erat.</p> </div> </li> <li> <a href="#"><img src="http://footage.framepool.com/shotimg/qf/334331654-filament-lights-on-on-electricity-light-bulb.jpg" alt="#"></a> <div> <h1><a href="#">Lorem ipsum dolor sit amet consectetur adipiscing elit suspendisse vel</a></h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ullamcorper vehicula erat non sagittis. Duis rhoncus neque diam, tincidunt sodales ante volutpat eu. Praesent nec est accumsan, commodo diam mattis, pretium metus. Phasellus vitae erat.</p> </div> </li> <li> <a href="#"><img src="http://footage.framepool.com/shotimg/qf/334331654-filament-lights-on-on-electricity-light-bulb.jpg" alt="#"></a> <div> <h1><a href="#">Lorem ipsum dolor sit amet consectetur adipiscing elit nam nisl magna tristique ut ornare</a></h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam posuere dui et efficitur rhoncus. Donec elementum, lectus at interdum rutrum, enim mi iaculis mi, quis.</p> </div> </li> <li> <a href="#"><img src="http://footage.framepool.com/shotimg/qf/334331654-filament-lights-on-on-electricity-light-bulb.jpg" alt="#"></a> <div> <h1><a href="#">Lorem ipsum dolor sit amet consectetur adipiscing elit suspendisse vel</a></h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ullamcorper vehicula erat non sagittis. Duis rhoncus neque diam, tincidunt sodales ante volutpat eu. Praesent nec est accumsan, commodo diam mattis, pretium metus. Phasellus vitae erat.</p> </div> </li> <li> <a href="#"><img src="http://footage.framepool.com/shotimg/qf/334331654-filament-lights-on-on-electricity-light-bulb.jpg" alt="#"></a> <div> <h1><a href="#">Lorem ipsum dolor sit amet consectetur adipiscing elit nam nisl magna tristique ut ornare</a></h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam posuere dui et efficitur rhoncus. Donec elementum, lectus at interdum rutrum, enim mi iaculis mi, quis.</p> </div> </li> <li> <a href="#"><img src="http://footage.framepool.com/shotimg/qf/334331654-filament-lights-on-on-electricity-light-bulb.jpg" alt="#"></a> <div> <h1><a href="#">Lorem ipsum dolor sit amet consectetur adipiscing elit suspendisse vel</a></h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ullamcorper vehicula erat non sagittis. Duis rhoncus neque diam, tincidunt sodales ante volutpat eu. Praesent nec est accumsan, commodo diam mattis, pretium metus. Phasellus vitae erat.</p> </div> </li> <li> <a href="#"><img src="http://footage.framepool.com/shotimg/qf/334331654-filament-lights-on-on-electricity-light-bulb.jpg" alt="#"></a> <div> <h1><a href="#">Lorem ipsum dolor sit amet consectetur adipiscing elit nam nisl magna tristique ut ornare</a></h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam posuere dui et efficitur rhoncus. Donec elementum, lectus at interdum rutrum, enim mi iaculis mi, quis.</p> </div> </li> <li> <a href="#"><img src="http://footage.framepool.com/shotimg/qf/334331654-filament-lights-on-on-electricity-light-bulb.jpg" alt="#"></a> <div> <h1><a href="#">Lorem ipsum dolor sit amet consectetur adipiscing elit suspendisse vel</a></h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ullamcorper vehicula erat non sagittis. Duis rhoncus neque diam, tincidunt sodales ante volutpat eu. Praesent nec est accumsan, commodo diam mattis, pretium metus. Phasellus vitae erat.</p> </div> </li> </ul> </div><!--entry--> </div><!--content--> #content { margin: 0 1.875em /*34% 0 7.6%*/; /*width: 58.4%;*/ padding-top: 30px; } .entry-content { padding: 1.625em 0 0; font-size: 0.875em; } .entry-content h1, .entry-content h2, { color: #000; /*font-weight: bold;*/ margin: 0 0 .8125em; } .entry-content img { max-width: 97.5%; /* Fluid images for posts, comments, and widgets */ } .entry-title { font-family: "adelle", serif; color: #2f705a; font-size: 1.75em; /* 28px / 16px */ font-weight: 400; } ul#video-archive { list-style: none; margin: 0 0 0 -0.975em; padding: 0; } ul#video-archive li { width: 32.222222222222%; max-width: 290px; display: inline; float: left; margin: 0 0 60px 0.975em; padding: 0; } ul#video-archive li img { width: 100%; height: auto; border: 1px solid #000; } ul#video-archive h1 { font-family: "adelle", serif; font-size: 1.5em; /* 24px / 16px */ color: #2f705a; line-height: 1.33333333333333em; /* 24px / 20px */ margin: 0.75em 0; } ul#video-archive h1 a, ul#video-archive h1 a:hover { color: #2f705a; } ul#video-archive div { margin:10px; } ul#video-archive div p { /*font-size: 0.875em; /* 14px / 16px */ margin-bottom: 0; }
  24. TonyR

    Height on li in CSS

    Excuse my ignorance but where would I try this? I have tried it in ul#video-archive li to no avail.
  25. TonyR

    Height on li in CSS

    I would love to ignore IE as I definitely do not care about IE 9 and below but this is for an assignment and I need to make it compatible up to IE 8. I have uploaded the code to my friends domain so you can see the problem I am having. White spaces everywhere! Even if I use flexbox I would still need to fix the css for IE!! http://www.onlineavenue.com/code/
×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.