• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.
    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

My First Project- Skyrim Game Manual (Player Edition)

Krygore

Coder
Hello! I am just starting my own project, primarily to see what I can do and how I can apply it as I learn it, but also because my wife and I are HUGE Skyrim fans! She has multiple notebooks with handwritten notes on where to find special and unique items, locations for hard quests and resources, etc. So I wanted to apply it to a webpage format. I'll post my progress as I go.

Here is what I have after 2 days (about 4-6 hours invested):

skyrim_index.html:
<!DOCTYPE html>
<html>
                                <!--Head Start-->
    <head>
        <title>Skyrim Gamer's Manual</title>
        <meta name="description" content="Skyrim Gamer's Guide">
        <meta name="keywords" content="Skyrim, gamer, guide, gaming, Elder Scrolls">
        <link rel="stylesheet" href="skyrim_stylesheet.css">
   </head>
                                <!--Head End-->

                                <!--Body Start-->
    <body>
                <!--Header Start-->
        <header id="skyrim-index-header">
            <div class="container">
                <div class="centered"><h1>Skyrim Gamer's Guide</h1></div>
                <img src="images/index_header_background.jpg" alt="index_header_background.jpg" width="100%">
                
            </div>

            <hr style="height:10px;color:black;background-color:black">
        </header>
                <!--Header End-->

                            <!--Welcoming Statement-->
        <article>
                <!--Section 1-->
             <section id="index-section-1">
                <h3>Hello, and welcome to the Skyrim Gamer's Guide!</h3>
                <p>This is <em>NOT</em> an official Bethesda or professional gamer's page! This is a page made by my wife and I, who happen to be avid Skyrim lovers!</p>
                <p>We created this page with the intention of spreading knowledge about Skyrim and all of it's inhabitants from our perspective! We will be sharing everything from usable NPC followers to unique items and where to find them!</p>
                <p>Any and all information in this page was either found on the web or through personal gameplay. Gameplay experiences may differ depending on gaming system and bugs affecting your current game. (Bugs are very common in Skyrim and may result in the inability to complete a quest or use an item)</p>
            </section>

                <!--Section 2-->
            <section>
                <h3>Table of Contents</h3>
                <table id="table-of-contents">
                    <tr>
                        <td><a href="a_new_beginning.html" target="_blank">A New Beginning</a></td>
                    </tr>
                </table>
            </section>
        </article>
        <hr style="height:10px;color:ivory;background-color:black">
        <footer>
            <p><small><em>Information may not be up to date depending on player's game version.
                <br>
            Copyright &copy, 2021</em></small></p>
        </footer>
    </body>
</html>
a_new_beginning.html:
<!DOCTYPE html>
<html>
                                    <!--Head Start-->
<head>
    <title>A New Beginning</title>
    <link rel="stylesheet" href="skyrim_stylesheet.css">
</head>

                                    <!--Body Start-->
<body>
<header>
    <div class="container">
        <img src="images/a_new_beginning_header.jpg"alt="a_new_beginning_header.jpg"width="100%"height="150%">
        <div class="centered2:"><h1>A New Beginning</h1></div>
    </div>
    <hr style="height:10px;color:black;background-color:ivory">
</header>
<article>
    <section>
        <h3>Who Are You?</h3>
        
        <p>Starting out you are <strong>forced</strong> to watch the beginning credits,where you are bound in ropes in the back of a horse drawn cart. Three other NPC's are with you, a horse theif from Rorikstead, Ralof of Riverwood, and Ulfric Stormcloak, self-proclaimed high-king of Skyrim.</p>
        
        <p>There will be brief dialogue as you make your way down the path to the executioners block. Once there, you will exit the cart and wait for your name to be called from the list. When the officer asks, "Who are you?" you will begin the character creation window.</p>
    </section>
    <br>
    <section>
        <aside><img src="images/who_are_you.jpg"height="200px"></aside>
    </section>
</article>
</html>
skyrim_stylesheet.css:
/*Standard Styling*/

/*Header*/
header{
    color:goldenrod;
    text-align: center;
    text-decoration: greenyellow;
    font-family: cursive;
    font-size:20pt;
    text-shadow: 5px 2px 4px white;
    background-color:black;
    padding:5px
}

/*Headings*/
h1,h3{
    text-align: center;
}
h3{
    color:goldenrod;
    text-shadow:5px 2px 4px orangered
}

/*Body*/
body{
    background-color:rgb(77,77,77);
    color:ivory;
    text-align:left;
    word-wrap: normal;
    border: 5px rgb(44,44,44);
    font-family:cursive;
}

/*Paragraphs*/
p{
    text-indent:40px;
}

/*Footer*/
footer{
    text-indent:0px;
    text-align:center;
    color:black;
}

/*Specialty Styling*/

/*Index Page*/
#index-section-1{
    
}
#table-of-contents{
    color:rgb(216, 189, 35)
}
.container{
    position:relative;
    text-align:center;
    color:goldenrod;
}
/* Centered text */
.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }



[/CODAny and all advice and feedback is welcome!E]
 

Krygore

Coder
skyrimindex_progress_screenshot.jpganewbeginning_progress_screenshot.jpg
Better? :laugh:
I'm currently trying to figure out how to align the large image in "A New Beginning" to the right and have the text to the left of it. And obviously make it smaller!
 

LTomy

Active Coder
Staff Team
Guardian
Looks great!

You should look into the CSS property 'float'. Example:
CSS:
img{
    float: right;
}
You can set the width of the image, in pixels, like that:
CSS:
img{
    width: 300px;
}
Or in percentage of the width of its parent element:
CSS:
img{
    width: 30%;
}
 

Krygore

Coder
So for the time being, the Index page and "A New Beginning" are done. Here's the screenshots and codes for each.
skyrimindex_progress_screenshot.jpg
skyrim_index.html:
<!DOCTYPE html>
<html>
                                <!--Head Start-->
    <head>
        <title>Skyrim Gamer's Manual</title>
        <meta name="description" content="Skyrim Gamer's Guide">
        <meta name="keywords" content="Skyrim, gamer, guide, gaming, Elder Scrolls">
        <link rel="stylesheet" href="skyrim_stylesheet.css">
   </head>
                                <!--Head End-->

                                <!--Body Start-->
    <body>
                <!--Header Start-->
        <header id="skyrim-index-header">
            <div class="container">
                <div class="centered"><h1>Skyrim Gamer's Guide</h1></div>
                <img src="images/index_header_background.jpg" alt="index_header_background.jpg" width="100%">
                
            </div>
        </header>
                <!--Header End-->

                            <!--Welcoming Statement-->
        <article>
                <!--Section 1-->
             <section id="index-section-1">
                <h3>Hello, and welcome to the Skyrim Gamer's Guide!</h3>
                <p>This is <em>NOT</em> an official Bethesda or professional gamer's page! This is a page made by my wife and I, who happen to be avid Skyrim lovers!</p>
                <p>We created this page with the intention of spreading knowledge about Skyrim and all of it's inhabitants from our perspective! We will be sharing everything from usable NPC followers to unique items and where to find them!</p>
                <p>Any and all information in this page was either found on the web or through personal gameplay. Gameplay experiences may differ depending on gaming system and bugs affecting your current game. (Bugs are very common in Skyrim and may result in the inability to complete a quest or use an item)</p>
            </section>

                <!--Section 2-->
                                        <!--Table of Contents-->
            <section>
                <h3>Table of Contents</h3>
                    <p id="table-of-contents">Click a highlighted text below to view content on a new page!</p>
                <table id="table-of-contents">
                    <tr>
<!--COMPLETE-->
                        <td><a href="a_new_beginning.html" target="_blank">A New Beginning</a></td>
<!--IN PROGRESS-->
                        <td><a href="skill_training.html"target="_blank">Skill Training</a></td>
<!--IN PROGRESS-->
                        <td><a href=""target="_blank">Battle in Skyrim</a></td>
<!--IN PROGRESS-->
                        <td><a href=""target="_blank">Traders</a></td>
                    </tr>
                    <tr>
<!--IN PROGRESS-->                       
                        <td><a href=""target="_blank">Rare Weapons and Equipmemt</a></td>
<!--IN PROGRESS-->                 
                        <td><a href=""target="_blank">Daedric Lords</a></td>
<!--IN PROGRESS-->                 
                        <td><a href=""target="_blank">Dragon Priest Masks</a></td>
<!--IN PROGRESS-->                   
                        <td><a href=""target="_blank">NPCs</a></td>
                    </tr>
                    <tr>
<!--IN PROGRESS-->                 
                        <td><a href=""target="_blank">Shouts</a></td>
<!--IN PROGRESS-->                 
                        <td><a href=""target="_blank">Solstheim</a></td>
<!--IN PROGRESS-->                 
                        <td><a href=""target="_blank">Soul Cairn</a></td>
<!--IN PROGRESS-->                 
                        <td><a href=""target="_blank">Cool Finds/Keepsakes</a></td>
                    </tr>
                    <tr>   
<!--IN PROGRESS-->                 
                        <td><a href=""target="_blank">Quests</a></td>
<!--IN PROGRESS-->                 
                        <td><a href=""target="_blank">Companions</a></td>
<!--IN PROGRESS-->                 
                        <td><a href=""target="_blank">Resource Hunting/Harvesting</a></td>
<!--IN PROGRESS-->                 
                        <td><a href=""target="_blank">Dwarven Ruins</a></td>
                    </tr>
                </table>
            </section>
        </article>
        <footer>
            <p><small><em>Information may not be up to date depending on player's game version.
                <br>
            Copyright &copy, 2021</em></small></p>
        </footer>
    </body>
</html>

anewbeginning_progress_screenshot.jpg

A New Beginning:
<!DOCTYPE html>
<html>
                                    <!--Head Start-->
<head>
    <title>A New Beginning</title>
    <link rel="stylesheet" href="skyrim_stylesheet.css">
</head>

                                    <!--Body Start-->
<body>
<header>
    <div class="container">
        <img src="images/a_new_beginning_header.jpg"alt="a_new_beginning_header.jpg"width="100%"height="150%">
        <div class="centered2:"><h1>A New Beginning</h1></div>
    </div>
    <hr>
    <nav>
    <a href="skyrim_index.html"target="_blank">HOME</a>
    </nav>
</header>
<article>
    <section>

                                        <!--Getting Started-->

        <h3>Who Are You?</h3>
        
        <p>Starting out you are <strong><u>forced</u></strong> to watch the beginning credits,where you are bound in ropes in the back of a horse drawn cart. Three other NPC's are with you, a horse theif from Rorikstead, Ralof of Riverwood, and Ulfric Stormcloak, self-proclaimed high-king of Skyrim.</p>
        
        <p>There will be brief dialogue as you make your way down the path to the executioners block. Once there, you will exit the cart and wait for your name to be called from the list. When the officer asks, "Who are you?" you will begin the character creation window.</p>
    </section>
    <br>
    <section>

                                            <!--Different Races-->

        <h3>Selecting Your Race</h3>
            <div class="rightAlignImg">
                <img id="width50perc" src="images/who_are_you.jpg">
            <p>Here, you will begin the creation of your Dragonborn character. There are ten different <strong><u>races</u></strong> to choose from, each with their own abilities and special powers. </p>
            </div>

        <ul id="race-list">
            <li>Altmer (High Elves)</li>
            <li>Argonian</li>
            <li>Bosmer (Wood Elves)</li>
            <li>Breton</li>
            <li>Dunmer (Dark Elves)</li>
            <li>Imperial</li>
            <li>Khajiit</li>
            <li>Nord</li>
            <li>Orc</li>
            <li>Redguard</li>
        </ul>
        <div>
            <p class="rightAlignText"><a href=""target="_blank">More on Races</a></p>
        </div>
        <br>
        <br>
    </section>
    <section>
        <h3>Your Journey Begins</h3>

                                    <!--Character Creation Follow-Up-->

        <p>The only thing to keep in mind when picking your race, is the abilities that come with that race, i.e. Argonians can breath underwater. Other than that, the appearance of your character is purely for your enjoyment! It has no effect on the outcome of how your game will play out.</p>
        <p>Once you have completed your character creation, you will be escorted towards the butcher's block, where you will witness the executioner behead a stormcloak soldier. You are then called up, placed on the block, and right before the executioner makes the swing, <a href=""target="_blank">Alduin</a> swoops down and disrupts the whole gathering.</p>
        <p>From here you begin your ability to move freely, but not attack or shout; your hands are still bound. You will start by following Ralof, but eventually end up seperated and escorted by Hadvar with the Imperials. You're then given the option to go with either Hadvar or Ralof to the safety of the castle. <i>I personally follow Ralof because, once inside the castle, you can power level one-handed and archery skills.</i> But you may choose to follow who ever you like.</p>
        <p>Once you have escaped the dangers of Alduin, your adventure truely begins! You may stick to the first quest and follow the story quest, <i><b><u>OR</u></b></i> begin your exploration of Skyrim, boost your archery by hunting for furs and pelts, gather ingredients for potions, or take on a giant and a mammoth... becaue why not?</p>
    </section>
</article>

<footer>
    <nav>
        <a href="skyrim_index.html"target="_blank">HOME</a>
    </nav>
    <p><small><em>Information may not be up to date depending on player's game version.
        <br>
    Copyright &copy, 2021</em></small></p>
</footer>
</body>
</html>

And the CSS Sheet:

skyrim_stylesheet.css:
/*Standard Styling*/

/*Header*/
header{
    color:goldenrod;
    text-align: center;
    text-decoration: greenyellow;
    font-family: cursive;
    font-size:20pt;
    text-shadow: 5px 2px 4px orangered;
    background-color:black;
    padding:5px
}

/*Navigation*/
nav{
    text-shadow: 5px 2px 4px orangered;
}

/*Headings*/
h1,h3{
    text-align: center;
}
h3{
    color:goldenrod;
    text-shadow:5px 2px 4px orangered
}

/*Horizontal Line*/
hr{
    color:goldenrod;
    background-color:orangered;
    height:10px;
    border-style:double;
}

/*Body*/
body{
    background-color:rgb(77,77,77);
    color:ivory;
    text-align:left;
    word-wrap: normal;
    border: 10px rgb(44,44,44);
    font-family:cursive;
}

/*Links*/
a{
    color:rgb(0, 171, 201);
    font-weight:bolder;
}

/*Tables*/
table{
    text-align: center;
    font-weight:bolder;
    border-color:goldenrod;
    border-style:dotted;

}

/*Sections*/
section{
    border-style:double;
    border-width: 10px;
    padding:8px;
    border-color:goldenrod;

}

/*Paragraphs*/
p{
    text-indent:40px;
}

/*Footer*/
footer{
    text-indent:0px;
    text-align:center;
    color:black;
    background-color:rgb(44,44,44);
}

/*Specialty Styling*/

/*Index Page*/
#index-section-1{
    
}
#table-of-contents{
    color:rgb(216, 189, 35);
    text-align:center;
    border-style: ridge;
    border-width:6px;
    border-color:orangered;
}
.container{
    position:relative;
    text-align:center;
    color:goldenrod;
}
/* Centered text */
.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  /*A New Beginning*/
nav{
    display:block;
}
.rightAlignImg{
    float:right;
}
.rightAlignText{
    float:right;
}
#width50perc{
    width:50%;
    float:right;
    border-style:double;
    border-color:black;
    border-width:4px;
    background-color:orangered;
}
#race-list{
    color:goldenrod;
    text-decoration: underline;
}

More to come!
 

Krygore

Coder
So I have a new problem. All my formatting was done while my webpage was set up on half screen... that being said, when I go to full size browser, this is what I get...


Formatting_Error2.jpgFormatting_Error1.jpg

Any tips to take it back to it's original format posted above?
 

LTomy

Active Coder
Staff Team
Guardian
Yep,

By default, a <table> will not use all the space it can, but only the space it needs. You can either set its width to 100% so it takes all the space available or you can center it (For example, by giving it the style 'margin: auto;').
 

LTomy

Active Coder
Staff Team
Guardian
Would that be done in CSS or the <table> tag?
CSS. All the styles used to define how to display the HTML elements are located in the CSS files.

Alternatively, you can put any CSS style inside the attribute 'style' of an HTML element to apply the styles only to that element. However, it should not be used too much as it can get messy.
HTML:
<div style="width: 100%;">
</div>
 
Last edited:

Krygore

Coder
CSS. All the styles used to define how to display the HTML elements are located in the CSS files.

Alternatively, you can put any CSS style inside the attribute 'style' of an HTML element to apply the styles only to that element. However, it should not be used too much as it can get messy.
HTML:
<div style="width: 100%;">
</div>
Alright, so I got the table fixed, but how do I fix the other page?
In the "Select Your Race" box, the image should be aligned within the lines of the box and the list should be underneath the paragraph.
I've tried adjusting the margin on the image and the border, I've tried adding divs and breaks where I felt they were necessary but they only made things worse >_<
 
Top