|
CSS - 9x9 Grid - Opera 3x27 Grid - Ie Crossword
Hey 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 Similar TutorialsSorry 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, 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 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 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 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. 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 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 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 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 For some reason, this PHP Code: input.headtext {background-color: #515153;border: 0px outset #515153;} leaves a bright yellow hideous border around the input field. Is there any way to get rid of that? This works fine in IE and Netscape, but Opera 7.x makes it look like ****. hey, I have problems with getting CSS to display properly in Opera. http://www.hostultra.com/~lunaxy/home.php this host SHOULD be working. Anyway, the problem is with the side navigation menu. In Opera, theres gaps between the top and left bits (I used these to create the curved box effect). How do I get rid of this? 2nd problem. How do I move the top right navigation to the far right side. I can't float it without making it look bad in Opera (but IE and mozilla are fine). I want the stuff in the yellow box to be at the right side. thanx ppl! Hey everyone, I am working on an old design I started a while back, and for some reason, IE and Opera do not render the top padding right. I figured that it is a bug, but I am not sure. Here is my code: css Code: Original - css Code body { background-image: url( http://img521.imageshack.us/img521/6097/blissxk5.png ); color: #000000; font-family: verdana,tahoma,"Bitstream Vera Sans",arial,helvetica,sans-serif; font-size: 12px; text-align: center; padding: 0; margin: 0; } a img { border: 0; } a,a:link,a:visited,a:hover,a:active { color: #0099FF; text-decoration: underline; } a:hover { color: #FF9900; text-decoration: underline; } #container { width: 85%; margin: 0 auto; text-align: left; } #header { padding-left: 150px; } #menu { width: 100%; text-align: center; } #menu ul { list-style-type: none; display: block; } #menu li { display: inline; } #menu a { padding-left: 45px; padding-right: 45px; padding-top: 15px; padding-bottom: 15px; } #menu a:hover { opacity: .8 !important; background-color: #999999; color: #FFFFFF; } #main { opacity: .6 !important; filter: alpha(opacity=50); background-color: #FFFFFF; padding: 1%; text-align: justify; } #main h1 { color: #0075FF; border-bottom: 2px solid #0099FF; display: block; width: 60%; } #footer { text-align: center; } #footer a { color: #000000; }
body {
And also IE6+ do not seem to render the filter property. Anyone know whats going on with this? looks perfect in Moz and IE...but any time I set a padding it overhangs the actual width. So the below code creates a 1010px wide result...is there a workaround for Opera sucking? Code:
.topa { width: 1000px; padding: 5px; background:#000000 }
edit: nesting a div and putting the padding on it without a background seems to work...while I'm sure it is overhanging the same way, at least it doesnt LOOK that way. Hello there! I am new here.. So Hello to all of you people. I am having a problem. I run my website locally and i can preview it fine in chrome, firefox and ie.. but i have a problem with opera. I see a white space under my footer.. Let me give you my code and please tell me your opinions! Code: * { padding:0; margin:0 0 0 0px; outline:0; }
html, body { height:100%; }
Code: /* center all content */
.center { width:950px; margin:0 auto; }
/* keep all content except footer */
#wrapper,
#wrapper-error
{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -82px;
}
#wrapper-error { margin-bottom: 0px; }
.footer
{
width:100%; height: 82px;
position:relative;
background-image: url('../images/bgfooter.jpg');
background-repeat: repeat-x;
-moz-box-shadow: 0px -13px 130px 20px #808080;
-webkit-box-shadow: 0px -13px 130px 20px #808080;
box-shadow: 0px -13px 130px 20px #808080;
}
.push
{
width:100%; height: 82px;
position:relative;
}
Thank you! Hi all, I got my css layout to work in Opera, which is already an achievement for a newbie like me. But I'm facing some problems with FF and IE. First: in both the header image is gone Second: in IE the menu images are shown too wide resulting in a messed up menu Third: IE for some reason widens up the sidebar and content so the sidebar is shown below and also the footer is misplaced. I'm still trying to debug it myself but I don't seem to be able to solve them. my blog Any help or ideas are appreciated. Kind regards, Jef Hi everyone Hoping someone can help with a niggly problem. My site is working great in Mozilla but I'm getting a gap between two divs in IE6 and Opera 7. Compare the following in IE6, Opera 7 and Mozilla and see the gap below both the 'welcome' and 'latest' graphics: http://www.crashingbydesign.com.au/newsite/ The relevant code is as follows: Code:
<div id="content_container">
<div id="belowbg">
<div id="left">
<div id="h3lft">
<h3>Welcome</h3>
</div>
<div id="contentlft">
<p>Lorem ipsum ...</p>
</div>
<div id="footlft"></div>
</div>
<div id="right">
<div id="h3rght">
<h3>Latest</h3>
</div>
<div id="contentrght">
<p>Lorem ipsum ...</p>
</div>
<div id="footrght"></div>
</div>
</div>
<div id="footer">
<p>text</p>
</div>
</div>
The relevant CSS is as follows: Code:
#content_container {
position: absolute;
top: 406px;
left: 50%;
margin: 0 0 0 -372px;
width: 742px;
height: auto;
z-index: 10;
}
#belowbg {
padding: 0 11px 11px 11px;
width: 720px;
height: auto;
background-color: #313131;
}
/*hack to ensure that Mozilla encloses the floats with the #belowbg div*/
#belowbg:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#left {
float: left;
width: 481px;
height: auto;
padding: 0;
margin: -25px 0 0 0;
}
#h3lft {
width: 481px;
height: 25px;
background: url(images/welcomehd.gif) no-repeat;
text-indent: -9000px;
display: block;
position: relative;
margin: 0;
padding: 0;
}
#contentlft {
width: 459px;
height: auto;
background-color: #293942;
border: 1px solid #636B73;
margin: -1px 0 0 0;
padding: 10px 10px 0 10px;
font-size: 1.2em;
line-height: 1.6;
display: block;
}
#footlft {
width: 481px;
height: 20px;
margin: -1px 0 0 0;
background: url(images/welcomeft.gif) no-repeat;
display: block;
}
#right {
float: right;
width: 230px;
height: auto;
padding: 0;
margin: -25px 0 0 0;
}
#h3rght {
width: 230px;
height: 25px;
background: url(images/latesthd.gif) no-repeat;
text-indent: -9000px;
display: block;
position: relative;
margin: 0;
padding: 0;
}
#contentrght {
width: 208px;
height: auto;
background-color: #525252;
border: 1px solid #636B73;
margin: -1px 0 0 0;
padding: 10px 10px 0 10px;
font-size: 1.2em;
line-height: 1.6;
display: block;
}
#footrght {
width: 230px;
height: 20px;
margin: -1px 0 0 0;
background: url(images/latestft.gif) no-repeat;
display: block;
}
#footer {
position: relative;
top: 0;
left: 0;
width: 720px;
height: 188px;
padding: 20px 10px;
margin: 0;
background: url(images/btmhatlines.gif) right no-repeat;
font-size: 1.1em;
line-height: 1.6;
text-align: center;
}
Can anyone see my mistake? Cheers Hi, Well, they're at it again, those cheeky browsers. Check it out. I have a site that consists of a main, central container, with a background image of 675x1px. So far I also have a top banner and a menu bar both 600px wide. The extra 75px are drop shadows either side of the main box of colour. In IE, I put my banner and menu divs into the container and everything works fine - they're nicely centred and look good. However, in opera/firefox, the divs are over to the left of the central container, and hence screw everything up. Also, even though my central container has 100% height, in Opera it doesn't extend to the bottom of the page. Here's the CSS: Code:
/* CSS Document */
body
{
background-color:#E1FFDC;
text-align:center;
margin:0px;
}
#container
{
width:675px;
height:100%;
background-image:url(mainbg2.gif);
background-repeat:repeat-y;
margin-left:auto;
margin-right:auto;
text-align:center;
}
#mainphoto
{
width:600px;
height:278px;
margin-left:2px;
background-image:url(maintop.jpg);
position:relative;
}
#menubar
{
width:600px;
height:39px;
margin-left:1px;
position:relative;
}
mainbg2.gif is the central container background And the page is here Any help would be much appreciated. Cheers NEWSFLASH Problem solved - i basically just took the images out of their divs. I still have a problem with Opera not stretching the div down though, but I think that will be solved once I put some content in. |
|||||||