Nic727 Posted October 26, 2015 Share Posted October 26, 2015 Hi, I'm looking to do something like that, but I don't know if it's possible. So I know how to put my buttons fixed at the bottom, but I don't really know if I should put fixed to other boxes (div) too or not. I hope you understand what I mean in this picture. Thank you Link to comment Share on other sites More sharing options...
Nic727 Posted October 27, 2015 Author Share Posted October 27, 2015 Is it possible with that? http://stackoverflow.com/questions/16414143/how-to-assign-percentage-values-to-div-to-divide-entire-page-into-3-parts-with-b The only thing I don't know about this method is if I can make this responsive like I want with javascript. - Maybe Title = 10% height - Maybe Image div = 60% height - Maybe buttons = 30% height. The thing is that if I click on a button, I want text to appear (with height matching the text length) just between the image and the buttons and at the same time, resizing the image. I know this topic could be a mix of CSS and JS Link to comment Share on other sites More sharing options...
dsonesuk Posted October 27, 2015 Share Posted October 27, 2015 That only works if parent has fixed height, its height is 100% for body, html the 3 divs must within a div element following the body element for this to work. Problem with this parent div using 100% height means it will not extend beyond of height of browser window, using min-height: 100%; would be better. Any padding, margins using for top, bottom must be included as part of total height. Image, text height can vary and may not match percentage value you have alloewed for for these areas. Link to comment Share on other sites More sharing options...
Nic727 Posted October 29, 2015 Author Share Posted October 29, 2015 (edited) Hmm... It doesn't work really well. Can you look at that? <header class="title"><h1>Parcours d'un souvenir</h1></header><div class="image"> <img class="brain" id="brain" src="img/brain.gif" alt="Brain"></div><div class="text"><p id="text"> </p></div><div class="boutons"><ul class="ranger1"> <li class="bouton" id="bouton1" onclick="changeImage(1)" ><h3>Encodage</h3></li> <li class="bouton" id="bouton2" onclick="changeImage(2)" ><h3>Récupération</h3></li></ul><ul class="ranger2"> <li class="bouton" id="bouton3" onclick="changeImage(3)" ><h3>Stockage</h3></li> <li class="bouton" id="bouton4" onclick="changeImage(4)" ><h3>Consolidation</h3></li></ul></div> /* CSS *//*============= Default styling =============*/body{ color: white; background-color: #030726; margin: 0; height: 100%; min-height: 100%;}.image{ height:60%}.boutons{ bottom: 0px; display: block; width: 100%; height:30%}.title{ height:10%; }h1{ text-align: center;}h3{ vertical-align: middle;}img{ display: block; margin-left: auto; margin-right: auto; width: 60%;}.ranger1{ width:100%; list-style: none; padding: 0; margin: 0;}.ranger2{ width: 100%; list-style: none; padding: 0; margin: 0;}/*============= BUTTONS =============*/.bouton{ display: inline-block; text-align: center; background-color: blue; border: 1px solid white; width: 50%; margin: 0px -2px; height: 60px;}.bouton:hover{ background-color: red; cursor: pointer;}.bouton:active{ background-color: green;}/*============= RESPONSIVE =============*/@media screen and (min-width: 1200px){img{ width: 500px;}}@media screen and (max-width: 445px){img{ display: block; margin-left: auto; margin-right: auto; width: 80%; margin-top: 70px;}}@media screen and (max-width: 360px){img{ display: block; margin-left: auto; margin-right: auto; width: 80%; margin-top: 20px;}}/*============= HIDDEN TEXT BLOCK =============*/.text{background-color: yellow;color: black;font-size: 24px;text-align: justify;}It doesn't work. When the new "Div" with the text appear, the buttons are going down, but I want everything stay at his place, but the image going smaller when the text appear. Also, if everything was working great, it would make a better responsive version. Edited October 29, 2015 by Nic727 Link to comment Share on other sites More sharing options...
dsonesuk Posted October 29, 2015 Share Posted October 29, 2015 But! That is the meaning of responsiveness? To have it stay at exact same place it would have to be fixed the oppisite of responsive.You have to set a empty area for text present in ALL circumstances wether there is text or not, then you have to make sure image, text, with all there element padding/margin are able to fit within there percentage container height area.Remember! what is one line small amount of text in desktop, can be 4 or more lines of text in mobile. Link to comment Share on other sites More sharing options...
Shipra Kaul Posted December 15, 2015 Share Posted December 15, 2015 The boxes should be aligned properly if you’re trying to make it available for all sorts of users. Responsive web design demands the alignment of objects in a centralized manner such that everything contained in the page is visible without any hiccups. http://www.innomediatechnologies.com/ 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