Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>If you use percentages as your height and/or width then it will be a percentage of the parent container.</p> <p>If you want your page to behave well when using a zoom, ie. ctrl + mouse wheel up or down, size everything in your page using em. 1 em = 16px by default. Just get used to using em. Get a calculator out and start converting things. Trust me, it's worth it to have a page that zooms straight in in out without jumbling.</p> <p>Your outermost container may use percentages as long as you're using an auto margin for the central contents this is an exception to using em, that way things will still be centered on all resolutions. When I say outermost container, I mean body...</p> <p>Before I tell you how to make it work I'll answer the other questions:</p> <blockquote> <p>"...I did manage to make it work with display: block when the menu pane is like a vertical column and not a horizontal one. Could anyone pls explain why this happens, and how display property of css affects that element?"</p> </blockquote> <p>Block elements stack on top of each other vertically. This means that in a vertical arrangement if the zoom level is changed, those elements are perfectly at home taking that extra space up to the right side. Now, if they are intended to be lined up horizontally, display block will not work because that is simply just not what it does. Display inline-block will stack them horizontally preserving heights and widths set for the container, and to my own dismay, adding tiny margins between elements unlike the use of float, which would be touching the previous element, but float is definitely not something I would recommend for a nav menu. </p> <p>Let's say you have your first link, and it is display:block. It will start its own new horizontal line, assuming there is not a float:(side) item before it with extra space to fill. In that case, you would add clear:both(or :left/:right) to overcome this. Now let's say you want to add a second link to the right of the first one which is display:block. The second one could be display:inline-block, and it would be on the same level as the first one, but if you did this the other way around, the second one, which is display:block, would start on its own new line below.</p> <p>Now, to make your button do what you want it to do:</p> <p>I will assume for the purpose of giving you a good answer that screen width in pixels is 1280px. So 80% of that is 64em. That is (1280px * .80)/16px = 64em because 1em = 16px. As I mentioned before, we do this to make your site elastic when it zooms.</p> <p>You've previously designated #container as height:450px; So let's convert that. 450px/16px = 28.125em (em values can go to three decimal places, but no more) This is good, so we have an exact conversion, and not a rounded value.</p> <h1>container is now finished and should be as such:</h1> <pre><code>#container { width: 64em; margin: auto; height: 28.125em; } </code></pre> <p>Next change height in #menu. You have it as height:25%. That is 25% of 450px/or/28.125em If we leave it at 25% it will mess up the zooming. So let's convert. 28.125em/4 = 7.03125em</p> <p>This time we must round to 3 decimal places. So we get 7.031em.</p> <h1>menu is now finished and should be as such:</h1> <pre><code>#menu { background-color: #1b9359; height: 7.031em; } </code></pre> <p>Next is your button class.</p> <pre><code>.button { text-decoration: none; float: left; font: bold 1.2em sans-serif; line-height: 115px; margin-left: 20px; display: block; text-align: center; } </code></pre> <p>At this point I lose some of my own certainty about how CSS will react, but I will start with this. Do not use float:left and Display:anything together. In this case, use display:inline-block. Get rid of the float:left. I am not sure why you have a line-height set. I am guessing it is your way of attempting to set a height for your button because it is 2.5px larger than the height of #menu (line-height of .button = 115px, height of #menu = 112.5px which we have already converted to 7.031em). If that's what you're trying to do you're doing it wrong. get rid of line height, and make it the same height as its container so that it fills it. height:7.031em;</p> <p>I'll assume if you're making a horizontal menu, that you aren't trying to make one button take up the entire width. If you do not give it a width, it will fill the whole row. I'll be bold and guess you probably want your button somewhere in the ballpark of twice as wide as it is high. Let's just go with 15em(240px). width:15em;</p> <p>Last is margin-left... 20/16 = 1.25em. Cake.</p> <p>Now we have:</p> <pre><code>.button { text-decoration: none; font: bold 1.2em sans-serif; height: 7.031em; width:15em; margin-left: 1.25em; display: inline-block; text-align: center; } </code></pre> <p>Keep in mind that block elements, whether inline or not, have little built-in margins on top of the margin-left that you've added.</p> <p>If you make these changes, your page should zoom beautifully and your link will fill out its container vertically, but be a specified width to keep it clean. Never use px or percentages if you want to avoid zoom slop. The body container is 100% by default, but it holds everything and therefore the things in the center seem to grow outward toward the edges and therefore do not show any visible effect from the body not being set based on em, and it also makes the page naturally friendly with a variety of screen resolutions.</p> <p>I hope this helps.</p> <p><em><strong>Edit:</em></strong> </p> <p>As I mentioned, I lost some of my certainty. The line:</p> <pre><code>font: bold 1.2em sans-serif; </code></pre> <p>Does something that makes the container be larger than 7.031em removing that line fixes the problem, but I do not know the remedy if you insist on a font size of 1.2em. I tried setting height to 6.831em instead of 7.031em and it did not do the trick.</p> <p>A few more tips:</p> <p>1) If you still feel that you need a margin, perhaps margin-right would better suit you so you don't have random slack space to the left.</p> <p>2) The CSS I provided does not adjust for the vertical alignment of your link text; to fix it add line-height:7.031em; to the .button class. Note: this method only words with single lines of text!!!</p>
    singulars
    1. This table or related slice is empty.
    1. POhow to set button background such that it takes up height and width of parent div? what css property affects which dimension?
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USRyan Mortensen
    1. USRyan Mortensen
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POhow to set button background such that it takes up height and width of parent div? what css property affects which dimension?
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTAcceptedByOriginator
    1. COhey! thanks for the big answer! give me some time i'm reading it
      singulars
      1. PO
      1. USamin
    2. COthanks buddy, for your hard work. it is functioning properly now. ^_^
      singulars
      1. PO
      1. USamin
    3. COYou're welcome. Glad I could help!
      singulars
      1. PO
      1. USRyan Mortensen
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload