The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Widget issue

2 posters

Go down

In progress Widget issue

Post by Anzo Sat 19 Sep - 20:40

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
Anzo
Forumember

Posts : 358
Reputation : 8
Language : English/Arabic
Location : Baghdad - Iraq

http://www.duelacademy.net/forum

Back to top Go down

In progress Re: Widget issue

Post by SLGray Sat 19 Sep - 22:29

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>


Widget issue Slgray10

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

Male Posts : 51572
Reputation : 3525
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

In progress Re: Widget issue

Post by Anzo Sat 19 Sep - 22:39

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
Anzo
Forumember

Posts : 358
Reputation : 8
Language : English/Arabic
Location : Baghdad - Iraq

http://www.duelacademy.net/forum

Back to top Go down

In progress Re: Widget issue

Post by SLGray Sat 19 Sep - 22:41

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


Widget issue Slgray10

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

Male Posts : 51572
Reputation : 3525
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

In progress Re: Widget issue

Post by Anzo Sat 19 Sep - 22:50

Where do I place the table?
Anzo
Anzo
Forumember

Posts : 358
Reputation : 8
Language : English/Arabic
Location : Baghdad - Iraq

http://www.duelacademy.net/forum

Back to top Go down

In progress Re: Widget issue

Post by SLGray Sat 19 Sep - 23:03

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


Widget issue Slgray10

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

Male Posts : 51572
Reputation : 3525
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

In progress Re: Widget issue

Post by Anzo Sat 19 Sep - 23:19

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
Anzo
Forumember

Posts : 358
Reputation : 8
Language : English/Arabic
Location : Baghdad - Iraq

http://www.duelacademy.net/forum

Back to top Go down

In progress Re: Widget issue

Post by SLGray Sat 19 Sep - 23:21

Please post your code.


Widget issue Slgray10

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

Male Posts : 51572
Reputation : 3525
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

In progress Re: Widget issue

Post by Anzo Sat 19 Sep - 23:36

It's the same one in the OP
Anzo
Anzo
Forumember

Posts : 358
Reputation : 8
Language : English/Arabic
Location : Baghdad - Iraq

http://www.duelacademy.net/forum

Back to top Go down

In progress Re: Widget issue

Post by Anzo Sun 20 Sep - 4:56

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

Thanks for your help Very Happy
Anzo
Anzo
Forumember

Posts : 358
Reputation : 8
Language : English/Arabic
Location : Baghdad - Iraq

http://www.duelacademy.net/forum

Back to top Go down

Back to top

- Similar topics

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