I have a row with an image, and then in a new row with some text I would like to go over that image. I am able to do this with negative margins and other spacing, but I need help for when it comes to a responsive page. As I change the browser size, I'm noticing that new row of text moving to other areas higher than the image. Let me know how I would fix that text exactly where Id want on the row above, and keep it responsive. Thanks!
Heres a gist to my code incase its confusing:
HTML
https://gist.github.com/anonymous/5834935
CSS
https://gist.github.com/anonymous/5834943
Just for reference - here is the outcome JSBIN
missing the media query on the jsbin for greater resolutions
Glad I could be of help ^-^
Related
We are trying to create a menu style layout. I'm using a css-columns properties to achieve the effect of columns. The content is variable, so we'd like to stick to this solution because we want the browser to organise the content for best fit.
In the example below we are seeing some odd behaviour in Chrome (Version 32.0.1700.77) and some different (but equally odd) issue in Firefox (Version 24.0) so I'm assuming it's our implementation.
In Chrome, we see a large gap underneath the first column as if it's placing the 3rd LI there to start off with, then moving it to the top of the second column at some point in the render process.
In Firefox, we see the H3 "scrambled egg" being left at the bottom of the first column, when the rest of the 3rd LI's content moved to the top of the second column.
Live Example: http://codepen.io/daviddarnes/pen/BeEIp
Speculations:
- We are using "break-inside: avoid;" on every element inside the OL. This could be causing the issue, but we can't seem to rectify it.
- Based on the H3 issue... might be something to do with that? Or the elements near to this H3 tag.
The point of the page-break properties is not to shrink content to fit on a page, but to help decide the optimal place for a page break to occur.
So, if you use 'page-break-inside:avoid' on an element, and there's not enough space on the current page to fit the entire element, the browser will consider inserting a break so as to force the element onto a new page, theoretically giving it more space.
However, if the element is so big that moving it onto a new page won't help, then there's nothing to be done (in terms of page breaks at least).
If you know in advance that your content will need to be shrunk when printing, you could try adding a scale transform on the problem elements (restricted to the print media type), so that they're a more manageable size.
Is this of any help to you?
I am creating a webpage off of this bootstrap model. The problem I am facing, and what I cannot figure out, is why the two companies inside the span10 class do not take up the entire row?
The easiest way to understand this would be to first look at this fiddle. Then, do an inspect element on the company row. Notice that the span10 div is taking up the correct width (its going to the end of the page). However, the two span5 divs inside of that should be taking up the entire width inside the span10. At least, according to my understanding of the bootstrap scaffolding, they should be. (I may be mistaken). In any case, they are not taking up the whole width as I believe they should.
The CSS in the fiddle is copied straight from an uneditted bootstrap file. So the css should not be the problem (with version 3 coming out, I was having trouble pulling from the bootstrap server).
Also, the problem is not (I dont think) having a row within a row, because if you look at the bootstrap example page I provided, that is what they are doing and it is working for them :).
If it is unclear what I am asking, please ask questions and I will reply promptly!
Thanks
Bootstrap uses a 12-column grid layout, so use .span6 if you want two columns to take the whole width of the row. Every new row inside a column will be treated as a full 12-column grid.
I'm currently working on a CSS three column layout (http://jsfiddle.net/methuselah/rCtGd/) and I wanted to ask several questions:
1) For some strange reason there seems to be a 10px gap between the header, content-1, content 2-1, content-2-2. This cannot be seen in jsfiddle but if you load up the code in any browser it is noticeable. How do I get rid of it?
2) I would like to figure out a way of clearly defining a fluid column height. Is this possible? Ideally I would like all the divs header, content-1, content 2-1, content-2-2, footer to stretch in order to accommodate the page.
Thanks in advance.
Answers for your valid questions! :P
10px gap is not found on the jsFiddle because, they use CSS Reset. The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on.
For getting a good idea about CSS Fluid Layouts, please refer the links below:
The Perfect Fluid Width Layout
2 And 3 Column Fluid CSS Layouts
Do you have any clarifications still? Let me know in the comments! :)
I have a height issue. I'm working with this table. - enter link description here
I'm trying to get the table to shrink in height. Its way to high length wise.
If anyone can help me, I would appreciate it. Do you see where the crystal image is? I want that row to be lowered in height. I've tried everything to get it to work, but I cant figure it out.
It needs work. Centering text etc.
There are ASP.NET sessions being included within the table.
The text-inputs all the way on the right are forcing the cells on the left to expand to their height. The only way to make the other cells "shorter" is to reduce the number of text-inputs on the right (or to make each of them smaller with CSS).
If you are looking to show the crytal in the middle of the cell, then use the below style for the text.
vertical-align: middle;
add this to your CSS. I have only found one solution to your problem i-e if you reduce the font-size you save lot of heigh in your table.
#main_table td
{
font-size:9px;
}
I found fixed header template and I want to use it in my website, I modified this template and make it in 3 column layout. My problem is the select element over in the fixed header in ie6. I used an iframe to fix this problem but no luck. Originally this template is a single column layout and fixing iframe works fine, but when I modified it in 3 column layout, it doesn't work anymore. If you need to see the code then I will post it.
Any help would greatly appreciated.
Thanks in advance.
here is the link of single column layout which select element under fixed header in ie6
http://webberzsoft.com/clients/csslayouttest/fixheader_center.php
here is the link of three column layout that I was modified which select element became over fixed header in ie6
http://webberzsoft.com/clients/csslayouttest/template_fix_header.php
Do you mean the select element in the first column?
If so your fixed header is getting in the way. I noticed this with the first link you had as well, try to select text on say the first line (you can't).
Try some other layout, like CSS Play or Fixed tables.
Personally I would just make a table, 100% height and width of body # [0, 0].
Then set the header to a certain height, add a single row with 3 columns , space them as need be, and be done. Or if your feeling lazy those links are right there.
Hope this helps