[css-d] responsive design
Hello everyone,
I'm sending this message because I am stuck and don't know how to solve
this problem.
i'm new to media queries and wanted to try them out.everything work fine
for mobile and tablet version.
But for the web page layout by default, (with no media query applied) ,
when i resize down the pages a propos.php and enregistrement.php; the
two containers (below the long picture ) which are floated elements don't
float as it should, but instead there is one container falling down
underneath the other one.This only occur when i resize down the browser.
2/when I don't resize the pages , the two containers float but the sum of
their width is not equal to the pic above them which is a 100% width. So
there is a gap .
Please could you help me sort this out:
http://urbanstyle.bugs3.com/about.php
http://urbanstyle.bugs3.com/enregistrement.php
.container1
{
float:left;
background-color: #ff;
border-radius: 10px;
color:#00;
margin-top:5px;
text-align: justify;
padding: 10px;
}
.container2
{
float:left;
background-color: #ff;
border-radius: 10px;
color:#00;
margin-top:5px;
text-align: justify;
padding: 10px;
line-height:1.8em;
padding-top:50px;
padding-bottom:50px;
font-size:1.5em;
}
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] ADMIN: Zach Byrd
...will no longer be sending mail to the list. Ditto the Wednesday spammer, whose name I have already forgotten. Moving forward, I don't think I will post a message like this for every spammer, because I feel like I'm cluttering the list up a bit by so doing-- compounding the sin of the spam, in a way, by adding to the noise and not the signal. So I'll be silently wielding the banhammer unless a) it's been a while since the last swing, and I feel a reminder is in order; or b) the situation is unusual, such as a flood of multiple messages before I can bring the hammer down. Meantime, if anyone works out a way to send airhorn blasts to any user via TCP/IP, let me know. -- Eric A. Meyer (http://meyerweb.com/eric/), List Chaperone CSS is much too interesting and elegant to be not taken seriously. -- Martina Kosloff (http://mako4css.com/) __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] responsive design
On Jun 17, 2013, at 7:44 AM, Olivia A onlinemedia...@gmail.com wrote: But for the web page layout by default, (with no media query applied) , when i resize down the pages a propos.php and enregistrement.php; the two containers (below the long picture ) which are floated elements don't float as it should, but instead there is one container falling down underneath the other one.This only occur when i resize down the browser. 2/when I don't resize the pages , the two containers float but the sum of their width is not equal to the pic above them which is a 100% width. So there is a gap . Please could you help me sort this out: http://urbanstyle.bugs3.com/about.php http://urbanstyle.bugs3.com/enregistrement.php If I am understanding you, to me, your page changes as it ought to for mobile…my understanding is that floats *should* go away or be none…and that we should think of mobile devices as essentially single-column-layout platforms. I do see some inconsistency with the space above Lorem (purple head) and the box below, but you could fix that quickly in your MQ. Also, I might put the menu to the top. And something going on with your Desktop menu such that a propos breaks. Is this your intention? Overall, I like the way your layout flexes down, and ultimately slips into single column. HTH, John __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] display:table-cell;
Given this structure: div class=sidebar a href= class=grey-button icon-infoInfographics/a a href= class=grey-button icon-calcTax Credit Calculator/a a href= class=grey-button icon-faqFrequently Asked Questions/a /div I have the hrefs set to display:table-cell; so as to use vertical-align:middle; but they are appearing next to each other in the browser. I understand why and expect this, but what would be the proper way to get them each on their own line? Wrap them each in a P for example, or is there a way to do it within the CSS? Thanks -- Tom Livingston | Senior Front-End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] display:table-cell;
Yes, I would wrap in a p or in a li (replace the div with a ul in this case). Best, Karl DeSaulniers Design Drumm http://designdrumm.com On Jun 17, 2013, at 11:25 AM, Tom Livingston wrote: Given this structure: div class=sidebar a href= class=grey-button icon-infoInfographics/a a href= class=grey-button icon-calcTax Credit Calculator/a a href= class=grey-button icon-faqFrequently Asked Questions/a /div I have the hrefs set to display:table-cell; so as to use vertical-align:middle; but they are appearing next to each other in the browser. I understand why and expect this, but what would be the proper way to get them each on their own line? Wrap them each in a P for example, or is there a way to do it within the CSS? Thanks -- Tom Livingston | Senior Front-End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] display:table-cell;
2013-06-17 19:25, Tom Livingston wrote: Given this structure: div class=sidebar a href= class=grey-button icon-infoInfographics/a a href= class=grey-button icon-calcTax Credit Calculator/a a href= class=grey-button icon-faqFrequently Asked Questions/a /div It's not really much of a structure: a div element (which is semantically empty by definition) containing three a elements separated only by whitespace (violating accessibility guidelines). I have the hrefs set to display:table-cell; so as to use vertical-align:middle; but they are appearing next to each other in the browser. That's what display: table-cell means. I understand why and expect this, but what would be the proper way to get them each on their own line? Well, display: table-cell. Or, more robustly, display: block. But this depends on what other properties you wish to set. Should the links be of equal width? But it is best to consider the markup first. The markup you choose should primarily create acceptable default (non-CSS) rendering. Secondarily, it should make it easy to achieve your desired rendering; but then the choice depends on the intended styling. Wrap them each in a P for example, or is there a way to do it within the CSS? Are the links paragraphs? Do you want empty lines between them when CSS is off? If you use wrappers for the links, use div elements, or li elements inside a ul element. Yucca __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] display:table-cell;
On 6/17/13 9:25 AM, Tom Livingston wrote:
Given this structure:
div class=sidebar
a href= class=grey-button icon-infoInfographics/a
a href= class=grey-button icon-calcTax Credit Calculator/a
a href= class=grey-button icon-faqFrequently Asked Questions/a
/div
I have the hrefs set to display:table-cell; so as to use
vertical-align:middle; but they are appearing next to each other in
the browser. I understand why and expect this, but what would be the
proper way to get them each on their own line? Wrap them each in a P
for example, or is there a way to do it within the CSS?
Working in the dark here, as I'm not entirely sure what you are trying to do.
An alternative way of vertically aligning a single line of text is to
increase the line height. Here's some code that I use, albeit in a set of list
items, as has been suggested. It should work for your situation, too, I hope.
Just change the line height to your liking:
.sidebar a {
display: block;
border: solid transparent;
border-width: thin 0;
padding: 0 20px;
padding: 0 1.25rem;
font-size: inherit;
font-weight: inherit;
line-height: 2;
text-decoration: none;
color: inherit;
white-space: nowrap;
}
--
Cordially,
David
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] display:table-cell;
On Mon, Jun 17, 2013 at 1:36 PM, Jukka K. Korpela jkorp...@cs.tut.fi wrote: 2013-06-17 19:25, Tom Livingston wrote: Given this structure: div class=sidebar a href= class=grey-button icon-infoInfographics/a a href= class=grey-button icon-calcTax Credit Calculator/a a href= class=grey-button icon-faqFrequently Asked Questions/a /div It's not really much of a structure: a div element (which is semantically empty by definition) containing three a elements separated only by whitespace (violating accessibility guidelines). Thanks Yucca. I have since changed the structure and address the accessibility issue you mentioned. Thanks to others as well. -- Tom Livingston | Senior Front-End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
