Div and Table Help

0 Kudo

Add Reply New Topic

<< Previous Topic Next Topic >>

Author

Comment

Joseph Witchard

Div and Table Help

Lead

[-]

Posts: 62

7 Aug, 2008 05:33

Tags : None

I've got a table that's inside a div element. The problem is I don't want the table cells to go across the entire div, but I don't know how how shorten the length of the table. I tried making the table's width 90%, but that didn't work. Can someone give me a hand?

Reply Quote

Arizona

#1

[-]

Posts: 1395

7 Aug, 2008 07:23

yuku global moderator

Hi Joe

. Because the board css has the table width set already you have to add your width like this:

<table style="width: 90%;">

or:

<table style="width: 850px;">

etc.

Reply Quote

Joseph Witchard

#2

[-]

Posts: 63

7 Aug, 2008 20:09

That did it. Thanks!

Reply Quote

Joseph Witchard

#3

[-]

Posts: 64

7 Aug, 2008 23:11

Hi, it's me again :p

How do I add space between my

tags? I tried adding the cellspacing attribute to the tag, and that didn't work. So I tried adding margin-left: 5px; to the style information of each

tag, and that didn't work either.

Reply Quote

Arizona

#4

[-]

Posts: 1397

7 Aug, 2008 23:34

yuku global moderator

You mean the little search tags at the top of the board? If so this should work:

.tags-list a { padding-right: 5px; }

Just change the 5 to what you like,

.

Reply Quote

exstreamuser

#5

[-]

Posts: 712

7 Aug, 2008 23:36

To do that, use the first of the following two lines. If you want to move the first tag back to it's original position, use the second line as well.

.post-tags a { margin-left: 5px; }

.post-tags strong { margin-right: -5px; }

Reply Quote

Joseph Witchard

#6

[-]

Posts: 65

9 Aug, 2008 21:45

That's not what I meant (sorry, it didn't post right above). What I mean is the cellspacing between my <td> tags.

Reply Quote

Arizona

#7

[-]

Posts: 1401

10 Aug, 2008 11:07

yuku global moderator

Hm, cellspacing is not available in CSS. Just cell padding. But there is usually a way to get the effect you want. Can you describe what you are trying to do?

Reply Quote

Joseph Witchard

#8

[-]

Posts: 66

10 Aug, 2008 19:42

I'm trying to move the table cells (the things that look like boxes on the table row) away from each other, so it doesn't look like they're all connected. Like they're sitting there by themselves

Reply Quote

Arizona

#9

[-]

Posts: 1410

10 Aug, 2008 20:20

yuku global moderator

Did you already try border-spacing?

Reply Quote

Joseph Witchard

#10

[-]

Posts: 67

11 Aug, 2008 00:32

No I didn't. To tell you the truth, I would rather not have borders on the table cells.

Reply Quote

Arizona

#11

[-]

Posts: 1414

11 Aug, 2008 10:34

yuku global moderator

Hi Joe

. Can you post me a link to where you are trying to do this? Or PM me with it if you'd rather not post .

Reply Quote

Joseph Witchard

#12

[-]

Posts: 68

11 Aug, 2008 21:38

http://witchardstestboard.yuku.com

It's a div in the footer. There's one table inside of it. I'm going to try something someone suggested to me (I'll post here if it's successful), but I'd still like your two cents

**EDIT: Nope, didn't work.

Last Edited By: Joseph Witchard 11 Aug, 2008 21:44. Edited 1 time.

Reply Quote

Arizona

#13

[-]

Posts: 1417

11 Aug, 2008 22:04

yuku global moderator

Ok if you don't mind working with div's instead of tables, you might try this. Change your html to this:

<div class="footer" align="center" style="border: 8px outset; background-color: #2d2d38; text-align: center;">
<p>BLAH BLAH BLAH</p>
<div class="tfoot">
<div>Gryffindor</div>
<div>Ravenclaw</div>
<div>Hufflepuff</div>
<div>Slytherin</div>
</div>

and then add this to your CSS:

.tfoot { padding-bottom: 20px; }
.tfoot div { display: inline; padding: 5px; border: 1px solid; margin-right: 20px;}

The margin right you can switch out to an amount you like. I wasn't sure if you wanted the border off or not...but if so just delete the "border: 1 px solid" from the tfoot div.

Reply Quote

Joseph Witchard

#14

[-]

Posts: 69

11 Aug, 2008 23:06

That part worked, but now there's a new problem >_< Sorry!

Go back to the URL I posted and look at how it is now. See "100" under where the table cells were? Well, the reason I've been testing this is because I'm going to have a small image under those names, along with their current point total under the image. I need those to be centered under the names. What would I need to do in order to accomplish that?

Reply Quote

Arizona

#15

[-]

Posts: 1419

11 Aug, 2008 23:33

yuku global moderator

Ok try this:

Custom Footer:

<div class="footer1" align="center" style="border: 8px outset; background-color: #2d2d38; text-align: center;">
<p>BLAH BLAH BLAH</p>
<div class="tfoot">
<div>Gryffindor<p>100</p></div>
<div>Ravenclaw<p>100</p></div>
<div>HUfflepuff<p>100</p></div>
<div>Slytherin<p>100</p></div>
</div>
</div>

Advanced CSS:

.tfoot { padding-bottom: 20px; }

.tfoot div {
display: inline-table;
padding: 5px;
margin-right: 20px;
}

Reply Quote

Joseph Witchard

#16

[-]

Posts: 70

12 Aug, 2008 00:53

It worked. Thanks!

Reply Quote

Arizona

#17

[-]

Posts: 1421

12 Aug, 2008 09:36

yuku global moderator

yw

Reply Quote

<< Previous Topic Next Topic >>

Add Reply

Yuku free message boards

Div and Table Help

Div and Table Help

Quick Reply