SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Member
    Join Date
    Mar 2003
    Location
    Stoke on Trent, UK
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Please help with CSS Positioning!

    I have a Module at uni that I have to develop a site for.

    I have to design a site, it can be about anything I want. However, I must use Stylesheet Positioning to control the layout and interface of the site.

    I also at some point have to include Tables, Frames and Image Maps.

    Those 3 items I am fine with but I have not used CSS-P in a long time (through studying different modules at uni I havent even thought about designing a new site in close to 10 months!). I am basically try my best to remember what I learnt before, and play around with tutorials (dont have the monet to get HTML Utopia yet).

    I have attached the site to this thread in a zip file, so you can see where I am and what I could improve on. I really want to make the site look as fluid as possible on al browsers and as cross platform compatible as possible. (Though my lecturer says to focus completely on designing for IE?)

    Thanks in advance.

    Yours,
    Beev

  2. #2
    SitePoint Member
    Join Date
    Mar 2003
    Location
    Stoke on Trent, UK
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I cant seem to find the link for the attachment, so could someone please let me know If the file is uploaded correctly?

    The site is in its very early infancy too. There is alot of work to be done on it.

    Yours,
    Beev

  3. #3
    You talkin to me? Anarchos's Avatar
    Join Date
    Oct 2000
    Location
    Austin, TX
    Posts
    1,438
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, frames and image maps are both sucky old school html elements that pretty much no one uses anymore. You should google around to get some criticisms of them and then convince your instructor to update the course for the 21st century.

    Designing only for IE is a bad idea, particularly because it is easy to design cross-platform websites if you get into the habit of it and do a small amount of research.

    Your file didn't get uploaded, but that's a bad way of showing someone a site. Everyone who wants to look at it has to download it, unzip it, then open it in a browser. You should upload it somewhere instead, if it's just geocities.

    Another thing to keep in mind when taking web design/development classes is that the instructors generally don't keep up to date with the material and often teach sub-par. Just realize that your instructor does not always know the best way to do something.
    ck :: bringing chris to the masses.

  4. #4
    SitePoint Member
    Join Date
    Mar 2003
    Location
    Stoke on Trent, UK
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the info.

    Im gonna install Mozilla and design for that. I know ths CSS support is light years in front of IE. And as you say, with a little research, I can soon find elements that I can apply that work on all browsers, the main ones anyway.

    Thanks again. I think Ive got the file to upload this time. If not I will get some webspace and upload it to there.

    Yours,
    Beev

  5. #5
    SitePoint Member
    Join Date
    Mar 2003
    Location
    Stoke on Trent, UK
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Couldnt get the file to upload so you can view the site's index, logo and stylesheet here:

    http://www.freewebs.com/beev/assignment/index.htm

    Thanks again.

    Yours,
    Beev

  6. #6
    SitePoint Zealot ComputerBob's Avatar
    Join Date
    Jul 2003
    Location
    USA
    Posts
    197
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Anarchos
    ...Another thing to keep in mind when taking web design/development classes is that the instructors generally don't keep up to date with the material and often teach sub-par...
    Off Topic:

    I taught college Web design courses at two different colleges, and my experience with my colleagues was just the opposite. The problems I saw were often caused by the fact that the course textbooks were often out of date by the time they made it to print.
    ComputerBob - Making Geek-Speak Chic™
    http://www.computerbob.com
    - XHTML 1.0 Strict + CSS Layout
    Ratings | Forums | Software | Polls | Weird | Quotes | Weather
    Guest Articles | Free Greeting Cards | CB Awards | Search

  7. #7
    SitePoint Member
    Join Date
    Mar 2003
    Location
    Stoke on Trent, UK
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So, is the layout good? or could I be doing things a better way?

  8. #8
    SitePoint Member
    Join Date
    Mar 2003
    Location
    Stoke on Trent, UK
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just made a few changes. Let me know what you think guys. I havent managed to get a hold of Mozilla yet, but it looks okay in IE 6.

    Yours,
    Beev

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    HI,
    So, is the layout good? or could I be doing things a better way
    The header is fixed left and about 800px wide yet the text below carries on as wide as the screen on wide resolutions. It makes it look like it's half finished. I would think about either making the header center with a slightly different background colour behind to cover the full width or restrict your text to the width of the existing header and centre the whole site on the screen.

    I don't like white text on a black background, I find it hard to read and a bit old fashioned. I would consider placing a lighter color behind the text and having dark text. I realise this might spoil the effect
    but you asked for opinions.

    Regarding the CSS, when you define the font you should offer alternatives and finish with a generic font.

    e.g.
    Code:
     font-family: Arial,sans-serif;
    You have this in your stylesheet "top : 105 px;". There should be no space between the measurement and the unit i.e. 105px. Otherwise Mozilla will interpret it as zero.

    All of your elements have been absolutely placed. While this is ok when you only have a few elements on the page, there is no natural flow in the document and you will find it hard to add more content after the existing content unless you also absoluty place it.

    You could have let the main content be in the natural flow and just give it a margin-left to avoid the navigation. In this way you can place elements underneath the content that will adapt accordingly.

    Hope this is of some use.

    Paul

  10. #10
    SitePoint Member
    Join Date
    Mar 2003
    Location
    Stoke on Trent, UK
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the info. Thats what I was looking for. It is in its very early stages and is far from finished.

    So should I fix the header to relative positioning rather than absolute? This is really my first true attempt at CSS Positioning, so I am more or less learning as I am doing.

    I hope to get the HTML Utopia book in a few weeks but until then I am just working through what tutorials I can find and experimenting with the different colours.

    I get what you mean with the black background with white text. But again, it is just experementation.

    Thanks again, your feedback is greatly appreciated.

    Yours,
    Beev

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    So should I fix the header to relative positioning rather than absolute? This is really my first true attempt at CSS Positioning, so I am more or less learning as I am doing.
    The header doesn't need any positioning at all. It's the first thing on the page and the first thing on your code. Just put it there without using any positioning at all and it will be fine.

    Relative positioning is quite hard to use at is only moves elements from where they are to the new position described. That is they move in relation to themselves and not in relation to anything else.

    However the space that they would normally occupy had they not been moved is preserved. Therefore, other elements on the page will behave as though the element was in its original position. (Relative position is usually used without co-ordinates to gain a stacking context for other elements rather than actually moving the element somewhere else.)

    Paul


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
  •