SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Need help with more completed layout

    This is my second design I am attempting using CSS instead of tables. I am coming along ok but am now stuck. I am not sure why there is a gap between the middle border and the bottom border. Also I need to get the inner frames set and the content in them. The middle frame will be scrolling since I don't want the page too long.

    The mock up can be seen at http://coloradofoxden.com/atlantica/...pic_site_1.png

    The index page is http://coloradofoxden.com/atlantica/index.html

    CSS code is at http://coloradofoxden.com/atlantica/css/epic.css

    There will be 3 sections of content. The top will be the welcome stuff, the middle will be news, and the bottom will be for special info. The text needs to fit inside these frames. I need help getting the text in these frames and fixing the gap at the bottom between the mddle and the bottom border images. Please understand that I am still very new to CSS so please answer in a manner that I can understand being a newie to CSS. Do I need to do a wrapper even though I am not sure what a wrapper does? Thanks for being patient with me.

  2. #2
    SitePoint Addict
    Join Date
    Feb 2008
    Location
    New Jersey, USA
    Posts
    374
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    <h2 style="margin-bottom:0">This section is for our illustrious guild leader to add comments. </h2>

  3. #3
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Nice! That worked. Now for the rest. However, I am a little confused as to why I am adding styles to the HTML. I have several pages that are going to require this fix.

  4. #4
    SitePoint Addict
    Join Date
    Feb 2008
    Location
    New Jersey, USA
    Posts
    374
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, I just wanted to point out that it was the margin on your H2 block. But you're right, you'd be a lot better off putting that in your style sheet.

  5. #5
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Well I have been playing with the CSS code and can't figure out how to fix it through the CSS. Hints?

  6. #6
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Ok this is what frustrates me about CSS. I have tested in IE6, IE7, Firefox, Opera, and Safari. The colored scroller in IE6 and IE7 doesn't work in Firefox, Opera, and Safari, At the top of the page where the top border is there is a space in all but IE7. I can't get the bottom space to go away in any of them tweaking the CSS only. The nav section is centered in IE6 and IE7 but it's over to the right with the rest. Gettings PNGs to work in IE6 is almost impossible. I really need to learn to use CSS but at what price? The learning curve is huge and all the browsers are still not close to each other. I don't even want to think what IE8 will do to the page. Could someone with lots of patience walk me through fixing all my problems with the index page. After I get everything to work, I can move on to the rest of the site with ease. Thank you very much.

  7. #7
    SitePoint Addict
    Join Date
    Feb 2008
    Location
    New Jersey, USA
    Posts
    374
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, what you should be doing is coding and testing with Firefox or Opera. Then test the pages in IE6, 7 and Safari. This is because FF and Op follow the W3C's standards more strictly than other browsers, meaning that if it works in FF or Op, your code will be 'correct'.

    Then, test in the other browsers and 9 times out of 10, if something is wrong, it's the browser's fault. Not yours.

    One hack that I find to be very useful is the underscore hack. With this, you'd place an underscore in front of your css, eg: width:100px; _width:105px; and IE6 will read the second one, not other browsers will. That will come in handy for you.

    Of course, you can use IE conditional statements or even your own IE6/7 stylesheets (but I try to avoid doing that).

    One other thing to do is to validate your code and fix any errors:
    http://validator.w3.org/ (html)
    http://jigsaw.w3.org/css-validator/ (css)

    One other thing I would suggest, as far as design goes, is to avoid using those scroll bars in the middle of the page. If your content is unusually long you're better off breaking it up into different pages.

    Anyway, code with FF and/or Op, test with IE6, 7 and Safari. That will reduce the amount of 'errors' dramatically.

    Good luck with everything!

  8. #8
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,182
    Mentioned
    16 Post(s)
    Tagged
    4 Thread(s)
    http://www.sme-s-key.com/atlantica/a...ca_online.html

    Take a look at that and ask if you have any questions. Pay particular attention to how everything has been sliced up.
    The only code I hate more than my own is everyone else's.


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
  •