Content image and top menu alignment for different screen width question

hariskar · July 22, 2016

In my page (www.mikroviologos.gr) the top menu is aligned over the image: it is above the image and starts exactly above the left corner. My screen width is 1280. If the width of the screen changes top menu stops being above the image. How can this 2 start always from the same vertical point?

Thank you!

ashbifs · July 29, 2016

Do you want to left or right align the mobiel menu button with the image?

hariskar · July 29, 2016

ashbifs,

I made my site responsive and used 9 columns grid and think I solved this problem. If you have a suggestion to make it better, please let me now.

Thank you for reply!

dsonesuk · July 29, 2016

That menu works for mobile? cause the logo should appear at top, with menu below it with links stacked above each other, at this moment of time they as default desktop menu links, jumbled, right of logo text with hamburger menu jumping all over the place.

hariskar · July 31, 2016

No, it does not work correctly.

With some test changes I did the responsive menu for small screens comes as it should, only it comes over the content (like it does now without the test changes), it hides what exists under it when it expands. It does not push the content lower. Any idea why?

Edited July 31, 2016 by hariskar

dsonesuk · July 31, 2016

I used twelve grid system because you have more column widths to work with, converted back to nine and it still seems to work, I added container classes to control overall main width and removed empty spaced column either side.

<!DOCTYPE html>
<html lang="el">
    <head>
        <meta name=viewport content="width=device-width, initial-scale=1">
        <meta charset="utf-8">
        <link rel="stylesheet" href="http://www.mikroviologos.gr/css/main.css">
        <title>Αρχική σελίδα | Μικροβιολογικό Εργαστήριο στην Καβάλα</title>
        <meta name="description" content="Ο Χάρης Καραχριστιανίδης είναι Mικροβιολόγος στην Καβάλα. Το Μικροβιολογικό Εργαστήριό του λειτουργεί από την αρχή του 2005 στην οδό Φιλικής Εταιρείας 5">
        <meta name="keywords" content="μικροβιολογικό, εργαστήριο, καβάλα, kavala, kabala, μικροβιολόγος, μικροβιολόγοι, βιοπαθολόγος, mikroviologiko, mikrobiologiko, ergastirio, ergasthrio, aimatologiko, αιματολογικό, βιοχημικό, bioximiko, bioxhmiko, εξετάσεις, exetaseis, aimatos, αίματος">
        <style>
            /* TWELVE GRID column widths
            .col-1 {
                width: 8.33333%;
            }

            .col-2 {
                width: 16.6667%;
            }

            .col-3 {
                width: 25%;
            }

            .col-4 {
                width: 33.3333%;
            }

            .col-5 {
                width: 41.6667%;
            }

            .col-6 {
                width: 50%;
            }

            .col-7 {
                width: 58.3333%;
            }

            .col-8 {
                width: 66.6667%;
            }

            .col-9 {
                width: 75%;
            }

            .col-10 {
                width: 83.3333%;
            }

            .col-11 {
                width: 91.6667%;
            }

            .col-12 {
                width: 100%;
            }*/

            header > .container {
                overflow: visible;
                white-space: nowrap;
            }

            .container {width: 81%; margin:0 auto;}

            #logoArea {
                display: inline-block;
                float: none;
                height: auto;
                padding-bottom: 0;
                vertical-align: top;
            }
            #logoArea > a {
                white-space: normal;
            }
            #nav {
                list-style: outside none none;
                overflow: hidden;
            }
            #logoArea,#nav {margin:0;}
            #navArea {
                display: inline-block;
                margin: 50px 0 0;

                position: relative;
                white-space: nowrap;
            }


            ul#nav {padding:0; }
            #block1 {height: auto;}
            aside {margin-bottom: 100px;}

            #logoArea > a div {
                margin-left: 12px;
            }

            @media only screen and (max-width:768px) {
                /* For mobile phones: */
            }
            @media screen and (max-width:949px) {

                ul.topnav li:not(:first-child) {display: none;}
                ul.topnav li.icon {float:right;display:inline-block;}
                /*#navArea {margin-left:50%}*/
                #logoArea {display: block; text-align: center;}
                header {height: auto;}
                #navArea {display: block; height: 30px; margin:1em 15px;}
                [class*="col-"] {width:100%;}
                #nav li {float: none; margin: 0;background-color: #1a3365;}
                #nav {position:absolute; left:0; right:0;}

                ul.topnav li.icon {
                    display: inline-block;
                    position: absolute;
                    right: 0;
                    top: 0;
                }
                #navArea  #nav a {font-size: 16px;}
                #content {margin-top:0px;}
                aside {margin-bottom: 0;}
            }
            @media screen and (max-width:949px) {
                .container{width: auto;}
                ul.topnav.responsive {position: relative;}
                ul.topnav.responsive li.icon {position:absolute;right:0;top:0;}
                ul.topnav.responsive li {float:none;display:block; margin: 0;}
                ul.topnav.responsive li a {display:block;text-align:left;}}
            @media screen and (max-width:1090px) {
                #nav a {font-size: 14px;}
            }
        </style>


    </head>
    <body>
        <header>
            <div class="container">
                <div id="logoArea" class="col-2" title="Μικροβιολογικό Εργαστήριο στην Καβάλα"><!--   9 grid -->
                    <!--<div id="logoArea" class="col-3" title="Μικροβιολογικό Εργαστήριο στην Καβάλα"> 12 grid -->
                    <a href="/">
                        <div style="font-weight:bold;color:#f2f2f2;font-size:19px;font-family:Arial">mikroviologos.gr</div>
                        <div style="font-weight:bold;color:#d2dce6;font-size:14px;font-family:Arial">Εργαστήριο Μικροβιολογίας</div>
                    </a>
                </div>
                <div id="navArea">
                    <ul id="nav" class="topnav">
                        <li><a href="/">Αρχική σελίδα</a></li>
                        <li><a href="biografiko">Βιογραφικό</a></li>
                        <li><a href="syxnes-erotiseis">Συχνές ερωτήσεις</a></li>
                        <li><a href="arthra">Άρθρα</a></li>
                        <li><a href="apotelesmata">Αποτελέσματα</a></li>
                        <li><a href="epikoinonia">Επικοινωνία</a></li>
                        <li class="icon">
                            <a href="javascript:void(0);" onclick="myFunction()">☰</a>
                        </li>
                    </ul>
                </div> <!--End of navArea-->
                <script>
                    function myFunction() {
                        var x = document.getElementById("nav");
                        if (x.className === "topnav") {
                            x.className += " responsive";
                        } else {
                            x.className = "topnav";
                        }
                    }
                </script>
            </div>
        </header>
        <div class="row">
            <div class="container">

                <aside class="col-2"><!--  9 grid -->
                    <!--<aside class="col-3">  12 grid  -->
                    <div id="block1">
                        <ul>
                            <li><a href="organosi-ergastiriou">Οργάνωση εργαστηρίου</a></li>
                            <li><a href="exoplismos">Εξοπλισμός</a></li>
                            <li><a href="tmimata-exetaseis">Τμήματα - εξετάσεις</a></li>
                            <li><a href="proliptikes-exetaseis">Προληπτικές εξετάσεις</a></li>
                            <li><a href="politiki-poiotitas">Πολιτική ποιότητας</a></li>
                            <li><a href="asfalistika-tameia">Ασφαλιστικά ταμεία</a></li>
                            <li><a href="xrisimes-istoselides">Χρήσιμες ιστοσελίδες</a></li>
                        </ul>
                    </div> <!--End of block1-->
                    <div id="block2"><h2>Εξετάσεις αλλεργίας</h2><hr><p>Το εργαστήριό μας απέκτησε πρόσφατα τον αναλυτή για αλλεργίες της Phadia UniCAP 100 που χρησιμοποιεί τη μέθοδο αναφοράς ImmunoCAP</p></div>
                    <div id="block3"><h2>Αποτελέσματα online</h2><hr><p>Αν θέλετε να μπορείτε να βλέπετε τα αποτελέσματά σας online και να τα κατεβάζετε σε μορφή pdf παρακαλώ ενημερώστε μας και <a href="/user/register">εγγραφείτε στην ιστοσελίδα μας</a></p></div>
                </aside>
                <div id="content" class="col-7"><!-- 9 grid -->
                    <!--<div id="content" class="col-9"> 12 grid  -->
                    <img src="http://s.mikroviologos.gr/image/microscope.jpg" style="max-width:100%;height:auto;" alt="Αρχική σελίδα"><p>Το μικροβιολογικό εργαστήριο του Χάρη Καραχριστιανίδη, Iατρού Bιοπαθολόγου (Mικροβιολόγου), λειτουργεί από τις αρχές του 2005 στο κέντρο της πόλης της Καβάλας. Σε καίριο σημείο, με εύκολη πρόσβαση από τα χωριά του νομού μας καθώς και από άλλους νομούς, προσφέρουμε υπηρεσίες ιατρικής με εγκυρότητα και υπευθυνότητα.</p>
                    <p>Ο άρτια εξοπλισμένος χώρος μας με αναλυτές τελευταίας τεχνολογίας, σε συνδυασμό με το εξειδικευμένο και ειδικά καταρτισμένο προσωπικό, σας εγγυώνται αξιοπιστία και ασφάλεια.</p>
                    <p>Η συνέπεια, η στήριξη, ο επαγγελματισμός και το ανθρώπινο πρόσωπο είναι τα βασικά στοιχεία της παροχής υπηρεσιών υγείας του εργαστηρίου μας, για την κάλυψη των δικών σας αναγκών, κάθε στιγμή που αυτό είναι απαραίτητο.</p>
                </div> <!--End of content-->

            </div>
        </div><!--End of row-->
        <footer><p>Μικροβιολογικό Εργαστήριο Χάρη Καραχριστιανίδη, Φιλικής Εταιρείας 5, ΤΚ 65403, Καβάλα,<br>τηλ.: 2510-620630, φαξ: 2510-220015, e-mail: info@mikroviologos.gr<br>Σχεδιασμός: Χάρης Ν. Καραχριστιανίδης, Copyright © 2005-2016</p></footer>
    </body>
</html>

hariskar · July 31, 2016

Thanks a lot!

The reason i chose 9 columns is that with col-2 I have width about 21% for sidebar. I checked all grids with different columns and only 9-columns give this width.

The responsive menu is now very nice, except it overlaps the vertical menu under it. It opens over the side menu, it hides it. Shouldn't it push the aside menu down?

dsonesuk · July 31, 2016

Well 21% width will depend on the overall total fixed width available wouldn't it? The main menu overlapping side menu i can't see as a problem? If you want it to force side menu down change ul fom position absolute to relative. From all moble menu I've done they all overlap though.

hariskar · July 31, 2016

I looked further how the site looks with your code and it is great! I have to study to see the changes you made and everything works so perfectly.

Well 21% width will depend on the overall total fixed width available wouldn't it?

Yes, what I meant is that with 12 columns if I choose col-2 sidebar is too narrow, if I choose col-3 it is to wide.

With 9-columns grid and col-2 it is fine. I will check it more now you added a container instead my 2 empty columns.

Thank you again!!

hariskar · August 2, 2016

With the .container 81% you put and 12-columns grid aside has exactly the width I want and the site works great in smaller screens!

Thank you!!

dsonesuk · August 2, 2016

If you want to lose butting dropdown borders, so they merge into one

#nav.topnav.responsive > li:not(:first-child):not(:last-child) {
    margin-top: -1px;
}

hariskar · August 2, 2016

Done, thank you so much!

dsonesuk · August 3, 2016

Ha, you do realize that part of bottom content goes under footer which can't be scrolled to, on small mobile devices, and is this supposed to be sticky footer layout?

hariskar · August 3, 2016

:-(
No, I did not realize it, I put

@media screen and (max-width: 949px)
#content {
margin-bottom: 160px;}

which is enough for minimum width 240-250px (it depends on the page), isn't it enough?

Or is there a better solution?

Thank you for pointing this!

Edited August 3, 2016 by hariskar

dsonesuk · August 3, 2016

IF none sticky footer.

Let the footer follow its natural flow, as using position absolute takes it out of the flow and then it becomes more problematic.

Remove position: absolute and bottom property from footer and apply overflow: hidden; this will get rid of the collapsing margins issue at bottom, the border at top fixes this issue along top edge. You may want to consider adding col-12 class to force paragraph text away from edge on small devices..

You now! Do not require the huge margin at bottom of content and aside, and you lose the huge gap showing in smaller devices separating bottom of aside to top edge of content..

hariskar · August 4, 2016

Thanks a lot!

I removed position: absolute and bottom property from footer and applied overflow: hidden I also made bottom-margins for aside and content smaller (30px).

But now there is a problem in pages with small height like http://www.mikroviologos.gr/biografiko or even the start page: footer is not at the bottom of the desktop screen anymore.

Edit: So I reverted to my previous css and added

@media screen and (max-width:949px) {
#content {margin-bottom:30px;}
aside {margin-bottom:0;}
footer{position:relative;overflow:hidden}
}

and I think it is OK.

footer is much better with class="col-12" style="padding:0 15px", text is away from edges in small screens. But I don't like the whole footer (and logo) and have to re-design them somehow..

Edited August 4, 2016 by hariskar

dsonesuk · August 4, 2016

sticky footer layout with extra wrapper element made to match by minimum the height of viewport height

<!DOCTYPE html>
<html lang="el">
    <head>
        <meta name=viewport content="width=device-width, initial-scale=1">
        <meta charset="utf-8">
        <link rel="stylesheet" href="http://www.mikroviologos.gr/css/main.css">
        <title>Αρχική σελίδα | Μικροβιολογικό Εργαστήριο στην Καβάλα</title>
        <meta name="description" content="Ο Χάρης Καραχριστιανίδης είναι Mικροβιολόγος στην Καβάλα. Το Μικροβιολογικό Εργαστήριό του λειτουργεί από την αρχή του 2005 στην οδό Φιλικής Εταιρείας 5">
        <meta name="keywords" content="μικροβιολογικό, εργαστήριο, καβάλα, kavala, kabala, μικροβιολόγος, μικροβιολόγοι, βιοπαθολόγος, mikroviologiko, mikrobiologiko, ergastirio, ergasthrio, aimatologiko, αιματολογικό, βιοχημικό, bioximiko, bioxhmiko, εξετάσεις, exetaseis, aimatos, αίματος">
        <style>
            /* TWELVE GRID column widths*/
            .col-1 {
                width: 8.33333%;
            }

            .col-2 {
                width: 16.6667%;
            }

            .col-3 {
                width: 25%;
            }

            .col-4 {
                width: 33.3333%;
            }

            .col-5 {
                width: 41.6667%;
            }

            .col-6 {
                width: 50%;
            }

            .col-7 {
                width: 58.3333%;
            }

            .col-8 {
                width: 66.6667%;
            }

            .col-9 {
                width: 75%;
            }

            .col-10 {
                width: 83.3333%;
            }

            .col-11 {
                width: 91.6667%;
            }

            .col-12 {
                width: 100%;
            }

            header > .container {
                overflow: visible;
                white-space: nowrap;
            }

            .container {width: 81%; margin:0 auto;}

            #logoArea {
                display: inline-block;
                float: none;
                height: auto;
                padding-bottom: 0;
                vertical-align: top;
            }
            #logoArea > a {
                white-space: normal;
            }
            #nav {
                list-style: outside none none;
                overflow: hidden;
            }
            #logoArea,#nav {margin:0;}
            #navArea {
                display: inline-block;
                margin: 50px 0 0;

                position: relative;
                white-space: nowrap;
            }


            ul#nav {padding:0; }
            #block1 {height: auto;}
            aside {margin-bottom: 100px;}

            #logoArea > a div {
                margin-left: 12px;
            }




            /*STICKY FOOTER */

            body,html {height: 100%;}

            #wrapper {min-height: 100%;}

            aside, #content {margin-bottom: 15px;}
           

            footer.col-12 {position: relative; bottom: auto; overflow: hidden; min-height: 100px; padding-top:0; padding-bottom:0; }
 
            
            aside:after, #content:after {content:""; display:block; padding-bottom: 100px;}  /*padding matches height: of footer*/
            footer.col-12 {margin-top: -100px;} /*margin matches height: of footer*/

            @media screen and (max-width:949px) {
                aside:after {padding-bottom: 15px;}

            }
            /*END STICKY FOOTER*/



            @media only screen and (max-width:768px) {
                /* For mobile phones: */
            }
            @media screen and (max-width:949px) {
                #content img:first-child, #content h1:first-child + img {margin: 0 auto; display: block;}
                ul.topnav li:not(:first-child) {display: none;}
                ul.topnav li.icon {float:right;display:inline-block;}
                /*#navArea {margin-left:50%}*/
                #logoArea {display: block; text-align: center;}
                header {height: auto;}
                #navArea {display: block; height: 30px; margin:1em 15px;}
                [class*="col-"] {width:100%;}
                #nav li {float: none; margin: 0;background-color: #1a3365;}
                #nav {position:absolute; left:0; right:0;}

                ul.topnav li.icon {
                    display: inline-block;
                    position: absolute;
                    right: 0;
                    top: 0;
                }
                #navArea  #nav a {font-size: 16px;}
                #content {margin-top:0px;}
                aside {margin-bottom: 0;}
            }
            @media screen and (max-width:949px) {
                .container{width: auto;}
                ul.topnav.responsive {position: relative;}
                ul.topnav.responsive li.icon {position:absolute;right:0;top:0;}
                ul.topnav.responsive li {float:none;display:block; margin: 0;}
                ul.topnav.responsive li a {display:block;text-align:left;}}
            @media screen and (max-width:1090px) {
                #nav a {font-size: 14px;}
            }
        </style>


    </head>
    <body><div id="wrapper">
            <header>
                <div class="container">

                    <div id="logoArea" class="col-3" title="Μικροβιολογικό Εργαστήριο στην Καβάλα">
                        <a href="/">
                            <div style="font-weight:bold;color:#f2f2f2;font-size:19px;font-family:Arial">mikroviologos.gr</div>
                            <div style="font-weight:bold;color:#d2dce6;font-size:14px;font-family:Arial">Εργαστήριο Μικροβιολογίας</div>
                        </a>
                    </div>
                    <div id="navArea">
                        <ul id="nav" class="topnav">
                            <li><a href="/">Αρχική σελίδα</a></li>
                            <li><a href="biografiko">Βιογραφικό</a></li>
                            <li><a href="syxnes-erotiseis">Συχνές ερωτήσεις</a></li>
                            <li><a href="arthra">Άρθρα</a></li>
                            <li><a href="apotelesmata">Αποτελέσματα</a></li>
                            <li><a href="epikoinonia">Επικοινωνία</a></li>
                            <li class="icon">
                                <a href="javascript:void(0);" onclick="myFunction()">☰</a>
                            </li>
                        </ul>
                    </div> <!--End of navArea-->
                    <script>
                        function myFunction() {
                            var x = document.getElementById("nav");
                            if (x.className === "topnav") {
                                x.className += " responsive";
                            } else {
                                x.className = "topnav";
                            }
                        }
                    </script>
                </div>
            </header>
            <div class="row">
                <div class="container">
                    <aside class="col-3">
                        <div id="block1">
                            <ul>
                                <li><a href="organosi-ergastiriou">Οργάνωση εργαστηρίου</a></li>
                                <li><a href="exoplismos">Εξοπλισμός</a></li>
                                <li><a href="tmimata-exetaseis">Τμήματα - εξετάσεις</a></li>
                                <li><a href="proliptikes-exetaseis">Προληπτικές εξετάσεις</a></li>
                                <li><a href="politiki-poiotitas">Πολιτική ποιότητας</a></li>
                                <li><a href="asfalistika-tameia">Ασφαλιστικά ταμεία</a></li>
                                <li><a href="xrisimes-istoselides">Χρήσιμες ιστοσελίδες</a></li>
                            </ul>
                        </div> <!--End of block1-->
                        <div id="block2"><h2>Εξετάσεις αλλεργίας</h2><hr><p>Το εργαστήριό μας απέκτησε πρόσφατα τον αναλυτή για αλλεργίες της Phadia UniCAP 100 που χρησιμοποιεί τη μέθοδο αναφοράς ImmunoCAP</p></div>
                        <div id="block3"><h2>Αποτελέσματα online</h2><hr><p>Αν θέλετε να μπορείτε να βλέπετε τα αποτελέσματά σας online και να τα κατεβάζετε σε μορφή pdf παρακαλώ ενημερώστε μας και <a href="/user/register">εγγραφείτε στην ιστοσελίδα μας</a></p></div>
                    </aside>

                    <div id="content" class="col-9">

                        <img src="http://s.mikroviologos.gr/image/microscope.jpg" style="max-width:100%;height:auto;" alt="Αρχική σελίδα"><p>Το μικροβιολογικό εργαστήριο του Χάρη Καραχριστιανίδη, Iατρού Bιοπαθολόγου (Mικροβιολόγου), λειτουργεί από τις αρχές του 2005 στο κέντρο της πόλης της Καβάλας. Σε καίριο σημείο, με εύκολη πρόσβαση από τα χωριά του νομού μας καθώς και από άλλους νομούς, προσφέρουμε υπηρεσίες ιατρικής με εγκυρότητα και υπευθυνότητα.</p>
                        <p>Ο άρτια εξοπλισμένος χώρος μας με αναλυτές τελευταίας τεχνολογίας, σε συνδυασμό με το εξειδικευμένο και ειδικά καταρτισμένο προσωπικό, σας εγγυώνται αξιοπιστία και ασφάλεια.</p>
                        <p>Η συνέπεια, η στήριξη, ο επαγγελματισμός και το ανθρώπινο πρόσωπο είναι τα βασικά στοιχεία της παροχής υπηρεσιών υγείας του εργαστηρίου μας, για την κάλυψη των δικών σας αναγκών, κάθε στιγμή που αυτό είναι απαραίτητο.</p>
                    </div> <!--End of content-->

                </div>
            </div><!--End of row-->
        </div><!--End of wrapper-->
        <footer class="col-12"><p>Μικροβιολογικό Εργαστήριο Χάρη Καραχριστιανίδη, Φιλικής Εταιρείας 5, ΤΚ 65403, Καβάλα,<br>τηλ.: 2510-620630, φαξ: 2510-220015, e-mail: info@mikroviologos.gr<br>Σχεδιασμός: Χάρης Ν. Καραχριστιανίδης, Copyright © 2005-2016</p></footer>
    </body>
</html>

hariskar · August 6, 2016

I thought that my settings were OK, but with your configuration it is just perfect!

Just some questions and thoughts:

-If I change footer min-height:100px and margin-top:-100px to 90 and -90, so as the text is in the center vertically I don't see any problem.

-Should I consider how the page looks in bigger resolutions eg 2500px and add more breakpoins? (most guides don't suggest that)

Thank you!

Edited August 6, 2016 by hariskar

dsonesuk · August 6, 2016

Changing min-height and matching margin value is not a problem. Resolution 25000px you could just add a max-width: to .container class to stop stretching beyond a set width.

hariskar · August 6, 2016

I put max-width 1000px and seems OK, thank you!

hariskar · August 13, 2016

I changed my footer to 4 columns footer and I think it behaves good in small devices too.

hariskar · October 29, 2016

How can I make a "Latest news" section at the bottom of content like https://medicine.yale.edu/labmed/ ?

If I make inside #content.col-9 a div class="col-6" to divide #content in 2 columns bottom text goes under footer.

Thank you!

Edited October 29, 2016 by hariskar

dsonesuk · October 30, 2016

This gives absolutely nothing to work with, so i will ignore.

hariskar · October 30, 2016

You are right, sorry..

I started a new topic with more details here.

Content image and top menu alignment for different screen width question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in