Page 2 of 3 FirstFirst 123 LastLast
Results 11 to 20 of 21

Thread: Making it look good in all browsers and resolution?

  1. #11
    Join Date
    Jul 2007
    Location
    California
    Posts
    177
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Is there a good book on CSS out there? The tutorials are good that I've found, but for some odd reason I'm not able to grasp how to map everything on the page.

    I want uniform pages as far as the appearance and menu bars go, then I would love to learn how to place content without the use of frames. I'm totally willing to bury my head in a book and learn what I need to. I just have a short time frame on getting a visually nice looking portion of the site made.

    I'm basically going to solicit local business partners in 3 cities to allow me to place my marketing in their business's and as part of the return to them they will get an advertisement on my site (their own page). I'm doing direct mail marketing locally which will get them exposure on the site, as well as doing local fridge magnets with good enough info that people will want to keep them.

    The site looks pretty bad as it is compared to many out there... but I figure once I learn how to design one site that doesn't look great... I can browse til I find appearances and setups I like.

    I appreciate everyone's help, thank you!

  2. #12
    Join Date
    Dec 2004
    Location
    UK
    Posts
    2,358
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by Sliight View Post
    Is there a good book on CSS out there?
    Perhaps, but I wouldn't know: I've never read any.


    I realise that I'm a little late on my promise, and I haven't been able to devote much time to it so my efforts are a little lacking compared to times in the past when I've done this.

    I saved my revision in three phases: the basic content, the basic layout, and the final version. However, I see that you've made significant improvement, so you may already appreciate that little of the markup has changed between the first and third phases, even though the rendering is greatly altered.

    A couple of notes:

    • There's no menu. Preparing something that I would like to use would be too much investment, and would probably have some server-side code that probably wouldn't be of use to you, anyway.
    • The bottom-most links on your site aren't rendered properly, so I didn't include them as I wasn't sure what your intentions were. I probably would have just included them as a list with a top border separating them from the bottom-most block of text.
    • In larger viewports (which I cannot test), the text will not stretch across the entire width; this is intentional. Long lines are harder to read, to the lines of all paragraphs are capped at 75em.


    Stay away from XHTML for now - for a long time - and from presentational elements (like i), too.
    Mike

  3. #13
    Join Date
    Jul 2007
    Location
    California
    Posts
    177
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Heh too cool, you cleaned it up

    I like your example of how to built a page, it makes sense.

    The more I look at my page the less I like it already though. I have a feeling that's quite common though when someone starts... the more you learn the more you can do. The real key to this site is that it needs to at least "appear" professional, or at least sorta

    There is one thing I'd love to know how to do though, and since I plan to borrow the layout style of this site ( http://www.westat.com/ ) maybe you can help. No clue if that's how I'll end up doing it, but it's nice to keep creating and learning... the finished product will be better in the long run I think.

    The main content window seems to always hold a set margin from the right and left menu/content bars. I'm interested in knowing what settings I would need for that?

    Do I want the left, right, and main content bars all to be in a parent content div? From there I would set the left and right to absolute?

    My goal is to have the main content window stay in between the left and right borders I choose, and stay within the browser window. Extending it's length to compensate for when it is shrunk on the sides. That site I linked does this nicely.

    No need to go into a ton of detail, just the basic page layout terms and if I use margins or something?

    Thank you!

  4. #14
    Join Date
    Dec 2004
    Location
    UK
    Posts
    2,358
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by Sliight View Post
    The more I look at my page the less I like it already though. I have a feeling that's quite common though when someone starts...
    I always have that feeling: I'm no designer!

    The main content window seems to always hold a set margin from the right and left menu/content bars. I'm interested in knowing what settings I would need for that?

    Do I want the left, right, and main content bars all to be in a parent content div? From there I would set the left and right to absolute?
    That's one way, with the parent positioned relatively and margins applied to the middle. An alternate approach is to float the left and right columns, again with a margin for the middle. Which depends on how you want to linearise the document: the floated elements would have to come first in source order, whereas absolutely-positioned elements could occur anywhere.

    I hope that's enough. I get the impression you don't want to be spoon-fed. If so, excellent attitude!
    Mike

  5. #15
    Join Date
    Jan 2007
    Location
    Bournemouth, England
    Posts
    99
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Stay away from XHTML for now
    Why? My site is XHTML, and it renders fine in all browsers I have tested in. That includes IE6. I thought XHTML was a newer language, and W3C's reccomendation.

  6. #16
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

    IE simply doesn't support XHTML, so what you have is a bunch of messed up HTML code (since it doesn't see it as XHTML) that happens to work correctly, for the most part, when you are viewing the site with IE.
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  7. #17
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    This is due to your serving the page as text/html, the MIME-type for HTML. What you're serving, therefore, is not XHTML at all but invalid HTML. If you switch to using the XHTML MIME type (application/xhtml+xml), browsers will attempt to parse it as XHTML, and IE will fail.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  8. #18
    Join Date
    Jul 2007
    Location
    California
    Posts
    177
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    I think I've developed a decent looking site now... there's really just one goofy glitch left. I always have a horizontal slide bar at the bottom... I looked at the positioning of every div and I can't seem to find the issue. I've done my best to make it look nice for square monitors as I think they are still the most prevalent. The main page content isn't to my liking yet... but my main goal was to develop a base page that every page will use. Now comes the fun part of adding in the usefull content.

    Could you guys please take a look at my site, and let me know if you can tell me how to get it to fill the window without the blank right margin? Also, please tell me any ideas on changes you think I should make. I prefer the don't hold any punches style of criticism btw... kid gloves make for ugly finished products.

    http://www.usejeff.com

    I appreciate all of the help everyone has given me, and the beneficial links. I'll definitely be including this forum, as well as scripting site in the HTML help section when it's developed.

    Thanks!

  9. #19
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    You're still serving XHTML as HTML. Don't do that. If you were serving true XHTML, those scripts wouldn't work, since they make use of document.write() and innerHTML.

    As for the scrollbar, you've got:
    Code:
    #splitter {
    position: absolute;
    height: 48px;
    background-image: url(images/housepic.gif);
    width: 100&#37;;
    top: 110px;
    left: 15px;
    Well, that's an issue for a start. Its width is 100%, but on top of that you've shifted it to the left by 15px, so its right edge is always going to be the right edge of the viewport, plus fifteen pixels. Instant scrollbar. Stay away from pixel measurements too, they make for inflexible designs that look bad at different resolutions (since font size doesn't scale proportionally to pixel size).
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  10. #20
    Join Date
    Jul 2007
    Location
    California
    Posts
    177
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Awesome that makes total sense... the #splitter I mean. Logical resolution. (just changed it to 80&#37; and it worked... I wonder how long it took for you to see that one... I was messing with everything for over an hour lastnight trying to figure it out... Thank you!!!!!)

    The XHTML I think was from the tutorial I read... so basically at the top in the declaration I should just change it to HTML?

    I currently have:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    To be honest I have ZERO clue what the strict and stuff really means. I've not found anything that goes into depth about it... or wait, 10-1 the w3.org site explains it but I've not bothered to read it I'm going to go do that now...

    For now... what do I want at the top of my page?

    This?:

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 1.0 Strict//EN"
    "http://www.w3.org/TR/html1/DTD/xhtml1-strict.dtd">

    Thank you!

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
  •