HTML is Kicking My Ass. Halp.

Zappit · Apr 24, 2013

So I'm going to get Pixel going again after I finish A Good Cos, and I'm trying to clean up my site design, but it's been challenging, to say the least.

The biggest issue so far is getting the title into the right place. Right now it's below the navigation bar, and I can't get it into the space directly above the bar. Just to show what I mean...

http://pixel.thecomicseries.com/

I just can't for the life of me figure out what I'm missing here. Any help would be tremendously appreciated. Right now, this is my template code. Is there any way to get rid of that gray bar entirely and replace it with a title bar of my own design? If I can fix this, it would be the biggest hurdle. I could figure out the rest on my own...probably.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss/" />

<style type="text/css">

</style>
<script type="text/javascript" src="http://comicfury.com/cflayoutjs.js.php"></script>
</head>
<body>
<div id="container">
<div id="header">
<h1 id="sitetitle">
</h1>
</div>
<ul id="navigation">
<li><a href="/comics/">Comics</a></li>
<li><a href="/comics/first">First</a></li>
<li><a href="/comics/random">Random</a></li>
<li><a href="/">Home</a></li>
<li><a href="/archive/">Archive</a></li>
<li><a href="/blog/">Blog</a></li>
[c:searchon]
<li><a href="/search/">Search</a></li>
[/]
[l:extrapages]
<li><a href="[v:l.link]">[v:l.title]</a></li>
[/]
[c:!hidefromhost]
<li><a href="[v:addsubscriptionlink]">Subscribe</a></li>
[/]
</ul>
[c:banner]
<div id="banner"><img src="[v:banner]" alt="[v:webcomicname]" /></div>
[/]

[c:bannerads]

<div id="cf_ads">[v:banneradcode]</div>
[/]

[c:isextrapage]
<h2 class="heading">[v

agetitle]</h2>
<div class="afterheading">
[/]



[c:isextrapage]
</div>
[/]
[c:searchon]
[c:!issearch]
<form method="post" action="/search/">
<div id="searchbar"><input type="text" name="search" value="Search for comics" onclick="this.value = '';" /><input type="submit" value="Search" class="submit" /></div>
</form>
[/]
[/]
<div id="footer">
© [v:copyrights]<br />
<a href="/rss/">RSS</a> |
[c:!hidefromhost]
<a href="[v:comicprofile]">Comic Profile</a> |
[/]
<a href="http://comicfury.com">ComicFury</a> |
<a href="#">Top</a>
</div>
</div>
</body>
</html>

Chad Sexington · Apr 24, 2013

Have you tried turning it off and back on again?

Zappit · Apr 24, 2013

Chad Sexington said:
Have you tried turning it off and back on again?

You mean when I broke the site? If that counts, then yes. I have.

Gared · Apr 25, 2013

Drop this into the HTML editor of your choice and see if it does the trick for you.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss/" />
 
  <style type="text/css">
body {
background-color:#333333;
background-image:url("http://comicfury.com/images/layouts/bggrad.png");
background-repeat:repeat-x;
font-family:"Arial Narrow",sans-serif;
background-attachment: fixed;
text-align:center;
}
a {
text-decoration:none;
}
a:link {
color:#9F0000;
}
a:visited {
color:#940000;
}
a:hover {
color:#DB0000;
}
input,select {
color:#000000;
font-family:"Century Gothic","AppleGothic","MgOpen Modata","Avant Garde Gothic","Gill Sans","Gill Sans
 
MT",sans-serif;
margin:3px;
}
select {
width:350px; /*IE only*/
max-width:350px; /*for some reason, this doesn't work in IE7*/
}
*>/**/select {
width:auto !important; /*real browsers*/
}
#header {
height:90px;
background-color:#000000;
background-repeat:repeat-x;
position:relative;
}
#sitetitle {
margin:0px;
color:#FFFFFF;
position:absolute;
bottom: 5px;
right:5px;
text-align:right;
padding-right:8px;
font-family:"Century Gothic","AppleGothic","MgOpen Modata","Avant Garde Gothic","Gill Sans","Gill Sans
 
MT",sans-serif;
letter-spacing:-2px;
}
#navigation {
background:#A81A1A url("http://comicfury.com/images/layouts/rgrad.png") top left repeat-x;
text-align:center;
margin:0px;
padding:0px;
padding-top:20px;
padding-bottom:20px;
font-family:"Century Gothic","AppleGothic","MgOpen Modata","Avant Garde Gothic","Gill Sans","Gill Sans
 
MT",sans-serif;
}
#navigation li {
display:inline;
}
#navigation a,#navigation a:link,#navigation a:visited {
color:#FFFFFF;
font-weight:bold;
margin:2px;
padding:3px;
padding-top:20px;
padding-bottom:20px;
text-decoration:none;
}
#navigation a:hover {
background-color:rgba(255, 255, 255, 0.15) !important;
background-color:#CD2020;
}
#cf_ads {
display:table;
margin:auto;
text-align:center;
}
#container {
width:75%;
min-width:750px;
margin:auto;
border:5px solid white;
background-color:#FFFFFF;
display:table; /*sorta optional, this makes everything prettier but does not work in IE*/
overflow:visible !important;
overflow:hidden; /*this is needed to fix an IE6 bug*/
text-align:left;
}
 
#banner {
text-align:center;
margin:20px;
}
 
 
.reply {
margin-left:40px;
}
 
/*st*/
.heading {
color:#000000;
margin:2px;
font-weight:bold;
font-size:32px;
font-family:"Century Gothic","AppleGothic","MgOpen Modata","Avant Garde Gothic","Gill Sans","Gill Sans
 
MT",sans-serif;
letter-spacing:-2px;
}
.headingsub {
font-size:18px;
letter-spacing:1px;
}
.afterheading {
margin-left:20px;
margin-right:20px;
margin-top:4px;
}
.paddingfix {
margin:10px;
}
#searchbar {
text-align:right;
float:right;
}
.clear {
clear:both;
}
/*comicpage*/
.authordata a,.authordata a:visited.authordata a:link,.commentcontrol a,.commentcontrol
 
a:visited.commentcontrol a:link {
color:#333333;
}
.authordata a:hover,.commentcontrol a:hover {
color:#666666;
}
#comicimagewrap {
text-align:center;
margin:15px;
}
#comicimagewrap img {
border:1px solid black;
}
#crright {
float:right;
}
#votenumber {
font-size:13px;
}
#crleft {
float:left;
}
#comicnav {
margin:20px;
text-align:center;
}
.comicnavlink {
margin-left:10px;
margin-right:10px;
}
.commentdata {
border:2px solid #CCCCCC;
background-color:#DDDDDD;
padding:4px;
padding-left:8px;
padding-right:8px;
}
.commentdata span {
float:left;
}
.commentcontrol {
float:right !important;
}
.posttime {
margin-left:16px;
color:#777777;
}
.avatar {
float:left;
margin-right:3px;
margin-bottom:3px;
}
.commenttext {
}
.commentcontent {
margin:5px;
margin-left:20px;
margin-right:20px;
}
.permalinkcode {
font-size:13px;
font-weight:normal;
margin-left:10px;
margin-right:10px;
}
.postcomment {
margin-top:15px;
font-size:20px;
}
#authornotes {
margin-bottom:20px;
}
/*search*/
#bigsearchbox {
width:500px;
}
#searchresults {
list-style:decimal;
}
.searchposttime {
color:#777777;
margin-left:2px;
}
/*overview*/
#latestcomic {
text-align:center;
}
#latestcomiclink {
border:0px;
}
#latestcomiclink img {
border:1px solid black;
}
/*blog*/
.blogtitle {
font-weight:bold;
font-size:20px;
color:#333333;
border-bottom:1px solid #999999;
}
.blogauthor {
margin:10px;
margin-top:0px;
margin-bottom:0px;
color:#777777;
border-bottom:1px solid #AAAAAA;
}
.blogcontent {
margin:16px;
margin-top:2px;
font-size:14px;
}
/*archive*/
.chaptertitle {
 
font-weight:bold;
font-size:20px;
color:#333333;
border-bottom:1px solid #999999;
}
.chaptertitlesub {
 
margin:10px;
margin-top:0px;
margin-bottom:0px;
color:#777777;
border-bottom:1px solid #AAAAAA;
}
#archive {
list-style:none;
padding:0px;
}
.archivecomic {
margin:10px;
margin-left:30px;
list-style:square;
}
/*blog archive*/
#blogarchive {
float:right;
width:24%;
padding:2px;
margin:0px;
list-style:none;
}
#blogs {
float:left;
width:72%;
}
 
 
  </style>
  <script type="text/javascript" src="http://comicfury.com/cflayoutjs.js.php"></script>
</head>
<body>
  <div id="container">
<div id="header">
<div id="banner"><img src="http://comicfury.com/comicbans/50/7375_943364.jpg" alt="Pixel" /></div>
 
    <h1 id="sitetitle">
    </h1>
</div>
  <ul id="navigation">
    <li><a href="/comics/">Comics</a></li>
    <li><a href="/comics/first">First</a></li>
    <li><a href="/comics/random">Random</a></li>
    <li><a href="/">Home</a></li>
    <li><a href="/archive/">Archive</a></li>
    <li><a href="/blog/">Blog</a></li>
 
      <li><a href="/search/">Search</a></li>
 
 
      <li><a href="/links/">Links</a></li>
 
 
      <li><a href="http://comicfury.com/comic.php?action=addsubscription&amp;cid=7375">Subscribe</a></li>
 
  </ul>
 
 
 
 
 
 
 
 
        <h2 class="heading">Comic 26 - Page 26</h2>
    <div class="afterheading">
      <div class="headingsub"><b>12th Dec 2012, 10:50 PM</b>
   
      </div>
      <div id="comicimagewrap"><img
 
src="http://pixel.thecomicseries.com/images/comics/59/f3d90043c3f4eff9d26857fb780cfd7f2081775598.png" alt="Page
 
26" title="" id="comicimage" /></div>
   
      <div id="comicrating">
        <div id="crleft"><b>Average Rating:</b> 0 <span id="votenumber">(0 votes)</span></div>
        <div id="crright"><a href="http://comicfury.com//ratecomic.php?id=252158" onclick='window.open
 
("http://comicfury.com//ratecomic.php?id=252158","edit","menubar=no,width=530,height=360,toolbar=no"); return
 
false;' target="window" id="ratelink">Rate this comic</a></div>
      </div>
      <div class="clear"></div>
   
 
      <div id="comicnav">
      <a href="/comics/first/" rel="start" class="comicnavlink">&lt;&lt;First</a>
      <a href="/comics/25" rel="prev" class="comicnavlink">&lt;Previous</a>
 
      <!--comment:[comic dropdown:]-->
        <select onchange="jumpTo(this.options[selectedIndex].value);" class="comicnavlink">
     
          <option value="/comics/1/" >Page 1</option>
     
          <option value="/comics/2/" >Page 2</option>
     
          <option value="/comics/3/" >Page 3</option>
     
          <option value="/comics/4/" >Page 4</option>
     
          <option value="/comics/5/" >Page 5</option>
     
          <option value="/comics/6/" >Page 6</option>
     
          <option value="/comics/7/" >Page 7</option>
     
          <option value="/comics/8/" >Page 8</option>
     
          <option value="/comics/9/" >Page 9</option>
     
          <option value="/comics/10/" >Page 10</option>
     
          <option value="/comics/11/" >Page 11</option>
     
          <option value="/comics/12/" >Page 12</option>
     
          <option value="/comics/13/" >Page 13</option>
     
          <option value="/comics/14/" >Page 14</option>
     
          <option value="/comics/15/" >Page 15</option>
     
          <option value="/comics/16/" >Page 16</option>
     
          <option value="/comics/17/" >Page 17</option>
     
          <option value="/comics/18/" >Page 18</option>
     
          <option value="/comics/19/" >Page 19</option>
     
          <option value="/comics/20/" >Page 20</option>
     
          <option value="/comics/21/" >page 21</option>
     
          <option value="/comics/22/" >Page 22</option>
     
          <option value="/comics/23/" >Page 23</option>
     
          <option value="/comics/24/" >Page 24</option>
     
          <option value="/comics/25/" >Page 25</option>
     
          <option value="/comics/26/" selected="selected">Page 26</option>
     
        </select>
 
      <a href="/comics/" rel="next" class="comicnavlink">Next&gt;</a>
      <a href="/comics/" rel="index" class="comicnavlink">Latest&gt;&gt;</a>
 
      </div>
    </div>
 
 
    <h2 class="heading">Author Notes:</h2>
      <div class="afterheading">
      <div id="authornotes">
     
 
          <div class="comment">
            <div class="commentdata">
            <span class="authordata">
              <a href="http://comicfury.com/profile.php?username=Zappit"><b>Zappit</b></a>
            </span>
            <span class="posttime">12th Dec 2012, 10:50 PM</span>
            <span class="commentcontrol cc cc9815">
              <a href="http://comicfury.com/editcomment.php?id=435258" onclick='window.open
 
("http://comicfury.com/editcomment.php?id=435258","edit","menubar=no,width=530,height=360,toolbar=no"); return
 
false;' target="windowedit">edit</a>
              <a href="http://comicfury.com/editcomment.php?delete=1&amp;id=435258" onclick='window.open
 
("http://comicfury.com/editcomment.php?
 
delete=1&amp;id=435258","delete","menubar=no,width=530,height=360,toolbar=no"); return false;'
 
target="windowdelete">delete</a>
            </span>
            <div class="clear"></div>
            </div>
            <div class="commentcontent">
         
              <div class="avatar">
              <img src="http://comicfury.com/useravatars/9815" alt="Zappit" /><br />
              </div>
         
            <span class="commenttext">
              Little late, but here it is!
            </span>
            </div>
          </div>
          <div class="clear"></div>
     
      </div>
    </div>
 
 
 
 
 
 
 
 
 
   
 
     
        <div class="postcomment"><a href="http://comicfury.com/leavecomment.php?id=252158"
 
onclick='window.open("http://comicfury.com/leavecomment.php?
 
id=252158","edit","menubar=no,width=530,height=360,toolbar=no"); return false;' target="window">Post a
 
Comment</a></div>
     
        <br />
     
 
 
 
 
 
    <form method="post" action="/search/">
      <div id="searchbar"><input type="text" name="search" value="Search for comics" onclick="this.value = '';"
 
/><input type="submit" value="Search" class="submit" /></div>
    </form>
 
 
  <div id="footer">
  &copy; 2011 - 2013 Comic author<br />
  <a href="/rss/">RSS</a> |
 
    <a href="http://comicfury.com/comicprofile.php?url=pixel">Comic Profile</a> |
 
  <a href="http://comicfury.com">ComicFury</a> |
  <a href="#">Top</a>
  </div>
  </div>
</body>
</html>

Zappit · Apr 25, 2013

You, sir, are fantastic! If I could send actual cookies through the forum, you'd be swimming in Oreoes right now.

But seriously, thank you.

Gared · Apr 25, 2013

You're welcome, Zappit. If you want/need to know what I changed, let me know, and I can walk you through it.

Zappit · Apr 25, 2013

That might help. I was planning on updating the title banner anyway, so it might be good to know just where I need to place the new image.

Gared · Apr 25, 2013

I stuck the image right after the "banner" div tag in the body section, then in the CSS section, I changed the 'height' property of the "#header" definition to 90px to match the height of the image, and deleted the 'background-image' property to get rid of that gradient from black to gray. The background color for that section was already set to black.

Zappit · Apr 25, 2013

Oh. I never changed any of that in the CSS section. That would do it. So if I were to replace the header image, I'd need to change it in both forms and set the size in order to get it to fit. I think I understand that, now.

Gared · Apr 25, 2013

Yep, that would take care of it.

Zappit · May 8, 2013

So...I updated Pixel, and the site was borked. It wouldn't show the new strip, nor did the navigation work. I uploaded a new template, so it will need some work. I wanted to update anyway.

Edit...you know what...I think I got it, and I like it, too.

Gared · May 9, 2013

Looks pretty good. I like this template a lot more than the last one.