GPT Posted January 23, 2017 Share Posted January 23, 2017 Hi, I have created (or better, my intention was to create) a simple navbar by using W3.CSS framework as follows (see photo and code): 1/12 2/12 2/12 2/12 2/12 1/12 1/12 1/12 | MENU | Message || Username | Password | reCAPTCHA | Login || Register | Language | - I would like the height of the navbar to be self-adjusted; when I remove the "height: 55.5px" from, or set "height: inherit/auto" into, <div id="login"> the navbar's height takes the value of 2px and the buttons remain on the air! * What am I doing wrong? * How can I make the highest height of existing elements to inherit its value to the navbar's height? * Does "g-recaptcha" element play any role? I would like the navbar to behave responsively as follows: 2/12 2/12 4/12 4/12 or 3/12 3/12 3/12 3/12 | MENU | Message || Username | Password | | Username | Password | reCAPTCHA | Login | | Register | Language || reCAPTCHA | Login | | Register | Language | | MENU | and finally: 6/12 6/12 | Login | Register | | Menu | Language | How can I make the navbar to get wrapped and elements appear in a second row, by using only existing W3.CSS elements? Please, just give hints and advices. Thanks in advance. login_bar.html Link to comment Share on other sites More sharing options...
dsonesuk Posted January 23, 2017 Share Posted January 23, 2017 DON'T use position absolute, for layout purposes, elements that use this are taken out of the flow of other elements, other elements will move to occupy the space it leaves, and parent elements will collapse because it has no area to maintain its height. The main purpose you would use this is for overlapping purposes. Link to comment Share on other sites More sharing options...
GPT Posted January 23, 2017 Author Share Posted January 23, 2017 Ok. I have changed, through inline style, the w3-display-middle class "absolute" position (default) into "relative" position. Setting height manually is not required any more. Thanks! What about the "wrap" feature? When I use "flex-wrap: wrap;" the height is not adjusted again (Register and Language blocks overlap each other)? Any hint, suggestion? Tia: T(hanks)i(n)a(advance) Link to comment Share on other sites More sharing options...
dsonesuk Posted January 23, 2017 Share Posted January 23, 2017 The only other property that would cause a similar issue as position: absolute; as regards to parent element collapsing, is the use of floated elements, the normal fix is to apply overflow: hidden; to parent, or create content:"", to place below all floated elements, and give it clear: both. Link to comment Share on other sites More sharing options...
GPT Posted January 24, 2017 Author Share Posted January 24, 2017 (edited) Ok. But which W3.CSS elements are floated i.e. which W3.CSS elements have inherited the "float" class/attribute, if they have it? (This is the reason that I have asked (by separate post) if there is a hierarchy diagram. I suspect that the W3.CSS creator(s), b4 they start coding, he/she/they made a design plan of how this "construction" will "develop". Anyway, I am not a member of IT industry and surely I do not know how to "understand" IT folks.) Tia. Edited January 24, 2017 by GPT Link to comment Share on other sites More sharing options...
dsonesuk Posted January 24, 2017 Share Posted January 24, 2017 Every browser has web development option F12, look for inspect select elements in question, view css for that element. It should show all html in current document, you can then transverse down through these elements to identity what styles are applied to that element by the class or id. One more thing, don't adjust the w3css styling directly, add you own class and use styling to override the w3css. What you adjust then does not affect the original w3css where you may find you require that original instead. Link to comment Share on other sites More sharing options...
Ingolme Posted January 24, 2017 Share Posted January 24, 2017 My guess is that, like bootstrap, the grid system is using floated elements. There should be a grid wrapper class of some sort to prevent this problem. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now