Проблемы с CSS Layout Alginment
0
Я создаю веб-страницу, но имею некоторые проблемы с макетом страницы, особенно выравнивание. Проблемы:
-
Моя часть входа не может быть полностью отображена в заголовке и не может быть правильно выровнена. Я хотел бы, чтобы это выглядело так: http://www.seek.com.au
-
Страница имеет двухколоночный макет, но сейчас они выглядят уродливыми. Есть ли лучший способ его стилизации? Например, эти два столбца сосредоточены на странице, и вокруг них есть хорошие границы.
-
Как добавить изображения на задний план и логотип (в заголовке)?
Я хотел бы сделать макет страницы лучше, изменив CSS или HTML, я пробовал часы и часы, но до сих пор не понял его. Пожалуйста, дайте мне несколько советов, спасибо.
Вот HTML и CSS:
<body>
<!-- begin #header -->
<div class="header">
<div class="hd-banner">
<h1>Marryland Learning Center</h1>
</div>
<div class="login">
<form id="loginForm" action="/" method="post">
<div class="hd-caption">
<ul class="hd-login">
<li>
<ul>
<li class="l-column">
<input type="text" id="email" name="email" class="state-inp-sign-in" placeholder="Email">
</li>
<li class="l-column">
<input type="password" id="password" name="password" class="state-inp-sign-in" placeholder="Password">
</li>
<li class="l-column">
<input type="submit" id="signIn" name="signIn" value="Sign in">
</li>
</ul>
</li>
<li>
<ul>
<li class="l-column">
<input name="RememberMe" type="checkbox" value="true"><input name="RememberMe" type="hidden" value="false">
<label>Remember me</label>
</li>
<li class="l-column">
<a href="">Trouble signing in?</a>
</li>
<li class="l-column">
<input type="submit" name="action" value="Register">
</li>
</ul>
</li>
</ul>
</div>
</form>
</div>
<!-- end #header --></div>
<div class="nav">
<ul class="menu">
<li><a href="">Students</a></li>
<li><a href="">Teachers</a></li>
<li><a href="">Training</a></li>
<li><a href="">About Us</a></li>
<li><a href="">Contact Us</a></li>
</ul>
<!-- end #nav --></div>
<div class="content">
<!-- begin #extra -->
<div class="sidebar">
<form name="search" action="/" method="post">
<fieldset><legend>Quick Search</legend>
<p><label>Key Words <input type="text" name="keywords" id="keywords" class="textinput"></label></p>
<p><label>Class <input type="text" name="class" id="country1" class="textinput"></label></p>
<p><input type="submit" name="search" id="search" value="Search"></p>
</fieldset>
</form>
<!-- end #extra --></div>
<div class="main">
<h2>Implementing Responsive Design</h2>
<p>New devices and platforms emerge daily. Browsers iterate at a remarkable pace. Faced
with this volatile landscape we
can either struggle for control or we can embrace the inherent flexibility of the web.
Responsive design is not just another technique--it is the beginning of the maturation of a medium and a fundamental
shift in the way we think about the web.</p>
<!-- end #main --></div>
<!-- end #content --></div>
<div class="footer">
<ul class="footer-menu">
<li><a href="">Site Terms</a></li>
<li><a href="">Privacy Policy</a></li>
<li><a href="">Disclaimer</a></li>
<li><a href="">Site Map</a></li>
<li><a href="">Discrimination</a></li>
</ul>
<p class="copyright">Copyright © </p>
<!-- end #footer --></div>
</body>
</html>
Вот CSS:
body
{
margin: 0;
padding: 0;
font-family: Helvetica,Arial,sans-serif;
font-size: 100%; /* em best practice, target size ÷ size of content = result */
background-color: rgba(255,255,255,1);
}
/** Header Div **/
/* style .header div: floating the 3-column elements to the left, and giving them width seperately*/
.header
{
margin: 0;
overflow: hidden;
}
.hd-banner
{
float: left;
width: 50%;
margin: 0;
background-color: #FFC;
}
.login
{
position: relative;
}
.hd-caption
{
position: absolute;
top: 30%;
right: 20px;
}
.hd-login
{
display: inline-block;
margin-top: 30px;
list-style: none;
}
ul
{
margin: 10px 0;
}
.hd-login li
{
height: 33px;
list-style: none;
}
.l-column
{
margin-left: 18px;
overflow: hidden;
float: left;
}
.state-inp-sign-in
{
-moz-outline: none;
outline: none;
width: 130px;
height: 28px;
line-height: 24px;
}
button, input, select, textarea
{
font-size: 100%;
margin: 0;
vertical-align: baseline;
}
/** Nav Div **/
ul.menu
{
list-style-type: none;
padding: 1em;
clear: both; /* starts the nav below the floated header */
overflow:hidden;
text-align:center;
background-color:#98bf21;
}
ul.menu li
{
display:inline-block;
}
ul.menu li a:link, a:visited
{
margin:0 auto;
display:block;
width: 120px;
font-weight:bold;
color:#FFFFFF;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
ul.menu li a:hover, a:active
{
background-color:#7A991A;
}
/** Content Div **/
.content
{
clear: both; /* clear #nav ul li following elements */
width: 100%; /* set the width of #content to 100% */
overflow: hidden; /* make it stretch to contain the floated elements */
margin-top: 3em;
}
.sidebar
{
float: left;
width: 30%;
margin-right: 5%;
}
.main
{
float: left;
width: 65%;
overflow: hidden; /* make it stretch to contain the floated elements */
}
/** Footer Div **/
.footer
{
clear: left; /* starts the footer below the floated content */
overflow: hidden; /* make it stretch to contain the floated elements */
width: 100%; /* fix float containment fail */
margin-top: 1em;
}
ul.footer-menu
{
list-style-type: none;
padding: 0;
clear: both; /* starts the nav below the floated header */
overflow:hidden;
text-align:center;
background-color:#999;
}
ul.footer-menu li
{
display:inline-block;
}
ul.footer-menu li a:link, a:visited
{
margin:0 auto;
display:block;
width: 120px;
font-weight:bold;
color:#FFFFFF;
text-align:center;
padding:4px;
text-decoration:none;
/* text-transform:uppercase;*/
}
ul.footer-menu li a:hover, a:active
{
background-color:#7A991A;
}
.copyright
{
text-align: center;
}
/** forms styling **/
.sidebar form
{
width: 15em;
border: 1px solid #666;
border-radius: 10px;
box-shadow: .2em .2em .5em #999;
background-color: #d0e9f6;
padding:1em;
}
.sidebar legend
{
text-align: left;
font-weight: bold;
font-size: 1.2em;
}
label {
display: block;
width: 8em;
text-align: left;
color: #04699d;
}
input[type="submit"]
{
display: block;
width: 7em;
height: 1.8em;
background: white;
font-size: inherit;
border: 1px solid #04699d;
border-radius: 4px;
box-shadow: 2px 2px 3px rgba(0,0,0,.5);
text-align: center;
}
.main form {
width: 30em;
border: 1px solid #666;
border-radius: 10px;
box-shadow: .2em .2em .5em #999;
background-color: #d0e9f6;
padding:1em;
}
Я также сделал jsfiddle: http://jsfiddle.net/JA3x9/
Может ли кто-нибудь помочь?
-
0Вы думали о создании JSFiddle ?Dan Goodspeed
-
0Я также сделал jsfiddle: jsfiddle.net/JA3x9user2967661
Показать ещё 3 комментария
2 ответа
0
Лучший ответ
Это много изменений, но при условии, что вы можете сделать свои элементы в заголовке (и других местах) <div> вместо списков (<ul>, <li> и т.д.), Попробуйте:
CSS:
body {
background-color: #FFFFFF;
font-family: Helvetica,Arial,sans-serif;
font-size: 100%;
margin: 0;
padding: 0;
}
.header {
margin: 0;
min-height: 70px;
overflow: hidden;
}
.hd-banner {
background-color: #FFFFCC;
height: 95px;
left: 0;
margin: 0;
max-width: 50%;
position: absolute;
text-align: center;
top: 0;
width: 1000px;
}
.login {
left: 50%;
margin: 0;
max-width: 50%;
position: relative;
top: 10px;
}
.hd-caption {
clear: both;
height: 35px;
}
.hd-login-top, .hd-login-bottom {
display: inline;
text-align: center;
}
.t1, .t2, .t3, .b1, .b2, .b3 {
display: inline-block;
margin-left: auto;
margin-right: auto;
max-width: 32%;
width: 400px;
}
.state-inp-sign-in {
height: 28px;
line-height: 24px;
outline: medium none;
width: 130px;
}
button, input, select, textarea {
font-size: 100%;
margin: 0;
}
ul.menu {
background-color: #98BF21;
clear: both;
list-style-type: none;
overflow: hidden;
padding: 1em;
text-align: center;
}
ul.menu li {
display: inline-block;
}
ul.menu li a:link, a:visited {
color: #FFFFFF;
display: block;
font-weight: bold;
margin: 0 auto;
padding: 4px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: 120px;
}
ul.menu li a:hover, a:active {
background-color: #7A991A;
}
.content {
clear: both;
margin-top: 3em;
overflow: hidden;
width: 100%;
}
.sidebar {
float: left;
margin-right: 5%;
width: 30%;
}
.main {
float: left;
overflow: hidden;
width: 65%;
}
.footer {
clear: left;
margin-top: 1em;
overflow: hidden;
width: 100%;
}
ul.footer-menu {
background-color: #999999;
clear: both;
list-style-type: none;
overflow: hidden;
padding: 0;
text-align: center;
}
ul.footer-menu li {
display: inline-block;
}
ul.footer-menu li a:link, a:visited {
color: #FFFFFF;
display: block;
font-weight: bold;
margin: 0 auto;
padding: 4px;
text-align: center;
text-decoration: none;
width: 120px;
}
ul.footer-menu li a:hover, a:active {
background-color: #7A991A;
}
.copyright {
text-align: center;
}
.sidebar form {
background-color: #D0E9F6;
border: 1px solid #666666;
border-radius: 10px;
box-shadow: 0.2em 0.2em 0.5em #999999;
padding: 1em;
width: 15em;
}
.sidebar legend {
font-size: 1.2em;
font-weight: bold;
text-align: left;
}
label {
color: #04699D;
text-align: left;
width: 8em;
}
input[type="submit"] {
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #04699D;
border-radius: 4px;
box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
font-size: inherit;
height: 1.8em;
width: 7em;
}
.main form {
background-color: #D0E9F6;
border: 1px solid #666666;
border-radius: 10px;
box-shadow: 0.2em 0.2em 0.5em #999999;
padding: 1em;
width: 30em;
}
.hd-login-bottom a {
color: #04699D;
text-decoration: none;
}
HTML:
<body>
<!-- begin #header -->
<div class="header">
<div class="hd-banner">
<h1>Marryland Learning Center</h1>
</div>
<div class="login">
<form id="loginForm" action="/" method="post">
<div class="hd-caption">
<div class="hd-login-top t1">
<input type="text" id="email" name="email" class="state-inp-sign-in" placeholder="Email" />
</div>
<div class="hd-login-top t2">
<input type="password" id="password" name="password" class="state-inp-sign-in" placeholder="Password" />
</div>
<div class="hd-login-top t3">
<input type="submit" id="signIn" name="signIn" value="Sign in" />
</div>
</div>
<div class="hd-caption-2">
<div class="hd-login-bottom b1">
<label for="RememberMe"><input name="RememberMe" type="checkbox" value="true"> <input name="RememberMe" type="hidden" value="false" /> Remember me</label>
</div>
<div class="hd-login-bottom b2">
<a href="">Trouble signing in?</a>
</div>
<div class="hd-login-bottom b3">
<input type="submit" name="action" value="Register" />
</div>
</div>
</form>
</div>
</div>
<!-- end #header -->
<div class="nav">
<ul class="menu">
<li><a href="">Students</a></li>
<li><a href="">Teachers</a></li>
<li><a href="">Training</a></li>
<li><a href="">About Us</a></li>
<li><a href="">Contact Us</a></li>
</ul>
<!-- end #nav --></div>
<div class="content">
<!-- begin #extra -->
<div class="sidebar">
<form name="search" action="/" method="post">
<fieldset><legend>Quick Search</legend>
<p><label>Key Words <input type="text" name="keywords" id="keywords" class="textinput"></label></p>
<p><label>Class <input type="text" name="class" id="country1" class="textinput"></label></p>
<p><input type="submit" name="search" id="search" value="Search"></p>
</fieldset>
</form>
<!-- end #extra --></div>
<div class="main">
<h2>Implementing Responsive Design</h2>
<p>New devices and platforms emerge daily. Browsers iterate at a remarkable pace. Faced
with this volatile landscape we
can either struggle for control or we can embrace the inherent flexibility of the web.
Responsive design is not just another technique--it is the beginning of the maturation of a medium and a fundamental
shift in the way we think about the web.</p>
<!-- end #main --></div>
<!-- end #content --></div>
<div class="footer">
<ul class="footer-menu">
<li><a href="">Site Terms</a></li>
<li><a href="">Privacy Policy</a></li>
<li><a href="">Disclaimer</a></li>
<li><a href="">Site Map</a></li>
<li><a href="">Discrimination</a></li>
</ul>
<p class="copyright">Copyright © </p>
<!-- end #footer --></div>
</body>
jerdiggity
Поделиться
-
0Спасибо, но есть некоторое перекрытие между заголовком и панелью навигации
0
Измените таблицу стилей следующим образом:
1) и 3)
.header {
margin: 0;
overflow: hidden;
display: table;
padding: 20px;
background-color: #fFc;
width: 100%;
}
.hd-banner {
margin: 0;
display: table-cell;
background: url(logo.png) 0 0 no-repeat;
}
h1 {
font-size:1.5em;
}
.login {
display: table-cell;
}
li.l-row {
display:table;
}
ul.full-width {
width:100%;
}
.l-column {
padding: 2px 2px;
overflow: hidden;
display:table-cell;
}
.hd-caption {
top: 30%;
right: 20px;
}
2)
.content {
clear: both;
width: 100%;
overflow: hidden;
margin-top: 3em;
display: table;
}
.sidebar {
width: 30%;
display: table-cell;
padding: 20px;
}
.main {
display: table-cell;
padding: 20px;
}
3), уже охваченных в первой части
background: url(logo.png) 0 0 no-repeat;
вам нужно добавить классы l-row и full width в вашу форму следующим образом
<ul class="hd-login">
<li class="l-row">
<ul class="full-width">
<li class="l-column">
<input type="text" id="email" name="email" class="state-inp-sign-in" placeholder="Email">
</li>
<li class="l-column">
<input type="password" id="password" name="password" class="state-inp-sign-in" placeholder="Password">
</li>
<li class="l-column">
<input type="submit" id="signIn" name="signIn" value="Sign in">
</li>
</ul>
</li>
<li class="l-row">
<ul class="full-width">
<li class="l-column">
<input name="RememberMe" type="checkbox" value="true"><input name="RememberMe" type="hidden" value="false">
<label>Remember me</label>
</li>
<li class="l-column">
<a href="">Trouble signing in?</a>
</li>
<li class="l-column">
<input type="submit" name="action" value="Register">
</li>
</ul>
</li>
</ul>
Code Uniquely
Поделиться
-
0спасибо, но проблема с использованием Display: Table заключается в том, что часть входа в систему в заголовке больше не является горизонтальной (эффект плавания пропал).
-
0Вы сказали, что хотите войти в систему, похожую на seek.com.au , которая также имеет форму входа в две строки.
Показать ещё 1 комментарий
Ещё вопросы
- 0разделить постоянную переменную между моделью рельсов и контроллерами angularjs
- 1сгруппировать и суммировать два столбца и установить как один столбец в пандах
- 0Нужен запрос для сортировки значений из одной таблицы на основе значений другой
- 0угловые 1.2.15 бегущие параллельные петли
- 1Как написать модульные тесты для методов, которые сжимают и распаковывают?
- 0Лучший способ для двух последовательных таблиц SELECT
- 0не удалось проверить значение поля datetime с помощью PHP
- 0jQuery анализирует xml и группирует по определенному атрибуту
- 0Cakephp Auth-> user () null
- 1отображение маршрута 404 при обновлении asp.net MVC 3 до MVC 5
- 0Открытие окна Windows Explorer в C ++
- 1Как установить значения пользовательского элемента управления из класса
- 0JQuery заменить конкретные слова при наведении курсора
- 1Схема <[объект объекта]> уже существует с другим определением
- 1индекс массива объектов Java
- 0Ошибка проверки JQuery при проверке названия отдела
- 0C передать ссылку на параметр
- 0параметр по умолчанию ostream в функции шаблона
- 0Удаление только атрибута позиции в jQuery
- 1Поиск большого массива по двум столбцам
- 1Ударьте или пропустите морфологию в python, чтобы найти структуры в изображениях, не дает требуемых результатов
- 0Как отсортировать массив по ключу и значению подмассива
- 1Подсчет слов в столбце в фрейме данных
- 1Я видел эту защиту электронной почты на веб-сайте и хотел бы знать, как они достигли этого [дубликата]
- 0Как расположить кнопку ввода файла с правой стороны внутри текстового поля
- 0Проверка формы. Оптимизировать угловое ng-обязательное выражение
- 0после введения HTML, как связать область видимости контроллера
- 0Как можно остановить кнопку с помощью JQuery
- 0PHP Framework Zend не работает
- 1Есть ли чистый способ передачи данных из полученного ответа на мой собственный ответ?
- 1Простая клиент-серверная программа с каналами NIO
- 1Как настроить ESLint, чтобы он запрещал экспорт по умолчанию
- 0Как привязать сгенерированные d3 HTML-элементы к области видимости?
- 1WebRTC - создать объект PeerConnectionFactory
- 0Что передается с привязкой в JS?
- 1Уникальный идентификатор Firebase для каждой учетной записи пользователя
- 0JQuery не получить идентификатор строки
- 1Определите, был ли сделан запрос на подпись сертификата с использованием алгоритма SHA1 или SHA2
- 0SQL-запрос для поиска общих элементов в списках столбцов между таблицей и указанными критериями?
- 0Странный эффект сравнения строк PHP, это может быть сделано лучше?
- 0изменить скорость animate (), пока она анимируется, и наводить курсор на элемент
- 0Передача массива из JQuery в PHP через POST
- 0Как мне явно выполнять задачи?
- 1как добавить ограничения в форму входа?
- 1Linq Group по нескольким столбцам
- 1Как использовать внешний SDK с Nativescript
- 0Как получить экземпляр выбранного в данный момент li с помощью JQuery
- 0Пользовательский флажок повторяется в ie7 и ie8
- 0Ionic $ scope.function срабатывает только один раз, затем выдает ошибку при новых кликах
- 1FindResource не работает в библиотеке пользовательских элементов управления
