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.

Layout tables make divs values

View previous topic View next topic Go down

In progress Layout tables make divs values

Post by Marvin on Thu Feb 16, 2012 12:35 pm

Hello
Someone can give me these convert layout table to div view?

All tables should be changed to div values.

Table:
Code:
<table width="100%" summary="Wi-Fi Pokemon"><tr><td width="31"><div class="sprites" id="wifi_png"> </div></td><td width="284"><a class="forumtitle" href="LINK" title="Pokemon Wi-Fi Kämpe">Kampfarena</a><br /><span>Hier findet ihr Infos und Neuigkeiten zum Forum</span></td><td width="31"><div class="sprites" id="tausch_png"> </div></td><td width="279"><a class="forumtitle" href="LINK">Tauschbasar</a><br /><span>Hier könnt ihr mit anderen Pokemon und Items tauschen.</span></td></tr></table>


Please ensure that the images are already in div values are specified. (.sprites.. and # wifi_png)

Thanks.
avatar
Marvin
Forumember

Male Posts : 317
Reputation : 4
Language : German, basic English, Spanish, basic Bavarian, broken Italian

http://www.schiggysboard.com/

Back to top Go down

In progress Re: Layout tables make divs values

Post by Marvin on Fri Feb 17, 2012 3:49 pm

push, please help me Hello
avatar
Marvin
Forumember

Male Posts : 317
Reputation : 4
Language : German, basic English, Spanish, basic Bavarian, broken Italian

http://www.schiggysboard.com/

Back to top Go down

In progress Re: Layout tables make divs values

Post by ankillien on Sun Feb 19, 2012 5:20 am

Hi,

This code would produce similar result...

Code:
<div style="overflow:hidden;">

   <div style="float:left;width:50px;">
       
   </div>
   
   <div style="float:left;width:300px;">
      <a title="Pokemon Wi-Fi Kämpe" href="LINK" class="forumtitle">Kampfarena</a><br/><span>Hier findet ihr Infos und Neuigkeiten zum Forum</span>
   </div>
   
   <div style="float:left;width:50px;margin-left:20px;">
       
   </div>
   
   <div style="float:left;width:300px;">
      <a href="LINK" class="forumtitle">Tauschbasar</a><br/><span>Hier könnt ihr mit anderen Pokemon und Items tauschen.</span>
   </div>

</div>
avatar
ankillien
Energetic

Posts : 5198
Reputation : 129
Language : English, XHTML, CSS, JS, PHP, SQL

http://www.webartzforum.com/

Back to top Go down

In progress Re: Layout tables make divs values

Post by Marvin on Sun Feb 19, 2012 2:49 pm

Thanks, but the Picture (<div class="sprites" id="wifi_png"> </div>) is than not available.
And its only one talbe, the second is missing.
avatar
Marvin
Forumember

Male Posts : 317
Reputation : 4
Language : German, basic English, Spanish, basic Bavarian, broken Italian

http://www.schiggysboard.com/

Back to top Go down

In progress Re: Layout tables make divs values

Post by ankillien on Sun Feb 19, 2012 9:41 pm

You can add the calsses and IDs yourself as you want Smile

There are total 4 table cells in your code and I converted it into 4 divs. Which second is missing?
avatar
ankillien
Energetic

Posts : 5198
Reputation : 129
Language : English, XHTML, CSS, JS, PHP, SQL

http://www.webartzforum.com/

Back to top Go down

In progress Re: Layout tables make divs values

Post by Marvin on Mon Feb 20, 2012 11:17 am

Yes, but I cant make this.. can you make this for me?^^
avatar
Marvin
Forumember

Male Posts : 317
Reputation : 4
Language : German, basic English, Spanish, basic Bavarian, broken Italian

http://www.schiggysboard.com/

Back to top Go down

In progress Re: Layout tables make divs values

Post by ankillien on Mon Feb 20, 2012 12:45 pm

That is not so hard, mate.
Just add class="sprites" id="wifi_png" to whatever DIV you want.
avatar
ankillien
Energetic

Posts : 5198
Reputation : 129
Language : English, XHTML, CSS, JS, PHP, SQL

http://www.webartzforum.com/

Back to top Go down

In progress Re: Layout tables make divs values

Post by Marvin on Mon Feb 20, 2012 12:50 pm

No, for that I had a CSS Code (.sprites #wifi_png; backround..)
but I dont get it in the Div Table. Please make it for me.
avatar
Marvin
Forumember

Male Posts : 317
Reputation : 4
Language : German, basic English, Spanish, basic Bavarian, broken Italian

http://www.schiggysboard.com/

Back to top Go down

In progress Re: Layout tables make divs values

Post by ankillien on Mon Feb 20, 2012 10:47 pm

Here it is...

Code:
    <div style="overflow:hidden;">

      <div style="float:left;width:50px;" class="sprites" id="wifi_png">
         
      </div>
     
      <div style="float:left;width:300px;">
          <a title="Pokemon Wi-Fi Kämpe" href="LINK" class="forumtitle">Kampfarena</a><br/><span>Hier findet ihr Infos und Neuigkeiten zum Forum</span>
      </div>
     
      <div style="float:left;width:50px;margin-left:20px;" class="sprites" id="tausch_png">
         
      </div>
     
      <div style="float:left;width:300px;">
          <a href="LINK" class="forumtitle">Tauschbasar</a><br/><span>Hier könnt ihr mit anderen Pokemon und Items tauschen.</span>
      </div>

    </div>
avatar
ankillien
Energetic

Posts : 5198
Reputation : 129
Language : English, XHTML, CSS, JS, PHP, SQL

http://www.webartzforum.com/

Back to top Go down

In progress Re: Layout tables make divs values

Post by Marvin on Tue Feb 21, 2012 10:59 am

Hi thank you Wink
Yes, but the Text is not in one line? Can you make it exactly how an table?
avatar
Marvin
Forumember

Male Posts : 317
Reputation : 4
Language : German, basic English, Spanish, basic Bavarian, broken Italian

http://www.schiggysboard.com/

Back to top Go down

In progress Re: Layout tables make divs values

Post by ankillien on Tue Feb 21, 2012 11:06 am

This code would do...

Code:
<div style="overflow:hidden;">

         
<div style="float:left;width:50px;" class="sprites" id="wifi_png">
           
          </div>
       
         
<div style="float:left;width:350px;">
              <a title="Pokemon Wi-Fi Kämpe" href="LINK" class="forumtitle">Kampfarena</a><br /><span>Hier findet ihr Infos und Neuigkeiten zum Forum</span>
          </div>
       
         
<div style="float:left;width:50px;margin-left:20px;" class="sprites" id="tausch_png">
           
          </div>
       
         
<div style="float:left;width:350px;">
              <a href="LINK" class="forumtitle">Tauschbasar</a><br /><span>Hier könnt ihr mit anderen Pokemon und Items tauschen.</span>
          </div>

        </div>
avatar
ankillien
Energetic

Posts : 5198
Reputation : 129
Language : English, XHTML, CSS, JS, PHP, SQL

http://www.webartzforum.com/

Back to top Go down

In progress Re: Layout tables make divs values

Post by Marvin on Tue Feb 21, 2012 11:43 am

yes, but this is my CSS (for the CSS Sprite Pictures)
Code:
.sprites{float: left !important;background-position-y: 50% !important; height: 60px !important; background-color:transparent; background-image:url(http://h12.abload.de/img/cssspritediugy.png);background-repeat:no-repeat;}
##bild_png{background-position:0 0;height:31px;width:33px;}
#buch_png{background-position:-33px 0;height:29px;width:28px;}
#chat_png{background-position:-64px 0;height:31px;width:32px;}
#club_png{background-position:-96px 0;height:31px;width:32px;}
#daumen_png{background-position:-130px 0;height:32px;width:26px;}
#frage_png{background-position:-159px 0;height:32px;width:34px;}
#welt_png{background-position:-192px 0;height:33px;width:32px;}
#wifi_png{background-position:-228px -4px;height:25px;width:25px;}
#kinofilm_gif{background-position:-254px 0;height:30px;width:34px;}
#maler_png{background-position:-288px 0;height:33px;width:31px;}
#news_png{background-position:-320px 0;height:45px;width:47px;}
#tausch_png{background-position:-368px -3px;height:19px;width:22px;}
#team_png{background-position:-389px 0;height:32px;width:34px;}
#tv_png{background-position:-423px -5px;height:24px;width:30px;}
#schach_png{background-position:-453px 0;height:31px;width:31px;}
#present_png{background-position:-484px -2px;height:30px;width:28px;}
ul.navlinks span.new-message {
color : red;
}
And than it doesnt work so how i would.
avatar
Marvin
Forumember

Male Posts : 317
Reputation : 4
Language : German, basic English, Spanish, basic Bavarian, broken Italian

http://www.schiggysboard.com/

Back to top Go down

In progress Re: Layout tables make divs values

Post by Marvin on Thu Feb 23, 2012 8:48 am

push
avatar
Marvin
Forumember

Male Posts : 317
Reputation : 4
Language : German, basic English, Spanish, basic Bavarian, broken Italian

http://www.schiggysboard.com/

Back to top Go down

In progress Re: Layout tables make divs values

Post by ankillien on Thu Feb 23, 2012 11:20 am

Where have you added the CSS, it should be working.
avatar
ankillien
Energetic

Posts : 5198
Reputation : 129
Language : English, XHTML, CSS, JS, PHP, SQL

http://www.webartzforum.com/

Back to top Go down

In progress Re: Layout tables make divs values

Post by Marvin on Thu Feb 23, 2012 11:32 am

No.. please use it by yourself..
It doesnt work.
avatar
Marvin
Forumember

Male Posts : 317
Reputation : 4
Language : German, basic English, Spanish, basic Bavarian, broken Italian

http://www.schiggysboard.com/

Back to top Go down

In progress Re: Layout tables make divs values

Post by ankillien on Thu Feb 23, 2012 11:39 am

Can you provide URL of the page where you have added these codes?
avatar
ankillien
Energetic

Posts : 5198
Reputation : 129
Language : English, XHTML, CSS, JS, PHP, SQL

http://www.webartzforum.com/

Back to top Go down

In progress Re: Layout tables make divs values

Post by Marvin on Thu Feb 23, 2012 12:20 pm

avatar
Marvin
Forumember

Male Posts : 317
Reputation : 4
Language : German, basic English, Spanish, basic Bavarian, broken Italian

http://www.schiggysboard.com/

Back to top Go down

In progress Re: Layout tables make divs values

Post by kirk on Thu Feb 23, 2012 7:42 pm

It is not working because it is to wide, you will never fit the text and images next to each other thats why it is moving down on the page.

You should either have the sprite images above all the text.

or have them the way you have it in two table rows one over top of the other.

As you see here. it is way to wide to fit the first way at the top of this example page.

http://forbiddentempleofart.forum-phpbb.co.uk/h2-sprite-problem

so you may just want to add the second code.

avatar
kirk
Forumaster

Male Posts : 11037
Reputation : 652
Language : English,Vulcan,Klingon, Romulan,& Gorn

Back to top Go down

In progress Re: Layout tables make divs values

Post by ankillien on Thu Feb 23, 2012 9:10 pm

You got it right, kirk.

If the icons in this image (http://h12.abload.de/img/cssspritediugy.png) are aligned vertically, the problem could be solved, I guess.
avatar
ankillien
Energetic

Posts : 5198
Reputation : 129
Language : English, XHTML, CSS, JS, PHP, SQL

http://www.webartzforum.com/

Back to top Go down

In progress Re: Layout tables make divs values

Post by kirk on Fri Feb 24, 2012 12:28 am

well i dint really do much accept put what you fixed in a couple tables and added his css in style tags, he dont have to leave the css in the tags like i have it if it's working in his forums sheet, But thats up to him. but i would have it one place or the other and not both?

what was messing me up was i dint notice the margin-left20px in there at first on the second image, so that was messing me up until i seen it in there... lol

Thanx bro thumright
avatar
kirk
Forumaster

Male Posts : 11037
Reputation : 652
Language : English,Vulcan,Klingon, Romulan,& Gorn

Back to top Go down

In progress Re: Layout tables make divs values

Post by Marvin on Fri Feb 24, 2012 11:04 am

tank you. Kirk, the Code from your HTML Site downst work.

But when I had the Code in a Table, it works? In One line.
avatar
Marvin
Forumember

Male Posts : 317
Reputation : 4
Language : German, basic English, Spanish, basic Bavarian, broken Italian

http://www.schiggysboard.com/

Back to top Go down

In progress Re: Layout tables make divs values

Post by kirk on Fri Feb 24, 2012 3:15 pm

not sure what you mean?

look over here. i test ed with phpbb3 as well and works fine.

http://forbiddentempleofart.forum-phpbb.co.uk/

remember i have the css in style tags withing this code table,
So i am not sure if having css in your css sheet too will affect it or not?
But i do not see this working all in one line the way you had it unless you cut back some of the text?

Code:
 <br> <html> <head> <style type="text/css"> .sprites{float: left !important;background-position-y: 50% !important; height: 60px !important; background-color:transparent; background-image:url(http://h12.abload.de/img/cssspritediugy.png);background-repeat:no-repeat;} ##bild_png{background-position:0 0;height:31px;width:33px;} #buch_png{background-position:-33px 0;height:29px;width:28px;} #chat_png{background-position:-64px 0;height:31px;width:32px;} #club_png{background-position:-96px 0;height:31px;width:32px;} #daumen_png{background-position:-130px 0;height:32px;width:26px;} #frage_png{background-position:-159px 0;height:32px;width:34px;} #welt_png{background-position:-192px 0;height:33px;width:32px;} #wifi_png{background-position:-228px -4px;height:25px;width:25px;} #kinofilm_gif{background-position:-254px 0;height:30px;width:34px;} #maler_png{background-position:-288px 0;height:33px;width:31px;} #news_png{background-position:-320px 0;height:45px;width:47px;} #tausch_png{background-position:-368px -3px;height:19px;width:22px;} #team_png{background-position:-389px 0;height:32px;width:34px;} #tv_png{background-position:-423px -5px;height:24px;width:30px;} #schach_png{background-position:-453px 0;height:31px;width:31px;} #present_png{background-position:-484px -2px;height:30px;width:28px;} ul.navlinks span.new-message { color : red; } </style> </head> <body> <table style="text-align: left; width: 417px; height: 60px;" border="0" cellpadding="0" cellspacing="0">  <tr> <td style="vertical-align: top;"><div style="overflow:hidden;"> <div style="float:left;width:50px;" class="sprites" id="wifi_png"> </div><div style="float:left;width:350px;"> <a title="Pokemon Wi-Fi Kämpe" href="LINK" class="forumtitle">Kampfarena</a><br /><span>Hier findet ihr Infos und Neuigkeiten zum Forum</span> </div><br> </td> </tr> <tr> <td style="vertical-align: top;"><div style="float:left;width:50px;" class="sprites" id="tausch_png"> </div><div style="float:left;width:350px;"> <a href="LINK" class="forumtitle">Tauschbasar</a><br /><span>Hier könnt ihr mit anderen Pokemon und Items tauschen.</span> </div> </div><br> </td> </tr>  </table> <br> </body> </html>
avatar
kirk
Forumaster

Male Posts : 11037
Reputation : 652
Language : English,Vulcan,Klingon, Romulan,& Gorn

Back to top Go down

In progress Re: Layout tables make divs values

Post by Marvin on Sat Feb 25, 2012 5:02 am

But, look: http://test55.forumieren.com/forum
I have made a new Forums with the CSS Pictures an a table.. there it work in one line.. why not with css?
avatar
Marvin
Forumember

Male Posts : 317
Reputation : 4
Language : German, basic English, Spanish, basic Bavarian, broken Italian

http://www.schiggysboard.com/

Back to top Go down

In progress Re: Layout tables make divs values

Post by Marvin on Thu Mar 01, 2012 9:14 am

push..
avatar
Marvin
Forumember

Male Posts : 317
Reputation : 4
Language : German, basic English, Spanish, basic Bavarian, broken Italian

http://www.schiggysboard.com/

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