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.
Related
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.
Having trouble figuring this out if anyone can help me id really appreciate it! :)
Basically im building, or well trying to build a responsive wesbite using HTML5, i have it all structured how I want and everything but one thing is wrong and i cant figure out how to correct it.
I have set a max-width for all my sections of 1000px and all the sections have been centred normally using margin: 0 auto; but all the articles inside the section are still left aligned?
I tried setting a global rule for article tags using
article {
margin: 0 auto;
}
but this didnt work so does anyone know whats going on? Here is a link to a fiddle showing what i mean:
http://jsfiddle.net/DannyW86/9YYNR/1/
here is a screen grab of how it appears in the browser, you can clearly see that the 3 articles with the icons are not centred beneath the text above
You can't center elements with margin: auto; if they are placed next to each other.
Try something like this: http://jsfiddle.net/leo/LzKTy/
(!!): Note the display: table;-attribute which i have addet to #boxcontent and the display: table-cell;-attribute i've addet to article.
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 menu that's been giving me quite some trouble. What I'm trying to do is make the menu links, when clicked, reveal a drop down secondary division. However, it's acting as if the menu being revealed is floating and I can't seem to figure out why.
Here's the ideal design I want:
http://jsfiddle.net/WeL6j/7/
Notice how the grey division is affected and slides down as well.
I'd like the same thing to happen with the divs that hold 01, 02, etc and the one with the green 01. Basically all the content below the menu. I've posted a fiddle of my code just to give an idea of what it's doing and so you can edit it in real time. I haven't created any fallback code for it, so it's only really viewable in chrome. (sorry) It's also going to be messy as I've been moving things around trying to get it to work properly. Anyways, here's what I have so far.
-removed-
Thanks in advance for the help, Brian.
Try this:
http://jsfiddle.net/ETaqa/63/
BTW, you should really format the nesting. It was confusing figuring out the div levels.
Hi you can define some properties in you css as like this
.content {
position: relative;
top: -7px;
z-index: 10;
}
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).