Username: Password:   Forgot your password?
 
Forums
» View Categories » Coding Help & Templates » Oh Gawd Help (Centering, Etc.)
Previous 30
Page of 1 Next 30

Member:3,897
Posts:403
Joined:5-23-2006
Seen:11-24-2009
Dec 8,`08 9:38pm | Quote | ↓
So, I got a couple of comments on one of my comics saying the comic page itself is way off to the side and that you must scroll to see it.

After hearing this, I thoroughly crapped myself, as the comic shows up within the content area box for me in every browser I use on every OS.

The layout SHOULD look like this:

http://i26.photobucket.com/albums/c146/senshuu/stuff/lf_dd_ff_osx-1.jpg
http://i26.photobucket.com/albums/c146/senshuu/stuff/lf_dd_ff_win.jpg

If it shows up any differently for anyone else, let me know. I have no idea what to do, though. o_o

Oh, on that note. I know the little ad currently behind the comic usually goes below it, and I have no idea how to fix that here. Works for my other comic's layout, though. Apparently sometimes it'll pop up and block this one, and it's bad-looking besides. Help?

This layout uses a slightly modified version of the css from one of my main site's layouts (it's totally css-controlled), so it might be a little odd.

Any help would be appreciated...and thank you :D
 
Member:60,304
Posts:144
Joined:8-5-2008
Seen:3-11-2009
Dec 9,`08 2:21am | Quote | ↓
Hm, I had a bit of a look at your comic to see if I could spot the problem. I couldn't see any problems when viewing the page with Firefox 3, but it's popping up as clear as ever when viewing it in Internet Explorer.

Though I might be wrong, I did notice a bit of an oddity about the table in which the page is located. I'm also a bit curious why a menu from the other site you linked to shows up in the comic's source code (but you did mention that it's a slightly modified version of the layout of another website of yours).

It would be great if you could post the raw HTML you've used for the comic, as that will make it a bit easier to spot the problem than digging through the source code of a single page where the DD tags have been parsed and all the extra stuff (like the notes, comments and so on) shows.

This post was last edited on Dec 9,`08 2:42am
 
Member:3,897
Posts:403
Joined:5-23-2006
Seen:11-24-2009
Dec 9,`08 2:44am | Quote | ↓
Do you think having the menu here is superfluous too? I was thinking of taking it out, but if people wanted to check out other parts of the main site, the nav is right there for them to get to.

Oh, raw HTML, of course:



<!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" dir="ltr">
<head>
<title>LOVEFEAST @ DD</title>
<meta name="Description" content="The Institution for Training in the Arts of Death (or The Institute) is a ground brimming with people from all over striving to become the world's next gods of death." />
<meta name="Keywords" content="web, comic, webcomic, manga, online comic, web comic, webmanga, online manga, anime, comedy, humor, webcomics, online comics, fantasy, yaoi, bl, boy's love, smackjeeves, mirror" />
<meta name="robots" content="index" />
<meta name="Language" content="EN" />
<link rel="SHORTCUT ICON" href="http://lf.senshuu.com/lf.ico" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<script type="text/javascript" src="js/commonlf.js"></script>

<style type="text/css">

a:link {color:#FFB05A;text-decoration:none;}
a:visited {color:#E35B00;text-decoration:none;}
a:hover {color:#FFEBB0; cursor: crosshair;}
a:active {color:#FFFFFF;}
a {cursor:crosshair;}
img {border-width: 0px;}
#navigation img, .lowercenter hr {display: none;}

body {
background:#990E00 url(gfx/bg1.jpg) repeat fixed top left;
font-family: Arial, Verdana, Helvetica, sans-serif;
color: #282927;
cursor: default;
font-size: 12px;
text-align: center;
}

input, textarea {
font-size: 13px;
color:#FFFFFF;
background: #E00000 url(gfx/bg1.jpg);
border: 1px solid #E00000;
text-align: left;
}

#container {margin: 0 auto;width: 720px;position:relative}

#main {
width: 700px;
z-index:0;
text-align: center;
position:absolute;
top: 140px;
}

#header {
z-index:1;
position: relative;
left: 100px;
top: 1px;
background: url(gfx/top1.png) no-repeat;
width: 500px;
height: 100px;
}

#navigation {
position: relative;
top: 5px;
left: 100px;
height: 90px;
width: 500px;
z-index:2;
}

#content, .content {background: #FFFFFF;}
#content, .content form {margin:0 auto;width: 100%;text-align: center;}
#main .topleft {background:none;}
#main .topcenter {background: url(gfx/1-top.png) repeat-x;}
#main .topright {background:none;}
#main .sideleft {background: url(gfx/1-left.png) repeat-y;}
#main .sideright {background: url(gfx/1-right.png) repeat-y;}
#main .lowerleft {background:none;}
#main .lowercenter {background: url(gfx/1-bottom.png) repeat-x;}
#main .lowerright {background:none;}

#nav, #nav ul {
float: left;
width: 100%;
list-style: none;
line-height: 1;
background: white;
font-weight: bold;
padding: 0;
margin: 0 0 1em 0;
}

#nav a {
display: block;
width: 10em;
w\idth: 6em;
color: #E00000;
text-decoration: none;
padding: 0.25em 2.2em;
}

#nav li {float: left;padding: 0;width: 10em;}

#nav li ul {
position: absolute;
left: -999em;
height: auto;
width: 14.4em;
w\idth: 13.9em;
font-weight: normal;
border-width: 0.25em;
margin: 0;
}

#nav li li {padding-right: 1em;width: 13em;}

#nav li ul a {
width: 13em;
w\idth: 9em;
}

#nav li ul ul {
margin: -1.75em 0 0 14em;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}

#nav li:hover, #nav li.sfhover {
background: #990E00;
}

.spacer {width:500px;height:100px;}
.spacer2 {width: 25px;height:20px;}

.important {
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 15px;
font-weight: bolder;
text-transform: uppercase;
color: #FF0000;
}

h1 {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 26px;
color: #F4614A;
font-weight: bold;
font-style: italic;
}

h2 {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 16px;
color: #F4614A;
font-weight: bold;
font-style: italic;
}

.inside {width: 550px;margin: 0 auto;text-align:center;}
.reading {font-size: 12px;text-align: left;}
.cancan {border: 1px solid #000000;}
.sparklies {background: url(sparklies.gif) fixed repeat;}

</style>

</head>

<body>

<div id="container">

<!-- Header time! -->

<div id="header">

<a href="index2.php"><img class="spacer" src="gfx/spacer.gif" alt="" /></a>

</div>

<!-- No more header! -->

<!-- Navigation. Here goes! -->

<div id="navigation">

<ul id="nav">
<li><a href="#">Home</a></li>

<li><a href="#">Comic</a>
<ul>
<li><a href="http://lf.senshuu.com/pages/">Archives</a></li>
<li><a href="http://lf.senshuu.com/pages/thumb.php">Thumbnails</a></li>
</ul>
</li>
<li><a href="http://lf.senshuu.com/artwork.php">Galleries</a>
<ul>
<li><a href="http://lf.senshuu.com/artwork.php">Artwork</a></li>
<li><a href="http://lf.senshuu.com/develop.php">Development</a></li>
<li><a href="http://lf.senshuu.com/commish.php">Commissions</a></li>
</ul>
</li>

<li><a href="http://lf.senshuu.com/fanstuff.php">Fanstuff</a>
<ul>
<li><a href="http://lf.senshuu.com/fanart.php">Fanart</a></li>
<li><a href="#">Doujinshi</a></li>
<li><a href="#">Fanfiction</a></li>
<li><a href="#">Cosplay</a></li>
<li><a href="mailto:unify.night@gmail.com">Contribute!</a></li>
</ul>
</li>

<li><a href="http://lf.senshuu.com/extra.php">Extras</a>
<ul>
<li><a href="http://lf.senshuu.com/download.php">Downloads</a></li>
<li><a href="http://lf.senshuu.com/ost.php">Voices & Soundtrack</a></li>
<li><a href="http://lf.senshuu.com/contest.php">Contests</a></li>
<li><a href="http://lf.senshuu.com/int.php">Character Interviews</a></li>
<li><a href="http://lf.senshuu.com/thanks.php">Special Thanks</a></li>

<li><a href="http://lf.senshuu.com/link.php">Links</a></li>
</ul>
</li>

<li><a href="http://lf.senshuu.com/info.php">Info</a>
<ul>
<li><a href="http://lf.senshuu.com/faqs.php">FAQs</a></li>
<li><a href="http://lf.senshuu.com/cast.php">Dramatis Personæ</a></li>
<li><a href="http://lf.senshuu.com/guide.php">Shinigami Starter's Guide</a></li>
<li><a href="http://lf.senshuu.com/about.php">The World</a></li>
<li><a href="http://lf.senshuu.com/onisouls.php">Great Oni List</a></li>
<li><a href="http://lf.senshuu.com/comic.php">About the Comic</a></li>
<li><a href="http://lf.senshuu.com/author.php">Author</a></li>
<li><a href="../support.php">Support</a></li>
</ul>
</li>

<li><a href="http://senshuu.com/forums/"><img src="forums.gif" alt="Forums" />Forums</a></li>
<li><a href="http://lf.senshuu.com/store.php"><img src="store.gif" alt="Store" />Store</a></li>
</ul>

</div>

<!-- End Navigation. -->

<!-- Main content/update area! -->

<table id="main" cellpadding="0" cellspacing="0">

<tr> <td class="topleft"><img src="gfx/spacer.gif" class="spacer2" alt="" /></td> <td class="topcenter"><img src="gfx/spacer.gif" class="spacer2" alt="" /></td> <td class="topright"><img src="gfx/spacer.gif" class="spacer2" alt="" /></td> </tr>

<tr> <td class="sideleft"><img src="gfx/spacer.gif" class="spacer2" alt="" /></td> <td class="content">

<div class="inside">

<div style="margin:0 auto;"><!--[PAGE]--></div>

<p><!--[NAV_FIRST]--> <!--[NAV_PREVIOUS]--> <!--[NAV_NEXT]--> <!--[NAV_LAST]--></p>
<!--[RSS]--><!--[PAGE_DROPDOWN]-->

<div style="margin:0 auto;"><!--[AUTHORS_NOTES]--></div>

<p>Updates every Tuesday! Except when it doesn't.</p>

<p>
<img src="http://lf.senshuu.com/twc.jpg" width="50" height="80" alt="TWC Incentive Preview" class="cancan" /> <img src="http://lf.senshuu.com/bcx.jpg" width="50" height="80" alt="Buzz Incentive Preview" class="cancan" /><br />

<a href="http://topwebcomics.com/vote/7262/default.aspx"><img src="http://topwebcomics.com/rankimages/rankimage.aspx?ImageTemplate=dynamiclink1&SiteID=7262" alt="Vote for LOVEFEAST on TopWebComics!" /></a>
<a href="http://www.buzzcomix.net/in.php?cid=11484"><img src="http://www.buzzcomix.net/vote/vote-small-rank.php?cid=11484" alt="Vote Buzz!" /></a>
<br />

<a href="http://thewebcomiclist.com/p/11636/LOVEFEAST"><img src="http://thewebcomiclist.com/myranking.php?id=11636" alt="The Webcomic List - LOVEFEAST" /></a>
</p>

<!--[COMMENTS=400]-->
<!--[COMMENT_FORM=400,200]-->


<table style="margin:0 auto;" line-height:0;> <tr> <td>

<!-- Rubifruit Exchange code begin -->
<script language="JavaScript" type="text/javascript">
<!--
document.write('<s'+'cript language="JavaScript" src="http://exchange.rubifruit.com//work.php?n=188&size=3&j=1&c=2-3-4&code='+new Date().getTime()+'"></s'+'cript>';
// -->
</script>
<noscript>
<iframe src="http://exchange.rubifruit.com//work.php?n=188&size=3&c=2-3-4" width="125" height="125" style=" margin:0 ; border: 0; overflow: hidden;"></iframe>
</noscript>
<!-- Rubifruit Exchange code end -->

</td> <td>

<!-- Rubifruit Exchange code begin -->
<script language="JavaScript" type="text/javascript">
<!--
document.write('<s'+'cript language="JavaScript" src="http://exchange.rubifruit.com//work.php?n=188&size=3&j=1&c=2-3-4&code='+new Date().getTime()+'"></s'+'cript>';
// -->
</script>
<noscript>
<iframe src="http://exchange.rubifruit.com//work.php?n=188&size=3&c=2-3-4" width="125" height="125" style=" margin:0 ; border: 0; overflow: hidden;"></iframe>
</noscript>
<!-- Rubifruit Exchange code end -->

</td> <td>

<!-- Rubifruit Exchange code begin -->
<script language="JavaScript" type="text/javascript">
<!--
document.write('<s'+'cript language="JavaScript" src="http://exchange.rubifruit.com//work.php?n=188&size=3&j=1&c=2-3-4&code='+new Date().getTime()+'"></s'+'cript>';
// -->
</script>
<noscript>
<iframe src="http://exchange.rubifruit.com//work.php?n=188&size=3&c=2-3-4" width="125" height="125" style=" margin:0 ; border: 0; overflow: hidden;"></iframe>
</noscript>
<!-- Rubifruit Exchange code end -->

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

<!-- End main content! -->


</div>

</td> <td class="sideright"><img src="gfx/spacer.gif" class="spacer2" alt="" /></td> </tr>

<!-- Main Footer. -->

<tr> <td class="lowerleft"><img src="gfx/spacer.gif" class="spacer2" alt="" /></td> <td class="lowercenter">

<small>This is a mirror site.</small>

<small><em>Lovefeast</em> site, characters, and content copyright © 2008 Jessica "Senshuu" Cantlope unless stated otherwise. Ask permission before using anything. All rights reserved. unify.night[at]gmail.com</small>

</td> <td class="lowerright"><img src="gfx/spacer.gif" class="spacer2" alt="" /></td> </tr>

<!-- End Main Footer. -->

</table>

</div>

</body>
</html>


Here's hoping that worked because it kept submitting the reply instead of inserting a tag when I clicked "code". c_c EDIT yay it did.

I would note that all this stuff's all valid on the main site (not counting the front page with all the extra crap on it). But I could have overlooked something when modifying it for here~

I hope it's not messed up on Smackjeeves too. I'll link it just to be sure: http://lovefeast.smackjeeves.com

This post was last edited on Dec 9,`08 2:50am
 
Member:60,304
Posts:144
Joined:8-5-2008
Seen:3-11-2009
Dec 9,`08 3:34am | Quote | ↓
To be honest with you, the use of z-index has never quite been my strong side when it comes to web design. Can't say I'm exactly fond of it.

Anyways, I took the liberty to look around at the various places where you've got that comic of yours, viewing them in various browsers. They're all showing fine and proper in FireFox, whereas when viewed in Internet Explorer the page keeps leaning too far to one side.

The reasons behind this is most likely that IE has notorious problems when it comes to positioning elements using a z-index. There are some usable, albeit a bit cheap, solutions to such z-index positioning problems.

One you could try is this CSS hack, just to put it in the stylesheet and hope for success;
Someone Said:
body {
background: url("
javascript:
document.body.onload = function(){
var xbutton = document.getElementById('xbutton');
if (xbutton) {
xbutton.style.zIndex = 9999;
}
}
");
}


And if that doesn't work.. well, I know my knowledge in the area wouldn't be of much use. Judging by the layout of the comic, though, you could try to redesign it without the use of z-index values.

This post was last edited on Dec 9,`08 3:34am
 
Member:3,897
Posts:403
Joined:5-23-2006
Seen:11-24-2009
Dec 9,`08 3:58am | Quote | ↓
Oh. Oh! Let's see. I really don't need z-index for mirrors, so I could just take out that code and see if that helps.

I tend to ignore IE when coding, which is bad, since I forget people still use it. Let's tinker!

EDIT And now I've taken out all the z-indexes on my mirror sites. I just took a look at everything on IE and they look the same as everywhere else, but it might be because I'm using IE8 Beta. The main site with z-indexes left in looks fine, too. Hmmmmm

Could you take a screencap if it's still wonky so I know just how bad it is?

Oh, and is it possible to integrate that nasty hack into the body tag if there's already a background url there? ()

This post was last edited on Dec 9,`08 4:23am
 
Member:60,304
Posts:144
Joined:8-5-2008
Seen:3-11-2009
Dec 9,`08 5:49am | Quote | ↓
The fact that you're using IE8 might be the reason why you're not experiencing it - perhaps finally Microsoft have built a proper z-index support into their browser, heh.

Can't say there's much difference to see, though - the comic page itself still shifts somewhat off to the side in browsers like IE6 and IE7.

As for multiple backgrounds.. it should be doable, from my knowledge, providing you define information for each of the backgrounds.

Say you do try to use multiple backgrounds, you could write it something like this;

.stuff {

background-color: #FFFFFF;

background-image: url("url1"), url("url2");

background-repeat: no-repeat, repeat;

background-position: bottom, top-left;


But now I'm speculating; I haven't exactly tried something like that myself, but I've heard that it's possible.

This post was last edited on Dec 9,`08 6:22am
 
Member:3,897
Posts:403
Joined:5-23-2006
Seen:11-24-2009
Dec 9,`08 8:45pm | Quote | ↓
Ohh, I'll try it.
I know multiple backgrounds are going to be a part of CSS3, but CSS3 is still budding. (Unfortunately. CSS3 would make my layouts 200% easier to do.)

All right, I put the hack in, but only after having defined another background property and not separating them out like that. Anything changed? I notice the thing that's supposed to go at the bottom of pages is still behind the main area. c_c;

This post was last edited on Dec 9,`08 9:35pm
 
Member:60,304
Posts:144
Joined:8-5-2008
Seen:3-11-2009
Dec 12,`08 2:06am | Quote | ↓
Hm, still looks a bit off to the side in some older browsers, and I think the (new) second background element only parse in some of the newer browsers.

Designing websites with older browsers in mind can be a pain, don't you agree? Looking at the general layout of the website, though, I'd say it would be possible to rewrite the layout by some of the old-fashioned, cross-browser ways.
 
Member:3,897
Posts:403
Joined:5-23-2006
Seen:11-24-2009
Dec 12,`08 2:18am | Quote | ↓
I'll look into that, then. The more I think of it, actually, I could probably do a few things differently here because the setup's different from the main site. ...As long as the main one isn't terribly messed up. e__e;

Thanks for all your help, by the way. :D
 
Member:60,304
Posts:144
Joined:8-5-2008
Seen:3-11-2009
Dec 12,`08 2:32am | Quote | ↓
It was nothing. Just shame I couldn't help you find a way to get it to work without a lot of code rewriting, heh.
 
Member:3,897
Posts:403
Joined:5-23-2006
Seen:11-24-2009
Dec 12,`08 2:39am | Quote | ↓
Ohh, I thought of something. How does it look now? *_*;

I really do wish I could check it myself, but all the computers in this house are super-updated in regards to browsers...lol XD
 
Member:60,304
Posts:144
Joined:8-5-2008
Seen:3-11-2009
Dec 12,`08 3:03am | Quote | ↓
Looks all neat and center-aligned to me - the DD item that should be at the bottom of the page has found it's right place now, as well.

Though I'd suggest correcting the data in the Body field, as the way the z-index hack has been put in place is keeping the actual background from showing in some browsers.

Also, an alignment fix in the title and navigation area would be an idea. The page content in a whole is center-aligned, but the title image and navigation bar has bumped off to the right.

Here's an image to show what I mean; http://i36.tinypic.com/2zsqn8n.png

The top part shows how the page appears when viewed in IE7 and older, the bottom shows how the elements appear to be aligned. If nothing else, it's better than previously.
 
Member:3,897
Posts:403
Joined:5-23-2006
Seen:11-24-2009
Dec 12,`08 3:22am | Quote | ↓
Yay! I win!

I mean... I fixed the body stuff. XD Oh, regarding the title/nav being off-center, it actually kept showing up left-aligned for me when I took the positioning off them (and I have no idea why, they should center like the main content), so I just put it back. Hmmm...
 
Member:60,304
Posts:144
Joined:8-5-2008
Seen:3-11-2009
Dec 12,`08 5:01am | Quote | ↓
With those last changes, things look just about right to me, both in Firefox and Internet Explorer.
 
Member:3,897
Posts:403
Joined:5-23-2006
Seen:11-24-2009
Dec 12,`08 5:12am | Quote | ↓
Woo! *happy dance*

I just realized I still have old IE5 on my mac and looked at all my sites in it just for fun, lol... and while some things are kind of blah it's still not as bad as I thought. XD (But some of my text within divs doesn't center correctly in it. Who knows why. LOL MAC IE5)

Biz3 you are my friend forever.
 
Member:60,304
Posts:144
Joined:8-5-2008
Seen:3-11-2009
Dec 12,`08 5:19am | Quote | ↓
Hehe, cheers.

Previous 30
Page of 1 Next 30

Reply
 

Not Registered?
Signup for a FREE Account!


Registered users can:
Comment on comics!
Create their own comics!
Vote in polls and contests!
Use the forums!
   Latest News
   DD Cam (Now Featuring: DDBook)