Comic Fury Webcomic Hosting - A few more questions please.

You are not logged in. Log in, Register, More info

Forum > Layouts, HTML, CSS & Javascript > A few more questions please.

Pages: [1]

"A few more questions please.", 5th May 2012, 1:10 PM #1

snorgar

Posts: 24

Referrals: 0

Registration date: 28th Oct 2011

My site is coming along and while it might not be the best coded it works. I have 2 questions. one is making my background stretch corner to corner instead of tiled. The code I am using is a bit different than the norm here it seems.

site can be viewed here: web page

body

{
background:black url(http://MyAngelMyDemon.thecomicseries.com/files/heaven_background.jpg) fixed; 	
	color:#F8F8F8;
	font-family:georgia,sans-serif;
	font-size:9pt;
	font-size-adjust:none;
	font-stretch:normal;
	font-style:normal;
	font-variant:normal;
	font-weight:normal;
	line-height:13pt;
	margin:0;
	padding:0;
	align: left;
	img:#150600 url(images/greyBG.jpg) repeat-x;
}

can't seem to add width and height to 100% with this.

Second is my chat boxes I would like the avatars to be on the left and the text right but that is a more minor issues as it works still as is. Here is the snip-its of code I took for the comments section and what I added to them.

#avi
{
	background:#000000;
	width:125px;
	height:125px;
	border: 6px  double #003366;
	align:left;
}
.authorcomments
{
	background: #000000;
        color: #000000;
	border: 1px solid #453310;
	padding: 3px;
	margin-right: 1em;
	text-align: center;
	min-height: 130px;
}
.comments, #authornotes 
    {
     padding:5px;
    }
.comment, .permalinkcode 
{
    padding:10px;
    border: 6px  double #003366;
    background-color:#99ccff;
    color: #000000;
}
.toright 
{
    margin-left:7px;
    margin-right:7px;
}

and finally the whole code just in case it is needed.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>[webcomicname] : [pagetitle] </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

	@import url("http://www.smackjeeves.com/templates/default/default_jumpbox.css");



body

{
background:black url(http://MyAngelMyDemon.thecomicseries.com/files/heaven_background.jpg) fixed; 	
	color:#F8F8F8;
	font-family:georgia,sans-serif;
	font-size:9pt;
	font-size-adjust:none;
	font-stretch:normal;
	font-style:normal;
	font-variant:normal;
	font-weight:normal;
	line-height:13pt;
	margin:0;
	padding:0;
	align: left;
	img:#150600 url(images/greyBG.jpg) repeat-x;
}

#container
{
	margin: 0 15px;
}
a
{
	color: #000066;
	text-decoration: none;
}
a:visited
{
	color: #000066;
}
a:hover
{
	color: #000066;
	text-decoration:underline;
}	 

h1
{
	background: #003366;
	text-align: center;
	color: #fff;
	font-size: 12px;
	margin-bottom: 2px;
	padding: 3px;
        text-transform: uppercase;
}
h2
{
        background: #003366;
	color: #fff;
        text-align:left;
	font-size: 18px;
	margin-bottom: 2px;
        padding: 5px;
	text-transform: uppercase;
}
h3
{
	background: #003366;
	text-align: center;
	color: #fff;
	font-size: 12px;
	margin-bottom: 2px;
	padding: 3px;
        text-transform: uppercase;
}
#sidebar, #container
{
	border: 6px  double #003366;
	padding: 10px;
	text-align: center;
        background-color:#6699cc;
}
#sidebar2
{
	border: 6px  double #003366;
	padding: 10px;
	text-align: center;
}	
#sidebar
{
	background-color:#6699cc;
	width:150px;
}
#sidebar2
{
	background-color:#6699cc;
	width:150px;
}
#topnav
{
	width:100%;
	background-color:#000000;
	text-align:left;
}
#comicset
{
	margin:15px 0px 20px 0px;
	text-align:center;
	background-color:#000000;
}
img 
{
     border:0;
}
#avi
{
	background:#000000;
	width:125px;
	height:125px;
	border: 6px  double #003366;
	align:left;
}
.authorcomments
{
	background: #000000;
        color: #000000;
	border: 1px solid #453310;
	padding: 3px;
	margin-right: 1em;
	text-align: center;
	min-height: 130px;
}
.comments, #authornotes 
    {
     padding:5px;
    }
.comment, .permalinkcode 
{
    padding:10px;
    border: 6px  double #003366;
    background-color:#99ccff;
    color: #000000;
}
.toright 
{
    margin-left:7px;
    margin-right:7px;
}

</style>

</head>

<body>



<img src="http://MyAngelMyDemon.thecomicseries.com/files/title_bar_small.png" width="100%"> <br><br>
  



<table width="1024" cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
	<td valign="top">
	
		<div id="sidebar">
                   <h1>Navigation</h1>
                             <P>
                             <a href="/blog/">HOME</a><br>
                             <a href="/comics/">LATEST</a><br>
                             <a href="/comics/1">FIRST</a><br>
                             <a href="/archive/">ARCHIVE</a><br>
                             
		</P>

			<h1>S Y N O P S I S</h1>
			
				<p><b>
From the moment we are born we are taught what is good and what is evil. However can we truly believe what we are told? <br><br>
This is a story of Governments, Religions, and Races at war and a young girl caught in the middle. 
</b></p>
			
			<h1>L i n k s</h1>
			
				<a href="...">LINK HERE</a><br>
				<a href="...">LINK HERE</a><br>
				<a href="...">LINK HERE</a><br>
		
		</div>
		
	</td>
	<td valign="top">
	
		<div id="container" align="center">
			<div id="content">

                     <!--cond:[isextrapage]-->
                         <h3>[pagetitle]</h3>
                         <div id="toright">
                         <!--end_cond:[isextrapage]-->
				<!--layout:[content]-->
                         <!--cond:[isextrapage]-->
                         </div>
                    <!--end_cond:[isextrapage]-->

                   </div>		
		</div>
		
	</td>
	<td valign="top">
	
		<div id="sidebar2" align="center">
			 <h3>s p o n s o r s</h3>
			{GOOGLE_AD_120x600}
			
			<h3>a f f i l i a t e s</h3>
			<a href="...">LINK HERE</a><br>
			<a href="...">LINK HERE</a><br>
			<a href="...">LINK HERE</a><br>
			
			
			<h3>c r e d i t s</h3>
			  <center>
			Site Design by <a href="http://www.smackjeeves.com/profile.php?id=6601" title="KINGV">kingv</a><br>
                        Wall Paper Design by <a href="http://computerinkt.deviantart.com" title="KINGV">Computerinkt</a><br>
			Hosted by <a href="http://www.smackjeeves.com" title="Smackjeeves">Smackjeeves</a>
			</center>
		</div>
		
	</td>
</tr>
</table>

</body>
</html>

5th May 2012, 3:13 PM #2

Doomy

Posts: 981

Referrals: 0

Registration date: 10th May 2011

Location: Purgatory

Hmm the only way I know is to make the image itself larger by resizing it.

Usually with gradients you can use the xy to stretch gradients or simple backgrounds.

But with an actual picture I think you have to physically resize it.
Or look for a new one entirely. But if there is a way I would like to learn about this too. xD;;;

_______________________

DEMENTED (updates Sat) and Road To Hell (Updates Wed)
Genre: LGBT - Supernatural/Sci-Fi/Horror/Humor/Gore/and More~

5th May 2012, 4:20 PM #3

Dodom

Posts: 421

Referrals: 0

Registration date: 6th Sep 2009

Location: Québec

I think you should resize the image itself, as Doomy said. The colour gradient in it is soft so it shouldn't pixellate visibly.

You can ALSO use the properties:

background-size:100% 100%;
background-repeat:no-repeat;

But only use them along with the enlarged image, because background-size is not broadly supported enough to rely on it alone.

And if I may, I don't think that background agrees with the rest of the layout, especially the header. You may want to make sure you're happy with that colour scheme at some point.

_______________________

Forum > Layouts, HTML, CSS & Javascript > A few more questions please.

Pages: [1]