My I have run into some issues with my webcomic. The comic is in a strip format, I would like the reader to see the entire strip without having to change how I draw the comic. I believe that panel - by - panel is the best way to show my comic. My issue is that, whenever someone logs onto the main page, the comic is shifted automatically to the left and the user has to scroll to the right in order to read the whole comic.
I have tried to alter the HTML code so that the image(comic) is in the middle of the webpage, but I'm very new to HTML and I can't figure out where I need to alter the code.
here is a link to my comic,
http://georgeandpinhead.smackjeeves.com
Image not focused right, HTML help
Moderator: Help Desk Team
4 posts • Page 1 of 1
Image not focused right, HTML help
by DelRio1991 » August 27th, 2011, 12:58 pm
- DelRio1991
- Posts: 3
- Joined: April 19th, 2011, 4:48 pm
Re: Image not focused right, HTML help
by DelRio1991 » August 27th, 2011, 1:02 pm
This is the HTML for the Webcomic. To clarify, I would like to shift the entire comic image to the left, instead of having a hanging piece to the right.
I have tried to change the code so that it will appear how I want it, but with no avail.
I would really appreciate some assistance so I can not only improve my comic, but maybe learn some HTML in the process
<!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" xml:lang="en" lang="en">
<head>
<title>{SITE_NAME} - {PAGE_TITLE}</title>
<style type="text/css">
@import url("http://www.smackjeeves.com/templates/default/default_jumpbox.css");
body {
background: url(http://www.smackjeeves.com/templates/bl ... 1_blue.png) repeat;
margin:0;
padding:20px 10px;
text-align:center;
font:x-small/1.5em "Trebuchet MS",Verdana,Arial,Sans-serif;
color:#333;
font-size/* */:/**/small;
font-size: /**/small;
}
/* Page Structure
----------------------------------------------- */
/* The images which help create rounded corners depend on the
following widths and measurements. If you want to change
these measurements, the images will also need to change.
*/
@media all {
#content {
width:740px;
margin:0 auto;
text-align:left;
}
#main {
width:740px;
float:middle;
background:#fff url("http://img85.imageshack.us/img85/9475/cornersmainbotet8.gif") no-repeat left bottom;
margin:15px 0 0;
padding:0 0 10px;
color:#000;
font-size:97%;
line-height:1.5em;
}
#main2 {
float:left;
width:100%;
background:url("http://img85.imageshack.us/img85/2315/cornersmaintopgd3.gif") no-repeat left top;
padding:10px 0 0;
}
#main3 {
background:url("http://img85.imageshack.us/img85/2887/railsmainkk5.gif") repeat-y;
padding:0;
}
#sidebar {
width:240px;
float:right;
margin:15px 0 0;
font-size:97%;
line-height:1.5em;
}
}
@media handheld {
#content {
width:90%;
}
#main {
width:100%;
float:none;
background:#fff;
}
#main2 {
float:none;
background:none;
}
#main3 {
background:none;
padding:0;
}
#sidebar {
width:100%;
float:none;
}
}
/* Links
----------------------------------------------- */
a:link {
color:#c63;
}
a:visited {
color:#c63;
}
a:hover {
color:#c63;
}
a img {
border-width:0;
}
#nav a:link, #nav a:visited
{
color: white;
background: #778A9B;
display: inline-block;
padding: 4px 7px;
margin: 2px;
text-decoration: none;
}
#nav a:hover
{
background: #8094A7;
}
/* Blog Header
----------------------------------------------- */
@media all {
#header {
background:#456 url("http://www.smackjeeves.com/templates/blingmobile/images/header-bg.png") no-repeat left top;
margin:0 0 0;
padding:8px 0 0;
color:#fff;
}
#header-bottom {
background:url("http://www.smackjeeves.com/templates/blingmobile/images/header-bg.png") no-repeat left bottom;
padding:0 15px 8px;
}
}
@media handheld {
#header {
background:#456;
}
#header div {
background:none;
}
}
#blog-title {
margin:0;
padding:10px 30px 5px;
font-size:200%;
line-height:1.2em;
}
#blog-title a {
text-decoration:none;
color:#fff;
}
#description {
margin:0;
padding:5px 30px 10px;
font-size:94%;
line-height:1.5em;
}
#nav
{
text-align: center;
}
/* Posts
----------------------------------------------- */
.post {
margin:.3em 0 25px;
padding:0 13px;
border:1px dotted #bbb;
border-width:1px 0;
}
.post-title {
margin:0;
font-size:135%;
line-height:1.5em;
background:url("http://www.blogblog.com/rounders/icon_arrow.gif") no-repeat 10px .5em;
display:block;
border:1px dotted #bbb;
border-width:0 1px 1px;
padding:2px 14px 2px 29px;
color:#333;
background:#ded;
}
a.title-link, .post-title strong {
text-decoration:none;
display:block;
}
a.title-link:hover {
background-color:#ded;
color:#000;
}
.post-body {
border:1px dotted #bbb;
border-width:0 1px 1px;
border-bottom-color:#fff;
padding:10px 14px 1px 29px;
}
html>body .post-body {
border-bottom-width:0;
}
.post p {
margin:0 0 .75em;
}
p.post-footer {
margin:0;
padding:2px 14px 2px 29px;
border:1px dotted #bbb;
border-width:1px;
border-bottom:1px solid #eee;
font-size:100%;
line-height:1.5em;
color:#666;
text-align:right;
}
html>body p.post-footer {
border-bottom-color:transparent;
}
p.post-footer em {
display:block;
float:left;
text-align:left;
font-style:normal;
}
a.comment-link {
/* IE5.0/Win doesn't apply padding to inline elements,
so we hide these two declarations from it */
background/* */:/**/url("http://www.blogblog.com/rounders/icon_comment.gif") no-repeat 0 45%;
padding-left:14px;
}
html>body a.comment-link {
/* Respecified, for IE5/Mac's benefit */
background:url("http://www.blogblog.com/rounders/icon_comment.gif") no-repeat 0 45%;
padding-left:14px;
}
.post img {
margin:0 0 5px 0;
padding:4px;
border:1px solid #ccc;
}
blockquote {
margin:.75em 0;
border:1px dotted #ccc;
border-width:1px 0;
padding:5px 15px;
color:#666;
}
.post blockquote p {
margin:.5em 0;
}
/* Comments
----------------------------------------------- */
#comments {
margin:-25px 13px 0;
border:1px dotted #ccc;
border-width:0 1px 1px;
padding:20px 0 15px 0;
}
#comments h4 {
margin:0 0 10px;
padding:0 14px 2px 29px;
border-bottom:1px dotted #ccc;
font-size:120%;
line-height:1.4em;
color:#333;
}
#comments-block {
margin:0 15px 0 9px;
}
.comment-data {
background:url("http://www.blogblog.com/rounders/icon_comment.gif") no-repeat 2px .3em;
margin:.5em 0;
padding:0 0 0 20px;
color:#666;
}
.comment-poster {
font-weight:bold;
}
.comment-body {
margin:0 0 1.25em;
padding:0 0 0 20px;
}
.comment-body p {
margin:0 0 .5em;
}
.comment-timestamp {
margin:0 0 .5em;
padding:0 0 .75em 20px;
color:#666;
}
.comment-timestamp a:link {
color:#666;
}
.deleted-comment {
font-style:italic;
color:gray;
}
/* Profile
----------------------------------------------- */
@media all {
#profile-container {
background:#cdc url("http://www.blogblog.com/rounders/corners_prof_bot.gif") no-repeat left bottom;
margin:0 0 15px;
padding:0 0 10px;
color:#345;
}
#profile-container h2 {
background:url("http://www.blogblog.com/rounders/corners_prof_top.gif") no-repeat left top;
padding:10px 15px .2em;
margin:0;
border-width:0;
font-size:115%;
line-height:1.5em;
color:#234;
}
}
@media handheld {
#profile-container {
background:#cdc;
}
#profile-container h2 {
background:none;
}
}
.profile-datablock {
margin:0 15px .5em;
border-top:1px dotted #aba;
padding-top:8px;
}
.profile-img {display:inline;}
.profile-img img {
float:left;
margin:0 10px 5px 0;
border:4px solid #fff;
}
.profile-data strong {
display:block;
}
#profile-container p {
margin:0 15px .5em;
}
#profile-container .profile-textblock {
clear:left;
}
#profile-container a {
color:#258;
}
.profile-link a {
background:url("http://www.blogblog.com/rounders/icon_profile.gif") no-repeat 0 .1em;
padding-left:15px;
font-weight:bold;
}
ul.profile-datablock {
list-style-type:none;
}
/* Sidebar Boxes
----------------------------------------------- */
@media all {
.box {
background:#fff url("http://www.blogblog.com/rounders/corners_side_top.gif") no-repeat left top;
margin:0 0 15px;
padding:10px 0 0;
color:#666;
}
.box2 {
background:url("http://www.blogblog.com/rounders/corners_side_bot.gif") no-repeat left bottom;
padding:0 13px 8px;
}
}
@media handheld {
.box {
background:#fff;
}
.box2 {
background:none;
}
}
.sidebar-title {
margin:0;
padding:0 0 .2em;
border-bottom:1px dotted #9b9;
font-size:115%;
line-height:1.5em;
color:#333;
}
.box ul {
margin:.5em 0 1.25em;
padding:0 0px;
list-style:none;
}
.box ul li {
background:url("http://www.blogblog.com/rounders/icon_arrow_sm.gif") no-repeat 2px .25em;
margin:0;
padding:0 0 3px 16px;
margin-bottom:3px;
border-bottom:1px dotted #eee;
line-height:1.4em;
}
.box p {
margin:0 0 .6em;
}
/* Footer
----------------------------------------------- */
#footer {
clear:both;
margin:0;
padding:15px 0 0;
}
@media all {
#footer div {
background:#456 url("http://www.blogblog.com/rounders/corners_cap_top.gif") no-repeat left top;
padding:8px 0 0;
color:#fff;
}
#footer div div {
background:url("http://www.blogblog.com/rounders/corners_cap_bot.gif") no-repeat left bottom;
padding:0 15px 8px;
}
}
@media handheld {
#footer div {
background:#456;
}
#footer div div {
background:none;
}
}
#footer hr {display:none;}
#footer p {margin:0;}
#footer a {color:#fff;}
</style>
</head>
<body>
<!-- Begin #content - Centers all content and provides edges for floated columns -->
<div id="content">
<div id="header"><div id="header-bottom">
<a href="{SITE_URL_FULL}" id="banner">
<!-- BEGIN site_has_banner -->
<center><img src="{SITE_BANNER_URL}"/></center>
<!-- END site_has_banner -->
<!-- BEGIN no_banner -->
<h1>{SITE_NAME}</h1>
<!-- END no_banner -->
</a>
<p id="description">{SITE_DESCRIPTION}</p>
<div id="nav">
{MENU}
</div>
</div></div>
<!-- Begin #main - Contains main-column blog content -->
<div id="main"><div id="main2"><div id="main3">
<Blogger>
<center>{CONTENT}</center>
<p style="padding-left:20px;">
<a href="{SITE_URL_FULL}"><< Home</a>
</p>
</div>
</ItemPage>
<!-- End #comments -->
</Blogger>
<div style="text-align: center; font-size: 90%;">Proudly Hosted by <a href="http://smackjeeves.com">Smack Jeeves Webcomic Hosting</a></div>
</div></div></div>
<!-- End #main -->
</div>
<!-- End #content -->
</body>
</html>
I have tried to change the code so that it will appear how I want it, but with no avail.
I would really appreciate some assistance so I can not only improve my comic, but maybe learn some HTML in the process
<!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" xml:lang="en" lang="en">
<head>
<title>{SITE_NAME} - {PAGE_TITLE}</title>
<style type="text/css">
@import url("http://www.smackjeeves.com/templates/default/default_jumpbox.css");
body {
background: url(http://www.smackjeeves.com/templates/bl ... 1_blue.png) repeat;
margin:0;
padding:20px 10px;
text-align:center;
font:x-small/1.5em "Trebuchet MS",Verdana,Arial,Sans-serif;
color:#333;
font-size/* */:/**/small;
font-size: /**/small;
}
/* Page Structure
----------------------------------------------- */
/* The images which help create rounded corners depend on the
following widths and measurements. If you want to change
these measurements, the images will also need to change.
*/
@media all {
#content {
width:740px;
margin:0 auto;
text-align:left;
}
#main {
width:740px;
float:middle;
background:#fff url("http://img85.imageshack.us/img85/9475/cornersmainbotet8.gif") no-repeat left bottom;
margin:15px 0 0;
padding:0 0 10px;
color:#000;
font-size:97%;
line-height:1.5em;
}
#main2 {
float:left;
width:100%;
background:url("http://img85.imageshack.us/img85/2315/cornersmaintopgd3.gif") no-repeat left top;
padding:10px 0 0;
}
#main3 {
background:url("http://img85.imageshack.us/img85/2887/railsmainkk5.gif") repeat-y;
padding:0;
}
#sidebar {
width:240px;
float:right;
margin:15px 0 0;
font-size:97%;
line-height:1.5em;
}
}
@media handheld {
#content {
width:90%;
}
#main {
width:100%;
float:none;
background:#fff;
}
#main2 {
float:none;
background:none;
}
#main3 {
background:none;
padding:0;
}
#sidebar {
width:100%;
float:none;
}
}
/* Links
----------------------------------------------- */
a:link {
color:#c63;
}
a:visited {
color:#c63;
}
a:hover {
color:#c63;
}
a img {
border-width:0;
}
#nav a:link, #nav a:visited
{
color: white;
background: #778A9B;
display: inline-block;
padding: 4px 7px;
margin: 2px;
text-decoration: none;
}
#nav a:hover
{
background: #8094A7;
}
/* Blog Header
----------------------------------------------- */
@media all {
#header {
background:#456 url("http://www.smackjeeves.com/templates/blingmobile/images/header-bg.png") no-repeat left top;
margin:0 0 0;
padding:8px 0 0;
color:#fff;
}
#header-bottom {
background:url("http://www.smackjeeves.com/templates/blingmobile/images/header-bg.png") no-repeat left bottom;
padding:0 15px 8px;
}
}
@media handheld {
#header {
background:#456;
}
#header div {
background:none;
}
}
#blog-title {
margin:0;
padding:10px 30px 5px;
font-size:200%;
line-height:1.2em;
}
#blog-title a {
text-decoration:none;
color:#fff;
}
#description {
margin:0;
padding:5px 30px 10px;
font-size:94%;
line-height:1.5em;
}
#nav
{
text-align: center;
}
/* Posts
----------------------------------------------- */
.post {
margin:.3em 0 25px;
padding:0 13px;
border:1px dotted #bbb;
border-width:1px 0;
}
.post-title {
margin:0;
font-size:135%;
line-height:1.5em;
background:url("http://www.blogblog.com/rounders/icon_arrow.gif") no-repeat 10px .5em;
display:block;
border:1px dotted #bbb;
border-width:0 1px 1px;
padding:2px 14px 2px 29px;
color:#333;
background:#ded;
}
a.title-link, .post-title strong {
text-decoration:none;
display:block;
}
a.title-link:hover {
background-color:#ded;
color:#000;
}
.post-body {
border:1px dotted #bbb;
border-width:0 1px 1px;
border-bottom-color:#fff;
padding:10px 14px 1px 29px;
}
html>body .post-body {
border-bottom-width:0;
}
.post p {
margin:0 0 .75em;
}
p.post-footer {
margin:0;
padding:2px 14px 2px 29px;
border:1px dotted #bbb;
border-width:1px;
border-bottom:1px solid #eee;
font-size:100%;
line-height:1.5em;
color:#666;
text-align:right;
}
html>body p.post-footer {
border-bottom-color:transparent;
}
p.post-footer em {
display:block;
float:left;
text-align:left;
font-style:normal;
}
a.comment-link {
/* IE5.0/Win doesn't apply padding to inline elements,
so we hide these two declarations from it */
background/* */:/**/url("http://www.blogblog.com/rounders/icon_comment.gif") no-repeat 0 45%;
padding-left:14px;
}
html>body a.comment-link {
/* Respecified, for IE5/Mac's benefit */
background:url("http://www.blogblog.com/rounders/icon_comment.gif") no-repeat 0 45%;
padding-left:14px;
}
.post img {
margin:0 0 5px 0;
padding:4px;
border:1px solid #ccc;
}
blockquote {
margin:.75em 0;
border:1px dotted #ccc;
border-width:1px 0;
padding:5px 15px;
color:#666;
}
.post blockquote p {
margin:.5em 0;
}
/* Comments
----------------------------------------------- */
#comments {
margin:-25px 13px 0;
border:1px dotted #ccc;
border-width:0 1px 1px;
padding:20px 0 15px 0;
}
#comments h4 {
margin:0 0 10px;
padding:0 14px 2px 29px;
border-bottom:1px dotted #ccc;
font-size:120%;
line-height:1.4em;
color:#333;
}
#comments-block {
margin:0 15px 0 9px;
}
.comment-data {
background:url("http://www.blogblog.com/rounders/icon_comment.gif") no-repeat 2px .3em;
margin:.5em 0;
padding:0 0 0 20px;
color:#666;
}
.comment-poster {
font-weight:bold;
}
.comment-body {
margin:0 0 1.25em;
padding:0 0 0 20px;
}
.comment-body p {
margin:0 0 .5em;
}
.comment-timestamp {
margin:0 0 .5em;
padding:0 0 .75em 20px;
color:#666;
}
.comment-timestamp a:link {
color:#666;
}
.deleted-comment {
font-style:italic;
color:gray;
}
/* Profile
----------------------------------------------- */
@media all {
#profile-container {
background:#cdc url("http://www.blogblog.com/rounders/corners_prof_bot.gif") no-repeat left bottom;
margin:0 0 15px;
padding:0 0 10px;
color:#345;
}
#profile-container h2 {
background:url("http://www.blogblog.com/rounders/corners_prof_top.gif") no-repeat left top;
padding:10px 15px .2em;
margin:0;
border-width:0;
font-size:115%;
line-height:1.5em;
color:#234;
}
}
@media handheld {
#profile-container {
background:#cdc;
}
#profile-container h2 {
background:none;
}
}
.profile-datablock {
margin:0 15px .5em;
border-top:1px dotted #aba;
padding-top:8px;
}
.profile-img {display:inline;}
.profile-img img {
float:left;
margin:0 10px 5px 0;
border:4px solid #fff;
}
.profile-data strong {
display:block;
}
#profile-container p {
margin:0 15px .5em;
}
#profile-container .profile-textblock {
clear:left;
}
#profile-container a {
color:#258;
}
.profile-link a {
background:url("http://www.blogblog.com/rounders/icon_profile.gif") no-repeat 0 .1em;
padding-left:15px;
font-weight:bold;
}
ul.profile-datablock {
list-style-type:none;
}
/* Sidebar Boxes
----------------------------------------------- */
@media all {
.box {
background:#fff url("http://www.blogblog.com/rounders/corners_side_top.gif") no-repeat left top;
margin:0 0 15px;
padding:10px 0 0;
color:#666;
}
.box2 {
background:url("http://www.blogblog.com/rounders/corners_side_bot.gif") no-repeat left bottom;
padding:0 13px 8px;
}
}
@media handheld {
.box {
background:#fff;
}
.box2 {
background:none;
}
}
.sidebar-title {
margin:0;
padding:0 0 .2em;
border-bottom:1px dotted #9b9;
font-size:115%;
line-height:1.5em;
color:#333;
}
.box ul {
margin:.5em 0 1.25em;
padding:0 0px;
list-style:none;
}
.box ul li {
background:url("http://www.blogblog.com/rounders/icon_arrow_sm.gif") no-repeat 2px .25em;
margin:0;
padding:0 0 3px 16px;
margin-bottom:3px;
border-bottom:1px dotted #eee;
line-height:1.4em;
}
.box p {
margin:0 0 .6em;
}
/* Footer
----------------------------------------------- */
#footer {
clear:both;
margin:0;
padding:15px 0 0;
}
@media all {
#footer div {
background:#456 url("http://www.blogblog.com/rounders/corners_cap_top.gif") no-repeat left top;
padding:8px 0 0;
color:#fff;
}
#footer div div {
background:url("http://www.blogblog.com/rounders/corners_cap_bot.gif") no-repeat left bottom;
padding:0 15px 8px;
}
}
@media handheld {
#footer div {
background:#456;
}
#footer div div {
background:none;
}
}
#footer hr {display:none;}
#footer p {margin:0;}
#footer a {color:#fff;}
</style>
</head>
<body>
<!-- Begin #content - Centers all content and provides edges for floated columns -->
<div id="content">
<div id="header"><div id="header-bottom">
<a href="{SITE_URL_FULL}" id="banner">
<!-- BEGIN site_has_banner -->
<center><img src="{SITE_BANNER_URL}"/></center>
<!-- END site_has_banner -->
<!-- BEGIN no_banner -->
<h1>{SITE_NAME}</h1>
<!-- END no_banner -->
</a>
<p id="description">{SITE_DESCRIPTION}</p>
<div id="nav">
{MENU}
</div>
</div></div>
<!-- Begin #main - Contains main-column blog content -->
<div id="main"><div id="main2"><div id="main3">
<Blogger>
<center>{CONTENT}</center>
<p style="padding-left:20px;">
<a href="{SITE_URL_FULL}"><< Home</a>
</p>
</div>
</ItemPage>
<!-- End #comments -->
</Blogger>
<div style="text-align: center; font-size: 90%;">Proudly Hosted by <a href="http://smackjeeves.com">Smack Jeeves Webcomic Hosting</a></div>
</div></div></div>
<!-- End #main -->
</div>
<!-- End #content -->
</body>
</html>
- DelRio1991
- Posts: 3
- Joined: April 19th, 2011, 4:48 pm
Re: Image not focused right, HTML help
by eishiya » August 27th, 2011, 1:20 pm
No matter how you position it, most people will have to scroll to see the image because it's too large.
There's no way to center the image cleanly using that template, as far as I can tell. You could manually set a negative margin, but since your strips are all different sizes, that would just be a mess. You would probably be better off splitting the really wide strips into multiple rows. Making your pages readable in a suitable image size is one of the challenges of comics.
There's no way to center the image cleanly using that template, as far as I can tell. You could manually set a negative margin, but since your strips are all different sizes, that would just be a mess. You would probably be better off splitting the really wide strips into multiple rows. Making your pages readable in a suitable image size is one of the challenges of comics.
Busy, busy.
-
eishiya - Posts: 5726
- Joined: December 5th, 2009, 11:17 am
-
Re: Image not focused right, HTML help
by DelRio1991 » August 28th, 2011, 7:26 pm
eishiya wrote:No matter how you position it, most people will have to scroll to see the image because it's too large.
There's no way to center the image cleanly using that template, as far as I can tell. You could manually set a negative margin, but since your strips are all different sizes, that would just be a mess. You would probably be better off splitting the really wide strips into multiple rows. Making your pages readable in a suitable image size is one of the challenges of comics.
Thanks for the help!
I thought that was the answer, to split the strips up into rows, but I'm a lazy man and I was hoping that there was an answer that would accommodate to my sloth-like
tenancies
I'll just have to actually watch the size of my comics.
Thanks again, pal!
- DelRio1991
- Posts: 3
- Joined: April 19th, 2011, 4:48 pm
4 posts • Page 1 of 1
Return to Template Development & Support
Who is online
Users browsing this forum: No registered users and 0 guests
