Я очень запутался и знаю, что ни один из «каналов», которые я видел (пока), не имеет отношения к моей проблеме.
Вот мой HTML код:
<!DOCTYPE html>
<html>
<head>
<title>
Creating a Proper HTML/PHP/CSS Project
</title>
<!-- Links to jQuery and JavaScript files -->
<script src="js/jquery-1.4.1.js" type="text/javascript"></script>
<!-- Links to external CSS stylesheets -->
<link href="css/styles.css" rel="stylesheet" type="text/css"/>
<!-- Internal Styles (if necessary) -->
<style>
/* Internal styles go here */
</style>
<!--[if IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="page">
<header>
<h1>Learning to Build a Proper Web Site with HTML, PHP, and CSS</h1>
<nav>
<ul>
<li><a href="#" class="current">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Lessons</a></li>
<li><a href="#">References</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Donate</a></li>
</ul>
</nav>
</header>
<section class="content">
<article>
<figure>
<img src="img/html.jpg" alt="Client-side Programming" class="article_img">
<figcaption>
Client-side Programming
</figcaption>
</figure>
<hgroup>
<h2>What is Client-side Programming?</h2>
<h3>And Client-side Languages</h3>
</hgroup>
<script type="text/javascript">
/* window.onload = function() {
if (window.jQuery) {
// jQuery is loaded
alert("Yeah!");
} else {
// jQuery is not loaded
alert("Doesn't Work");
}
} CHECKS TO SEE IF JQUERY IS LOADED */
$('button').click(function() {
$('#hide').show(fast);
});
</script>
<button>Click</button>
<p id="hide" style="display: none;">Hide this text by pushing the button</p>
<p class="indent">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</article>
<article>
<figure>
<img src="img/php.jpg" alt="Server-side Programming" class="article_img">
<figcaption>
Server-side Programming
</figcaption>
</figure>
<hgroup>
<h2>Article 2</h2>
<h3>Subtitle</h3>
</hgroup>
<p class="indent">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</article>
</section> <!-- End content section -->
<aside>
<section class="popular-topic">
<h2>Topic Tops</h2>
<a href="#">Lesson 1: Editor, IDE, and the "Hello, World" program (FRONTEND)</a>
<a href="#">Lesson 2: Linking to CSS and JS files (FRONTEND)</a>
<a href="#">Lesson 3: Server-side scripts and MySQL (BACKEND)</a>
<a href="#">Lesson 4: PROJECT! CREATE A SOCIAL MEDIA PLATFORM! (BACK- AND FRONTEND) </a>
<p>So who's ready to embark on the journey of a lifetime? These lessons, realistically, are designed for those just starting out with code, and those who are still learning. If you are a know-it-all yuppy, please move to the next site. Thanks!</p>
</section>
<section class="popular-topic">
<h2>Topic Tops</h2>
<p>Paragragh</p>
</section>
</aside>
<footer>
© 2020 | Magdi Kanaan | Free Coding Lessons
</footer>
</div> <!-- End page div -->
</body>
</html>
<?php
//TODO, Separate header and footer into respective php files. (i.e. header.php and footer.php)
?>
и вот мой CSS код:
/* STYLES - CSS File */
header, section, footer, aside, nav, article, figure, figcaption {
display: block;
}
body {
color: #666666;
background-color: #f9f8f6;
background: url("img/bg.jpg");
background-position: center;
font-family: Georgia, Times, serif;
line-height: 1.4em;
margin: 0px;
}
.page {
width: 940px;
margin: 20px auto 20px auto;
border: 2px solid #000000;
background-color: #ffffff;
overflow: auto;
}
header {
height: 160px;
/* background-image: url('img/#.jpg') */
}
h1 {
/* text-indent: -9999px; */
width: 940px;
height: 130px;
margin: 0px;
}
nav, footer {
clear: both;
color: #ffffff;
background-color: #aeaca8;
height: 30px;
}
nav ul {
margin: 0px;
padding: 5px 0px 5px 30px;
}
nav li {
display: inline;
margin-right: 40px;
}
nav li a {
color: #ffffff;
}
nav li a:hover, nav li a.current {
color: #000000;
}
section.content {
float: left;
width: 659px;
border-right: 1px solid #eeeeee;
}
article {
clear: both;
overflow: auto;
width: 100%;
}
.article_img {
width:300px;
height: 200px;
}
hgroup {
margin-top: 40px;
}
figure {
float: left;
width: 290px;
height: 220px;
padding: 5px;
margin: 20px;
border: 1px solid #eeeeee;
}
figcaption {
font-size: 90%;
text-align: left;
}
aside {
width: 230px;
float: left;
padding: 0px 0px 0px 20px;
}
aside section a {
display: block;
padding: 10px;
border-bottom: 1px solid #eeeeee;
}
aside section a:hover {
color: #985d6a;
background-color: #efefef;
}
a {
color: #de6581;
text-decoration: none;
}
h1, h2, h3 {
font-weight: normal;
}
h2 {
margin: 10px 0px 5px 0px;
padding: 0px;
}
h3 {
margin: 0px 0px 10px 0px;
color: #de6581;
}
aside h2 {
padding: 30px 0px 10px 0px;
color: #de6581;
}
footer {
font-size: 80%;
padding: 7px 0px 0px 20px;
}
Мой макет должен выглядеть так:
Желаемый эффект
Я получил этот код прямо из книги кодирования и почему-то не работает! Еще странно то, что мой jQuery загружается, но не работает. Что-то определенно не так.
Но я должен сказать, что изображение заголовка и фоновое изображение, которые я использую, отличаются от изображений на изображении с «желаемым эффектом».
Проще говоря, тело победило 't "center-margin" (margin: 0 auto) и мой фоновый URL (который правильный) не отображаются. Зачем? Я так запуталась.