I'm new here. I just wanted to ask about this problem.
The text is not inside the box The text seems to be outside of the box and it looks weird. How do I make the text appear inside the box? What did I do wrong in the coding? I don't see any problem in my coding. By the way, I use Dreamweaver to code this interface.
HTML code:
<html>
<head>
<meta charset="utf-8">
<title>Deane.co</title>
<link href="style.css" rel="stylesheet" type="text/css" >
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div id="nav1">
<h4><h1>Deane.co</h4>
<ul>
<li id="active"><a href="index.html"</a>Home</li>
<li><a href="service.html"</a>Products</li>
<li><a href="contact.html"</a>Contact</li>
<li><a href="about.html"About</a>About</li>
</ul>
</div>
<div id="main-content">
<br>
<h1> Welcome To Deane.co </h1>
<br>
<p> Welcome to Deane.co the place to shop beautiful clothes easier </p>
<br>
<div id = "products">
<h5>Check our products</h5>
</div>
</div>
<div id="shirtsaesthetic">
<div id="shirtsaesthetic1"> <img src="Images/shirtsaesthetic.jpg"> <br>
<h4> Hipster Blouse </h4> <br>
<p> RM40 </p>
</div>
<div id="shirtsaesthetic1"> <img src="Images/shirtsaesthetic.jpg"> <br>
<h4> Hipster Blouse </h4> <br>
<p> RM40 </p>
</div>
<div id="shirtsaesthetic1"> <img src="Images/shirtsaesthetic.jpg"> <br>
<h4> Hipster Blouse </h4> <br>
<p> RM40 </p>
</div>
</div>
<div id="footer">
<h2>© Allright Reserved</h2>
<div>
<ul>
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-instagram"></i></li>
</ul>
</div>
</div>
</body>
</html>
CSS code:
body {
font-family: 'Raleway', sans-serif;
}
*{
padding: 0px;
margin: 0px;
}
#nav1 {
width: 100%;
height: 70px;
line-height: 70px;
background: #a5aab1;
}
#nav1 h1 {
float: left;
font-size: 2.5em;
margin-left: 15px;
}
#nav1 h1 a {
text-decoration: none;
color: white;
}
#nav1 ul {
float: right;
margin-right: 15px;
}
#nav1 ul li {
display: inline-block;
list-style-type: none;
}
#nav1 ul li a {
text-decoration: none;
color: white;
padding: 25px;
}
#nav1 ul li:hover{
background: #bfc5ce;
transition: all ease-in-out 0.45s;
}
#active {
background: #bfc5ce;
}
#main-content {
width: 100&;
height: 600px;
background: url(Images/store-background3.jpg) no-repeat;
background-size: cover;
text-align: center;
color: black;
line-height: 40px;
}
#main-content a {
text-decoration: none;
color: black;
}
#products {
background: #a5aab1;
width: 170px;
height: 60px;
line-height: 60px;
margin-left: auto;
margin-right: auto;
border-radius: 5px;
color: white;
font-weight: 100;
}
#products:hover {
box-shadow: 1px 1px 10px 10px rgba(136, 131, 131, 0.83);
transition: all ease-in-out 0.45s;
}
#products a {
color: white;
text-decoration: none;
padding: 25px;
}
#shirtsaesthetic {
width: 100%;
height: 400px;
background: white;
}
#shirtsaesthetic1 {
width: 400px;
height: 300px;
padding: 5px;
display: inline;
float: left;
margin: 19px;
text-align: center;
}
#shirtsaesthetic1 img {
width: 300px;
height: 220px;
border-radius: 5px;
}
your first bits of code are messed up.
Close tags properly:
<head>
<title>Deane.co</title>
<link href="style.css" rel="stylesheet" type="text/css" >
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div id="nav1">
<h4><h1>Deane.co</h1></h4>
<ul>
<li id="active">Home</li>
<li>Products</li>
<li>Contact</li>
<li><a href="about.html"About>About</a></li>
</ul>
<div id="main-content">
<br>
<h1> Welcome To Deane.co </h1>
<br>
<p> Welcome to Deane.co the place to shop beautiful clothes easier </p>
<br>
<div id = "products">
<h5>Check our products</h5>
</div>
</div>
<div id="shirtsaesthetic">
<div id="shirtsaesthetic1"> <img src="Images/shirtsaesthetic.jpg"> <br>
<h4> Hipster Blouse </h4> <br>
<p> RM40 </p>
</div>
<div id="shirtsaesthetic1"> <img src="Images/shirtsaesthetic.jpg"> <br>
<h4> Hipster Blouse </h4> <br>
<p> RM40 </p>
</div>
<div id="shirtsaesthetic1"> <img src="Images/shirtsaesthetic.jpg"> <br>
<h4> Hipster Blouse </h4> <br>
<p> RM40 </p>
</div>
</div>
<div id="footer">
<h2>© Allright Reserved</h2>
<div>
<ul>
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-instagram"></i></li>
</ul>
</div>
</div>
</body>
In your style.css file, remove the line below:
#products a {
color: white;
text-decoration: none;
padding: 25px; //remove this line
}
In your html file, you missed ">" of a tag in these line:
<ul>
<li id="active">Home</li>
<li>Products</li>
<li> Contact</li>
<li>About</li>
</ul>
The a tags in your navigation are wrong, and you need to remove the padding from #products a
body {
font-family: 'Raleway', sans-serif;
}
*{
padding: 0px;
margin: 0px;
}
#nav1 {
width: 100%;
height: 70px;
line-height: 70px;
background: #a5aab1;
}
#nav1 h1 {
float: left;
font-size: 2.5em;
margin-left: 15px;
}
#nav1 h1 a {
text-decoration: none;
color: white;
}
#nav1 ul {
float: right;
margin-right: 15px;
}
#nav1 ul li {
display: inline-block;
list-style-type: none;
}
#nav1 ul li a {
text-decoration: none;
color: white;
padding: 25px;
}
#nav1 ul li:hover{
background: #bfc5ce;
transition: all ease-in-out 0.45s;
}
#active {
background: #bfc5ce;
}
#main-content {
width: 100&;
height: 600px;
background: url(Images/store-background3.jpg) no-repeat;
background-size: cover;
text-align: center;
color: black;
line-height: 40px;
}
#main-content a {
text-decoration: none;
color: black;
}
#products {
background: #a5aab1;
width: 170px;
height: 60px;
line-height: 60px;
margin-left: auto;
margin-right: auto;
border-radius: 5px;
color: white;
font-weight: 100;
}
#products:hover {
box-shadow: 1px 1px 10px 10px rgba(136, 131, 131, 0.83);
transition: all ease-in-out 0.45s;
}
#products a {
color: white;
text-decoration: none;
}
#shirtsaesthetic {
width: 100%;
height: 400px;
background: white;
}
#shirtsaesthetic1 {
width: 400px;
height: 300px;
padding: 5px;
display: inline;
float: left;
margin: 19px;
text-align: center;
}
#shirtsaesthetic1 img {
width: 300px;
height: 220px;
border-radius: 5px;
}
<html>
<head>
<meta charset="utf-8">
<title>Deane.co</title>
<link href="style.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div id="nav1">
<h4><h1>Deane.co</h4>
<ul>
<li id="active">Home </li>
<li>Products</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
<div id="main-content">
<br>
<h1> Welcome To Deane.co </h1>
<br>
<p> Welcome to Deane.co the place to shop beautiful clothes easier </p>
<br>
<div id="products">
<h5>Check our products</h5>
</div>
</div>
<div id="shirtsaesthetic">
<div id="shirtsaesthetic1"> <img src="Images/shirtsaesthetic.jpg"> <br>
<h4> Hipster Blouse </h4> <br>
<p> RM40 </p>
</div>
<div id="shirtsaesthetic1"> <img src="Images/shirtsaesthetic.jpg"> <br>
<h4> Hipster Blouse </h4> <br>
<p> RM40 </p>
</div>
<div id="shirtsaesthetic1"> <img src="Images/shirtsaesthetic.jpg"> <br>
<h4> Hipster Blouse </h4> <br>
<p> RM40 </p>
</div>
</div>
<div id="footer">
<h2>© Allright Reserved</h2>
<div>
<ul>
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-instagram"></i></li>
</ul>
</div>
</div>
</body>
</html>
Your tags in the first unordered list are not closed properly.
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
My websites sidebar doesn't work on mobile. If you wanna see what i mean, go to Zinexium. I don't know what to do, im new to html. The code.
Thank you!
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="sidebar.css" type="text/css" />
<link rel="stylesheet" href="sidebarStyle.css" type="text/css" />
<meta name="description" content="Developers of Zinexium." />
<title>Zinexium</title>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
/>
<link
rel="stylesheet"
href="https://cdn.materialdesignicons.com/4.9.95/css/materialdesignicons.min.css"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
</head>
<body>
<aside class="sidebar">
<nav>
<ul class="sidebar__nav">
<li>
<a href="index.html" class="sidebar__nav__link">
<i class="mdi mdi-home"></i>
<span class="sidebar__nav__text">Home</span>
</a>
</li>
<li>
<a href="developers.html" class="sidebar__nav__link">
<i class="mdi mdi-account-multiple"></i>
<span class="sidebar__nav__text">Developers</span>
</a>
</li>
<li>
<a href="download.html" class="sidebar__nav__link">
<i class="mdi mdi-download"></i>
<span class="sidebar__nav__text">Download</span>
</a>
</li>
<li>
<a href="contact.html" class="sidebar__nav__link">
<i class="mdi mdi-phone"></i>
<span class="sidebar__nav__text">Contact</span>
</a>
</li>
<li>
<a href="about.html" class="sidebar__nav__link">
<i class="mdi mdi-tooltip-text"></i>
<span class="sidebar__nav__text">About</span>
</a>
</li>
<li>
<a href="logs.html" class="sidebar__nav__link">
<i class="mdi mdi-message-alert"></i>
<span class="sidebar__nav__text">Logs</span>
</a>
</li>
<li>
<a href="https://discord.gg/QTkncurCkm" target="_blank" class="sidebar__nav__link">
<i class="mdi mdi-discord"></i>
<span class="sidebar__nav__text">Discord</span>
</a>
</li>
</ul>
</nav>
</aside>
<div class="about-section">
<h1>Developers</h1>
</div>
<div class="wrapper">
<div class="main">
<h2 style="text-align: center">Our Team</h2>
<div class="row">
<div class="column">
<div class="card">
<img src="Morgan.jpeg" alt="Morgan" style="width: 100%" />
<div class="container">
<h2>MorganInnit</h2>
<p class="title">Founder & Main Dev</p>
<p>i wanna die.</p>
<p>
morgan#0887<br />
UserID:780879021935689799
</p>
<p>
<a href="http://dsc.bio/morganoutit" target="_blank"
><button class="button">Contact</button></a
>
</p>
</div>
</div>
</div>
<div class="column">
<div class="card">
<img src="thonk.jpeg" alt="ThonkPT" style="width: 100%" />
<div class="container">
<h2>ThonkPT</h2>
<p class="title">Co Dev</p>
<p>kewl gamer.</p>
<p>
ThonkPT#3766<br />
UserID:710220284531310734
</p>
<p>
<a href="http://dsc.bio/thonkpt2" target="_blank"
><button class="button">Contact</button></a
>
</p>
</div>
</div>
</div>
</div>
<!--end of row-->
</div>
<!--end of main-->
</div>
<!--end of wrapper-->
</body>
</html>
:root {
--sidebar-width: 4.5em;
}
.sidebar {
background-color: #333;
position: fixed;
transition: width 0.2s ease;
}
.sidebar nav {
height: 100%;
}
.sidebar .sidebar__nav {
display: flex;
height: 100%;
list-style: none;
margin: 0;
padding: 0;
}
.sidebar .sidebar__nav .sidebar__nav__link {
align-items: center;
color: #bbb;
display: flex;
padding-left: 20px;
text-decoration: none;
transition: color 0.2s ease, background-color 0.2s ease;
}
.sidebar .sidebar__nav .sidebar__nav__link:hover {
background-color: rgba(0, 0, 0, 0.15);
color: #80f;
}
.sidebar .sidebar__nav .sidebar__nav__text {
display: none;
margin-left: 10px;
margin-right: auto;
white-space: nowrap;
}
.sidebar .sidebar__nav i {
align-items: center;
display: flex;
justify-content: center;
}
#media (max-width: 572px) {
.sidebar {
bottom: 0;
width: 100%;
}
.sidebar .sidebar__nav {
justify-content: center;
}
.sidebar .sidebar__nav .sidebar__nav__link {
height: 100%;
padding: 0.75em;
}
.sidebar .sidebar__nav i {
font-size: 2rem;
}
}
#media (min-width: 572px) {
.sidebar {
height: 100vh;
left: 0;
width: var(--sidebar-width);
}
.sidebar:hover {
width: 14rem;
}
.sidebar .sidebar__nav {
flex-direction: column;
}
.sidebar .sidebar__nav .sidebar__nav__link {
padding: 1em;
}
.sidebar:hover .sidebar__nav .sidebar__nav__text {
display: inline;
}
.sidebar .sidebar__nav i {
font-size: 2.5rem;
}
}
#media (max-height: 434px) {
.sidebar {
overflow-y: scroll;
}
}
:root {
--sidebar-width: 4.5em;
}
body {
margin: 0;
padding: 0;
font-family: 'Roboto';
}
* {
outline: none;
box-sizing: border-box;
}
.main {
margin-left: auto;
margin-right: auto;
max-width: 992px;
padding: 2em 1.5em;
}
.main h2 {
font-size: 2em;
margin-top: 0px;
}
.main p {
color: #444;
font-size: 1.25em;
line-height: 2;
text-align: justify;
}
#media (min-width: 572px) {
.main {
margin-left: var(--sidebar-width);
}
}
#media (min-width: 992px) {
.main {
padding: 2.5em;
}
}
*,
*:before,
*:after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
}
p {
font-size: 34px;
}
.wrapper {
position: relative;
/* height: 200px; */
width: 80%;
margin: auto;
overflow: auto;
}
.main {
margin: auto;
}
.column {
float: left;
width: 33.3%;
margin: 4em;
margin-bottom: 16px;
padding: 0 8px;
}
.card {
width: 400px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
.card p {
font-size: 150%; /* changes font size inside of cards*/
}
.about-section {
padding: 50px;
text-align: center;
background-color: #474e5d;
color: white;
}
.container {
padding: 0 16px;
}
.container::after,
.row::after {
content: '';
clear: both;
display: table;
}
.title {
color: grey;
}
.button {
border: none;
outline: 0;
display: inline-block;
padding: 8px;
color: white;
background-color: #000;
text-align: center;
cursor: pointer;
width: 100%;
}
.button:hover {
background-color: #555;
}
#media screen and (max-width: 650px) {
.column {
width: 100%;
display: block;
}
}
.rainbow {
text-align: center;
text-decoration: underline;
font-size: 32px;
font-family: monospace;
letter-spacing: 5px;
}
.rainbow_text_animated {
background: linear-gradient(
to right,
#6666ff,
#0099ff,
#00ff00,
#ff3399,
#6666ff
);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: rainbow_animation 6s ease-in-out infinite;
background-size: 400% 100%;
}
#keyframes rainbow_animation {
0%,
100% {
background-position: 0 0;
}
50% {
background-position: 100% 0;
}
}
#rcorners1 {
border-radius: 25px;
background: #d3d3d3;
padding: 20px;
width: 300px;
height: 345px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="sidebar.css" type="text/css" />
<link rel="stylesheet" href="sidebarStyle.css" type="text/css" />
<meta name="description" content="Developers of Zinexium." />
<title>Zinexium</title>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
/>
<link
rel="stylesheet"
href="https://cdn.materialdesignicons.com/4.9.95/css/materialdesignicons.min.css"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
</head>
<body>
<aside class="sidebar">
<nav>
<ul class="sidebar__nav">
<li>
<a href="index.html" class="sidebar__nav__link">
<i class="mdi mdi-home"></i>
<span class="sidebar__nav__text">Home</span>
</a>
</li>
<li>
<a href="developers.html" class="sidebar__nav__link">
<i class="mdi mdi-account-multiple"></i>
<span class="sidebar__nav__text">Developers</span>
</a>
</li>
<li>
<a href="download.html" class="sidebar__nav__link">
<i class="mdi mdi-download"></i>
<span class="sidebar__nav__text">Download</span>
</a>
</li>
<li>
<a href="contact.html" class="sidebar__nav__link">
<i class="mdi mdi-phone"></i>
<span class="sidebar__nav__text">Contact</span>
</a>
</li>
<li>
<a href="about.html" class="sidebar__nav__link">
<i class="mdi mdi-tooltip-text"></i>
<span class="sidebar__nav__text">About</span>
</a>
</li>
<li>
<a href="logs.html" class="sidebar__nav__link">
<i class="mdi mdi-message-alert"></i>
<span class="sidebar__nav__text">Logs</span>
</a>
</li>
<li>
<a href="https://discord.gg/QTkncurCkm" target="_blank" class="sidebar__nav__link">
<i class="mdi mdi-discord"></i>
<span class="sidebar__nav__text">Discord</span>
</a>
</li>
</ul>
</nav>
</aside>
<div class="about-section">
<h1>Developers</h1>
</div>
<div class="wrapper">
<div class="main">
<h2 style="text-align: center">Our Team</h2>
<div class="row">
<div class="column">
<div class="card">
<img src="Morgan.jpeg" alt="Morgan" style="width: 100%" />
<div class="container">
<h2>MorganInnit</h2>
<p class="title">Founder & Main Dev</p>
<p>i wanna die.</p>
<p>
morgan#0887<br />
UserID:780879021935689799
</p>
<p>
<a href="http://dsc.bio/morganoutit" target="_blank"
><button class="button">Contact</button></a
>
</p>
</div>
</div>
</div>
<div class="column">
<div class="card">
<img src="thonk.jpeg" alt="ThonkPT" style="width: 100%" />
<div class="container">
<h2>ThonkPT</h2>
<p class="title">Co Dev</p>
<p>kewl gamer.</p>
<p>
ThonkPT#3766<br />
UserID:710220284531310734
</p>
<p>
<a href="http://dsc.bio/thonkpt2" target="_blank"
><button class="button">Contact</button></a
>
</p>
</div>
</div>
</div>
</div>
<!--end of row-->
</div>
<!--end of main-->
</div>
<!--end of wrapper-->
</body>
</html>
The snippet isn't the exact website, only the developers page. If you wanna see the actual page, go to "The code" i linked.
Thanks.
P.S. The snippet is missing some things, so go to the actual developers page if you wanna see it ig.
If by "doesn't work" you meant "is hiding under the content" ...the solution is to give it the z-index: 1 in your CSS:
.sidebar {
z-index: 1;
}
it will do the job.
I currently have two inline-block div in my post page that contain my most recent book reviews. For most window sizes, these sections match up and take the same amount of space. For some windows dimensions, however, one inline-block takes up less space than the other, causing there to be white space at the bottom of the smaller div.
Is there anything I can do to get rid of this whitespace?
Here is my HTML and CSS:
html, body {
margin: 0;
padding: 0;
}
.newest-review-cover {
z-index: 0;
}
.newest-review-cover img {
display: block;
height: 50%;
width: 100%;
}
.newest-review-content h2 {
color: white;
font-size: 2rem;
padding-top: 1em;
}
.newest-review-content h5 {
padding: 1em 3em;
color: white;
font-size: 1rem;
}
.newest-review-content {
background-color: black;
padding: 2em 0;
text-align: center;
}
.book-review img{
width: 100%;
height: 200%;
}
.book-review {
background-color: black;
display: inline-block;
width: 33%;
padding-left: 0;
border-right: solid 3px #f28600;
border-left: solid 3px #f28600;
border-top: solid 5px #f28600;
margin-left: -4px;
margin-top: 0;
vertical-align: top;
}
.book-review p {
color: white;
margin: 1em 0;
}
.post-title {
text-align: center;
}
.post-description {
padding: 0 2em;
height: 100px;
}
<!DOCTYPE html>
<html>
<head>
<link href="header+footer.css" rel = "stylesheet" type="text/css" />
<link href="Homepage.css" rel = "stylesheet" type="text/css" />
<meta charset="utf-8">
<title> The Novel Column - Book Reviews </title>
</head>
<body>
<nav>
<h1> The Novel Column </h1>
<ul>
<li> Resources
<ul>
<li> Book Reviews </li>
<li> Quotes and Principles </li>
<li> Community Aid </li>
</ul>
</li>
<li> About Us </li>
</ul>
</nav>
<section class="newest-review-cover">
<img src="images/the-5am-club-poster.jpg" alt="The 5AM Club">
<div class="newest-review-content">
<h2> The 5AM Club Review </h2>
<h5> Maximize your productivity, be around nice things, and spend more time doing what you want! </h5>
</div>
</section>
<div class="all-posts">
<a href="the-one-thing.html">
<div class="book-review" id="the-one-thing">
<img src="https://thenovelcolumn.com/wp-content/uploads/2019/05/The-ONE-Thing-Image-3.jpg" alt="The ONE Thing">
<div class="book-description">
<p class="post-title"> The ONE Thing Review </p>
<p class="post-description"> Declutter your life, think big, and achieve mastery!</p>
</div>
</div>
</a>
<a href="the-10x-rule.html">
<div class="book-review" id="the-10x-rule">
<img src="https://thenovelcolumn.com/wp-content/uploads/2019/04/The-10X-Rule-Image-2-e1555476700855.jpg" alt="The 10X Rule" alt="The 10X Rule">
<div class="book-description">
<p class="post-title"> The 10X Rule Review </p>
<p class="post-description"> Unlock your potential and multiply happiness and productivity!</p>
</div>
</div>
</a>
</div>
</body>
</html>
Thanks for your help in advance!
I think the problem lies with .post-description
If you look at your .post-description for both blocks, their text have different height.
You can set a fix height to .post-description and set vertical-align: top; to .book-review
html, body {
margin: 0;
padding: 0;
}
.newest-review-cover {
z-index: 0;
}
.newest-review-cover img {
display: block;
height: 50%;
width: 100%;
}
.newest-review-content h2 {
color: white;
font-size: 2rem;
padding-top: 1em;
}
.newest-review-content h5 {
padding: 1em 3em;
color: white;
font-size: 1rem;
}
.newest-review-content {
background-color: black;
padding: 2em 0;
text-align: center;
}
.book-review img{
width: 100%;
height: 200%;
}
.book-review {
background-color: black;
display: inline-block;
width: 33%;
padding-left: 0;
border-right: solid 3px #f28600;
border-left: solid 3px #f28600;
border-top: solid 5px #f28600;
margin-left: -4px;
margin-top: 0;
vertical-align: top; /*Added this to set alignment to top*/
}
.book-review p {
color: white;
margin: 1em 0;
}
.post-title {
text-align: center;
}
.post-description {
padding: 0 2em;
height: 150px; /*Added a fixed height*/
}
<!DOCTYPE html>
<html>
<head>
<link href="header+footer.css" rel = "stylesheet" type="text/css" />
<link href="Homepage.css" rel = "stylesheet" type="text/css" />
<meta charset="utf-8">
<title> The Novel Column - Book Reviews </title>
</head>
<body>
<nav>
<h1> The Novel Column </h1>
<ul>
<li> Resources
<ul>
<li> Book Reviews </li>
<li> Quotes and Principles </li>
<li> Community Aid </li>
</ul>
</li>
<li> About Us </li>
</ul>
</nav>
<section class="newest-review-cover">
<img src="images/the-5am-club-poster.jpg" alt="The 5AM Club">
<div class="newest-review-content">
<h2> The 5AM Club Review </h2>
<h5> Maximize your productivity, be around nice things, and spend more time doing what you want! </h5>
</div>
</section>
<div class="all-posts">
<div class="book-review" id="the-one-thing">
<img src="https://thenovelcolumn.com/wp-content/uploads/2019/05/The-ONE-Thing-Image-3.jpg" alt="The ONE Thing">
<div class="book-description">
<p class="post-title"> The ONE Thing Review </p>
<p class="post-description"> Declutter your life, think big, and achieve mastery!</p>
</div>
</div>
<a href="the-10x-rule.html">
<div class="book-review" id="the-10x-rule">
<img src="https://thenovelcolumn.com/wp-content/uploads/2019/04/The-10X-Rule-Image-2-e1555476700855.jpg" alt="The 10X Rule">
<div class="book-description">
<p class="post-title"> The 10X Rule Review </p>
<p class="post-description"> Unlock your potential and multiply happiness and productivity!</p>
</div>
</div>
</a>
</div>
</body>
</html>
I am trying to make my footer stay at the bottom of the page and have been going through some of the youtube tutorials. For some strange reason, they do work when I tried the footer by itself but when combining with my other elements, I seem to have some problems with not only getting the footer to be at the bottom of the page but I can't also get my display: inline-block to work well....
I have been trying to follow this tutorial: https://www.youtube.com/watch?v=qlCIXXhSX6Y&t=191s and https://www.youtube.com/watch?v=FGBsGqn7ac8&lc=z22eihehdzrajv13qacdp4334oiod53pnruzdum2ru1w03c010c.1541183153454115
I have a separate footer.php and have included into my index.php file.... Should I have my div ids in the index.php page or footer.php?
This is my footer code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/all.css" integrity="sha384-/rXc/GQVaYpyDdyxK+ecHPVYJSN9bmVFBvjA/9eOB+pb3F2w2N6fc5qB9Ew5yIns" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<section class="content">
<footer>
<div class="main-footer">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="footer-bg">
<div class="footer-address">
<h1>Learn Classical Music at <span>PianoCourse101</span></h1>
<h2>Location: Australia, Melbourne</h2>
</div>
<div class="footer-email-phone">
<ul>
<li><i class="fa fa-phone"></i>+123-456-7890</li>
<li><i class="fa fa-envelope"></i>info#pianocourse101.com</li>
</ul>
</div>
<div class="footer-social-icons">
<ul>
<li><i class="fab fa-facebook"></i></li>
<li><i class="fab fa-twitter"></i></li>
<li><i class="fab fa-google-plus"></i></li>
<li><i class="fab fa-youtube"></i></li>
<li><i class="fab fa-linkedin"></i></li>
</ul>
</div>
</div>
</div>
<div class="col-md-12">
<div class="footer-menu">
<ul>
<li>Home</li>
<li>More Information</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</div>
</div>
<div class="footer-strip">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="footer-text">
<p>2018 # All Rights</p>
</div>
</div>
</div>
</div>
</div>
</footer>
</section>
</body>
</html>
This is my index.php page
<!DOCTYPE html>
<html>
<head>
<title>PianoCourse101</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Aldrich|Mr+Dafoe" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity=">sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Great+Vibes|Lobster" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Great+Vibes|Lobster|Monoton|Orbitron" rel="stylesheet">
</head>
<body>
<!DOCTYPE html><html><head><meta charset="utf-8">
<link
rel="stylesheet"
href = "style.css"
media="screen,projection,tv"
>
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"
integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU"
crossorigin="anonymous">
<link
rel="stylesheet"
href = "https://fonts.googleapis.com/css?family=Pacifico"
>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome to PianoCourse101</title>
<div id="container">
<div id="main">
<header>
<div class="header2_welcome">
<h1>Welcome to PianoCourse101</h1>
</div>
</header>
<section class="content">
<div class="crotchet">
<p>𝅘𝅥</p>
</div>
<div class="minim">
<p>𝅗𝅥</p>
</div>
<div class="quaver">
<p>𝅘𝅥𝅮</p>
</div>
<img class="pc101" src="includes/pictures/pc101.gif" alt="pianocourse101/">
<div class="music"><i class="fas fa-music fa-8x"></i></div>
<div class="sharp"><p>♯</p></div>
<div class="natural"><p>♮</p></div>
<div class="flat"><p>♭</p></div>
<article>
<div class="first">
<h2>At PianoCourse101, your child can now learn how to play Classical music right from the comfort of your own home! We understand that as a busy mum, you might not have the time to take your child for piano lessons and also, it is a daunting process to find a good quality teacher. Put all of those thoughts aside because PianoCourse101 offers a complete course from the beginning to the advanced levels. It is based on "The Bastien Piano Basics Series" for children and for a limited time, students can watch the Primer Level lessons for <span class="first_free">free!</span> If you would like to continue your lessons beyond Primer Level, you can opt to purchase our Level 1, Level 2, or Level 3 course.<br></br>Currently, the lessons are aimed primarily for children but there will be lessons for adults in the near future. We would appreciate if you could donate to our website if you are enjoying your learning experience with us. This will assist us in maintaining our website and to be able to upload more videos.<br></br> Mr Lee has over ten years of piano teaching experience and also has completed an educational degree and obtained a 4th year in psychology degree. We understand that learning the piano can be boring and hence, we are trying our best to make piano learning a fun and interactive experience for you and your child.<br></br>PianoCourse101 is located in Australia, Melbourne and all fees are in the AUD currency. Student will receive an invoice upon the completion of purchasing a course.</h2>
</div>
</article>
<div class="form">
<form class="signup-form" action="newsletters.php" method="POST">
<div class="newsletters">
<label>Enter your E-mail Address</label>
</div>
<br></br>
<div class="index_form"><center><input type="text" name='email' placeholder="Enter E-mail Address"></center>
<br></br>
<center><button type="submit" name="submit">Subscribe to PianoCourse101!</button></center>
<br></br>
</div>
</form>
</div>
<img class="snoopy" src="includes/pictures/snoopy.jpg" alt="snoopy playing the piano" />
<div class="services_heading">Services</div>
<div class="services">
<div class="service1">
<h1>Level 1</h1>
<p id="piano">🎹</p>
<p>Purchase the Level 1 Subscriptionplan!<br>Learn how to play the piano right from the comfort of your own home!<br>Monthly fee: $100<br>Yearly fee: $800</p>
</div>
<div class="service1">
<h1>Level 2</h1>
<p id="violin">🎻</p>
<p>Purchase the Level 2 Subscriptionplan!<br>Learn how to play the piano right from the comfort of your own home!<br>Monthly fee: $150<br>Yearly fee: $1300</p>
</div>
<div class="service1">
<h1>Level 3</h1>
<p id="sax">🎷</p>
<p>Purchase the Level 3 Subscriptionplan!<br>Learn how to play the piano right from the comfort of your own home!<br>Monthly fee: $200<br>Yearly fee: $1800</p>
</div>
</div>
<span class="index_views">There are <span class="views"><?php echo " ",htmlspecialchars($views); ?></span><?php echo " "; ?>visitors who have visited this page!</span>
</section>
<footer id="footer">
<?php include_once 'footer.php'; ?>
</footer>
</div>
</div>
</body>
</html>
This is my css for my footer:
.main-footer {
width: 100%;
height: auto;
background-image: url(includes/pictures/piano.jpg);
-webkit-background-size: cover;
-ms-background-size: cover;
-moz-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: center;
padding: 20px 0px;
}
.footer-bg {
width: 100%;
height: auto;
margin: auto;
padding: 30px;
background-color: #fff;
text-align: center;
border: 4px solid #ff6a00;
}
.footer-address {
width: 100%;
height: auto;
margin: auto;
margin-top:5px;
}
.footer-address h1 {
font-family: Arial, Helvetica, sans-serif;
color: #222;
text-align: center;
font-weight: bold;
text-transform: uppercase;
font-size: 20px;
line-height: 1.5;
}
.footer-address h1 span {
color: #ff6a00;
}
.footer-address h2 {
font-family: Arial, Helvetica, sans-serif;
color: #222;
text-align: center;
font-weight: 500;
text-transform: uppercase;
font-size: 14px;
line-height: 1.5;
}
.footer-email-phone {
width: 100%;
height: auto;
margin: auto;
margin-top: 5px;
}
.footer-email-phone ul {
margin: 0px;
padding: 0px;
text-align: center;
}
.footer-email-phone ul li {
display: inline-block;
}
.footer-email-phone ul li a {
font-family: Arial, Helvetica, sans-serif;
color: #333;
font-weight: 600;
text-transform: uppercase;
font-size: 13px;
padding-left: 20px;
}
.footer-email-phone ul li a i {
color: #ff6a00;
padding-right: 5px;
}
.footer-email-phone ul li a:hover {
color: #ff6a00;
}
.footer-email-phone ul li a:hover i {
color: #333;
}
.footer-social-icons {
width: 100%;
height: auto;
margin: auto;
margin-top: 5px;
}
.footer-social-icons ul {
margin: 0px;
padding: 0px;
text-align: center;
}
.footer-social-icons ul li {
display: inline-block;
width: 30px;
height: 30px;
background: #fff;
margin-right: 10px;
-webkit-box-shadow: 0px 0px 5px 0px rgba(255,106,0,1);
-moz-box-shadow: 0px 0px 5px 0px rgba(255,106,0,1);
box-shadow: 0px 0px 5px 0px rgba(255,106,0,1);
text-align: center;
margin-top: 12px;
}
.footer-social-icons ul li a {
font-size: 15px;
color: #ff6a00;
line-height: 30px;
display: block;
}
.footer-social-icons ul li:nth-child(1):hover {
background: #3b5999;
}
.footer-social-icons ul li:nth-child(2):hover {
background: #55acee;
}
.footer-social-icons ul li:nth-child(3):hover {
background: #dd4b39;
}
.footer-social-icons ul li:nth-child(4):hover {
background: #cd201f;
}
.footer-social-icons ul li:nth-child(5):hover {
background: #0077b5;
}
.footer-social-icons ul li:nth-child(1):hover a{
color: #fff;
}
.footer-social-icons ul li:nth-child(2):hover a{
color: #fff;
}
.footer-social-icons ul li:nth-child(3):hover a{
color: #fff;
}
.footer-social-icons ul li:nth-child(4):hover a{
color: #fff;
}
.footer-social-icons ul li:nth-child(5):hover a{
color: #fff;
}
.footer-menu {
width: 100%;
height: auto;
margin: auto;
margin-top: 10px;
}
.footer-menu ul {
margin: 0px;
padding: 0px;
text-align: center;
}
.footer-menu ul li {
display: inline-block;
}
.footer-menu ul li a {
font-family: Arial, Helvetica, sans-serif;
color: #fff;
text-align: left;
font-weight: 600;
text-transform: uppercase;
font-size: 14px;
}
.footer-menu ul li:after {
content: "|";
font-family: 'FontAwesome';
color: #fff;
margin-left: 8px;
margin-right: 8px;
}
.footer-menu ul li:nth-child(3):after {
content: "";
}
.footer-menu ul li a:hover {
color: #ff6a00;
}
.footer-strip {
width: 100%;
height: auto;
margin: auto;
border-top: 2px solid #fff;
margin-top: 5px;
}
.footer-text {
width: 100%;
height: auto;
margin: auto;
margin-top: 5px;
}
.footer-text p {
font-family: Arial, Helvetica, sans-serif;
color: #fff;
text-align: center;
font-weight: 400;
text-transform: uppercase;
font-size: 13px;
}
.footer-text p a {
font-family: Arial, Helvetica, sans-serif;
color: #fff;
font-weight: 400;
text-transform: uppercase;
font-size: 13px;
}
.footer-text p a:hover {
color: #ff6a00;
}
[enter image description here][1]
all the html you need for your footer include is:
<div class="main-footer">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="footer-bg">
<div class="footer-address">
<h1>Learn Classical Music at <span>PianoCourse101</span></h1>
<h2>Location: Australia, Melbourne</h2>
</div>
<div class="footer-email-phone">
<ul>
<li><i class="fa fa-phone"></i>+123-456-7890</li>
<li><i class="fa fa-envelope"></i>info#pianocourse101.com</li>
</ul>
</div>
<div class="footer-social-icons">
<ul>
<li><i class="fab fa-facebook"></i></li>
<li><i class="fab fa-twitter"></i></li>
<li><i class="fab fa-google-plus"></i></li>
<li><i class="fab fa-youtube"></i></li>
<li><i class="fab fa-linkedin"></i></li>
</ul>
</div>
</div>
</div>
<div class="col-md-12">
<div class="footer-menu">
<ul>
<li>Home</li>
<li>More Information</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</div>
</div>
<div class="footer-strip">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="footer-text">
<p>2018 # All Rights</p>
</div>
</div>
</div>
</div>
</div>
I have a menubar in the top left corner, but the hover and the active element does not cover the whole text. I'm very new to this, and the page is not done, so no need to point out how bad it looks haha. The whole page is in norwegian, so it can be a little confusing. It is supposed to be a type of movie register, and I know its probably alot of mistakes in my code, but the problem I'm trying to figure out right now is the hover and active:)
Here is my html:
<!--MENUBAR-->
<div id="nav">
<ul class="first">
<li><a class="active" href="startside.html">Startside</a>
</li>
<li>Mine lån
</li>
<li>Min liste
</li>
</ul>
</div>
</header>
<!-- LOGIN -->
<form>
<span class='login'>
<label for="E-postadresse">E-postadresse</label>
<input name="E-postadresse" placeholder="E-postadresse" id="E-postadresse" />
<label for="Passord">Passord</label>
<input type="password" placeholder="Passord" id="Passord" />
<input type="submit" value="Logg inn" />
</span>
</form>
</body>
</html>
<!-- end snippet -->
And css:
/*MENUBAR*/
#nav {
background-color: #999999;
position: absolute;
top:0px;
padding-left: 85px;
height: 50px;
overflow: hidden;
margin-top: -5px;
left: -90px;
}
ul {
list-style-type: none;
margin: 0;
font-size: 0;
padding: 5px;
overflow: hidden;
font-family: Arial, Helvetica, sans-serif;
background-color: #808080;
}
.first li {
display: inline-block;
}
li a {
display:block;
text-decoration: none;
text-align: center;
padding: 15px 20px;
color: white;
cursor:pointer;
font-size: 16px;
}
li a:hover {
background-color:#333333;
}
.active {
background-color:#333333;
}
/* LOG IN*/
form {
float:right;
font-family: Arial, Helvetica, sans-serif;
}
.login {
position: absolute;
top: 10px;
right: 25px;
font-size: 50%;
display: inline-block;
}
input{
font-size: 90%;
}
You should delete space between li elements like this
<ul class="first">
<li><a class="active" href="startside.html">Startside</a>
</li><li>Mine lån
</li><li>Min liste</li>
</ul>
it's something like bug with space between li elements and also div if they are typed on new line.(I am sorry if explained something wrongly).
html
/*FLEXBOX*/
{
font-family: "Arsenal", "Times New Roman";
}
body {
background: #333333;
margin: 0;
}
header {
display: flex;
justify-content: center;
align-items: center;
background: #999999;
height: 50px;
padding-right: 100px;
}
/*SISTE LÅNTE*/
main {
display: flex;
justify-content: space-around;
align-items: center;
}
.main {
background: #999999;
flex-grow: 1;
order: 2;
color: white;
font-family: Arial, Helvetica, sans-serif;
}
.main h5 {
padding-left: 10px;
}
/*TILGJENGELIGE FILMER*/
.left {
background: #999999;
flex-grow: 1;
order: 1;
margin: 20px;
color: white;
font-family: Arial, Helvetica, sans-serif;
}
.left h5 {
padding-left: 10px;
}
/*ANBEFALINGER*/
.right {
background: #999999;
flex-grow: 1;
order: 3;
margin: 20px;
color: white;
font-family: Arial, Helvetica, sans-serif;
}
.left,
.right,
.main {
margin: 20px 20px;
border-style: solid;
border-color: black;
border-width: 5px 5px 5px 5px;
}
.right h5 {
padding-left: 10px;
}
/*RUTINER*/
footer {
background: #999999;
display: flex;
justify-content: flex-start;
align-items: flex-start;
height: 155px;
margin: 20px;
margin-top: 0px;
padding: 10px;
color: white;
border-style: solid;
border-color: black;
border-width: 5px 5px 5px 5px;
}
/*MENUBAR*/
#nav {
background-color: #999999;
position: absolute;
top: 0px;
padding-left: 85px;
height: 50px;
overflow: hidden;
margin-top: -5px;
left: -90px;
}
ul {
list-style-type: none;
margin: 0;
padding: 5px;
overflow: hidden;
font-family: Arial, Helvetica, sans-serif;
background-color: #999999;
}
.first li {
display: inline-block;
}
li a {
display: inline-block;
text-decoration: none;
text-align: center;
padding: 15px 20px;
color: white;
cursor: pointer;
}
li a:hover {
background-color: #ddd;
}
li a:active {
background-color: #ccc;
}
/* LOG IN*/
form {
float: right;
font-family: Arial, Helvetica, sans-serif;
}
.login {
position: absolute;
top: 10px;
right: 25px;
font-size: 50%;
display: inline-block;
}
input {
font-size: 90%;
}
/*ALLE FILMER*/
.movie1 {
display: flex;
}
.movie1 img {
padding: 10px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Arsenal" rel="stylesheet">
<link rel="stylesheet" href="Startside.css" type="text/css">
<title>Filmregister</title>
</head>
<body>
<header>
<h2>Filmregister</h2>
<!--MENUBAR-->
<div id="nav">
<ul class="first">
<li><a class="active" href="startside.html">Startside</a>
</li>
<li>Mine lån
</li>
<li>Min liste
</li>
</ul>
</div>
</header>
<!--SISTE LÅNTE-->
<main>
<div class="main">
<h5>Siste lånte</h5>
<div class="movies">
<div class="movie1">
<a href="file:///C:/Users/kodde/Desktop/Webpage%20ver2/Valkyrie.html">
<img src="valkyrie1.jpg" width="100" height="140" alt="Valkyrie">
</a>
<small>
<br>
Utgitt: 2008
<br>
Bryan Singer
<br>
Krig
<br>
Film(dvd-video)
</small>
</div>
<div class="movie1">
<a href="file:///C:/Users/kodde/Desktop/Webpage%20ver2/MinorityReport.html">
<img src="MinorityReport3.jpg" width="100" height="140" alt="MinorityReport">
</a>
<small>
<br>
Utgitt: 2002
<br>
Steven Spielberg
<br>
Sci-fi
<br>
Film(dvd-video)
</small>
</div>
</div>
</div>
<!--TILGJENGELIGE FILMER-->
<div class="left">
<h5>Tilgjengelige filmer</h5>
<div class="movies">
<div class="movie1">
<a href="file:///C:/Users/kodde/Desktop/Webpage%20ver2/The-Intouchables.html">
<img src="TheIntouchables3.jpg" width="100" height="140" alt="The-Intouchables">
</a>
<small>
<br>
Utgitt: 2011
<br>
Olivier Nakache / Eric Toledano
<br>
Drama, biografi, komedie
<br>
Film(dvd-video)
</small>
</div>
<div class="movie1">
<a href="file:///C:/Users/kodde/Desktop/Webpage%20ver2/The-Lunchbox.html?E-postadresse=">
<img src="TheLunchbox1.jpg" width="100" height="140" alt="The-Lunchbox">
</a>
<small>
<br>
Utgitt: 2013
<br>
Ritesh Batra
<br>
Romanse, komedie
<br>
Film(dvd-video)
</small>
</div>
</div>
</div>
<!--ANBEFALINGER-->
<div class="right">
<h5>Anbefalinger</h5>
<div class="movies">
<div class="movie1">
<a href="file:///C:/Users/kodde/Desktop/Webpage%20ver2/The-Intouchables.html">
<img src="TheIntouchables3.jpg" width="100" height="140" alt="The-Intouchables">
</a>
<small>
<br>
Utgitt: 2011
<br>
Olivier Nakache / Eric Toledano
<br>
Drama, biografi, komedie
<br>
Film(dvd-video)
</small>
</div>
<div class="movie1">
<a href="file:///C:/Users/kodde/Desktop/Webpage%20ver2/Valkyrie.html">
<img src="valkyrie1.jpg" width="100" height="140" alt="Valkyrie">
</a>
<small>
<br>
Utgitt: 2008
<br>
Bryan Singer
<br>
Krig
<br>
Film(dvd-video)
</small>
</div>
</div>
</div>
</main>
<!--RUTINER-->
<footer>
<strong>Rutiner</strong>
<ul id="rutiner">
<br>
<li> <small> 1. Følgende kan låne: staben ved Institutt for informasjons- og medievitenskap, studenter ved instituttet, på grunnlag av faglig begrunnelse, andre ved UiB etter særlig avtale for et avgrenset tidsrom eller for et avgrenset prosjekt.</small>
</li>
<li> <small> 2. Bestillinger vil bli effektuert hver arbeidsdag mellom klokken 14:00 og 15:00.</small>
</li>
<li><small> 3. Ansatte ved instituttet får filmen lagt i posthyllen, studenter og andre får tilbakemelding om hvor og når filmen kan hentes.</small>
</li>
<li> <small> 4. For alt utlån gjelder en generell regel om lånetid på 1 uke, som kan forlenges med ytterligere en uke. Ønskes en film lånt over en lengre periode må dette begrunnes, og hver enkelt forespørsel vil bli vurdert. </small>
</li>
<li> <small> 5. Film skal leveres tilbake i posthyllen merket retur av film.</small>
</li>
</ul>
</footer>
<!-- LOGIN -->
<form>
<span class='login'>
<label for="E-postadresse">E-postadresse</label>
<input name="E-postadresse" placeholder="E-postadresse" id="E-postadresse" />
<label for="Passord">Passord</label>
<input type="password" placeholder="Passord" id="Passord" />
<input type="submit" value="Logg inn" />
</span>
</form>
</body>
</html>
Adding a width and a height property to the anchor element should fix it:
li a { width: auto; height: auto; }
Hover effect:
li a:hover { color: #999; }
Note: the active effect is triggered whenever you click on the element. So, it won't produce any effect after the page has been reloaded.
Here’s my HTML and CSS for an exercise, I do not understand why my border in the section is wrapping all the content. I would like to have two independent wrapped sections: "intro" and "main".
https://jsfiddle.net/fhd9eLnq/
#font-face {
font-family: myFont src: url(BebasNeue-webfont.woff);
}
body {
font-family: myFont;
width: 90%;
margin: auto;
}
h1,
h2 {
display: inline;
color: #016008;
}
h1 {
font-size: 60px;
}
h2 {
font-size: 40px;
}
li {
display: inline;
}
li a {
text-align: center;
text-decoration: none;
}
img {
position: relative top: 0px;
right: 20px;
float: left;
margin: 5px;
border: 1px solid grey;
}
.intro {
float: right;
}
.primarynav {
list-style-type: none;
color: #016008;
text-align: right;
}
.secondnav {
display: block;
text-align: inherit;
}
.main {
padding: 10px;
border: 1px solid grey;
}
.intro {
border: 1px solid grey;
margin: 15px;
}
.news1 {
width: 60%;
background-color: #dddddd;
margin: 15px;
}
section {} footer {
background-color: #dddddd;
}
fieldset {
background-color: white;
}
mark {
color: black;
background: none;
font-weight: bold;
}
.latestnews {
background-color: #dddddd;
position: relative;
left: 790px;
bottom: 365px;
width: 33%;
padding: 5px;
}
.suscribe {
background-color: #dddddd;
position: relative;
left: 790px;
bottom: 350px;
width: 33%;
padding: 5px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Welcome to BootsWorld</title>
<link rel="stylesheet" type="text/css" href="boots.css" />
</head>
<body>
<header>
<nav>
<div class="logo">
<h1>BOOT</h1>
<h2>WORLD</h2>
</div>
<ul class="primarynav">
<li>Site map
</li>
<li>Privacy policy
</li>
<li>Accessibility
</li>
</ul>
<ul class="secondarynav">
<li>HOME
</li>
<li>SHOP
</li>
<li>NEWS
</li>
<li>ABOUT US
</li>
<li>CONTACT US
</li>
<li>SUBSCRIBE
</li>
</ul>
</nav>
</header>
<article class="intro">
<header>
<img src="boots.png" alt="boots image" />
<h2>Welcome to boot world</h2>
</header>
<p>BootWorld is the largest online footwear retailer in the UK.Our shop always has stock of the latest designer footwear at the most competitive prices. Want to know more about us or our products, why not send us a message.
</p>
</article>
<section class="main">
<article class="news">
<header>
<h2>NEW IN THE SHOP</h2>
</header>
<div class="news1">
<h3>CLASSIC COWBOY BOOTS</h3>
<p>Stand out from the crowd in a pair of classic cowboy boots. Available for Ladies and Gents from only
<mark class="black">£49.99</mark>
</p>
<h3>MILITARY BOOTS</h3>
<p>Hard-wearing Men's military boots, guaranteed to withstand all weathers. From only
<mark class="black">£69.99</mark>
</p>
<h3>ROMAN SANDALS</h3>
<p>Get ready for summer with some stylish roman sandals. From only
<mark class="black">£39.99</mark>
</p>
<h3>OFFICE SHOES</h3>
<p>You don't have to wear boring shoes to the office. Check out our new stock of Ladies and Gents fashionable office shoes from only
<mark class="black">£44.99</mark>
</p>
</div>
</article>
<aside class="latestnews">
<h3>Latest News</h3>
<p>Our seasonal sale has kicked off again! make sure you stop by our online shop to pick up a bargain.</p>
<footer>Posted by: Joe</footer>
</aside>
<aside class="suscribe">
<h3>Subscribe</h3>
<p>Sign up to our newsletter and receive exclusive offers by email weekly.</p>
<form>
<fieldset>
<legend>SIGN UP NOW!</legend>
<p>
<label for="yourname">Your name</label>
<br/>
<input type="text" name="yourname" id="yourname" size="20" />
</p>
<p>
<label for="emailaddress">email address</label>
<br/>
<input type="text" name="emailaddress" id="emailaddress" size="20" />
</p>
<button onclick="myFunction()">Sign Up</button>
</fieldset>
</form>
</aside>
</section>
<footer class="pagefooter">
<h3>OUR ADDRESS:</h3>
<p>Malet Street,
<br/>London, WC1E 7HX</p>
</footer>
</body>
</html>
Because you float the image and intro and never clear them. Add a clear to your .main CSS rule:
.main {
padding: 10px;
border: 1px solid grey;
clear: both;
}
jsFiddle example
I notice you open your main class on line 40 <section class="main"> however you never close it. When I close it I am able to put a border around the separate classes. I also was able to use your CSS:
.main {
padding: 10px;
border: 2px solid grey;
}
to convert over to news1 and was able to wrap it without issue. If you could explain further I can try to help further.