- 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):