Many a problems

deus 0.96 · 08-27-2007, 11:34 PM

Hi, um, im kinda a nub and have a few questions about how to do things in dreamweaver, and in html in general, so ya any help would be greatly appreciated. Now onto the problems. Im trying to build up a homepage for a site i got as an assignment of sorts. Here's a link to how its supposed to look heh http://img301.imageshack.us/img301/2050/martinhomedo3.jpg
The part from the dotline below the menu and the lower dotline is supposed to be a frame so a flashy can be added later on, the size of the frame is 496 height, 705 width, the top margins 31, and the whole thing should be auto centered and lowered to the middle of the screen depending on resolution. Basically i need to know how to do the auto center thing,how to distance one jpeg from another by lets say 8px's (ie the logo and the dots are jpeg's and i cant distance them by 8px's, well i can but i dont know how heh), also the text and the dot line have the same problem, theyre to far away and im guessin its rly easy to find the option in dw but im just a moron lol, also i cant seem to find how to create a frame in the middle of the screen, the only thing i found out is how to make a left side one and so on. So ya i basically need ALOT of help heh, as i said im a newb but really would like to learn more so yea, any help would be greatly appreciated.

**Redcore** · 08-28-2007, 03:05 AM

Dreamweaver, as you've noticed, does not have any options to add an iframe. You have to add that yourself in the code.

HTML Code:

<iframe src ="iframe.html" width="705" height="496" align="middle" scrolling="auto" frameborder="0"></iframe>

As far as setting it in the center/middle, you could always use tables. I like tables, so I quickly threw this together to give you an idea how I'm reading what you want.

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Think up a title.</title>
<style type="text/css">
<!--
body {
	margin-left: 0px;
	margin-top: 31px;
}
.heading {
	font-size: 24px;
	font-weight: bold;
	font-family: Georgia, "Times New Roman", Times, serif;
}
-->
</style>
</head>

<body>
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td align="center"><div align="left" class="heading">Site Heading</div></td>
  </tr>
  <tr>
    <td align="center"><div align="left">
      <table width="100%" border="0" cellspacing="2" cellpadding="2">
        <tr>
          <td colspan="6">&nbsp;</td>
          </tr>
        <tr>
          <td width="10%">Home</td>
          <td width="10%">Contact</td>
          <td width="11%">About Us </td>
          <td width="12%">More Stuff </td>
          <td width="10%">Etc</td>
          <td class="heading">&nbsp;</td>
        </tr>
        <tr>
          <td height="20" colspan="6" valign="top">&nbsp;</td>
          </tr>
      </table>
    </div></td>
  </tr>
  <tr>
    <td align="center" valign="middle"><iframe src ="iframe.html" width="705" height="496" align="middle" scrolling="auto" frameborder="0"></iframe></td>
  </tr>
  <tr>
    <td align="center" valign="middle">&nbsp;</td>
  </tr>
  <tr>
    <td align="center" valign="middle"><table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td align="center"><img src="" width="85" height="50" alt="" /></td>
        <td align="center"><img src="" width="85" height="50" alt="" /></td>
        <td align="center"><img src="" width="85" height="50" alt="" /></td>
        <td align="center"><img src="" width="85" height="50" alt="" /></td>
      </tr>
    </table></td>
  </tr>
</table>
</body>
</html>

I added a table at the bottom with image placeholders set apart equally. I'm not exactly sure what you're aiming for though.

deus 0.96 · 08-28-2007, 04:19 AM

Wow heh, thx, i didnt even think about using tables, your code helped alot, oh and i also noticed that the new dw has an iframe option, well anywayz thx for the help im really grateful, now i tried doing a seperate page (i started a new one to kinda get the hang of using tables) and it was goin ok till this happened heh, i made the tables, seperated the lower one into 5 rows and typed in the menu items, i tried displaying it in firefox and this is what i got Firefox image, then i tried it in ie and it turned out right ie image. So ya, any further help would be appreciated, again thank you for the help so far.

**Redcore** · 08-28-2007, 03:26 PM

I'd need to see the code. Post it in HTML tags. :)

deus 0.96 · 08-29-2007, 05:29 AM

Heh, i actually managed to made it work lol, but now something else is wrong =P, actually not wrong i just dont know how to do it lol, this is what im supposed to acomplish, not the little arrow and square thingy lol, the dots then text then pic, and im having a hard time putting that into tables, the pic and text are supposed to be linked so just copy pasting the image is out of the question =P, i also tried creating multiple rows, one for the dots, other one for the text and so on but it didnt work out so well, anywayz any help would be appreciated. again thanks for wasting your time to help me out, much appreciated :).

**Redcore** · 08-29-2007, 01:26 PM

What I like to do is put a new table inside of the layout table because the layout table can get screwed up when you're splitting/deleting/modifying rows.

Here's a quick build of what I'm talking about (first copy it to it's own document in Dreamweaver so you see what it looks like - then you can add it to your page)

HTML Code:

<table width="100%" border="0" align="center" cellpadding="2" cellspacing="2">
  <tr>
    <td align="center"><img name="" src="" width="50" height="75" alt=""></td>
    <td align="center"><img name="" src="" width="50" height="75" alt=""></td>
    <td align="center"><img name="" src="" width="50" height="75" alt=""></td>
    <td align="center"><img name="" src="" width="50" height="75" alt=""></td>
    <td align="center"><img name="" src="" width="50" height="75" alt=""></td>
    <td align="center"><img name="" src="" width="50" height="75" alt=""></td>
    <td align="center"><img name="" src="" width="50" height="75" alt=""></td>
    <td align="center"><img name="" src="" width="50" height="75" alt=""></td>
  </tr>
  <tr>
    <td align="center">Rose</td>
    <td align="center">White</td>
    <td align="center">Stone</td>
    <td align="center">Apple</td>
    <td align="center">Pedal</td>
    <td align="center">Moon</td>
    <td align="center">Mood</td>
    <td align="center">Field</td>
  </tr>
</table>

The dot effect is PROBABLY just a background image set behind the table cells.

deus 0.96 · 08-29-2007, 08:02 PM

Erm...and how do you do that heh, i mean set the background image, oh and thanks for the code its awesome, im just missing the dots now lol, i tried creating a new row but the dots are too far away from the text =P, again any help would be appreciated. Thx in advance.

**Redcore** · 08-30-2007, 01:33 AM

It's really easy. In the bottom of the Dreamweaver display there is a Properties panel (you probably use it quite a bit already). When you select a table cell you can add a background image. I made an example...

Download this background graphic: click here (71 bytes)
(right click and "Save Link As...")

Now in the same folder you save that to, create a new HTML file and put this in:

HTML Code:

<table width="500" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="167"><div align="center">Home </div></td>
    <td width="169"><div align="center">Contact</div></td>
    <td width="164"><div align="center">Links</div></td>
  </tr>
  <tr>
    <td colspan="3" background="bg.gif">&nbsp;</td>
  </tr>
</table>

Notice the background="bg.gif" in there!
You can put any image in the background of a cell and then put text over that. That's *probably* how the page you're trying to copy does it since the CSS "dotted" style is kinda hideous looking.

NOTE: the bg.gif I've provided is just a quick test and shouldn't be used on your final product - just open up whatever program you use for making graphics (I'm partial to Photoshop - but if you don't have that kinda money, you can download GIMP, which is a free and powerful alternative) and make a dot (if that's what you want to go for) in the color you want.
There's a downside to doing the dot - spacing. The cell below the links or wherever you want to put them has to be ONE cell all the way across because if it's split up, the spacing is all screwed up. It's a bit hard to explain if you're not looking at it - but basically the background image can be cut off when the cell ends, so it can cut one of the background images at the end of cell A and then when cell B begins it starts a new background image, so they are not properly spaced and it looks abnormal. You might be reading this going "WUH--" ... but if you run into this problem you'll realize what I'm talking about.

deus 0.96 · 08-30-2007, 04:19 AM

Yea i just figured out what youre talking about, the image keeps reapeting itself till the end of the row, well damnit heh, is there any other way to insert the image below the text?

**Redcore** · 08-30-2007, 06:15 PM

As long as you make that row ONE cell (no columns) it would work out fine. If you can't or don't want to, you can make that bg image something other than the dots - more specifically a design that would be continuous...

http://www.durex-inc.com/

Here's an example of what I'm talking about. See the blue bars for the two small boxes (Newest Users / Latest Files)? That is a continuous bg image - so it's not really that big, it's just like 5 px wide or whatever:
http://www.durex-inc.com/images/bgexpand.jpg

See what I mean?

deus 0.96 · 08-30-2007, 10:01 PM

Ya i get it, although im trying to create the whole continous image thing atm, see if thatll work, im hopin it will its just a pain getting all the dots right lol, also do you by any chance know how to ie put the dots from the menu vertically and then centering them, i tried that in tables with align valign but its too far away from the upper dots, its supposed to be like glued to the lower menu dots, i actually think thats it for my questions lol, once again thanks for all the help, couldnt have gotten this far without it.

**Redcore** · 08-31-2007, 02:06 PM

I'm not sure what you mean...I'd have to see it (if you post the image - keep it smaller - I have dialup :P)

deus 0.96 · 08-31-2007, 06:14 PM

Lol kk sry for the big pics before then, heres a link to the image, i made it as small as i could so you could get my idea, i tried putting the dots as a separate image then aligning it but its not close enough to the lower menu dots as in the pic, so ya, thx again and hope to hear from ya soon.

**Redcore** · 08-31-2007, 06:59 PM

You can put a small cell between the information and the picture (where the dot goes) and then set it as the background. You'll probably have to make it a really small image for the dots rather than what is used for the other dots...that way they're close together.

08-27-2007, 11:34 PM	#1 (permalink)
deus 0.96 Registered User Join Date: Jul 2007 Posts: 22 OS: XP/ubuntu	Many a problems Hi, um, im kinda a nub and have a few questions about how to do things in dreamweaver, and in html in general, so ya any help would be greatly appreciated. Now onto the problems. Im trying to build up a homepage for a site i got as an assignment of sorts. Here's a link to how its supposed to look heh http://img301.imageshack.us/img301/2050/martinhomedo3.jpg The part from the dotline below the menu and the lower dotline is supposed to be a frame so a flashy can be added later on, the size of the frame is 496 height, 705 width, the top margins 31, and the whole thing should be auto centered and lowered to the middle of the screen depending on resolution. Basically i need to know how to do the auto center thing,how to distance one jpeg from another by lets say 8px's (ie the logo and the dots are jpeg's and i cant distance them by 8px's, well i can but i dont know how heh), also the text and the dot line have the same problem, theyre to far away and im guessin its rly easy to find the option in dw but im just a moron lol, also i cant seem to find how to create a frame in the middle of the screen, the only thing i found out is how to make a left side one and so on. So ya i basically need ALOT of help heh, as i said im a newb but really would like to learn more so yea, any help would be greatly appreciated. __________________ "How do you make your Mac go faster? Drop it from a higher window."

08-28-2007, 04:19 AM	#3 (permalink)
deus 0.96 Registered User Join Date: Jul 2007 Posts: 22 OS: XP/ubuntu	Re: Many a problems Wow heh, thx, i didnt even think about using tables, your code helped alot, oh and i also noticed that the new dw has an iframe option, well anywayz thx for the help im really grateful, now i tried doing a seperate page (i started a new one to kinda get the hang of using tables) and it was goin ok till this happened heh, i made the tables, seperated the lower one into 5 rows and typed in the menu items, i tried displaying it in firefox and this is what i got Firefox image, then i tried it in ie and it turned out right ie image. So ya, any further help would be appreciated, again thank you for the help so far. __________________ "How do you make your Mac go faster? Drop it from a higher window."

08-28-2007, 03:26 PM	#4 (permalink)
Redcore Design Team Member Join Date: Aug 2007 Location: Jamestown, CA Posts: 718 OS: Linux Mint 7 My System	Re: Many a problems I'd need to see the code. Post it in HTML tags. :)

08-29-2007, 05:29 AM	#5 (permalink)
deus 0.96 Registered User Join Date: Jul 2007 Posts: 22 OS: XP/ubuntu	Re: Many a problems Heh, i actually managed to made it work lol, but now something else is wrong =P, actually not wrong i just dont know how to do it lol, this is what im supposed to acomplish, not the little arrow and square thingy lol, the dots then text then pic, and im having a hard time putting that into tables, the pic and text are supposed to be linked so just copy pasting the image is out of the question =P, i also tried creating multiple rows, one for the dots, other one for the text and so on but it didnt work out so well, anywayz any help would be appreciated. again thanks for wasting your time to help me out, much appreciated :). __________________ "How do you make your Mac go faster? Drop it from a higher window."

08-29-2007, 08:02 PM	#7 (permalink)
deus 0.96 Registered User Join Date: Jul 2007 Posts: 22 OS: XP/ubuntu	Re: Many a problems Erm...and how do you do that heh, i mean set the background image, oh and thanks for the code its awesome, im just missing the dots now lol, i tried creating a new row but the dots are too far away from the text =P, again any help would be appreciated. Thx in advance. __________________ "How do you make your Mac go faster? Drop it from a higher window."

08-30-2007, 01:33 AM	#8 (permalink)
Redcore Design Team Member Join Date: Aug 2007 Location: Jamestown, CA Posts: 718 OS: Linux Mint 7 My System	Re: Many a problems It's really easy. In the bottom of the Dreamweaver display there is a Properties panel (you probably use it quite a bit already). When you select a table cell you can add a background image. I made an example... Download this background graphic: click here (71 bytes) (right click and "Save Link As...") Now in the same folder you save that to, create a new HTML file and put this in: HTML Code: <table width="500" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="167"><div align="center">Home </div></td> <td width="169"><div align="center">Contact</div></td> <td width="164"><div align="center">Links</div></td> </tr> <tr> <td colspan="3" background="bg.gif">* </td> </tr> </table> Notice the background="bg.gif"* in there! You can put any image in the background of a cell and then put text over that. That's probably how the page you're trying to copy does it since the CSS "dotted" style is kinda hideous looking. NOTE: the bg.gif I've provided is just a quick test and shouldn't be used on your final product - just open up whatever program you use for making graphics (I'm partial to Photoshop - but if you don't have that kinda money, you can download GIMP, which is a free and powerful alternative) and make a dot (if that's what you want to go for) in the color you want. There's a downside to doing the dot - spacing. The cell below the links or wherever you want to put them has to be ONE cell all the way across because if it's split up, the spacing is all screwed up. It's a bit hard to explain if you're not looking at it - but basically the background image can be cut off when the cell ends, so it can cut one of the background images at the end of cell A and then when cell B begins it starts a new background image, so they are not properly spaced and it looks abnormal. You might be reading this going "WUH--" ... but if you run into this problem you'll realize what I'm talking about.

08-30-2007, 04:19 AM	#9 (permalink)
deus 0.96 Registered User Join Date: Jul 2007 Posts: 22 OS: XP/ubuntu	Re: Many a problems Yea i just figured out what youre talking about, the image keeps reapeting itself till the end of the row, well damnit heh, is there any other way to insert the image below the text? __________________ "How do you make your Mac go faster? Drop it from a higher window."

08-30-2007, 06:15 PM	#10 (permalink)
Redcore Design Team Member Join Date: Aug 2007 Location: Jamestown, CA Posts: 718 OS: Linux Mint 7 My System	Re: Many a problems As long as you make that row ONE cell (no columns) it would work out fine. If you can't or don't want to, you can make that bg image something other than the dots - more specifically a design that would be continuous... http://www.durex-inc.com/ Here's an example of what I'm talking about. See the blue bars for the two small boxes (Newest Users / Latest Files)? That is a continuous bg image - so it's not really that big, it's just like 5 px wide or whatever: http://www.durex-inc.com/images/bgexpand.jpg See what I mean?

08-30-2007, 10:01 PM	#11 (permalink)
deus 0.96 Registered User Join Date: Jul 2007 Posts: 22 OS: XP/ubuntu	Re: Many a problems Ya i get it, although im trying to create the whole continous image thing atm, see if thatll work, im hopin it will its just a pain getting all the dots right lol, also do you by any chance know how to ie put the dots from the menu vertically and then centering them, i tried that in tables with align valign but its too far away from the upper dots, its supposed to be like glued to the lower menu dots, i actually think thats it for my questions lol, once again thanks for all the help, couldnt have gotten this far without it. __________________ "How do you make your Mac go faster? Drop it from a higher window."

08-31-2007, 02:06 PM	#12 (permalink)
Redcore Design Team Member Join Date: Aug 2007 Location: Jamestown, CA Posts: 718 OS: Linux Mint 7 My System	Re: Many a problems I'm not sure what you mean...I'd have to see it (if you post the image - keep it smaller - I have dialup :P)

08-31-2007, 06:14 PM	#13 (permalink)
deus 0.96 Registered User Join Date: Jul 2007 Posts: 22 OS: XP/ubuntu	Re: Many a problems Lol kk sry for the big pics before then, heres a link to the image, i made it as small as i could so you could get my idea, i tried putting the dots as a separate image then aligning it but its not close enough to the lower menu dots as in the pic, so ya, thx again and hope to hear from ya soon. __________________ "How do you make your Mac go faster? Drop it from a higher window." Last edited by deus 0.96; 08-31-2007 at 06:18 PM.

08-31-2007, 06:59 PM	#14 (permalink)
Redcore Design Team Member Join Date: Aug 2007 Location: Jamestown, CA Posts: 718 OS: Linux Mint 7 My System	Re: Many a problems You can put a small cell between the information and the picture (where the dot goes) and then set it as the background. You'll probably have to make it a really small image for the dots rather than what is used for the other dots...that way they're close together.