HTML/CSS Help please

  • Page

    of 1

    Previous Next
  • coastal 16 Apr 2008 22:36:03 5,390 posts
    Seen 4 hours ago
    Registered 8 years ago
    I've got a google maps website in beta. I've done all the output with no styling and now want to give it a lick of paint.

    So far in the clean-ish code i've used tables (some with some restrictive widths/heights), paragraphs and . Are they okay to keep or tables last century?

    And presumably i want to identify what text should be headers 1, 2 etc. And then muck around with the css file afterwards.

    i would love to do something like the twitter atlas here. But i don't know how the floating panes work. Presumably there is a browser neutral method?

    The generated text on the website thankful is all in one slim table that is in one big string variable server-side so i can do some last minute manipulation on it if required before it gets dumped to screen.

    I might as well provide the link: Planet Nomad.

    It's got some nice feeds coming in - like the flickr feed, uk traffic news and reuters news service. I suppose its main selling point is the fact that users, once registered, can set up email alerts based upon a subject matter and a map location. I've used it personally to receive traffic news about my route to work every morning. Anyway, I'd appreciate any advice about the lick of paint stage and if it any dabbing web guru wants to help, well, i'd more than happy for the help.

    bf3: sergeant_shaftoe

  • MrCarrot 16 Apr 2008 23:13:39 3,516 posts
    Seen 1 month ago
    Registered 10 years ago
    coastal wrote:
    So far in the clean-ish code i've used tables (some with some restrictive widths/heights), paragraphs and . Are they okay to keep or tables last century?

    I'm far from a guru, but I don't think your current layout would be too tricky to recreate with a few appropriately styled divs. You're certainly OK to be using paragraphs, assuming you're using them to hold, well: paragraphs of text! :) Tables should go, really, unless they're holding tabular data; they're not supposed to be used for layout.

    Also, the lack of a doctype your HTML is knocking Firefox and presumably other browsers into quirks mode. Until you sort this you might find that your CSS rules don't behave as you expect, and you'll probably find that different browsers have an even more different idea than usual of what things should look like (The way the header looks in IE7 currently may be caused by this.).

    Hope that's some use, no doubt one of the proper web-chaps'll point it out if I've got anything wrong.

  • coastal 16 Apr 2008 23:38:11 5,390 posts
    Seen 4 hours ago
    Registered 8 years ago
    Thanks for the tips MrCarrot. I'll look into the doctype issue.

    And divs are what's required then. my tables are always single column so presumably it will be a series of divs replacing effectively the tr td /td /tr for each row?

    bf3: sergeant_shaftoe

  • MrCarrot 16 Apr 2008 23:54:31 3,516 posts
    Seen 1 month ago
    Registered 10 years ago
    coastal wrote:
    And divs are what's required then. my tables are always single column so presumably it will be a series of divs replacing effectively the tr td /td /tr for each row?

    Or spans for inline stuff if necessary.

  • JammyB 16 Apr 2008 23:54:54 756 posts
    Seen 1 year ago
    Registered 12 years ago
    Do yourself a favour and buy Web Standards Solutions by Cederholm, or CSS Mastery I've heard is also good. If you're going to learn CSS, you might as well save yourself the hassle and do it properly first time. You'll never use tables again (apart from for tabular data!).
  • Quint2020 17 Apr 2008 13:36:34 3,484 posts
    Seen 2 months ago
    Registered 7 years ago
    I'm currently playing with a test site, as the design guy and myself have been tasked with updating our corporate website.

    This is the first time i've properly used CSS to create a site and i'm having some issues with IE.

    My menu works fine with every other browser but when i open up the page in IE the submenu doesn't appear under the "About Us" button.

    The test site is here: Test Site (bear in mind none of the graphics are done yet so it's all just test images).

    Any ideas guys?
  • sailesh 17 Apr 2008 13:43:07 591 posts
    Seen 5 days ago
    Registered 9 years ago
    easiest thing with cross browser issues is to use an IF statement with an IE stylesheet in it. It helps with the headaches :)

    Work http://www.sailesh-online.com | Play http://saileshcreates.tumblr.com

  • AcidSnake 17 Apr 2008 13:50:23 7,298 posts
    Seen 1 day ago
    Registered 9 years ago
    Hmmm...I can see a closing A tag in there, but not sure what it closes...

    Or is that part of the IF statement?

    AcidSnake - He can't see your sig, avatar, images or vids and talks about himself in the third person because he's proper old-skool...UID 24017

  • Quint2020 17 Apr 2008 14:05:33 3,484 posts
    Seen 2 months ago
    Registered 7 years ago
    AcidSnake wrote:
    Hmmm...I can see a closing A tag in there, but not sure what it closes...

    Or is that part of the IF statement?

    That should be part of the IF statement.
  • Quint2020 17 Apr 2008 14:08:34 3,484 posts
    Seen 2 months ago
    Registered 7 years ago
    I think it might be something to do with my CSS.
  • AcidSnake 17 Apr 2008 14:14:22 7,298 posts
    Seen 1 day ago
    Registered 9 years ago
    Possibly...I'm not at all familiar with that type of coding language...
    Though I also see a tag starting without closing the previous one...

    To explain without the forum breaking my post they appear in this order:
    A tag
    'About Us'
    IF IE7 tag
    Tag that I don't recognise
    End A tag
    Same tag I don't recognise, but with no ending symbol

    Otherwise I'm at a loss...

    AcidSnake - He can't see your sig, avatar, images or vids and talks about himself in the third person because he's proper old-skool...UID 24017

  • Quint2020 17 Apr 2008 14:36:16 3,484 posts
    Seen 2 months ago
    Registered 7 years ago
    AcidSnake wrote:
    Possibly...I'm not at all familiar with that type of coding language...
    Though I also see a tag starting without closing the previous one...

    To explain without the forum breaking my post they appear in this order:
    A tag
    'About Us'
    IF IE7 tag
    Tag that I don't recognise
    End A tag
    Same tag I don't recognise, but with no ending symbol

    Otherwise I'm at a loss...

    Hmm if we're thinking of the same tag that's the conditional comment which should be fine, it's weird because running the navbar file on it's own works fine in IE, it's only when i include it in to a div on the main page.

    It's funny as well because i've ran the page through the W3C Validator and it all conforms to standard, yay for Internet Explorer.
  • captain_cupcake 17 Apr 2008 14:38:45 334 posts
    Seen 5 years ago
    Registered 8 years ago
    Quint2020 wrote:
    I think it might be something to do with my CSS.

    I haven't gone through it, but off the top of my head IE needs a strict doctype for :hover pseudoclass on non-anchor elements; always good to follow the LOVE-HA! (LVHA) rule too:

    Link Visited Hover Active should appear in that order

    Code from CSSPlay?
  • AcidSnake 17 Apr 2008 14:39:33 7,298 posts
    Seen 1 day ago
    Registered 9 years ago
    Quint2020 wrote:
    It's funny as well because i've ran the page through the W3C Validator and it all conforms to standard, yay for Internet Explorer.

    Then I have no clue, sorry...
    But IE not conforming to W3C standards is nothing new...
    I'm looking at you 'alt' tag!

    AcidSnake - He can't see your sig, avatar, images or vids and talks about himself in the third person because he's proper old-skool...UID 24017

  • Quint2020 17 Apr 2008 14:43:03 3,484 posts
    Seen 2 months ago
    Registered 7 years ago
    captain_cupcake wrote:
    Quint2020 wrote:
    I think it might be something to do with my CSS.

    I haven't gone through it, but off the top of my head IE needs a strict doctype for :hover pseudoclass on non-anchor elements; always good to follow the LOVE-HA! (LVHA) rule too:

    Link Visited Hover Active should appear in that order

    Code from CSSPlay?

    *googles* lol.

    Cheers for this mate i'll check it out and see if i can get the bugger working, i'm pretty new to this so it's a bit of a baptism of fire.

    If you mean the menu code, i followed a tutorial on some site, it was quite good in the fact the it taught me quite a few different things while i stumbled through it.
  • captain_cupcake 17 Apr 2008 14:47:07 334 posts
    Seen 5 years ago
    Registered 8 years ago
    Quint2020 wrote:
    captain_cupcake wrote:
    Quint2020 wrote:
    I think it might be something to do with my CSS.

    I haven't gone through it, but off the top of my head IE needs a strict doctype for :hover pseudoclass on non-anchor elements; always good to follow the LOVE-HA! (LVHA) rule too:

    Link Visited Hover Active should appear in that order

    Code from CSSPlay?

    *googles* lol.

    Cheers for this mate i'll check it out and see if i can get the bugger working, i'm pretty new to this so it's a bit of a baptism of fire.

    If you mean the menu code, i followed a tutorial on some site, it was quite good in the fact the it taught me quite a few different things while i stumbled through it.

    :D. Probably won't fix it, but it will something like that...

    Yes the code looks remarkably like this: http://www.cssplay.co.uk/menus/dd_valid.html

    and Stu is one of THE gurus, so praps you could grab something from there anyways. Good luck :)
  • Quint2020 17 Apr 2008 16:12:12 3,484 posts
    Seen 2 months ago
    Registered 7 years ago
    I've fucking done it!!!

    After a bit of wrestling with it and trying a few different things to do with the doctype i finally sorted it.

    Cheers mate, this has been really annoying me.


  • coastal 22 Apr 2008 21:52:25 5,390 posts
    Seen 4 hours ago
    Registered 8 years ago
    JammyB wrote:
    Do yourself a favour and buy Web Standards Solutions by Cederholm, or CSS Mastery I've heard is also good. If you're going to learn CSS, you might as well save yourself the hassle and do it properly first time. You'll never use tables again (apart from for tabular data!).

    JammyB, you are a star. I bought Cederholm's WSS book for 11 off amazon and it's brilliant. Very easy to read. I love the way he explains the pros and cons of different methods.

    bf3: sergeant_shaftoe

  • coastal 11 May 2008 21:55:01 5,390 posts
    Seen 4 hours ago
    Registered 8 years ago
    Anyone know where i can get a customisable popup window script from? I fancy doing something like Fresh Logic's Atlas. Moveable, Minimise, shadowing, essentially quite cool looking.

    I've looked at examples over at Dynamic Driver but the popup II example is over four years old and i'm thinking there's probably something better out there to use.

    bf3: sergeant_shaftoe

  • JammyB 11 May 2008 22:54:46 756 posts
    Seen 1 year ago
    Registered 12 years ago
    coastal wrote:
    JammyB wrote:
    Do yourself a favour and buy Web Standards Solutions by Cederholm, or CSS Mastery I've heard is also good. If you're going to learn CSS, you might as well save yourself the hassle and do it properly first time. You'll never use tables again (apart from for tabular data!).

    JammyB, you are a star. I bought Cederholm's WSS book for 11 off amazon and it's brilliant. Very easy to read. I love the way he explains the pros and cons of different methods.

    That's great, 11 is a bargain as well and I'm sure it will pay for itself many times over for you. Yes it's such a fantastic book for exactly that reason - you're not only learning how to do things but also why you'd want to. My only other advice is when you get to the Layout chapter, make sure you read as much as you can on the net as well because the book is pretty sparse here, and just keep persevering. It'll probably take a month or few and plenty of headaches but once you "get" layout and the various browser bugs everything becomes far more enjoyable.
  • warlockuk 11 May 2008 23:49:39 19,223 posts
    Seen 2 days ago
    Registered 10 years ago
    I have the CSS mastery book, and it is indeed handy.

    I'm a grumpy bastard.

  • coastal 2 Jun 2008 23:13:05 5,390 posts
    Seen 4 hours ago
    Registered 8 years ago
    Thought i'd just post back on my findings. I was looking at the nice windows used by Fresh Logic's atlas. Well, i found a very useful window class here. You can see my results here. I've still got some tidying up to do with some user actions and styling. I hope to maximise the map so it fills the whole frame too.

    bf3: sergeant_shaftoe

  • coastal 10 Jun 2008 22:42:59 5,390 posts
    Seen 4 hours ago
    Registered 8 years ago
    A friend showed me FireBug today. If you didn't know it's a real handy plugin to FF that allows you to modify the CSS elements of a web page and see the results instantly. Onbiously it doesn't overwrite any css file on the server but it helps you learn other people's styling and modifying your own. It's also got breakpoints for clientside javascript.

    bf3: sergeant_shaftoe

  • paul_haine 10 Jun 2008 22:51:20 4,205 posts
    Seen 13 hours ago
    Registered 10 years ago
    Firebug is the single greatest frontend development tool available right now. Everyone should be using it.
  • Deleted user 20 January 2009 11:02:55
    Oooh. Interesting.


    /Googles

    PS I'M BAAAAAAACK!

    (cue smattering of 'you were away?' comments)
  • gareth886 20 Jan 2009 11:19:29 2,841 posts
    Seen 4 days ago
    Registered 8 years ago
    You were away? Oh. And why are you announcing your return in a HTML/CSS help thread?

    Is this a trap?
  • pjmaybe 20 Jan 2009 11:20:17 70,676 posts
    Seen 5 years ago
    Registered 13 years ago
    It is. Never, repeat NEVER trust a talking horse that hard-codes :)
  • Deleted user 20 January 2009 13:54:44
    gareth886 wrote:
    You were away? Oh. And why are you announcing your return in a HTML/CSS help thread?
    Because starting a new thread to do so would be the sort of thing I'd lambast mowgli for doing. ;)
  • Page

    of 1

    Previous Next
Log in or register to reply