Jump to content

goldberry

Members
  • Posts

    3
  • Joined

  • Last visited

goldberry's Achievements

Newbie

Newbie (1/7)

0

Reputation

  1. Is it possible to put a Website name in the middle of the Responsive top nav how to with the code adjusted to float the menu items to the right? <!DOCTYPE html> <html> <head> <style> body {margin:0;} ul.topnav { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } ul.topnav li {float: right;} ul.topnav li a { display: inline-block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; transition: 0.3s; font-size: 17px; } ul.topnav li a:hover {background-color: #111;} ul.topnav li.icon {display: none;} @media screen and (max-width:680px) { ul.topnav li:not(:first-child) {display: none;} ul.topnav li.icon { float: right; display: inline-block; } } @media screen and (max-width:680px) { ul.topnav.responsive {position: relative;} ul.topnav.responsive li.icon { position: absolute; right: 0; top: 0; } ul.topnav.responsive li { float: none; display: inline; } ul.topnav.responsive li a { display: block; text-align: left; } } </style> </head> <body> <ul class="topnav"> <li><a class="active" href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> <li class="icon"> <a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">☰</a> </li> </ul> <div style="padding-left:16px"> <h2>Responsive Topnav Example</h2> <p>Resize the browser window to see how it works.</p> </div> <script> function myFunction() { document.getElementsByClassName("topnav")[0].classList.toggle("responsive"); } </script> </body> </html>
  2. Thanks for the reply. I get that responsive will adjust the number of images so that if the screen width is less then they will overflow to a lower row. I am trying to work out how if there are only 3 images how to have them centered on the screen when the screen is wider than the images. If I remove one of the images from the code when I run it, I get the images from the left leaving a large space at the right. It would look better if they were centered with equal space left and right.
  3. I am a real novice and I am trying to understand and learn from this responsive image gallery. http://www.w3schools.com/css/tryit.asp?filename=trycss_image_gallery_responsive If I only want to use 3 images or 2 rows of 3 for 6 images how do I alter the code to enable this? On the tryit editor I eliminate one image but they line up left. I see that if I change this code I can move them to the right or left but I want them to center. .responsive { padding: 0 6px; float: right; width: 24.99999%; } I haven't been able to find a solution on the w3schools site.
×
×
  • Create New...