0
Мой код CSS не работает, и мне нужна помощь, чтобы закончить его.CSS-изображения не работают с кодом
Мне это нужно, так что кнопки будут прикрепляться под моими изображениями, но css испортился, когда вы вводите код кнопки под изображениями.
Вот мой HTML код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>English - Portfolio</title>
<link rel="stylesheet" type="text/css" href="styles/english.css"/>
</head>
<body>
<header>
<div class="nav">
<ul>
<li class="home"><a href="index.html">Home</a></li>
<li class="about"><a href="science.html">Science</a></li>
<li class="contact"><a href="hosptality & catering.html">Hosptality & Catering</a></li>
<li class="contact"><a href="leisure & tourism.html">Leisure & Tourism</a></li>
<li class="contact"><a href="bteccomputing.html">BTEC Computing</a></li>
<li class="contact"><a href="btecbusiness.html">BTEC Business</a></li>
<li class="contact"><a href="CV.html">CV</a></li>
</ul>
</div>
</header>
<div class="english">
<center><h2>English:</h2></center>
</div>
<div>
<div class="ofmam">
<h4>Of Mice and Men:</h4>
</div>
</div>
<div class="canspe">
<h4> Cannabis Speech:</h4>
<div class="canimage" style="width:500%; max-width: 100%;">
<a href="cannabis speech.html"><img src="images/English/Speech Icon.png" width="332" height="332"/></a></a>
<p>Click here to find out more about Cannabis.</p>
<button type="button" onclick="alert('Hello world!')">Click Me!</button>
</div>
</div>
</div>
<div class="container">
<div class="ofmamimage" style="width:50%; max-width: 50%;">
<a href="of mice and men.html"><img src="images/English/of_mice_and_men.jpg" width="291" height="448"/></a>
<p>Click here to find out more about Of Mice and Men.</p>
<button type="button" onclick="alert('Hello world!')">Click Me!</button>
</div>
<div id="wrapper">
<div id="footer">
<p><center>Contact Me:</center></p>
<p><center>[email protected]</center></p>
</div>
</div>
</body>
</html>
Вот мой CSS для этого код:
@charset "utf-8";
/* CSS Document */
body {
margin: 0;
padding: 0;
height:100%;
background: #fff;
font-family: Arial;
}
.nav ul {
list-style: none;
line-height: normal;
background-color: #40ea3c;
text-align: center;
padding: 0;
margin: 0 auto;
}
.nav li {
font-family: 'Oswald', sans-serif;
font-size: 10px;
line-height: 20px;
height: 40px;
border-bottom: 3px solid #888;
}
.nav a {
text-decoration: none;
color: #FFFFFF;
display: block;
transition: .3s background-color;
}
.nav a:hover {
background-color: #38cd34;
}
.nav a.active {
background-color: #40ea3c;
color: #fff;
cursor: default;
}
@media screen and (min-width: 1000px) {
.nav li {
width: 240px;
border-bottom: none;
height: 60px;
line-height: 60px;
font-size: 0.9em;
}
/*Hovering: 38cd34 - Not Hovering: 40ea3c*/
/* Option 1 - Display Inline */
.nav li {
display: table-cell;
margin-right: -4px;
}
/* Options 2 - Float
.nav li {
float: left;
}
.nav ul {
overflow: auto;
width: 600px;
margin: 0 auto;
}
.nav {
background-color: #444;
}
*/
}
.english {
padding-top: 30px;
}
.canspe {
padding-right: 200px;
float: right;
width: 50%
max-width: 50%;
display: inline-block;
}
.canimage {
margin-bottom: 150px;
padding-top: 20px;
width: 50%
max-width: 50%;
display: inline-block;
float: right;
}
.ofmam {
padding-left: 250px;
float: left;
width: 50%
max-width: 100%;
display: inline-block;
}
.ofmamimage {
margin-left: 10px;
margin-bottom: 50px;
padding-left: 150px;
padding-top: 20px;
width: 100%;
float: left;
display: inline-block;
}
.container {
width: auto;
max-width: auto;
}
#wrapper {
padding-top: 500px;
}
#footer {
background:#40ea3c;
width:100%;
height:80px;
bottom:0;
left:0;
color: white;
}
пожалуйста, вы можете разместить свой ожидаемый результат? –
@JordiCastilla Мой ожидаемый результат - это изображение кнопки и речи, которое должно быть под выражением речи каннабиса. То же самое с мышами и людьми. Нижний колонтитул должен быть внизу –
Потому что вы использовали поплавок и неправильную структуру. Всякий раз, когда вы используете float: left dont забудьте использовать clear: оба после float div, поэтому не будет такого типа. –