My HTML page has a header, navigation bar, body content element and a footer element however the footer element is overlapping with the div element bodycontent when it should be below the bodycontent element and at the bottom of the page. Please suggest any changes in positioning to resolve this.
.header {
padding: 10px;
width: 100%;
text-align: center;
background-color: #F2F2F2;
color: #424242;
}
body {
margin: 0px;
padding: 0px;
height: 100%;
font: 300 100% 'Helvetica Neue', Helvetica, Arial;
}
.footer {
clear: both;
position: inherit;
bottom: 0;
left: 0;
text-align: center;
width: 100%;
height: 20px;
background-color: #808080;
color:#fff;
}
.prodheading {
width: 100%;
height: 20px;
background-color: #808080;
color: #fff;
text-align: center;
vertical-align: middle;
}
ul.nav_bar{
position: absolute;
height: 50px;
top: 50%; left: 50%;
margin-top: -25px; margin-left: -200px;
padding: 0px;
list-style: none;
text-align: center;
}
.bodycontent{
position:relative;
top:45px;
bottom:30px
padding:15px;
}
My home HTML page -
<html>
<head>
<style><%#include file="/css/mystyle.css"%></style>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>My Webpage</title>
</head>
<body>
<%# include file="header.jsp" %>
<div class="bodycontent">
<h3>Our Mission</h3>
<p>Hello World !!!</p>
<h3></h3>
<p>Trying out webpage</p>
</div>
<%# include file="footer.jsp" %>
</body>
</html>
The header html element -
<html>
<head>
<style><%#include file="/css/mystyle.css"%></style>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<center>
<h3>Title 1</h3>
<h5>Title 2</h5>
</center>
<ul class="nav_bar">
<li class="navit"><a class="link">Home</a></li>
<li class="navit"><a class="link" >Items</a></li>
<li class="navit"><a class="link" >About Us</a></li>
<li class="navit"><a class="link" >Contact</a></li>
</ul>
</body>
</html>
The footer html element
<html>
<head>
<style><%#include file="/css/mystyle.css"%></style>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<center>All rights reserved 2018</center>
</body>
</html>
You need to add CSS code like this:
.header {
display: inline-block;
padding: 10px;
width: 100%;
text-align: center;
background-color: #F2F2F2;
color: #424242;
}
body {
margin: 0px;
padding: 0px;
height: 100%;
font: 300 100% 'Helvetica Neue', Helvetica, Arial;
}
.footer {
display: inline-block;
width: 100%;;
text-align: center;
width: 100%;
height: 20px;
background-color: #808080;
color:#fff;
}
.prodheading {
display: inline-block;
width: 100%;
height: 20px;
background-color: #808080;
color: #fff;
text-align: center;
vertical-align: middle;
}
ul.nav_bar{
position: absolute;
height: 50px;
top: 50%; left: 50%;
margin-top: -25px; margin-left: -200px;
padding: 0px;
list-style: none;
text-align: center;
}
.bodycontent{
display: inline-block;
width: 100%;
padding:15px;
}
Now, You can add CSS for main menu design in ul.nav_bar as per your requirements.
Related
My link which would go to the home page is on the Egypt coat of arms. But the link is only clickable on the nav bar. How do I fix it? The first block is HTML and the second is CSS.-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
html
css
(HTML)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="coatofarms"> <img src="coabetter.png" class="coa" width="75px"></div>
<div class="topnav">
News
Contact
About
</div>
<button type="button"class="buttonbook" >BOOK</button>
<div style="padding-left:16px">
<h2></h2>
<p></p>
</div>
</body>
</html>
(CSS)
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
background-image: url("goodyegypt.png")
}
.coatofarms {
margin-top: -16px;
margin-left: 5px;
width: 5%;
}
.topnav {
overflow: hidden;
background-color: #e1bc85;
margin-top: -151px;
}
.topnav a {
float: left;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 20px;
margin-left: 10%;
font-family: Bodoni Mt;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #04AA6D;
color: white;
}
.buttonbook {
background-color: #e9cda4;
border-radius: 50%;
width: 250px;
height: 100px;
border: none;
opacity: 0.7;
font-family: Algerian;
font-size: 30px;
margin-top: 35%;
margin-left: 43%;
align: center;
}
.buttonbook:hover {
background-color: #e1c295;
opacity: 0.7;
}
The use of margin-top as the only layout mechanism is what is causing you problems. In this fiddle I instead absolutely placed your button.buttonbook element.
https://jsfiddle.net/cwzp5dya/2/
.buttonbook {
position: absolute;
top: 55%;
left: 43%;
Highly recommend NOT using margin as your primary layout method.
I'm making a website for school, but i have a problem with my css code. I want to place the section1 and the section2 underneath the header so that it looks like that :
WANTED
The problem is that it looks like that (the problem is this enormous gap on the left) :
REALITY
I know that the problem comes from the float on the header and nav bar but i don't know how to keep the header look and having the two boxes ("section1" and "section2", grouped as "content").
The CSS code :
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
body {
color: black;
background-color: white;
font-size: 16px;
text-align:justify;
text-justify:inter-word;
}
.header {
width: 100%;
height: 80px;
display: block;
background-color: #101010;
}
.header_nav {
width: 65%;
height: 100%;
display: block;
margin: 0 auto;
}
.logo {
height: 100%;
display: table;
float: left;
}
.logo h1 {
color: white;
height: 100%;
display: table-cell;
vertical-align: middle;
font-family: "Trebuchet MS";
font-size: 32px;
font-weight: 600;
}
.nav {
float: right;
height: 50%;
line-height: 70px;
}
.nav ul li {
display: inline-block;
vertical-align: middle;
line-height: normal
}
.nav-option {
height: 100%;
display: table;
float: left;
padding: 0px 20px;
display: table-cell;
vertical-align: middle;
height: 100%;
color: white;
font-family: "Trebuchet MS";
font-size: 20px;
font-weight: 50;
}
.nav-option:hover {
text-decoration: underline;
}
.content {
overflow: hidden;
}
.section1 {
background-color: red;
width: 40%;
height: 300px;
margin: 1%;
float: left;
border: inset #101010 6px ;
}
.section2 {
background-color: blue;
width: 40%;
height: 300px;
float: right;
margin: 1%;
border-left: solid #101010 10px;
}
.section2:hover {
transform: scale(1.05);
}
The HTML code :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Histoire de l'Informatique</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="header">
<div class="header_nav">
<div class="logo">
<img src="logo.png">
<h1> HISTOIRE DE L'INFORMATIQUE </h1>
</div>
<div class="nav">
<nav>
<ul>
<li>Données</li>
<li>Algorithmes</li>
<li>Langages</li>
<li>Machines</li>
</ul>
</nav>
</div>
</div>
</<div>
<div class= "content">
<section class="section1">
<h1>Données</h1>
<article>
</article>
</section>
<section class="section2">
<h1>Algorithmes</h1>
<article>
</article>
</section>
</div>
<script src="script.js"></script>
</body>
</html>
Thanks for your help !
Your example seems to work for me provided .container has a width: 100% on it.
But for what you want exactly, I would use the following:
.container {
display: flex;
align-items: center;
justify-content: space-evenly; // google all the different options for this
}
// Get rid of the `float` properties on the sections, you won't need them
Below, is your original code in a snippet, and with that width property it's working for me.
But I highly recommend switching to flex box over floats, as it will give you way more control and better results.
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
body {
color: black;
background-color: white;
font-size: 16px;
text-align:justify;
text-justify:inter-word;
}
.header {
width: 100%;
height: 80px;
display: block;
background-color: #101010;
}
.header_nav {
width: 65%;
height: 100%;
display: block;
margin: 0 auto;
}
.logo {
height: 100%;
display: table;
float: left;
}
.logo h1 {
color: white;
height: 100%;
display: table-cell;
vertical-align: middle;
font-family: "Trebuchet MS";
font-size: 32px;
font-weight: 600;
}
.nav {
float: right;
height: 50%;
line-height: 70px;
}
.nav ul li {
display: inline-block;
vertical-align: middle;
line-height: normal
}
.nav-option {
height: 100%;
display: table;
float: left;
padding: 0px 20px;
display: table-cell;
vertical-align: middle;
height: 100%;
color: white;
font-family: "Trebuchet MS";
font-size: 20px;
font-weight: 50;
}
.nav-option:hover {
text-decoration: underline;
}
.content {
width: 100%;
overflow: hidden;
}
.section1 {
background-color: red;
width: 40%;
height: 300px;
margin: 1%;
float: left;
border: inset #101010 6px ;
}
.section2 {
background-color: blue;
width: 40%;
height: 300px;
float: right;
margin: 1%;
border-left: solid #101010 10px;
}
.section2:hover {
transform: scale(1.05);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Histoire de l'Informatique</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="header">
<div class="header_nav">
<div class="logo">
<img src="logo.png">
<h1> HISTOIRE DE L'INFORMATIQUE </h1>
</div>
<div class="nav">
<nav>
<ul>
<li>Données</li>
<li>Algorithmes</li>
<li>Langages</li>
<li>Machines</li>
</ul>
</nav>
</div>
</div>
</div>
<div class= "content">
<section class="section1">
<h1>Données</h1>
<article>
</article>
</section>
<section class="section2">
<h1>Algorithmes</h1>
<article>
</article>
</section>
</div>
<script src="script.js"></script>
</body>
</html>
I need some help with my messy code (excuse me for having lot of text in my native language). I need to fit the IFRAME in between head and footer of the site, so it will look the same on every monitor (resolution).
Thanks!
body {
margin: 0;
background-image: linear-gradient(to right, #292c33, #a0b2d0, #dee9f6, #a0b2d0, #292c33);
}
p{
color: #272727;
text-align: left;
display: block;
font-family: 'Montserrat', sans-serif;
padding-left: 14px;
font-size: 12px;
text-decoration: none;
// nadefinování písma na stránce
}
.nav{
background-color: #eaeaea;
overflow: hidden;
}
.nav a{
float: left;
display: block;
color: #272727; // barva fontu
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 100%;
border-bottom: 3px solid transparent;
font-family: 'Montserrat', sans-serif;
height: 30px;
}
.nav a:hover{
border-bottom: 3px solid #310a0b;
}
.nav a.active{
border-bottom: 3px solid #b50c0f;
}
.fotka{
display: block;
float: right;
width: 5%;
height: 5%;
margin: 12px;
}
footer{
padding: 1px;
background-color: #eaeaea;
color: #272727;
font-family: 'Montserrat', sans-serif;
font-size: 12px;
position: fixed;
bottom: 0;
width: 100%;
}
.zvideo{
display: block;
margin-left: auto;
margin-right: auto;
padding-top: 0%;
}
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='icon' href='favicon.ico?' type='image/x-icon'/>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
<title>Hlavní stránka</title>
</head>
<body>
<div class="nav">
<a class="active" href="index.html">Domů</a>
Zaklínač
Hry
Knížky
<img class="fotka" alt="logo stránky" src="logo.png">
</div>
<!--NÁSLEDUJE DIV IFRAMU-->
<div class="zvideo">
<iframe class="zvideo" src="https://www.youtube.com/embed/hquuwfa3FCo?autoplay=1&mute=1" width="1152px" height="648px" frameborder="0" allow="autoplay"></iframe>
</div>
<footer>
<p>Autor: Jan Michalisko</p>
<p>Můj email: hachikolp#gmail.com</p> <!--mailto: mi přišel velmi barbarský, takže jsem tam nechal jenom paragraf-->
</footer>
</body>
</html>
I hope that you will be able to identify what is footer, head etc., i am really not a good at coding yet, lol. Thank you for help!
According to the comments, you just trying to center an iframe. The I in iframe stands for inline. So the correct name for the <iframe> tag is: inline frame. As the name indictaes, it is not a block level element but an inline element. As such it can not be centered by using margin: 0 auto; by default. So you need to add display: block; first, in order to change the iframe into a block level element.
iframe {
display: block;
margin: 0 auto;
background-color: blue;
}
<iframe src="">Just a Test</iframe>
EDIT#2: Fixed it i have added to my code position: absolute; top 130px; display:block; thanks for all respondes ... code on codepen was fixed too .. :D
EDIT: So i fixed the content-holder problem now i have a new one i cant move him inside my main .... i have been trying vertical align and it doesnt work Codepen: http://codepen.io/anon/pen/VvKdrL
My new code :
header>a
{
font-size: 38px;
font-weight: 500;
border-bottom: 1px solid #888;
text-align: left;
color: #555;
font-family: "Monserat";
}
header
{
border-bottom:1px solid #888;
}
main
{
height: 530px;
display: block;
margin-top: -40px;
}
ul
{
list-style-type: none;
}
li a
{
font-size: 22px;
font-family: Helvetica;
margin: 4px;
font-weight: 500;
font-family: "Roboto";
line-height: 34px;
color: #222;
}
a
{
text-decoration: none;
}
li::before
{
content: "➢";
}
.center
{
width: 960px;
margin: 0 auto;
}
.content-holder
{
position: absolute;
width: 250px;
height: 200px;
top: 130px;
background: #eee;
display: block;
z-index: 2;
}
.background
{
z-index: 1;
background-repeat: no-repeat;
}
.footer
{
border-top: 1px solid #888;
height: 20px;
content:
}
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Roboto:500,700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="center">
Name
</header>
<main class="center sizemain">
<div class="background"></div>
<div class="content-holder">
<ul>
<li>
List
</li>
<li>
List
</li>
<li>
List
</li>
<li>
List
</li>
<li>
List
</li>
</ul>
</div>
</main>
<footer class="footer">
</footer>
</body>
</html>
Thanks for respondes
You need to comment out both the margin-top and the margin. Margin applies 50px to every side.
.content-holder {
width: 250px;
height: 190px;
background: #eee;
/* margin: 30px; */
/* margin-top: 50px; */
vertical-align: 50px;
z-index: 2;
}
See: http://www.w3schools.com/css/css_margin.asp
So I'm just having some fun with HTML and CSS, and I was trying to overlay some text over an image.
The way I was taught was to give the image a div all for itself, and set it as the background image. Then you could type right over it.
However, I want the background-image of the div to comply to some CSS I already wrote, telling the image to scale to the page's width.
Is there a way of applying CSS to the 's background image? Or should I choose another route?
Thanks in advance,
Rain
Code:
body {
background-color: #d0d0d5;
}
#pageWrapper {
margin-left: -10px;
margin-top: -15px;
margin-right: -200px;
background-color: #9b9a9d;
height: 1500px;
width: 100%;
}
#header {
font-family: Lato;
font-weight: bold;
background-color: #ffffff;
height: 70px;
width: 100%;
border-bottom: 2px solid #E8E8F0;
}
.links {
list-style-type: none;
font-size: 14px;
color: #000;
}
.linkLeft {
float: left;
display: inline-block;
line-height: 55px;
text-decoration: none;
padding-right: 20px;
color: #000;
text-transform: uppercase;
}
.linkRight {
float: right;
display: inline-block;
line-height: 55px;
text-decoration: none;
padding-left: 20px;
color: #000;
text-transform: uppercase;
}
#link5 {
padding-right: 40px;
}
#imageWrapper {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
#jumbotron {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
background-image: url(img/Canadian-Rockies-Mountains.jpg);
}
<!DOCTYPE html>
<html lang=en>
<head>
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<link href="main.css" rel="stylesheet" type="text/css" />
<title></title>
</head>
<body>
<div id="pageWrapper">
<div id="header">
<ul class="links"><li>Home</li>
<li>Browse</li>
<li>Help</li>
<li>Log In</li>
<li>Sign Up</li></ul>
</div> <!--header END-->
<div id="imageWrapper">
<!--<div id="imageText">
<h1>Discover the Canadian Rockies.</h1>
<p>Book a trip to Canada today, guy.</p>
</div>-->
<div id="jumbotron"></div>
<!--Original code used to place image before I wanted text overlay follows-->
<!--<img id="jumbotron"src="img/Canadian-Rockies-Mountains.jpg" />-->
</div>
</div> <!--pageWrapper END-->
</body>
</html>
Look here:
http://www.w3schools.com/css/css3_backgrounds.asp
http://www.w3schools.com/css/css_background.asp
These properties (like background-size) will be in relation to the div who has the background-image set. To make the div itself fill its parent, set width: 100% in the div's class
simple example to apply css for image inside div
CSS
.header-shadow{
background-image: url('../images/header-shade.jpg');
background-color:red;
height:50px;
}
JsFiddle
you can try something like this:
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-image: url("http://www.w3schools.com/cssref/paper.gif");
width: 100%;
}
</style>
</head>
<body>
<div>
<h1>Hello World!</h1>
</div>
</body>
</html>
If I'm reading your question properly, background-size: cover will force the image to expand the way you want. I've modified your code, is this the effect you're looking for?
body {
background-color: #d0d0d5;
}
#pageWrapper {
margin-left: -10px;
margin-top: -15px;
margin-right: -200px;
background-color: #9b9a9d;
height: 1500px;
width: 100%;
}
#header {
font-family: Lato;
font-weight: bold;
background-color: #ffffff;
height: 70px;
width: 100%;
border-bottom: 2px solid #E8E8F0;
}
.links {
list-style-type: none;
font-size: 14px;
color: #000;
}
.linkLeft {
float: left;
display: inline-block;
line-height: 55px;
text-decoration: none;
padding-right: 20px;
color: #000;
text-transform: uppercase;
}
.linkRight {
float: right;
display: inline-block;
line-height: 55px;
text-decoration: none;
padding-left: 20px;
color: #000;
text-transform: uppercase;
}
#link5 {
padding-right: 40px;
}
#imageWrapper {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
background-image: url(http://placekitten.com/g/200/300);
background-size: cover;
height: 200px;
}
<!DOCTYPE html>
<html lang=en>
<head>
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<link href="main.css" rel="stylesheet" type="text/css" />
<title></title>
</head>
<body>
<div id="pageWrapper">
<div id="header">
<ul class="links"><li>Home</li>
<li>Browse</li>
<li>Help</li>
<li>Log In</li>
<li>Sign Up</li></ul>
</div> <!--header END-->
<div id="imageWrapper">
<div id="imageText">
<h1>Discover the Canadian Rockies.</h1>
<p>Book a trip to Canada today, guy.</p>
</div>
</div>
</div> <!--pageWrapper END-->
</body>
</html>
This is how you cover a complete screen and make it adapt to screen size.
html, body {
position:relative;
height: 100%;
background:url('yoururl')no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}