Results 1 to 7 of 7

Thread: [RESOLVED] Using CSS with HTML to anchor content

  1. #1

    Thread Starter
    Lively Member
    Join Date
    Sep 2008
    Location
    Scotland
    Posts
    68

    Resolved [RESOLVED] Using CSS with HTML to anchor content

    Hi all

    I've been asked to design and build a website for someone and provide proposals for hosting solutions.

    I want to build the site almost exclusively in HTML, using CSS to standardise formatting where at all possible - the hosting company I'm looking at charges more for Windows-based hosting, so I'm keen to avoid that for the moment.

    My client knows roughly what she wants but is looking to me to provide suggestions on styling. My thinking at the moment is that her logo would go in the top-left corner, with some text next to it. There would then be a menu bar containing six (at the moment) navigation buttons.

    My questions are this:

    1. Is it possible to use CSS to place a table object at the bottom of the screen, anchored to the bottom of the visible screen area?
    2. Is there any way to hard-code the text that will appear next to the logo into the cuss, or do I need to turn the text into a graphic?
    3. The main text on each page would be positioned between the bottom of the logo and the top of the menu bar. If the logo and menu bar are anchored to top and bottom respectively, is it possible to have the text area display a vertical scroll bar if necessary?

  2. #2
    Smooth Moperator techgnome's Avatar
    Join Date
    May 2002
    Posts
    34,531

    Re: Using CSS with HTML to anchor content

    1) Don't use a table... using tables for design went out of favor over a decade ago... the preferred method is using CSS and div tags. It's actually easier with div & CSS. Tables should be used for tabular data, not layouts.

    2) It would either need to be part of the HTML or a graphic... it wouldn't be part of the CSS... which route you go depends.

    3) Yes... but why not just make the page scrollable?


    I've done this before... what I do is look at other sites, find ones that I like, look at the competition, or sites of companies/organizations that are in the same industry and see what they are doing ... then incorporate the best of what you find into a new prototype design and see what the client thinks.

    Also look at the Open Source Web Design site ... it may have a template that you can get started with. It's usually my go-to place to get ideas.

    -tg
    * I don't respond to private (PM) requests for help. It's not conducive to the general learning of others.*
    * I also don't respond to friend requests. Save a few bits and don't bother. I'll just end up rejecting anyways.*
    * How to get EFFECTIVE help: The Hitchhiker's Guide to Getting Help at VBF - Removing eels from your hovercraft *
    * How to Use Parameters * Create Disconnected ADO Recordset Clones * Set your VB6 ActiveX Compatibility * Get rid of those pesky VB Line Numbers * I swear I saved my data, where'd it run off to??? *

  3. #3

    Thread Starter
    Lively Member
    Join Date
    Sep 2008
    Location
    Scotland
    Posts
    68

    Re: Using CSS with HTML to anchor content

    Hi Techgnome

    1. I've been told about not using tables before, but nobody's ever taken the time to explain what the alternatives are. Am I right in assuming that I can use the CSS to anchor a set of div tags to the bottom of the visible area?
    2. I thought as much - everything I've read suggested that I could define an area in CSS, but not the text content that I wanted to use to fill that area;
    3. To be perfectly honest, I hate scroll bars. There's nothing annoys me more than a website where I have to scroll up and down to view a full page's contents. It's one thing to have to do it when the site is something like eBay where there's a wide range of different products for sale, but this site isn't that type of site and therefore I'm hoping to be able to avoid scrollbars completely;

    Thanks TG

    Ian

  4. #4
    Smooth Moperator techgnome's Avatar
    Join Date
    May 2002
    Posts
    34,531

    Re: Using CSS with HTML to anchor content

    3) So if the content isn't enough to fill a page... there is no problem. If the content it too big to fit on a page... you pretty much have no choice. Think about this site... I had to scroll to get down to the bottom here... presumably so did you.

    2) Remember CSS = Cascading Style Sheet ... it's all about the layout and the look and feel... not the content.

    1) The short of it is that layered tags (usually div and sometimes a smattering of span) are the preferred. It has to with semantics and how search engines work. When you use a table, that means your header and menu often end up as the first thing a search engine finds when it grabs a copy of hte page... your content gets lost. With div/css layouts, you can actually put your content first (or closer to the front) and tag it (with IDs, style Class, etc) to give it contextual meaning (mainBody, Content, Article, things like that) and then have it placed just about anywhere you want... then you can define menu, header and footer content, and "drop" those where you want. It's not quite that simple, because you have to deal with how different browsers react to the same CSS, but that's it in a nutshell.

    Typically, I define the header div, keeping it minimal in text (mostly it's an image and minor site/page information) ... then I have the mainBody div, which then contains (one or more) Article div tag float to the right, a clearing div tag, then a Navigation div tag floated to the left (the clearing tag allows the navigation to then appear next to the content on the left rather than below and to the left), after all that comes the Footer div.

    -tg
    * I don't respond to private (PM) requests for help. It's not conducive to the general learning of others.*
    * I also don't respond to friend requests. Save a few bits and don't bother. I'll just end up rejecting anyways.*
    * How to get EFFECTIVE help: The Hitchhiker's Guide to Getting Help at VBF - Removing eels from your hovercraft *
    * How to Use Parameters * Create Disconnected ADO Recordset Clones * Set your VB6 ActiveX Compatibility * Get rid of those pesky VB Line Numbers * I swear I saved my data, where'd it run off to??? *

  5. #5

    Thread Starter
    Lively Member
    Join Date
    Sep 2008
    Location
    Scotland
    Posts
    68

    Re: Using CSS with HTML to anchor content

    1. Yeah, that's fair comment. It's something I need to play around with to get the desired effect;
    2. I had a funny feeling that would be the case, but I thought I'd ask the question in case things had moved on since the last time I really investigated CSS;
    3. I don't know what it is, but I hate having to scroll up and down screens. I'm not so bothered when it's a site such as this one where I know that the information I might be looking for is a good bit down the page. My concern is that the site I'm building for my client is to advertise her business, so I'm keen to ensure that as much information as possible is visible without the visitor having to scroll down quite a lot;

    On that subject, what's the current best-practice in terms of inline iFrames? That way, the iFrame content could be scrollable while the master page isn't.

  6. #6
    Smooth Moperator techgnome's Avatar
    Join Date
    May 2002
    Posts
    34,531

    Re: Using CSS with HTML to anchor content

    Honestly, I think iFrames have fallen out of favor, especially with CSS... if you have a defined area where the content goes, you can set the overflow=auto and it will produce scroll bars when the content overflows that area, leaving the rest intact... so if your Article div tag has overflow=auto ... when the content it too long, it will add scroll bars and you can scroll just that div tag... so the menu, header and footer remain in place. It's also possible to float the header & footer such that they are over the page, so as it scrolls, they stay in place... I see this a lot with ads. Personally I don't think it's a clean design though.

    One thing I should point out - not wanting to scroll is your personal choice. Try to be objective if you can. I'd venture a guess that most people don't mind scrolling and/or come to expect it.

    However... if you're looking to promote a business... be very careful how you design it... 10 years ago it was simple... now everyone searches for a business online using their phone...

    Might want to take a read through this - http://www.techrepublic.com/blog/web...ve-web-design/

    A lot of people like the Responsive design... I'm not a huge fan of it especially as I scroll about. But it's extraordinarily popular, and I do have to admit, it is clean and professional looking.

    It also probably depends on what kind of business you're promoting.

    -tg
    * I don't respond to private (PM) requests for help. It's not conducive to the general learning of others.*
    * I also don't respond to friend requests. Save a few bits and don't bother. I'll just end up rejecting anyways.*
    * How to get EFFECTIVE help: The Hitchhiker's Guide to Getting Help at VBF - Removing eels from your hovercraft *
    * How to Use Parameters * Create Disconnected ADO Recordset Clones * Set your VB6 ActiveX Compatibility * Get rid of those pesky VB Line Numbers * I swear I saved my data, where'd it run off to??? *

  7. #7

    Thread Starter
    Lively Member
    Join Date
    Sep 2008
    Location
    Scotland
    Posts
    68

    Re: Using CSS with HTML to anchor content

    Hi TG

    Thanks very much for your valuable feedback on my query. Regarding iFrames, I'm not massively unhappy that these are no longer in favour because if I'm honest they can be quite fiddly to work with. That said, the last time I did any large amount of work with iFrames I was also using Classic ASP which probably made things a whole lot worse!

    I've more or less decided that the approach I'm going to recommend to my client, which is that we have her logo placed in the top left-hand corner of the site, with a menu bar running vertically down the left hand-side. The facility to scroll up and down will be available but the logo and menu bar will be fixed so that no matter how much information each page displays and how much scrolling the user does, the logo and menu remain visible at all times.

    Incidentally, the business I'm promoting is a person-centered counselling service so I'm having to try and strike a balance between professional and approachable.

    Thanks again.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width