CODEWITHSUNDEEP
htmlcss
Alberto Rossi
Alberto Rossi

Reputation: 1800

HTML position absolute for a table

I have a table that is inside a div. The div has a class="bar" and it is on the top of the screen. It has 

top:0px;
left:0px;
right:0px;

The table inside this one, has 2 cells with a css hover that changes the color when you go over them with the mouse.

JSFiddle

Here you can see that when you go over C / C++ the grey background doesn't stay "inside" the div. I set the table to top:0px; left:0px; right:0px; but it is not fixed.

enter image description here

I want the grey rectangle to be inside the black div. What could I do?

Upvotes: 1

Views: 84

Answers (4)

Roko C. Buljan
Roko C. Buljan

Reputation: 206179

You cannot have duplicate ID in one document! Change #bgrect to .bgrect

<td width="50%" class="bgrect">

LIVE DEMO

CSS:

.bar{
    /* NO BACKGROUND ! */
    width:100%;
    height:28px;
    position:absolute;
    top: 0;
    left: 0;
    font: 67.5%'Lucida Sans Unicode', 'Bitstream Vera Sans', 'Trebuchet Unicode MS', 'Lucida Grande', Verdana, Helvetica, sans-serif;
    color:#D8D8D8;
}
#ontop {
    width:100%;
    text-align:center;
    top:0px;
    left:0px;
    right:0px;
    position:absolute;
    z-index:10;
    border-collapse:collapse;  /* collapse borders */
}
.bgrect{
    background-color: #0C0C0C; /* initial bg */
}
.bgrect:hover {
    background-color: #2E2E2E; /*   hover bg */
    cursor:pointer;
}

Upvotes: 1

Mr Lister
Mr Lister

Reputation: 46579

You forgot to set the border-spacing on the table to 0.

#ontop {
    width:100%;
    text-align:center;
    top:0px;
    left:0px;
    right:0px; 
    position:absolute;
    z-index:10;   
    border-spacing:0;
}

New fiddle.

(And while I agree that the absolute poisitioning is not needed in this example, I'm sure you have your reasons. You don't need the z-index though...)

Upvotes: 1

user2878988
user2878988

Reputation:

This css line will help you: 

#bgrect { padding: 0; }

Upvotes: 2

James Donnelly
James Donnelly

Reputation: 128791

The absolute positioning on the table isn't actually needed. You can remove that and then collapse the borders of your table using border-collapse: collapse:

#ontop {
    width:100%;
    text-align:center;
    z-index:10; 
    border-collapse: collapse;
}

JSFiddle demo.

Upvotes: 2

Related Questions