1

I'm making an application using CSS and div in HTML, it's a restaurant menu, i have a wireframe that i must obey, so i'm using a pixel positioning inside the CSS not a percent ratio, so when opening the website in a maximized state is looks like:

enter image description here

But when minimizing it of curse it's sizes and positions don't response to that :

enter image description here

here is the fiddle

****The Code:**

*CSS:

    .buttonClass {
    width: 381px;
    height: auto;
    text-align: center;
    line-height: normal;
    border-radius: 7px;
    z-index: 3;
    background-image: -webkit-linear-gradient(top,#FFF 0%,#91BDD6 100%);
    background-image: -moz-linear-gradient(top, #FFFFFF 0%, #91BDD6 100%);
    background-image: -ms-linear-gradient(top,#FFF,#91BDD6);
    background-image: -o-linear-gradient(top,#FFF,#91BDD6);
    background-image: linear-gradient(top,#FFF,#91BDD6);
    border: solid #91BDD6 5px;
    box-shadow: 0px 0px 0px 5px #fff, 5px 3px 12px #000000;
    position: absolute;
    right:0;
    bottom:0;
}

.totalClass {
    width: 376px;
    height: 30px;
    padding: 10px 10px;
    text-align: center;
    line-height: normal;
    border-radius: 7px;
    z-index: 3;
    background-image: -moz-linear-gradient(top, #FFFFFF 0%, #91BDD6 100%);
    position: absolute;
    right: 0;
    top: 700px;
}

*div:

<div id="confirm" class="buttonClass">
  <div align="center">Confirm</div>
</div>    

<div id="total" class="totalClass">
  <div align="left"></div>
</div>      
9
  • Why you don't use percentage? Oct 1, 2013 at 11:48
  • as i want the total and confirm divs in a predefined position as in the first image
    – Refaat
    Oct 1, 2013 at 11:50
  • Create a jsFiddle and I'm tring to resolve your problem. Oct 1, 2013 at 11:51
  • Why not make the position: fixed; to the bottom left or at least position: relative; inside another div and then use bottom: 0px; right: 0px; Oct 1, 2013 at 12:11
  • 1
    @Refaat see: stackoverflow.com/questions/11143273/… Oct 1, 2013 at 13:32

3 Answers 3

3

The easiest way i can think of is: change the width:381px to max-width:381px and add a width:100%. In this way if there is enough place for the button it will be 381px wide and, if there is no place it will fit the given width.

The CSS code would be:

    .buttonClass {
    max-width: 381px;
    width:100%;
    height: auto;
    text-align: center;
    line-height: normal;
    border-radius: 7px;
    z-index: 3;
    background-image: -webkit-linear-gradient(top, #FFF 0%, #91BDD6 100%);
    background-image: -moz-linear-gradient(top, #FFFFFF 0%, #91BDD6 100%);
    background-image: -ms-linear-gradient(top, #FFF, #91BDD6);
    background-image: -o-linear-gradient(top, #FFF, #91BDD6);
    background-image: linear-gradient(top, #FFF, #91BDD6);
    border: solid #91BDD6 5px;
    box-shadow: 0px 0px 0px 5px #fff, 5px 3px 12px #000000;
    position: absolute;
    right:0;
    bottom:0;
}
.totalClass {
    width: 376px;
    height: 30px;
    padding: 10px 10px;
    text-align: center;
    line-height: normal;
    border-radius: 7px;
    z-index: 3;
    background-image: -moz-linear-gradient(top, #FFFFFF 0%, #91BDD6 100%);
    position: absolute;
    right: 0;
    top: 700px;
}
0

when you want to change a width or a height onclick="" then you might as well use javascript to change the dimensions. Javascript can also change the positions of objects - Look into it.

HTML

<div id="sidebar"></div>
<button onclick="hide_sidebar()" />

CSS

#sidebar {
width:200px;
height:100%;
float:right;
margin:0 0 0 0;
transition:0.25s
}

JS

function hide_sidebar() {
document.getElementById("sidebar").style.width="0";
}
0

Its not a big issue just give that div in pixel and put an ID for that button and give that button width 100%

ex:

button div id
{
width:20px;
height:20px;
}

#button
{
width:100%;
height:20px;
}

then continue enjoy your coding

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.