SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 29
  1. #1
    SitePoint Addict
    Join Date
    Jul 2002
    Location
    USA
    Posts
    351
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question CSS Newbie. Please help with layout.

    This is my first attempt at a whole page layout in css. I used a template to guide me through and learn how to layout my own photoshop file and learn css at the same time. I still have a few questions about the css itself though. Here is the HTML, CSS, and my Mock up:

    http://www.lnwwebdesign.com/template.html
    http://www.lnwwebdesign.com/css/layout.css
    http://www.lnwwebdesign.com/PHPportf.jpg

    1. How do I move the layout all the way to the top?

    2. For some reason there is a gap between the header and the body layout.
    I cannot figure out how to move the body image up. How can I do that?

    3. How can I make the footer look like it is a part of the body image? You can
    tell that it is a separate image.

  2. #2
    SitePoint Addict
    Join Date
    Jul 2002
    Location
    USA
    Posts
    351
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If there is a reason that I am not getting any replies to this thread, can someone let me know. I really need the help. If I asked the wrong questions, let me know. If more information is needed, let me know that too.

  3. #3
    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 s_spice113
    1. How do I move the layout all the way to the top?
    Remove top:58px from div#pagehead.

    Quote Originally Posted by s_spice113
    2. For some reason there is a gap between the header and the body layout.
    I cannot figure out how to move the body image up. How can I do that?
    Remove top:58px from div#content.

    Quote Originally Posted by s_spice113
    3. How can I make the footer look like it is a part of the body image? You can
    tell that it is a separate image.
    Remove top:58px from div#foot.

    Can you see the pattern here?
    Birnam wood is come to Dunsinane

  4. #4
    SitePoint Evangelist
    Join Date
    Jul 2004
    Location
    England
    Posts
    588
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Lisa... constructively...

    For starters...

    Validate html and css.
    Simplify your code to exclude stuff you don't really understand.
    Isolate the various elements and run tests to ensure they perform as they should. Then combine them within a progressively-building page.

    This will minimise the likelihood of errors and help you understand where things are breaking.

  5. #5
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The DOM Inspector in Mozilla and Firefox is also very useful for troubleshooting this type of problems.
    Birnam wood is come to Dunsinane

  6. #6
    SitePoint Addict
    Join Date
    Jul 2002
    Location
    USA
    Posts
    351
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you everyone for the replies. I really appreciate it. I was going bonkers trying to figure why it wasn't working correctly. Then with no replies, I was getting worried I would never figure it out.

    AutisticCuckoo. I will take them out. Yes I see the pattern. I don't have Firefox or Mozilla, but maybe I should get them. Thanks for the heads up.

    qulliver: Thanks for the constructive advise. I hadn't thought of doing it that way. If I understand you I should take each piece and put it into a separate css and try it out? Then piece the puzzle back together?

  7. #7
    SitePoint Evangelist
    Join Date
    Jul 2004
    Location
    England
    Posts
    588
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    >Thanks for the constructive advise.

    I mean well - even though I scowl a bit. I see so many who just want code without being interested in the source of the problem... and doing without understanding helps no one. ;-)

    >If I understand you I should take each piece and put it into a separate css and try it out? Then piece the puzzle back together?

    Absolutely. Css can easily get messed up - elements can react in unwanted and at times unpredictable ways. If you get individual elements working fine in isolation then at least you know that bit's fine. If things then get screwed when combined, you'll have found the point at which things went wrong and know that the elements have conflicting issues and hence be better placed to find a fix.

  8. #8
    SitePoint Addict
    Join Date
    Jul 2002
    Location
    USA
    Posts
    351
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by gulliver
    >Thanks for the constructive advise.

    I mean well - even though I scowl a bit. I see so many who just want code without being interested in the source of the problem... and doing without understanding helps no one. ;-)
    I didn't just want the code. I used the template to get a better understanding of how to work my layout into Css. For me, it was very hard to understand how to begin. I had a layout that would be easy to slice and dice and put into tables, but I had no examples of how to put it into a css layout. The template was similar to what I wanted to do. So I figured that I could disect it and learn from it. Use books to figure out the code used as I went along. It worked I do have a better understanding. I can read through the css code and it doesn't all look like gibberish. Everybody uses different ways to learn. This is one of mine.

  9. #9
    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 s_spice113
    I don't have Firefox or Mozilla, but maybe I should get them.
    Download Firefox from mozilla.org (and make sure to check the DOM Inspector box when installing). Use Firefox while you're developing your site. Opera is at the same level, approximately, but it has some really annoying CSS bugs.

    Once it looks OK in a good browser you can check it out in IE. It will probably look like a road accident, but don't worry. A few corrections targeted to IE will sort out most problems.

    If you test in IE while developing, you'll have more problems fixing the design for compliant browsers than if you do it the right way first.

    (OK, I'm just assuming you're running IE/Win. For all I know, you could be using Safari on a Mac. In that case you can forget most of what I just said ... except that the DOM Inspector is really useful. )
    Birnam wood is come to Dunsinane

  10. #10
    SitePoint Addict
    Join Date
    Jul 2002
    Location
    USA
    Posts
    351
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo
    (OK, I'm just assuming you're running IE/Win. For all I know, you could be using Safari on a Mac. In that case you can forget most of what I just said ... except that the DOM Inspector is really useful. )
    Thanks again for the info and links. You are assuming correctly. I appreciate the help.

  11. #11
    SitePoint Addict
    Join Date
    Jul 2002
    Location
    USA
    Posts
    351
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    LOL. Oops. I have learned something new already. It is Mozilla Firefox not Firefox and Mozilla. It's a good thing I didn't try to act like I new anything about them.

  12. #12
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There is Mozilla (a.k.a. Mozilla Suite) and there is Mozilla Firefox. These are two separate browsers, both built around the Gecko rendering engine, both out of the Mozilla Project.

    Mozilla Suite is – sadly – being discontinued. The Mozilla Project is focusing all their future browser efforts on Firefox. I personally prefer Mozilla Suite (which also contains an email client, and IRC client, and an HTML editor), but far more people use Firefox.
    Birnam wood is come to Dunsinane

  13. #13
    SitePoint Addict
    Join Date
    Jul 2002
    Location
    USA
    Posts
    351
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the info AutisticCuckoo. I removed the 58px from the Content, Pagehead and Foot. It only worked on the Pagehead. Do you have any other ideas?

  14. #14
    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 hard to say. When I look at the page you linked to in your first post, that top:58px is still present (layout.css, line 47) for all three IDs.
    Birnam wood is come to Dunsinane

  15. #15
    SitePoint Addict
    Join Date
    Jul 2002
    Location
    USA
    Posts
    351
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay, I changed the link:
    http://www.lnwwebdesign.com/template.html
    http://www.lnwwebdesign.com/css/layout.css
    http://www.lnwwebdesign.com/PHPportf.jpg

    I figured out the problem with the header and footer. I still have the problem with the content container though. I tried it in it's own css file and it works fine. The top: 0px takes it the top.

    Any ideas?

  16. #16
    SitePoint Addict
    Join Date
    Jul 2002
    Location
    USA
    Posts
    351
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo
    Download Firefox from mozilla.org (and make sure to check the DOM Inspector box when installing). Use Firefox while you're developing your site. Opera is at the same level, approximately, but it has some really annoying CSS bugs.
    I downloaded Mozilla, but an option for the DOM Inspector wasn't offered during installation. Is there another way to turn it on?

  17. #17
    SitePoint Addict
    Join Date
    Jul 2002
    Location
    USA
    Posts
    351
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh I think I figured it out. I needed to do the custom install. I checked the Developer Inspector. Is that the same thing?

  18. #18
    SitePoint Addict
    Join Date
    Jul 2002
    Location
    USA
    Posts
    351
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I figured out the issue with the contentContainer. It was the height of the header. I had never changed it. Thanks for the heads up on Firefox. It is great. It helped me to see the pagehead DIV was bigger than my image. Cool.

  19. #19
    SitePoint Addict
    Join Date
    Jul 2002
    Location
    USA
    Posts
    351
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo
    Download Firefox from mozilla.org (and make sure to check the DOM Inspector box when installing). Use Firefox while you're developing your site. Opera is at the same level, approximately, but it has some really annoying CSS bugs.
    I got it working in Firefox. Opera looks pretty good. I just don't know how to fix the contentBackground2 DIV. It is slightly shifted. How do I fix it without messing up how it looks in Foxfire.

    Once it looks OK in a good browser you can check it out in IE. It will probably look like a road accident, but don't worry. A few corrections targeted to IE will sort out most problems.
    Can you direct me to where I can find this information?

    The DOM Inspector is really useful. )
    How do you use it? I saw that you can add a red border around each DIV, but what else does it do?

  20. #20
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    See this thread for tips on how to use the DOM Inspector.

    Opera does have a few annoying CSS bugs, and they are tricky to cater for since Opera has good support for CSS selectors (which means there aren't any good hacks for it).
    Birnam wood is come to Dunsinane

  21. #21
    SitePoint Addict
    Join Date
    Jul 2002
    Location
    USA
    Posts
    351
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So what do you suggest that I do about view in Opera?

    Where can I find tips to fix the view in IE? I read through the FAQs here? I didn't find the answer there. Unless my problem is a float problem. I did see something that sounded sort of like what was happening. What is a float? Could that be my problem? Do you have a suggestion of how to fix the IE issue? My content is being pushed out of place and my content background is also shifted.

  22. #22
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you've encountered an Opera bug it's not much you can do about it but complain to Opera.

    A good resource for IE bugs and fixes is Position Is Everything.
    Birnam wood is come to Dunsinane

  23. #23
    SitePoint Member
    Join Date
    Mar 2005
    Location
    Maidstone, Kent. UK
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    css help

    Hi, I just thought I'd mention a book that's helped me a huge amount with regard to CSS, and in an easy to understand way. It's 'The CSS Anthology - 101 Essential Tips, Tricks & Hacks' by Rachel Andrew. It's a Sitepoint book. I luckily stumbled across this when I started learning CSS and I can't recommend it enough.

    Darren H

  24. #24
    SitePoint Addict
    Join Date
    Jul 2002
    Location
    USA
    Posts
    351
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    AutisticCuckoo: Thanks so much for helping me so much with this. I appreciate the quick and helpful responses. I have learned so much already. I will look at the link you listed.

    DarrenH: I have looked into getting the 'The CSS Anthology - 101 Essential Tips, Tricks & Hacks'. It does look interesting. I am going to purchase it. Thanks for the recommendation. I think that it will be a great investment now that I know a little about CSS. I didn't want to buy the book until I figured out what the merits were in the language and whether I would be able to use it.

  25. #25
    SitePoint Member
    Join Date
    Mar 2005
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I may also purchase the book. Let me know if it is really worth it. I have bought a couple of programming books that were outdated the minute I took them off the shelf. All they ended up being good for was learning syntax.
    My project - M.M.O.V.I.E.


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
  •