SitePoint Sponsor

User Tag List

Page 2 of 3 FirstFirst 123 LastLast
Results 26 to 50 of 68
  1. #26
    SitePoint Enthusiast protheory's Avatar
    Join Date
    Mar 2008
    Location
    Notts, England
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    These are my books, I got rid of a load of others as I had no room to keep them:





    EDIT - HTML Utopia is top right on the bottom pic, best book I ever bought that one

    As you can hopefully see, if it's not too blurred, I'm very serious about learning to code properly in all forms. I'm learning assembler as well to an extent, C# etc, but CSS is the one I want to use most and it's the most variable code I deal with

    I suppose I'll just have to keep on trying, no tables allowed whichever way I look at it so it's a case of keep on trying I suppose. I'm sure it will be great when I've finally mastered CSS-P for layouts and then I'll be proud of myself having worked so hard too. I'm dyslexic so I tend to need to understand the whole of a problem before I understand any particular part. This is no doubt why I find CSS-P so difficult compared to tables as I now lack the complete and rigid visualisation of tables.

    My DIVs are not in position in Dreamweaver nor Notepad, so I can't "see" them like when I had cells that behaved like I wanted them to. This is mainly why I see it as so difficult and why I can't just use code that I don't understand, even if it's from a trusted source such as Sitepoint. I feel strange if I don't know the ins and outs completely. Once I've mastered CSS I'll never look back I'm sure.

    EDIT - I suppose it feels a bit like I'm used to Photoshop (WYSIWYG) and all of a sudden everybody says "but now you have to use the command line only for your graphics" if you see what I mean.
    Last edited by protheory; Mar 28, 2008 at 06:20.

  2. #27
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by protheory View Post
    Hello, I know it sounds like I don't know what I'm talking about but I do actually.
    I certainly didn't imply that you don't know what you're talking about, and I apologize if I gave that impression.

    An HTML document can comprise up to three 'layers' which should be kept separate as far as possible. From the bottom up:
    1. content (HTML or XHTML)
    2. presentation (CSS)
    3. interaction or behaviour (JavaScript)


    Each layer should be independent of the layers above it. You should be able to write the HTML without knowing what the style sheet will look like or what JavaScript will be added to it.

    Since contemporary CSS can't cope with all possible layout issues, we cannot fully achieve this ideal yet. The varying degrees of browser support for CSS exacerbates the problem. Still, it's what we should strive for.

    The problem for most authors/designers/developers is that they try to do everything at once.

    I recommend writing the markup first, without thinking about presentation or interaction. That helps create a logical source order and a focus on semantics. Then you start working on the CSS. Because of the aforementioned limitations you will need to go back to the markup and add IDs and classes and probably the occasional DIV or SPAN, but it should be minor alterations. When all this is done, you can start adding progressive enhancement through JavaScript.

    I understand what you're saying, though. Editing someone else's design can be challenging. But if that someone has kept the layers separate, you can focus on the CSS to 99%.
    Birnam wood is come to Dunsinane

  3. #28
    SitePoint Enthusiast protheory's Avatar
    Join Date
    Mar 2008
    Location
    Notts, England
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    I certainly didn't imply that you don't know what you're talking about, and I apologize if I gave that impression.

    An HTML document can comprise up to three 'layers' which should be kept separate as far as possible. From the bottom up:
    1. content (HTML or XHTML)
    2. presentation (CSS)
    3. interaction or behaviour (JavaScript)


    Each layer should be independent of the layers above it. You should be able to write the HTML without knowing what the style sheet will look like or what JavaScript will be added to it.

    Since contemporary CSS can't cope with all possible layout issues, we cannot fully achieve this ideal yet. The varying degrees of browser support for CSS exacerbates the problem. Still, it's what we should strive for.

    The problem for most authors/designers/developers is that they try to do everything at once.

    I recommend writing the markup first, without thinking about presentation or interaction. That helps create a logical source order and a focus on semantics. Then you start working on the CSS. Because of the aforementioned limitations you will need to go back to the markup and add IDs and classes and probably the occasional DIV or SPAN, but it should be minor alterations. When all this is done, you can start adding progressive enhancement through JavaScript.

    I understand what you're saying, though. Editing someone else's design can be challenging. But if that someone has kept the layers separate, you can focus on the CSS to 99%.
    No apology needed, all I meant was that I've been endlessly reading Sitepoint articles about CSS and evangelism and I'm aware of the current state of play, benefits, the future etc

    I like your approach actually, markup first without worrying about the presentation. And you're exactly right, I'm trying to see it all at once and now that you mention it this is my main problem I think. I'm used to seeing things 'live' when I edit and so the separation and different ways to do things throw me off a lot.

    It seems quite radical to me to start typing out markup without any styles considered but it makes perfect sense. After all, it's the markup that is my page's main focus. I get confused whether to add images as backgrounds to my DIVs or to add them in the source too.

    I always see layouts as either other people's templates or just blank columns with no content and both ways it throws me. I'm absolutely amazed at CSS Zen Garden's designs, that's the ideal and I'd love to be able to work this way. I also think I've got a basic design block somewhere in the visual sense.

    I'm never sure whether my designs look right, or could be better, or will display similarly. Thanks for your help, I feel as though I'm making progress slowly and as I'm sure you know yourself every bit of progress is a milestone when you're new to something.

    I like the markup first then style very much, this may be the single most useful piece of information I've had.

  4. #29
    Object Not Found junjun's Avatar
    Join Date
    Mar 2002
    Location
    northern MI
    Posts
    1,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Protheory, Tommy is of course spot on, but if you come from a wysiwyg background as far as front end development goes, I can see that the learning curve might be challenging if you're going to venture into web standards and hand coding.
    Quote Originally Posted by AutisticCuckoo View Post
    I recommend writing the markup first, without thinking about presentation or interaction. That helps create a logical source order and a focus on semantics. Then you start working on the CSS. Because of the aforementioned limitations you will need to go back to the markup and add IDs and classes and probably the occasional DIV or SPAN, but it should be minor alterations.
    Like you said Tommy, in a perfect world with great browser support for standards (and better standards), this would be the way to go. In practice it's really hard if not impossible to write your HTML first without any consideration to layout. DIVs and other hooks are imperative to get a CSS layout going in the current state of CSS. Some experiments like the CSS Zen Garden are able to pull this off. But it's a static page and it all changes once we're talking about dynamic websites. I really really wish we were there now, I write front end code to be used by web applications all day long.. it would make my job much easier

  5. #30
    doing my best to help c2uk's Avatar
    Join Date
    May 2005
    Location
    Cardiff
    Posts
    1,832
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by protheory View Post
    I've got Web Developer Toolbar which helps me a lot actually but I've not tried Firebug yet, I honestly thought it was the same thing as the Developer toolbar. This sounds like what I'm looking for though I think, I'm on a 1280x1024 resolution so I should be able to have a few windows up, thanks
    As Stomme poes said, Firebug can also be opened within the current browser window. It comes with two new buttons, the bug and glasses. If you use the classes, Firebug opens automatically at the bottom of the browser window.
    Dan G
    Marketing Strategist & Consultant

  6. #31
    SitePoint Enthusiast protheory's Avatar
    Join Date
    Mar 2008
    Location
    Notts, England
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by junjun View Post
    Protheory, Tommy is of course spot on, but if you come from a wysiwyg background as far as front end development goes, I can see that the learning curve might be challenging if you're going to venture into web standards and hand coding.
    Yes, it's challenging indeed but enjoyable too. I won't feel comfortable until I've got a whole picture of CSS in its entirety. I'll get there somehow, I just find it difficult to work on isolated bits of code instead of looking at the whole thing in front of me which is after all the desired end viewing of any and every site in the visual on screen sense.

    I feel extremely limited, not by CSS itself but by my lack of practical ability. I could talk all day on the standards and classes in CSS I'm sure but when it comes down to it I've got very limited practical abilities. It's as though I've gone from being confident and in complete control (tables/WYSIWYG) to being a complete novice again (CSS/CSS-P).

    Now I can't visually move my objects on my pages, or use my mouse or whatever, it just seems so limiting and it is, as there is no complete WYSIWYG editor using full web standards allowing drag and drop operations like Photoshop.

    An aside from this is that one of the most creative and inspiring pieces of software is Photoshop and all that it entails. PS is completely drag and drop and visual, it's all about visuals, and so is (or was) Dreamweaver.

    I can't help but doubt that if hand coding had been around in its present form and WYSIWYG editors became prevalent that Macromedia's marketing department would jump on the title "Dreamhandcoder." I think the product is called Dreamweaver because it implies all the important visual aspects of design in general, it's like Photoshop but for web design. Weaving a web, yes it's a play on words but to me it also implies clicking buttons, moving things around to create effects on my pages, static hand coding doesn't feel like I'm weaving a dream, although I still enjoy it.

    I know WYSIWYG editors are looked down upon but what would people think if Photoshop were suddenly to become invalid, and everyone resorted to editing their graphics using only the command line? And everybody told you that using the 'old' visual method was somehow bad, and would break your graphics.

    I think that as a general point the visual designers among us need to also be catered for somehow. Eric Meyer's CSS Sculptor will hopefully pave the way for us. I know it's the easy way, it's got potential for abuse (classes becoming the new font tags) but there's more than one way to 'code' a website and it seems like all of a sudden the visuals have been left out.

    I'm not complaining here at all, I'm just observing and sharing a beginner's thoughts. In reality I think we will soon see full WYSIWYG editors working only with standards compliant codes and it's probably the case that technology has yet to catch up with the trend in coding.

    Sorry to waffle on, I'm just very interested in this subject

  7. #32
    SitePoint Enthusiast protheory's Avatar
    Join Date
    Mar 2008
    Location
    Notts, England
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by c2uk View Post
    As Stomme poes said, Firebug can also be opened within the current browser window. It comes with two new buttons, the bug and glasses. If you use the classes, Firebug opens automatically at the bottom of the browser window.
    I just installed it, thanks, it looks good

  8. #33
    doing my best to help c2uk's Avatar
    Join Date
    May 2005
    Location
    Cardiff
    Posts
    1,832
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    But you can still (and should!) use Photoshop to design the site, and not worry about how you later on have to code it. So you do all the visual things first.

    That's also why you normally have the job split between a designer and an html/css coder.
    Dan G
    Marketing Strategist & Consultant

  9. #34
    doing my best to help c2uk's Avatar
    Join Date
    May 2005
    Location
    Cardiff
    Posts
    1,832
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you use the classes,
    Off Topic:

    what was I thinking when I wrote classes instead of glasses? can anybody guess?
    Dan G
    Marketing Strategist & Consultant

  10. #35
    SitePoint Enthusiast protheory's Avatar
    Join Date
    Mar 2008
    Location
    Notts, England
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by c2uk View Post
    But you can still (and should!) use Photoshop to design the site, and not worry about how you later on have to code it. So you do all the visual things first.

    That's also why you normally have the job split between a designer and an html/css coder.
    Hmmmm, I've never thought of it this way before as I'm also a graphics novice, but learning. Designing the site then converting in to code wouldn't be too bad now I think of it. This way I could do the drag and drop stuff all before writing any code. If I were doing it this way I could see myself understanding a lot more. The build of the structure would truly be separate from the design in the visual sense.

    I'd like to do this but I'll have to learn more Photoshop first. This approach does solve the majority of my problems. The main thing I liked about tables was that I could isolate and move aspects of my design. I used to design a site all in one, as I went I'd just drop bits in. Designing the look first seems so much better to me, then once I've got a visual I just need to structure my code to display it as seen on the visual.

    That's helped me a lot.

    Thanks.

  11. #36
    SitePoint Enthusiast protheory's Avatar
    Join Date
    Mar 2008
    Location
    Notts, England
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think I understand now, using tables for layout encouraged me to use tables and therefore code, for layout too. It was the all in one approach but now it's different.

    Now I can think of designing my site in a graphics program instead of using a table grid layout on my actual page, I can clearly see the benefit and practice behind things. I now realise that I've been trying to use CSS to design as I go, rather than deciding what I want things to look like then coding structurally, and coding once. I'm used to rewriting lots of code but I realise that the new approach is 'write structure-make it look right-tweak it' rather than editing everything 'live' as you design.

    I hope I'm not posting too much but I'm hoping that if another beginner reads this they will benefit from questions asked and answers received. Perhaps we should prepare a thread on converting design strategies from table grids designed as you go to graphics programs used in place of tables, to the same effect with none of the downsides as they're not real tables.

    If someone had explained this to me 2 years ago I'd have found it a lot easier to understand.

    Old method:

    Table grids on page.
    Edit code as you design.

    New method:

    Design comp takes place of table grid for layout.
    Convert comp into code so it looks the same.
    You design fully before creating the page.

  12. #37
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by junjun View Post
    In practice it's really hard if not impossible to write your HTML first without any consideration to layout. DIVs and other hooks are imperative to get a CSS layout going in the current state of CSS.
    Of course, which is why I said that the second step will involve some modifications of the markup. If you're experienced, you can often incorporate these hooks while you're doing step #1, but for a beginner I'd recommend going back when necessary. Otherwise there's a major risk that they'd add more stuff than necessary.

    I use this approach regularly at work. Some project is about to build a web-based Java application. They've usually built a prototype or have some sort of comps that show what information will be on various pages. My job is then to create static HTML versions of these pages plus a CSS style sheet. The Java developers can then build their app and make the resulting markup be like my HTML templates.

    Admittedly, we don't have heavily designed sites, but it wouldn't be all that different if we did. It's still very possible to write the markup first and then add styling on top of that, even if you have to make minor amendments to the markup.
    Birnam wood is come to Dunsinane

  13. #38
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,819
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    If you actually write the HTML without any consideration for how you intend to mark it up then your HTML should end up cleaner at the end. Most of the time you should be able to find ways to attach the presentation that you want into the markup without needing to add extra HTML as not everything needs an id or class in order to be able to reference it from the stylesheet.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  14. #39
    Object Not Found junjun's Avatar
    Join Date
    Mar 2002
    Location
    northern MI
    Posts
    1,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    My job is then to create static HTML versions of these pages plus a CSS style sheet. The Java developers can then build their app and make the resulting markup be like my HTML templates.
    Good to hear Tommy, and here I thought you spent most of the day pondering about markup and semantics over a glass of wine
    Quote Originally Posted by AutisticCuckoo View Post
    Admittedly, we don't have heavily designed sites, but it wouldn't be all that different if we did. It's still very possible to write the markup first and then add styling on top of that, even if you have to make minor amendments to the markup.
    Actually this is maybe where some of the difference is. If you have a very creative designer, you can sometimes spend hours just staring at and analyzing the mockup of how you need to divide the site into div tags and which css/js techniques I need in order to make it all work.

  15. #40
    SitePoint Zealot stikkybubble's Avatar
    Join Date
    Sep 2006
    Location
    Pluto
    Posts
    182
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am really surprised that you find CSS such a challenge, if you can do all that programming (looking at the picture)! You need to have more faith in yourself: there's no way you could program, which is completely abstract, and be really stumped by having to lay out a page with CSS. I suppose using the wysiwyg is the problem, or you would have already realised what an advantage it is to have a head for maths. Think coordinates, percentages and venn diagrams. Or at least that's what occurs to me. You can do it! Really!

  16. #41
    SitePoint Enthusiast protheory's Avatar
    Join Date
    Mar 2008
    Location
    Notts, England
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by stikkybubble View Post
    I am really surprised that you find CSS such a challenge, if you can do all that programming (looking at the picture)! You need to have more faith in yourself: there's no way you could program, which is completely abstract, and be really stumped by having to lay out a page with CSS. I suppose using the wysiwyg is the problem, or you would have already realised what an advantage it is to have a head for maths. Think coordinates, percentages and venn diagrams. Or at least that's what occurs to me. You can do it! Really!
    Hello, thanks for your encouragement. I've been learning to program for a long time but I've never had any real practical application for it. I've read about processor internals, reverse engineering, assembler and the rest but I still find it difficult to learn. I just promised myself that I'd never give up and so I'm keeping on with it.

    It's not CSS I find difficult but CSS-P really. I'm not too bad with logic but there seems to be so many different ways to achieve the same thing that I get lost quite often. I figure that once I learn one language I'll be able to pick them up quicker across the board

    EDIT - I suppose reading a lot of books doesn't make you a programmer in my case.
    Last edited by protheory; Mar 29, 2008 at 12:31.

  17. #42
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,819
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Basically there are three approaches to take in positioning elements on your page (or some combination of the three).

    1. Use floats - this requires that the content be in the same order as you want it to display starting at the top left. You set the margins, padding, width, overflow, float, and clear properties to position each element on your page starting from the top left.

    2. Use position:relative and position:absolute - somewhat more difficult than using floats but can also handle content in a different order from how you want it to display as well as overlapping content. The main difficulty is in having it reposition correctly when the window is resized.

    3. Use CSS tables - not yet practical since IE7 and earlier don't support this method. Once everyone upgrades to IE8 or moves to other browsers then table based layouts using display:table, display:table-cell etc in the CSS will be possible.

    What you need to decide at the start is whether you intend to work primarily with method 1 or method 2 and experiment with positioning three or four basic elements relative to one another using your selected approach. It is seldom necessary to position more elements than that since generally where you have more than that to position the others are inside one of the elements you've already positioned and you just repeat the process within that element instead of the entire viewport.

    That approach worked for me at least.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  18. #43
    SitePoint Enthusiast protheory's Avatar
    Join Date
    Mar 2008
    Location
    Notts, England
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I like the float approach myself, as I often notice what I assume to be absolutely positioned layouts overlap to the point where they're unreadable when I use ctrl + to zoom in. It seems so simple to use floats, I make a header DIV clear both of my 2 column layout, same for the footer. I float the left column for my navigation, then float the right one?

    This in theory I understand, the principle of floats if not the practical application for cross browser displays. Which brings me to my next question. I'm used to working in percentages in my table widths. Most often I'd divide my page vertically then set the master table to 100&#37; or 90%. I've never defined widths in pixels but the majority if not 99% of the tutorials I've read on CSS-P use pixels which confuses me and makes me nervous of absolute positioning, which is what I assume using pixel widths implies.

    I've been reading a blog somewhere for 100% height columns without faux techniques or Javascript. This is one of the most common problems for new converts I think "why aren't my DIVs the same height as my other content?" This is a problem for me too. So I might try to use a hack for 100% height, not Javascript as IE7 blocks it by default. The trouble is for me that to do such a simple thing as this requires me to hack for IE or whatever browser it is just to get my columns to follow each other. This isn't a complaint, new technology requires adjustment which is fine by me, but what I'm saying is the hacks throw me off the order a bit. They introduce some unknown elements to me which is very off putting to me as a learner, it's like there's black holes in my code that just work and I don't fully understand why.

    I've also read, I think anyway, that floated content or blocks have to be given a width, is this correct? Due to an IE bug? This would again be fine to me but I'm used to working with tables defined in percent and I honestly can't remember a tutorial that assigned a floated element a percentage width, it usually seems to be in pixels which I'm not used to using.

    I've also seen many EM based widths and heights but again if percentage is akin to this, as in your options for width are EM,%,pixels,pica(?) etc, I don't understand why people use EMs instead of percentages like we used to use with tables. I suppose I'm looking for some familiarity here from what I know, percentages and equal height columns by default, as it was in the past as tables default to equal heights.

    As a designer, all I really want is my pages to look the same up to a maximum height/width and a minimum height/width. I'd ideally like the content to auto-adjust when I use ctrl+ as well but this is only a personal preference. I remember my tables defaulted to 100% width, no matter how wide the browser was, although I wasn't aware that such high resolutions existed. As it mentions on Jello Mold, there must realistically be a maximum width for pages, if my header is a single graphic it'll lose quality soon enough.

    So keeping on topic, I can easily assign a percentage or pixel width to tables with one line of code. With CSS-P I've no idea how to make sure my design is rock solid in different sizes, and that the content expands as I wish it to. I'm not for a second suggesting this isn't possible with new methods, just that I don't know how to make it so.

    Just learning to convert the core layout techniques, percentage height/width, and how to keep content within its container such as table cells do when you zoom in, would be a real blessing to me.
    Last edited by protheory; Mar 29, 2008 at 18:12.

  19. #44
    SitePoint Enthusiast protheory's Avatar
    Join Date
    Mar 2008
    Location
    Notts, England
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    CSS and CSS-P seems so simple. If you want to put a column on your page use a DIV, for 2 you float them and they automatically butt up against the top of the viewport like tables, or you can position them absolutely.

    To position or move an element, instead of nbsp and spacer gifs we use margins and padding, seems simple enough and seems to provide us with literally pixel perfect options for positioning images and such on our pages. This method is, in theory, much more accurate or at least as accurate in the positioning sense as using spacer cells/images.

    So to a learner like me, you make a few DIVs, float them, give them margins and/or padding and everything like tables. Only it isn't is it unfortunately. This is where I get lost in the sea of bugs and hacks and similar problems. I'm firmly of the belief 'condemn the fault and not the actor of it' so I'm looking at this objectively.

    What this basically means is that my layout/visual design, may likely break in both older browsers and certain other browsers, double margins and too much padding applied by browser default are some of the many problems I've read about. Then there's the thing I mentioned about floats being the best thing ever apart from they don't work the way they should, again this is an objective point about the realities not an opinion.

    All I'm thinking at this point is "CSS rocks! Look at Zen Garden, Sitepoint, CSSPlay, amazing!" but when I try to work with this technology it's chock full of hacks that confuse me and it turns out that it's nowhere near as beautiful a method for layouts as I'd thought. I'm not saying that in a perfect world the concept of CSS etc isn't wonderful, I'm saying the current reality is that it requires a lot of hacks. Almost never have I read a tutorial on layouts that didn't contain either inline of after thought comments such as "IE.x does so and so...hack needed" and "Netscape 4 does this too..." conditional comments needed, then there's Safari and Opera and we're back to the confusion.

    And I'm thinking "isn't CSS meant to be pure, clean, easy to use?" and all I seem to see is confusion, limited support for certain layouts and core positioning techniques, and loads of other things wrong and all I'm really looking for is a method like "make your divs, apply float and clear, you're layout's done." I'd love to know that a certain image or text element won't overflow its margins, negative or otherwise, but I can't guarantee this like I could with tables.

    As I say, I'm looking for a grid or shell for my content, that I know inside out, can adjust easily, and that works. I find it difficult to think that although CSS has lots of wonderful properties I might as well be forbidden to use many of them as intended, due to browser bugs. I'm not complaining here, more explaining a beginner's point of view.

    Hopefully once it clicks for me I'll be able to write my own introductory articles for others in my position.

    I'm not sure what the policy for consecutive posting is here so I'll edit this in seeing as though it's on topic.

    Image slicing and image overlap as part of a design. I know how to slice images, recommended or not, with tables but not with CSS. I know that my slices expand within their cells in much the same way as content expands all table columns' heights, but I don't know how to reproduce this using just DIVs and CSS.

    I like the 3D overlap effect a lot but image slicing is out of fashion, as are big images (no slices but same graphical effect) and I hardly ever see z index used and I wonder why? Z index overlaps doesn't it but why is it seldom used? It seems to be the perfect solution to overlaps for images but what are the problems with it? I'm really into concept designs as well as classical so I'm very interested in 3D overlaps with hotspots etc but come to think of it I almost never ever see image maps used either.

    This is on topic because the alternative is laying out an image sliced using tables.
    Last edited by protheory; Mar 29, 2008 at 18:38.

  20. #45
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Someone said make your design in Photoshop first. I think that really depends on how you build. For me, I'd be wasting my time, as I can usually write the code faster than make the image (not that either is terribly fast). If it works for you, use it. But it might hinder you too, it depends.

    You keep saying CSS-P and I thought you meant CSS, but now you say them both, so what's CSS-P? CSS in Practice?

    My husband has a bookshelf very similar to yours. He too taught himself Assembler as he said if you don't know how the machine works you can't truly write your code to optimise it... meaning he's ended up writing very lean one-liners in Perl which are pretty much unreadable.
    And, actually, he also doesn't understand CSS and keeps struggling with it and saying "This CSS thing was created by designers, not programmers!" so if you are good at programming maybe that's got something to do with it.

    I would tell you not to look at Stu's code at CSSplay until after you get CSS to click. I made the mistake of taking a menu from there when I was much greener and converting it back to clean code was agonising.
    I would also say that while you can see a lot of hacks in places, they are often not needed. You can hack your way around something, or you can think around it and do something else. The hacks I end up doing are generally the same few things for IE6, and they're almost like family now. I have even started adding inappropriate comments after each IE6 hack, just for fun. Some of them were really long, and after a few months I went back to look at a page and realised there were quite a few in there, for a very simple page. I managed to remove half of them with just the little extra I'd learned in the meantime.

    Don't look at all the hacks. Some of them are necessary but come on, what's the point of hacking for Netscape Navigator unless you can get a copy yourself to test in? If 0/0 customers use it, why add the extra code?

    I bookmarked Paul's All Bout Floats post several months ago. I go back to it again and again (tho not so much lately).
    http://www.sitepoint.com/forums/show...5&postcount=15

    Someone who's good in Flash should make an animation with Paul or someone. It would be like the most valuable thing on the web.

    I think the reason you don't see z-index all that much is that there is a natural z-index that's created as you do basic positioning styles. Statics sit on the bottom. Relatively positioned things go up a step, floats above that (with blocks, but not with text/inlines), and absolutley positioned things on top. Most of the time normal document flow and normal positioning flow can do 99% of the work for you. I've added z-index in stuff just to get something else going in IE even, with no actual visible effect.

    As I say, I'm looking for a grid or shell for my content, that I know inside out, can adjust easily, and that works.
    A lot of Paul's layouts could be considered as so, as far as one, two, three column layouts. Because they're just layouts and not full sites, they can be a good basis. Everyone eventually gets their own they use regularly. Dan Schulz has a certain setup he almost always uses no matter what type of site it is, and builds around that.

    Quote Originally Posted by felgall
    3. Use CSS tables - not yet practical since IE7 and earlier don't support this method. Once everyone upgrades to IE8 or moves to other browsers then table based layouts using display:table, display:table-cell etc in the CSS will be possible.
    Can you answer a question for me then? I used display: table for the first time with something, and found that padding and margins within something with "display: table-row" no longer worked. Just like with a real table, where I found I needed to undo the border-collapse: collapse to get some spaces between cells... what is the equivilant for things using display: table? I'm stuck with everyone hugging each other in every browser but IE (who has some different rules given).

  21. #46
    SitePoint Enthusiast protheory's Avatar
    Join Date
    Mar 2008
    Location
    Notts, England
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, I'm Pro, thanks for your help here. I use the term CSS-P to refer to CSS when used for positioning, I just read it on a blog the other day and assumed it was in common use.

    I'm a mixture of visual, perfectionist, and hand coder really. I like all three approaches in my coding/design work. I'm learning to use Fireworks which is helping me a lot, it's made for web design and what's more it features a lot of familiar WYSIWYG menus and commands which helps me a lot too. I've kind of decided to do my drag and drop visual layouts in Fireworks and then only approach the design structure when I'm ready.

    I'll still be learning all the CSS I can in between but this way I can drag and drop as my design process like I'm used to doing and (hopefully) I can still hand code my finished pages too. I'm not entirely sure whether it's the positioning elements of CSS that I find difficult or the fact that it seems to take a lot of research to get the elements right which translates to me knowing my code and its compatibility inside out.

    I think I get confused as when I download a template or whatever to learn from they're all slightly different and so it throws my compatibility knowledge off. Some layouts 'work' and some don't so this is a complication for me. I don't seem to be able to grab a great looking template and make it my own as there are so many issues with browser support etc and when I edit them I'm automatically unsure if what I've done will work or not in the majority of browsers.

    I don't use any of CSSPlay's code apart from a menu (li/navbar) which works fine as far as I know. And I'll take a look at the floats article, thanks I'm not sure of the z-index but my interest in this is part of a wider design idea that's probably off topic (image slicing, making nav links a part of header graphic etc, real 3D stuff) so I'll leave that one for now I think.

    I think your advice on layouts is very good, seems logical too. I'll no doubt eventually decide on a particular layout and stick with it. I just get nervous that the code will break if I adjust this and that value, as I'm too green still to know what breaks in what browser or not, I'll learn somehow though.

    I have quite a good way of putting things simply so I'm hoping to be able to help others in my (ex-table layout proponent) position.

  22. #47
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by protheory View Post
    Hi, I'm Pro, thanks for your help here. I use the term CSS-P to refer to CSS when used for positioning, I just read it on a blog the other day and assumed it was in common use.
    It used to be, back in the days when it was a novelty (and table abuse was the norm). Nowadays most of us take it for granted that CSS is responsible for all presentational matter – including layout – so there's no need for a special name for it.
    Birnam wood is come to Dunsinane

  23. #48
    SitePoint Enthusiast protheory's Avatar
    Join Date
    Mar 2008
    Location
    Notts, England
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    It used to be, back in the days when it was a novelty (and table abuse was the norm). Nowadays most of us take it for granted that CSS is responsible for all presentational matter including layout so there's no need for a special name for it.
    I see, thanks I'd read the term CSS-P on, ironically, a site defending the use of tables for layout that I discovered a few days ago. Not that I'm a defender too, I just read whatever I can in the hopes of a balanced view on things.

  24. #49
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's not so surprising. People who haven't abandoned layout tables yet probably consider CSS layouts to be something exotic and slightly frightening that needs a name.
    Birnam wood is come to Dunsinane

  25. #50
    SitePoint Enthusiast protheory's Avatar
    Join Date
    Mar 2008
    Location
    Notts, England
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    It's not so surprising. People who haven't abandoned layout tables yet probably consider CSS layouts to be something exotic and slightly frightening that needs a name.
    Yes, I think this is true. Perhaps as CSS layouts become more and more prevalent people will automatically refer to 'CSS' as a complete layout and styling tool, rather than separating aspects of it

    I've now learnt the three aspects of separation within web design:

    1. XHTML for content markup.

    2. CSS for styling in all its forms including layout/positioning.

    3. Javascript (or similar) for behaviour.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •