Как я могу вертикально выровнять текст в моем div

0

Это делает мою голову. Я не могу заставить текст выравниваться вертикально в нижнем колонтитуле. Основной текст - это то, где я хочу его посередине, но ссылки для входа заканчиваются в верхней части нижнего колонтитула. Также, когда я вхожу в систему и у меня отображаются другие параметры, текст справа от нижнего колонтитула не отображается. Пожалуйста помоги.

Нижний колонтитул:

    <?php
        include ("Includes/closeDB.php");
    ?>
        <footer>
            <div class="footer-wrapper"></div>
            <div class="footer-wrapper">
                <div class="float-left"><p id="social">Site Map</p></div>
                <div id="login">
                            <?php
                                if (logged_on())
                        {
                            echo '<li><a href="/logoff.php">Sign out</a></li>' . "\n";
                            echo '<li><a href="/addpage.php">Add</a></li>' . "\n";
                            echo '<li><a href="/selectpagetoedit.php">Edit</a></li>' . "\n";
                            echo '<li><a href="/deletepage.php">Delete</a></li>' . "\n";
                            if (is_admin())
                            {

                            }
                        }
                        else
                        {
                            echo '<li><a href="/logon.php">Admin Log In</a></li>' . "\n";
                        }
                        ?>

                        <?php if (logged_on()) {
                            echo "<div class=\"welcomeMessage\">Welcome, <strong>{$_SESSION['username']}</strong></div>\n";
                        } ?>
                </div>

                <div class="float-right"><p id="social">&copy; Swing and Putt 2014</p></div>
            </div>
        </footer>
    </body>
</html>

CSS:

.float-left {
float: left;
color: #000000;
text-align: left;
padding-left: 10px;
}

.float-right {
float: right;
color: #000000;
text-align: right;
padding-right: 10px;
}

footer {
clear: both;
font-size: 12pt;
height: 30px;
margin-top: -30px; /* negative value of footer height */
position: relative;
background-color: #00BFFF;
padding: 5px;
}    

footer .footer-wrapper {
}

/* login
----------------------------------------------------------*/
#login {
display: block;
font-size: 12pt;
font-family: Arial;
float: left; 
}

#login a {
margin-left: 10px;
margin-right: 3px;
padding: 2px 3px;
text-decoration: none;
}

#login a.username {
background: none;
margin-left: 0px;
text-decoration: underline;
}

#login ul {
margin: 0;
}

#login li {
display: inline;
list-style: none;
}

Надеюсь, что все имеет смысл. Я борюсь с материалом типа PHP.

  • 0
    Подбросьте демо или скрипку
  • 0
    Можете ли вы опубликовать вывод вместо кода PHP? Проблема здесь заключается в стилизации, и с помощью сгенерированного HTML люди могут экспериментировать и изменять его.
Показать ещё 1 комментарий
Теги:

1 ответ

0
Лучший ответ

Здесь я использую демо-ссылки нижнего колонтитула и вставляю целые html и css. Вы только что изменили нижний колонтитул класса CSS

height: 180px;
margin-top: 0px;

/* отрицательное значение высоты нижнего колонтитула */

эти и добавить #login li block

float: left;
clear: both;
margin-bottom: 10px;

эти три свойства и надежду, которые решают вашу проблему. Также я приложил свое изображение предварительного просмотра демонстрационного меню, которое вы видите, что это правильно или неправильно.

Изображение 174551

<html>
<head>
    <title>Demo Title</title>
    <style type="text/css">
        .float-left {
            float: left;
            color: #000000;
            text-align: left;
            padding-left: 10px;
        }

        .float-right {
            float: right;
            color: #000000;
            text-align: right;
            padding-right: 10px;
        }

        footer {
            clear: both;
            font-size: 12pt;
            height: 180px;
            margin-top: 0px; /* negative value of footer height */
            position: relative;
            background-color: #00BFFF;
            padding: 5px;
        }

        footer .footer-wrapper {
        }

        /* login
        ----------------------------------------------------------*/
        #login {
            display: block;
            font-size: 12pt;
            font-family: Arial;
            float: left;
        }

        #login a {
            margin-left: 10px;
            margin-right: 3px;
            padding: 2px 3px;
            text-decoration: none;
        }

        #login a.username {
            background: none;
            margin-left: 0px;
            text-decoration: underline;
        }

        #login ul {
            margin: 0;
        }

        #login li {
            display: inline;
            list-style: none;
            float: left;
            clear: both;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
<footer>
    <div class="footer-wrapper"></div>
    <div class="footer-wrapper">
        <div class="float-left"><p id="social">Site Map</p></div>
        <div id="login">
            <ul>
            <li><a href="/logoff.php">Sign out</a></li>
            <li><a href="/addpage.php">Add</a></li>
            <li><a href="/selectpagetoedit.php">Edit</a></li>
            <li><a href="/deletepage.php">Delete</a></li>
            <li><a href="/logon.php">Admin Log In</a></li>
            </ul>
    </div>

    <div class="float-right"><p id="social">&copy; Swing and Putt 2014</p></div>
    </div>
</footer>
</body>
</html>

Ещё вопросы

Сообщество Overcoder
Наверх
Меню