What I should do to this page: to work right in mobile. I have tried meta viewport but It doesn't work. You can find the page here:
and html:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet" href="english.css">
<link href='http://fonts.googleapis.com/css?family=EB+Garamond' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<body>
<header class="mainHeader">
<ul>
<li>Magazine</li>
<li>About</li>
<li>Archive</li>
<li>Books</li>
<li>Contact</li>
</ul>
</header>
<section class="wr">
<img src="images/right.png" class="right">
<img src="images/left.png" class="left">
<section class="wrapper">
<div class="container">
<h1>Photographer</h1>
<h1>Story</h1>
<p>DescriptionDescriptionDescription</p>
</div>
</section>
</section>
</body>
</html>
and css:
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background-color: black;
}
body{
color: rgba( 255, 255, 255, 0.9 );
font-family: Helvetica, sans-serif;
background-image: url("images/14thcover.jpg") ;
background-size: 100%;
background-repeat: no-repeat;
}
a:hover{
color: black;
}
.mainHeader {
float: right;
font-size: 1.3em;
margin-right: 0.8em;
margin-top: 2em;
line-height: 1.2;
}
ul {
list-style-type: none;
}
.mainHeader a{
color: rgba(255,255,255,0.9)
}
.mainHeader a:hover {
color: rgba(255,255,255,0.7)
}
.wr {
width: 75%;
height:60%;
min-height: 65%;
position: absolute;
top:0;
bottom: 0;
right:0;
left:0;
margin: auto;
overflow: auto;
}
.right {
position: absolute;
top: 49%;
right: 0;
}
.left {
position: absolute;
top: 49%;
left: 0;
}
.wrapper {
width: 80%;
height:auto;
background-color: white;
position: absolute;
top:0;
bottom: 0;
right:0;
left:0;
margin: auto;
overflow: auto;
}
.wrapper ul li{
list-style-type: none;
display: inline;
font-size: 2em;
}
.title {
color: red;
}
.name, .lead {
color: black;
}
.lead {
font-size: 1.3em;
}
.container {
width: auto;
top: 35%;
left: 50%;
position: absolute;
overflow: auto;
transform: translate(-50%, -50%);
direction: rtl;
font-weight: 80;
}
.container h1 {
display: inline;
font-weight: 100;
font-size: 2em;
margin-bottom: 1em;
}
.container p {
margin-top: 1em;
text-decoration: none;
}
That works as you have specified in your CSS. The problem is that these specific widths do not fit in smaller resolutions on the device screen without overlapping.
You must specify:
#media (max-with: 768px) {
.mainHeader {
float: none;
}
}
You can reduce sizes and font sizes to still have the same look as in greater resolutions, but text become not readable or clickable
Meta will work after reading this https://developers.google.com/web/fundamentals/getting-started/your-first-multi-screen-site/responsive
Related
I have any issue, i have been make some footer and when i test my new footer, the Footer covered the content and navbar. i still figure it out how to solve this problem. hope i can get some answer at here...
$(".togel.tblmenu").click(function () {
$(".menu").toggleClass("sh");
});
body {
min-height: 400px;
margin-bottom: 100px;
clear: both;
background: #eff2f7;
}
a {
left: -50;
text-decoration: none;
color: white;
display: block;
transition: 0.3s;
font-size: 20px
}
a:hover {
transition: 0.3s;
}
nav {
position: fixed;
top: 0;
left: 20px;
right: 0;
background: #1e77b0;
font-family: Palatino Linotype;
}
.title {
display: inline-block;
float: left;
line-height: 50px;
}
.menu {
display: inline-block;
float: left;
}
.menu ul {
list-style: none;
padding: 0;
margin: 0;
}
.menu ul li {
display: inline-block;
}
.menu ul li a {
padding: 0 50px;
display: block;
line-height: 50px;
}
.menu li:hover {
background-color: #009cff;
}
.wrap {
width: 95%;
margin: 0 auto;
}
.tblmenubox {
display: inline-block;
float: right;
line-height: 50px;
}
.tblmenu {
display: block;
position: absolute;
width: 25px;
height: 25px;
background: #1e77b0;
border-radius: 50%;
top: 50%;
transform: translateY(-50%);
}
.tblmenubox {
display: none;
visibility: hidden;
}
.kotakpersegi {
display: block;
position: absolute;
left: -40px;
width: 250px;
height: 50px;
background: #009cff;
transform: translateY(-50%);
-webkit-transform: skew(30deg);
-moz-transform: skew(30deg);
-o- transform: skew(30deg);
transform: skew(30deg)
}
.logo {
position: absolute;
left: 50px;
}
#media screen and (max-width:1000px) {
.kotakpersegi {
width: 150%;
}
.logo {
position: absolute;
float: center;
left: 25%;
}
.menu {
display: none;
}
.tblmenubox {
display: block;
visibility: visible;
}
.menu.sh {
display: block;
position: absolute;
top: 50px;
background: #1e77b0;
width: 100%;
left: 0;
}
.menu a:hover {
color: #eff2f7;
background: #009cff;
}
.menu ul li {
display: block;
text-align: center;
}
}
/*navbar code*/
.footer-bottom {
text-align: center;
background-color: #1e77b0;
width: 100%;
position: relative;
bottom: 50%;
}
.Footer-header h3 {
font-family: 'Roboto Condensed', sans-serif;
color: white;
margin: 20px;
text-align: left;
}
.Footer-Sponsored img {
height: 128px;
margin: 10px;
}
hr {
margin: 20px;
border: 0.5px solid lightblue;
}
.hr1 {
margin: 40px;
}
.Footer-deep {
margin: 30px;
}
.Footer-deep img {
height: 30px;
margin: 10px;
}
.Footer-deep h3 {
color: white;
font-family: 'Garamond', sans-serif;
font-size: 100%;
}
.content-wrapper { /* added a top margin */
margin-top: 50px; /* We know this is the height because it is applied specifically in CSS */
padding: 30px;
}
.content-wrapper h1 {
font-family: Palatino Linotype;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght#1,300&display=swap" rel="stylesheet">
<!-- Navbar -->
<nav>
<div class="wrap">
<div class="title">
<div class="kotakpersegi">
<a href="">
<img class="logo" src="img/logo.png" width="180" height="50">
</a>
</div>
</div>
<div class="tblmenubox">
<div class="togel tblmenu">
</div>
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>Contact</li>
<li>Service</li>
<li>Fiture</li>
<li>Maps</li>
</ul>
</div>
</div>
</nav>
<!-- Navbar -->
<div class="content-wrapper">
<h1>San Andreas Motor Racing Grand Prix</h1>
</div>
<!-- content stop here -->
<footer class="footer-bottom">
<div class="Footer-header">
<h2>San Andreas Motor Racing</h2>
<hr class="Light-line">
<h3>Sponsored By</h3>
</div>
<div class="Footer-Sponsored">
<img src="Sponsored/1.jpg">
<img src="Sponsored/2.png">
<img src="Sponsored/3.jpg">
</div>
<hr class="hr1">
<div class="Footer-deep">
<img src="img/logo.png" align="left">
<h3 align="right">San Andreas Motor Racing Championship</h3>
</div>
</footer>
i have tried to change the position to relative absolute or whatever but it make me found another problem. maybee some one can help me to fix this problem, please.... i have been try to solve his problem by googling for a day and still doesn't have any clue about this problem...
Just add z-index:10 to nav css style
body {
min-height: 400px;
margin-bottom: 100px;
clear: both;
background: #eff2f7;
}
a {
left: -50;
text-decoration: none;
color: white;
display: block;
transition: 0.3s;
font-size: 20px
}
a:hover {
transition: 0.3s;
}
nav {
position: fixed;
top: 0;
left: 20px;
right: 0;
background: #1e77b0;
font-family: Palatino Linotype;
z-index:10;
}
.title {
display: inline-block;
float: left;
line-height: 50px;
}
.menu {
display: inline-block;
float: left;
}
.menu ul {
list-style: none;
padding: 0;
margin: 0;
}
.menu ul li {
display: inline-block;
}
.menu ul li a {
padding: 0 50px;
display: block;
line-height: 50px;
}
.menu li:hover {
background-color: #009cff;
}
.wrap {
width: 95%;
margin: 0 auto;
}
.tblmenubox {
display: inline-block;
float: right;
line-height: 50px;
}
.tblmenu {
display: block;
position: absolute;
width: 25px;
height: 25px;
background: #1e77b0;
border-radius: 50%;
top: 50%;
transform: translateY(-50%);
}
.tblmenubox {
display: none;
visibility: hidden;
}
.kotakpersegi {
display: block;
position: absolute;
left: -40px;
width: 250px;
height: 50px;
background: #009cff;
transform: translateY(-50%);
-webkit-transform: skew(30deg);
-moz-transform: skew(30deg);
-o- transform: skew(30deg);
transform: skew(30deg)
}
.logo {
position: absolute;
left: 50px;
}
#media screen and (max-width:1000px) {
.kotakpersegi {
width: 150%;
}
.logo {
position: absolute;
float: center;
left: 25%;
}
.menu {
display: none;
}
.tblmenubox {
display: block;
visibility: visible;
}
.menu.sh {
display: block;
position: absolute;
top: 50px;
background: #1e77b0;
width: 100%;
left: 0;
}
.menu a:hover {
color: #eff2f7;
background: #009cff;
}
.menu ul li {
display: block;
text-align: center;
}
}
/*navbar code*/
.footer-bottom {
text-align: center;
background-color: #1e77b0;
width: 100%;
position: relative;
bottom: 50%;
}
.Footer-header h3 {
font-family: 'Roboto Condensed', sans-serif;
color: white;
margin: 20px;
text-align: left;
}
.Footer-Sponsored img {
height: 128px;
margin: 10px;
}
hr {
margin: 20px;
border: 0.5px solid lightblue;
}
.hr1 {
margin: 40px;
}
.Footer-deep {
margin: 30px;
}
.Footer-deep img {
height: 30px;
margin: 10px;
}
.Footer-deep h3 {
color: white;
font-family: 'Garamond', sans-serif;
font-size: 100%;
}
.content-wrapper { /* added a top margin */
margin-top: 50px; /* We know this is the height because it is applied specifically in CSS */
padding: 30px;
}
.content-wrapper h1 {
font-family: Palatino Linotype;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title>SA-MR</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSS document -->
<link rel="stylesheet" type="text/css" href="css/SAMRnavbar.css">
<meta charset="utf-8">
<!-- font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght#1,300&display=swap" rel="stylesheet">
</head>
<body>
<!-- Navbar -->
<nav>
<div class="wrap">
<div class="title">
<div class="kotakpersegi">
<a href="">
<img class="logo" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Test-Logo.svg/1175px-Test-Logo.svg.png" width="180" height="50">
</a>
</div>
</div>
<div class="tblmenubox">
<div class="togel tblmenu">
</div>
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>Contact</li>
<li>Service</li>
<li>Fiture</li>
<li>Maps</li>
</ul>
</div>
</div>
</nav>
<script src="js/jquery.min.js"></script>
<script type="text/javascript">
$(".togel.tblmenu").click(function () {
$(".menu").toggleClass("sh");
});
</script>
<!-- Navbar -->
<div class="content-wrapper">
<h1>San Andreas Motor Racing Grand Prix</h1>
</div>
<!-- content stop here -->
<footer class="footer-bottom">
<div class="Footer-header">
<h2>San Andreas Motor Racing</h2>
<hr class="Light-line">
<h3>Sponsored By</h3>
</div>
<div class="Footer-Sponsored">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Test-Logo.svg/1175px-Test-Logo.svg.png">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Test-Logo.svg/1175px-Test-Logo.svg.png">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Test-Logo.svg/1175px-Test-Logo.svg.png">
</div>
<hr class="hr1">
<div class="Footer-deep">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Test-Logo.svg/1175px-Test-Logo.svg.png" align="left">
<h3 align="right">San Andreas Motor Racing Championship</h3>
</div>
</footer>
</body>
</html>
This can be resolved by adding 'z-index: -1;' to your footer-bottom class.
Learn more about z-indexing here
In the most basic cases, HTML pages can be considered two-dimensional, because text, images, and other elements are arranged on the page without overlapping. In this case, there is a single rendering flow, and all elements are aware of the space taken by others. The z-index attribute lets you adjust the order of the layering of objects when rendering content.
In addition to their horizontal and vertical positions, boxes lie along a "z-axis" and are formatted one on top of the other. Z-axis positions are particularly relevant when boxes overlap visually.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index
You should change the z-order of your elements.
Set z-index of footer less than z-index of the navbar (enough set z-index: -1 for footer)
More info:
https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
I have got a problem wherein I have this website and while its working well and I have a sticky footer on the bottom of the website it has alot of space between the end of the content
and I would like to remove the white space
now how would i go about this the html is here:
<html lang="en">
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
<link href="menu1.css" rel="stylesheet">
<link href="author.css" rel="stylesheet">
<!-- Social Media Icon Library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title></title>
</head>
<body>
<head>
<!--Navigation-->
<article class="top">
<div class="" id="line">
<img class="logo" src="logo.png" alt="logo">
<h1><span class="lines">D.P.P</span></h1>
</div>
<span class="lines">
<ul>
<li>Home</li>
<li>Nada menos que Max</li>
<li>Inspiration</li>
<li>Contact</li>
</ul>
<hr>
<hr>
</span>
<script src="menu.js"></script>
</article>
<div class="spacer"> </div>
</head>
<main id="content">
<table>
<tr>
<td id="main">
<h3> </h3>
<span>.</span>
</td>
<td id="img"><img id="Diana" src=""></td>
</tr>
</table>
</main>
</body>
<footer>
<hr>
<article>
<p>Connect</p>
obviously personal info removed for this as not important.
the css im using are the following:
author.css:
h3
{
text-align: center;
}
#main
{
width: 66%;
margin-right: 100px;
margin-left: 150px;
padding-left: 100px;
padding-right:5%;
}
#Diana
{
height: 50%;
}
#img
{
width: 33%;
margin-right: 40px;
}
Menu.css for the nav bar and top part:
ul
{
width:100%;
list-style: None;
margin: 0;
padding: 0;
top: 0;
background-color: #7d8a96;
}
li
{
width:25%;
float:left;
border-right: none;
}
li:last-child
{
border-right:none;
}
li a
{
display: block;
width:100%;
background:#f9f7fa;
padding:4% 10%;
font-size:1em;
text-decoration: none;
}
#media screen and (max-width: 768px) {
#menu
{
width:1.4em;
display: block;
background:#ddd;
font-size:1.35em;
text-align: center;
}
#nav.js
{
display: none;
}
ul
{
width:100%;
list-style:none;
}
li
{
width:100%;
border-right:none;
}
}
#media screen and (min-width: 768px)
{
#menu
{
display: none;
}
}
/*Lines on sides*/
.lines
{
line-height: 0.5;
text-align: center;
}
.lines span
{
display: inline-block;
position: relative;
}
.lines span:before,
.lines span:after
{
content: "";
position: absolute;
height: 5px;
border-bottom: 1px solid white;
border-top: 1px solid white;
top: 0;
width: 600px;
}
.lines span:before
{
right:100%;
margin-right: 15px;
}
lines span:after
{
left: 100%;
margin-left: 15px;
}
h1
{
margin-top: 50px;
font-size: 1rem;
font-style: oblique;
font-weight: thin;
color: #4e565e;
text-align: center;
font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
}
.top
{
width: 100%;
height: 100px;
padding: 10px;
}
.spacer
{
width: 100%;
height: 100px;
}
#content
{
margin-top: 50px;
width: 100%;
height: 100%;
padding: 10px;
}
.logo
{
display: block;
margin-left: auto;
margin-right: auto;
width: 5%;
margin-bottom: -50px;
}
and style.css
*
{
margin: 0;
padding: 0;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
}
footer
{
margin-top: 150px;
flex-shrink: 0;
text-align: center;
}
html, body
{
height: 100%;
}
body
{
display: flex;
flex-direction: column;
}
#content
{
min-height: calc(100vh - 70px);
height: auto !important;
height: 100%;
margin: 0 auto -142px;
flex: 1 0 auto;
}
how would i go about this
Maybe you can change the contents minimum height, as currently it is set to 100vh
change
#content
{
min-height: calc(100vh - 70px);
}
to
#content
{
min-height:30vh;
}
The blue and red background you see in the images is a parallax scroll background. In front of that, I would like to add text with a white background. I need the white background to have around a 150px margin on either side, so that viewers still get to take a look at the parallax background. I have tried a lot of stuff and none has worked. Any ideas? (What it looks like now) (A crude drawing of what I want it to look like)
body {
margin: 0;
background: #FFF;
font-family: 'Alata', sans-serif;
font-size: 24px;
font-weight: 300;
}
.container {
width: 80%;
margin: 0 auto;
}
header {
background: #111;
}
header::after {
content:'';
display: table;
clear: both;
}
.logo {
float: left;
}
nav {
float: right;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 70px;
padding-top: 50px;
position: relative;
}
nav a {
color: #FFF;
text-decoration: none;
text-transform: uppercase;
}
nav a:hover {
color: #FFF;
font-weight: 600;
}
nav a::before {
content: '';
display: block;
height: 5px;
background-color: #FFF;
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms
}
nav a:hover::before {
width: 100%
}
.parallax {
width: 100%; height: 100%;
position: relative; top: 0; left: 0;
background-image: url('parallax.jpg');
}
.main {
width: 50%; height: 100%;
position: relative; top: 0; left: 50%;
transform: translate(-50%, 0%);
background-color: RGBA(255, 255, 255, 1);
}
h1 {
width: 700px; height: 100%;
margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0;
padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0;
text-align: center;
margin: 0px auto !important;
overflow: hidden;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Alata&display=swap" rel="stylesheet">
<link href="style.css" rel="stylesheet" type="text/css">
<meta charset="UTF-8">
<header>
<div class="container">
<img src="logo.jpg" alt="logo" style="width:175px;height:140px;" class="logo">
<nav>
<ul>
<li>Home</li>
<li>Shop</li>
<li>My Story</li>
<li>Other Info</li>
<li>Terms Of Service</li>
</ul>
</nav>
</div>
</header>
</head>
<body>
<style>
.parallax {
background-image: url("parallax.jpg");
height: 1000px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
<div class="main">
<h1>
PCs Built By A Fellow Gamer
</h1>
</div>
<div class="parallax"></div>
</body>
</html>
You don't need to use a div for the parrelax, just add the class to body and then make the following changes to .main
HTML
<body class="parallax">
CSS
height: 100%;
width:50%; /** Width of your white body **/
margin:0 auto;
background-color: RGBA(255, 255, 255, 1);
You can dictate the sizes of your margin with the width rule.
PROBLEM: I am having problems in my bootstrap imports that seems to be affecting my link logo and social icon border. If i remove the link for the bootstrap, the logo and icon borders will work fine. However, I need the bootstrap tag for the gallery. Can someone help me fix this?
this is the code with errors
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" >
This is the source of error (Specifically the code above) :
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sabreen's Seafood Market & Restaurant</title>
<link href="css/jquery.bxslider.css" rel="stylesheet" />
<link href="css/styles.css" rel="stylesheet">
<link href="css/nav.css" rel="stylesheet">
<link rel="shortcut icon" type="image/png" href="images/seafood-favicon.png"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" >
</head>
This is my current output with the link for the bootstrap enabled.You could see that the logo and social box is not properly placed.
This is what it looks like when i commented the bootstrap link. You can see that the logo and social border works fine, but the gallery does not.
Is there anyway for me to fix both?
HERE IS THE HTML CODE
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sabreen's Seafood Market & Restaurant</title>
<link href="css/jquery.bxslider.css" rel="stylesheet" />
<link href="css/styles.css" rel="stylesheet">
<link href="css/nav.css" rel="stylesheet">
<link rel="shortcut icon" type="image/png" href="images/seafood-favicon.png"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" >
</head>
<body>
<a name="home">
<!--- Start Navigation -->
<script src="js/jquery-1.11.2.min.js"></script>
<script src="js/main.js"></script> <!--- For Navigation -->
<!---ADD NAVIGATION HERE-->
<div class="logo">
<img src="images/seafoodLogo.png">
</div>
<div class="nav-outer">
<div class="nav-wrap">
<nav class="navigation">
<div class='nav' nav-menu-style="yoga">
<ul class="nav-menu">
<li> EXPLORE</li>
<li> MENU</li>
<li> GALLERY</li>
<li> RESERVATION</li>
</ul>
</div>
</nav>
</div>
</div>
<div class="nav-clear"></div>
<!--- End Navigation -->
<div class="clearfix"></div>
<!-- Start of Content -->
<h1> Check out some of our Suggested Paluto!</h1>
<section class="paluto">
<div class="container-fluid">
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="box-paluto">
<div class="imgBox-paluto">
<img src="images/menu/crabs1.jpg" class="img-responsive">
</div>
<div class="content-paluto">
<h3>Sweet Chili Crab</h3>
<p>Considered as one of our year-round staples, our bright and bold #ChiliCrab packs a lot of flavor and heat! If you prefer to have it mildly spiced, our kitchen team is flexible with all types and tastes and preference.</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="box-paluto">
<div class="imgBox-paluto">
<img src="images/menu/crabs2.jpg" class="img-responsive">
</div>
<div class="content-paluto">
<h3>Grilled Crab</h3>
<p>Our take on #GrilledCrab is deliciously simple and oozing with smoky flavor. Plus it's meaty and guaranteed fresh! Contact us on our Facebook fan page for booking and inquiries.</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="box-paluto">
<div class="imgBox-paluto">
<img src="images/menu/crabs3.jpg" class="img-responsive">
</div>
<div class="content-paluto">
<h3>Sweet Chili Crab with Black Pepper</h3>
<p>Thankfully, crabs are always at full swing and piled high in our #seafoodrestaurant! Roll up your sleeves and get ready to indulge our #chilicrab that's deliciously drenched with garlic and herbs. We're open 'til 10:30 pm so it's never too late to satisfy your cravings for crustaceans!</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- End of Content -->
<div class="clearfix"></div>
<footer>
<center>
</center>
<p> © 2018 SABREEN'S SEAFOOD MARKET & RESTAURANT ALL RIGHTS RESERVED</p>
</footer>
</body>
HERE IS THE CSS CODE FOR MY NAV.CSS AND STYLES.CSS
/*styles.css*/
/*---Body Font--*/
#import url(https://fonts.googleapis.com/css?family=Hindi);
/*---Heading Font--*/
#import url(https://fonts.googleapis.com/css?family=Nobile);
/*---Social Font--*/
#import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css);
/*---Menu Gallery Font--*/
#import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700');
* {
margin: 0;
border: 0;
padding: 0;
}
body {
background-color: #fffdf9;
font-family: 'Times New Roman', Times, serif;
font-size: 18px;
position: relative;
}
h1 {
font-family: 'Times New Roman', Times, serif;
text-align: center;
font-size: 175%;
color: #494949;
text-transform: uppercase;
letter-spacing: 3px;
padding: 3% 0;
}
h2 {
font-family: 'Times New Roman', Times, serif;
text-align: center;
font-size: 150%;
color: #494949;
text-transform: uppercase;
letter-spacing: 3px;
padding: 3% 0;
}
h3 {
font-family: 'Times New Roman', Times, serif;
text-align: center;
color: #494949;
text-transform: uppercase;
letter-spacing: 1%;
}
p {
padding: 2%;
color: #4A4444;
text-align: justify;
font-size: 125%;
}
img {
max-width: 100%;
max-height: auto;
}
#banner-wrapper {
max-width: 1280px;
margin: 0 auto;
}
/*---Start Image Slider Style--*/
.slider {
width: 100%;
}
.slider1 img {
min-width: 100%;
}
.slider .bx-wrapper .bx-controls-direction a {
outline: 0 none;
position: absolute;
text-indent: -9999px;
top: 40%;
height: 71px;
width: 40px;
z-index: -1;
transition: all 0.7s;
}
.slider .bx-wrapper:hover .bx-controls-direction a{
z-index: 5;
}
.slider .bx-wrapper .bx-prev {
background: #000 url("img/left-arrow-white.png") no-repeat 8px 13px;
left: 0;
opacity: 0.3;
}
.slider .bx-wrapper .bx-prev:hover {
opacity: 0.6;
}
.slider .bx-wrapper .bx-next {
background: #000 url("img/right-arrow-white.png") no-repeat 10px 12px;
right: 0px;
opacity: 0.3;
}
.slider .bx-wrapper .bx-next:hover {
opacity: 0.6;
}
/*---End Image Slider Style--*/
.reservation {
margin-top: 25px;
}
.reservation p {
width: 70%;
text-align: center;
}
.one-half {
width: 44%;
float: left;
margin: 2% 0 3% 4%;
text-align: center;
}
.one-third {
width: 28%;
float: left;
margin: 2% 0 3% 4%;
text-align: center;
}
.left-col {
width: 60%;
float: left;
margin: 4% 0 4% 4%;
}
.sidebar {
width: 26%;
float: right;
margin: 4% 4%;
}
.sidebar img {
opacity: 1;
}
.clearfix {
clear: both;
}
/*---Start Parallax Section--*/
.parallax-1 {
background: url("../images/parallaxBG.jpg") fixed 100%;
text-align: center;
max-height: 300px
}
.parallax-inner {
padding-top: 90px;
padding-bottom: 300px;
}
.parallax-2 {
background: url("https://www.w3newbie.com/wp-content/uploads/black-pattern.jpg") repeat fixed 100%;
text-align: center;
}
.parallax-inner h3, .parallax-inner p{
color: #F1F1F1;
}
/*---End Parallax Section--*/
/*Start of Menu Gallery Section*/
section.paluto {
padding: 50px 0 0 ;
}
.box-paluto {
position: relative;
width: 100%;
height: 280px;
overflow: hidden;
background: #000;
box-shadow: 0 5px 15px rgba(0,0,0,.5);
transition: .5s;
}
.box-paluto:hover {
transform: translateY(-30px);
}
.box-paluto .imgBox-paluto {
position: relative;
}
.box-paluto .imgBox-paluto img {
transition: .5s;
width: 100%;
}
.box-paluto:hover .imgBox-paluto img {
opacity: .5;
transform: translateY(-20px);
}
.box-paluto .content-paluto{
position: absolute;
bottom: -30px;
left: 0;
padding: 20px;
box-sizing; border-box;
transition: .5s;
opacity: 0;
}
.box-paluto:hover .content-paluto{
opacity: 1;
bottom: 0;
}
.box-paluto .content-paluto h3{
font-size: 28px;
color: #fff;
font-weight: 700;
}
.box-paluto .content-paluto p{
font-size: 15px;
color: #fff;
font-weight: 400;
}
#media only screen and (max-width: 700px){
.box-paluto{
height: auto;
max-width: 100%;
margin: 6px 0;
}
}
#media only screen and (max-width: 500px){
.box-paluto{
max-height: 300px;
max-width: 300px;
margin: 15px 0;
}
}
/*End of Menu Gallery Section*/
/*Start of Social*/
.fa {
padding: 5px;
margin: 2px;
font-size: 15px;
width: 15px;
height: 15px;
border-radius: 25%;
text-align: center;
justify-content: center;
text-decoration: none;
border: 4px solid #d3d3d3;
transition: all 0.5s;
background: #fff;
}
.fa:hover {
-webkit-animation: expand 0.5s ease-in-out;
-moz-animation: expand 0.5s ease-in-out;
animation: expand 0.5s ease-in-out;
color: #fff;
}
#keyframes expand {
33% { transform: scale(1.1); }
66% { transform: scale(0.9); }
100% { transform: scale(1.0); }
}
#-webkit-keyframes expand {
33% { transform: scale(1.1); }
66% { transform: scale(0.9); }
100% { transform: scale(1.0); }
}
#-moz-keyframes expand {
33% { transform: scale(1.1); }
66% { transform: scale(0.9); }
100% { transform: scale(1.0); }
}
.fa-facebook {
color: #3B5998;
}
.fa-facebook:hover {
background: #3B5998;
}
/*End of Social*/
/*---Start Footer--*/
footer {
background: #fffdf9;
opacity: 0.9;
width: 100%;
/*margin-top: 5%;*/
padding: 1% 0;
overflow: auto;
}
footer p{
color: #fff;
text-align: center;
font-size: 12px;
background-image: linear-gradient(to left, #d0d5de, #001947 40%, #001947 60%, #d0d5de 100%);
padding: 7px 0;
}
iframe {
width: 60%;
height: 400px;
}
/*---Start Media Queries--*/
#media screen and (max-width: 768px) {
.slider .bx-wrapper .bx-controls {
display: none;
}
.parallax-inner {
display: none;
}
.one-third {
width: 100%;
margin: 4% 0;
}
.one-half {
display: none;
}
h1 {
font-size: 125%;
}
.left-col {
width: 100%;
margin: 0 0 3% 0;
}
.sidebar {
width: 100%;
margin: 0;
}
.sidebar img {
max-width: 75%;
height: auto;
}
h3 {
padding-top: 3%;
}
.social-container {
display: block;
}
footer{
margin-top: 15px;
}
.reservation p {
margin-top: 155px;
width: 80%;
}
iframe {
width: 80%;
height: 400px;
}
}
/*nav.css*/
#import url(https://fonts.googleapis.com/css?family=Questrial);
/*--- Nav Font --*/
/*--- Start Navigation Style --*/
.nav-outer {
width: 100%;
height: 67px;
background: #fffdf9;
position: fixed !important;
z-index: 1;
}
.nav-wrap {
max-width: 100%;
margin: 0 auto;
}
nav {
margin-top: 0;
background: #fffdf9;
font-family: 'Times New Roman', Times, serif;
}
.nav ul {
overflow:hidden;
list-style:none;
}
.nav-button:hover {
cursor:pointer;
}
.navigation {
clear: both;
width: 100%;
position: relative;
}
.nav a {
color: #494949;
text-transform: uppercase;
text-decoration:none;
}
body .nav .nav-menu li a {
display:inline-block;
margin-top: 10px;
padding:15px 20px;
color: #494949;
font-size: 19px;
}
.nav.yoga .nav-menu li.active a {
color: #494949;
text-decoration: underline;
}
.nav.yoga .nav-menu li a:hover {
color: #494949;
text-decoration: underline;
}
.nav.yoga .nav-toggled {
min-height:36px;
border-radius:6px;
margin-top: -7px;
}
.nav.yoga .nav-toggled-controls {
display:block;
height:40px;
text-align:left;
position:relative;
}
.nav.yoga .nav-toggled-title {
position:relative;
top:9px;
left:15px;
font-size:16px;
}
.nav.yoga .nav-button {
display:block;
position:absolute;
right:15px;
top:8px;
background: #0a0c42;
}
.nav.yoga .nav-button span {
display:block;
margin-top:4px;
height:2px;
background: #0a0c42;
width:24px;
}
.nav-toggled-controls{
border-bottom: 0px solid #0a0c42;
}
.nav.yoga .nav-toggled ul li a {
display:block;
width:100%;
background-color: #505E67;
text-align:left;
padding:10px 0px 10px 15px;
border-bottom:1px solid #FFF;
text-align: center;
font-size: 16px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.nav.yoga .nav-toggled ul li ul a {
font-size: 15px;
text-transform: none;
}
.nav.yoga .nav-toggled ul li.active a {
background-color: #F5F5F5;
color: #505E67;
}
.nav.yoga .nav-toggled ul li a:hover {
background: #F5F5F5;
color: #505E67;
}
.nav.yoga .nav-toggled ul li {
position: relative;
}
.toggle-sm:after {
position: absolute;
right: 15px;
top: 10px;
font-size: 18px;
line-height: 25px;
}
.toggle-sm:after {
content: '+';
cursor: pointer;
}
.toggle-sm.open:after {
content: '-';
cursor: pointer;
}
.nav .nav-menu {
text-align: center;
overflow: visible;
min-height: 56px;
padding-left: 0;
margin: 0;
}
#media (min-width: 823px) {
.nav {
float: right;
}
.logo {
float: left;
}
}
#media screen and (max-width: 822px) {
body .nav .nav-menu li a {
margin-top: 4px;
}
.logo img {
max-width: 135px !important;
margin-bottom: 3px;
}
.nav-outer {
height: 21px;
}
.nav.yoga .nav-toggled-controls {
top: -40px;
margin-bottom: -36px;
}
.nav-clear {
padding-top: 37px;
margin-bottom: -15px;
}
}
.logo img {
max-height: 100px;
height: auto;
margin-left: 30px;
margin-bottom: 5px;
background-color: #002859;
z-index: 2;
position: absolute;
padding: 70px 10px 50px 10px;
background-image: linear-gradient(#253688, #060729);
}
.navigation:after {
content: "";
display: table;
clear: both;
}
.nav .nav-menu li {
display:inline-block;
padding:0px;
margin:0px !important;
position: relative;
}
.nav-button:hover {
cursor:pointer;
}
.nav .nav-toggled ul {
display:none;
margin:0px ;
padding:0px ;
position: relative;
}
.nav .nav-menu > li > ul {
position: absolute;
z-index: 10000000000;
top: 50px;
text-align: left;
background: #505E67;
width: 100%;
padding-left: 0;
display: none;
}
.nav.yoga .nav-menu > li > ul a {
padding: 11px 15px;
font-size: 18px;
font-weight: normal;
text-transform: none;
}
.nav .nav-menu > li > ul li {
position: relative;
width: 100%;
text-align: center;
}
.nav .nav-menu > li > ul > li ul {
position: absolute;
right: -100%;
top: 0;
width: 100%;
padding-left: 0;
background: #505E67;
}
.nav .nav-menu > li > ul > li ul a {
white-space: nowrap;
}
.nav ul {
overflow: visible;
}
.has-children {
position: relative;
}
.has-children:after {
content: '+';
color: #FFF;
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
cursor: pointer;
}
.has-children:hover:after {
content: '-';
color: #FFF;
cursor: pointer;
}
body .nav .nav-menu li a {
padding: 15px 30px;
}
.clicker {
width: 45px;
height: 45px;
position: absolute;
right: 0;
z-index: 30000;
}
.nav-clear {
clear: both;
padding-top: 67px;
}
/*--- End Navigation Style --*/
/*--------------------MEDIA!!!---------------*/
#media screen and (max-width: 768px) {
#banner-wrapper {
position: relative;
-ms-overflow-x: hidden;
overflow-x: hidden;
}
.nav-menu {
display: none;
}
}
add your bootstrap css at the top
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sabreen's Seafood Market & Restaurant</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
rel="stylesheet" >
<link href="css/jquery.bxslider.css" rel="stylesheet" />
<link href="css/styles.css" rel="stylesheet">
<link href="css/nav.css" rel="stylesheet">
<link rel="shortcut icon" type="image/png" href="images/seafood-favicon.png"/>
</head>
As you have not posted the full code here , I can suggest you to do this
List out all the properties that are overlapping when you add the external CSS File.
for suppose i have a <div class="firstDiv" id="firstDivId"></div>
1.Overwrite the properties which are affecting using !important property.
In file1 i have
.firstDiv{
width:33%;
}
which is overridden by bootstrap css
.firstDiv{
width:100%;
}
In file1 you update the property using !important
.firstDiv{
width:33%!important;
}
2.download the css file , attach to your project then update the bootstrap.css file with :not selector
In bootstrap.css property should be like
.firstDiv:not('#firstDivId'){
width:33%;
}
Hope this may help you.
I am working on my second project for the web (self taught) and I have a newbie question.
I have a mock up header and footer in my page which have both a height of 100px. I am trying to change this so that the height is in percentages but when I do so they collapse. Why?
Code:
HTML
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Photography</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript" src="jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="JavaScript2b.js"></script>
<script type="text/javascript" src="JavaScript2.js"></script>
</head>
<body>
<div id="header">
</div>
<div id="wrap">
<div id="container">
<div id="controllers">
<div id="previous" class="buttons" onclick="change(-1);">
</div>
<div id="next" class="buttons" onclick="change(1);">
</div>
</div>
<div id="imagewrap">
<img src="Images/01PARANA/Image1.jpg" height="100%" id="front" />
</div>
<div>
<p id="tag">Poem</p>
</div>
</div>
</div>
<div id="footer">
</div>
</body>
<script type="text/javascript" src="JavaScript2.js"></script>
</html>
CSS
#font-face {font-family: Eagle-Light;
src: url("Eagle-Light.otf") format("opentype");
}
#font-face {font-family: Raleway Light;
src: url("Raleway Light.otf") format("opentype");
}
body {
margin: 0px;
padding: 0px;
height: 100%;
}
#header {
position: relative;
height: 100px;
width: 100%;
background-color: yellow;
}
#wrap {
position: relative;
clear: both;
padding: 0px;
width: 100%;
}
#footer {
position: relative;
height: 100px;
width: 100%;
background-color: lightgray;
display: block;
}
#container {
position: relative;
margin: 15px auto;
}
#controllers {
position: static;
height: 20px;
}
#previous {
position: absolute;
left: 10px;
background-image: url(Images/carremoins.png);
background-repeat: no-repeat;
background-position: center center;
width: 20px;
height: 20px;
z-index: 4;
}
#next {
background-image: url(Images/carreplus.png);
background-repeat: no-repeat;
width: 20px;
height: 20px;
position: absolute;
right: 10px;
z-index: 4;
background-position: center center;
}
#container:hover .buttons {
/* display: block;*/
opacity: 1;
}
#tag {
position: relative;
height: 40px;
line-height: 1.7em;
padding-top: 5px;
text-align: center;
font-size: 1.1em;
}
.buttons {
cursor: pointer;
top: 50%;
z-index: 3;
/* display: none;*/
opacity: 0;
transition: opacity .3s ease-in-out;
}
#imagewrap{
position: relative;
border: 1px solid #818181;
overflow: hidden;
z-index: 2;
height: 100vh;
}
#front {
display: block;
}
p {
color: #818181;
font-family: Eagle-Light;
line-height: 1.7em;
padding: 0px;
margin: 0px;
font-size: 0.5em;
letter-spacing: 0.21em;
}
a:link {
text-decoration: none;
color: inherit;
}
a:visited {
text-decoration: none;
color: inherit;
}
For the container to fill the height of the screen, you could try this:
html, body {
height: 100%;
}
please try to do this:
#footer {
height: 10vh;
}
10vh = 10% of the viewport's height
besides of directly setting the percentage, you can also do calculations, such as making the height of footer equals to the height of the viewport minus 800px by doing this:
#footer {
height: calc(100vh - 800px);
}