Comic page formatting confusion

[InvaderScurk]

Well, I don't have delusions of Grandeur. Nor aspirations of grandeur for my webcomic. It looks now about as nice as I could hope for, without rebuilding the site from the ground up. It is a respectable front that I can post links to and show to my friends. And I have you all to thank for it. Your advice has been invaluable, and your support as a community has been invaluable as well. I want to thank Wendybird, Metrius, MagooChris (good luck with your comic!), and especially Dr Neo Lao. His knowlege of HTML code has been essential to my quest, and I also want to thank him for supporting my comic by putting it's graphic in his sig. If anyone else feels like helping me out by advertising my comic, just copy and paste this into your signature (minus the asterisks, which are put in place to make sure the code doesn't display on its own):

[*url=http://invaderscurk.comicgenesis.com/][*img]http://i237.photobucket.com/albums/ff26 ... igcopy.png[/*img][/*url]
[*color=#8000FF][*b]Invader Zim fancomic- updating Mondays and Fridays![/*b][/*color]

I want to thank everyone again, and I suspect I'll be back in the future once I'm ready to learn more about HTML. Here's some cool looking pin-up art for all your troubles.

http://i237.photobucket.com/albums/ff26 ... inup-1.png

[InvaderScurk]

Hello again Comic Genesis! I have returned after merrily updating my comic for 31 pages, and I wish to improve my site.

I have posted in this older thread so that, if you are website savvy, you might read through and understand what I have done so far, to aid with want I want/plan to do.

I would like to enable comments on my comic pages, and also if possible have pages on my webcomic site other than the comic itself. For example, having a Characters page, or an about the author page, or an art page, etc.

These are my two goals. I am pretty sure that my index template is somewhere within the last five posts or so, so if anyone can help me out with this new challenge (maybe even Dr Neo Lao), that'd be great!

Let the games begin!

[Dr Neo Lao]

Adding reader comments is easy/hard. All you need to do is register with a third party commenting service provider who will give you a snippet of code that you add to the index template. There are a number of such services on the web, they are normally referred to as "shoutboxes" or "comment boxes".

There isn't one that I recommend since I don't use them, but run a search for "shout box" in the help center and you'll find a dozen threads about them.

Extra pages are likewise easy. If you want a character page, create the html on your computer (or copy the index template and delete the middle bit), then upload it to the workspace/webpages folder.

Assuming you created the file character.html then the server will process the file and dump it to your root folder. So what you upload as workspace/webpages/character.html will end up as invaderskurk.comicgenesis.com/character.html.

[InvaderScurk]

First of all, good to speak with you again Dr. Neo Lao. Nice to see you're still sporting my sig! I shall make a new one someday soon..

Anyways, I'll leave this question open to you and anyone else skilled with shout boxes. Here is the portion of my index template where I'm thinking about adding the code for the shout box. Is this the correct spot? This is my website, and I want the shout box to go at the bottom of the page, underneath the news and secondary links.

Code: Select all

<div class="news">
<h1>News</h1>
***todays_notes***
</div>

<div class="secondarylinks">
	<ul>
	<li id="scontact"><a href="mailto:gabechat@charter.net">Contact</a></li>
	<li id="sforum"><a href="http://www.bungiehq.com/forum/index.php">Forum</a></li>
	<li id="swiki"><a href="http://cgwiki.comicgenesis.com/index.php/Comic:Invader_Scurk">Wiki</a></li>
	<li id="sgallery"><a href="http://internet-ninja.deviantart.com/">Gallery</a></li>
	</ul>
</div>

<!-- Begin ShoutMix - http://www.shoutmix.com -->
<iframe title="internetninja92" src="http://www4.shoutmix.com/?internetninja92" width="160" height="400" frameborder="0" scrolling="auto">
<a href="http://www4.shoutmix.com/?internetninja92">View shoutbox</a>
</iframe>
<br /><a href="http://www.shoutmix.com" title="Get your own free shoutbox chat widget at ShoutMix!">ShoutMix chat widget</a><br />
<!-- End ShoutMix -->

</div>
<div id="footer">
<p>Invader Scurk is hosted on <a href="http://www.comicgenesis.com/">Comic Genesis</a>, a free webhosting and site automation service for webcomics.<br><a href="http://cwcomics.comicgenesis.com/generator">Html assistance</a> by <a href="http://cwcomics.comicgenesis.com">c.w.</a><span class="csscredit"> - see css file for css author.</span></p>
</div>
</body>

Extra pages are likewise easy. If you want a character page, create the html on your computer (or copy the index template and delete the middle bit), then upload it to the workspace/webpages folder.

Assuming you created the file character.html then the server will process the file and dump it to your root folder. So what you upload as workspace/webpages/character.html will end up as invaderskurk.comicgenesis.com/character.html.

So as for this, what do you mean by deleting the middle part of my index template? Like leaving the ads and tags at the bottom, and getting rid of the comic and navigation buttons, and news etc? What would I put in it's place? Keep in mind that I still have little to no idea how to CREATE html code, so much as move it around and do what people tell me to do. Also, how would I create links to my second page on the other pages of the site? Would that be automatic?

[Jpac]

That code you have in the box should work at placing the shoutbox underneath your secondary links "* Contact * Forum* Wiki * Gallery" and the news. I created an artist's rendition of what it will theoretically look like. If it appears to the left then putting everything between the comment tags (<!-- -->) between "<center> </center>" should do the trick if you want it centered.

So as for this, what do you mean by deleting the middle part of my index template? Like leaving the ads and tags at the bottom, and getting rid of the comic and navigation buttons, and news etc? What would I put in it's place? Keep in mind that I still have little to no idea how to CREATE html code, so much as move it around and do what people tell me to do. Also, how would I create links to my second page on the other pages of the site? Would that be automatic?

It would not be automatic, no. You would have to design the character page yourself. You would have to delete the content you mentioned in your question - comic and navigation buttons, etc. As for you character profile, you would put whatever code you are using to display links to each of the characters in place of all the information you got rid of.

The links to the character page would have to be added manually to your indextemplate and daily template.

The two spots in which your code says:
<ul>
<li id="scontact"><a href="mailto:gabechat@charter.net">Contact</a></li>
<li id="sforum"><a href="http://www.bungiehq.com/forum/index.php">Forum</a></li>
<li id="swiki"><a href="http://cgwiki.comicgenesis.com/index.ph ... ki</a></li>
<li id="sgallery"><a href="http://internet-ninja.deviantart.com/">Gallery</a></li>
</ul>

You would replace it with:
<ul>
<li id="scontact"><a href="mailto:gabechat@charter.net">Contact</a></li>
<li id="sforum"><a href="http://www.bungiehq.com/forum/index.php">Forum</a></li>
<li id="swiki"><a href="http://cgwiki.comicgenesis.com/index.ph ... ki</a></li>
<li id="sgallery"><a href="http://internet-ninja.deviantart.com/">Gallery</a></li>
<li id="scharacter"><a href="yourcharacterpageaddress">Characters</a></li>
</ul>

I bolded the line that will be added. The id name is whatever you want it to be, yourcharacterpageaddress would be replaced by the address of your character page, and if you want your link to say something other than "Characters" you could change that word too. Hope this helps.

[Dr Neo Lao]

^ What Jpac said.

[quote]You would have to design the character page yourself. You would have to delete the content you mentioned in your question - comic and navigation buttons, etc...[quote]

Note that you delete the content from a copy of your index. The reason for doing this is so that you can keep the look and layout of your site, but just change the content.

The simplest way to do this (though not recommended) is to use a WYSIWYG editor or MSWord (depending on what you have available) to type out the content (but not any formatting, images or stuff like that) which you want for the new pages, but select "save as html" instead of .doc. Open that saved html file with NotePad, copy the lot and dump it into your blank copied-from-index html file.

Ask again if that was too confusing.

[InvaderScurk]

It would not be automatic, no. You would have to design the character page yourself. You would have to delete the content you mentioned in your question - comic and navigation buttons, etc. As for you character profile, you would put whatever code you are using to display links to each of the characters in place of all the information you got rid of.

The simplest way to do this (though not recommended) is to use a WYSIWYG editor or MSWord (depending on what you have available) to type out the content (but not any formatting, images or stuff like that) which you want for the new pages, but select "save as html" instead of .doc. Open that saved html file with NotePad, copy the lot and dump it into your blank copied-from-index html file.

Ask again if that was too confusing.

Jpac and Dr Neo Lao, thank you both of you for your aid. Especially Jpac, for linking the actual code that I would need (which no one has even done. They've just tried to describe it. Just typing up what it would look like is very useful). However, the root of the problem is that. You both mention that I will have to create the code for the character page, and I guess I haven't been to clear on the issue. I don't know how to do this.

Anyways, while I again thank Jpac for displaying some code, I think I had better clarify my idea of what I want. Ideally, I would want the layout of my site to be like it is on Awkward Zombie. The major links are to the left of the comic, on the same lines. The shout box would go to the right of the comic. However, now that I see it, a shout box isn't exactly what I want. I had in mind comments more similar to how they are on this site and this one.

All the pages would have the major links in the same place. The character page would be something like this site or more preferably this one. Other than a character page, it would be nice to have an art page on which I could display art not directly related to the comic. And an advanced archive page that displays the chapters.

I realize this changes the situation a bit, but I wanted to make my goals clear before you got going too far down the wrong track. These are every single goal I have for the site. If I had everything I just mentioned, I'd be completely content.

[InvaderScurk]

Also, Jpac, I was looking at your forum signature. It just so happens I AM participating in the crossover event! I've been posting in that thread.

[Jpac]

Also, Jpac, I was looking at your forum signature. It just so happens I AM participating in the crossover event! I've been posting in that thread.

So you are. Cool. I look forward to crossing over. I'm going to look over those examples you posted and have a response in a bit (If Dr. Neo Lao doesn't beat me to it, heh.)

[Jpac]

It looks a bit cumbersome, as I've become such a fan of css and div elements (Eventually I'll force you to use that ), but for the sake of speed I chopped an excerpt out of Penny & Annie's character page code and placed it here so you can see what it looks like, possibly learn a bit about how tables work, and see if you'd like to use it for your own character page.

I inserted comment tags (those wonderful <!-- -->'s that don't show up when the page loads) to describe what's going on in there. I have two rows of the character sheet. The image links are broken because the links on the site are relative, but, fortunately, the page's creator put height and width properties on the images, so you'll see the outline of where they would be and the table should look fine enough to learn from.

I wish I'd seen this pretty "code" tag before:

Code: Select all

<b>Cast of Characters</b>
<br>
<!--This is where the fun begins. Tables allow you more control over where you 
     place elements on your page. You start the table tag using <table> and close 
     it with </table>. A basic table would look like this:
     <table>
          <tr>
               <td>Content Here</td>
               <td>Content Here</td>
               <td>Content Here</td>
               <td>Content Here</td>
          </tr>
     </table>
     Each time you put <tr> in the <table> tags, it starts a new row. 
     Each time you put <td> in the <tr> tags, it starts a new cell.
     So the above example would be a table with one row, and four cells
     Okay, let's jump into the code below. Hold your breath.
     -->
     <!-- Here's the table tag. You can see border, cellpadding, cellspacing 
          and width inside the tag. We'll leave all but the width alone for now. 
          I mention the width because you're going to want it to be smaller than
          "760" in the future, because you'll probably want more space to put 
          those links to the left. I'll explain more later. We'll leave it 760 for now.-->
    <table border="0" cellpadding="0" cellspacing="0" width="760">
     <!--I don't usually use <tbody tags myself, but this is where you tell the 
          browser that table content begins. I recommend you just let it be -->
       <tbody>
          <!-- This indicates the beginning of a new row -->

          <tr>

          <!--This is the first cell of the first row. You'll notice that there is an

               <img> tag between the <td> . . . </td> tags. That's where the 
               character image is located. -->
          <td valign="top" width="125"><img src="../images/cast/castpenny.jpg" alt="" border="0" height="179" width="158"></td>

          <!-- Here is the second cell. It contains a blank image, 13 pixels wide,
               to make space in between the character image and the character
               description. -->

          <td width="13"><img src="../images/PNA_1pix_spacer.gif" alt="" border="0" height="13" width="13"></td>

          <!-- This is the third cell. It contains the character description. -->

          <td align="left" valign="top"><font color="#485b96" face="Trebuchet MS" size="2">
             <b>Penny Levac</b></font>
             <font face="Trebuchet MS" size="2">
             <br>
             A trendsetter within her high school, a trend-watcher outside of it. Penny
             has long since mastered the "game" of high school popularity. Boys want
             her, girls want to be her. But she has only a few real friends, and is
             beginning to question her long-held career goals of acting, modeling and
             trophy wifedom.</font>
          </td>

          <!-- Once again, there's a cell with a blank image 13 pixels wide, this time 
               placing space between the first character description and the second
               character image -->

          <td align="left" valign="top"><img src="../images/PNA_1pix_spacer.gif" alt="" border="0" height="13" width="13"></td>

          <!-- A repeat of the process you saw before. Character cell -->

          <td align="left" valign="top"><img src="../images/cast/castaggie.jpg" alt="" border="0" height="179" width="158"></td>

          <!-- Cell with space between character and description -->

          <td align="left" valign="top"><img src="../images/PNA_1pix_spacer.gif" alt="" border="0" height="13" width="13"></td>

          <!-- Description cell -->

          <td align="left" valign="top"><font color="#485b96" face="Trebuchet MS" size="2">
          <b>Aggie d'Amour</b></font>
          <font color="#485b96" face="Trebuchet MS" size="2">
          <br></font><font color="#696969" face="Trebuchet MS" size="2">Aggie is eccentric,
           easy to approach but hard to know. She likes being the weird one, the one no one
           can predict, and cultivates creative and political interests like poetry, art
           and animal rights. She hides considerable sadness about her mother's passing,
           and her crush on Marshall can reduce her to red-faced incoherence, but her wry
           wit carries her through most situations, and she's beginning to make friends she
           can count on.</font>
          </td>

          <!-- This closes the row tag -->
          </tr>

          <!--You'll notice that at each "<tr> a new row starts. Each 
          "<td> within the "<tr> . . . </tr>" represents a cell-->

<!-- All of this between here makes space between this and the next row -->
          <tr>
          <td width="125"></td>
          <td width="13"></td>

          <td><img src="../images/PNA_1pix_spacer.gif" alt="" border="0" height="13" width="13"></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          </tr>
<!-- All rows have to have the same number of cells in a table (unless you
     use "colspan" which I don't think we need to get into here). So that's
     why you notice all those empty <td> . . .</td> above.-->

<!-- And the process starts all over again. See if you can see the pattern>

          <tr>
          <td align="left" valign="top" width="125"><img src="../images/cast/castsara.jpg" alt="" border="0" height="179" width="158"></td>
          <td width="13"></td>
          <td align="left" valign="top"><font color="#485b96" face="Trebuchet MS" size="2">
          <b>Sara</b></font><font color="#485b96" face="Trebuchet MS" size="2">
          <br></font><font color="#696969" face="Trebuchet MS" size="2">
          Penny's best friend, and her only friend who argues with her on a regular basis.
          Sara has recently faced up to something she's long denied-- her own homosexuality--
          which has led to her being targeted by vicious rumors. Both Penny and Sara worry
          that Sara's new "identity" may take her away from Penny, but despite a rough patch
          or two, so far they're closer than ever.</font>
          </td>
          <td align="left" valign="top"></td>
          <td align="left" valign="top"><img src="../images/cast/castmichelle.jpg" alt="" border="0" height="179" width="158"></td>
          <td align="left" valign="top"></td>
          <td align="left" valign="top"><font color="#485b96" face="Trebuchet MS" size="2">
          <b>Michelle</b></font><font color="#485b96" face="Trebuchet MS" size="2"><br>
          </font><font face="Trebuchet MS" size="2">
          Penny's other best friend, who supported her in nearly all things. Her father's
          interest in publishing has put a strain on her finances and her relationship with
          him, and the end of her one-sided relationship with Stan has left her self-esteem
          at a dangerous low.</font>
          </td>
          </tr>
          <tr>
          <td width="125"></td>
          <td width="13"></td>
          <td><img src="../images/PNA_1pix_spacer.gif" alt="" border="0" height="13" width="13"></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          </tr>
       </tbody>
    </table>
    <p>It doesn't hurt to say Thank you to the creators of of <a href="http://www.pennyandaggie.com/">
    Penny & Aggie</a> for such wonderful code.</b>

Okay, I'm a little frightened by the bulk of that code, so let me do a bit of a rewrite. You want your comic page to have the advertisement, title, and subtitle centered at the top, and you want links to the left, content to the right, and everything else on the bottom.

So I looked at . . . I have completely forgotten which comic this comes from. Oh look! The title is in the image I made! So yeah, I looked at A Skewed Paradise and chopped the content into neat little boxes. If you put an imaginary line, like the red squiggle I made, you'll notice it's basically a two column set up. It would look something like this.

Code: Select all

<table width="790">
     <tr>
          <td width="188">
          <img src="/images/Title.jpg">
          <ul>
          <br /><a href="mailto:gabechat@charter.net"><img src="/images/contact.jpg" alt="Contact"></a>
          <br /><a href="http://www.bungiehq.com/forum/index.php"><img src="/images/forum.jpg"></a>
          <br /><a href="http://cgwiki.comicgenesis.com/index.php/Comic:Invader_Scurk"><img src="/images/wiki.jpg" alt="Wiki"></a>
          <br /><a href="http://internet-ninja.deviantart.com/"><img src="/images/gallery.jpg alt="Gallery"></a>
          </ul>

<!-- The <br /> tags are line breaks, just like if you pressed 'enter' on wordpad -->
          <br />
          <br />
          <br />
          <br />
          <br />
          ***calendar***
          </td>

<!--This is a spacer like the one in the longer code above. I just didn't feel like
     making any empty images. The "&nbsp" is a space that serves as content -->
          <td width="13">&nbsp</td>

          <td width="587">
<p>***first_day*** ***previous_day*** ***next_day*** ***last_day***</p>
<p>***todays_comics***</p>
<p>***first_day*** ***previous_day*** ***next_day*** ***last_day***</p>

<!-- Okay I got lazy and copy pasted this from some of your earlier code XD -->
<div class="news">
<h1>News</h1>
***todays_notes***
</div>

<div class="secondarylinks">
   <ul>
   <li id="scontact"><a href="mailto:gabechat@charter.net">Contact</a></li>
   <li id="sforum"><a href="http://www.bungiehq.com/forum/index.php">Forum</a></li>
   <li id="swiki"><a href="http://cgwiki.comicgenesis.com/index.php/Comic:Invader_Scurk">Wiki</a></li>
   <li id="sgallery"><a href="http://internet-ninja.deviantart.com/">Gallery</a></li>
   </ul>




          </td>
     </tr>
</table>

But you would want a row to be at the top containing all of the adds and title and subtitle, so you might actually want another <tr> <td> . . . </td> </tr> at the top with the advertisement tag, title, and so on. (Must...finish....before....burning out....)

Code: Select all

<table width="790">
     <tr>
<!-- I mentioned colspan before. All rows have to have the same number of 
columns per row. Colspan tells the browser to "span the column" across 
multiple cells/columns. In this instance, I told it to make on column that
spans three columns across. -->
     <td colspan="3">
          <div id="ad">
          ***advertisement***
          </div>
          <div style="text-align:center">
          <h1 class="title"><a href="http://invaderscurk.comicgenesis.com">Invader Scurk</a></h1>
          <h2 class="subtitle">Height discrimination is still discrimination</h2>
          <h3 class="author">Written, drawn, and colored by Gabe Altomare</h3>
          </div>
          
          
     </td>
     </tr>


     <tr>
          <td width="188">
          <ul>
          <br /><a href="mailto:gabechat@charter.net"><img src="/images/contact.jpg" alt="Contact"></a>
          <br /><a href="http://www.bungiehq.com/forum/index.php"><img src="/images/forum.jpg"></a>
          <br /><a href="http://cgwiki.comicgenesis.com/index.php/Comic:Invader_Scurk"><img src="/images/wiki.jpg" alt="Wiki"></a>
          <br /><a href="http://internet-ninja.deviantart.com/"><img src="/images/gallery.jpg alt="Gallery"></a>
          </ul>

<!-- The <br /> tags are line breaks, just like if you pressed 'enter' on wordpad -->
          <br />
          <br />
          <br />
          <br />
          <br />
          ***calendar***
          </td>

<!--This is a spacer like the one in the longer code above. I just didn't feel like
     making any empty images. The "&nbsp" is a space that serves as content -->
          <td width="13">&nbsp</td>

          <td width="587">
<p>***first_day*** ***previous_day*** ***next_day*** ***last_day***</p>
<p>***todays_comics***</p>
<p>***first_day*** ***previous_day*** ***next_day*** ***last_day***</p>

<!-- Okay I got lazy and copy pasted this from some of your earlier code XD -->
<div class="news">
<h1>News</h1>
***todays_notes***
</div>

<div class="secondarylinks">
   <ul>
   <li id="scontact"><a href="mailto:gabechat@charter.net">Contact</a></li>
   <li id="sforum"><a href="http://www.bungiehq.com/forum/index.php">Forum</a></li>
   <li id="swiki"><a href="http://cgwiki.comicgenesis.com/index.php/Comic:Invader_Scurk">Wiki</a></li>
   <li id="sgallery"><a href="http://internet-ninja.deviantart.com/">Gallery</a></li>
   </ul>




          </td>
     </tr>
</table>

Okay, I think these codes should be enough for you to put on your computer and play with. I got a little lazy and copied your code directly toward the end. I tried to make it mostly independent of your css code so you can see how it works without wondering if your css is making it do what it's doing. (Okay, so the links at the bottom are likely dependent on your css to be shown horizontally.)Try copying the code into your editor to and tweaking things like the width, or typing in new/replacing content in the different cells. Always remember that playing with other people's source is one of the best ways to learn.

edit: I realize I made the size of the first column 160 pixels when the calendar is about 188 or so pixels. So I stretched the table another 30 pixels to compensate. Just check the code out and if you have any questions, don't hesitate.

[InvaderScurk]

A truly massive aid to my endeavors. Not only have you educated me about the way tables are used on pages, but you have provided me with code ready to go! I'll upload this as a new index template, see how the site looks when it updates, and decide if I want to make any changes. If I do, I'll tweak here and there and then post it here before I make it live so it can be proofread.

You're being a huge help, but please don't finish....before....burning out.... if you don't want to. I can offer no compensation aside from my eternal gratitude (and some art, if you want anything in particular , maybe even some featuring your characters, though you'd have to tell me which comic to draw from).

But I digress, I'll post that code and see how it looks.

[InvaderScurk]

... although, after looking at it, maybe that's not what you intended...? I think I get ahead of myself.

Most everything was in the right place, but some links weren't displaying and the colors of the site weren't there.

[Jpac]

... although, after looking at it, maybe that's not what you intended...? I think I get ahead of myself.

Most everything was in the right place, but some links weren't displaying and the colors of the site weren't there.

Ah, excuse me. The code wasn't 100% ready because I wasn't sure what your css file looked like and I tried to make the design independent of the css code, thinking you might be able to apply it as you wished later. I thought I remembered you saying you wanted to make images for links, so I had changed the text links to images (and noticed there was a bit of a snafu in the code at one point). So let me rig up one that hopefully pays more respect to your css, uses links for now (as I think you've indicated you know how to replace text links with images links, and if you haven't you can always give a shout here).

edit: Okay, here's the code redone a bit, with more of your original code in place, but still within the table.

Code: Select all

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta name="Generator" content="ComicGenesis HTML Generator BETA-4.1">
    <title>Invader Scurk - ***todays_date***</title>
    <link rel="stylesheet" type="text/css" media="screen" href="/screen.css" >
    <link rel="stylesheet" type="text/css" media="handheld" href="/handheld.css" >
    <link rel="stylesheet" type="text/css" media="print" href="/print.css" >
    </head>

    <body>
    <table width="100%">
         <tr>
    <!-- I mentioned colspan before. All rows have to have the same number of
    columns per row. Colspan tells the browser to "span the column" across
    multiple cells/columns. In this instance, I told it to make on column that
    spans three columns across. -->
         <td colspan="3">
				 <!-- <div style="text-align:center"> -->
			    <div id="ad">
			    	***advertisement***
			    </div>
				
				<div class="container" id="index">
				
				<div class="header">
					<h1 class="title"><a href="http://invaderscurk.comicgenesis.com">Invader Scurk</a></h1>
					<h2 class="subtitle">Height discrimination is still discrimination</h2>
					<h3 class="author">Written, drawn, and colored by Gabe Altomare</h3>
				</div>
				<!-- </div> -->
              
				</div>
             
             
         </td>
         </tr>


         <tr>
			<td width="190">
    		   <ul>
		       <li id="mcontact"><a href="mailto:gabechat@charter.net">Contact</a></li>
		       <li id="mforum"><a href="http://www.bungiehq.com/forum/index.php">Forum</a></li>
		       <li id="mwiki"><a href="http://cgwiki.comicgenesis.com/index.php/Comic:Invader_Scurk">Wiki</a></li>
		       <li id="mgallery"><a href="http://internet-ninja.deviantart.com/">Gallery</a></li>
		       </ul>
    <!-- The <br /> tags are line breaks, just like if you pressed 'enter' on wordpad -->
			<br />
			<br />
			<br />
			<br />
			<br />
			***calendar***
			</td>
    <!--This is a spacer like the one in the longer code above. I just didn't feel like
         making any empty images. The "&nbsp" is a space that serves as content -->
			<td width="8">&nbsp </td>

			<td width="826">
				<div style="text-align:center">
					<div class="main">
						<div id="abovenav" class="nav">
					       <ul>
					       <li class="first">***first_day***</li>
					       <li class="previous">***previous_day***</li>
					       <li class="next">***next_day***</li>
					       <li class="last">***last_day***</li>
					       </ul>
						</div>

						<div class="comic">
						***todays_comics***
						</div>
						
						<div id="belownav" class="nav">
							<ul>
								<li class="first">***first_day***</li>
								<li class="previous">***previous_day***</li>
								<li class="next">***next_day***</li>
								<li class="last">***last_day***</li>
							</ul>
						</div>
						
					</div>
				</div>

    <!-- Imitation is the sincerest form of flattery...and sometimes a necessity. -->
				<div style="text-align:center">
					<div class="news">
						<h1>News</h1>
						***todays_notes***
					</div>
				</div>

    <div class="secondarylinks">
       <ul>
       <li id="scontact"><a href="mailto:gabechat@charter.net">Contact</a></li>
       <li id="sforum"><a href="http://www.bungiehq.com/forum/index.php">Forum</a></li>
       <li id="swiki"><a href="http://cgwiki.comicgenesis.com/index.php/Comic:Invader_Scurk">Wiki</a></li>
       <li id="sgallery"><a href="http://internet-ninja.deviantart.com/">Gallery</a></li>
       </ul>
	</div>
			</td>
		</tr>
    </table
	</body>
	</html>

If you could copy your css codes into a few boxes it would be great. (If you already did, excuse me) I think this may use your css and appear something like what you were looking for, colors included *cross fingers*. If it shows up awkwardly in anyway, I don't suppose you could get the source code of the page after it's been loaded and copy that here.

I do recommend that you play with the code, even if you don't want to change a thing in the code above. (I doubt my ability to fire true in this light, so if there's anything that needs tweaking to say so. Did I say that already?)

Ah, and don't mind my talking to myself while I type. It's the only thing that keeps me sane . . . I think. I enjoy helping when I can, as so many people here have helped me when they could. And your eternal gratitude's a pretty big thing, plus art? plus featuring my characters?!

I do have this square that will need a place to wander, and if you have any alien life forms, dimension hopping capabilities, fourth wall jokes, an insane character, or any means to let it drop by that'd be appreciated. Even that Halloween Day collaboration will be pretty cool. And drawing her will hardly be difficult .

[InvaderScurk]

Here is my css:

Code: Select all

   /*
       CSS by c.w.
       http://cwcomics.comicgenesis.com
       c.w.comics@gmail.com
    */

    body
    {
    margin: 0;
    padding: 0;
    text-align: center;
    font-family: sans-serif;
    background: #000000;
    color: #8467D7;
    }

    #ad
    {
    margin: 15px;
    float: right;
    }

    .header
    {
    margin: 15px;
    text-align: left;
    margin-left: 1em;
    }

    h1
    {
    margin: 0;
    font-weight: normal;
    }

    h2
    {
    margin: 0;
    color: #CCCCCC;
    font-weight: normal;
    }

    h3
    {
    margin: 0;
    color: #CCCCCC;
    font-weight: normal;
    }

    a
    {
    color: #FFFFFF;
    text-decoration: none;
    font-style: italic;
    }

    a:hover
    {
    text-decoration: underline;
    }

    ul
    {
    margin: .5em;
    padding: 0;
    }

    li
    {
    display: inline;
    margin-right: 2em;
    }

    .main
    {
    margin: 0;
    padding: 10px;
    margin-top: 1em;
    background: #000000;
    }

    .main ul
    {
    margin: 0;
    }

    .main li
    {
    margin-right: 1em;
    }

    .main img
    {
    margin: .5em;
    }

    .news, .list, .rant, .gal
    {
    text-align: left;
    margin: .5em 20% .5em 20%;
    }

    .news iframe
    {
    width: 100%;
    height: 350px;
    border: 0;
    }

    .list, .rant, .gal
    {
    background: #000000;
    padding: 15px;
    overflow: auto;
    }

    .gal img
    {
    float: left;
    margin: 0 25px 25px 0;
    }

    .list li
    {
    display: block;
    margin-bottom: .25em;
    }

    #footer
    {
    font-size: 70%;
    }

In the Halo business, we call this overkill, but here is my daily template as well, just so you have everything.

Code: Select all

<html>
<head>
<meta name="Generator" content="ComicGenesis HTML Generator BETA-4.1">
<title>Invader Scurk - ***todays_date***</title>
<link rel="stylesheet" type="text/css" media="screen" href="/screen.css" >
<link rel="stylesheet" type="text/css" media="handheld" href="/handheld.css" >
<link rel="stylesheet" type="text/css" media="print" href="/print.css" >
</head>

<body>

<div id="ad">
***advertisement***
</div>

<div class="header">
	<h1 class="title"><a href="http://invaderscurk.comicgenesis.com">Invader Scurk</a></h1>
	<h2 class="subtitle">Height discrimination is still discrimination</h2>
	<h3 class="author">Written, drawn, and colored by Gabe Altomare</h3>
	<ul>
	<li id="mcontact"><a href="mailto:gabechat@charter.net">Contact</a></li>
	<li id="mforum"><a href="http://www.bungiehq.com/forum/index.php">Forum</a></li>
	<li id="mwiki"><a href="http://cgwiki.comicgenesis.com/index.php/Comic:Invader_Scurk">Wiki</a></li>
	<li id="mgallery"><a href="http://internet-ninja.deviantart.com/">Gallery</a></li>
	</ul>
</div>

<div class="main">
	<div id="abovenav" class="nav">
	<ul>
	<li class="first">***first_day***</li>
	<li class="previous">***previous_day***</li>
	<li class="next">***next_day***</li>
	<li class="last">***last_day***</li>
	</ul>
	</div>

		<div class="comic">
		***todays_comics***
		</div>

	<div id="belownav" class="nav">
	<ul>
	<li class="first">***first_day***</li>
	<li class="previous">***previous_day***</li>
	<li class="next">***next_day***</li>
	<li class="last">***last_day***</li>
	</ul>
	</div>
	***calendar***
</div>

<div class="news">
<h1>News</h1>
***todays_notes***
</div>

</div>
<div id="footer">
<p>Invader Scurk is hosted on <a href="http://www.comicgenesis.com/">Comic Genesis</a>, a free webhosting and site automation service for webcomics.<br><a href="http://cwcomics.comicgenesis.com/generator">Html assistance</a> by <a href="http://cwcomics.comicgenesis.com">c.w.</a><span class="csscredit"> - see css file for css author.</span></p>
</div>
</body>
</html>

Now, with this additional information, would you still suggest I upload the code you've given me? You said you typed it up to be independent of the css, but would it be easier to make a more streamlined code now that you have it?


Also, in regards to your character, I'm more than happy to roll him/it into my comic. I've already made references to Team Fortress Two (game), 300 (This is Maddness), Star Trek, etc. The list goes on. However, for your character to appear, I'd need a few things (I mentioned this in the Crossover thread).

Something like a name, what kind of personality they have and what world they live in, and a front, back, and side view of them. In my mind, the point of a crossover is not to have your character featured in image, then have the host artist do whatever he/she wants. It's to have them portray your character as they appear in your own comic. I'll draw up an example based on my characters in a few days.

[Jpac]

I just tweaked the positioning of a couple items in the css code, centering the header and news, and I added in the link to Comic Genesis to the code I placed above. We cannot forget to hail the mighty CG.

You can upload it and see how it looks. I think it's the embryonic stage of what you're looking for.

Updated css:

Code: Select all

    /*
    CSS by c.w.
    http://cwcomics.comicgenesis.com
    c.w.comics@gmail.com
    */

    body
    {
    margin: 0;
    padding: 0;
    text-align: center;
    font-family: sans-serif;
    background: #000000;
    color: #8467D7;
    }

    #ad
    {
    margin: 15px;
    text-align:center;
    }

    .header
    {
    margin: 15px;
    text-align: center;
    margin-left: 1em;
    }

    h1
    {
    margin: 0;
    font-weight: normal;
    }

    h2
    {
    margin: 0;
    color: #CCCCCC;
    font-weight: normal;
    }

    h3
    {
    margin: 0;
    color: #CCCCCC;
    font-weight: normal;
    }

    a
    {
    color: #FFFFFF;
    text-decoration: none;
    font-style: italic;
    }

    a:hover
    {
    text-decoration: underline;
    }

    ul
    {
    margin: .5em;
    padding: 0;
    }

    li
    {
    display: inline;
    margin-right: 2em;
    }

    .main
    {
    margin: 0;
    padding: 10px;
    margin-top: 1em;
    background: #000000;
    }

    .main ul
    {
    margin: 0;
    }

    .main li
    {
    margin-right: 1em;
    }

    .main img
    {
    margin: .5em;
    }

    .news, .list, .rant, .gal
    {
    text-align: center;
    margin: .5em 20% .5em 20%;
    }

    .news iframe
    {
    width: 100%;
    height: 350px;
    border: 0;
    }

    .list, .rant, .gal
    {
    background: #000000;
    padding: 15px;
    overflow: auto;
    }

    .gal img
    {
    float: left;
    margin: 0 25px 25px 0;
    }

    .list li
    {
    display: block;
    margin-bottom: .25em;
    }

    #footer
    {
    font-size: 70%;
    }

Updated html:

Code: Select all

        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
        <html>
        <head>
        <meta name="Generator" content="ComicGenesis HTML Generator BETA-4.1">
        <title>Invader Scurk - ***todays_date***</title>
        <link rel="stylesheet" type="text/css" media="screen" href="/screen.css" >
        <link rel="stylesheet" type="text/css" media="handheld" href="/handheld.css" >
        <link rel="stylesheet" type="text/css" media="print" href="/print.css" >
        </head>

        <body>
        <table width="100%">
             <tr>
        <!-- I mentioned colspan before. All rows have to have the same number of
        columns per row. Colspan tells the browser to "span the column" across
        multiple cells/columns. In this instance, I told it to make on column that
        spans three columns across. -->
             <td colspan="3">
                 <!-- <div style="text-align:center"> -->
                 <div id="ad">
                    ***advertisement***
                 </div>
                
                <div class="container" id="index">
                
                <div class="header">
                   <h1 class="title"><a href="http://invaderscurk.comicgenesis.com">Invader Scurk</a></h1>
                   <h2 class="subtitle">Height discrimination is still discrimination</h2>
                   <h3 class="author">Written, drawn, and colored by Gabe Altomare</h3>
                </div>
                <!-- </div> -->
                 
                </div>
                 
                 
             </td>
             </tr>


             <tr>
             <td width="190">
                 <ul>
                 <li id="mcontact"><a href="mailto:gabechat@charter.net">Contact</a></li>
                 <li id="mforum"><a href="http://www.bungiehq.com/forum/index.php">Forum</a></li>
                 <li id="mwiki"><a href="http://cgwiki.comicgenesis.com/index.php/Comic:Invader_Scurk">Wiki</a></li>
                 <li id="mgallery"><a href="http://internet-ninja.deviantart.com/">Gallery</a></li>
                 </ul>
        <!-- The <br /> tags are line breaks, just like if you pressed 'enter' on wordpad -->
             <br />
             <br />
             <br />
             <br />
             <br />
             ***calendar***
             </td>
        <!--This is a spacer like the one in the longer code above. I just didn't feel like
             making any empty images. The "&nbsp" is a space that serves as content -->
             <td width="8">&nbsp </td>

             <td width="826">
                <div style="text-align:center">
                   <div class="main">
                      <div id="abovenav" class="nav">
                          <ul>
                          <li class="first">***first_day***</li>
                          <li class="previous">***previous_day***</li>
                          <li class="next">***next_day***</li>
                          <li class="last">***last_day***</li>
                          </ul>
                      </div>

                      <div class="comic">
                      ***todays_comics***
                      </div>
                      
                      <div id="belownav" class="nav">
                         <ul>
                            <li class="first">***first_day***</li>
                            <li class="previous">***previous_day***</li>
                            <li class="next">***next_day***</li>
                            <li class="last">***last_day***</li>
                         </ul>
                      </div>
                      
                   </div>
                </div>

        <!-- Imitation is the sincerest form of flattery...and sometimes a necessity. -->
                <div style="text-align:center">
                   <div class="news">
                      <h1>News</h1>
                      ***todays_notes***
                   </div>
                </div>

        <div class="secondarylinks">
           <ul>
           <li id="scontact"><a href="mailto:gabechat@charter.net">Contact</a></li>
           <li id="sforum"><a href="http://www.bungiehq.com/forum/index.php">Forum</a></li>
           <li id="swiki"><a href="http://cgwiki.comicgenesis.com/index.php/Comic:Invader_Scurk">Wiki</a></li>
           <li id="sgallery"><a href="http://internet-ninja.deviantart.com/">Gallery</a></li>
           </ul>
       </div>
             </td>
          </tr>
        </table>
	<div id="footer">
	<p>Invader Scurk is hosted on <a href="http://www.comicgenesis.com/">Comic Genesis</a>, a free webhosting and site automation service for webcomics.<br><a href="http://cwcomics.comicgenesis.com/generator">Html assistance</a> by <a href="http://cwcomics.comicgenesis.com">c.w.</a><span class="csscredit"> - see css file for css author.</span></p>
	</div>
       </body>
       </html>

The character is extremely simple: a square, in fact. It will likely be a copy paste job. I think I'll have to check the Crossover thread out some time. Also, I need to get the comic up and running. While I have many comics drawn up, they haven't been posted yet, and I'm still wondering where to send the wandering square.

I look forward to future crossovers though, from now till Halloween and beyond. Hope the page formatting looks nice.

[InvaderScurk]

It is indeed growing (as long as we're going with the baby metaphor)! I'd say it's somewhere in the first trimester. Near the end. Three things. Can you make the links on the left be in one column as opposed to a 2x2 deal? (also please highlight the code I'd need to replace to make them image links instead of text) Also, the little text at the very bottom isn't centered.

And thirdly, if you could make it so that the custom image I made for the title displays again? That's be swell.

As for the square, I still need some things to accurately draw him. What color is he, at least? Also, does he have a personality of any kind? or a face?

[Jpac]

Okay, here's the code in case you want to just snatch it up real quick and upload it.

Updated css

Code: Select all

        /*
        CSS by c.w.
        http://cwcomics.comicgenesis.com
        c.w.comics@gmail.com
        */

        body
        {
        margin: 0;
        padding: 0;
        text-align: center;
        font-family: sans-serif;
        background: #000000;
        color: #8467D7;
        }

        #ad
        {
        margin: 15px;
        text-align:center;
        }

        .header
        {
        margin: 15px;
        text-align: center;
        margin-left: 1em;
        }

        h1
        {
        margin: 0;
        font-weight: normal;
        }

        h2
        {
        margin: 0;
        color: #CCCCCC;
        font-weight: normal;
        }

        h3
        {
        margin: 0;
        color: #CCCCCC;
        font-weight: normal;
        }

        a
        {
        color: #FFFFFF;
        text-decoration: none;
        font-style: italic;
        }

        a:hover
        {
        text-decoration: underline;
        }

        ul
        {
        margin: .5em;
        padding: 0;
        }

        li.vertical
        {
        margin-right:2em;
        }

        li.horizontal
        {
        display: inline;
        margin-right: 2em;
        }

        .main
        {
        margin: 0;
        padding: 10px;
        margin-top: 1em;
        background: #000000;
        }

        .main ul
        {
        margin: 0;
        }

        .main li
        {
        margin-right: 1em;
        }

        .main img
        {
        margin: .5em;
        }

        .news, .list, .rant, .gal
        {
        text-align: center;
        margin: .5em 20% .5em 20%;
        }

        .news iframe
        {
        width: 100%;
        height: 350px;
        border: 0;
        }

        .list, .rant, .gal
        {
        background: #000000;
        padding: 15px;
        overflow: auto;
        }

        .gal img
        {
        float: left;
        margin: 0 25px 25px 0;
        }

        .list li
        {
        display: block;
        margin-bottom: .25em;
        }

        #footer
        {
        font-size: 70%;
        }

Updated html:

Code: Select all

            <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
            <html>
            <head>
            <meta name="Generator" content="ComicGenesis HTML Generator BETA-4.1">
            <title>Invader Scurk - ***todays_date***</title>
            <link rel="stylesheet" type="text/css" media="screen" href="/screen.css" >
            <link rel="stylesheet" type="text/css" media="handheld" href="/handheld.css" >
            <link rel="stylesheet" type="text/css" media="print" href="/print.css" >
            </head>

            <body>
            <table width="100%">
                 <tr>
            <!-- I mentioned colspan before. All rows have to have the same number of
            columns per row. Colspan tells the browser to "span the column" across
            multiple cells/columns. In this instance, I told it to make on column that
            spans three columns across. -->
                 <td colspan="3">
                     <!-- <div style="text-align:center"> -->
                     <div id="ad">
                        ***advertisement***
                     </div>
                   
                    <div class="container" id="index">
                   
                    <div class="header">
                       <h1 class="title"><a href="http://invaderscurk.comicgenesis.com">Invader Scurk</a></h1>
                       <h2 class="subtitle">Height discrimination is still discrimination</h2>
                       <h3 class="author">Written, drawn, and colored by Gabe Altomare</h3>
                    </div>
                    <!-- </div> -->
                     
                    </div>
                     
                     
                 </td>
                 </tr>


                 <tr>
                 <td width="190" valign="top">
                     <ul>
                     <li class="vertical"><a href="mailto:gabechat@charter.net">Contact</a></li>
                     <li class="vertical"><a href="http://www.bungiehq.com/forum/index.php">Forum</a></li>
                     <li class="vertical"><a href="http://cgwiki.comicgenesis.com/index.php/Comic:Invader_Scurk">Wiki</a></li>
                     <li class="vertical"><a href="http://internet-ninja.deviantart.com/">Gallery</a></li>
                     </ul>
            <!-- The <br /> tags are line breaks, just like if you pressed 'enter' on wordpad -->
                 <br />
                 <br />
                 <br />
                 <br />
                 <br />
                 ***calendar***
                 </td>
            <!--This is a spacer like the one in the longer code above. I just didn't feel like
                 making any empty images. The "&nbsp" is a space that serves as content -->
                 <td width="8">&nbsp </td>

                 <td width="826">
                    <div style="text-align:center">
                       <div class="main">
                          <div id="abovenav" class="nav">
                              <ul>
                              <li class="horizontal">***first_day***</li>
                              <li class="horizontal">***previous_day***</li>
                              <li class="horizontal">***next_day***</li>
                              <li class="horizontal">***last_day***</li>
                              </ul>
                          </div>

                          <div class="comic">
                          ***todays_comics***
                          </div>
                         
                          <div id="belownav" class="nav">
                             <ul>
                                <li class="horizontal">***first_day***</li>
                                <li class="horizontal">***previous_day***</li>
                                <li class="horizontal">***next_day***</li>
                                <li class="horizontal">***last_day***</li>
                             </ul>
                          </div>
                         
                       </div>
                    </div>

            
                 </td>
              </tr>
            </table>
<!-- Imitation is the sincerest form of flattery...and sometimes a necessity. -->
          <div style="text-align:center">
                       <div class="news">
                          <h1>News</h1>
                          ***todays_notes***
                       </div>
                    

            <div class="secondarylinks">
               <ul>
               <li class="horizontal"><a href="mailto:gabechat@charter.net">Contact</a></li>
               <li class="horizontal"><a href="http://www.bungiehq.com/forum/index.php">Forum</a></li>
               <li class="horizontal"><a href="http://cgwiki.comicgenesis.com/index.php/Comic:Invader_Scurk">Wiki</a></li>
               <li class="horizontal"><a href="http://internet-ninja.deviantart.com/">Gallery</a></li>
               </ul>
           </div>
          </div>
       <div id="footer">
       <p>Invader Scurk is hosted on <a href="http://www.comicgenesis.com/">Comic Genesis</a>, a free webhosting and site automation service for webcomics.<br><a href="http://cwcomics.comicgenesis.com/generator">Html assistance</a> by <a href="http://cwcomics.comicgenesis.com">c.w.</a><span class="csscredit"> - see css file for css author.</span></p>
       </div>
           </body>
           </html>

And here's a bunch of text so I can see myself talk.Nah I'm kiddin'...or am I? Here goes nothin'.

Normally, a list appears in a vertical fashion. You put lists between <ul> . . . </ul> tags, and surround each item in the list with <li> . . .</li>

<ul>
<li>This is the first line</li>
<li>This is the second line</li>
<li>This is the final line</li>
</ul>

Thanks to the beauty of css, this list can be pushed into a horizontal line such as the list of links below the news. That very same code above can be listed horizontally using the css file.

So what looks like two columns of text in the left column of the table, is actually one line of horizontal text that is being forced to line break because the cell of the table isn't wide enough to accommodate it (it's 190 pixels long, you'll notice in the code). Of course, we don't care about the width of the cell. We just want our vertical links. So looking at the css we see:

li
{
display: inline;
margin-right: 2em;
}

This tells the browser that any tag <li> should be displayed "inline" which basically means one horizontal line, as opposed to the vertical appearance we want. We have one <li> tag on the page that we want horizontal, and another <li> tag that we want vertical.

Solution? Well, one is to create two separate sets of properties. You could have li.vertical and li.horizontal for example.

li.vertical
{
margin-right:2em;
}

li.horizontal
{
display: inline;
margin-right: 2em;
}

This would allow you to change the look of your side links independently from the bottom links should/whenever you'd like to. Then the "id="whatever"" should be changed to class="vertical" or class="horizontal" with respect to how you want the links placed.

The second option is to simply add the ".horizontal" to the current "li" in the css code, then add " class="horizontal" " to the li tag. The vertical property in the css code isn't absolutely necessary because lists are vertical be default. Since I'm not doing that one I'm skipping the explanation. You can pm me if it sounds interesting.

<ul>
<li class="vertical"><a href="mailto:gabechat@charter.net">Contact</a></li>
<li class="vertical"><a href="http://www.bungiehq.com/forum/index.php">[b]Forum[/b]</a></li>
<li class="vertical"><a href="http://cgwiki.comicgenesis.com/index.ph ... k">[b]Wiki[/b]</a></li>
<li class="vertical"><a href="http://internet-ninja.deviantart.com/">[b]Gallery[/b]</a></li>
</ul>

This is the code that you need to change to put images instead text as links. I bolded what will be replaced. It will then look something like this:

<ul>
<li class="vertical"><a href="mailto:gabechat@charter.net"><img src="/images/contact.png" alt="Contact"></a></li>
<li class="vertical"><a href="http://www.bungiehq.com/forum/index.php">[b]<img src="/images/forum.png" alt="Forum">[/b]</a></li>
<li class="vertical"><a href="http://cgwiki.comicgenesis.com/index.ph ... k">[b]<img src="/images/wiki.png" alt="Wiki">[/b]</a></li>
<li class="vertical"><a href="http://internet-ninja.deviantart.com/">[b]<img src="/images/gallery.png" alt="Gallery">[/b]</a></li>
</ul>

the image names are assuming you name them contact.png and so on. You can name your images whatever you want, but make sure to change the respective code. The images are linked as if you placed them in the images folder, don't forget.

Finally, the reason the text on the bottom is not centered on the screen is because it's centered within the right cell of our table. So I'll just move the text out of the table and have it centered outside. The code has been changed to reflect this. I kinda stepped up and sat back down in the middle of writing this, so if there's anything unclear don't hesitate to post.

p.s. I made sure the links on the left hand side are moved upward. I used "valign="top"". If you want to move the calendar down, I would suggest putting a few line breaks (<br />) after the vertical links as the simplest way to do it.

[InvaderScurk]

Honestly Jpac, you are being a huge help. I can't thank you enough. I actually feel a little bit ashamed that you're making all this nice code ready made, while I'm kind of sitting on my laurels

[Jpac]

lol, think nothing of it. Just pass it on sometime.

Besides, I'm sure there'll be many cross-links, references, and much general helping along the way. Several people assisted me when I first arrived here. Eventually, you'll be pro and a huge help to someone else who comes along. CG ftw that way.

p.s. Don't forget to change your daily template too.

[InvaderScurk]

p.s. Don't forget to change your daily template too.

lol, wut?

Edit: Okay, I've been playing with my index template a little bit on my own. I put a newsbox (displays other comic gen comics) and a drop down menu that shows my storylines, and another advertisement at the bottom under my news. And I'm having two troubles:

1) The title, news, and stuff below the news are centered, but the comic and the navigation buttons seem to be slightly to the right. The dropdown menu doesn't seem to be in the right place to be centered either

2) I want to have the whole left column (containing vertical links, calendar, and newsbox) moved down. I tried to do this myself, but putting in craploads of <br /> tags didn't do the trick. I also put my image links into the code for the vertical links, but they don't seem to be working.

So here is my new index template with the changes I've made:

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
                <html>
                <head>
                <meta name="Generator" content="ComicGenesis HTML Generator BETA-4.1">
                <title>Invader Scurk - ***todays_date***</title>
                <link rel="stylesheet" type="text/css" media="screen" href="/screen.css" >
                <link rel="stylesheet" type="text/css" media="handheld" href="/handheld.css" >
                <link rel="stylesheet" type="text/css" media="print" href="/print.css" >
                </head>

                <body>
                <table width="100%">
                     <tr>
                <!-- I mentioned colspan before. All rows have to have the same number of
                columns per row. Colspan tells the browser to "span the column" across
                multiple cells/columns. In this instance, I told it to make on column that
                spans three columns across. -->
                     <td colspan="3">
                         <!-- <div style="text-align:center"> -->
                         <div id="ad">
                            ***advertisement***
                         </div>
                       
                        <div class="container" id="index">
                       
                        <div class="header">
                           <h1 class="title"><a href="http://invaderscurk.comicgenesis.com"><img src="/images/title.png" alt="Contact"></a></h1>
                           <h2 class="subtitle">Height discrimination is still discrimination</h2>
                           <h3 class="author">Written, drawn, and colored by Gabe Altomare</h3>
                        </div>
                        <!-- </div> -->
                         
                        </div>
                         
                         
                     </td>
                     </tr>


                     <tr>
                     <td width="190" valign="top">
					 <br />
                     <br />
                     <br />
                     <br />
                     <br />
					 <br />
                     <br />
                     <br />
                     <br />
                     <br />
                         <ul>
                         <li class="vertical"><a href="mailto:gabechat@charter.net"><img src="/images/contact.png" alt="Contact"></a></li>
                         <li class="vertical"><a href="http://www.bungiehq.com/forum/index.php"><img src="/images/forum.png" alt="Forum"></a></li>
                         <li class="vertical"><a href="http://cgwiki.comicgenesis.com/index.php/Comic:Invader_Scurk"><img src="/images/wiki.png" alt="Wiki"></a></li>
                         <li class="vertical"><a href="http://internet-ninja.deviantart.com/"><img src="/images/gallery.png" alt="Gallery"></a></li>
                         </ul>
                <!-- The <br /> tags are line breaks, just like if you pressed 'enter' on wordpad -->
                     <br />
                     <br />
                     <br />
                     <br />
                     <br />
                     ***calendar***
					 <br />
                     <br />
                     <br />
                     <br />
                     <br />
					 ***newsbox***
                     </td>
                <!--This is a spacer like the one in the longer code above. I just didn't feel like
                     making any empty images. The "&nbsp" is a space that serves as content -->
                     <td width="5">&nbsp </td>

                     <td width="826">
                        <div style="text-align:center">
                           <div class="main">
                              <div id="abovenav" class="nav">
                                  <ul>
                                  <li class="horizontal">***first_day***</li>
                                  <li class="horizontal">***previous_day***</li>
                                  <li class="horizontal">***next_day***</li>
                                  <li class="horizontal">***last_day***</li>
                                  </ul>
                              </div>

                              <div class="comic">
                              ***todays_comics***
                              </div>
                             
                              <div id="belownav" class="nav">
                                 <ul>
                                    <li class="horizontal">***first_day***</li>
                                    <li class="horizontal">***previous_day***</li>
                                    <li class="horizontal">***next_day***</li>
                                    <li class="horizontal">***last_day***</li>
                                 </ul>
                              </div>
                              <div class="storyling">
							  ***storyline***
							  </div>
                           </div>
                        </div>

               
                     </td>
                  </tr>
                </table>
    <!-- Imitation is the sincerest form of flattery...and sometimes a necessity. -->
              <div style="text-align:center">
                           <div class="news">
                              <h1>News</h1>
                              ***todays_notes***
                           </div>
                       

                <div class="secondarylinks">
                   <ul>
                   <li class="horizontal"><a href="mailto:gabechat@charter.net">Contact</a></li>
                   <li class="horizontal"><a href="http://www.bungiehq.com/forum/index.php">Forum</a></li>
                   <li class="horizontal"><a href="http://cgwiki.comicgenesis.com/index.php/Comic:Invader_Scurk">Wiki</a></li>
                   <li class="horizontal"><a href="http://internet-ninja.deviantart.com/">Gallery</a></li>
                   </ul>
               </div>
              </div>
			             <div id="ad">
                            ***advertisement***
                         </div>
           <div id="footer">
           <p>Invader Scurk is hosted on <a href="http://www.comicgenesis.com/">Comic Genesis</a>, a free webhosting and site automation service for webcomics.<br><a href="http://cwcomics.comicgenesis.com/generator">Html assistance</a> by <a href="http://cwcomics.comicgenesis.com">c.w.</a><span class="csscredit"> - see css file for css author.</span></p>
           </div>
               </body>
               </html>

Also, you were right about the dailytemplate. All my other pages look really messed up, but I don't know exactly how to fix that. Dailytemplate:

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="Generator" content="ComicGenesis HTML Generator BETA-4.1">
<title>Invader Scurk - ***todays_date***</title>
<link rel="stylesheet" type="text/css" media="screen" href="/screen.css" >
<link rel="stylesheet" type="text/css" media="handheld" href="/handheld.css" >
<link rel="stylesheet" type="text/css" media="print" href="/print.css" >
</head>

<body>

<div id="ad">
***advertisement***
</div>

<div class="header">
	<h1 class="title"><a href="http://invaderscurk.comicgenesis.com">Invader Scurk</a></h1>
	<h2 class="subtitle">Height discrimination is still discrimination</h2>
	<h3 class="author">Written, drawn, and colored by Gabe Altomare</h3>
	<ul>
	<li id="mcontact"><a href="mailto:gabechat@charter.net">Contact</a></li>
	<li id="mforum"><a href="http://www.bungiehq.com/forum/index.php">Forum</a></li>
	<li id="mwiki"><a href="http://cgwiki.comicgenesis.com/index.php/Comic:Invader_Scurk">Wiki</a></li>
	<li id="mgallery"><a href="http://internet-ninja.deviantart.com/">Gallery</a></li>
	</ul>
</div>

<div class="main">
	<div id="abovenav" class="nav">
	<ul>
	<li class="first">***first_day***</li>
	<li class="previous">***previous_day***</li>
	<li class="next">***next_day***</li>
	<li class="last">***last_day***</li>
	</ul>
	</div>

		<div class="comic">
		***todays_comics***
		</div>

	<div id="belownav" class="nav">
	<ul>
	<li class="first">***first_day***</li>
	<li class="previous">***previous_day***</li>
	<li class="next">***next_day***</li>
	<li class="last">***last_day***</li>
	</ul>
	</div>
	***calendar***
</div>

<div class="news">
<h1>News</h1>
***todays_notes***
</div>

</div>
<div id="footer">
<p>Invader Scurk is hosted on <a href="http://www.comicgenesis.com/">Comic Genesis</a>, a free webhosting and site automation service for webcomics.<br><a href="http://cwcomics.comicgenesis.com/generator">Html assistance</a> by <a href="http://cwcomics.comicgenesis.com">c.w.</a><span class="csscredit"> - see css file for css author.</span></p>
</div>
</body>
</html>