i am trying to make a html + css website, i tried to make a right float for a span (which have the class .float ) but it's breaking a line, i want to know how can i prevent it from breaking a line? i tried display:inline-block but no addition, full code:
<html>
<head>
<title> Web page </title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet">
</head>
<body>
<!-- Navbar -->
<nav>
Acceuil <span> | </span>
Types d'appareils <span> | </span>
Ordinateurs <span> | </span>
Telephones <span> | </span>
O.S <span> | </span>
Etudes
</nav>
<!-- End of Navbar -->
<div class="header">
<br> <br>
<span class="pad"> Soufferez vous </span> <br> <br>
<span class="pad"> De l'utlisation </span>
<span class="not"> exagirée </span><span class="notn">de l'internet? </span>
<br> <br> <br> <br>
<img src="hey2.png">
<span class="float"> Hey </span>
</div>
</body>
</html>
css code :
body{
margin: 0;
padding: 0;
font-family: 'Raleway', sans-serif;
}
nav{
background-color: purple;
height: 55px;
padding-top: 25px;
padding-right: 20px;
border-bottom: 5px solid gray
}
nav a{
display: inline-block; /*added*/
text-decoration: none;
color:white;
font-size: 20px;
margin-left: 10px
}
nav span{
color: white;
font-size: 15px
}
.fa{
float: right;
}
.header{
background-color: purple;
height: 600px
}
h1{
padding: 0;
margin: 0
}
.header h2,h1{
display: inline-block;
color: white;
font-family: 'Raleway', sans-serif;
margin-left: 20px
}
.pad{
color: wheat;
padding-left: 15px;
font-size: 40px
}
.not{
color: red;
padding: 0;
font-size: 40px
}
.notn{
color: wheat;
font-size: 40px
}
.header img{
height: 300px
}
.float{
float: right
}
.header span{
display: inline
}
codepen.io:
https://codepen.io/badis-kerdellou/pen/NWWVpLV
I'm not sure if I'm so dumb I didn't even got the problem, but obviusly <br> breaks the line, just put the <span class="float"> Hey </span> before the <br>, like this:
<div class="header">
<br> <br>
<span class="pad"> Soufferez vous </span> <br> <br>
<span class="pad"> De l'utlisation </span>
<span class="not"> exagirée </span><span class="notn">de l'internet? </span>
<span class="float"> Hey </span> <!--Just moved it above the <br>-->
<br> <br> <br> <br>
<img src="hey2.png">
Related
I am debutant at html and css. I just wanted to create my first website using html and css but in the navbar I found that I cant make <a> and fa icons in the same line, is there any solution please?
here is the code:
body{
margin: 0;
padding: 0
}
nav{
background-color: purple;
height: 55px;
padding-top: 25px;
}
nav a{
text-decoration: none;
color:white;
margin-top:30px;
font-size: 20px;
margin-left: 10px
}
nav span{
color: white;
font-size: 15px
}
.fa{
float: right;
display: inline
}
<html>
<head>
<title> Web page </title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<!-- Navbar -->
<nav>
Acceuil <span> | </span>
Types d'appareils <span> | </span>
Ordinateurs <span> | </span>
Telephones <span> | </span>
O.S <span> | </span>
Etudes
</nav><!-- End of Navbar -->
</body>
</html>
codepen:
https://codepen.io/badis-kerdellou/pen/KKKYELJ
Thanks in advance
Remove float: right from .fa and add display: inline !important;.
You could also apply padding-left if required. Please see snippet below:
body{
margin: 0;
padding: 0
}
nav{
background-color: purple;
height: 55px;
padding-top: 25px;
}
nav a{
text-decoration: none;
color:white;
margin-top:30px;
font-size: 20px;
margin-left: 10px;
}
nav span{
color: white;
font-size: 15px;
}
.fa{
/* updated here */
display: inline !important;
}
<html>
<head>
<title> Web page </title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<!-- Navbar -->
<nav>
Acceuil <span> | </span>
Types d'appareils <span> | </span>
Ordinateurs <span> | </span>
Telephones <span> | </span>
O.S <span> | </span>
Etudes
</nav><!-- End of Navbar -->
</body>
</html>
************************ SOLVED ************************
Here is your updated code.
body{
margin: 0;
padding: 0
}
nav{
background-color: purple;
height: 55px;
padding-top: 25px;
}
nav a{
display: inline-block; /*added*/
text-decoration: none;
color:white;
font-size: 20px;
margin-left: 10px
/*margin-top:30px;*/
}
nav span{
color: white;
font-size: 15px
}
.fa{
float: right;
}
<html>
<head>
<title> Web page </title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<!-- Navbar -->
<nav>
Acceuil <span> | </span>
Types d'appareils <span> | </span>
Ordinateurs <span> | </span>
Telephones <span> | </span>
O.S <span> | </span>
Etudes
</nav><!-- End of Navbar -->
</body>
</html>
HTML below: (but JSfiddle had both HTML and CSS)
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="top1">
<div class="top1-left">
Welcome, Guest
Login
Sign up
</div>
<div class="top1-right">
Stay Updated
Subscribe via RSS
Email Updates
</div>
</div>
<div class="top2">
<div class="top2-text">
<span style="font-size:40px;">My Blog</span>
<span style="font-size:20px; margin-left: 40px;"> Description of My Blog</span>
</div>
</div>
<div class="top3">
<div class="top3-text">
<span style="font-size:20px; margin-right: 40px;">HOME</span>
<span style="font-size:20px; margin-right: 40px;">ABOUT</span>
<span style="font-size:20px; margin-right: 40px;">BLOG</span>
<span style="font-size:20px; margin-right: 40px;">CONTACT</span>
</div>
</div>
</body>
</html>
https://jsfiddle.net/fsf90593/
My question is why the text in the "top3" div not floating to the left just like the other divs? I pretty much have the same css and html code for that div. Probably a simple answer but I am pretty new to the html css world, please help.
Try to add clear: both; on div.top3-text
CSS:
div.top3-text {
float: left;
line-height: 70px;
padding-left: 60px;
clear: both;
}
It will clear top3-text after top2-text and allow it to appear below the top2-text
Try this: Just adding a div with a class 'clear' and style that class with 'clear: both'
div.top1{
background-color: darkgreen;
height: 40px;
}
div.top1-left{
float: left;
padding: 10px 0px 5px 60px;
color: white;
}
div.top1-right{
float: right;
padding: 10px 30px 5px 0px;
color: white;
}
div.top2{
background-color: #247424;
height: 150px;
}
div.top2-text{
float: left;
color: white;
padding-left: 60px;
line-height: 150px;
}
div.top3{
height: 70px;
background-color: #81EE81;
}
div.top3-text{
float: left;
line-height: 70px;
padding-left: 60px;
}
a{
color: #82B62E
}
.clear{
clear: both;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="top1">
<div class="top1-left">
Welcome, Guest
Login
Sign up
</div>
<div class="top1-right">
Stay Updated
Subscribe via RSS
Email Updates
</div>
</div>
<div class="top2">
<div class="top2-text">
<span style="font-size:40px;">My Blog</span>
<span style="font-size:20px; margin-left: 40px;"> Description of My Blog</span>
</div>
</div>
<div class="clear"></div>
<div class="top3">
<div class="top3-text">
<span style="font-size:20px; margin-right: 40px;">HOME</span>
<span style="font-size:20px; margin-right: 40px;">ABOUT</span>
<span style="font-size:20px; margin-right: 40px;">BLOG</span>
<span style="font-size:20px; margin-right: 40px;">CONTACT</span>
</div>
</div>
</body>
</html>
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.
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.
I'm learning CSS with The Odin Project and I made a mockup of the Google.com homepage. Everything looked perfect until I resized the browser window and the elements move out of place.
I've been trying out many different methods on how to keep the divs (Google logo, search bar, and buttons) centered when the page is resized.
#header {
position: absolute;
top: 50%;
left: 50%;
margin-left: -150px;
margin-top: -125px;
width: 300px;
padding: 10px;
}
#topbar {
font-family: arial, sans-serif;
}
.centered {
width: 960px
}
.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 0.15rem;
background-color: #f2f2f2;
font-family: arial, sans-serif;
font-size: 15px;
color: #666;
}
.alignleft {
float: left;
}
.alignright {
float: right;
}
p {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #7D7676;
}
<title>Google</title>
<link rel="stylesheet" type="text/css" href="google-homepage-css.css">
<!-- Top bar -->
<body>
<div id="topbar">
<p align="right">Gmail Images
<img style="vertical-align:middle" src="http://i.imgur.com/xmMdSIp.png"> </p>
</div>
<br>
<!-- Google Center Image -->
<div id="centered">
<div id="logo">
<img id="header" src="http://i.imgur.com/hs6n5hR.png" width="400">
</div>
</div>
<!-- Search Bar and Buttons -->
<div id="search">
<form id="searchbar" width="500">
<br>
<input type="text">
<br>
</form>
<br>
<button type="button" id="firstbutton">Google Search</button>
<button type="button" id="secondbutton">I'm Feeling Lucky</button>
</div>
<!-- Footer -->
<div class="footer">
<p class="alignleft"> Advertising
<p class="alignleft">Business
<p class="alignleft">About
</p>
<p class="alignright">Privacy
Terms
Settings
</p>
</div>
jsFiddle
I feel it should be something like this but I'm not sure:
div {
position: relative
margin-left:auto;
margin-right:auto;
}
Note: I'll work on resizing and adding colors to the search bar and buttons after, my biggest concern in finding how to keep the search bar and buttons centered under the Google logo when the browser page is re-sized.
<div> is a block element and by default it takes 100% width of its parent.
If you try to center it using margin: 0 auto, then you won't get the expected result. You have to set width in order the margin to be applied.
See an example below:
.parent{
width: 400px;
height: 100px;
border: 1px solid blue;
}
.item{
width: 100px;
margin: 0 auto;
border: 1px solid green;
}
<div class="parent">
<div class="item">
<span>some text</span>
</div>
</div>
You can add the property text-align: center to your <div> ancestor with an id of #search.
#search{ text-align: center; }
This will center the <input> and <button> elements because they retain their inline characteristics.
#header {
position: absolute;
top: 50%;
left: 50%;
margin-left: -150px;
margin-top: -125px;
width: 300px;
padding: 10px;
}
#topbar {
font-family: arial, sans-serif;
}
#search {
text-align: center;
}
.centered {
width: 960px
}
.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 0.15rem;
background-color: #f2f2f2;
font-family: arial, sans-serif;
font-size: 15px;
color: #666;
}
.alignleft {
float: left;
}
.alignright {
float: right;
}
p {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #7D7676;
}
<title>Google</title>
<link rel="stylesheet" type="text/css" href="google-homepage-css.css">
<!-- Top bar -->
<body>
<div id="topbar">
<p align="right">Gmail Images
<img style="vertical-align:middle" src="http://i.imgur.com/xmMdSIp.png"> </p>
</div>
<br>
<!-- Google Center Image -->
<div id="centered">
<div id="logo">
<img id="header" src="http://i.imgur.com/hs6n5hR.png" width="400">
</div>
</div>
<!-- Search Bar and Buttons -->
<div id="search">
<form id="searchbar" width="500">
<br>
<input type="text">
<br>
</form>
<br>
<button type="button" id="firstbutton">Google Search</button>
<button type="button" id="secondbutton">I'm Feeling Lucky</button>
</div>
<!-- Footer -->
<div class="footer">
<p class="alignleft"> Advertising
<p class="alignleft">Business
<p class="alignleft">About
</p>
<p class="alignright">Privacy
Terms
Settings
</p>
</div>
Revised jsFiddle