Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów › Technologie internetowe - tworzenie stron WWW › Początkujący webmaster v
[html] [css] zmiana strony z tabelek na divy

Ocena wątku:
  • 0 głosów - średnia: 0
  • 1
  • 2
  • 3
  • 4
  • 5
Tryb drzewa
[html] [css] zmiana strony z tabelek na divy
@astronom Offline
Junior Member
**
Liczba postów: 3
Liczba wątków: 1
Dołączył: 15-03-2011
Reputacja: 0
#1
15-03-2011, 03:16
mój problem jest następujący. pisze aplikacje w C# która ma za zadanie generować plik html. mam wzór jak to ma wyglądać z grafikami tez nie jest kłopot. problem się pojawia w optymalizacji generowanego pliku. chce aby mniej bitów przechodziło przez generacje a znaczniejsza część strony była juz gotowa w pliku *css. jak można tego dokonać aby strona niczym się nie różniła od pierwowzoru. (2) może chodziarz można tą htmlk'e wyszczuplić?

aktualnie mam:
Kod:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>OSADA - Zaplecze wojenne (779|21) - Plemiona - Świat 24</title>
<link rel="stylesheet" type="text/css" href="date/index.css" media="all">
</head>
<body>
<!---!górny pasek!>-->    
    <div class="top_bar">
    
    </div>
    <hr class="oldStyleOnly">
    <table class="main" align="left">
        <br><br><br>
        <tr>
            <td id="content_value">
                <h2>Raport</h2>


<table width="100%">
<tr>
<td valign="top">

</td><td valign="top" width="100%">
    <table class="vis" width="450">
    <tr>
        <td class="nopad">
            
            <table class="vis">
                <tr>
                    <th width="140">Temat</th>
                    <th width="400">
                    <img src="date/blue.png" title="" alt="" class="">
                    <span id="label">
                            <span id="labelText">Gradius Mocny (OSADA - Zaplecze wojenne) atakuje ~~Misiek 1~~ (782|24) K7</span>
                    </span>
                        <span id="edit" style="display: none;">
                        </span>
                    </th>
                </tr>
                <tr>
                    <td>Data Ataku</td>
                    <td>05.03.11 14:54:15</td>
                </tr>
                    <tr>
                <td colspan="2" style="border: 1px solid black; padding: 4px;" height="160" valign="top">
                    <h3>Obrońca zwyciężył</h3>
                    <div class="report_image image_scouting_own">                
                <div class="report_transparent_overlay">
                <h4>Szczęście</h4>
                <table id="attack_luck">
                    <tr>
                        <td class="nobg" style="padding: 0pt;"><b>-16.5%</b></td>
                        <td class="nobg"><img src="date/rabe.png" alt="Pech"></td>

    <td class="nobg">
        <table class="luck" cellpadding="0" cellspacing="0">
            <tr>
                <td class="luck-item nobg" height="12" width="17.02200287"></td>
                <td class="luck-item nobg" style="background-image: url(&quot;balken_pech.png&quot;); border-right: 1px solid rgb(0, 0, 0);" width="32.97799713"></td>
                <td class="luck-item nobg" style="background-image: url(&quot;balken_glueck.png&quot;);" width="0"></td>
                <td class="luck-item nobg" width="50"></td>
            </tr>
        </table>
    </td>

    <td class="nobg"><img src="date/klee_grau.png" alt="Szczęście"></td>

                    </tr>
                </table>

                <h4>Morale: 100%</h4>

    </div>
    </div>

<table id="attack_info_att" style="border: 1px solid rgb(222, 211, 185);" width="100%">
<tr><th style="width: 20%;">Agresor:</th><th><a href="#" title="Piraci">Gradius Mocny</a></th></tr>
<tr><td>Pochodzenie:</td><td><a href="#">OSADA - Zaplecze wojenne (779|21) K7</a></td></tr><tr><td colspan="2" style="padding: 0px;">
    <table id="attack_info_att_units" class="vis" style="border-collapse: collapse;">
        <tr class="center">
            <td></td>
            <td width="35"><img src="date/unit_spear.png" title="Pikinier"></td>
            <td width="35"><img src="date/unit_sword.png" title="Miecznik"></td>
            <td width="35"><img src="date/unit_axe.png" title="Topornik"></td>
            <td width="35"><img src="date/unit_spy.png" title="Zwiadowca"></td>
            <td width="35"><img src="date/unit_light.png" title="Lekki kawalerzysta"></td>
            <td width="35"><img src="date/unit_heavy.png" title="Ciężki kawalerzysta"></td>
            <td width="35"><img src="date/unit_ram.png" title="Taran"></td>
            <td width="35"><img src="date/unit_catapult.png" title="Katapulta"></td>
            <td width="35"><img src="date/unit_snob.png" title="Szlachcic"></td>
        </tr>
        <tr>
            <td width="20%">Ilość:</td>
                        <td style="text-align: center;" class="hidden">0</td><td style="text-align: center;" class="hidden">0</td><td style="text-align: center;" class="hidden">0</td><td style="text-align: center;">30</td><td style="text-align: center;" class="hidden">0</td><td style="text-align: center;" class="hidden">0</td><td style="text-align: center;" class="hidden">0</td><td style="text-align: center;" class="hidden">0</td><td style="text-align: center;" class="hidden">0</td>
                    </tr>
        <tr>
            <td align="left" width="20%">Straty:</td>
                        <td style="text-align: center;" class="hidden">0</td>
                        <td style="text-align: center;" class="hidden">0</td>
                        <td style="text-align: center;" class="hidden">0</td>
                        <td style="text-align: center;" class="hidden">0</td>
                        <td style="text-align: center;" class="hidden">0</td>
                        <td style="text-align: center;" class="hidden">0</td>
                        <td style="text-align: center;" class="hidden">0</td>
                        <td style="text-align: center;" class="hidden">0</td>
                        <td style="text-align: center;" class="hidden">0</td>
        </tr>
    </table>
</td></tr>

</table>
<table id="attack_info_def" style="border: 1px solid rgb(222, 211, 185);" width="100%">
<tr><th style="width: 20%;">Obrońca:</th><th><a href="#">Misiek3261</a></th></tr>
<tr><td>cel:</td><td><a href="#">~~Misiek 1~~ (782|24) K7</a></td></tr><tr><td colspan="2" style="padding: 0px;">
    <table id="attack_info_def_units" class="vis" style="border-collapse: collapse;">
        <tr class="center">
            <td></td>
            <td width="35"><img src="date/unit_spear.png" title="Pikinier"></td>
            <td width="35"><img src="date/unit_sword.png" title="Miecznik"></td>
            <td width="35"><img src="date/unit_axe.png" title="Topornik"></td>
            <td width="35"><img src="date/unit_spy.png" title="Zwiadowca"></td>
            <td width="35"><img src="date/unit_light.png" title="Lekki kawalerzysta"></td>
            <td width="35"><img src="date/unit_heavy.png" title="Ciężki kawalerzysta"></td>
            <td width="35"><img src="date/unit_ram.png" title="Taran"></td>
            <td width="35"><img src="date/unit_catapult.png" title="Katapulta"></td>
            <td width="35"><img src="date/unit_snob.png" title="Szlachcic"></td>
        </tr>
        <tr>
            <td width="20%">Ilość:</td>
                <td style="text-align: center;">1176</td>
                <td style="text-align: center;">310</td>
                <td style="text-align: center;" class="hidden">0</td>
                <td style="text-align: center;" class="hidden">0</td>
                <td style="text-align: center;" class="hidden">0</td>
                <td style="text-align: center;" class="hidden">0</td>
                <td style="text-align: center;" class="hidden">0</td>
                <td style="text-align: center;" class="hidden">0</td>
                <td style="text-align: center;" class="hidden">0</td>
        </tr>
        <tr>
            <td align="left" width="20%">Straty:</td>
                        <td style="text-align: center;" class="hidden">0</td>
                        <td style="text-align: center;" class="hidden">0</td>
                        <td style="text-align: center;" class="hidden">0</td>
                        <td style="text-align: center;" class="hidden">0</td>
                        <td style="text-align: center;" class="hidden">0</td>
                        <td style="text-align: center;" class="hidden">0</td>
                        <td style="text-align: center;" class="hidden">0</td>
                        <td style="text-align: center;" class="hidden">0</td>
                        <td style="text-align: center;" class="hidden">0</td>
        </tr>
    </table>
</td></tr>

</table>


<h4>Szpiegostwo</h4>
<table id="attack_spy" style="border: 1px solid rgb(222, 211, 185);">


<tr><th>Wyszpiegowane surowce:</th>
<td>
<img src="date/holz.png" title="Drewno">40<span class="grey">.</span>701
<img src="date/lehm.png" title="Glina">40<span class="grey">.</span>701
<img src="date/eisen.png" title="Żelazo">40<span class="grey">.</span>701
</td>
</tr>
                <tr><th>Budynki:</th><td>
                Ratusz <b>(Stopień 10)</b><br>
                Koszary <b>(Stopień 4)</b><br>
                Kuźnia <b>(Stopień 7)</b><br>
                Plac <b>(Stopień 1)</b><br>
                Rynek <b>(Stopień 10)</b><br>
                Tartak <b>(Stopień 20)</b><br>
                Cegielnia <b>(Stopień 19)</b><br>
                Huta żelaza <b>(Stopień 17)</b><br>
                Zagroda <b>(Stopień 15)</b><br>
                Spichlerz <b>(Stopień 19)</b><br>
                Schowek <b>(Stopień 8)</b><br>
                Mur obronny <b>(Stopień 11)</b><br>
                </td></tr>
                    <tr><th colspan="2">Jednostki poza wioską:</th></tr>
                    <td colspan="2">
                        <table class="vis">
                            <tr>
                            <th><img src="date/unit_spear.png" title="Pikinier"></th>
                            <th><img src="date/unit_sword.png" title="Miecznik"></th>
                            <th><img src="date/unit_axe.png" title="Topornik"></th>
                            <th><img src="date/unit_spy.png" title="Zwiadowca"></th>
                            <th><img src="date/unit_light.png" title="Lekki kawalerzysta"></th>
                            <th><img src="date/unit_heavy.png" title="Ciężki kawalerzysta"></th>
                            <th><img src="date/unit_ram.png" title="Taran"></th>
                            <th><img src="date/unit_catapult.png" title="Katapulta"></th>
                            <th><img src="date/unit_snob.png" title="Szlachcic"></th>
                            </tr>
                        <tr>
                            <td class="hidden">0</td><!--hidden wtedy kiedy 0 style ukryte jesnostki-->
                            <td class="hidden">0</td>
                            <td class="hidden">0</td>
                            <td class="hidden">0</td>
                            <td class="hidden">0</td>
                            <td class="hidden">0</td>
                            <td class="hidden">0</td>
                            <td class="hidden">0</td>
                            <td class="hidden">0</td>
                        </tr>                        
                        </table>
                    </td></tr>                    
                    </table>
                </td></tr>            
            </table>
        </td></tr>        
        </table>
    </td></tr>        
    </table>
</td></tr>
</table>
        
</body>
</html>

index.css

Kod:
/* ::::: http://pl24.plemiona.pl/merged/game.css?1299228894 ::::: */

a { font-weight: 700; text-decoration: none; color: rgb(96, 48, 0); }
td { padding: 0pt; margin: 0pt; }
a:hover { color: rgb(224, 31, 15); }
.selected a { color: rgb(128, 48, 0); }
.selected a:hover { color: rgb(224, 31, 15); }
span.wood { background-image: url('holz_001.png'); }
span.stone { background-image: url('lehm_001.png'); }
span.iron { background-image: url('eisen_001.png'); }
.hidden { color: rgb(177, 150, 97); }
.oldStyleOnly { display: none; }
#inner-border > .main { border: medium none; width: 100%; border-spacing: 0pt; }
p:first-child, h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h1 + p, h2 + p, h3 + p, h4 + p, h5 + p { margin-top: 0pt; }
.nowrap { white-space: nowrap; }
.vis { border-collapse: separate; }
.vis td { background: none repeat scroll 0% 0% rgb(244, 228, 188); }
.vis .selected { background: none repeat scroll 0% 0% rgb(255, 224, 162); }
th { font-size: 9pt; text-align: left; font-weight: 700; background-color: rgb(193, 162, 100) ! important; background-image: url('tableheader_bg3.png'); background-repeat: repeat-x; }
#main_layout { margin: 0pt auto; padding: 0pt; background: none repeat scroll 0% 0% transparent; z-index: 3; border-spacing: 0pt; cursor: default; }
#main_layout .modemenu a { display: block; white-space: normal; }
#main_layout .shadedBG { background: url('bg-shaded.png') repeat-x scroll left top rgb(242, 228, 193); }
#main_layout .topbar { height: 48px; background: none repeat scroll 0% 0% transparent; z-index: 123456; text-align: center; }
#main_layout .topbar.fixed { position: absolute; }
#main_layout .left { width: 25px; background: none repeat scroll 0% 0% transparent; }
#main_layout .right { width: 25px; background: none repeat scroll 0% 0% transparent; }
#main_layout .bg_left { width: 25px; overflow: hidden; vertical-align: top; background: url('mainborder-left.png') repeat-y scroll left top transparent; }
#main_layout .bg_right { width: 25px; overflow: hidden; vertical-align: top; background: url('mainborder-right.png') repeat-y scroll right top transparent; }
#main_layout .bg_left .bg_left { width: 25px; height: 200px; background: url('mainborder-left-top.png') no-repeat scroll left top transparent; }
#main_layout .bg_right .bg_right { width: 25px; height: 200px; background: url('mainborder-right-top.png') no-repeat scroll right top transparent; }
#main_layout .bg_leftborder { background: url('mainborder-left.png') repeat-y scroll left top rgb(242, 228, 193); }
#main_layout .bg_rightborder { background: url('mainborder-right.png') repeat-y scroll right top rgb(242, 228, 193); }
#main_layout .bg_bottomleft { width: 25px; background: url('mainborder-corner-left.png') no-repeat scroll left top transparent; }
#main_layout .bg_bottomright { width: 25px; background: url('mainborder-corner-right.png') no-repeat scroll right top transparent; }
#main_layout .bg_bottomcenter { height: 25px; background: url('mainborder-bottom.png') repeat-x scroll right top transparent; }
.maincell { padding: 0pt 0pt 5px; vertical-align: top; }
.maincell table { border-spacing: 0pt; border-collapse: collapse; }
#SkyScraperAd { position: fixed; top: 60px; margin-left: 30px; height: 600px; z-index: 2; overflow: hidden; }
.menu { border: medium none; background: none no-repeat scroll left top transparent; }
#menu_row > .menu-item { padding: 0pt; margin: 0pt; height: 43px; white-space: nowrap; background: url('topbutton-right.png') no-repeat scroll right top transparent; border-collapse: collapse; color: rgb(255, 255, 255); font-size: 10px; font-weight: 700; vertical-align: top; text-align: left; }
#menu_row > .menu-item:hover { background: url('topbutton-right.png') no-repeat scroll right bottom transparent; }
#menu_row .lpad, #menu_row > .lpad:hover { width: 1px; min-width: 1px; background: none repeat scroll 0% 0% transparent ! important; }
#menu_row > .rpad, #menu_row > .rpad:hover { width: 3px; min-width: 3px; background: none repeat scroll 0% 0% transparent ! important; }
#topTable { margin: 2px auto; border-spacing: 0pt; text-align: center; }
#a#b, #topTable { margin: 0px auto; }
.fixed #topTable { margin: 0px auto; }
#topTable table { margin: 0pt auto; min-width: 900px; }
#topContainer { position: fixed; top: 2px; left: 0pt; width: 100%; margin-top: 0pt; text-align: center; }
.topbar .menu tr #topdisplay { background: url('topdisplay-left.png') no-repeat scroll left -4px transparent; padding: 0pt 0pt 0pt 5px; height: 43px; line-height: 18px; z-index: 1; width: auto; margin: 0pt 6px 0pt 2px; }
#topdisplay:hover { background: url('topdisplay-left.png') no-repeat scroll left -4px transparent; }
#topdisplay .bg { position: static; height: 43px; padding: 0pt 11px 0pt 5px; background: url('topdisplay-right.png') no-repeat scroll right -4px transparent; margin: 0pt; width: auto; }
#topdisplay .bg .rank { color: rgb(255, 255, 255); text-align: center; background: none repeat scroll 0% 0% transparent; }
#topdisplay a { padding: 5px 0pt 0pt; height: 16px; }
#topdisplay .bg a:hover { color: rgb(240, 212, 154); }
.topbar .menu a { color: rgb(255, 255, 255); font-size: 10px; font-weight: 700; padding: 15px 15px 0pt 13px; display: block; height: 28px; text-align: center; background: none repeat scroll 0% 0% transparent; }
#menu_row > td > a { background: url('topbutton-left.png') no-repeat scroll left top transparent; position: relative; left: -2px; padding: 15px 15px 0pt; font-size: 10px; }
#menu_row > td:hover > a { background: url('topbutton-left.png') no-repeat scroll left bottom transparent; }
#topdisplay .bg a { width: auto; font-size: 10px; }
.icon-box { background: url('statusbar-separator1.png') no-repeat scroll left top transparent; padding-left: 3px; }
.icon-box:first-child { background: url('statusbar-left.png') no-repeat scroll left top transparent; }
#header_info { background-color: transparent; background-repeat: repeat; background-attachment: scroll; background-position: 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-size: auto auto; background-image: none ! important; margin: 0pt auto 2px; padding: 0pt; }
#header_info table { border: medium none; height: 26px; }
.header-border { background: url('statusbar-center.png') repeat-x scroll left top transparent; height: 26px; padding: 0pt; width: 1px; }
.header-border .box { background: url('statusbar-right.png') no-repeat scroll right top transparent; }
.header-border .box .box-item.firstcell { padding: 0pt 3px; }
.header-border .firstcell { background: url('statusbar-left.png') no-repeat scroll left top transparent; }
.header-border .box-item { padding: 0pt 3px; }
.header-border .smallPadding .box-item, .header-border .no-gap .box-item { padding: 0pt 3px 0pt 0pt; }
.header-border .smallPadding .icon-box, .header-border .smallPadding .icon-box.separate { padding: 0pt 1px 0pt 4px; }
.icon-box a, .no-gap .icon-box a { height: 20px; padding: 2px 0pt 0pt; }
#menu_row2 { height: 26px; }
#pop_max_label { padding-right: 5px; }
#storage { padding: 0pt 3px 0pt 1px; }
#header_info span.icon { margin: 0pt 1px 0pt 0pt; }
#header_info table { margin-left: 5px; }
#header_info td:first-child table { margin-left: 0pt; }
td.shadow { text-align: left; }
td.shadow div.leftshadow { height: 8px; width: 15px; background: url('shadow-left.png') no-repeat scroll left top transparent; margin-bottom: -8px; z-index: 0; }
td.shadow div.rightshadow { height: 8px; width: auto; background: url('shadow-right.png') no-repeat scroll right top transparent; margin-left: 15px; z-index: 0; }
#footer { position: fixed; left: 0pt; bottom: 0pt; width: 100%; height: 25px; background: url('footer-bg.png') repeat-x scroll center top transparent; z-index: 9999; cursor: default; }
#footer * { z-index: 3; position: relative; }
#footer_logo { position: absolute; left: 50%; bottom: 0pt; width: 118px; margin-left: -59px; height: 25px; background: url('footer-seal.png') repeat-x scroll left top transparent; z-index: 1; display: none; }
#footer #linkContainer { height: 21px; width: 60%; max-width: 830px; margin: 0pt auto; top: 3px; }
#footer #footer_left { float: left; margin-top: 3px; }
#footer #footer_right { float: right; margin-top: 3px; }
#footer, #footer a { color: rgb(96, 48, 0); }
#footer a { cursor: pointer; }
#footer a:hover { color: rgb(224, 31, 15); }
#content_value table { border-spacing: 2px; border-collapse: separate; empty-cells: show ! important; }
#content_value td, #content_value th { padding: 2px 3px; }
#content_value { padding: 10px; }
.content-border { padding: 0pt; margin: 0pt; direction: ltr; background: url('main_bg.jpg') repeat scroll right top rgb(227, 213, 179); border-collapse: separate ! important; border-spacing: 0pt ! important; border: 1px solid rgb(125, 81, 15); }
#inner-border { padding: 2px 0pt; border: 1px solid rgb(249, 225, 168); }
.main { overflow: hidden; }
.report_image { height: 290px; width: 428px; position: relative; margin-bottom: 8px; padding: 0pt ! important; }
.spoiler .image_scouting_own, .image_scouting_own { background: url('battle_scouting_own.jpg') repeat scroll right center transparent; }
.report_transparent_overlay { width: 100%; padding: 4px 0pt; position: absolute; bottom: 0pt; background: url('transparent_overlay.png') repeat scroll 0% 0% transparent ! important; }
.report_transparent_overlay h4 { padding: 0pt; margin: 2px 4px; }
#attack_luck .nobg { background-color: transparent; }
#attack_luck .luck { border: 1px solid rgb(0, 0, 0); }
#attack_luck .luck .luck-item { padding: 0pt; }
.menu_block_right { margin: 0pt 0pt 0pt auto; border-collapse: collapse; text-align: right; }
.selected { background-color: rgb(250, 220, 155); }
.center { text-align: center; }
.nopad { padding: 0pt ! important; }
.top_background { background-image: url('bg-top.jpg'); background-repeat: repeat-x; height: 27px; width: 100%; position: absolute; top: 0pt; z-index: -1; display: none; }
.top_bar { background-image: url('topbar-main.png'); background-repeat: repeat-x; background-position: center 0pt; height: 57px; width: 100%; position: fixed; top: 0pt; left: 0pt; z-index: 9999; }
.top_bar .bg_left { background-image: url('topbar-left.png'); background-repeat: no-repeat; height: 57px; width: 70px; position: absolute; top: 0pt; left: 0pt; z-index: -1; }
.top_bar .bg_right { background-image: url('topbar-right.png'); background-repeat: no-repeat; height: 57px; width: 70px; position: absolute; top: 0pt; right: 0pt; z-index: -1; }
.top_shadow { background: url('topbar-shadow.png') repeat-x scroll left top transparent; position: fixed; margin: 0pt; padding: 0pt; top: 50px; left: 0pt; width: 100%; height: 6px; z-index: 9999; }
body { background: url('bg-tile.jpg') repeat scroll 0pt 0pt rgb(210, 192, 158); font-size: 9pt; font-family: Verdana,Arial; width: 100%; margin: 0pt; padding: 0pt 0pt 35px; }
h2 { font-size: 14pt; }
h3 { font-size: 12pt; font-weight: 700; }
h4 { font-size: 10pt; font-weight: 700; font-style: italic; margin-bottom: 4pt; }
img { border: medium none; }
.grey { color: gray; }
.nowrap { white-space: nowrap; }
hr { border-color: rgb(200, 157, 88) transparent rgb(133, 85, 13); border-width: 1px 0pt; border-style: solid; height: 0pt; }
.box { background-color: rgb(247, 238, 211); background-repeat: repeat-x; border-width: 1px; border-style: solid; border-color: rgb(153, 119, 51) rgb(255, 221, 153) rgb(255, 238, 204) rgb(187, 153, 85); }
input, select { font-size: 8pt; }
.right { right: 5px; position: absolute; }
.server_info { font-size: 7pt; margin-top: 0pt; margin-bottom: 0pt; text-align: right; color: rgb(81, 77, 65); padding: 0pt 2px; background: url('contentbg.png') repeat scroll left top transparent; }
.icon { width: 18px; height: 18px; display: inline-block; margin: auto 2px auto 0pt; overflow: hidden; background-repeat: no-repeat; vertical-align: -4px; }
body:empty .icon { display: block; }
td .icon-box { width: 20px; height: 20px; text-align: center; vertical-align: middle; overflow: hidden; }
.icon.header { background-image: url('header.png'); }
.header.wood { background-position: -17px 0px; }
.header.stone { background-position: -36px 0px; }
.header.iron { background-position: -55px 0px; }
.header.ressources { background-position: 0px 0px; }
.header.population { background-position: -72px 0px; }
czekam na sugestie Big Grin
Szukaj
Odpowiedz
R_Rafalsky Offline
WebMaster
****
Liczba postów: 340
Liczba wątków: 38
Dołączył: 28-04-2010
Reputacja: 15
#2
15-03-2011, 14:44
Można chociaż tę htmlkę wyszczuplić. Wystarczy skorzystać z HTML zamiast XHTML. Nie wiem dlaczego ostatnio wszyscy rzucili się na XHTML.

Co Ci to da?
Zamiast: <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Wystarczy: <!DOCTYPE HTML>
Itd.

Kolejna sprawa: Nie rób strony w tabelkach. Wykorzystuj DIVy i pozycjonuj je w CSS.

Co Ci to da?
Zamiast <table> <td> <tr> itd itp. masz <div id="cos"> lub <div class="cos"> i reszta w CSS zrobiona.

Do tego mieszasz style zewnętrzne z tymi na stronie (przykładowo: <span id="edit" style="display: none;">). Wywal wszystkie style z HTMLa i wrzuć na zewnętrzny CSS.
Jak pomogłem daj '+'. To nie boli, a ja mam satysfakcję Smile

Any sufficiently advanced technology is indistinguishable from magic.
Strona WWW Szukaj
Odpowiedz
Kartofelek Offline
Super Hero
******
Liczba postów: 2,411
Liczba wątków: 14
Dołączył: 10-08-2009
Reputacja: 132
#3
15-03-2011, 15:09
Tak na oko to ten twój kod można wyszczuplić orientacyjnie o 70%
Strona WWW Szukaj
Odpowiedz
@astronom Offline
Junior Member
**
Liczba postów: 3
Liczba wątków: 1
Dołączył: 15-03-2011
Reputacja: 0
#4
15-03-2011, 16:08 (Ten post był ostatnio modyfikowany: 16-03-2011, 14:30 przez @astronom.)
no to biorę się do roboty. jak bym miał kłopot z pozycjonowaniem jeszcze napiszę.

dzięki za odpowiedź Smile
Szukaj
Odpowiedz
@astronom Offline
Junior Member
**
Liczba postów: 3
Liczba wątków: 1
Dołączył: 15-03-2011
Reputacja: 0
#5
16-03-2011, 14:30
jak zrobić aby strona się nie rozjezdzala jak zmienie tabele na divy?
Szukaj
Odpowiedz
Pedro84 Offline
Przyjaciel Forum
****
Liczba postów: 2,587
Liczba wątków: 2
Dołączył: 03-04-2010
Reputacja: 58
#6
16-03-2011, 15:54
(16-03-2011, 14:30)@astronom napisał(a): jak zrobić aby strona się nie rozjezdzala jak zmienie tabele na divy?
Poprawnie divy ostylować... A mówią, że głupich pytań nie ma.
Szukaj
Odpowiedz


Podobne wątki…
Wątek: Autor Odpowiedzi: Wyświetleń: Ostatni post
  Jak zrobć POP-UP w html/php i proste pytanko html? MrOMGWTF 7 5,567 01-05-2021, 10:56
Ostatni post: wozniak
  Strona HTML na zaliczenie - dodaj, usuń, edytuj Kurana 1 2,091 01-07-2019, 03:31
Ostatni post: mpire
  [HTML] Filmik zamiast obrazka wyróżniającego kuklaale 1 2,759 02-11-2016, 18:36
Ostatni post: martt4dg
  Problem zm osadzeniem skryptu lighbox w kodzie html gajowy873 2 3,712 24-09-2016, 02:22
Ostatni post: Anatol64
  [CSS][HTML] Ustawienie obrazka z boku strony Witek7777 8 8,476 22-09-2016, 01:05
Ostatni post: pocahontas

Skocz do:


Użytkownicy przeglądający ten wątek: 1 gości
Sponsorzy i przyjaciele
SeoHost.pl