|
CSS - Best Way To Make A Grid With Css
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, 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 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 .. 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, 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 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, 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. 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? 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> 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 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... 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 Hi... Can any body tell me how to make effect mentioned below. http://forums.devshed.com/archive/t-175080 Basically i am a designer, and i am new to programming. When the above mentioned page will open, there are links in blue color i.e "Firewall", "Backup", "internet", "Viruses", "VPN", etc etc. I need this type of effect for my web site, can any body tell me how to make this.... Thanks Can someone show the the CSS to make the unordered list to the right of the picture display the same way in IE as it does in FF? HERE is my link. Many thank yous from the CSS noob. Hi, I'm working on redeveloping my site using CSS (learning CSS as I go), and for the most part it's fine. I'm having a bit of a problem getting my footer (containing links to Terms & Conditions, copyright notice, etc.) to display at the bottom of the page. I have a div called MainSection as follows : #MainSection { position: absolute; border: 1px solid #000033; top: 100px; left: 1px; width: 777px; z-index: 0; } Within that, I have 3 divs - WhereYouAre, LeftPanel and MainBodyContent, as follows: .WhereYouAre { position: absolute; width: 500px; top: 8px; left: 205px; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; font-size: 12px; text-decoration: none; color: #000033; } #LeftPanel { position:absolute; top: 3px; left: 3px; width: 190px; border: 1px solid #000033; } #MainBodyContent { position: absolute; border: 1px solid #000033; padding: 0px 5px 5px 5px; top: 5px; left: 200px; width: 567px; z-index: 0; } Then at the bottom, after the closing </div> for the MainSection, I have my div called BottomNav: #BottomNav{ position:inherit; margin:10px; border-top: 1px solid #000033; border-bottom: 1px solid #000033; width: 780px; left: 0px; } The BottomNav keeps appearing at the top of thepage instead of at the bottom - I've tried different values (inherit / relative, etc) to see can I get something to work, but no good so far... and I can't set the positon to absolute as the location of the BottomNav depends on the length of the MainSection. Thanks a lot for any suggestions, J. Hi guys... I'm fairly experienced at webdesign, but I never actually used css for the *entire* design before (besides on one or two unfinished sites that came out badly). I was wondering if anyone could help me out designing the basic layout with css, and I can probably handle the rest. It would be much appreciated! Hi I am new to flex and i am suppose to change the css file so that it references a a swc file instead of an programmatic skin. I know the syntax is classreference... for the action script. I just want to to know what i should replace it as. Thanks Hi I have a page which has a header, footer, nav bar and content area using CSS and works great in IE8, FF, Chrome and Safari, and almost works in Opera. Although I have tried to avoid it, my boss wants the page to work in IE6 as we have corporate clients still using it, and I CANNOT figure out how to arrange it without fixed sizing! Can anyone help? Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>
Untitled Page
</title>
<style type="text/css">
#test div {
border:solid 2px red;
position:absolute;
}
#head {
height:100px;
top:0;
left:0;
right:0;
}
#nav {
left:0;
top:105px;
bottom:105px;
width:200px;
}
#foot {
height:100px;
bottom:0;
left:0;
right:0;
}
.scroll {
top:0;
right:0;
left:0;
bottom:0;
margin-left:205px;
margin-top:105px;
margin-bottom:105px;
}
</style>
</head>
<body>
<div id="test">
<div id="head"></div>
<div id="nav"></div>
<div id='x40702f5b28_scroller' class='scroll' style='overflow:scroll;'>
<div id='x40702f5b28' style='width:1024px;height:768px;position:relative;'>
</div>
</div>
<div id="foot"></div>
</div>
</body>
</html>
The red borders are purely so I can see where the DIVs are and don't need to be in the final version. Any help would be greatly appreciated... SW. Basically on this page here -> http://www.prxa.info/area51/profile.php?info=1 The copyright molds into the right column and i wish it to stay below both the left and right, how would i go about doing that? A column on the left side of the page 200 pixels wide (reserved for a vertically orientated textbased navigation bar). The background colour of this area should be black. An area to enter content that is 800 pixels wide with a white background. Any help appreciated. |
|||||||