Layout tables make divs values
3 posters
Page 1 of 1
Layout tables make divs values
Hello
Someone can give me these convert layout table to div view?
All tables should be changed to div values.
Table:
Please ensure that the images are already in div values are specified. (.sprites.. and # wifi_png)
Thanks.
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.
Re: Layout tables make divs values
Hi,
This code would produce similar result...
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- Energetic
- Posts : 5198
Reputation : 129
Language : English, XHTML, CSS, JS, PHP, SQL
Re: Layout tables make divs values
Thanks, but the Picture (<div class="sprites" id="wifi_png"> </div>) is than not available.
And its only one talbe, the second is missing.
And its only one talbe, the second is missing.
Re: Layout tables make divs values
You can add the calsses and IDs yourself as you want
There are total 4 table cells in your code and I converted it into 4 divs. Which second is missing?
There are total 4 table cells in your code and I converted it into 4 divs. Which second is missing?
ankillien- Energetic
- Posts : 5198
Reputation : 129
Language : English, XHTML, CSS, JS, PHP, SQL
Re: Layout tables make divs values
That is not so hard, mate.
Just add class="sprites" id="wifi_png" to whatever DIV you want.
Just add class="sprites" id="wifi_png" to whatever DIV you want.
ankillien- Energetic
- Posts : 5198
Reputation : 129
Language : English, XHTML, CSS, JS, PHP, SQL
Re: Layout tables make divs values
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.
but I dont get it in the Div Table. Please make it for me.
Re: Layout tables make divs values
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- Energetic
- Posts : 5198
Reputation : 129
Language : English, XHTML, CSS, JS, PHP, SQL
Re: Layout tables make divs values
Hi thank you
Yes, but the Text is not in one line? Can you make it exactly how an table?
Yes, but the Text is not in one line? Can you make it exactly how an table?
Re: Layout tables make divs values
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- Energetic
- Posts : 5198
Reputation : 129
Language : English, XHTML, CSS, JS, PHP, SQL
Re: Layout tables make divs values
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;
}
Re: Layout tables make divs values
Where have you added the CSS, it should be working.
ankillien- Energetic
- Posts : 5198
Reputation : 129
Language : English, XHTML, CSS, JS, PHP, SQL
Re: Layout tables make divs values
Can you provide URL of the page where you have added these codes?
ankillien- Energetic
- Posts : 5198
Reputation : 129
Language : English, XHTML, CSS, JS, PHP, SQL
Re: Layout tables make divs values
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.
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- Forumaster
- Posts : 11037
Reputation : 653
Language : English,Vulcan,Klingon, Romulan,& Gorn
Re: Layout tables make divs values
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.
If the icons in this image (http://h12.abload.de/img/cssspritediugy.png) are aligned vertically, the problem could be solved, I guess.
ankillien- Energetic
- Posts : 5198
Reputation : 129
Language : English, XHTML, CSS, JS, PHP, SQL
Re: Layout tables make divs values
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
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
kirk- Forumaster
- Posts : 11037
Reputation : 653
Language : English,Vulcan,Klingon, Romulan,& Gorn
Re: Layout tables make divs values
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.
But when I had the Code in a Table, it works? In One line.
Re: Layout tables make divs values
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?
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- Forumaster
- Posts : 11037
Reputation : 653
Language : English,Vulcan,Klingon, Romulan,& Gorn
Re: Layout tables make divs values
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?
I have made a new Forums with the CSS Pictures an a table.. there it work in one line.. why not with css?
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum