[Acer2000]

Hello to all,

I am trying to create an outside border similar to the border on the following website: Le Monde diplomatique

Am I correct in assuming that the following code can enable me to create the same outside grey border? Thank you :wave:


<table>

</table>

<table>
<tr>

</tr>
</table>

<table>
<tr>
<td>
</td>
</tr>
</table>

<table width="100" border="1" cellspacing="0" bordercolor="#CCCCCC">
<tr>
<td>
 
</td>
</tr>
</table>

 

[DDAoN]

On that website, the border is produced by utilizing CSS. In their case, their CSS is built by combining multiple stylesheets into a single imported file. To reproduce that border internal to your code would look like this:

<table></table>
 
<table>
 <tr></tr>
</table>
 
<table>
 <tr>
  <td></td>
 </tr>
</table>
 
<table width="100" cellspacing="0" style="border: 1px solid #CCCCCC;">
 <tr>
  <td> </td>
 </tr>
</table>

For more information on CSS, I highly suggest looking into it at: Cascading Style Sheets or Most Practical CSS Cheat Sheet Yet

I, personally, use the cheat sheet from time-to-time. It's a good reminder of little things I tend to forget while working with other languages. ^^'

 

[Acer2000]

Thank you. I think I will have to study this more.

I was wondering as to how they have managed to create similar grey boxes that are showing within this grey border.

 

[Acer2000]

I normally go to the code view in MS FP 2003 and insert the code. Is this the correct way?

 

[DDAoN]

Personally, I use Notepad for all of my programming, but it should be as simple as pasting the code in Frontpage code view.

As for your question about "similar grey boxes that are showing within this grey border", there's several ways to go about that. Essentially, what they did was to use the <DIV></DIV> tags with imported CSS. Going off how you started, you can simply do multiple tables.

<table>
 <table></table>
</table>
 
<table>
 <tr>
  <table>
   <tr></tr>
  </table>
 </tr>
</table>
 
<table>
 <tr>
  <td>
   <table>
    <tr>
     <td></td>
    </tr>
   </table>
  </td>
 </tr>
</table>
 
<table width="100" cellspacing="0" style="border: 1px solid #CCCCCC;">
 <tr>
  <td>
   <table width="100" cellspacing="0" style="border: 1px solid #CCCCCC;">
    <tr>
     <td> </td>
    </tr>
   </table>
  </td>
 </tr>
</table>

 

[Laxer]

Just thought i would hop in really quick.

Notepad++ is an excellent tool for creating code. I would highly suggest this over just standard notepad.

On a side note, coding entire webpages in tables is inefficient. Recreating using divs would allow far easier alterations.

 

[DDAoN]

I have to agree with Laxer on the <DIV></DIV> tags. However, I like my code clean, precise, and without any hope of confusion. Most programmers would simply put in comments, then you wind up with 3/4 of the document as comments making it difficult to find the actual code.

With tables, it gets highly complex extremely quickly, but if you keep your code embedded and clean you will never have to question what defines a particular element within the code.

It all comes down to personal preference.

In regards to the Norepad++, it provides many features available in the premium programs like Macromedia Dreamweaver and Microsoft Frontpage, but it's absolutely free and offers a little more flexibility than the mentioned programs. I grew up in programming with Notepad, and I wouldn't change how I programmed for the world. ^^'

 

[Acer2000]

Hi,

It is me again. I am trying to learn how to create a box as I would call it, similar to the one I found on Time magazine: Breaking News, Analysis, Politics, Blogs, News Photos, Video, Tech Reviews - TIME.com

Please look at the where it says: Stay connected with TIME.com

I was able to find the relevant code and type it into a notepad document:

<div class="module" id="stayConnected">
<h3> Stay connected with TIME.com<h3>
<ul>...</ul>
<div class="ad88">...</div>
</div>

I saved as All files and it did not render the box I was hoping to create :4-dontkno

What is it that I am missing?

 

[Laxer]

That is the box with all the subscriptions and such correct?

IF it is you will need to go in and set up all the buttons to work with your site.

as for getting just the images there i would do something like:

<div id="subbox" style="border:1px solid black;">
<h2>Follow us!</h2>
<table style="width:100%; border:0;">
<tr>
<td width=50%><a href="link to sub"><img src="img" alt="sub" /><p>Facebook sub</p> </a></td>
<td width=50%><a href="link to sub"><img src="img" alt="sub" /><p>Some sub</p> </a></td>
</tr>
</table>
</div>

and repeat for as many rows as i want.

 

[Acer2000]

Thank you very much Laxer.