(solved)Hey everyone, Im trying to do a little site improvement but I cant quite seem to find the right directions to make the kind of layout Im working on for the front page comic.
What Im trying to do is make the comic appear in the center of a book for the site's theme. The book will have the right page showing, while the left page appears cut off by the broser window:
____________
____I_______I
____I_______I
____I_______I
____________I
The left side is going to be used for listing our buttons and links to things like the bios section and contact us pages, while the right half holds the comic. Heres the problem though, I cant seem to locate the right kind of code to work with that will let me make a border that automaticaly adjusts to the borders of the comic, in order to stretch to fit around it, and let me use custom images for the border. On top of that, I need to get the bottom of the left page to adjust with the right page, and hopefully still be able to add and tweak the links simply by adding the links under the current ones at a latter time.
I think if I can get the right kind of frame or a double box thingy, I can simply make one frame thinner and not give it an image for the left border to give it the cut off look, but the problem is I cant seem to locate the right kind of coding thats either compatible with Comicgenesis's stuff or otherwise works with the user's browser seperatley of comicgenesis html stuff. The frames Ive seen so far do not allow a custom border as far as I can tell, and are more for allowing multiple documeent types on one page rather than being a design element. To best describe the border Im trying to make, you might want to look at misfile.com and the border that autowraps arounf the comic page there, only with the modification of that left side to the box.
If anyone can give me a hand or a push in the right direction i'd really appreciate it.
Layout Programming trouble(solved)
Layout Programming trouble(solved)
Last edited by Imatron on Thu Feb 05, 2009 6:39 pm, edited 1 time in total.
-
Dr Neo Lao
- Cartoon Hero
- Posts: 2397
- Joined: Wed Oct 18, 2006 5:21 am
- Location: Australia
Re: Layout Programming trouble
Sounds like you might need to look at using DIV's with some heavy CSS styling.
The way I would start doing it would be to have a background image for the "container" div which is a wide, short image that shows the cutoff left edge, the "crease" at the spine of the book and the right edge. This could be vertically repeated as a background image so that your page can be taller or shorter and still have that proper "book" look.
Next, have a table inside the container div with two columns. Have a cell that spans both columns at the top and bottom and in these you'd have the images that are the same as the background one mentioned earlier, but the image would be of the "top" and "bottom" edges of the book. These should not be transparent, but have the same colour as the background-background (as in, have a black background for the parts outside the "book" and use the book image as the background inside the book.
The final step could be to have a right-edge image for the right-hand cell that repeats vertically to cover the background when your comic goes wider or narrower, without spoiling the "book" look.
It can be done, but it's a big pain. Note that my suggestions above are rough guesses based on what I think you're trying to do and my fairly poor html skills. You'll get a few hiccups trying to implement, but hopefully this helped a bit.
The way I would start doing it would be to have a background image for the "container" div which is a wide, short image that shows the cutoff left edge, the "crease" at the spine of the book and the right edge. This could be vertically repeated as a background image so that your page can be taller or shorter and still have that proper "book" look.
Next, have a table inside the container div with two columns. Have a cell that spans both columns at the top and bottom and in these you'd have the images that are the same as the background one mentioned earlier, but the image would be of the "top" and "bottom" edges of the book. These should not be transparent, but have the same colour as the background-background (as in, have a black background for the parts outside the "book" and use the book image as the background inside the book.
The final step could be to have a right-edge image for the right-hand cell that repeats vertically to cover the background when your comic goes wider or narrower, without spoiling the "book" look.
It can be done, but it's a big pain. Note that my suggestions above are rough guesses based on what I think you're trying to do and my fairly poor html skills. You'll get a few hiccups trying to implement, but hopefully this helped a bit.
Re: Layout Programming trouble
That sounds like an awesome site design. I've been working with some similar ideas, and I'd probably do it all with one table. I made some notes. They're visual, since writing it out in words would be harder than doing the actual coding:
Of course I don't know that much about divs or css, the doc's way might be better. I just like how for mine, the only thing you have to know is tables. You might have to study up on tables, though.
The other thing is, you should either keep your row of buttons shorter than your shortest comic or put a background color or image that matches the page behind the comic.
Of course I don't know that much about divs or css, the doc's way might be better. I just like how for mine, the only thing you have to know is tables. You might have to study up on tables, though.
The other thing is, you should either keep your row of buttons shorter than your shortest comic or put a background color or image that matches the page behind the comic.
Re: Layout Programming trouble
I'd say your diagram exactly matches the concept I had in my head Wendybird. Neo, thats also a very clever idea, but I imagine I'd have to make may comics sizing to match the intervels of the repeating image, but I think Wendybird's concept is easier to work with and was closer to what I was thinking Id have to build anyway.
Is there a code in the tables I can add to use an image in place of the default border though? I didnt see it when I was researching that option, and is it supported by comicgenesis' default coding or would it be something that most browser know how to read by themselves?
Off topic, Dr. Neo, your a LEGO fan too? Im actually a Bionicle collector myself, Ive even had the opportunity to attend two invite only product previews from the LEGO company.
Is there a code in the tables I can add to use an image in place of the default border though? I didnt see it when I was researching that option, and is it supported by comicgenesis' default coding or would it be something that most browser know how to read by themselves?
Off topic, Dr. Neo, your a LEGO fan too? Im actually a Bionicle collector myself, Ive even had the opportunity to attend two invite only product previews from the LEGO company.
Re: Layout Programming trouble
OOooohh..looks like I missed some things when I initially looked at your diagram, first, you've spotted something I didnt think of, extending the edge of the left page where it meets the right over the actual mid-page page to give that space for the comic image to go up against and saving some work on an extra border, and I didnt realize that.
I also misunderstood the concept of how you were using the border, I though you replaced the border with an image, your actually removing it and using a background image in the box to act like a border O_o
Ingenious.
Now that I actually understand what I need to do now I just have to assemble the code to do it.
EDIT: Right now Im stuck trying to build the base box, ive got three rows of three but for some reason they keep appearing as a row of nine instead of three rows of three, Im useing a test editor and as far as I can tell Ive made from scratch a replica of what it's telling me to do, but when I copy and past my code over the test box code and run it, it keeps doing the row of nine, and Ive tried changing the border from 0 to one and back but it doesnt change when I refresh. However when I alter the existing code it does what I expect it to O_o
Also, the "Today's comic" keentag will appear properly when placed in the table wont it?
I also misunderstood the concept of how you were using the border, I though you replaced the border with an image, your actually removing it and using a background image in the box to act like a border O_o
Ingenious.
Now that I actually understand what I need to do now I just have to assemble the code to do it.
EDIT: Right now Im stuck trying to build the base box, ive got three rows of three but for some reason they keep appearing as a row of nine instead of three rows of three, Im useing a test editor and as far as I can tell Ive made from scratch a replica of what it's telling me to do, but when I copy and past my code over the test box code and run it, it keeps doing the row of nine, and Ive tried changing the border from 0 to one and back but it doesnt change when I refresh. However when I alter the existing code it does what I expect it to O_o
Also, the "Today's comic" keentag will appear properly when placed in the table wont it?
-
Dr Neo Lao
- Cartoon Hero
- Posts: 2397
- Joined: Wed Oct 18, 2006 5:21 am
- Location: Australia
Re: Layout Programming trouble
For early testing, like you are, the best bet is to make some placeholder images.
For example, you know that there will be an Ad across the top (required by CG). If you make an image that is 400px wide by 48px high and just write "Ad" in it, then you use that where the Ad will go. On your templates 9when you are ready to upload) you remove the image code and put in the ***advertisement*** keentag.
For the tables, I suggest using a plain text editor like NotePad rather than a html editor. You'll find it is simpler, faster and you'll learn the html better that way. For example, you might get it to do something a certain way on your computer, but it behaves differently on the server - or on different browsers. If you know what each bit of html does, then you'll be able to know where the problems are. Or if you ask for help and someone gives you snippet of code to put in, you'll have a rough idea of what it does.
When you are testing, it's a good idea to have the html file on your computer, open at the same time in your browser and in your editor. After you hit "save" on the editor, you'll be able to hit "refresh" on the browser and see what changes the code did.
For the table, you probably need to do this:The </tr> bits are the ones that say "this is the end of a row, start a new one".
For example, you know that there will be an Ad across the top (required by CG). If you make an image that is 400px wide by 48px high and just write "Ad" in it, then you use that where the Ad will go. On your templates 9when you are ready to upload) you remove the image code and put in the ***advertisement*** keentag.
For the tables, I suggest using a plain text editor like NotePad rather than a html editor. You'll find it is simpler, faster and you'll learn the html better that way. For example, you might get it to do something a certain way on your computer, but it behaves differently on the server - or on different browsers. If you know what each bit of html does, then you'll be able to know where the problems are. Or if you ask for help and someone gives you snippet of code to put in, you'll have a rough idea of what it does.
When you are testing, it's a good idea to have the html file on your computer, open at the same time in your browser and in your editor. After you hit "save" on the editor, you'll be able to hit "refresh" on the browser and see what changes the code did.
For the table, you probably need to do this:
Code: Select all
<table>
<tr><td> Stuff </td><td> Stuff </td><td> Stuff </td></tr>
<tr><td> Stuff </td><td> Stuff </td><td> Stuff </td></tr>
<tr><td> Stuff </td><td> Stuff </td><td> Stuff </td></tr>
</table>Re: Layout Programming trouble
On the subject of the adds, Im leaving them at the top just above the "book" rather than in the book.
Ive actually tested the code in several programs, but for some reason, the table row code isnt deviding it and I get one row of nine instead of three rows of three, theres got to be something Im not aware of thats affecting the code. If I copy and paste the test codes provided in some of the learning sites, it works just fine on there and when I copy it to notepad too. I understand how to make the rows otherwise, and once Ive actually got three rows of three I can start testing code to use as a background images and so on.
EDIT:
Something finaly worked out, I wrote the code again in notepad, maybe I didnt try notepad along with wordpad like I thought I did but Ive got the three rows of three now.
Once Ive finished coding the template and tested it, is there a way I/we can post the pre assembled code for others to use?
EDIT2:
Hmm now Ive set the border to zero but one the first of the three rows is actually at zero @_@ this is getting confusing, and I cant figure out where to put the table background code, does that go in between the table data tags?
Ive actually tested the code in several programs, but for some reason, the table row code isnt deviding it and I get one row of nine instead of three rows of three, theres got to be something Im not aware of thats affecting the code. If I copy and paste the test codes provided in some of the learning sites, it works just fine on there and when I copy it to notepad too. I understand how to make the rows otherwise, and once Ive actually got three rows of three I can start testing code to use as a background images and so on.
EDIT:
Something finaly worked out, I wrote the code again in notepad, maybe I didnt try notepad along with wordpad like I thought I did but Ive got the three rows of three now.
Once Ive finished coding the template and tested it, is there a way I/we can post the pre assembled code for others to use?
EDIT2:
Hmm now Ive set the border to zero but one the first of the three rows is actually at zero @_@ this is getting confusing, and I cant figure out where to put the table background code, does that go in between the table data tags?
Re: Layout Programming trouble
You can copy the code from Notepad and paste it into a post, both if you want tips on what to do and if you want to share it with people. You can put it in a code box if you want, it's one of the formatting options, but HTML isn't supported in posts, so we'll be able to see it either way.
Re: Layout Programming trouble
Blahrg I HATE hitting that save button by mistake, I lost my post...
Anyway, I have a semi functional demo below, the corners seem to be distorted and the top and bottom edges arent adjusting properly, but the sides are. As for the corners, their supposed to be rounded in the demo but I gess their being stretched over the "moo", since they dont appear without the moo there. Im guessing it stretches over/under the text instead of having the image there with nothing in it. Is there a way to lock height and width of a table to force the background image to appear, or perhaps am I better off using an image as the table data on the corners rather than as a background image? And is there a way to set minimum height/width?
For the demo, you can actually save it to notepad as an html and open it with internet explorer to see exactly what I got on my end.
Anyway, I have a semi functional demo below, the corners seem to be distorted and the top and bottom edges arent adjusting properly, but the sides are. As for the corners, their supposed to be rounded in the demo but I gess their being stretched over the "moo", since they dont appear without the moo there. Im guessing it stretches over/under the text instead of having the image there with nothing in it. Is there a way to lock height and width of a table to force the background image to appear, or perhaps am I better off using an image as the table data on the corners rather than as a background image? And is there a way to set minimum height/width?
For the demo, you can actually save it to notepad as an html and open it with internet explorer to see exactly what I got on my end.
<html>
<body>
<table border="0" cellspacing="0">
<tr>
<td background="http://www.majhost.com/gallery/Imatron/ ... oo</td><td background="http://www.majhost.com/gallery/Imatron/ ... oo</td><td background="http://www.majhost.com/gallery/Imatron/ ... g">moo</td>
</tr>
<table border="0" cellspacing="0">
<tr>
<td background="http://www.majhost.com/gallery/Imatron/ ... d><td><img src="http://www.majhost.com/gallery/Imatron/ ... "></td><td background="http://www.majhost.com/gallery/Imatron/ ... g">moo</td>
</tr>
<table border="0" cellspacing="0">
<tr>
<td background="http://www.majhost.com/gallery/Imatron/ ... oo</td><td background="http://www.majhost.com/gallery/Imatron/ ... oo</td><td background="http://www.majhost.com/gallery/Imatron/ ... g">moo</td>
</tr>
</table>
</body>
</html>
-
Dr Neo Lao
- Cartoon Hero
- Posts: 2397
- Joined: Wed Oct 18, 2006 5:21 am
- Location: Australia
Re: Layout Programming trouble
Try this:
Changes:
First, make sure you always have a DocType (that's the bit at the top). This tells the browser "behave this way". If you don't declare one, then the browser of the person looking at it can do some pretty random stuff.
Second change, you'll notice that I've declared a few widths and heights. This is because the nackground image does not cause the cell to expand and take up the space. Since your corner images are 32px x 32px, I set two widths (the top left and right corners) and the height of the bottom left corners.
This is a bit of a cheat. Setting the left and right widths of the outside columns means that all the cells below will automatically have that width. The top row I didn't set a height as the round bits are on the top corners. The bottom row only needs one cell to have a height specified, the rest of the row automatically has that height.
In theory, the width and height of each cell should be specified. This is really hard to do, and becomes a nightmare when you want to make a small adjustment.
A better way to do it is with CSS, but that might be a bit advanced for you at this stage. Right now, focus on getting your site functional and worry about making the code pretty later on down the track.
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>A snazzy new webcomic</title>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width=32px background="http://www.majhost.com/gallery/Imatron/moo/webskin/tlc.png"> </td>
<td background="http://www.majhost.com/gallery/Imatron/moo/webskin/tbb.png"> </td>
<td width=32px background="http://www.majhost.com/gallery/Imatron/moo/webskin/trc.png" /td>
</tr>
<tr>
<td background="http://www.majhost.com/gallery/Imatron/moo/webskin/lrb.png" /td>
<td>
<!-- Content below -->
<img src="http://www.majhost.com/gallery/Imatron/moo/head_comparison.png">
<p>And now for some rando text! Travel between star systems is by wormholes, spatial anomalies that exist in five spatial dimensions, that allow instantaneous travel from one star to another. Most trips between inhabited systems require more than one jump. The spaceships employ artificial gravity and can sustain huge accelerations, allowing them to cross from one wormhole to another in a matter of hours or days. The inhabited systems are known collectively as the Wormhole Nexus, reflecting their interconnectedness.</p>
<p>Life in the Nexus is tremendously varied. Some people live in space habitats with artificial gravity and never set foot on a planet. Aside from space industry, habitats are positioned near wormhole jump-points to manage interstellar traffic. The jump-points are also guarded by military stations, which also serve as customs enforcers.</p></td>
<td background="http://www.majhost.com/gallery/Imatron/moo/webskin/lrb.png" /td>
</tr>
<tr>
<td height=32px background="http://www.majhost.com/gallery/Imatron/moo/webskin/blc.png" /td>
<td background="http://www.majhost.com/gallery/Imatron/moo/webskin/tbb.png" /td>
<td background="http://www.majhost.com/gallery/Imatron/moo/webskin/brc.png" /td>
</tr>
</table>
</body>
</html>First, make sure you always have a DocType (that's the bit at the top). This tells the browser "behave this way". If you don't declare one, then the browser of the person looking at it can do some pretty random stuff.
Second change, you'll notice that I've declared a few widths and heights. This is because the nackground image does not cause the cell to expand and take up the space. Since your corner images are 32px x 32px, I set two widths (the top left and right corners) and the height of the bottom left corners.
This is a bit of a cheat. Setting the left and right widths of the outside columns means that all the cells below will automatically have that width. The top row I didn't set a height as the round bits are on the top corners. The bottom row only needs one cell to have a height specified, the rest of the row automatically has that height.
In theory, the width and height of each cell should be specified. This is really hard to do, and becomes a nightmare when you want to make a small adjustment.
A better way to do it is with CSS, but that might be a bit advanced for you at this stage. Right now, focus on getting your site functional and worry about making the code pretty later on down the track.
Re: Layout Programming trouble
oooooh pretty,
Now all I need to do is rebuild that and replace the images with the final ones. Thankfully once I have a new FTP (My old "free" one stopped working) I can use maj as a temporary storage until I get the images back where they need to go on the comicgenesis host.
A few thing's I need to ask first though, I see a couple things Im not familiar with and probably should know before hand:
*The code just after the images in the background, what does that code designate?
*The !-content below--> tag is something I dont know either
*The text just after the image, It autowraps using the image as a minimum stretch to point and the browser's length as the maximum autowrap point. This might be what the content below tag is working with? I remember you helped me with a newspost method where I saved the images as 31122009a and 31122009b in the same folder to publish one right after the other on the same page. Im guessing I can simply ad the <p></p> to the document on notepad when I save it and it will apear just under the image in the right spot for the P tags to let it appear and autowrap?
EDIT: Ive got the more final version uploaded, coded and converrted from your template Neo, except Ive added (according to Wendybird's schematic) the left background image back into the left border as a table data (on top of being a background image) to keep the image on the right side from squishing the left border. Now I need to test my buttons and see if I can stack them under the image without winding up beside it where it would mess it up.
EDIT:
>_< Im also having trouble getting into my site via the ftp again, probably because Im not sure which letters in my password are upper or lowercase.... That and the login on CG has that case sensitive glitch. Is there a way I can change my email to my new one and reset the password for the FTP site?
Now all I need to do is rebuild that and replace the images with the final ones. Thankfully once I have a new FTP (My old "free" one stopped working) I can use maj as a temporary storage until I get the images back where they need to go on the comicgenesis host.
A few thing's I need to ask first though, I see a couple things Im not familiar with and probably should know before hand:
*The code just after the images in the background, what does that code designate?
*The !-content below--> tag is something I dont know either
*The text just after the image, It autowraps using the image as a minimum stretch to point and the browser's length as the maximum autowrap point. This might be what the content below tag is working with? I remember you helped me with a newspost method where I saved the images as 31122009a and 31122009b in the same folder to publish one right after the other on the same page. Im guessing I can simply ad the <p></p> to the document on notepad when I save it and it will apear just under the image in the right spot for the P tags to let it appear and autowrap?
EDIT: Ive got the more final version uploaded, coded and converrted from your template Neo, except Ive added (according to Wendybird's schematic) the left background image back into the left border as a table data (on top of being a background image) to keep the image on the right side from squishing the left border. Now I need to test my buttons and see if I can stack them under the image without winding up beside it where it would mess it up.
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>BLUE BOOK of DOOM</title>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width=200px background="http://www.majhost.com/gallery/Imatron/BLUEBOOK/tlc.png"> </td>
<td background="http://www.majhost.com/gallery/Imatron/BLUEBOOK/mtb.png"> </td>
<td width=22px background="http://www.majhost.com/gallery/Imatron/BLUEBOOK/trc.png" /td>
</tr>
<tr>
<td background="http://www.majhost.com/gallery/Imatron/BLUEBOOK/mlb.png" /td>
<img src="http://www.majhost.com/gallery/Imatron/BLUEBOOK/mlb.png"><td>
<!-- Content below -->
<img src="http://www.majhost.com/gallery/Imatron/moo/head_comparison.png">
<p>And now for some rando text! Travel between star systems is by wormholes, spatial anomalies that exist in five spatial dimensions, that allow instantaneous travel from one star to another. Most trips between inhabited systems require more than one jump. The spaceships employ artificial gravity and can sustain huge accelerations, allowing them to cross from one wormhole to another in a matter of hours or days. The inhabited systems are known collectively as the Wormhole Nexus, reflecting their interconnectedness.</p>
<p>Life in the Nexus is tremendously varied. Some people live in space habitats with artificial gravity and never set foot on a planet. Aside from space industry, habitats are positioned near wormhole jump-points to manage interstellar traffic. The jump-points are also guarded by military stations, which also serve as customs enforcers.</p></td>
<td background="http://www.majhost.com/gallery/Imatron/BLUEBOOK/mrb.png" /td>
</tr>
<tr>
<td height=29px background="http://www.majhost.com/gallery/Imatron/BLUEBOOK/blc.png" /td>
<td background="http://www.majhost.com/gallery/Imatron/BLUEBOOK/mbb.png" /td>
<td background="http://www.majhost.com/gallery/Imatron/BLUEBOOK/brc.png" /td>
</tr>
</table>
</body>
</html>>_< Im also having trouble getting into my site via the ftp again, probably because Im not sure which letters in my password are upper or lowercase.... That and the login on CG has that case sensitive glitch. Is there a way I can change my email to my new one and reset the password for the FTP site?
-
Dr Neo Lao
- Cartoon Hero
- Posts: 2397
- Joined: Wed Oct 18, 2006 5:21 am
- Location: Australia
Re: Layout Programming trouble
Apologies for the new codes.
The means "non breaking space". It's a special character that essentially means " " (a space). I used these to replace the "moo" that you put in. The reason for putting it in is so that the cells have something to display rather than collapsing. I think you already discovered that and intuitively put the "moo" in. A list of more special characters can be found here.
If you need an FTP program, I use and recommend Filezilla. It's stable, free and works with CG.
This <!-- means "what follows is a comment that will not be displayed". If you want to have a little message in the code (maybe to remind yourself of why something is there) then you would type <!-- then your comment and then --> to close the comments. The "content below" bit is just a comment I made, it does not do anything.
However, the text will automagically always "wrap" to take up the available space. The way to break them up into paragraphs is with the <p> tag (which is then ended with </p> tag). This is the easy (and proper) way to break up paragraphs.
The case sensitivity on SiteAdmin won't affect your comic's FTP access. The email for your comic account is locked - once it is entered (when you register) you are unable to change it. Though at the moment the email reset system isn't sending out emails anyway...
The means "non breaking space". It's a special character that essentially means " " (a space). I used these to replace the "moo" that you put in. The reason for putting it in is so that the cells have something to display rather than collapsing. I think you already discovered that and intuitively put the "moo" in. A list of more special characters can be found here.
If you need an FTP program, I use and recommend Filezilla. It's stable, free and works with CG.
This <!-- means "what follows is a comment that will not be displayed". If you want to have a little message in the code (maybe to remind yourself of why something is there) then you would type <!-- then your comment and then --> to close the comments. The "content below" bit is just a comment I made, it does not do anything.
However, the text will automagically always "wrap" to take up the available space. The way to break them up into paragraphs is with the <p> tag (which is then ended with </p> tag). This is the easy (and proper) way to break up paragraphs.
The case sensitivity on SiteAdmin won't affect your comic's FTP access. The email for your comic account is locked - once it is entered (when you register) you are unable to change it. Though at the moment the email reset system isn't sending out emails anyway...
Re: Layout Programming trouble
Everything seems to be in order for now, though it looks like Im locked out of the actual site for the time being. Since I dont have the old email address to reset things, and I accidentaly used the wrong domain name for my website anyway, Im going to see if I can get a new page under the right domain name with my new current email address. Thank you both very much for your help with planning and adjusting the coding for me, Im going to go ahead and mark this as solved.