Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14

Thread: HTML to CSS

  1. #1
    New to the CF scene
    Join Date
    Feb 2008
    Location
    Mumbai, India
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    HTML to CSS

    Hi friends
    can anybody advice me about how to convert whole html web page to CSS.
    I can create html layout but Is there any way or tool which is useful to convert html to whole CSS withourt any table tag.

    Thanks in advance

  • #2
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Friend, I think that you mis-understand. HTML is not converted to css. Css merely removes the design of the page to a "style sheet" and leaves html to carry the content.
    People have used tables and invisible gif's to manipulate the design. This has meant that in a large website, all the pages have had to be individually changed if an overall outline was to be altered. Using css, the css page alone needs altering. One page instead of many.

    As to your question, the answer is very wide ranging so, not trying to self-promote, My "Sources" program contains very many links to useful sites.

    http://exitfegs.co.uk/Sources.html

    This one may prove particularly interesting.

    http://www.hotdesign.com/seybold/

    Frank
    Last edited by effpeetee; 02-13-2008 at 11:27 AM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #3
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,676
    Thanks
    6
    Thanked 1,008 Times in 981 Posts
    Quote Originally Posted by effpeetee View Post
    Friend, I think that you mis-understand. HTML is not converted to css. Css merely removes the design of the page to a "style sheet" and leaves html to carry the content.
    People have used tables and invisible gif's to manipulate the design. This has meant that in a large website, all the pages have had to be individually changed if an overall outline was to be altered. Using css, the css page alone needs altering. One page instead of many.
    […]
    Very good reply, Frank. I see you’re making progress.

  • #4
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Very good reply, Frank. I see you’re making progress.
    With (among others) your valuable help.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #5
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    I recently went throught this exercise. But first let's make sure we are starting from the basics.

    HTML is a way of providing information while CSS is a way of presenting it. They are and do two different things. You probably used tables to divide the information on your screen and put it in specific places. IOW, you are using a table for presentation of information. At least I was.

    So then I decided to "convert" the page to CSS, that is, replace the presentation by table with presentation by CSS. When I did this, some pages got smaller and some got larger.

    The way I did it was to use Textpad (at work) and Dreamweaver (at home) to do global search and replace operations. I considered <tr> as a <div> with specific classes (as it repeats and therefore "id" wasn't appropriate) such as margins and padding. As my table was consistent most of the time, it wasn't too hard to replace following </div> tag as the table had following tags.

    Then I manually removed the rest of the stuff that wasn't needed and the page was 90&#37; converted.

  • #6
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    Quote Originally Posted by jerry62704 View Post
    ...way I did it was to use Textpad (at work) and Dreamweaver (at home) to do global search and replace operations. I considered <tr> as a <div> with specific classes (as it repeats and therefore "id" wasn't appropriate) such as margins and padding. As my table was consistent most of the time, it wasn't too hard to replace following </div> tag as the table had following tags...
    And then you went and looked up semantics in order to clean up all those divs that shouldn't be there, when tags exist to complement the content within, didn't you!?
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #7
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    What <div> tags were not needed? How are you using "semantics" differently than I am?

  • #8
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    It's called Divitis.

  • #9
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    Interesting read. As I'm always willing to learn and as I'm not an expert in CSS, can you take a glance at my page and see if it can be improved?

    There are known issues such as the back ground image only going half way down the page and I had to pull the footer as it was showing up half way up the page (perhaps related).

    Basically, I converted a page that had a lot of images centered on the page. I don't want them horizonal at all.

    It can be found at: www.democratsforum.com/O_Bush_Poll1.php

    [edit - this page has many more divs and may illustrate bad code better]

    In reading the article (yes, I do read these things ), I perhaps could eliminate the "contentContainer" and put that in the pageContainer. Further, If I make that a "position:relative" it might take care of the footer (position:absolute; bottom:0; I would guess) showing up in the middle of the page.
    Last edited by jerry62704; 02-13-2008 at 09:49 PM.

  • #10
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Oh dear.

    You see the numbers and tables the page? Where do they belong? Yes, in a table.

    tables aren't the malevolent evil things we've come to know one their own; it's just that people misuse them. Legit tables are still needed, as that's what the table element is for: tabular content.

  • #11
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,676
    Thanks
    6
    Thanked 1,008 Times in 981 Posts
    Haha! That reminds me of that thread at the Geek News and Humor forum.

  • #12
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    I'm coming to agree that not all tables are bad. I wanted to learn CSS better so I went to the effort just to force myself to learn it in a real world situation.

    At work, I'm looking at a page that has tables and I think I had best leave it as a table. CSS has a problem with containing horizonal cells that tables don't have.

  • #13
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,854
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Quote Originally Posted by jerry62704 View Post
    At work, I'm looking at a page that has tables and I think I had best leave it as a table. CSS has a problem with containing horizonal cells that tables don't have.
    Not really. You have to use tables, only if you are going to display tabular data. If you are going to make a layout/structure to your document, you've to use CSS to position different elements. All layouts are possible with CSS and this will simplify your work.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #14
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    The table had four cells. If you enlarge the text, the entire row is adjusted. With CSS, if you enlarge the text in a container, the other ones are not enlarged so you start getting loopy spacing.

    the format would be something like:

    text1 text1 text1 number1 text2 text2 text2 number2
    text3 text3 text3 number3 text4 text4 text4 number4
    text5 text5 text5 number5 text6 text6 text6 number6

    I do have to see if the divs are cleared...
    Last edited by jerry62704; 02-14-2008 at 07:00 PM.


  •  

    Posting Permissions

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