1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Positioning a table

Discussion in 'CSS' started by vivek_master146, Sep 2, 2009.

0
  1. #1
    I want to position an html table at the top(extreme top). Is this the correct way using CSS relative position property ?

    <html>
<head>
<style type="text/css">
we
{
position:relative;
top:-10px;
}
</style>
</head>

<body>
<we><table width="200" border="2" cellspacing="0" cellpadding="0">
  <tr>
    <td>&nbsp;</td>
  </tr>
</table></we>
</body>
    HTML:
    </html>
     
    vivek_master146, Sep 2, 2009 IP
  2. vivek_master146

    vivek_master146 Peon

    Messages:
    134
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    vivek_master146, Sep 2, 2009 IP
  3. nyxano

    nyxano Peon

    Messages:
    417
    Likes Received:
    15
    Best Answers:
    0
    Trophy Points:
    0
    #3
    That is because in IE, there is an automatic padding for the <BODY>. If you want your web page (in this case, the table) to be flush to the top in IE, add margin: 0; padding: 0; to the BODY tag in your CSS.
     
    nyxano, Sep 2, 2009 IP
  4. vivek_master146

    vivek_master146 Peon

    Messages:
    134
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    How to that in body section?
     
    vivek_master146, Sep 2, 2009 IP
  5. vivek_master146

    vivek_master146 Peon

    Messages:
    134
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    This way:-

    <body>
<style type="text/css">
we
{
	position:absolute;
	top:0px;
	left:-10px;
	background-color: #996600;
	z-index: 0;
	width: 1057px;
   margin:0px;
   padding:0px;

}
</style>

<we>
	
  <table width="950" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td bgcolor="#996600"><div align="right"><a href="www.avi-bags.com">Home</a>&nbsp; <a href="www.yahoo.com">Yahoo</a></div></td>
  </tr>
</table></we>
</body>
    HTML:
     
    vivek_master146, Sep 2, 2009 IP
  6. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #6
    <we> is not an HTML tag. This is not XML, so you cannot simply invent tags. You must use the pre-defined tags listed at the W3C specifications.
     
    Stomme poes, Sep 3, 2009 IP
  7. ads2help

    ads2help Peon

    Messages:
    2,142
    Likes Received:
    67
    Best Answers:
    1
    Trophy Points:
    0
    #7
    When you use relative, you are moving an element from its current position.

    In your situation, I think you need an absolute position.

    Why did you use <we> anyway? :eek:
     
    ads2help, Sep 3, 2009 IP
  8. vivek_master146

    vivek_master146 Peon

    Messages:
    134
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8
    I just used it as i have declared a css property. So what should be the standard name. If there are two tables with different positioning what names should i use ? I cant use one name.
     
    vivek_master146, Sep 4, 2009 IP
  9. vivek_master146

    vivek_master146 Peon

    Messages:
    134
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #9
    @nyxano

    Please correct my code.
     
    vivek_master146, Sep 4, 2009 IP
  10. vivek_master146

    vivek_master146 Peon

    Messages:
    134
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #10
    This time is used td instead of we. Now it is working :-

    <html>
<head>

</head>

<body>
<style type="text/css">
td
{
	position:absolute;
	top:0px;
	left:0px;
	background-color: #996600;
	z-index: 0;
	width: 1057px;
   margin:0px;
   padding:0px;

}
</style>


	
  <table width="950" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td bgcolor="#996600"><div align="right"><a href="www.avi-bags.com">Home</a>&nbsp; <a href="www.yahoo.com">Yahoo</a></div></td>
  </tr>
</table>
</body>
    HTML:

    Now if i have 2 tables then what will i do ?

    The main problem is to position 2 or more than 2 tables using CSS.
     
    vivek_master146, Sep 4, 2009 IP
  11. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #11 
    <html>
<head>

</head>

<body>
<style type="text/css">
table
{
    position:absolute;
    top:0px;
    left:0px;
    background-color: #996600;
    z-index: 0;
    width: 1057px;
   margin:0px;
   padding:0px;

}
</style>


   
  <table width="950" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td bgcolor="#996600"><div align="right"><a href="www.avi-bags.com">Home</a>&nbsp; <a href="www.yahoo.com">Yahoo</a></div></td>
  </tr>
</table>
</body>
    Code (markup):
    If you had done this, your entire table would have been absolutely positioned.

    But if you have two tables, they will sit on each other. however nyxano gave the correct answer earlier: normally your tables would touch the top of the page, but only AFTER removing the default margins and any padding on the body.

    Try this at the top of your stylesheet:

    * {
    margin: 0;
    }

    That removes all margins from all HTML, the body and the table all have now no margins. You can always add them back in for any one element if you want.

    I can never remember if the body has any padding but you can also add

    body {
    padding: 0;
    }

    don't remove padding from everything because if you have a form you can't add the padding back when you need it in all browsers. Besides most things don't have default padding.

    With margins gone, you do not need the position: absolute code, so you can remove it. If you have two tables one will sit at the top of the page and the second one will come right after it.

    Table td's and th's do have default 1px padding in Firefox but normally that's no problem.

    What I see on your page actually should not be in a table but that's up to you.
     
    Stomme poes, Sep 4, 2009 IP
  12. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #12
    Do I even need to say how much /fail/ this is made of? Absolute positioning for a single element? Gah.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
	xmlns="http://www.w3.org/1999/xhtml"
	lang="en"
	xml:lang="en"
><head>

<meta
	http-equiv="Content-Type"
	content="text/html; charset=utf-8"
/>

<title>
	Top Table
</title>

<style type="text/css" media="screen,tv,projection">
/* null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,
table,tr,td,th,p,img {
	margin:0;
	padding:0;
}

img,fieldset {
	border:none;
}

.we {
	width:950px;
	background:#996600;
	border-collapse:collapse;
	border:solid #000;
	border-width:2px 0 0 2px;
}

.we td {
	text-align:center;
	border:solid #000;
	border-width:0 2px 2px 0;
}

</style>

</head><body>
<table class="we">
  <tr>
    <td>Some Content</td>
  </tr>
</table>

</body></html>
    Code (markup):
    That will put the table in the top left corner with no spacing/padding around it. I tossed the full reset I use in there to make things simpler. Alternating the border edges in collapse prevents a couple browsers (webkit and IE) from having strange spacing issues... Even though I have the nasty feeling this table given it's position is NOT going to contain tabular data and therein a table shouldn't even be used - though I'd have to see the full page you are trying to build to say for certain.
     
    deathshadow, Sep 4, 2009 IP
  13. vivek_master146

    vivek_master146 Peon

    Messages:
    134
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #13
    @deathshadow and Poes

    Thanks for the reply. Now i got it. But my question is that if there are 2 or more than 2 tables then how should i use different style(like the .we one) for different tables. Though I got the inline property method from W3schools but i want to do it in ur way.

    Why u created this ".we td" ? Please explain as i am new to CSS.
     
    vivek_master146, Sep 4, 2009 IP
  14. vivek_master146

    vivek_master146 Peon

    Messages:
    134
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #14

    You are right. How about doing this way :-

    <html>
<head>

<meta
	http-equiv="Content-Type"
	content="text/html; charset=utf-8"
/>

<title>Top Table</title>
<style type="text/css" media="screen,tv,projection">
/* null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,
table,tr,td,th,p,img {
	margin:0;
	padding:0;
}


p
{
background-color:#CC6600;
text-align:center
}
</style>
<p> <a href="www.avi-bags.com">Home</a>&nbsp; <a href="www.yahoo.com">Yahoo</a></p>



</body>
</html>
    HTML:
     
    vivek_master146, Sep 4, 2009 IP
  15. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #15
    That is called a child selector. Basically it says "All TD's inside .we get this styling"

    for example, let's say you wanted all STRONG tags that occur inside paragraph tags to appear in red:

    p strong { color:red; }

    strong tags outside of paragraphs would remain uneffected, while those inside paragraphs would be changed.

    It's also why when styling certain types of elements "Not every element deserves a class" (which is akin to George Carlin's "Not every ejaculation deserves a name")...

    You'll often see code like this:

    <ul>
	<li class="menuItem"><a href="#" class="menuLink">Menu Item 1</a></li>
	<li class="menuItem"><a href="#" class="menuLink">Menu Item 2</a></li>
	<li class="menuItem"><a href="#" class="menuLink">Menu Item 2</a></li>
</ul>
    Code (markup):
    There is no reason to EVER do that - I would code that same thing:

    <ul class="menu">
	<li><a href="#">Menu Item 1</a></li>
	<li><a href="#">Menu Item 2</a></li>
	<li><a href="#">Menu Item 3</a></li>
</ul>
    Code (markup):
    Which has all the same styling hooks...

    original | My version
    .menuItem == .menu li
    .menuLink == .menu a

    The only reason to use a class is if the element is going to be styled DIFFERENTLY than it's kin. If it's going to be styled the same, use the parent element as it's hook. For example:

    <ul class="menu">
	<li><a href="#" class="current">Home</a></li>
	<li><a href="#">Forums</a></li>
	<li class="last"><a href="#">Links</a></li>
</ul>
    Code (markup):
    Target the ones that get different styling with classes, but also inherit styling off the parent element.
     
    deathshadow, Sep 4, 2009 IP
  16. shopon

    shopon Member

    Messages:
    68
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    41
    #16
    Please explain as i am new to CSS.
     
    shopon, Sep 4, 2009 IP
  17. vivek_master146

    vivek_master146 Peon

    Messages:
    134
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #17
    I know that. How about doing this way. Is it OK ?

    
<html>
<head>

<meta
    http-equiv="Content-Type"
    content="text/html; charset=utf-8"
/>

<title>Top Table</title>
<style type="text/css" media="screen,tv,projection">
/* null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,
table,tr,td,th,p,img {
    margin:0;
    padding:0;
}


p
{
background-color:#CC6600;
text-align:center
}
</style>
<p> <a href="www.avi-bags.com">Home</a>&nbsp; <a href="www.yahoo.com">Yahoo</a></p>



</body>
</html>
    HTML:
     
    vivek_master146, Sep 5, 2009 IP
  18. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #18
    Here are the list of tags you can use in your document. (Ignore all the ones which say depreceated, do not use tho.
    If there's not a tag for the purpose, then the common trend is to either a DIV or a SPAN.

    <a> for links
    <ul> for un-ordered lists of things
    <p> for paragraphs
    <table> for tabular data
    <span> for things which don't fit into any category (inline)
    <div> also for things which don't fit into any category (block)
    These are a few of the most commonly used tags, but there are many more as in the link provided.

    In your case it is sort of a list of links, but theres only 2 there, so not really a big list, so we could just use a span or a div.

    
<div class="links">
<a href="www.avi-bags.com">Home</a>&nbsp;<a href="www.yahoo.com">Yahoo</a>
</div>
    Code (markup):
    Then to style this:

    
.links {
your styling for the overall div would go here
}
.links a {
your styling for each link in the .links div would go here
}
    Code (markup):
     
    wd_2k6, Sep 6, 2009 IP
  19. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #19
    Yeah with someone like only two links it's hard to tell if it's supposed to be a menu or not.

    But let's say it was a menu (that you will add more clickies there). Lots of new people use a div or a p filled with anchors or spans. Most web developers use an unordered list.

    A div (or even a p) is a box, and a box full of links is like a box full of pills. Compare this to a pillbox, where the pills to be taken on Wednesday are in the wednesday box, and the Thursday pills in the Thursday box. I think of unordered-list menus as a pillbox.

    <ul id="menu">
    <li><a href="home">Home</a></li>
    <li><a href="yahoo...">Yahoo</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Other links</a></li>
    </ul>
     
    Stomme poes, Sep 7, 2009 IP