On several of my pages (currently the site is under development), some weather info will be shown: LINK
CSS Problem Description: under the headline WETTER you can see 4 boxes. One is displaying weather from today (HEUTE) and three boxes underneath display the weather from the next days. As you can see, the 3 small boxes are not exactly adding up to 100% framewidth. Also, the uppor wide box is of a slight different width.
--> how is is possible to reach the following?
a) the 3 boxes together to add up to the exact same width as the wide box above WHEN USING A WEBBROWSER / IPAD in landscape view, and AT THE SAME TIME
b) to have FOUR boxes underneath of each other (with 100% pagewidth) when browsing the page with an iPhone/Android. Looking forward to any hints you may have.
I think I have understood what you wanted.
I have made a rough demo at: http://jsfiddle.net/Txjh5/
Used an overall container to simulate your framewidth - this has a max-width.
The boxes are at a percentage to match the top box but using margins I have created gaps between the boxes.
.last {margin-right: 0;}
Removes the margin for the last box.
A media query is used for the smaaller screen size to force each box to 100% width.
Sorry if I have misunderstood the question, but have a look at the demo as that explains things better than I can!
Related
I'm working on a mobile app where there's a list of elements displayed on the screen. The items are of a certain size. While a smartphone on portrait can only display one item per line, I'd like to have it displaying two per line on landscape mode, or on a tablet where it can fit 4 in a line... W/e size the screen is fit as many as possible in the same line.
I understand I need to use media querys to get it done... I tried using display:inline to get it done but it overwrote the set width I created and stretched the items to fit the whole screen.
So the question is: how do I make a div stay the size I configure it and display as many elements in one line as allowed by the screen size?
Thanks for the responses in advance!
Use -
ul li {
display:inline-block ;
}
Here demo - http://jsfiddle.net/urielz/QFK37/1/
Perhaps this is better off as a comment - but it looks like you are not using the display property as intended - to maintain width you can use:
display:inline-block;
or
float:left;
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 have a
container:100%
contentcontainer:90%
and then inside these I have
#bookinfo{width:75%; float:left;}
sidebar{width:20%; float:right;}
The #bookinfo div contains books with these styles
display inline
width:320px
height:430px
float:left
margin right:15px
I thought setting bookinfo to a width of 75 percent would make it responsive to all monitor sizes, but on one monitor I get three books snug to the sidebar and the other monitor I get three books with a large gape between the books and the sidebar. When using firebug, I saw the 75% was not reaching the sidebar on the larger monitor as it was on the smaller monitor.
I've tried setting the bookinfo div to a pixel value, but it still does not render the same on all monitors. I just want as many books to fit as the monitor will allow. So what am I doing wrong?
SOLVED
I was able to get the same look on all monitors by removing the contentcontainer entirely, setting container to max-width:90% and removing the width from #bookinfo in favor of adding padding-right. This worked. Hope it helps someone else.
Also you need to add
html, body{width:100%; height:100%}
When viewed in a mobile phone in portrait mode, images are displayed two columns per row with each image container having a width of 50%.
Sometimes though, you only get one image per row. It seems totally random!
If you flip the phone to landscape mode, the images are displayed 3 columns per row and everything works fine.
Here's an image so you can see what I mean:
As you can see the cobra glove is all on its own! The problem can be reproduced in Firefox if you resize the window so you only get 2 images per row.
If you go to http://www.snowrepublic.co.uk/ and hit the 'switch to mobile' button at the bottom of the page (black mobile phone looking icon) then select the 'gloves' category you can see for yourself. The strange thing is, if you hit the 'body armour' category, the exact same layout works perfectly.
Your issue is caused by the fact that your .centeredContent element has no height and when there is less content in one of the boxes then the box below it jumps up a little bit ( which is the normal behavior for floated elements ).
To fix it give the .centeredContent a height that will accommodate the most possible content. In your case 260px seems to be enough:
.centeredContent {
...
height: 260px;
}
I've been learning CSS for a while now, but the simplified layout below is still a little beyond me, so I am asking whether anyone knows of a model for such a layout, or would have an explanation to make this work.
The page should have 3 bands or blocks:
header, bottom, and content.
The 'header' would start at left 0, top 0 in the visible screen, go all the way to the right edge, and be 70 px in height.
The 'bottom' band would start at left 0, but at the bottom of the visible screen, and also be 70px in height (eg start at the bottom of the visible screen minus 70px). It would extend all the way to the right edge of the visible screen.
The 'content' band would start at left 0, the top would start at the bottom of the 'header' band, and the bottom of the content block would extend down as far as the top of the 'bottom' band.
It would also be nice if the 'header' and 'bottom' band were fixed in their places, but the 'content' block were scrollable if there were more content that space in the block.
I think it's doable, but I can only get this so far at my current level, so I'd like to see how an expert would do it.
Many thanks
Mike Thomas
Fixed headers at the bottom of pages are difficult to implement and maintain. Can you guarantee that your content will always fit? Scrolling just a block instead of the entire page can be tedious for users because you have to get the focus right before using page-up and page-down.
Better solution would be to let the footer naturally go after the content is finished. You can set a min-height on the content for pages with out much content.
Sorry not a real answer, but your site will be better this way.
I'm not sure if this solves it, but for fixed header and footer with a scrolling middle content section you can check this link out:
http://www.cssplay.co.uk/layouts/basics2.html
here is a great site i have come across concerning css
CSS tips and tutorials
i think it would be best to just follow some basic designs there and learn from there :-)
What you want is a sticky footer. As for the content, you'll need to implement a scrollable DIV - the key there is handling overflow.
CSS Frames
This example covers the headers and footers that stay fixed at the top and bottom, although the width is less than 100%. I'm sure you can adjust.
By the way, the way I found this was by searching for "CSS frames" - keeping one part of the content stationary while the rest scrolls is sometimes referred to that way, because it's similar to what people used to do with HTML frames.
Examples - Css List Properties / Examples - Css Layer Properties / Examples - Css TextBox Properties / Examples - Css Font Properties / Examples - Css Text Properties / Examples - Css Cursor Properties / Examples - Css Background Properties / Examples - Css Table Properties / Examples - Css Scroll Bar Properties / Examples - Tools - Units - Parameters - Template Page - Web Design
http://www.css-lessons.ucoz.com/
Blueprint CSS is a nice tool that simplifies making CSS layouts.