Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

This is the first website i am making with HTML and CSS. Truly i am learning as I go but I need some questions answered before I write to much incorrect code.

First a a little intro about the design i planned for the site so we are on the same page. This is a content heavy website ment for ALOT of reading and will contain about 52 articles. The design will have a fixed navigation on top. The home page will start off with an introduction and below that will be the gird like collection of article modules that will contain a heading, main quote, and a read more link, below that same concept for videos and then my main fooeter. This is for the home page.

Question #1: How in the world can I get my articles that I have written on my computer to keep the same formatting once inside of my markup, otherwise I have to mark up each of the 52 articles I have written by hand with p tags, strong tags, ect.. and I cant image doing such a thing considering how long the articles are. Is there a better way?

Question #2: I have decided to use percents for layout and ems for fonts and such. I am trying to create some margin space(white space) in between each article module block but I am confused on how to do that because I am using percents and not actual numbers.

Question #3: At this point please review my html and css so far and advise me on any changes to make before my code grows to large.

Finally the code:

HTML:

    <!doctype html>

    <html>
    <head>
<!--[if lt IE 9]>
    <script src="html5shiv/dist/html5shiv.js"></script>
<![endif]-->
<meta charset="UTF-8">
<title>The Sea Of Glass | A Biblical Understanding of Life</title>
<link rel="stylesheet" href="css/reset.css" type="text/css">
    </head>
    <body>
<div class="wrapper">
    <header>
        <h1>The Sea Of Glass, <span class="sub-title">a biblical understanding of        life</span></h1>
        <nav>
            <ul>
                <li><a href="#home-page" class="current-link">Home</a>        </li>
                <li><a href="#articles">Articles</a></li>
                <li><a href="">Videos</a></li>
                <li><a href="">Contact</a></li>
            </ul>
        </nav>
    </header><!-- end header -->

    <div id="main-content-wrapper">

        <div id="modules-wrapper">
            <h3>On God</h3>
            <section class="article-module">
                <h4>Statement of Beliefs</h4>
                <blockquote cite="articles/statements-of-beliefs.html">
                    <p>
                        <em>There is NOTHING that a man can do to open anyone’s mind to truth That is Yah’s job!</em>
                    </p>
                </blockquote>
                <footer class="article-module-footer">
                    <a href="articles/statements-of-beliefs.html">Read More</a>
                </footer>
            </section><!-- end .article-module -->
            <section class="article-module">
                <h4>Article Name</h4>
                <blockquote cite="articles/name">
                    <p>
                        <em>Main Quote Will Go Here</em>
                    </p>
                </blockquote>
                <footer class="article-module-footer">
                    <a href="articles/name">Read More</a>
                </footer>
            </section><!-- end .article-module -->
            <section class="article-module">
                <h4>Article Name</h4>
                <blockquote cite="articles/name">
                    <p>
                        <em>Main Quote Will Go Here</em>
                    </p>
                </blockquote>
                <footer class="article-module-footer">
                    <a href="articles/name">Read More</a>
                </footer>
            </section><!-- end .article-module -->

            <h3>On Man</h3>
            <section class="article-module">
                <h4>Article Name</h4>
                <blockquote cite="articles/name">
                    <p>
                        <em>Main Quote Will Go Here</em>
                    </p>
                </blockquote>
                <footer class="article-module-footer">
                    <a href="articles/name">Read More</a>
                </footer>
            </section><!-- end .article-module -->
            <section class="article-module">
                <h4>Article Name</h4>
                <blockquote cite="articles/name">
                    <p>
                        <em>Main Quote Will Go Here</em>
                    </p>
                </blockquote>
                <footer class="article-module-footer">
                    <a href="articles/name">Read More</a>
                </footer>
            </section><!-- end .article-module -->
            <section class="article-module">
                <h4>Article Name</h4>
                <blockquote cite="articles/name">
                    <p>
                        <em>Main Quote Will Go Here</em>
                    </p>
                </blockquote>
                <footer class="article-module-footer">
                    <a href="articles/name">Read More</a>
                </footer>
            </section><!-- end .article-module -->


            <h3>Consitutional Awareness</h3>
            <section class="article-module">
                <h4>Article Name</h4>
                <blockquote cite="articles/name">
                    <p>
                        <em>Main Quote Will Go Here</em>
                    </p>
                </blockquote>
                <footer class="article-module-footer">
                    <a href="articles/name">Read More</a>
                </footer>
            </section><!-- end .article-module -->
            <section class="article-module">
                <h4>Article Name</h4>
                <blockquote cite="articles/name">
                    <p>
                        <em>Main Quote Will Go Here</em>
                    </p>
                </blockquote>
                <footer class="article-module-footer">
                    <a href="articles/name">Read More</a>
                </footer>
            </section><!-- end .article-module -->
            <section class="article-module">
                <h4>Article Name</h4>
                <blockquote cite="articles/name">
                    <p>
                        <em>Main Quote Will Go Here</em>
                    </p>
                </blockquote>
                <footer class="article-module-footer">
                    <a href="articles/name">Read More</a>
                </footer>
            </section><!-- end .article-module -->

            <h3>Videos</h3>
            <section class="video-module">
                <h4>Name of video</h4>
                <p>My embeded video will go here</p>
            </section><!-- end .video-module -->
            <section class="video-module">
                <h4>Name of video</h4>
                <p>My embeded video will go here</p>
            </section><!-- end .video-module -->
            <section class="video-module">
                <h4>Name of video</h4>
                <p>My embeded video will go here</p>
            </section><!-- end .video-module -->
        </div><!-- end #modules-wrapper -->
        <footer class="main-footer">
            Here lies the footer of the website
        </footer>
    </div><!-- end #main-content-wrapper -->
</div><!-- end .wrapper -->
    </body>
    </html>

All my css is in reset.css right now:

     /* http://meyerweb.com/eric/tools/css/reset/ 

v2.0 | 20110126 License: none (public domain) */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; }

    /********************************* end of css reset ***************************************/

    .wrapper {
width: 90%;
margin: 0 auto;
margin-top: 2em;
background-color: #c3c3c3;
font: 100% Arial, 'Helvetica Neue', 'Lucida Grande', sans-serif; /* 16px base */
    }   
    header {
position: fixed;
top: 0;
left: 0;
width: 100%; 
background-color: red;
    }
    header h1 { 
float: left;
font-size: 1.5em;
margin-top: 8px;
padding-left: 1em;
    }
    header h1, header li { border: 1px solid black; }
    nav { 
float: right;
    }
    nav li {
padding: 1em;
margin: auto inherit;
    }
    nav li {
display: inline-block;
    }
    #main-content-wrapper {
margin-top: 3.5em;  
    }
    .intro {
background-color: blue;
width: 80%;
padding: 1em;
line-height: 1.5em;
margin: 0 auto;
    }

    h3 {
clear: left;
text-align: center;
    }

    #modules-wrapper {
background-color: green;
width: 100%;
    }

    .article-module {
float: left;
width: 33.3333333333%;
margin: ;
background-color: black;
color: white;

    }
share|improve this question

closed as off-topic by dan Apr 25 at 21:30

  • This question does not appear to be about webmastering within the scope defined in the help center.
If this question can be reworded to fit the rules in the help center, please edit the question.

    
Microsoft word can give you html of the formatted text –  Rana Prathap Apr 25 at 7:24
    
Unfortunately, questions that ask for code review and programming are considered off-topic here, and should also only contain one specific question. –  dan Apr 25 at 21:30

2 Answers 2

Q1.) For your 52 articles that you have written, you can just link a PDF copy of the article and be done with it. This can cause design and compatibility issues for mobile devices and I would not recommend it though. There might be a better way but I would just bite the bullet and do the coding. Once the first article is done, the rest will be using that as a template and go by much faster.

Q2.) As for your questions regarding sizing, you will just need to do a little bit of research. You can use percent values as the margins. There are also plenty of guides to design and spacing. http://www.adamkaplan.me/grid/ this is a pretty good tutorial into responsive design techniques that I found a couple days ago.

Q3.) If you have a problem with a specific piece of code, post it and someone will take a look at it. Asking someone to review a whole page without any notes can be difficult. Just keep coding and the more you code, the more you will find small mistakes that you can fix. Its tedious but part of the process.

share|improve this answer

http://word2cleanhtml.com Here is a site that will convert your articles into html from the word documents. I haven't tested it extensively, but it did well in the small tests that I did. That should save you some time on that front.

share|improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.