GimpTalk Announcement :
Try your digital-art skills against your fellow gimpers in GIMPtalk's Biweekly Art competition !


Board index » GimpTalk » GIMP Tutorials and Tips Web Development Services . Convert FLV to Cell Phone Format
Featured Tutorial : Learn how to create characters by Griatch
Search for :  


Post new topic Reply to topic   [ 73 posts ]   Go to page Previous  1, 2, 3  Next


Author Message
Offline
 Post subject:
PostPosted: Wed Dec 20, 2006 8:52 pm 
User avatar

Joined:
Tue Jul 04, 2006 12:19 am

Topics:
Posts: 6198

Find User's Topics

Quote:
I use normal HTML how do I arange the images ??? ana make them clickable?

Here's my code for 3 tables, if this helps...
Code:
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title></title>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td valign="top"><br>
<br>
<br>
</td>
</tr>
<tr>
<td valign="top"><br>
<br>
<br>
<br>
</td>
</tr>
<tr>
<td valign="top"><br>
<br>
<br>
<br>
</td>
</tr>
</tbody>
</table>
<br>
</body>
</html>



_________________
Image Image


Top
 Profile  
 
Offline
 Post subject:
PostPosted: Wed Dec 20, 2006 8:55 pm 
User avatar

Joined:
Sat Jun 10, 2006 9:32 pm

Topics:
Posts: 3178

Find User's Topics
can you put in parentesis which goes where. I'm pwetty stupid you see :)

_________________
Image
I know, I'm good :)


Top
 Profile  
 
Offline
 Post subject:
PostPosted: Wed Dec 20, 2006 9:04 pm 
User avatar

Joined:
Thu Oct 26, 2006 10:34 pm

Topics:
Posts: 340

Find User's Topics
Does this help???

Do you have the images sliced???

If so then use the code sydney has provided for tables. You can then visually (meaning without using code can align it in the middle if you view properties and such).
It all depends on how you layout looks. Post a pic and then I will tell you how you should define the tables and such.

Heres it align in the middle:
Code:
<body>
<table
style="width: 751px; height: 228px; text-align: left; margin-left: auto; margin-right: auto;"
border="0" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td style="vertical-align: top;">TABLE POST STUFF
HERE<br>
      </td>
    </tr>
    <tr>
      <td valign="top">TABLE POST STUFF HERE</td>
    </tr>
    <tr>
      <td valign="top">
TABLE POST STUFF HERE</td>
    </tr>
  </tbody>
</table>



Top
 Profile  
 
Offline
 Post subject:
PostPosted: Wed Dec 20, 2006 10:20 pm 

Joined:
Mon Dec 04, 2006 11:06 pm

Topics:
Posts: 17

Find User's Topics
I didn't spend much time on mine and you can tell by the choppiness and the layout but
Here is my outcome:
http://www.freewebs.com/prudvi_profile/website.htm

_________________
Image


Top
 Profile  
 
Offline
 Post subject:
PostPosted: Wed Dec 20, 2006 11:07 pm 
User avatar

Joined:
Thu Oct 26, 2006 10:34 pm

Topics:
Posts: 340

Find User's Topics
Not bad not bad at all. I'm liking it and you even got google ads. Might I suggest using aligning the botton border under Announcments and maybe use a little smaller font. Maybe 8-12 pixels. Liking it and coded it. Do you know HTML???


Top
 Profile  
 
Offline
 Post subject:
PostPosted: Thu Dec 21, 2006 1:03 am 

Joined:
Mon Dec 04, 2006 11:06 pm

Topics:
Posts: 17

Find User's Topics
Ya, I know HTML... and CSS... and XHTML/XML.
My dad is a computer programmer so I learned some what.

What is the name of the font you used? I downloaded some pixel font in dafont.com. It is not one of my best but I tried following the tut.

_________________
Image


Top
 Profile  
 
Offline
 Post subject:
PostPosted: Thu Dec 21, 2006 9:35 pm 
User avatar

Joined:
Thu Oct 26, 2006 10:34 pm

Topics:
Posts: 340

Find User's Topics
Its the first one in the link. Use size from about 8-11.


Top
 Profile  
 
Offline
 Post subject:
PostPosted: Fri Dec 22, 2006 7:58 pm 

Joined:
Sun Oct 22, 2006 7:33 pm

Topics:
Posts: 18

Find User's Topics
man, that is one _nice_ tutorial (and final outcome ;) )

I will post again with my final result.

Oh, and whoever said they try to use divs over tables; well they smell.

_________________
registered linux user 426057

Image


Top
 Profile  
 
Offline
 Post subject:
PostPosted: Fri Dec 22, 2006 8:15 pm 
User avatar

Joined:
Sat Jun 10, 2006 9:32 pm

Topics:
Posts: 3178

Find User's Topics
Quote:
Scaled afterwards ( please ignore the black space as it is not part of the scaling. Thanks. Tell me if I should clarify more.):


Very Important: Since we want to create a field for the content, rotated the scaled layer that you created by 180 degrees or upside down. Note again please ignore the black space since to save me time I rotated what is being displayed up.


Now depending on how you want to lay out your website, created using the scaled layer of buttons places where the content will go.
First we’ll define the size of the top of the content box where the title will go.
This is what we’ll be doing ultimately so if you understand/know where and how I’ll do it, please feel free to skip the next few steps.


First of all with the scaled rotated button layer selected, go to Layers>Layer to Image Size. Select part of the button content.

You should now be able to move the selected floated layer.

Move it to where you want to place it and align it with the other content of the layer so it looks like a whole.

This is what you should have now. Note this is only an example and you should define the dimensions to how big you want this contents box to be.


Now we will define the background of the contents box. You should at this point chose a color for the background of your contents box that will blend in well. The easiest way to chose a color is to zoom into to the scaled button layer and using your color picker, chose probably the second to last pixel from the color. I say this because the last pixel if you were following my directions is stroked and when we put this contents box together, we will want the “written stuff” to stand out.

I don't get any of this O.o

_________________
Image
I know, I'm good :)


Top
 Profile  
 
Offline
 Post subject:
PostPosted: Fri Dec 22, 2006 8:18 pm 

Joined:
Tue Sep 12, 2006 12:44 am

Topics:
Posts: 1237

Find User's Topics
@ moredhe:

It's not just my opinion, it's becoming an industry standard for web professionals.

Why tables for layout is stupid


Top
 Profile E-mail  
 
Offline
 Post subject:
PostPosted: Fri Dec 22, 2006 9:05 pm 
User avatar

Joined:
Thu Oct 26, 2006 10:34 pm

Topics:
Posts: 340

Find User's Topics
stefcho_94

What that means is that after you scale the layer for contents box and stuff, you will want to give it a title and a closing at the bottom. To do this you duplicate the scaled button layer that you created just now and rotate it 180 degrees. After you do that you create a background for the contents box and align everything. look.
Mind the text since I dont even have GIMP now.
Image
This is rotated 180 degrees:
Image

Look at the contents boxes. See how they blend the background.
Image


Top
 Profile  
 
Offline
 Post subject:
PostPosted: Fri Dec 29, 2006 4:30 pm 
User avatar

Joined:
Wed Jul 13, 2005 11:31 am

Topics:
Posts: 571

Find User's Topics
I was wondering what brushes did you use for the background of the banner?

_________________
I know I'm in my own little world. But its ok. They know me HERE


Top
 Profile  
 
Offline
 Post subject:
PostPosted: Fri Dec 29, 2006 4:48 pm 
User avatar

Joined:
Sun Nov 26, 2006 4:18 am

Topics:
Posts: 719

Find User's Topics
I have been thinking about doing this so I guess I'll try this out when I get home

_________________
---Current---
Image
Gifts
http://s53.photobucket.com/albums/g79/Fullmetal4_photos/Gifts/


Top
 Profile  
 
Offline
 Post subject:
PostPosted: Fri Dec 29, 2006 6:34 pm 
User avatar

Joined:
Thu Oct 26, 2006 10:34 pm

Topics:
Posts: 340

Find User's Topics
Sorry but I didn't use a brush. I used a tutorial made by A90. I didn't follow it all the way but I did use it to create those lines. You can use a c4d if that works for you but again a banner is a bigger version of a signature.


Top
 Profile  
 
Offline
 Post subject:
PostPosted: Wed Jan 03, 2007 4:45 pm 

Joined:
Sun Dec 31, 2006 7:24 pm

Topics:
Posts: 3

Find User's Topics
The tutorial images won't pop up in my IE....
What's the problem with this?
I have all the images in the images, to cut a short story short (:P)I downloaded (without giving errors whilst unpacking) it from the DA site.

Can you give the chronologic list of the images??
(you know, the 1st pic is called: ...., the second:....)
I will edit it with jEdit then:P


Top
 Profile  
 
Offline
 Post subject:
PostPosted: Thu Jan 04, 2007 7:16 pm 
User avatar

Joined:
Fri Jul 28, 2006 7:52 pm

Topics:
Posts: 3882

Find User's Topics
Wow,this is good but I already know how to make,slice and code layouts. LOL

_________________
Quote:
I see a little silhouette of a man. Jennet reno, Jennet reno will you do the fandango? Clinton's noose is tightening very very frightening! Me! U.S Senate, U.S Congress, U.S Senate, U.S Congress, U.S Senate let me go! Let me go! I'm just a southern boy, nobody loves me. He's just a bad boy from the first family. There's no escape from her furosity!


Top
 Profile  
 
Offline
 Post subject:
PostPosted: Sun Jan 07, 2007 4:06 pm 
User avatar

Joined:
Thu Oct 26, 2006 10:34 pm

Topics:
Posts: 340

Find User's Topics
Imageox which is the official GIMPTalk hosting website is having problems so you may want to download the html version.


Top
 Profile  
 
Offline
 Post subject:
PostPosted: Mon Jan 15, 2007 12:28 am 

Joined:
Mon Jan 15, 2007 12:18 am

Topics:
Posts: 1

Find User's Topics
This.tut.rocks. Thanks, Man of Valor!

_________________
Image
ForumBUZZ.net Paid Forum Posting Service


Top
 Profile  
 
Offline
 Post subject:
PostPosted: Wed Jan 17, 2007 4:49 pm 
User avatar

Joined:
Fri Jun 23, 2006 2:02 pm

Topics:
Posts: 409

Find User's Topics
Great tutorial. It went a little wrong in the coding part though... tables should NOT be used for layout, only for tabular data.

_________________
Current
Image
Game Programming FTW:
My own Free RPG in C++


Top
 Profile E-mail  
 
Offline
 Post subject:
PostPosted: Wed Jan 17, 2007 5:34 pm 
User avatar

Joined:
Thu Oct 26, 2006 10:34 pm

Topics:
Posts: 340

Find User's Topics
Yes I'm exploring layers but they work for this tutorial. Post results please as I would like to see whether this tutorial was effective or to vague.


Top
 Profile  
 
Offline
 Post subject:
PostPosted: Sat Jan 20, 2007 4:45 am 

Joined:
Thu Dec 28, 2006 10:43 am

Topics:
Posts: 20

Find User's Topics
I don't get it! How do you slice the images and how do you create rollovers?? How do you know the buttons have the same size? :s:


Top
 Profile  
 
Offline
 Post subject:
PostPosted: Wed Jan 24, 2007 3:58 am 
User avatar

Joined:
Fri May 19, 2006 4:41 am

Topics:
Posts: 10

Find User's Topics
GREAT tut! i made this some time ago... just never posted it
here's my result:
http://img242.imageshack.us/img242/2124/bskwebsite2ah.gif

_________________
Image
Image


Top
 Profile  
 
Offline
 Post subject:
PostPosted: Fri Jan 26, 2007 9:24 pm 
User avatar

Joined:
Thu Oct 26, 2006 10:34 pm

Topics:
Posts: 340

Find User's Topics
@ SugarBlush

Alright good question. For that you can select the whole navigation or any other bar. Paste into a new document and then slice there so you can make sure they all have the same height. I apologize for they delay of reply but I had trouble finding the thread. hope this helps.

@ Fox racer30

Great results. Did you code it if so can I see the results if you dont mind sharing that is???


Top
 Profile  
 
Offline
 Post subject:
PostPosted: Wed Jan 31, 2007 6:37 am 
User avatar

Joined:
Fri May 19, 2006 4:41 am

Topics:
Posts: 10

Find User's Topics
nah, i havent coded it yet... were still unsure if we'll use it we may just go with a standard good ol' HTML design

_________________
Image
Image


Top
 Profile  
 
Offline
 Post subject:
PostPosted: Fri May 04, 2007 10:13 pm 
User avatar

Joined:
Wed Apr 11, 2007 2:59 am

Topics:
Posts: 10

Find User's Topics
im having trouble putting text where the text belongs, how do i d this? And you didnt give instructions for how to do the javascript "glow" on mouseover.(actualy i believe that is cascading style sheets.


Top
 Profile  
 
Display posts from previous:  Sort by  

Post new topic Reply to topic
 [ 73 posts ]  Go to page Previous  1, 2, 3  Next



Who is online

Users browsing this forum: No registered users and 11 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
Related Website
Gimp tutorials database
All rights reserved © GimpTalk 2008
forum software by
phpBB