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.

Layout tables make divs values

3 posters

Go down

In progress Layout tables make divs values

Post by Marvin February 16th 2012, 6: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.
Marvin
Marvin
Forumember

Male Posts : 320
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 February 17th 2012, 9:49 pm

push, please help me Hello
Marvin
Marvin
Forumember

Male Posts : 320
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 February 19th 2012, 11: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>
ankillien
ankillien
Energetic

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

Back to top Go down

In progress Re: Layout tables make divs values

Post by Marvin February 19th 2012, 8: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.
Marvin
Marvin
Forumember

Male Posts : 320
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 February 20th 2012, 3:41 am

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?
ankillien
ankillien
Energetic

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

Back to top Go down

In progress Re: Layout tables make divs values

Post by Marvin February 20th 2012, 5:17 pm

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

Male Posts : 320
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 February 20th 2012, 6:45 pm

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

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

Back to top Go down

In progress Re: Layout tables make divs values

Post by Marvin February 20th 2012, 6: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.
Marvin
Marvin
Forumember

Male Posts : 320
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 February 21st 2012, 4:47 am

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>
ankillien
ankillien
Energetic

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

Back to top Go down

In progress Re: Layout tables make divs values

Post by Marvin February 21st 2012, 4:59 pm

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

Male Posts : 320
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 February 21st 2012, 5:06 pm

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>
ankillien
ankillien
Energetic

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

Back to top Go down

In progress Re: Layout tables make divs values

Post by Marvin February 21st 2012, 5:43 pm

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.
Marvin
Marvin
Forumember

Male Posts : 320
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 February 23rd 2012, 2:48 pm

push
Marvin
Marvin
Forumember

Male Posts : 320
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 February 23rd 2012, 5:20 pm

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

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

Back to top Go down

In progress Re: Layout tables make divs values

Post by Marvin February 23rd 2012, 5:32 pm

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

Male Posts : 320
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 February 23rd 2012, 5:39 pm

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

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

Back to top Go down

In progress Re: Layout tables make divs values

Post by Marvin February 23rd 2012, 6:20 pm

Marvin
Marvin
Forumember

Male Posts : 320
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 February 24th 2012, 1:42 am

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.

kirk
kirk
Forumaster

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

Back to top Go down

In progress Re: Layout tables make divs values

Post by ankillien February 24th 2012, 3:10 am

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.
ankillien
ankillien
Energetic

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

Back to top Go down

In progress Re: Layout tables make divs values

Post by kirk February 24th 2012, 6: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
kirk
kirk
Forumaster

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

Back to top Go down

In progress Re: Layout tables make divs values

Post by Marvin February 24th 2012, 5:04 pm

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.
Marvin
Marvin
Forumember

Male Posts : 320
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 February 24th 2012, 9: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>
kirk
kirk
Forumaster

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

Back to top Go down

In progress Re: Layout tables make divs values

Post by Marvin February 25th 2012, 11: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?
Marvin
Marvin
Forumember

Male Posts : 320
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 March 1st 2012, 3:14 pm

push..
Marvin
Marvin
Forumember

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

http://www.schiggysboard.com/

Back to top Go down

Back to top


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