| Forum Home | ||||
| Press F1 | ||||
| Thread ID: 90217 | 2008-05-27 01:20:00 | CSS Positioning images with text beside them in a column format -help | Morgenmuffel (187) | Press F1 |
| Post ID | Timestamp | Content | User | ||
| 672952 | 2008-05-27 01:20:00 | Ok Heres the problem (nigel.geek.nz) In IE6 and IE7 the layout works (yeah I was shocked to), however in firefox 2 and Opera it doesn't The coloured text should be next to the coloured image, eg blue text next to blue image, etc But in FF, Opera, Safari, this isn't happening and i don't know why, I think it should work, but it doesn't seem to |
Morgenmuffel (187) | ||
| 672953 | 2008-05-27 02:15:00 | This is the appearance that you want? Attached file: achieve.JPG (www.imagef1.net.nz) (50 KB) It looks kind of same on Firefox? Attached file: kindasame.JPG (www.imagef1.net.nz) (71 KB) |
Renmoo (66) | ||
| 672954 | 2008-05-27 02:43:00 | err no I'm guessing you have a screen size greater than 1024? Attached file: burgle-1.jpg (www.imagef1.net.nz) (35 KB) heres what it looks like for me But yes that is a problem i also have to fix |
Morgenmuffel (187) | ||
| 672955 | 2008-05-27 05:44:00 | If Bletch does not reply to this thread within the next 24 hours, I will take a look at your source code. Ta. :) |
Renmoo (66) | ||
| 672956 | 2008-05-27 05:51:00 | I would just say clearing in same way by briefly glancing at it, will check back later (currently at work). | sal (67) | ||
| 672957 | 2008-05-27 08:48:00 | Hi there A couple of issues here, the main one being that when you float a division without specifying a width, it will grow to accomodate the text it contains. So, you either need to add line breaks into those addresses, or specify a width for the map-text divisions. Other issue is that the <div>s have ids instead of classes -- you should only have one element with a particular id in the whole HTML document. Yet another thing is that you've (correctly!) put the clearing divs with a class ... but then used "#" in the CSS file; this should have a "." to denote a class rather than an ID. Fixing these, I managed to get your layout working :) |
davehartley (3487) | ||
| 672958 | 2008-05-27 08:49:00 | Ok I think i have fixed it, the original link now shows the corrected version anyone with a larg monitor want to test it The images should be aligned vertically with the relevant coloured text next to them I would try on this monitor but I think 1024 by 768 is as high as it supports edit yep thats as high as this monitor goes |
Morgenmuffel (187) | ||
| 672959 | 2008-05-27 09:25:00 | Thanks Dave A lot of the CSS in the file is not mine, I am trying to fix a page on a site thats not laying out correctly and i am not allowed to change their CSS definitions (as most of the site works), however i am allowed to write my own CSS The css ones on the layout page are mine, I always get mixed up between classes and ids, I just don't get CSS, It's one of those things that my brain just doesn't grasp no matter how many times i read it |
Morgenmuffel (187) | ||
| 672960 | 2008-05-27 09:51:00 | Slight off: 1280 x 800: Attached file: slightoff.JPG (www.imagef1.net.nz) (77 KB) | Renmoo (66) | ||
| 672961 | 2008-05-27 09:54:00 | :) OK, a bit of a primer then: IDs are used to identify one element on a page, and one element alone. This is usually something like a banner, footer, sidebar, ... anything where there will only ever be one of them. To style the element, use the "#" notation in your CSS file. Classes are used when there'll be more than one element you want styled the same way. This time, use the "." notation in the CSS file Not being able to change the other CSS file's not a biggie, as you can redefine any CSS rule on your page by putting your CSS definitions in a separate CSS file, and putting the link to your CSS as the last one in your <head>. This will override any others that have been "pre-set". As I said above, the main reasons for the layout not working originally was that (a) the "#" notation was used for the clearing div style in the CSS instead of a ".", and (b) the width of floating divs will grow to accomodate the text (and thus float down below other elements) if you don't set it and/or manually limit the line length with <br>s. |
davehartley (3487) | ||
| 1 2 3 | |||||