Widget issue
2 posters
Page 1 of 1
Widget issue
Hi,
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?
Re: Widget issue
- 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>
<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>
Lost Founder's Password |Forum's Utilities |Report a Forum |General Rules |FAQ |Tricks & Tips
You need one post to send a PM.
You need one post to send a PM.
When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
Re: Widget issue
This is where it's showing with your code
http://prntscr.com/8i6wnn
I want it to be next to the tournaments table, similar to what we get if we used float.
http://prntscr.com/8i6wnn
I want it to be next to the tournaments table, similar to what we get if we used float.
Re: Widget issue
Create a table and add the codes so they will be next to each other.
Lost Founder's Password |Forum's Utilities |Report a Forum |General Rules |FAQ |Tricks & Tips
You need one post to send a PM.
You need one post to send a PM.
When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
Re: Widget issue
You said that this was in a widget. Correct? Then add the table to the widget.
Lost Founder's Password |Forum's Utilities |Report a Forum |General Rules |FAQ |Tricks & Tips
You need one post to send a PM.
You need one post to send a PM.
When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
Re: Widget issue
I added the table to the widget, same result. Anything I add to that code shows beneath the tournaments table and not beside it.
Re: Widget issue
Please post your code.
Lost Founder's Password |Forum's Utilities |Report a Forum |General Rules |FAQ |Tricks & Tips
You need one post to send a PM.
You need one post to send a PM.
When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
Re: Widget issue
I made another widget, nothing seems to work when using the code inside the same widget.
Thanks for your help
Thanks for your help
Similar topics
» News Widget Issue
» Google+, Facebook, & Twitter Widget Issue
» Widget Twitter issue
» Widget Mouseover coding issue
» Account Switch (Widget) Issue
» Google+, Facebook, & Twitter Widget Issue
» Widget Twitter issue
» Widget Mouseover coding issue
» Account Switch (Widget) Issue
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum