13 Replies - 842 Views - Last Post: 04 February 2009 - 01:37 PM

#1 cap10kid3

New D.I.C Head

Reputation: -1

Posts: 36
Joined: 16-August 05

table problems?

Post icon Posted 27 January 2009 - 01:56 PM

okay, so here's the deal... i need a webpage to look like this picture Attached Image

font color is unimportant my page code is below. the links are not active yet, and all the jpegs for the buttons ar already created, but that is beside the point. any suggestions?
here is my current code...

<html>
<head><title> The Daniel Show...</title></head>
<body>
<body bgcolor="#ffffff"text="blue" link="#green" vlink="red"alink="black">
<center>
<br><BR><BR>
<font size="13">Kreg's Vlog<br></font>
<table>
<table border="0"><center>
<tr>
<td><font size="10">Playlist<br></font></td>
<td>
</tr><tr>
<td><a href="">Craig's VLOG</a></td>
<td><table><table border="0"><center>
<tr>
<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/l-0AsHzSN4k&hl=en&fs=1&rel=0">
</param><param name="allowFullScreen" value="true"></param>
<embed src="http://www.youtube.com/v/l-0AsHzSN4k&hl=en&fs=1&rel=0" type="application/x-shockwave-flash" allowfullscreen="true" width="425" height="344"></embed></object></td></table></td>
</tr><tr>
<td><a href="">TJ's VLOG</a></td>
</tr><tr>
<td><a href="">Daniel's VLOG</a></td>
</tr><tr>
<td><a href="">Frank's VLOG</a></td>
</tr><tr>
<td><a href="">David's vlog</a></td>
</tr><tr>
<td><a href="">5 awesome animals</a></td>
</tr><tr>
<td><a href=""></a></td>
<td><a href=""></a></td>
<td><a href=""></a></td>
<td><a href=""></a></td>
<td><a href=""></a></td>
</center></table>

</center>

</BODY>

This post has been edited by cap10kid3: 27 January 2009 - 02:51 PM

Is This A Good Question/Topic? 0

Replies To: table problems?

#2 fuzzylunkinz

D.I.C Head

Reputation: 8

Posts: 185
Joined: 11-November 08

Re: table problems?

Posted 27 January 2009 - 03:10 PM

I don't support using tables for layouts at all. Tables are for tabular data. But you should really look into CSS.

supersssweety has a good tutorial here.

Was This Post Helpful? 0

#3 Arenlor

D.I.C Regular

Reputation: 33

Posts: 377
Joined: 26-April 06

Re: table problems?

Posted 27 January 2009 - 07:21 PM

I agree, learn CSS, only use tables for tabular data.

Was This Post Helpful? 0

#4 cap10kid3

New D.I.C Head

Reputation: -1

Posts: 36
Joined: 16-August 05

Re: table problems?

Posted 28 January 2009 - 02:43 PM

so, anyone willing to give me an example of how to do this in css without a wrapper? we wan t the page to end up looking like the jpeg included

Was This Post Helpful? 0

#5 musya

D.I.C Lover

Reputation: 11

Posts: 1,012
Joined: 25-April 07

Re: table problems?

Posted 28 January 2009 - 02:53 PM

check out the tutorial might be a bit complicated for the first time, but you can always google layouts in css, its just not that easy to show you, plus if you try it we'll help you out.

Was This Post Helpful? 0

#6 fuzzylunkinz

D.I.C Head

Reputation: 8

Posts: 185
Joined: 11-November 08

Re: table problems?

Posted 28 January 2009 - 04:02 PM

Just mess around with the code. See what happens when you remove the wrapper division.

There are tons of documentation out there for you - you just have to find it.

Was This Post Helpful? 0

#7 gregwhitworth

Tired.

Reputation: 200

Posts: 1,561
Joined: 20-January 09

Re: table problems?

Posted 28 January 2009 - 04:25 PM

Ok here's a little bit more nuggets so that you can search a little better -

you have tables inside of tables inside of tables (also known as nested) - this is now being replaced by divs. Praise God. Look for a simple 2 column layout tutorial and create that. To fake the 3 column layout - create a div and float it left or right depending on where you want it.

Once you have that - you can tackle a 3 column layout (even though for your design it isn't necassary) if you'd like.

If you run into trouble - post the code here and we'll be happy to help you out.

--
Greg

Was This Post Helpful? 0

#8 musya

D.I.C Lover

Reputation: 11

Posts: 1,012
Joined: 25-April 07

Re: table problems?

Posted 28 January 2009 - 05:29 PM

@gregwhiteworth well said

Was This Post Helpful? 0

#9 cap10kid3

New D.I.C Head

Reputation: -1

Posts: 36
Joined: 16-August 05

Re: table problems?

Posted 28 January 2009 - 09:26 PM

i was really hoping that i would not have to learn a new language to get this done. but it seems that you guys are saying that it is not possible in plain html... bummer....

Was This Post Helpful? 0

#10 fuzzylunkinz

D.I.C Head

Reputation: 8

Posts: 185
Joined: 11-November 08

Re: table problems?

Posted 28 January 2009 - 09:46 PM

It's not a new language at all. It's the correct way to do things.

EDIT:
I'm sure it's possible to do it with what you have, but I don't endorse it.

This post has been edited by fuzzylunkinz: 28 January 2009 - 09:47 PM

Was This Post Helpful? 0

#11 cap10kid3

New D.I.C Head

Reputation: -1

Posts: 36
Joined: 16-August 05

Re: table problems?

Posted 30 January 2009 - 05:08 PM

so, how am i supposed to use the divs? what do they do, and how do you use it? really, i just want to know if it is possible to make that picture a reality, or if we need to go some other route... i know i sound like a complete moron, but i honestly do not have time to learn CSS in any in-depth way.

Was This Post Helpful? 0

#12 gregwhitworth

Tired.

Reputation: 200

Posts: 1,561
Joined: 20-January 09

Re: table problems?

Posted 03 February 2009 - 05:28 PM

<style>
#left, #right, #flashContainer {
   float: left;}

#subNav {
   float: right;}

#left, #subNav {
   width: 180px;}

#right {
   width: 600px;}

.large {
   font-size: 25px;
   font-weight: bold;}
</style>

<div class="large">Vlog</div>
<div id="left">Links Go Here</div>
<div id="right">
	   <div id="subNav">Graphic Links</div>
	   <div id="flashContainer"></div>
</div>

Ok. Usually we don't do much work for people here - but since you have posted code I wanted to show you JUST how easy your layout actually is. This isn't necassarily a 2 column layout - but it will achieve the same look. I basically gave you a foundation - now go here: http://www.htmldog.c...es/cssbeginner/ and build upon it.

Check back with any progress or questions.

--

Greg

This post has been edited by gregwhitworth: 03 February 2009 - 05:30 PM

Was This Post Helpful? 1

#13 cap10kid3

New D.I.C Head

Reputation: -1

Posts: 36
Joined: 16-August 05

Re: table problems?

Posted 04 February 2009 - 01:25 PM

okay, one final question... i got most of my page set up properly, but all of a sudden my center tag went out of whack, and i cannot move the graphic links up without stacking them on top of one another... anyone able to tell me what's wrong with this code?

<html>
<head><title> The Daniel Show...</title></head>
<body>
<body bgcolor="#ffffff"text="blue" link="#green" vlink="red"alink="black">
   <div class=wrapper width: 1000px; height: 200px;>

<br><BR><BR>
<center><font size = "13">Craig's VLOG</font></center>
<style>
#left, #right, #center{
	float: left;}

#subNav {
	float: right;}

#left, #subNav {
	position: absolute;
	width: 150px;
	right: 950;}

#right {
	position: absolute;
	right:10;
	width: 300;

#center {
	position: absolute;
	right:20;
	top: 20;
	width: 425;

.large {
   font-size: 30px;
   font-weight: bold;}
</style>
<div id= "left"><font size = "6">Playlists<br></font></div><br><br>
<div id="left"><a href="">TJ's VLOG</a></div><br>
<div id="left"><a href="">Daniel's VLOG</a></div><br>
<div id="left"><a href="">frank's VLOG</a></div><br>
<div id="left"><a href="">eyes's VLOG</a></div><br>
<div id="left"><a href="">ducks's VLOG</a></div><br>
<div id="left"><a href="">david's VLOG</a></div><br>
<div id="center"><object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/l-

0AsHzSN4k&hl=en&fs=1&rel=0">
</param><param name="allowFullScreen" value="true"></param>
<embed src="http://www.youtube.com/v/l-0AsHzSN4k&hl=en&fs=1&rel=0" type="application/x-shockwave-flash" allowfullscreen="true" 

width="425" height="344"></embed></object></div>

<div id="right"><a href=""><img src="Shortfillms_button_small.jpg"></a></div><br><br>
<div id="right"><a href=""><img src="Series_button_small.jpg"></a></div><br><br>
<div id="right"><a href=""><img src="Commercials_button_small.jpg"></a></div><br><br>
<div id="right"><a href=""><img src="VLOG_button_small.jpg"></a></div><br><br>
</div>

</BODY>

Was This Post Helpful? 0

#14 teampoop

D.I.C Head

Reputation: 17

Posts: 140
Joined: 19-June 08

Re: table problems?

Posted 04 February 2009 - 01:37 PM

Try moving your style tags into the head tag of your html. The CSS is processed in the order it is presented so CSS after the fact may fail you.

Oh and the use of font and center tags are evil.. Try changing that center tag into

<html>
<head>
<style>
/*previous style snipped*/
div.centered { text-align:center; font-size: 13px /*ps: 13 what?!*/}
</style>

</head>
<body>
<!--code code code-->
<div class="centered">Craigs VLOG</div>
<!--code code code-->
</body>
</html>

Actually, as I was writing this, I realize this is a headline, so to be semantically correct, use the H1 tag. It already is bigger and centered by default.

As always, these are only suggestions and can be promptly ignored.

Was This Post Helpful? 0

Page 1 of 1

how to make a page that looks like this...?

13 Replies - 842 Views - Last Post: 04 February 2009 - 01:37 PM

table problems?

Replies To: table problems?

Re: table problems?

Re: table problems?

Re: table problems?

Re: table problems?

Re: table problems?

Re: table problems?

Re: table problems?

Re: table problems?

Re: table problems?

Re: table problems?

Re: table problems?

Re: table problems?

Re: table problems?

Related Topicsbeta

Follow & Share

Give It A Try!

Programming

Web Development

Reference Sheets

Bye Bye Ads

Monthly Drawing

Related Topics^beta