Jump to content

TonyR

Members
  • Content Count

    12
  • Joined

  • Last visited

Everything posted by TonyR

  1. 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
  2. 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; }
  3. 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?
  4. 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.
  5. 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
  6. TonyR

    Problem with quotation marks

    Thank you requinix. This post completely fixed the problem and the image now displays perfectly.
  7. 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.
  8. 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.
  9. 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; }
  10. 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.
  11. 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/
  12. TonyR

    Height on li in CSS

    Thank you for the reply. I have to be honest and have never heard of flexbox before. After initial searching online I was optimistic but then I found out that it is not supported by IE10 and below. Surely there must be a fix that would be compatible for all browsers?
×

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.