I am stuck with a problem : I want to make very simple "responsive design" for internal news site based on Sharepoint. The idea to make show only 1 block per row for small resolutions, and 2 blocks per row for larger resolutions.
I want to do it in this way :
https://www.dropbox.com/s/v2op6zgccujglcs/4.png
I tried to do it with Float:left , but it works bad in that situation:
https://www.dropbox.com/s/zh9wboi131of01l/3.png
Please, help me to find the best solution for this problem.
I see two potential questions you're asking:
1) "How do I make the content shift from three columns, to two columns using responsive design?"
and
2) "I'm having trouble with Content Choreography...", which is summed up in this article: http://trentwalton.com/2011/07/14/content-choreography/
I'll try to answer question 1, which is basically to use media queries to adjust your layout once it's under 1000px.
Here's an example you would put at the bottom of your stylesheet :
#media all and (max-width:999px) {
.yourDiv {
float: none;
width: 100%;
}
.yourOtherDiv {
float: none;
width: 100%;
}
}
This is the general idea anyway. You tell your floated divs to stop floating so they stack on top of eachother in a tunnel of content.
Question #2 is a little trickier to explain if that is what you were asking.
If you post your code, I would be happy to try and help more specifically.
Related
I am currently just trying to create a responsive mock up with the following code and it looks fine as a single column in the mobile layout but as soon as it reaches a resolution large enough for 2 or 3 columns the images and button in the top right corner disappear unless they are still in the 1st column. Any help would be greatly appreciated. I have a fiddle here: http://jsfiddle.net/d6rs4abw/1/
This is the main area that I am fighting with but I could be wrong somewhere else that is effecting my overall css
Thank you in advance for any help you can offer, This is one of the first layouts Ive ever done so take it easy on me
ul#products {
margin:1em 0;
padding-left:1em;
-webkit-column-count:auto;
-webkit-column-gap:2.5em;
-webkit-column-width: 310px;
}
Take a look at animation properties, for instance -webkit-backface-visibility: hidden; set for .flip and face: looks like this property causes invisibility.
I have two columns in my web app when the screen is large enough.
http://i.imgur.com/FL7lgjj.png
The issue is the space between the first element to the left and the one below it is bothering me.
.thumnnail {
display: inline-block;
width: 400px;
float: right;
}
is the CSS of the little boxes. I am not sure how to get them to stack. more closely. Let me know if more details are required!
EDIT: HEere is the JS Fiddle
http://jsfiddle.net/hkLXZ/
This requires one of two things:
Use CSS columns (e.g. .your-element { column-count: 3; }), in which case your columns will not stack left to right, but top to bottom.
Use a JS layout engine like Masonry or Isotope, which offers a lot more control with regard to how elements are laid out, but requires JavaScript.
I have searched a lot for centering a div, both horizontally and vertically, this is the method given everywhere:
div {
position:fixed;
top:50%;
left:50%;
margin-left:(div width/2)
margin-top: (div height/2)
}
I just found a new solution to centering a div, both horizontally and vertically, by wrapping it inside a table. I've tested it in ie7 and above, plus other browsers.
Here is an example : http://jsbin.com/ocenok/2/
I was wondering that the first method is found everywhere on the internet, SO, etc. and requires beforehand knowledge of width and height, or is usually calculated via Javascript.
The table approach seems flawless, and requires neither javascript, nor fixed height/width.
Are there any drawbacks to the table approach ?
(I do not know the height/width of the div that I want to center.)
Update (To make my question clearer) :
I myself hate using tables for non-tabular/layout data.
I know that what I want can easily be achieved using Javascript.
I figured I can achieve this using display:table, killing IE7 support.
But what I'm trying to understand is, that when I can achieve this using a single <table> element, what are the drawbacks, if any.
Checking Answers here and on similar questions, no one has recommended this method, even though it uses all valid HTML elements and syntax and rules.
If everyone is recommending to use javascript to handle presentation, even though it is easily possible using CSS, it must have some drawbacks.
Code :
<table>
<tr>
<td>
<div>This is div that needs to be centered.</div>
</td>
</tr>
</table>
and then apply the following CSS
table {
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
}
table td {
width : 100%;
text-align: center;
}
div {
width:100px;
height:100px;
background:pink;
margin: 0 auto;
}
see the below function and change as per your needs
function positionLightboxImage() {
var top = ($(window).height() - $('#lightbox').height()) / 2;
var left = ($(window).width() - $('#lightbox').width()) / 2;
console.log("The calculated position is:");
console.log(top,left);
$('#lightbox')
.css({
'top': top + $(document).scrollTop(),
'left': left
})
.fadeIn();
console.log('A jQuery selection:');
console.log($('#lightbox'));
}
Updated answer HTML and CSS:
HTML:
<div id="outer"><div id="inner"></div></div>
CSS:
#outer {
position: absolute;
top: 50%;
left: 0px;
width: 100%;
height: 1px;
overflow: visible;
background:red;
}
#inner {
width: 300px;
height: 200px;
margin-left: -150px; /*** width / 2 ***/
position: absolute;
top: -100px; /*** height / 2 ***/
left: 50%;
background:#ccc;
}
Even more updated using jquery and always remain center when you resize the window too : http://jsfiddle.net/3aZZW/3/
Demo: http://jsfiddle.net/3aZZW/3/embedded/result/
There are different reasons why you should not use tables. Some which have already been discussed here. I understand that you are only using one row and you will hopefully try to keep your promise to not add any rows but if you come to break that promise, some of the reasons below will show a lot more significance, like the rendering speed and the screen reader issue. That's exactly why they call somethings standard and some not. Standards take everything and every situation into account.
Rendering speed issue:
One of the biggest drawbacks of tables is the way they are rendered by browsers. The inside of the table must be loaded before the position and size of the table can be exactly determined. This may cause problems if you are going to have a lot of information in the table.
Validness and standards:
Using tables for non-tabular data means you are writing invalid X/HTML. Which may be fine for some. But I don't recommend. See here
SEO:
I didn't know this before I did a search on some other less heard issues with using tables.
Search engines love valid code, so by not using tables it helps with
Search Engine Optimization (SEO).
See here for more info on this
Problems for screen readers and Braille displays:
Tables can't be used easily in screen readers. Check this article.
If you must use a table for layout, remember that screen readers and
Braille displays read tables row-by-row across the columns. The TAB
order also goes through the table in this way. So make sure that your
table structure makes sense when reading from left to right,
row-by-row.
On the + side:
I hate to admit that if you honestly use just that one table with one row and one column and with a very small amount of data inside (which I would call a limitation) then the page would probably render faster than the time you use Javascript but the other issues remain.
Tables are only meant to be used for tabular data - not for layout purposes.
Using tables for your problem provides a quick and easy solution for you but it doesn't mean it's the best, or correct method.
Just because something takes a little bit more thought and effort doesn't mean it should be avoided.
Use tables for this at your peril - your immortal soul may pay a heavy psychic toll at some future date for your actions today :p
According to StatCounter, as of November 2012, IE7 accounts for only 0.87% of the usage share of desktop browsers. It's not clear how accurate that measure is; some countries are probably disproportionately weighted and the sample-set almost certainly doesn't exactly match your user demographics, whatever they are. But, how much would you really lose by leaving IE7 behind? Might as well go with display: table;
On the other hand, it drives me nuts that display: table; is necessary. This is the closest I can get to a workable alternative:
HTML
<div id="pg-centerer">
<div id="shifter">
<div id="item">content</div>
</div>
</div>
CSS
#pg-centerer {
position: absolute;
left: 50%;
top: 50%;
}
#shifter {
position: relative;
height: 40px; /** Must set the height here. **/
left: -50%;
}
#item {
position: relative;
top: -50%;
}
So far, I haven't figured out how to avoid setting the height of the div#shifter element. Here's a working demo. I've tested this on Mac 10.8.1 FF 18, Safari 6.0, Chrome 25.0.1362.0 canary, and iOS Safari 6.0.1.
There is not much of a problem till you have small data inside table. Tables are somewhat heavy for browsers and with more data coming in, they make your web page response slower in comparison.
The example you have shown is only for an example but in real world you will have data inside it. If its going to be large try choosing a different method. may be the flexbox model or box model that is going to be supported in all modern browsers very soon. See an example here. http://www.kirupa.com/html5/centering_vertically_horizontally.htm
If the data inside is going to be small, feel free to user your method.
Directing my words to the geek inside who care not about standards, or multi-channeling content served... there is really just one technical problem with tables that I can think of, if you have large content inside that cell, the browser will wait for all content to load to be able to calculate the width and height of the cell before rendering... so if that content is really large and has large images, it will not render gradually... and making it a fixed table, well, the trick above won't work.
I depends on what you're trying to achieve. If it's just one page with one thing centered, then its great.
But I see you have set the table position: fixed. Which means it will scroll with you and go on top of content below. The other thing is that, if that table really fills up, you wont be able to see whats at the bottom of that table, since the position is set to fixed.
It's a great solution to center a small piece of text, image or information.
But its a bad thing to use within a page with a lot of other content or a lot of content within the table.
Side note: Using javascript to achieve something simple like that, is stupid. It can be done without javascript using CSS only. What if you use javascript to center something, and a client without javascript visits? Lets not destroy the web by using javascript/jquery for all the simple things ;)
http://phrogz.net/css/WhyTablesAreBadForLayout.html
Basically, it's slightly longer load times (JavaScript is slower), bad for screen readers (test it with one like JAWS), and hard to redesign (really only hard if you happen to forget why the heck you put a table there, so make sure to leave yourself a comment :). What would be really nice (I'm talking to you, W3C!) is something like box-align: x y;. Then you could also do things like align: center center or align: center bottom;.
Hi all and thanks in advance for your help.
I'm pretty new to the CSS, and I would like to have a good input to start building and learning the fastest way possible. I'm already doing some CSS tests myself. Right on the question.
this is the relative css code (I put it on pastebin because it's a bit long)
CSS CODE
As you can see in the code, the 2 tables showing up in the image, have a background and I had to set their size manually with
width:100px;
height:120px;
in the td.menuleft and td.menucenter classes.
1° Question
How do I make automatically resizing cells?
For example i want to say:
Make table tag wide 100% of the page width, then let me make classes for cell tables that are a certain percentage of the table width.
Example
Pic of my work, and how I want to make it like
This way it will be easy to make up tables into tags to automatically fill pages. I've seen something about positioning (relative, absolute) but I didn't managed to make it work.
2° question
What's the best way to structure a web page with css in general? It's ok to do like I said, a div, with tables inside and place every element in a table like manner?
Or can you give me any guide step to step on how to do a particular template?
Thanks guys.
when you want to learn how to make good and effective design that are also considered any worth by search engines, then don't use tables for layouts. tables are there for showing table data, not layout. Use instead divs and start reading about positions, displays, floats.
That is the way you want to go
If you set the tds to be a certain percentage width, they will be the percentage of the parent. so:
table {
width: 100px;
}
tr {
width: 100% /* Will be 100px */
}
td.quarter {
width: 25%; /* Will be 25px */
}
td.half {
width: 50%; /* Will be 50px */
}
And I agree with the previous poster, do NOT use tables for layouts. Not that you are doing that here. But for layouts stick to divs and such.
I have a two column layout, with a gray sidebar on the right. I need the sidebar's height to expand when the height of the left column is increased (due to content being dynamically expanded). I can make the sidebar fit a static page, but I cannot get it to increase in size with the rest of the page. Did some Googling, but couldn't find a work-around that worked for me.
Does anyone know how to do this?
This is a common problem when using DIVS for this type of layout.
If you google 'Faux column' you should get some answers.
eg. http://www.alistapart.com/articles/fauxcolumns/
This may be slightly off but if you use jQuery on your site you can perform a quick calculation and resize all DIVs sharing a similar class to the maximum height:
$('.elements').height(Math.max($('#div1').height(), $('#div2').height()));
I have been haunted by this problem for a while and I wrote an article about this issue: Done with faux columns. Here is what I argued:
JavaScript based solution for this
problem is not worse than any other
solution. In fact if you are using
JavaScript, you may save a few hours
of frustration of trying to get things
working. People will warn you against
this by saying “What will happen if
the user turned off JavaScript?“.
Believe me, if the user has turned off
JavaScript, most of the web is broken
for him anyway. Your sidebar does not
matter to him.
As cballou mentioned, the simplest way to do this thing is to use JQuery code:
$(".sidebar").height(Math.max($(".content").height(),$(".sidebar").height()));
I changed the background-color to the same color as my sidebar, on that specific page, although I do have backgrounds for all my sections rather than one overall background. But that might not work for everyone.
In my stylesheet,
.sidec
{
background-color:#123456;
}
In my HTML page,
<body class="sidec">
content....
</body>
I recently saw a quite creative solution to this problem using the CSS properties position:absolute and border.
Definitely worth checking out to see if it works for you.
Link: http://woorkup.com/2009/10/11/really-simple-css-trick-for-equal-height-columns/
I'm not sure if this will help, as I'm a newbie. However, when struggling with getting my sidebar to show the whole content when I doubled it's size I did the following. I was changing my height and width with no response until I changed the class. My class was listed SB frame SB width. So when I changed my class to read SB height SB width it fit to my content instead of the original frame size. I also tried SB max sb width with worked too, but it took out my footer menu bar (meaning it wouldn't show it anymore). I went back to SB height SB width, and all is well. That's super duper elementary for all of you I'm sure, but just in case there is another newbie reading this that doesn't understand much about html code like myself... I hope this helps =)
Happy Holidays Everyone!
hugs, tara
I'm guessing you want to apply certain effect to your layout such that it will require both columns to resize together. If you want to dynamically change the values of the height of the columns, I doubt it will work simply with css unless you implement some javascript to control the style.
As Dal suggested, do look at the link on faux columns. As the name suggests, the solution isn't much about modifying the columns height. Instead, it gives the "illusion" that both columns appear to be of the same height when in reality they are not -- and is with the use of tiles of background image.
The idea is there isn't a need to complicate the mark-up. Simple structure with a touch of "illusion" with images is a common practice in web design.
Regards,
Jonah
With the poor attitude towards new members on here I expect to be barracked for this answer, here goes.
I got around this problem by creating a background image 960px wide 1px high with the two colors I needed for the columns in their respective widths (780px and 180px). I then used this as the background image for my container repeated on the y axis and made the content and the right sidebar background-color: transparent.
.container {
width: 960px;
background-color: #FFFFFF;
margin: 0 auto;
background-image: url(../images/bgs/conbg.jpg);
background-repeat: repeat-y;
}
.sidebar1 {
float: right;
width: 180px;
height:auto;
background-color:transparent;
padding-bottom: 10px;
}
.content {
padding: 10px 0;
width: 780px;
background-color:transparent;
float: right;
}
I am sure that this method has its limitations but it works perfectly on all my pages.
It is possible that I have not explained this very well, if so, be nice about it will you please. I will endevour to expand on my method(which is probably already common knowledge).