Why use media queries ? The different to the %

Question 1

Question by Ruwantha

I know that media queries are use to create responsive layouts. But My question is we can do the same thing using ” % “. So my question is then why media queries?

Answer

Answer by Starx

Starx

Defining layout using % help create a fluid layout, NOT RESPONSIVE layouts.

Media queries help you to define different style sets for different screen sizes.

Also with Media Queries, you don’t have to be limited to just heights and weights, you can control more than sizes.

Example below creates different background for different screen sizes:

@media only screen and (min-width: 320px) {
   body { 
      background: red;
   }
}

@media only screen and (min-width: 780px) {
   body { 
      background: blue;
   }
}

Can % do that?
No

Question 2

Question by Reed Richards

Reed Richards

So I’ve done some layouts that I want to use and I was thinking that setting this in your local.xml file would fix this for every page. Like this

<default>
<reference name="root">
    <action method="setTemplate">
      <template>page/mytheme.phtml</template>
    </action>
</reference>
</default>

This however doesn’t do anything. Instead if I go

...<customer_account_forgotpassword>
  <reference name="root">
    <action method="setTemplate"><template>page/mytheme.phtml</template></action>
  </reference>
</customer_account_forgotpassword>  

<customer_account_confirmation>
  <reference name="root">
    <action method="setTemplate"><template>page/mytheme.phtml</template></action>
  </reference>
</customer_account_confirmation>...

and so on for every specific place it gets changed on those specific pages. Am I thinking wrong or this the only way to do it?

Answer

Answer by Alan Storm

Alan Storm

The problem you’re (probably) running into is that something comes along later and sets the template for the root block again, overriding your change.

More recent versions of Magento (1.4somethingish) introduced a way to prevent this from happening. If you look in page.xml, you’ll see a handle like this

<page_one_column translate="label">
    <label>All One-Column Layout Pages</label>
    <reference name="root">
        <action method="setTemplate"><template>page/1column.phtml</template></action>
        <!-- Mark root page block that template is applied -->
        <action method="setIsHandle"><applied>1</applied></action>
    </reference>
</page_one_column>

If the page_one_column handle gets applied to your request, or you manually apply it with

<update handle="page_one_column" />

Magento will change the template and call the setIsHandle method on the block.

<action method="setIsHandle"><applied>1</applied></action>

There’s code in Magento that will look for the IsHandle property, and if it’s true, further calls to setTemplate will be ignored. (that’s over-simplifying things a bit, but is more or less true)

Try something like

<default>
    <reference name="root">
        <action method="setTemplate">
          <template>page/mytheme.phtml</template>
        </action>
        <action method="setIsHandle">
            <applied>1</applied>
        </action>       
    </reference>
</default>

And see if that helps.

Keep in mind this is one of those grey areas where it’s not clear if third party developers are supposed to tread. Also, changing the template for all pages may have un-desirable effect on parts of the site that expect to be in a certain template.

Answer

Answer by Starx

Starx

Actually, you are the on the right track. You just didn’t specify the request on your local.xml. You should also include the request you are overriding.

Here is a example code of local.xml

<layout>
    <default>
    ....
    </default>

    <!-- Update Configuration for this request specially -->
    <customer_account_confirmation> 
      <reference name="root">
        <action method="setTemplate"><template>page/mytheme.phtml</template></action>
      </reference>
    </customer_account_confirmation>

</layout>

This much configuration is enough to do, what you need.

Question 3

Question by Kevin L.

Kevin L.

Is there a CSS selector for the first element of every visual row of block items?
That is, imagine having 20 block elements such that they flow across multiple lines to fit in their parent container; can I select the leftmost item of each row?

It’s doable in JavaScript by looking at the top position of all of the elements, but is it possible in plain CSS?

Answer

Answer by Starx

Starx

Yes, Its possible through CSS but only if you can fix the elements in every row.

Since you haven’t provided your case, here is an example.

Suppose, your elements are stacked up in a ul and li pattern and are three lists in a row, then you can use the following css snippet.

li:first-child, li:nth-child(3n+1) {
    background: red;
}

Demo

Question 4

Question by user1483487

user1483487

I am developing a mobile site and trying to use very simple markups.

Below is my code which is giving me problem :

<div class="abc">
  <div>&nbsp;</div>
  <table>

  </table>
</div>

CSS

.abc {height:some-dynamic-value-in-px}

.abc div {height:5%;}
.abc table {height:95%;}

Problem is this code worked on all the latest phones.But when I checked on sony ericson (500i)
the table height was coming out of the parent div abc and the UI was distorted.
I checked this site http://www.apptools.com/examples/tableheight.php
and gave height {100%} to body but still no success.
Please let me know where I am going wrong.

Also, when I gave the height in px it worked for all handsets.But I want to know the reason why percentage was not working.

Thanks.

Answer

Answer by Starx

Starx

If you already know the height of the div, then its better to use fixed dimensions in px.

Try to avoid the complexity, if its not necessary.

And for some browsers, giving body { height: 100%; } might not be enough.

html, body { height: 100%; }

.abc { height:100%; }
.abc div { height:5%; }
.abc table { height:95%; }

Also, dont forget to include the DOCTYPE on your webpage.

Question 5

Question by deathlock

deathlock

I’ve seen that similar questions have been asked before, such as: For tabular data, what renders faster, CSS or <TABLE>? or Why not use tables for layout in HTML?

However, besides being a rather old questions (2-4 years ago), I am wondering if there is actually a research/a data which proves with number that (with CSS) renders faster than for displaying tabular data.

I’m not trying to be offensive/disregarding the notion that DIV + CSS is faster (or table is more appropriate), I’m only wanting to know for practical purposes.

I also am not intending this to be a discussion/debate. A link to numbers is what I was expecting.

.

Like previous questions, I’m also aware that to display tabular data it is better to use table. But I just want to know which one is actually, statistically, faster.

Pardon my English, not a native speaker. Sorry if there is any offense taken.

Answer

Answer by Starx

Starx

Update:

The Discussion about Tables Or Divs have been long fought and left unsettled. As mentioned in your question yourself, the table is more logical when used to show tabular data.

Apart from this as we are moving on to HTML5, the elements are more logical then just styling components. Lets divs divide a portion and Let table display data.

Answering the Misleading Title

CSS is a stylesheet and Table is Element. The comparison between these two are obsolete.###

Read this article. This approaches different then articles normally do.

Question 6

Question by StevenChow

StevenChow

I’ve got a problem with my page’s layout.
I want to create 3 table and set them side by side, so I set float attribute of them is “left”, but the height of div container only fix with the 3rd table, two first table is overflow of the div. Please help me to fix it.
Here is my page

<body>

<div id="main">

    <table id="tbSA" class="tb">
        <tr><td>Code</td></tr>
        <tr><td>Code</td></tr>
        <tr><td>Code</td></tr>
        <tr><td>Code</td></tr>
        <tr><td>Code</td></tr>
    </table>

    <table id="tbShops" class="tb">
        <tr><td>Code</td></tr>
        <tr><td>Code</td></tr>
        <tr><td>Code</td></tr>
        <tr><td>Code</td></tr>
    </table>

    <table>
        <tr><td>Code</td></tr>
        <tr><td>Code</td></tr>
        <tr><td>Code</td></tr>
    </table>

</div>
</body>

and here is style

body {
    background-color: #5c87b2;
}
#main {
    margin: 10px 10px 15px 10px;
    background-color: #fff;
}

table, td {
  border: solid 1px #e8eef4;
}

.tb {
    float:left;
    margin-right:10px;
}

Answer

Answer by Starx

Starx

This sort problem is because your first two table are floated. but the last one is not so the div will correctly resize to it to wrap the third table.

But it order to make the div wrap around the floated table too. You have to clear the floats.

There are many ways to solve this:

The safest way is to use, a clearing div just before closing the parent div ^[Demo]
```
<div style="clear:both"></div>
```
Old popular way is to give overflow:hidden which will force the div to wrap around all the elements. This is what other answers are focused out [Demo]

The third way is to use a .clearfix class and is the most popular way nowadays. [Demo]

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

Question 7

Question by Horace Loeb

Horace Loeb

I want to fit text in a <div> to the width of the <div>, but fit images in the same <div> to the width of the parent <div>

This diagram should make things clear:

(here’s the URL if it’s too small: http://dl.dropbox.com/u/2792776/screenshots/2012-01-22_1838.png)

Answer

Answer by Starx

Starx

With a little bit of js, you can do this with avoiding all the complication.

$(document).ready(function() {
    //read every images
    $("img").each(function(k,v) {
        //get the width parent's parent
        var width = $(this).parent().parent().innerWidth();
        //use it
        $(this).css('width',width);
    });
});

Demo

Question 8

Question by Tattat

Tattat

Here is the layout I would like to make:

Layout example

‘input’ is 70% width of the screen.
and the ‘second input’ is 70% width of ‘input’.
‘button’ is 30% width of ‘input’.
‘input’ is in the middle of the screen.

How can I do so? Thank you.

Answer

Answer by Starx

Starx

Do not think this require any special skills. This is a very basic fluid layout. An example

Markup

<div id="wrapper">
  <input type="text" id="firstrow_textbox" />
  <input type="text" id="secondrow_textbox" />
  <input type="button" id="secondrow_button" />
</div>

CSS

#wrapper {
    width: 70%;
}
  #firstrow_textbox { width: 100%; }
  #secondrow_textbox { width: 70%; }
  #secondrow_button { width: 28%; } /* Due to border and all */

Demo

Question 9

Question by Louis

Louis

I need to find a cross browser way of having two divs contained in a parent div where the first child has a fixed height and the second flows down to be contained in the parent.

<div id="parent"><div id="header"></div><div id="body"></div></div>

     height: 500px
 _____________________
|  _________________  |
| |  height: 20px   | |
| |_________________| |
|  _________________  |
| |                 | |
| |                 | |
| |  height: 100%   | |
| |                 | |
| |                 | |
| |_________________| |
|_____________________|

So the parent has a fixed height of 500px, the header div has a fixed height of 20px but the body div’s height must flow down to fit inside the parent. Giving it a height of 100% overflows it’s height by 20px because height:100% uses the parents height not taking into account the children. I saw a solution using position absolute but this does not work on IE7 or 6. Is there a cross browser solution for this as it is a relatively simple layout?

Edit: Forgot to mention that the parent will be resizable so will not always be 500px. Using jquery resizable, the parent dimensions could be anything and will change often.

Edit 2: I wish I could credit multiple people for this solution as I took advice from everyone. Basically I gave #body a height of 480px and used the alsoResize option in resizable to resize the parent and the body.

Answer

Answer by loxxy

loxxy

.parent  { height : auto; }
.child1  { height : 20px;  }
.child2  { height : 480px;  }

Instead of setting the size of the parent dynamically, control child2’s height.

Hope that is what your asking for.

Edit: Edited as per your update!

Answer

Answer by Starx

Starx

If you already know the height of outer container, and the one of height of the divisions inside, you can know the height of the remaining div I think.

try something like this height: 480px;. Keep it simple and easy

Tag: layout

Why use media queries ? The different to the %

Question by Ruwantha

Answer by Starx

How to set a default layout in Magento 1.5 using local.xml?

Question by Reed Richards

Answer by Alan Storm

Answer by Starx

CSS selector for first element of visual (block reflow) row

Question by Kevin L.

Answer by Starx

Demo

table height in percentage not working

Question by user1483487

Answer by Starx

Is there any research/data that shows DIV (with CSS) is faster than TABLE?

Question by deathlock

Answer by Starx

Read this article. This approaches different then articles normally do.

Three table side by side overflow of div container?

Question by StevenChow

Answer by Starx

Allow images in a <div> to be wider than lines of text in the same <div>

Question by Horace Loeb

Answer by Starx

Demo

How to layout follow content using CSS?

Question by Tattat

Answer by Starx

Simple CSS Layout

Question by Louis

Answer by loxxy

Answer by Starx

Please fill the form - I will response as fast as I can!