absoluted div issue

Question

DarkBerzerk -1 Light Poster

12 Years Ago

Hey there,
i make table with some results and want to make the first row (titles) absoluted, but all the table have horizontal-scrollbar when i move the scroll the absoluted row dont move.
how to fix that with CSS :/
Code:

<style type="text/css" media="all">
.slim #blueBar{height:37px;}
#blueBar{background-color:#3b5998;width:895px;z-index:300}
.fixed_elem{position:absolute;clip : auto;white-space:normal;}
#boxtable {
/*the chat div container*/
text-align:left;
margin:0 auto;
margin-bottom:10px;
padding:1px;
background-color: #f0f0f0;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-right: 1px solid rgba(9, 9, 9, 0.125);
height:400px;
width:910px;
overflow:auto;
}
</style>   
<div id="boxtable" >
<div id="blueBarHolder" class="slim">
<div class=" fixed_elem" id="blueBar">
<table><thead >
					
                        <tr >
						
                          <th style="text-align:center;">  <input type="checkbox" name="chkDel[]" value=""></th>
						  <th style="text-align:center;"></th>
                                <th style="text-align:center;">UID</th>
                                <th style="text-align:center;">PID</th>
                                <th style="text-align:center;">Admin</th>
                                <th>Name</th>
                                <th style="text-align:center;">Class</th>
								<th style="text-align:center;">Specialty</th>
								<th style="text-align:center;">Level</th>
								<th style="text-align:center;">Contribute</th>
								<th style="text-align:center;" >Exp</th>
								<th style="text-align:center;">GID</th>
								<th style="text-align:center;">GRole</th>
								<th style="text-align:center;" >Strength</th>
								<th style="text-align:center;">Health</th>
								<th style="text-align:center;">Intelligence</th>
								<th style="text-align:center;">Wisdom</th>
								<th style="text-align:center;">Dexterity</th>
								<th style="text-align:center;">CurHP</th>
								<th style="text-align:center;">CurMP</th>
								<th style="text-align:center;">PUPoint</th>
								<th style="text-align:center;">SUPoint</th>
								<th style="text-align:center;">Killed</th>
								<th style="text-align:center;">Map</th>
								<th style="text-align:center;">X</th>
								<th style="text-align:center;">Y</th>
								<th style="text-align:center;">Z</th>
								<th style="text-align:center;">Face</th>
								<th style="text-align:center;">Hair</th>
								<th style="text-align:center;">RevivalId</th>
								<th style="text-align:center;">Rage</th>
								<th style="text-align:center;">Reborn</th>
								<th style="text-align:center;">TradeCharacter</th>
								<th style="text-align:center;">Price</th>
								<th style="text-align:center;">AccountUID</th>	
                        </tr>
                        </thead> </table>
</div></div>
<br><br>
<table  >
                    <thead >
                        <tr >
						
                          <th style="text-align:center;">  <input type="checkbox" name="chkDel[]" value=""></th>
						  <th style="text-align:center;"></th>
                                <th style="text-align:center;">UID</th>
                                <th style="text-align:center;">PID</th>
                                <th style="text-align:center;">Admin</th>
                                <th>Name</th>
                                <th style="text-align:center;">Class</th>
								<th style="text-align:center;">Specialty</th>
								<th style="text-align:center;">Level</th>
								<th style="text-align:center;">Contribute</th>
								<th style="text-align:center;" >Exp</th>
								<th style="text-align:center;">GID</th>
								<th style="text-align:center;">GRole</th>
								<th style="text-align:center;" >Strength</th>
								<th style="text-align:center;">Health</th>
								<th style="text-align:center;">Intelligence</th>
								<th style="text-align:center;">Wisdom</th>
								<th style="text-align:center;">Dexterity</th>
								<th style="text-align:center;">CurHP</th>
								<th style="text-align:center;">CurMP</th>
								<th style="text-align:center;">PUPoint</th>
								<th style="text-align:center;">SUPoint</th>
								<th style="text-align:center;">Killed</th>
								<th style="text-align:center;">Map</th>
								<th style="text-align:center;">X</th>
								<th style="text-align:center;">Y</th>
								<th style="text-align:center;">Z</th>
								<th style="text-align:center;">Face</th>
								<th style="text-align:center;">Hair</th>
								<th style="text-align:center;">RevivalId</th>
								<th style="text-align:center;">Rage</th>
								<th style="text-align:center;">Reborn</th>
								<th style="text-align:center;">TradeCharacter</th>
								<th style="text-align:center;">Price</th>
								<th style="text-align:center;">AccountUID</th>
								
								
								
                        </tr>
					
                        </thead>
<tbody>
						
						<tr>
						     <td style="text-align:center;">  <input type="checkbox" name="chkDel[]" value=""></th>
						  <td style="text-align:center;"></th>
                                <td style="text-align:center;">UID</th>
                                <td style="text-align:center;">PID</th>
                                <td style="text-align:center;">Admin</th>
                                <td>Name</th>
                                <td style="text-align:center;">Class</th>
								<td style="text-align:center;">Specialty</th>
								<td style="text-align:center;">Level</th>
								<td style="text-align:center;">Contribute</th>
								<td style="text-align:center;" >Exp</th>
								<td style="text-align:center;">GID</th>
								<td style="text-align:center;">GRole</th>
								<td style="text-align:center;" >Strength</th>
								<td style="text-align:center;">Health</th>
								<td style="text-align:center;">Intelligence</th>
								<td style="text-align:center;">Wisdom</th>
								<td style="text-align:center;">Dexterity</th>
								<td style="text-align:center;">CurHP</th>
								<td style="text-align:center;">CurMP</th>
								<td style="text-align:center;">PUPoint</th>
								<td style="text-align:center;">SUPoint</th>
								<td style="text-align:center;">Killed</th>
								<td style="text-align:center;">Map</th>
								<td style="text-align:center;">X</th>
								<td style="text-align:center;">Y</th>
								<td style="text-align:center;">Z</th>
								<td style="text-align:center;">Face</th>
								<td style="text-align:center;">Hair</th>
								<td style="text-align:center;">RevivalId</th>
								<td style="text-align:center;">Rage</th>
								<td style="text-align:center;">Reborn</th>
								<td style="text-align:center;">TradeCharacter</th>
								<td style="text-align:center;">Price</th>
								<td style="text-align:center;">AccountUID</th>
</tr>
<tr>
						     <td style="text-align:center;">  <input type="checkbox" name="chkDel[]" value=""></th>
						  <td style="text-align:center;"></th>
                                <td style="text-align:center;">UID</th>
                                <td style="text-align:center;">PID</th>
                                <td style="text-align:center;">Admin</th>
                                <td>Name</th>
                                <td style="text-align:center;">Class</th>
								<td style="text-align:center;">Specialty</th>
								<td style="text-align:center;">Level</th>
								<td style="text-align:center;">Contribute</th>
								<td style="text-align:center;" >Exp</th>
								<td style="text-align:center;">GID</th>
								<td style="text-align:center;">GRole</th>
								<td style="text-align:center;" >Strength</th>
								<td style="text-align:center;">Health</th>
								<td style="text-align:center;">Intelligence</th>
								<td style="text-align:center;">Wisdom</th>
								<td style="text-align:center;">Dexterity</th>
								<td style="text-align:center;">CurHP</th>
								<td style="text-align:center;">CurMP</th>
								<td style="text-align:center;">PUPoint</th>
								<td style="text-align:center;">SUPoint</th>
								<td style="text-align:center;">Killed</th>
								<td style="text-align:center;">Map</th>
								<td style="text-align:center;">X</th>
								<td style="text-align:center;">Y</th>
								<td style="text-align:center;">Z</th>
								<td style="text-align:center;">Face</th>
								<td style="text-align:center;">Hair</th>
								<td style="text-align:center;">RevivalId</th>
								<td style="text-align:center;">Rage</th>
								<td style="text-align:center;">Reborn</th>
								<td style="text-align:center;">TradeCharacter</th>
								<td style="text-align:center;">Price</th>
								<td style="text-align:center;">AccountUID</th>
</tr>

								</tbody>
						</table>

web-design

4 Contributors
4 Replies
143 Views
1 Week Discussion Span
Latest Post 12 Years Ago Latest Post by marios_neo

marios_neo 3 Newbie Poster

12 Years Ago

Yes there are problems with the open and closing tags <th></th> <td></td> in line 115 and after. go on http://http://validator.w3.org/#validate_by_upload upload your html file, validate it and fix your errors

dantinkakkar commented: How did you avoid the hashes? +3

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

marios_neo 3 Newbie Poster · Answer 1 · 2012-02-22T03:16:56+00:00

where are your close DIVs (</div>)?

<div id="boxtable" >
<div id="blueBarHolder" class="slim">
<div class=" fixed_elem" id="blueBar">

weekendrockstar 12 Junior Poster in Training · Answer 2 · 2012-02-22T16:03:17+00:00

Not sure if it would have anything to do with the specific problem you are reporting however from line 115 on you are opening

<td>

tags but closing them with

</tr>

tags. I am not sure if this is carryover from the first section where you were using

<th>

tags. And it might have been easier to go with the following CSS:

th {text-align:center;}
td {text-align:center;}

That way you wouldn't have to specify it as a style in every single tag. Could be nitpicking but it bloats your file size plus if you were to do this on everything that you do and decide at some point that you want to add an attribute or change the alignment you'd only have to make a single change/addition rather than doing it for every single element you want affected.

I will try to figure out your initial probably later with rested eyes as it's 5am and I've been up 24 hours.

dantinkakkar 19 Junior Poster · Answer 3 · 2012-02-22T18:16:29+00:00

Hey there! Can you please give us a working link of a practical example of your code? That would prove very useful in helping you as then I can edit off my browser, and I won't have to erase every number that has been added. It would be a great help. Or perhaps you should just post the part where you are having a problem.