Username: Password:   Forgot your password?
 
Forums
» View Categories » Coding Help & Templates » Sugjestions for my Layout
Previous 30
Page of 1 Next 30

Member:561
Posts:6
Joined:1-10-2006
Seen:11-16-2009
Oct 29,`06 11:18am | Quote | ↓
Mine Comic -> http://www.drunkduck.com/World_Domination/

Okay, so I like my layout. It makes me feel warm and fuzzy inside. But It's got some issues that I can't pinpoint. (Aside from the pages missing the bottom) So I want to change it up a bit. Any sugjestions? No changing the color scheme or red and black though. It's been that way for years and I like it like that.
World Domination, Baby!
 
ozoneocean
Admin
Send a private quack!
Member:53
Posts:19,775
Joined:1-2-2006
Seen:11-27-2009
Oct 31,`06 1:54am | Quote | ↓
Ok. This layout could work great. The thing that stands out to me that I hate though are all the multiple borders around everything. You really want to minimize and standardise that!

The red border is fantastic. But all those grey boarders are ugly. I would just use one single grey boarder around everything that's below the comic page. I'd make those two red segments the same width as each other and I'd make the thin
doublbe borders around the comments and comment box the same width as each other.

Oh, and I'd put a space between the comment stuff and the red author comment box things. I'd also put the Drunk Duck blue thing that's down the bottom of the page outside of the red border.

That's my advice
You've got a good start there!
 
Member:561
Posts:6
Joined:1-10-2006
Seen:11-16-2009
Nov 1,`06 5:49am | Quote | ↓
Grey borders? Oh! You're on fire Fox. Ech that does look nasty. I noticed that lots of codes don't work in fire fox but this is a new one. Trust me, It look alot better in IE. Oh, that's terrirble.
However, I don't know how to fix that. My layouts are table based and in firefox you can't use table borders without nasty grays. I can just make the borders 0 but it won't look too good, but at least better.
Thanks for pointing that out!

And how do you move the blue drunk duck thing? I have no idea, honestly.

This post was last edited on Nov 1,`06 5:59am
World Domination, Baby!
 
ozoneocean
Admin
Send a private quack!
Member:53
Posts:19,775
Joined:1-2-2006
Seen:11-27-2009
Nov 1,`06 6:54am | Quote | ↓
"Ayrisesiran" Said:
And how do you move the blue drunk duck thing? I have no idea, honestly.
I have no idea... your border must be just mgically surrounding it. html always does wierd stuff :D

Ha! I didn't even think to look at your borders in IE, how stupid of me. -you can work much better with borders if you use CSS. It's actually easier than html border code and it can be used with tables too! The only problem is you have to learn a bit about how CSS works first

Hang on! I see you DO know how to do CSS!
Ok, you can define a border style like this:
.border1 {
border: 2px solid #660000;
}

And to apply it to a table, simply insert it as a calss inside the table definition, like so:
<table width="400" border="0" cellspacing="0" cellpadding="0" class="bordercom">

See? MUCH easier than defining every single edge of the border every time, and it works just the same in either IE, Firefox, or any other Mozilla borowser

Anyway, yeah, the borders are a better colour in IE, but they'd still look better if you used less of them around the comment and author stuff, as well as making them match sizes with each other.
 
Member:561
Posts:6
Joined:1-10-2006
Seen:11-16-2009
Nov 1,`06 8:18am | Quote | ↓
Ah, defining it at the top instead of the table itself. Crafty. I should do that... But I took the visable borders out of the page altogether.
Well, now the page works completely in Firefox and some Assorted errors in IE. Fanciful.

How do you like the Layout, now?
World Domination, Baby!
 
ozoneocean
Admin
Send a private quack!
Member:53
Posts:19,775
Joined:1-2-2006
Seen:11-27-2009
Nov 1,`06 9:03am | Quote | ↓
Well, the black and red look really good together like that, but there are new problems now
All sorts of extra space is added to the top and bottom of the page in firefox so you have to scroll down a long way to get to the comic, pluss the bottom border of the comment box is gone.

In IE the bottom Drunk DUck table has dissapeared entirely. argh!

-you don't need to have that drunk Duck logo in your template at all if you don't want: the DD bar at the top of the comic removes the need ^^


Um, I don't know if this will help or not, but it's a red and black version of my simple Black and White Template. It works the same in both Firefox and IE, you can do what you like with it:

<HTML>
<HEAD>
<title>
<!--[COMIC_NAME]-->
:
<!--[PAGE_TITLE]-->
</title>
<meta name="robots" content="All,INDEX,FOLLOW">
<META HTTP-EQUIV='Content-Type' CONTENT='text/html; charset=iso-8859-1'>
<style type="text/css">
BODY {
scrollbar-face-color: #660000;
scrollbar-highlight-color: #660000;
scrollbar-3dlight-color: #888888;
scrollbar-darkshadow-color: #333333;
scrollbar-shadow-color: #555555;
scrollbar-arrow-color: #000000;
scrollbar-track-color: #000000;
font-family: verdana, arial, 'sans serif'; font-size: 11px; color: #660000;
background-color: #000000;
}
p,table,td {
font-family: verdana, arial, 'sans serif';
font-size: 11px;
color: #660000;
}
.border {
border: 4px solid #660000;
}
.border2 {
border: 1px solid #000000;
}
.bordercom {
border: 2px solid #660000;
}
input, textarea
{ background-color: #000000;
font-family: Verdana;
font-size: 11px;
color: #660000;
letter-spacing: 1px;
border: 2px solid #660000;
padding: 1px; }

option, select {
background-color: #000000;
font-family: Verdana;
font-size: 11px;
color: #FFFFFF;
letter-spacing: normal;
border: 1px solid #660000;
padding: 0px; }

A:link { color: #660000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; font-style: normal; line-height: normal; font-weight: bold; font-variant: normal; text-transform: none; text-decoration: underline; cursor: hand; }
A:visited { color: #660000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; font-style: normal; line-height: normal; font-weight: bold; font-variant: normal; text-transform: none; text-decoration: underline; cursor: hand; }
A:active { color: #660000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; font-style: normal; line-height: normal; font-weight: bold; font-variant: normal; text-transform: none; text-decoration: underline; cursor: hand; }
A:hover { color: #999999; font-family: Verdana, Arial, Helvetica, sans-serif; text-transform: none; text-decoration: none; cursor: hand; font-size: 11px; font-style: normal; line-height: normal; font-weight: bold; font-variant: normal; }
.bgcolour2 {
background-color: #000000;
}

.title {
font-family: "Courier New", Courier, mono;
font-size: 40px;
font-style: normal;
font-weight: bold;
color: #660000;
}
.subtitle {
font-family: verdana, arial, 'sans serif';
font-size: 11px;
color: #000000;
font-weight: bold;
}

.bgcolour {
background-color: #660000;
}

</style>
</HEAD>
<BODY class="bgcolour2" LEFTMARGIN='0' TOPMARGIN='0' MARGINWIDTH='0' MARGINHEIGHT='0' VALIGN='TOP' ALIGN='CENTER'>

<TABLE BORDER='0' CELLPADDING='0' CELLSPACING='0' WIDTH='100%' HEIGHT='100%'>
<TR>
<TD width="100%" ALIGN='center' VALIGN='bottom' witdth="100%"> <span class="title">

<!--[COMIC_NAME]--></span>
</TD>
</TR>
<TR>
<TD width="100%" ALIGN='CENTER' VALIGN='TOP'> </TD>
</TR>

<tr>
<TD width="100%" ALIGN='CENTER' VALIGN='TOP'> <table border="0" cellspacing="0" cellpadding="0" class="border">
<tr>
<td align="left" class="bgcolour"> <span class="subtitle">
<!--[PAGE_TITLE]-->
</span> </td>
</tr>
<tr>
<td> <table border="0" cellspacing="0" cellpadding="0" class="border2">
<tr>
<td>
<!--[PAGE]--> </td>
</tr>
</table></td>
</tr>
</table>
<table width="600" border="0" cellspacing="0" cellpadding="0">

<tr>
<td colspan="2" width="600" height="12" align="center"> </td>
</tr>
<tr>
<td width="600" colspan="2" align="center"> <table width='400' border='0' cellpadding='0' cellspacing='0'>
<tr>
<td width="125" align='right'>
<!--[NAV_FIRST=gfx/w_theme_bb.gif]--> </td>
<td width='75' align='CENTER'>
<!--[NAV_PREVIOUS=gfx/w_theme_b.gif]--> </td>
<td width='75' align='CENTER'>
<!--[NAV_NEXT=gfx/w_theme_f.gif]--> </td>
<td width='125' align='left'>
<!--[NAV_LAST=gfx/w_theme_ff.gif]--> </td>
</tr>
</table></td>
</tr>
<tr>
<td width="500" align="left"> <table width="175" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="175">
<!--[PAGE_DROPDOWN]--> </td>
</tr>
</table></td>
<td width="100" align="right">
<!--[RSS]--> </td>
</tr>
<tr>
<td colspan="2" width="600" height="12" align="center"> </td>
</tr>
<tr>
<td colspan="2" align="center"><table width="600" border="0" cellspacing="0" cellpadding="0" class="border">
<tr>
<td width="600" class="bgcolour"><span class="subtitle">Notes</span></td>
</tr>
<tr>
<td width="600" height="12"> </td>
</tr>
<tr>
<td width="600" align="center" valign="middle"><table width="400" border="0" cellspacing="0" cellpadding="0" class="bordercom">
<tr>
<td width="400" align="center">
<!--[AUTHORS_NOTES=400]--> </td>
</tr>
</table></td>
</tr>
<tr>
<td width="600" height="12" align="center" valign="middle"> </td>
</tr>
<tr>
<td width="600" align="center" valign="middle">
<!--[COMMENTS=400]--> </td>
</tr>
<tr>
<td width="600" height="12" align="center" valign="middle"> </td>
</tr>
<tr>
<td width="600" align="center" valign="middle">
<!--[COMMENT_FORM=400,200]--> </td>
</tr>
<tr>
<td width="600" height="12" align="center" valign="middle"> </td>
</tr>
</table></td>
</tr>
<tr>
<td colspan="2" width="600" height="12" align="center"> </td>
</tr>
</table></TD>
</TR>

</TABLE>
</BODY>
</HTML>

This post was last edited on Nov 1,`06 9:05am
 
ozoneocean
Admin
Send a private quack!
Member:53
Posts:19,775
Joined:1-2-2006
Seen:11-27-2009
Nov 1,`06 9:08am | Quote | ↓
Ah, you fixed the extra space/scrolling problem!
You can still use any element of that code if you like though.
 
Member:561
Posts:6
Joined:1-10-2006
Seen:11-16-2009
Nov 1,`06 9:35am | Quote | ↓
Yeah, it probly just took a while to relay. I think I reloaded those pages like twenty times.

Heh... I just like the big logo there. I took it out of all of the extra pages, but having it on the index reminds me of olden times. I'll take it out eventually, probably when I update the layout again.

Thanks for the code, it'll be way useful on my website, and I'm sure on DD, too. There's lots of codes that I don't normally use in the CSS, so it will be nice to have the referance.

Thanks for all your help, I'm very Greatful.
World Domination, Baby!
 
ozoneocean
Admin
Send a private quack!
Member:53
Posts:19,775
Joined:1-2-2006
Seen:11-27-2009
Nov 1,`06 10:01am | Quote | ↓
No problem ^_^

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)