|
CSS - Display Products In A Grid Like Way
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. 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 I need some help getting this concept working. If you go to www.nova-dataonline.com/test.htm you can see what I am working on. This is the frontpage for an online store and the manufacturers on the left side of the center content are my featured manufactures. If you hover over the logos, a colored box displays in the center of the screen. Those boxes will eventually be graphics of the featured product that corresponds to the hovered manufacturer. However, I want to be able to have these boxes stay displayed on the screen even if the mouse leaves the logo because there will be information within the div that will contain hyperlinks. here is the relevant javascript: PHP Code: <script language="javascript" type="text/javascript"> <!-- function toggleDiv(id,flag) { if (flag == "1") { if (document.layers) document.layers[''+id+''].visibility = "show" else if (document.all) document.all[''+id+''].style.visibility = "visible" else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "visible" } if (flag == "0") { if (document.layers) document.layers[''+id+''].visibility = "hide" else if (document.all) document.all[''+id+''].style.visibility = "hidden" else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "hidden" } } //--> </script> markup: PHP Code: <div id="welcome"></div> <div class="man_box" id="m_box1" onmouseover="toggleDiv('feat_1',1)" onmouseout="toggleDiv('feat_1',0)"></div> <div class="man_box" id="m_box2" onmouseover="toggleDiv('feat_2',1)" onmouseout="toggleDiv('feat_2',0)"></div> <div class="man_box" id="m_box3" onmouseover="toggleDiv('feat_3',1)" onmouseout="toggleDiv('feat_3',0)"></div> <div class="man_box" id="m_box4" onmouseover="toggleDiv('feat_4',1)" onmouseout="toggleDiv('feat_4',0)"></div> <div class="man_box" id="m_box5" onmouseover="toggleDiv('feat_5',1)" onmouseout="toggleDiv('feat_5',0)"></div> <div class="featured" id="feat_1"></div> <div class="featured" id="feat_2"></div> <div class="featured" id="feat_3"></div> <div class="featured" id="feat_4"></div> <div class="featured" id="feat_5"></div> and CSS: PHP Code: /*====================MANUFACTURERS======================*/ .man_box{ width:150px; height:50px; position:absolute; left:190px; background-position:center; display:block; } #m_box1{ background-image:url(http://www.nova-dataonline.com/images/man_logos/cisco.gif); background-repeat:no-repeat; top:300px; } #m_box2{ background-image:url(http://www.nova-dataonline.com/images/man_logos/sonicwall.gif); background-repeat:no-repeat; top:370px; } #m_box3{ background-image:url(http://www.nova-dataonline.com/images/man_logos/linksys.gif); background-repeat:no-repeat; top:440px; } #m_box4{ background-image:url(http://www.nova-dataonline.com/images/man_logos/adtran.gif); background-repeat:no-repeat; top:510px; } #m_box5{ background-image:url(http://www.nova-dataonline.com/images/man_logos/netgear.gif); background-repeat:no-repeat; top:580px; } /*=======================FEATURED========================*/ .featured{ visibility:hidden; width:410px; height:330px; position:absolute; top:300px; left:340px; } #feat_1{ background-image:url(http://www.nova-dataonline.com/images/message/test1.jpg); background-repeat:no-repeat; background-position:right; } #feat_2{ background-image:url(http://www.nova-dataonline.com/images/message/test2.jpg); background-repeat:no-repeat; background-position:right; } #feat_3{ background-image:url(http://www.nova-dataonline.com/images/message/test3.jpg); background-repeat:no-repeat; background-position:right; } #feat_4{ background-image:url(http://www.nova-dataonline.com/images/message/test4.jpg); background-repeat:no-repeat; background-position:right; } #feat_5{ background-image:url(http://www.nova-dataonline.com/images/message/test5.jpg); background-repeat:no-repeat; background-position:right; } If this can be done with CSS I will be extremely happy. I cannot remove the "onmouseout" from the HTML because that will prevent the image from toggling when I mouseover the next manufacturer. Being kind of new at this and teaching myself as I go, any help would be greatly appreciated. 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 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 Everyone I am having some CSS issues with the rotator in my website in a couple Apple products. iPad 1 3.2.2 and iPhone 4.0.5. I am having trouble fixing it. I was wondering if anyone had any ideas. Please visit the following URL to see the images of the failed Apple products. http://www.webskillsplus.com/apple.html The following is a link to the website page with the issue http://www.discovermassagespa.com/index.html You can see the CSS at the following URLs http://www.discovermassagespa.com/wt-rotator.css http://www.discovermassagespa.com/css/massage.css Thanks in advance for your help. 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? 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> 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... I've been seeing people using ul and li tags to make their menus in css. So I've started trying to do the same, here is an example. But obviously here, the buttons are not displaying inline. All of the styles are within the page code itself. I've got a display: inline style on the li tag, but it's still not working? How can I get this to work or is there any other way to get a ul li menu to display this way? Could someone enlighten me why the page in the following URL functions perfectly in both IE6 and FF and yet, I seem to be totally unable to get the darn thing working locally? I am trying to avoid JavaScript and this looked like a very clean way of hiding and revealing menu items. I don't speak Japanese so I don't understand the text on the page either. http://www.amy.hi-ho.ne.jp/staka/hp/dhtm/s_disp.htm Hi! Is is vicious to display a table as "display: block" to force margin-collapsing? Otherwise there's no margin collapsing with other elements. Thanks I need some assistance getting my site menu to display correctly on FF. It displays fine on IE. You can see an example of the page he http://www.gallery.vividusphoto.com. If viewed in FF, the menu table is touching the logo. In IE, the menu is aligned to the right. If I do an align="right" the "under construction" bar goes up under the logo/menu in FF and the menu is moved to the correct position all while IE is unchanged. Any help is greatly appriciated. Code:
@charset "utf-8";
/* CSS Document */
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
background-color: #333333;
}
.vividus #container {
width: 46em;
margin: 20px auto; /* the auto margins (in conjunction with a width) center the page */
text-align: left; /* this overrides the text-align: center on the body element. */
}
.vividus #mainContent {
padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
background: #333333;
height: 30em;
}
.vividus #headerContent {
width: 46em;
text-align: right;
color: #CCCCCC;
}
.vividus #footerContent {
width: 46em;
padding: 10px 0 0 0;
text-align: left;
color: #CCCCCC;
font: 75% Georgia, "Times New Roman", Times, serif;
}
.vividus #menu {
width: 30em;
border: 0;
margin: 15px 0 5px 0;
text-align: right;
font: 75% Georgia, "Times New Roman", Times, serif;
}
a:link {
color: #CCCCCC;
text-decoration: none;
}
a:visited {
color: #CCCCCC;
text-decoration: none;
}
.login {
background: #000000;
}
.login a:hover {
text-decoration: none;
color: #999999;
}
.newsBanner a:hover {
color:#FFFFFF;
}
.vividus #newsBanner {
background: #666666;
padding: 7px 15px 7px 5px;
font-family: Georgia, "Times New Roman", Times, serif;
color: #CCCCCC;
}
.vividus #realContent {
background: #FFFFFF;
margin: 10px 0 0 0;
height: 30em;
padding: 10px 15px 10px 15px;
}
.vividus #realContentHome {
background: #666666;
margin: 10px 0 0 0;
height: 30em;
padding: 10px 10px 10px 10px;
}
.vividus #bodyHeadline {
color: #000000;
font-family:Georgia, "Times New Roman", Times, serif;
font-size: .8em;
padding: 10px 0 0 0;
}
.vividus #bodyText {
color: #000000;
font-family:Georgia, "Times New Roman", Times, serif;
font-size: .8em;
}
.vividus #loginForm {
padding: 5px 0 5px 0;
border: 1px solid #000000;
}
.vividus #bodyHeader {
font-size: 2em;
font-family: Georgia, "Times New Roman", Times, serif;
}
.floatright {
float: right;
margin: 10px 0 10px 10px;
}
.vividus #imgAbout {
height: 30em;
background: top right no-repeat url(../images/about_img.jpg);
}
.vividus #bodyHeadlineAbout {
color: #000000;
font-family:Georgia, "Times New Roman", Times, serif;
font-size: .8em;
padding: 10px 0 0 0;
width: 35em;
}
.vividus #error {
color: #FF0000;
font-family:Georgia, "Times New Roman", Times, serif;
font-size: .8em;
padding: 10px 0 0 0;
width: 35em;
}
.green {
background:#333333;
margin: 0px 6px 6px 6px;
border:1px solid #3b6e22;
height:24px;
line-height:14px;
color:#FFFFFF;
font-size:12px;
font-family:Georgia, "Times New Roman", Times, serif;
margin-right:10px;
display:inline-block;
text-decoration:none;
}
.login2 {
width: 200px;
font-size: 1.1em;
font-family:Georgia, "Times New Roman", Times, serif;
background-color: #FFFFFF;
color: #102132;
border: 1px solid #284279;
}
Hi guys, Just a quickie , I was looking at a site I produced in Netscape Navigator 7 and noticed a problem. I have a left hand nav that expands to show a sub Nav on mouse over. When moving your mouse off the menu item onto another one the previous menu closes (unless it's the page your looking at) Simple right? - well I noticed in NN7 that the display:none; I use to close the menu does not seem to work. No error, just doesn't work. Does display:none; not work in NN7 then? Is there a way arround it? Cheers, Daz Hello all, I feel like such a dumb a$$ for not figuring this out... I have a div with ID head and width 100%; In that div there are 4 elements, 2 images and two header ( h1 and h2 ) elements. The two gifs are positioned absolutely one top:0;left:0; and one top:0;right:0; The parent div is set to min-height & height of 160px; The height of the images. In firefox they display where you would expect them, top right and left corners. In ie 5,5.5, 6 and 7 they just don't display at all. Here is some code: CSS Code: Original - CSS Code #head{ text-align:center; clear:both; width:100%; min-width:100%; max-width:100%; min-height:160px; height:160px; } #img1{ position:absolute;top:0;left:0; } #img2{ position:absolute;top:0;right:0; } #head1{ clear:none; width:100%; min-width:100%; max-width:100%; } #head2{ clear:left; margin:0; width:100%; min-width:100%; max-width:100%; }
#head{
HTML4strict Code: Original - HTML4strict Code <link type="text/css" rel="stylesheet" href="default.css" /> </head> <body> <div id="head"> <img id="img1" src="img1.gif" alt="an animated gif"> <h1 id="head1">h1</h1> <h2 id="head2">h2</h2> <img id="img2" src="img2.gif" alt="an animted gif"> </div> <link type="text/css" rel="stylesheet" href="default.css" /> |
|||||||