Odczepianie się stopki

pytanie zadane 15 września 2015 w HTML i CSS przez Arkam Nowicjusz (170 p.)

Witam, mam problem z layoutem strony www, ponieważ po zakodowaniu go pod mój portal część podstron działa prawidłowo a część ma rozjechaną stopke.

Tak wygląda prawidłowo załadowana stopka:

a tak wygląda błędnie załadowana:

Jak widać na załączonych obrazkach stopka odkleja się od dołu strony + jej bordery wyjeżdżają poza swoje granice. Szczerze próbowałem już wielu rzeczy, ale najdziwniejsze jest to, że gdy przykładowo kod podstrony jest taki:

$main_content .= 'przykladowa tresc strony';

stopka się psuje, jednak gdy jest np. taki:

$main_content .= '
	<table class="table table-bordered">	
		<tr>
		<td colspan="2"><center><b>Commands Help</b></center></td>
		</tr>
		
		<tr>
		<td style="width:50%"><center>Command</center></td>
		<td style="width:50%"><center>Action</center></td>
		</tr>
		
		<tr>
		<td height="60" style="width:50%"><center><b>!tag</b></center></td>
		<td height="60" style="width:50%"><center>Only guild leader can use this command, for example if you want to use it: "!tag abc", if you do this, all players from you guild will have tag in brackets after the nick.<br><br> <img border="1" src="images/tag.png"></center></td>
		</tr>
		
		<tr>
		<td height="60" style="width:50%"><center><b>!spells</b></center></td>
		<td height="60" style="width:50%"><center>With this command you can check all spells for your vocation. Also remember that you can find a list with all spells on our website! <a href="index.php?subtopic=guides">Click here</a>.<br><br> <img border="1" src="images/spells.png"></center></td>
		</tr>		
		</table>		
';

Wtedy wszystko jest ok, jednak tu jest kolejna dziwna zależność. Gdy powyższy działający kod lekko edytuje usuwając częśc tekstu z tabelki w taki sposób:

$main_content .= '
	<table class="table table-bordered">	
		<tr>
		<td colspan="2"><center><b>Commands Help</b></center></td>
		</tr>
		
		<tr>
		<td style="width:50%"><center>Command</center></td>
		<td style="width:50%"><center>Action</center></td>
		</tr>
		
		<tr>
		<td height="60" style="width:50%"><center><b>!tag</b></center></td>
		<td height="60" style="width:50%"><center>Tutaj edytowalem tresc<br><br> <img border="1" src="images/tag.png"></center></td>
		</tr>
		
		<tr>
		<td height="60" style="width:50%"><center><b>!spells</b></center></td>
		<td height="60" style="width:50%"><center>With this command you can check all spells for your vocation. Also remember that you can find a list with all spells on our website! <a href="index.php?subtopic=guides">Click here</a>.<br><br> <img border="1" src="images/spells.png"></center></td>
		</tr>		
		</table>		
';

Problem znów się powtarza tj. stopka się psuje. Proszę przynajmniej o nakierowanie gdzie powinienem szukać źródła problemu.

2 odpowiedzi

odpowiedź 15 września 2015 przez rquadratis Użytkownik (960 p.)
edycja 15 września 2015 przez rquadratis

Ta strona jest zbudowana na tabelkach? Czy to jakiś cms wymusza taką konstrukcję?

komentarz 15 września 2015 przez Arkam Nowicjusz (170 p.)

<!DOCTYPE html>
<html>

<head>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="author" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="UTF-8" />
    <title><?php echo $title; ?></title>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,300,700,800&subset=latin,latin-ext" rel="stylesheet" type="text/css">
    <link href="<?php echo $layout_name; ?>/css/normalize.css" rel="stylesheet" type="text/css">
    <link href="<?php echo $layout_name; ?>/css/style.css" rel="stylesheet" type="text/css">
</head>

<body>
    <div class="wrapper">
        <nav>
            <ul>
                <li class="home"><a href="?subtopic=latestnews"><div class="home_icon"></div></a></li>
                <li><a href="?subtopic=latestnews">HOME</a></li>
                <li><a href="?subtopic=createaccount">REGISTER</a></li>
                <li><a href="?subtopic=download">DOWNLOAD</a></li>
                <li><a href="?subtopic=buypoints">DONATE</a></li>
                <li><a href="#">FORUM</a></li>
                <li><a href="?subtopic=highscores">RANKING</a></li>
                <li><a href="?subtopic=fraggers">TOP FRAGGERS</a></li>
            </ul>
        </nav>

        <div id="stock"></div>

        <div id="slider">
            <div id="slider_arrows">
                <div class="left_arrow"></div>
                <div class="right_arrow"></div>
            </div>
            <div id="slides">
                <div class="slide"><img src="<?php echo $layout_name; ?>/images/logo.png" alt="slide"></div>
                <div class="slide"><img src="<?php echo $layout_name; ?>/images/slide-2.png" alt="slide"></div>
                <div class="slide"><img src="<?php echo $layout_name; ?>/images/slide-3.png" alt="slide"></div>
                <div class="slide"><img src="<?php echo $layout_name; ?>/images/slide-4.png" alt="slide"></div>
            </div>
        </div>

        <div class="clearfix"></div>

        <div id="left_content_stock"></div>
        <div id="right_content_stock"></div>

        <div id="content">
            <div id="left_side">
                <ul>
                    <li><a href="?subtopic=createaccount"><div id="register"></div></a></li>
                    <li><a href="?subtopic=accountmanagement"><div id="login"></div></a></li>
                    <li><a href="?subtopic=buypoints"><div id="donate"></div></a></li>
                    <li><a href="?subtopic=buypoints"><div id="shop"></div></a></li>
                    <li><a href="?subtopic=highscores"><div id="ranking"></div></a></li>
                    <li><a href="#"><div id="server_status_online"></div></a></li>
                    <li>
                        <div id="top_players">
                            <ul>
                                //kod php wyciagajacy top players
                            </ul>
                        </div>
                    </li>
                </ul>
            </div>

            <div id="center_side">
                <div id="slider_pagination">
                    <ul>
                        <li class="active"><div class="point"></div></li>
                        <li><div class="point"></div></li>
                        <li><div class="point"></div></li>
                        <li><div class="point"></div></li>
                    </ul>
                </div>

                <div id="news_box">
                    <div id="news_content">
						<?php echo $main_content; ?>
                    </div>
                </div>
            </div>

            <div id="right_side">
                <ul>
                    <li><a href="?subtopic=download"><div id="download"></div></a></li>
                    <li><a href="?subtopic=guides"><div id="game_guide"></div></a></li>
                    <li><a href="?subtopic=commandshelp"><div id="commands"></div></a></li>
                    <li><a href="?subtopic=serverinfo"><div id="server_info"></div></a></li>
                    <li><a href="?subtopic=characters"><div id="characters"></div></a></li>
                    <li><a href="http://forum.dbns.eu/"><div id="forum"></div></a></li>
                    <li><a href="?subtopic=guilds"><div id="guilds"></div></a></li>
                    <li><a href="?subtopic=leaguehighscores"><div id="dbns_league"></div></a></li>
                </ul>
            </div>
        </div>

        <div class="clearfix"></div>

        <footer>
            <div id="copyright">COPYRIGHT © <b>/b>, ALL RIGHTS RESERVED</div>
            <div id="author">DESIGN: <b>SPRITE</b></div>
        </footer>
    </div>

    <script type="text/javascript" src="<?php echo $layout_name; ?>/js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="<?php echo $layout_name; ?>/js/slick.min.js"></script>
    <script type="text/javascript" src="<?php echo $layout_name; ?>/js/theme.js"></script>
</body>

</html>

Tutaj kod templatki, mogę jeszcze wrzucić css jeźeli jest potrzebny.

komentarz 15 września 2015 przez rquadratis Użytkownik (960 p.)

wrzuć ten css

komentarz 15 września 2015 przez Arkam Nowicjusz (170 p.)

style.css
http://wklej.org/hash/c1449f5c6f4/

normalize.css
http://wklej.org/hash/7d45cafe66e/

Nie mogłem wrzucić bezpośrednio tutaj, ponieważ kod jest za długi.

komentarz 15 września 2015 przez Ehlert Ekspert (212,670 p.)

Strona na tabelach... Wołać archeologów

komentarz 15 września 2015 przez Boshi VIP (100,240 p.)

Przepisz to na dzisiejszy standard, bo naprawisz jedną rzecz wyskoczy 10 kolejnych.

komentarz 15 września 2015 przez Arkam Nowicjusz (170 p.)

Problem w tym, że nie jestem programistą PHP, ze strony korzystam od wielu lat i będę korzystał jeszcze co najwyżej rok czasu, więc nie ma sensu wszystkiego przepisywać, muszę tylko jakoś "załatać" ten błąd ze stopką i strona jakoś wytrzyma te ostatnie tchnienia :)

komentarz 15 września 2015 przez Eryk Andrzejewski Mędrzec (164,260 p.)

Ehlert, komentarz roku xD

komentarz 15 września 2015 przez Ehlert Ekspert (212,670 p.)

Haha dzięki, Eryk

komentarz 15 września 2015 przez Ehlert Ekspert (212,670 p.)

Chcociaż ok. Lepsze tabele niż iframe'y

odpowiedź 15 września 2015 przez rquadratis Użytkownik (960 p.)

Domknij albo wyrzuć <b>/b> w stopce i sprawdź.

komentarz 15 września 2015 przez Arkam Nowicjusz (170 p.)

Nie pomaga, znalazłem jednak poniekąd źródło problemu. Jeżeli zawartość $main_content jest zbyt mała wywala ww. błąd, po dodaniu przykładowo

$main_content .= '<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>';

strona wyświetla się normalnie

komentarz 15 września 2015 przez Boshi VIP (100,240 p.)

To jest leczenie objawów a nie przyczyny problemu. To co pokazałeś to nic innego jak walnięcie x lini w dół, co jest karygodne.

komentarz 15 września 2015 przez Arkam Nowicjusz (170 p.)

Dlatego nie napiasłem, że znalazłem rozwiązanie problemu. Chodziło mi raczej o to, że problem występuje gdy długość linii w zawartości $main_content jest zbyt krótka.

komentarz 15 września 2015 przez Boshi VIP (100,240 p.)

Problemem jest to, że strona jest przygotowana pod dane szerokości na sztywno, dlatego jeżeli coś wyrzucisz nagle się sypie. Zapewne na róznych przeglądarkach strona różnie też wygląda.

Problemem jest u ciebie ta tabela, mimo że strona nie jest zbudowana na tablekach (o zgrozo jak by była) to zmienna MainContent jest tutaj winowajcą. Tablea służy do wyświetlania danych tabelarycznych a nie normalnego tekstu.