|
CSS - Less Framework Plus 1kb Grid Mashup
i just fell in love with the less framework system (lessframework.com) which does @media screen min-width and max-width to switch css styles to fit 4 different devices: a desktop browser, an ipad, a mobile device portrait or landscape.
its based on a 68px grid with 24px gutters, BUT there is no grid class styles setup. its up to you to create! ...so i thought it would be great to mash this up with the 1kb grid system (1kbgrid.com) to control the layout of my content. Here's the problem... I can't figure out how to get the 1kb grid system to degrade with the screen width resizing. i'm using "overflow:hidden" in my "maincontent" div and put the 1kb grid default content within that. How can i get the column, row, and grid classes setup by 1kb grid to sort of "push" themselves to fit the main content div width? Similar TutorialsHey everyone, I have been working on a sudoku php / html game using sessions but I have run into an issue. Here is the link to my page http://waynemarsh.byethost9.com/sudoku.php , my problem is that in Opera and IE the page doesn't look like i would think the code says it would. in firefox, safari, epiphany, konqueror, firefox 1.0-2.0, mozilla 1.7/netscape 7, it looks great in netscape 6 it shows 3 9x3 grids on top of each other about 2 pixels offset in IE 5/5.5/6/7 & opera 7 it looks like a crossword in opera 8/9 it looks like 9 3x3 grids in one column of course netscape <= 4.8, ie <= 4, it just doesn't show, who uses them anyway? in lynx well, it's lynx, all the text inputs show up below each other so there are 81 vertical inputs from what I see in the code, it should show fine. anyone have any ideas? what could it be? i'm mostly worried about the opera browsers the issue seems like it's somewhere with .sudoku_grid Hi there, How do I use CSS to format a list into a 3x4 grid of boxes? I'v tired using float:left but then a one item is taller than another it goes mad, pushing everything out of place. eg. html code: <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> <li>item 4</li> <li>item 5...</li> and so on </ul> Or is there better of doing this? Thanks, hey guys im makling an auto dealer script for my buddy and i have an inventory page that show like a catalogue. pic and info in a table. i would like to make it that each new info is a diffrent color. like product one blue background product 2 yellow then it starts back to blue.. like a table grid view in php my admin .. Sorry for the boring thread. What I am basically trying to do is make a grid of numbers (its for a small calendar), and I want to do it using css. Would appreciate any suggestions for the best way to go about it. (an expample is the HTML code that it would be) Code: <table width="150" border="1"> <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr> <tr><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td><td>13</td><td>14</td></tr> <tr><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td><td>21</td></tr> <tr><td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td></tr> <tr><td>30</td><td>31</td><td>32</td><td>33</td><td>34</td><td>35</td><td>36</td></tr> </table> I am not to bad at the css thing but this got me foxed... I started of by indenting the margin of each <td> as <div> and appling a more negative of a top margin for each one... it started to get confusing! Cheers, Hi Please let me know if I am posting what is required for answering my questions as I would like to make things as easy as possible for you. Here is my first problem:- I have been trying to move our sitesdesign across to being css based and in the large part have succeeded but I have run into difficulties when it comes to displaying our results. I am trying to wrap 9 search results on a page using float but the results I am getting are different between mac IE 5.1, opera 5 Mac (not that bothered though) and Windows IE 6.0. My problem is that on windows the float works as it should and wraps so that I have a grid of 9 images, on a mac the images wrap but jump to the bottom of my left floated navigation and then continue the grid and on opera they just don't wrap. The URL is URL CSS file URL Can anybody shed any light on why this might happen as I am a little lost. TIA hanonman Hello everyone, after a good bit of browsing around in an attempt to understand how to apply push/pull as supporter by the 960 css FW I've utterly failed. I'm simply doing the layout right now to see where to place elements and so forth, and as far as I understand the following code would push the logo box 3 columns up (3*60=180px): Code: <div class="grid_6 push_3"> <p>logo</p> </div> Whilst this here, would pull one of my textboxes back 6 columns (6*60=360px); Code: <div class="grid_3 pull_6"> <p>text column</p> </div> Yet while using dreamweaved and previewing the page in firefox, for some reason, even after saving the index page, i still get the logo box on the top left corner, so anyone able to tell me why it wont adhere to the pushes and pulls? Oh btw, these DIV's are place inside of the <body> tags. And here's the full code of body so far: Code: <body> <div class="grid_6 push_3"> <p>logo</p> </div> <div class="grid_3 pull_6"> <p>text column</p> </div> <div class="grid_3"> <p>text column</p> </div> <div class="grid_12"> <p>big box</p> </div> </body> Hello, I know basic css and html, but not much more than that. However, the site I am attempting to build is very simple, so hopefully someone here can help me stumble my way through the process. Here is an example of what I want: URL ...and when I add new content: URL I want a css grid of identical square containers, with a thumbnail in each one. The tricky part is getting the differently-sized thumbnails to be vertically centered in the containers without having to set each one by hand. This is where I have gotten so far- http://jimtierneyart.com/test/test.html Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
body {
margin : auto;
}
.wrapper {
width: 900px;
border: 1px solid #bbbbbb;
margin: 50 auto;
}
.item {
line-height: 223;
text-align: center;
float: left;
width: 223px;
height: 223px;
border: 1px solid #dddddd;
background: #EBEBEB;
}
img.a {
margin: auto;
max-width:120px;
border:0;
max-height:175px;
}
</style>
</head>
<body>
<div class="wrapper">
header
<BR>
<BR>
<div class="item">
<img class="a" src="image.gif">
</div>
<div class="item">
<img class="a" src="image.gif">
</div>
<div class="item">
<img class="a" src="image.gif">
</div>
<div class="item">
<img class="a" src="image.gif">
</div>
<div class="item">
<img class="a" src="image.gif">
</div>
<div class="item">
<img class="a" src="image.gif">
</div>
<div class="item">
<img class="a" src="image.gif">
</div>
<div class="item">
<img class="a" src="image.gif">
</div>
<div class="item">
<img class="a" src="image.gif">
</div>
<div class="item">
<img class="a" src="image.gif">
</div>
</div>
</body>
</html>
I need 2 things to happen: 1. The parent container must be centered on the page (this worked fine until I added the Doctype tags. 2. the thumbnails must be vertically centered within the child containers. Can anyone point me in the right direction? I would really appreciate some help. Hi all im building a site where I would like to present the users with an overview of products in either rows or in a grid.., displaying them in rows works fine, but I cannot get them to show in a grid ( 3 next to each other) can anyone point me to the right way to do this? here you see a page which shows products in rows.. edit.. apparantly I cannot post urls .. I do not manage to apply css to show them in a grid I think its should be done with float left, but i cannot implement this correctly help appreciated, K. Hi If editors add 6 content items to a page in the CMS, the template should generate 2 rows and each row contains 3 items. if 4 items are added, two rows are needed with 2 items in each row and so on. Does CSS help here or would you recommend to work with the classical table-tr-td-approach and use modula? I really need help for my wordpress blog I need it to have a front page.. and i want to link images from it to the new categories... but the problem is that I want it to be like a grid and don't want all the images in the same sizes.. so here goes this is how it is.. each color is a separate picture to of the exact size.. I need them to be like how this image shows and linked too pls can someone provide me the CSS code for it ??? but the forum is not allowing to post links here it is without the brackets http://tinypic(.)com/r/32zjjpd/4 Hello everyone, I've come here because I have a bit of a CSS quandry and was hoping you might be able to help. I want to use the Flickr badge to display the 8 most recent photos on my website, that are tagged - website. So, the javascript works fine and validates with a bit of tweaking, but I just cannot get the CSS to layout the photos as I want. Ideally this would be a 4x2 type grid with some padding in between each pic. I think one of the problems is the horizontal and vertical photos. The CSS Code:
#flickr_badge_uber_wrapper {width:990px; text-align:center;}
#flickr_badge_wrapper {padding:10px 0 10px 0;}
.flickr_badge_image {margin:0 10px 10px 10px;}
.flickr_badge_image img {border: 1px solid black !important;
float:left;}
#flickr_badge_source {text-align:left; margin:0 10px 0 10px;}
#flickr_badge_icon {float:left; margin-right:5px;}
#flickr_www {display:block; padding:0 10px 0 10px !important; font: 11px Arial, Helvetica, Sans serif !important; color:#3993ff !important;}
#flickr_badge_uber_wrapper a:hover,
#flickr_badge_uber_wrapper a:link,
#flickr_badge_uber_wrapper a:active,
#flickr_badge_uber_wrapper a:visited {text-decoration:none !important; background:inherit !important;color:#000000;}
#flickr_badge_wrapper {}
#flickr_badge_source {padding:0 !important; font: 11px Arial, Helvetica, Sans serif !important; color:#666666 !important;}
.flickr_badge_image { margin-right: 10px; }
#flickr_badge_image1 { margin-right: 10px; }
#flickr_badge_image3 { margin-right: 10px; }
#flickr_badge_image5 { margin-right: 10px; }
#flickr_badge_image7 { margin-right: 10px; }
#flickr_badge_image9 { margin-right: 10px; }
Click here to see what I have so far Hope that CSS isn't too big. I'd be grateful for any pointers, as you might be able to tell, I am just hacking and slashing at code at this point. Cheers all - thanks for any help Jon Has anyone here used / looked at the Yahoo CSS Grid Template Library? http://developer.yahoo.com/ypattern...hp?pattern=grid Any opinions on the idea of using it as the foundation for site layouts? I'm really having trouble wrapping my mind around the concepts for two - three column table-less CSS layouts. It looks like a viable shortcut... |
|||||||