Jump to content

goldberry

Members
 View Profile  See their activity

  • Posts

    3

  • Joined

  • Last visited

 Content Type 

Posts posted by goldberry

    Website name in Responsive Nav Bar

    in CSS

    Posted

    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>

    Centering horizontal images

    in CSS

    Posted

    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.

    Centering horizontal images

    in CSS

    Posted

    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...