Помогите стекировать DIV.

  • Автор темы sugem
  • 47
  • Обновлено
  • 18, May 2024
  • #1
Привет, У меня две проблемы: кажется, что div для моего нижнего колонтитула перекрывается с div для тела, и как я могу сделать этот веб-сайт более отзывчивым и удобным для мобильных устройств.

С уважением, Крис
 /* null margins and padding to give good cross-browser baseline */

html,body,address,blockquote,div,

form,fieldset,caption,

h1,h2,h3,h4,h5,h6,

hr,ul,li,ol,ul,

table,tr,td,th,p,img {

margin: 0;

padding: 0;

}

* { //specific settings applied to all elements

background-repeat: no-repeat;

}

hr {

display: none;

}

.header{

padding: 0;

margin: 1% auto;

width: 50%;

}

.navigation {

list-style-type: none;

margin: 0;

padding: 0;

overflow: hidden;

background-color: #F1F1F1;

border: 1px solid #333333;

border-left: none;

border-right: none;

}

.nav1 {

float: left;

}

.nav2{

display: block;

color: #000;

text-align: center;

padding: 14px 16px;

text-decoration: none;

}

.nav2:hover {

background-color: #FFFFFF;

color:#0645AD;

}

.logo{

width: 600px;

height: 234px;

background-image: url("images/header.png");

}

.body{

padding: 0;

margin: 1% auto;

width: 50%;

height: 100px;

}

.body h1,h2,h3,h4,h5,h6{

padding: 1em;

padding-bottom: 5px;

padding-left:15px;

text-align: center;

}

.body p{

padding:1em;

}

.body iframe{

margin-top:1em;

}

.centertext{

text-align:center;

background-color:#FF0

}

p.centertext{

padding:0;

}

.imagesize{

width: 400px;

height:300px;

}

.videosize{

width: 400px;

height:300px;

}

.center{

margin-left: 25%;

margin-right: 25%;

}

.footer{

padding: 0em;

border-top:1px solid #333;

margin: 1% auto;

width: 50%;

height: 50px;

clear:both;

}
HTML:
 <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"> <meta name="viewport" content="ширина = ширина устройства, высота = высота устройства, начальный масштаб = 1" > <link rel="stylesheet" href="screen.css" media="screen,projection,tv"> <link rel="shortcut icon" href="images\favicon.png"> <title> Guitar Uni </title> </head><body> <div class="header"> <div class="logo"></div> <ul class="navigation"> <li class="nav1"><a class="nav2" href="#home">Home</a></li> <li class="nav1"><a class="nav2"href="#aboutus">Abous Us</a></li> <li class="nav1"><a class="nav2"href="#onlineguitarlessons">Online Guitar Lessons</a></li> <li class="nav1"><a class="nav2"href="#contact-us">Contact Us</a></li> </ul> </div> <hr> <div class="body"> <h1> Welcome to Guitar Uni! </h1> <p> To start learning how to play the guitar navigate to our online guitar lessons via the main navigation menu located at the top of the website or via lessons located on the right hand-side.



</p> <h2> Guitar Uni’s Online Lessons </h2> <p> Anyone that has an interest in the guitar will benefit from this website.

We teach basic to advance lessons.

Our online guitar lessons are broken down to step-by-step instruction.

Each lesson is concise and pictorial to ensure easy learning.



</p> <p class="centertext"><strong><em> Each Lesson Contains Picture Graphs </em></strong></p> <div class="center"><img class="imagesize" src="images\stringnames.gif" alt="Названия шести открытых струн гитары."></div> <p> Concise information is comprehensive, but to the point.



This will ensure that lessons are not long winded, but short and easy to understand.

Each lesson contains pictures and graphs that can be downloaded and printed which is essential for practice.

Finally, each lesson will contain a video demonstration so you can see exactly how it’s done.



</p> <p class="centertext"><strong><em> Each Lesson Contains Video Demonstrations! </em></strong></p> <div class="center"><iframe class="videosize"src="[URL='https://lumtu.com/yti/ZkmmkZXdodHRwczovL2RyaXZlLmdvb2dsZS5jb20vZmlsZS9kLzBCdzlnRzRFT0NlS1RWR1I2TVVZelEwbGtaVzgvcHJldJHc']https://drive.google.com/file/d/0Bw9gG4EOCeKTVGR6MUYzQ0lkZW8/preview[/URL]"></iframe></div> <p> Guitar Uni was birthed out of pure passion to teach people who have an interest in learning the guitar but are unsure where to start.



Our organized lessons will provide everything you need to learn, have fun and become an impressive guitarist as quickly, fast and easiest as possible.

</p> <p> Navigate to our online guitar lessons via the main navigation menu located at the top of the website or via lessons located on the right hand-side.

</p> <p> Thank you for visiting and enjoy your stay! </p> </div> <hr> <div class="footer"> fdg </div> </body></html>
Код (CSS):

sugem


Рег
01 Jan, 2011

Тем
1

Постов
1

Баллов
11
  • 18, May 2024
  • #2
Это сложно. Если вы посмотрите руководство Deathshadow, то увидите, что иногда у него есть прокладка DIV, иногда нет. Я все еще не понимал его позицию по этому поводу в течение многих лет. Вам лучше надеяться, что он придет и все прояснит. Я имею в виду эту тему: https://forums.digitalpoint.com/threads/progressive-enhancement-design-from-the-inside-out.2759516/
 

=SAD=BAIKAL


Рег
17 Aug, 2010

Тем
0

Постов
2

Баллов
2
  • 01, Jun 2024
  • #3
Хаха спасибо, Я только понял, что это высота, чем прочитал ваше сообщение.

Спасибо за отзыв, буду совершенствоваться. Этот сайт начинался как WordPress (очень медленный), и я решил, что буду писать весь его код самостоятельно, что станет проблемой для развития моих и без того ограниченных знаний HTML и CSS.
 

Klowa


Рег
22 Dec, 2011

Тем
1

Постов
7

Баллов
17
  • 04, Jun 2024
  • #4
Во-первых, было бы неплохо, если бы у вас были отступы и комментарии в области BODY, чтобы мы могли быть уверены, что все DIV закрываются правильно.

Во-вторых, ваш ЛОГОТИП (или, точнее, ТЕКСТ, который представляет логотип), вероятно, должен быть вашим H1, а не какой-то глупой неформальной «приветственной» текстовой чепухой.

(Я не любитель «приветственных» очередей на сайтах, траты места). В-третьих, что за бесконечные бессмысленные занятия даром в вашем меню? У вас есть совершенно хороший родительский класс, почему, черт возьми, всем подобным дочерним тегам нужен один и тот же класс huffing на каждом из них?

На самом деле вам не нужен HR, если следующий тег содержимого является заголовком, это бессмысленная избыточность.

избегайте использования имен классов, таких как «body», которые совпадают с тегами или атрибутами, которые могут запутать таблицу стилей.

. (см. идиотизм, который некоторые люди совершают в меню class="active", это вершина такой глупости)... не используйте презентационные классы, такие как «центр», вместо этого скажите, ЧТО ТАКОЕ элемент и ПОЧЕМУ он получает стиль, НЕТ что это за стиль. (на этом этапе вы можете вернуться к использованию HTML 3.2 с тегами и !)... обычно, если вы одновременно используете EM и STRONG в тексте, вы делаете что-то неправильно (подозреваете, что это должен быть H3), у вас недопустимая косая черта в пути к изображению, вам не хватает пробелов, которые НЕ является обязательным между несколькими вашими атрибутами...

Но что касается неожиданного поведения:

высота: 100 пикселей;

на вашем ".body" - потеряйте эту строку.

Значением переполнения по умолчанию является «видимый», что при такой фиксированной высоте означает, что нижний колонтитул видит только «div.body» высотой 100 пикселей, отсюда и подъем.

ИЗБЕГАЙТЕ объявления высоты для вещей, которые не должны иметь фиксированную высоту.
 

blackink


Рег
05 Oct, 2014

Тем
1

Постов
3

Баллов
13
  • 07, Jun 2024
  • #5
И еще небольшой вопрос.

Вместо логотипа я хочу, чтобы на мобильном устройстве отображался текст.



Должен ли я создать вторую таблицу стилей специально для мобильных устройств, которая скрывает заголовок и отображает текст, а для моего основного веб-сайта я буду использовать существующую таблицу стилей, чтобы отображать заголовок, но скрывать текст? Или все это можно сделать в рамках одной таблицы стилей?

С уважением,

Крис
 

Fox2


Рег
16 Sep, 2013

Тем
1

Постов
2

Баллов
12
  • 09, Jun 2024
  • #6
В этом случае я бы заменил изображение Гилдера/Левина, отключив фон для маленьких дисплеев.

Проверьте этот код:
 
h1 {

position:relative; /* allow span to be absolute positioned over h1 */
}

h1 span {

position:absolute;

top:0;

left:0;

width:300px; /* logo width - REAL metric for IE */

height:200px; /* logo height - REAL metric for IE */

background-image:url(images/h1logo.png);
}
Код (разметка):
  <h1> My Company<span></span> </h1> 
Код (разметка): Если вы хотите переместить изображение, вы можете использовать поля. Удобно иметь две версии логотипа разного размера.

Я рекомендую вам следовать этому руководству: http://cutcodedown.com/tutorial/css_tile_sheets
 

h3jh43jh43eh


Рег
15 Aug, 2013

Тем
0

Постов
2

Баллов
2
Тем
49554
Комментарии
57426
Опыт
552966

Интересно