Home
by Anzo September 19th 2015, 7:40 pmHi,
I have a widget positioned right beneath my logo. I used Display:absolute and positioned it that way.
The widget is this following:
Whenever I try to add another code to it, it doesn't show properly. I'm adding the code before the last div in the previous code so they remain within the same div container.
The code is this:
It's pretty basic but not working properly. This is how it appears before I add the 2nd code: http://prntscr.com/8i5byd
Here is how it looks after: http://prntscr.com/8i5csl
I want them both to be centered in the middle of the page when zooming in or out of the page. That's why I'm using inline-block and not float.
How do i fix this?
I have a widget positioned right beneath my logo. I used Display:absolute and positioned it that way.
The widget is this following:
- Code:
<style>
#index_2ndrow_table {
position: absolute;
display: block;
left: 0px;
right: 0px;
height: 148px;
background-color: #202020;
color: #FFF;
top: 378px;
}
#index_tour_table_container {
background-color: #484848;
left: 0px;
width: 685px;
height: 148px;
}
tr.index_tour_head {
text-align:center;
color: red;
padding: 10px;
}
.tour_title {
background-color: #484848;
text-align: center;
padding: 7px 1px 9px;
margin-bottom: 0px;
}
#index_tour {
width: 684px;
}
.index_tour_split {
background-color: #868686;
}
.index_tour_head_title {
padding: 3px;
}
.index_tour_head_title2 {
padding: 3px;
width: 135px;
}
.index_tour_list_name {
padding: 2px 0px 3px 5px;
}
.index_tour_list_name2 {
padding: 2px 0px 3px 5px;
text-align: center;
}
.index_tour_list {
background-color: rgb(164, 164, 164);
}
</style>
<div id="index_2ndrow_table">
<div id="index_tour_table_container">
<p class="tour_title">
Tournament Table
</p>
<table id="index_tour">
<tbody>
<tr class="index_tour_split">
<th class="index_tour_head_title">
Tournament
</th>
<th class="index_tour_head_title2">
Status
</th>
</tr>
<tr class="index_tour_list">
<td class="index_tour_list_name">
Tournament #1 Here
</td>
<td class="index_tour_list_name2">
Status Here
</td>
</tr>
<tr class="index_tour_list">
<td class="index_tour_list_name">
Tournament #1 Here
</td>
<td class="index_tour_list_name2">
Status Here
</td>
</tr>
<tr class="index_tour_list">
<td class="index_tour_list_name">
Tournament #1 Here
</td>
<td class="index_tour_list_name2">
Status Here
</td>
</tr>
<tr class="index_tour_list">
<td class="index_tour_list_name">
Tournament #1 Here
</td>
<td class="index_tour_list_name2">
Status Here
</td>
</tr>
<tr class="index_tour_list">
<td class="index_tour_list_name">
Tournament #1 Here
</td>
<td class="index_tour_list_name2">
Status Here
</td>
</tr>
</tbody>
</table>
</div>
</div>
Whenever I try to add another code to it, it doesn't show properly. I'm adding the code before the last div in the previous code so they remain within the same div container.
The code is this:
- Code:
<div id="moving_icons">
<div id="moving_icon_field1">
<img id="mo_ic" src="http://i.imgur.com/0bHQftt.png" />
<p class="mo_ic_p1">
This is some text here
</p>
</div>
</div>
It's pretty basic but not working properly. This is how it appears before I add the 2nd code: http://prntscr.com/8i5byd
Here is how it looks after: http://prntscr.com/8i5csl
I want them both to be centered in the middle of the page when zooming in or out of the page. That's why I'm using inline-block and not float.
How do i fix this?
