The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Widget issue

View previous topic View next topic Go down

In progress Widget issue

Post by Anzo on September 19th 2015, 7:40 pm

Hi,

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?

Anzo
Forumember

Posts : 316
Reputation : 6
Language : English/Arabic
Location : Baghdad - Iraq

http://www.duelacademy.net/forum

Back to top Go down

In progress Re: Widget issue

Post by SLGray on September 19th 2015, 9:29 pm

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>


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 36697
Reputation : 2445
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

In progress Re: Widget issue

Post by Anzo on September 19th 2015, 9:39 pm

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.

Anzo
Forumember

Posts : 316
Reputation : 6
Language : English/Arabic
Location : Baghdad - Iraq

http://www.duelacademy.net/forum

Back to top Go down

In progress Re: Widget issue

Post by SLGray on September 19th 2015, 9:41 pm

Create a table and add the codes so they will be next to each other.


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 36697
Reputation : 2445
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

In progress Re: Widget issue

Post by Anzo on September 19th 2015, 9:50 pm

Where do I place the table?

Anzo
Forumember

Posts : 316
Reputation : 6
Language : English/Arabic
Location : Baghdad - Iraq

http://www.duelacademy.net/forum

Back to top Go down

In progress Re: Widget issue

Post by SLGray on September 19th 2015, 10:03 pm

You said that this was in a widget. Correct? Then add the table to the widget.


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 36697
Reputation : 2445
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

In progress Re: Widget issue

Post by Anzo on September 19th 2015, 10:19 pm

I added the table to the widget, same result. Anything I add to that code shows beneath the tournaments table and not beside it.

Anzo
Forumember

Posts : 316
Reputation : 6
Language : English/Arabic
Location : Baghdad - Iraq

http://www.duelacademy.net/forum

Back to top Go down

In progress Re: Widget issue

Post by SLGray on September 19th 2015, 10:21 pm

Please post your code.


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 36697
Reputation : 2445
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

In progress Re: Widget issue

Post by Anzo on September 19th 2015, 10:36 pm

It's the same one in the OP

Anzo
Forumember

Posts : 316
Reputation : 6
Language : English/Arabic
Location : Baghdad - Iraq

http://www.duelacademy.net/forum

Back to top Go down

In progress Re: Widget issue

Post by Anzo on September 20th 2015, 3:56 am

I made another widget, nothing seems to work when using the code inside the same widget.

Thanks for your help Very Happy

Anzo
Forumember

Posts : 316
Reputation : 6
Language : English/Arabic
Location : Baghdad - Iraq

http://www.duelacademy.net/forum

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum