Hey so I have been looking around online at some examples of fluid grids and responsive grid frameworks (I believe I am looking for fluid but still unsure). And wondering if anyone here can help point me into the direction of some usable code as I am not entirely sure how to implement with pure css (maybe javascript/jquery is needed) anyways here's what I am looking for:
larger screens look like this
a little bit smaller of screen
smaller screen still
(in the images each block appears a little larger as screen sizes decrease this is not what i am really looking for each screen should be same size ... if you have seen netflixs genre pages this is exactly what I am looking for)
I don't need a finish polished code sample but just how I would go about doing this (having 15 media queries to just handle the grid and moving element around does not seem like the answer or is it ?) Any insight into how I can do this or a framework or demo where this is being implemented would be greatly appreciated.
Pretty much I don't see a point in using a grid for this.
It will give you even more headache than to help you.
Since most grids will try to make the elements responsive and will resize them in order to fit them on the same line on smaller width.
And since you don't want the images to resize, don't go to responsive grids at all...
You can choose a normal grid but why importing 1000+ lines of code for something that can be done in 1 line.
Pretty much one line of code (if written on one line that is):
ul li {
display: inline-block;
*display: inline;
zoom:1;
vertical-align: top;
width: 50px;
height: 50px;
margin: 0 10px 10px 0;
background-color: #000;
}
Demo
Related
I've made my own static website from scratch using html5 and css(3) only.But I have got 2 issues.
The first one is the white space between the top's menu and header's image bottom.I've tried everything.
Maybe the only solution for that is float:left; but then the image goes into the navigation tag or negative value on margin's property but I've heard that this technique is bad.
The second issue I'll display via image http://www.filedropper.com/discoversite that's my simple WebSite. I know my css is awful but I'm still a beginner. The second issue is here. http://postimg.org/image/5adp6379d/ . As you can see the text is going out of the box. (I am using % in css for more responsive). I will be glad if anyone can help me.
I can only have a guess for your first issue as I don't know the exact code for your website (create jsfiddle :D ). Try to apply vertical-align: bottom; or display: block; to your header image. Why? Because images are placed like text and some letters like g, j, q and p are going underneath the bottom level. Your browser will leave a tiny space for these letters. Also setting a min-width is a good solution like Kirk Logan said.
And for your second problem there are multiple solutions (depending on what you want):
You can handle your content with overflow: hidden; or overflow: scroll as Kirk Logan suggested. But this wouldn't make any sense in the case you have shown us in the picture.
Or (is a little more complex) you could remove the white borders on the left and right side (just when the screen is too small) in order to gain more space for the text. This can be done by:
#media only screen and (max-width: 768px) {
#BigBorder1 { border-width: 0px; }
#BigBorder2 { border-width: 0px; }
}
Everthing inside the outer brackets will only be applied when the screen's width is smaller than 768px. But to be honest this is usually done the other way round: When the screen is bigger than 768px then something happens. This simplification is only in order to make it easier for you.
I have a relatively easy issue that I need fixed mainly because I haven't come across it before and don't know how to go about fixing the issue.
Near the bottom of the page there are four images grouped together under the title "Photo Gallery". In Firefox and Google Chrome, the photo gallery is displayed correctly, with the correct formatting being the images side-by-side rather than the incorrect style of stacked images. Thanks!
Below is the code for the individual image fields (with the only difference being .odd rather than .even
.field.field-name-field-photo-gallery.field-type-image.field-label-above .field-items .field-item.even {
width: auto;
display: inline;
margin-top: 0px;
top: 0;
(Incorrect Image Gallery)
(Correct Image Gallery)
For something like this it would be worth considering using a grid system,
Susy is my preferred option, its inclusion in a project would result in code like
Assuming the design is 12 col,
#include span(3 of 9);
On your images (Selectors way too long too) would achieve with margin the design you are after.
Susy outputs floats by default, so if you did want to do it manually, do some simple math to work out % widths and apply floats. Works in all browsers and doesn't give the weird 3px extra that inline elements get.
I recently read about the "holy grail" design and read implementations for it.
I saw a solution that does something strange on the menus from the sides.
{
margin-bottom: -3200px;
padding-bottom: 32000px;
}
I understand this mechanism causes the menu to be "infinite", I also found out this trick is called bleeding.
I don't understand how it works. Can someone please explain?
EDIT:
both answers were great. Wish I could pick 2. Picked the first one answered. I found another resource that emphasizes on negative margin values which explains bleed as well.
http://coding.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/
Thanks.
Padding-bottom at that value with stretch the background of the menu down far enough that it will always be seen to take up the whole length of the page. The margin adjustment gives the ability to still position content over this stretched out menu at a position according to the design of your site. Here is an example with the properties adjusted so that you can more easily see what is happening:
http://jsfiddle.net/PVKbp/23/
.two
{
margin-bottom: -3200px;
padding-bottom: 32000px;
margin-left: 100px;
margin-right: 100px;
background-color: #aaaaaa;
}
Bleed in printing is where you create a design purposely extended over the boundaries of the canvas, to ensure that all the page is covered. It basically means that you won't get any dodgy white edges where your design didn't "fit" the document properly:
http://www.duggal.com/connect/wp-content/uploads/2010/08/bleed2.jpg
I suppose the idea of bleed is the same in this instance, whereby you're trying to cover having any potential white spaces by adding padding to the menu
CSS
The only "holy grail" I've heard of in CSS is the 3-column one? If this is the case, I would say that having padding 32000px will be needlessly resource intensive
I've never really created 100% height responsive stuff, so here's a good resource for you: Twitter Bootstrap2 100% height responsive
I'm still relatively new to css positioning, but have read a few books and watched a few tutorials. I made some palettes over at colourLovers, and wanted to see how they would look when applied to a website as a color scheme. So, using the little coding knowledge I had, I created a page to demonstrate my color scheme. After a while, it became a sort of self-confidence boost, and I've gotten just about done with it when a little thing caught my attention.
I have a two-column layout - on the left, there is the navigation menu, with a header above and a content section to the right, all in their own divs. My question is this - when I scale the page (as in, make the window for viewing it smaller), the content section gets pushed so it wraps under the Div. The way I could fix this was to make an additional div with no bg color and make it as long as the content that contained the navigation div, so they would line up, but it doesn't fix it if you resize the window.
I'm sure there's an easy fix to this, but my limited knowledge doesn't yet know it. If it helps, I've attached an image file below of what the site looks like in my editor (Coda). I also provide a link to the code of that page of my site which I've uploaded to textsnip. You can find it here - http://textsnip.com/f434fd. I have added comments to mark the header, sidebar, and content sections as well. Any help would be greatly appreciated. Thanks in advance!
The easiest solution is to use min-wdith on your container:
<div style="width: 90%; padding: 10px; margin:0 auto; min-width: 400px;">
This won't work on IE6, but will work on everything else. And, if you need IE6, then there are several workarounds that will solve it.
I would suggest you to use % value instead of px.
For example:
Header: 100%;
Nav: 20%;
Content: 80%;
Footer: 100%;
This way, if someone rize the window, it will always display perfect.
Use "float: right" on content DIV. And replace px width with %.
Check out this
You can use CSS Media Queries to adjust things as they get bigger and smaller. For instance, if you wrap your entire page with a div with an ID of wrapper (and use Simon Arnold's solution for the width of the individual elements), then you can do this:
#media (min-width:1200px) {
#wrapper {
width:1100px;
}
}
#media (max-width:1200px) {
#wrapper {
width:90%;
}
}
These set your wrapper to 90% if the screen size is less than 1200px, and 1100px if your screen is bigger than 1200px. Thus, if the browser is wider than 1200px then your page will stay the same size, and if it's smaller then it'll flow nicely.
#media (max-width:700px) {
#wrapper {
width:100%;
}
}
That one makes it wider when the browser gets smaller, and
#media (max-width:400px) {
#wrapper {
width:400px;
}
}
that one sets it to a fixed width when the browser gets really small. Those are really simple queries, if you're interested in learning more about media queries then here's a good place: http://css-tricks.com/6731-css-media-queries/
And of course, it wouldn't hurt to make the page flow between those transitions using CSS3 Transitions.
IE8 and below, unfortunately, do not support media queries. BUT you could read their browser type with PHP instead, and direct them to get a decent browser... It'd help make the web better. ;)
I couldn't find a previous post for this, and I apologize if this is an uber-n00b question.
I am working on my first practice site (just XHTML and CSS/3 stages right now). I wanted to test the page to make sure that when I reduce the size of the browser window everything still looks the same. When I did that, my navigation column overlapped part of the page and the background image I have embedded in my h1 header doesn't fill all the x-axis all the way to the right.
What did I do wrong, and how can I fix this the right (web standards)?
P.S...Here's the code
h1 {
font-size: x-large;
color: white;
padding-top: 2em;
padding-bottom: .2em;
padding-left: .4em;
margin: 0;
background: navy url(backgrounds/header-bg.jpg) repeat-y right;
}
#navigation {
width: 180px;
height: 484px;
background: #7da5d8 url(backgrounds/nav-bg.jpg) no-repeat;
}
There are several strategies. it's really an art and it's a bit too involved to be answered fully here. It's something web designers have been dealing with for years, and you'll develop your own style and strategy, but there are good recommendations and best practices available on the web to find.
I'd start with this search:
http://www.bing.com/search?q=web+design+gracefully++resize&src=IE-SearchBox&FORM=IE8SRC
This is the first truly good result from that search: http://mirificampress.com/permalink/daynamically_resizing_text_with_css_and_javascript
but there are other good results as well.
Try giving a fixed width to the main container or the body itself.
body{
width:1000px;
}
If you post your current code, we may give you a better solution.
Ah well, this was going to be a comment, but I just kept going...
The nav column overlap is most likely because it is defined with a fixed width (px or em (which are fixed for this purpose)) and not a fluid unit like percentage. With all respect to David Stratton (and he's right, it is an art to in-depth to be answered here), try building your layout using percentages when appropriate to make the page scale well.
In response to the idea of fixing the width of an outer container, that is also a possibility, but one which doesn't degrade nicely if the user has a very small or large screen or a very high or low resolution.
Try googling with fluid page layout web design