I recently enrolled into a web course. Currently learning html5 and css. I have to make 3 webpages; main, about me and hobbies. I've created pretty much they've asked according to the specification they gave me BUT I have one problem; some content does not display where its supposed to be. I've tried position: relative, position: absolute etc and modified the the position of it using bottom: 500px etc but it just doesn't look right. For example, on the code below, that is my 'About me' page. The pictures on the side is not currently aligned properly to the top of the main article. The pictures are besides the main article which is correct but its positioned a bit below. This happens throughout my webpages on tables elements..
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>About Me</title>
<link property="stylesheet" rel ="stylesheet" href="cascadingstylesheet.css"/>
<!--[if lt IE 9]>
<script src="hpp://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
</head>
<body>
<header>
<h1>About Me</h1>
<nav>
<ul>
<li><a href="Main">Main</a></li>
<li><a href="About me">About me</a></li>
<li><a href="Hobbies.html">Hobby</a></li>
</ul>
</nav>
</header>
<hr>
<main>
<!--
Below I have used the article tag and the section tag. The article tag is nested inside
the section tag. This is because section tags are used to group related elements together
and the 3 articles are related since they contain information about me.
I didn't include one article tag because the articles are distinct from one another. E.g. One of the
article contains the types of mototbikes but another article tells the user information about me. !-->
<section title="border" id="aboutArticle">
<article><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet bibendum ex. Phasellus eget placerat nisi. Curabitur scelerisque condimentum vulputate. Nullam mollis mauris vel porttitor fringilla. Cras risus erat, feugiat non aliquet sit amet, molestie nec magna. Phasellus eleifend a ligula et consectetur. Fusce et malesuada sem. Donec lacinia tortor urna, eu semper metus volutpat non. Phasellus sed sapien commodo ipsum faucibus dictum rhoncus in est. Vestibulum porta metus pulvinar, ornare quam a, tristique nisl. Nullam euismod neque est, at tincidunt nunc tincidunt a. Aenean ullamcorper tincidunt congue.</p></article>
<br>
<article><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet bibendum ex. Phasellus eget placerat nisi. Curabitur scelerisque condimentum vulputate. Nullam mollis mauris vel porttitor fringilla. Cras risus erat, feugiat non aliquet sit amet, molestie nec magna. Phasellus eleifend a ligula et consectetur. Fusce et malesuada sem. Donec lacinia tortor urna, eu semper metus volutpat non. Phasellus sed sapien commodo ipsum faucibus dictum rhoncus in est. Vestibulum porta metus pulvinar, ornare quam a, tristique nisl. Nullam euismod neque est, at tincidunt nunc tincidunt a. Aenean ullamcorper tincidunt congue.</p> </article>
<br>
<article><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet bibendum ex. Phasellus eget placerat nisi. Curabitur scelerisque condimentum vulputate. Nullam mollis mauris vel porttitor fringilla. Cras risus erat, feugiat non aliquet sit amet, molestie nec magna. Phasellus eleifend a ligula et consectetur. Fusce et malesuada sem. Donec lacinia tortor urna, eu semper metus volutpat non. Phasellus sed sapien commodo ipsum faucibus dictum rhoncus in est. Vestibulum porta metus pulvinar, ornare quam a, tristique nisl. Nullam euismod neque est, at tincidunt nunc tincidunt a. Aenean ullamcorper tincidunt congue.</p>
<p>This blog was created on
<time datetime="10-10-2015 20:00">
the 10th of October 2015.</time></p>
<section>
<img id="motorbikePic" width="350" alt="Harley Davidson Logo "src="http://media1.santabanta.com/full5/Bikes/Harley%20Davidson/harley- davidson-82a.jpg"></img>
</section>
</article>
</section>
<!--
I have used the aside tag on my About page. Inside the tag there are images containing my
favourite types of cars. I did not include it in the article tag above because it's not necessarily
related to it since I said I like motobikes and not muscle cars.!-->
<aside title="cars">
<h3>My favourite cars:</h3>
<img src="http://gas2.org/wp-content/uploads/2014/07/challenger-hellcat.png" width="300" alt="Dodge Hellcat">
<br>
<img src="http://cartype.com/pics/6596/full/ford_mustang_shelby_gt500_f1_10.jpg" width="300" alt="Ford Shelby GT500">
<br>
<img src="http://www.forodefotos.com/attachments/chevrolet/14617d1289420971- camaro-2010-camaro-2010.jpg" alt="Chevrolet Camero" width="300">
</aside>
</main>
<!--
Footer tag is used at the bottom of the page since it more appropriate to use it at the bottom since
you are given more options such as contacting the web developer, in this case it is me.
!-->
<footer>
<hr>
<p>To get in touch with me you can click below:</p>
<a href="mailto:w1@my.uk">Click to email me!</a>
</footer>
</body>
</html>
This is my CSS. My CSS contains some rules for my other pages so I pasted the relevant ones so that it'll be easier for you guys to read. These are the relevant rules for the code above but there may be some rules missing so I will also post the whole of the css if you guys require it.
CSS for the code above:
footer{
position: absolute;
right: 0;
bottom: -250px;
left: 0;
padding: 10px;
text-decoration:none;
}
#aboutArticle{
width:75%;
}
[title^="cars"]{
float:right;
margin: 0 1.5%;
position:relative;
bottom:505px;
}
[title^="bord"]{
border-style: dotted;
border-radius: 10px 30px;
}
body{
background: -webkit-linear-gradient(left, #4B0082, black , #4B0082); /* For Safari 5.1 to 6.0 */
background: linear-gradient(to right, #4B0082 , black, #4B0082); /*standard syntax*/
text-align: center;
padding-bottom:60px;
font-size:20px;
}
1 个答案:
答案 0 :(得分：0)
只需添加一个属性并删除另一个属性。
将float:left;添加到#aboutArticle并从bottom:505px;
中删除
[title^="cars"]