/    Sign up×
Community /Pin to ProfileBookmark

Coding process needs review (help)

Copy linkTweet thisAlerts:
Nov 12.2008

Hi all,

I would like some help with my current coding practice.

It seems laborious and I could use some new ideas to make my coding more efficient.

This is my current process to to position something with css:

[LIST]

  • [*]

    change the css


  • [*]

    preview in browser (oops, a little off center)


  • [*]

    go back and change again


  • [*]

    preview in browser (oops, a little too far to the left)


  • [*]

    go back and change again


  • [*]

    preview in browser (a fraction to far to the right)


  • [*]

    go back change again


  • [*]

    preview in browser (damn it, that is close enough)


    • [/LIST]

    And so on, and this is just to move box somewhere…(not even
    considering viewing in another browser!!!)

    Can anyone give me advice on how they code?

    Do you sit down and map out the code in your head before you start?

    Any tips will be appreciated.
    Regards
    Alf…

    to post a comment
    CSS

    3 Comments(s) ↴

    Copy linkTweet thisAlerts:
    @cbVisionNov 14.2008 — For positioning things absolutely, I follow these steps:

  • - Design site/page in Adobe Photoshop

  • - Use the gridlines to set the top left point of what i want positioned absolutely

  • - Use the marquee tool to get the position of that point (top, left)

  • - Use CSS to set the top and left position by pixel


    • If you are simply editing existing pages trying to position something in a different spot, you could always try to download a program that allows real time editing/viewing. You can view the page while you code, it changes while you type. I think there's a program called NVU that does this.
    Copy linkTweet thisAlerts:
    @aj_nscNov 14.2008 — Here's a tip, don't create a page which has everything positioned absolutely, unless you really know what you're doing, chances are it will break.

    As for mapping out the code in my head before I start, here's the trick to it:

    Decide what parts there are on your page (examples: header, left navigation menu, content area, footer, etc).

    Then, without touching CSS, create an (X)HTML document that has those parts defined in it that looks like this:

    <i>
    </i>...DOCTYPE and header tags....
    &lt;body&gt;
    &lt;div id="header"&gt;&lt;/div&gt;
    &lt;div id="navigation"&gt;&lt;/div&gt;
    &lt;div id="content"&gt;&lt;/div&gt;
    &lt;div id="footer"&gt;&lt;/div&gt;
    &lt;/body&gt;
    &lt;/html&gt;


    Don't have anything else in the document, just the absolutely necessary elements that make up your page.

    Then, create a stylesheet with the rules for just those elements (give them a height and width if you need to to pretend they're filled up with content).

    Once the blocks look okay in all web browsers that you are aiming for them to look okay in, then go further, add content, images, etc.

    This is how to my idea on how to properly layout the framework for a page using (X)HTML/CSS
    Copy linkTweet thisAlerts:
    @CSPOauthorJan 14.2009 — Hi,

    Thanks for the tip of starting from nothing and building up.

    I used a similar technique the other day to isolate and solve a problem.

    I began deleting bits of CSS until the error went away. (I had backed up the original of course...)

    Once I had identified this piece of css, i was able to concentrate on that piece.

    I had the problem solved in seconds after this...

    Any body else have any further advice?

    Cheers

    ALF.
    ×

    Success!

    Help @CSPO spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 6.16,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @nearjob,
    tipped: article
    amount: 1000 SATS,

    tipper: @meenaratha,
    tipped: article
    amount: 1000 SATS,

    tipper: @meenaratha,
    tipped: article
    amount: 1000 SATS,
    )...