I am not sure why the about field on my site, sailing down in IE7 (see http://img.skitch.com/20090629-t8mcp6tffd8kpwxrbk1rchc6wu.jpg). (It looks fine in FF for example). Who can suggest a way to fix it?
Steps to reproduce:
Go to http://j-in.org.ua:9000/account/login
Login using data (login: test, pass: test)
You will see same as on attached image :(
From what I can see you need to have two columns just have a containing section and place two floating divs inside of them then they will sit together and you can adjust either to your liking.
content {
clear: both;
width: 950px;
padding-bottom: 10px;
background:#fff;
overflow:hidden;
}
contentLeft {
float: left;
display:inline;
width: 630px;
margin: 10px;
background:#fff;
}
contentRight {
float: right;
width: 270px;
margin-top:25px;
margin-right:15px;
background:#d7e5f7;
}
Obviously you will need to adjust the size of the columns to suit your site as well as colours etc but that should do it. You also need to make sure that your ContentLeft and ContentRight widths do not exceed the Contents width (including margins).
Related
hey i have set some breakpoints and ive set list item in percentage and it fits well in different breakpoints.
but my default one which i haven't set is displayed like this.
here is my sass code.
li
{
width:20%;
padding: 2px;
float:left;
#include media($xl-desktop) { // As defined in _grid-settings.scss
width:10%;
}
#include media($mobile) { // As defined in _grid-settings.scss
width:33.3333%;
}
}
Please tell me where am i doing it wrong.
thanks.
Here is my Demo
Demo Link
can you try this layout?
to make images responsive you need to add width: 100% (you did the exact oppsite);
Make an image responsive - simplest way
http://jsfiddle.net/95EfW/
css:
ul{
list-style: none;
}
li{
float: left;
padding:0;
margin:0;
width: 20%;
padding: 4px;
}
img{
width: 100%;
height: 100%;
}
thanks for the demo, it helps. So here is the issue, the issue is each of your image is different size, hence when you float left it brings the remaining pictures down in different screens. To fix the issue, you have two methods, using inline-block (rather than float on li) or setting a static height for different size screens. here is a small demo for setting heights jsfiddle.net/f5cgT/2 – ravitadi 1 hour ago
This will prevent the floats to drop as you clear each row.
.galleryList li:nth-child(6n+6) {
clear: left;
}
But the images original size should be the same 500px x 750px as well. Than you would not have the gaps in the first place...
How do you code a three-column layout in CSS when the source order jumps around from column to column?
The page has seven sections -- this fiddle shows how the required source order compares to the layout. The number is for its position in the source order and the text is where it should appear on the page.
http://jsfiddle.net/hpr2b/4/
As you can see, there are essentially three columns and three rows, but the elements in the second row shouldn't top-align and the second row shouldn't clear the first row. Each section should be flush with the bottom of the section that is located above it.
Notes:
The source order matches the order that the elements need to appear on mobile devices and unfortunately cannot be changed
I also don't have the option of duplicating sections in the markup and then showing/hiding them based on viewport width
Absolute positioning is unfortunately not an option because the layout must adapt to any viewport width 320px and up
I've tried a number of well-known CSS layout techniques and the above fiddle shows the most successful attempt -- here is the code used for the "top row":
.top-center {
float: left;
width: 55%;
margin-left: 25%;
}
.top-left {
float: left;
width: 25%;
margin-left: -80%;
}
.top-right {
float: right;
width: 20%;
}
Here are the problems I'm encountering:
IE 9/10 is a complete mess (see below)
In Chrome, the "Middle Right" div always clears the "Top Left" div, preventing it from being positioned beneath "Top Right". Also, if the "Top Right" div becomes too tall, it overlaps "Middle Right".
In Firefox, the second "row" top aligns, overlapping the left and right sections of the first row.
Here is what it looks like in IE10:
And here it is in Firefox:
If the positioning is that important and you cannot control the (order of the) HTML code (I assume so from reading your question), I would rather go for having a somewhat usable absolute positioning using CSS, and refine it (onDomReady) using javascript (which gives you a lot more freedom to choose the best algorithm for the layout you need, but still a usable yet not perfect layout for those few anti-javascript-guys out there).
However, it is hard to tell without seeing the actual markup and requirements.
If absolute positioning is absolutely not an option, you'll need to calculate the height of elements prior to the page generating and put each block into the correct column based on heights. Trust me, absolute positioning is much easier!
You'll probably want something like Masonry. It sets up the columns for you as you require. It does rely on absolute positioning, but that's just about your only easy option. You'll need to tinker with the code a little to make it responsive, I did it on an in-development site here but I can't entirely remember what I did, sorry. Feel free to look through the source code though.
Masonry is pretty quick; below is the basic setup, here are more details.
HTML
<div id="container">
<div class="item">...</div>
<div class="item w2">...</div>
<div class="item">...</div>
...
</div>
JavaScript
var container = document.querySelector('#container');
var msnry = new Masonry( container, {
// options
columnWidth: 200,
itemSelector: '.item'
});
I managed to make the following layout with CSS only: http://jsfiddle.net/hpr2b/7/
.top-center {
width: 55%;
float: left;
margin: 10px 0 10px 25%;
}
.top-left {
float: right;
width: 25%;
margin: 10px 75% 40px -100%;
}
.top-right {
float: right;
width: 20%;
margin: 10px 0 40px 0;
}
.mid-center {
margin: 10px 20% 10px 25%;
clear: left;
}
.mid-left {
float: left;
clear: right;
width: 25%;
margin-top: -20px;
}
.mid-right {
float: right;
clear: right;
width: 20%;
margin-top: -20px;
}
.bottom-center {
margin: 0 20% 10px 25%;
}
I have a fluid article that has 2 columns 1 contains an image that fills whatever space is available for that column, the other column has text but I'm not sure how I can make this column .content-col occupy the space provided by .article. Can anyone advise how this can be achieved?
Jsfiddle http://jsfiddle.net/R7AuG/
CSS Snippet
.img-col{
width: 25%;
float: left;
}
.content-col{
background: black;
width: 75%;
float: left;
}
.col{
width: 50%;
float: left;
}
I also understand that this could be achieved with display:table but I'm wondering if this can be done without?
If you don't want to imitate a table, you could use a small CSS trick, namely, adding
overflow: hidden
to article, plus applying
margin-bottom:-1000em;
padding-bottom:1000em;
to .content-col
See example
I have fairly simple layout, like this:
<div class="card">
<span class="attack">1</div>
<span class="defence">2</div>
</div>
They're arranged on top of each other with simple display: block. What I want to achieve is when a card is in specific areas, "attack" shows on bottom and "defence" is on top. I know I can make it with jQuery, but can I achieve the same effect using pure CSS?
Technically, this is a business rules thing, which is not the domain of your cosmetic layer.
In an HTML document, the order of elements from first to last has semantic meaning - your case is not different, I suspect, in that you are trying to indicate some difference in importance from one element to the next (in the document, not just the visual representation) depending on the context.
So your approach should be JQuery, or some other method of changing the meaning of the relationship of these two elements in terms of their order in the document. CSS is intended to change only their cosmetic appearance.
With situations like this, it can be helpful to think, "what if someone could not see the elements, and had to rely on a screen reader to read them in the order they appear in the document? Would this information (not just the content of the two elements, but their relationship) still be correct and comprehensible?"
You may not intend for this to be accessible to the blind, but that's often a good sanity check for how to approach a problem like this.
I'm pretty sure this will work:
.card {
width: 100px;
height: 150px;
float: left;
}
.attack, .defence {
width: 100px;
height: 75px;
clear: right;
}
/* Play with height and padding-top of .defence to
get the text to the very bottom */
.attack-top .card .attack {
float: left;
}
.attack-top .card .defence {
float: right;
height: Wpx;
padding-top: Xpx;
}
/* Play with height and padding-top of .attack to
get the text to the very bottom */
.defence-top .card .attack {
float: right;
height: Ypx;
padding-top: Zpx;
}
.defence-top .card .defence {
float: left;
}
There are a few details missing in your description, so I'll try to fill in my assumptions, and you can let me know if they're valid or not.
You said "when a card is in specific areas". I'll assume these areas can be represented by different containing classes (.attack-top and .defence-top, but rename as you see fit).
I'm assuming that a .card is 100px wide and 150px tall. If these width and height values are wrong, fill in the correct ones and make the appropriate recalculations. If .card doesn't have fixed width/height, it may still work, but I'm less confident, and you won't be able to get the bottom text to go to the very bottom of the card (just below the top text).
The first thought is to use absolute positioning within .card.
.card { width:100px; height:50px; position:relative; }
.attack { width:100px; height:25px; position:absolute; top:25px; }
.defense { width:100px; height:25px; position:absolute; top:0; }
In this example, .attack will be (visually) below .defense. But note, if you disable CSS, the true arrangement will be seen.
If you know the height of the element, you can use position: relative (with positive and negative values, respectively) or position: absolute. But this is all very hacky and comes with a lot of side-effects - I would do it in Javascript instead.
You can do this by using (if you only want to do the swap in div.card):
.card .attack {
position: relative;
top: 1em;
}
.card .defence {
position: relative;
top: -1em;
}
But as others have mentioned this can have some unintended side-effects. E.g. the above sample will move swap position correctly only for 1 line blocks.
No, you can't. Even if you decided to try to "hack" it out in CSS, the resultant CSS would be huge, messy, and not easily maintained. The corresponding jQuery code would be very simple by comparison, easily understood, and easily maintained.
I'm really having a hard time with IE7 as it is making part of my page fluid where it should be fixed. Works fine in every other browser but IE.
Here is the link... . If you shrink the window you will see how the page gets all skewed.
Here is the css used to control the 2 columns, left_body being the left content and right_body the right column.
#left_body
{
float: left;
width: 900px;
}
#right_body
{
padding-right: 5px;
float: right;
width: 200px;
}
Figured it out. Had position:relative, needed to be position:static