I want to realise this effect on website Link of video
my HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="style.css">
<title>Resto</title>
<link rel="icon" href="favicon/logoB.ico">
</head>
<body>
<main class="container">
<nav class="menu">
Burger
Sandwich
Chawarma
Salades
BBQ
Boissons
</nav>
<div class="central" dir="ltr">
<div class="logo">
<img src="images/logoB.png" alt="Logo">
</div>
<p class="text">Decouvrer des Saveurs exquises</p>
<div class="pictures">
<img src="images/burger.jpg" alt="Hamburger">
</div>
</div>
</main>
<footer>
<p>©*Copyright*****Chez MED***2023</p>
<p><img src="images/loc.png" class="localisation" alt="Adresse">2152 ** Boulevard des ULYSSES</p>
</footer>
</body>
</html>
my css:
.container{
position: relative;
z-index: 1;
box-shadow: 0 2rem 4rem #f3ebe0;
}
footer{
position:sticky;
bottom: 0;
padding: 15vmin 2rem;
background-image:url("images/fries.jpg");
background-repeat: no-repeat;
background-size: cover;
}
the result is
my page
My footer
the problem is my footer is visible under the body
can I get some idea to fix this problem?
I try to add an effect on my first page the footer should be under the main content who get the z-index
Related
I am having trouble getting my Pure CSS styling to work so that I can create a Menu on the left side of my webpage. This is what I get when I open the file. I am using Flask also just in case that is relevant.
This is what my site looks like:
And this is the code that I am using to create this file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <!-- Check Compattibility with Pure CSS -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Check Compattibility with Pure CSS -->
<meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Check Compattibility with Pure CSS -->
<link rel="stylesheet" href="https://unpkg.com/purecss#1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> -->
<title>Home</title>
</head>
<style>
.custom-restricted-width {
/* To limit the menu width to the content of the menu: */
/* display: inline-block; */
/* Or set the width explicitly: */
width: 10em;
}
</style>
<div class="pure-menu custom-restricted-width">
<!-- Home -->
<span class="pure-menu-heading">My Site</span>
<ul class="pure-menu-list">
<li class="pure-menu-item">Home</li>
<li class="pure-menu-item">Register</li>
</ul>
</div>
<body bgcolor="black" text="white">
<div class="container">
<div class="pure-u-24-24">
<img src="/static/images/Logo.png" class="pure-img" />
<h1>Welcome Home</h1><br><br><br>
<p>Please continue to check back for updates!</p><br><br>
<p>More comming soon...</p>
</div>
</div>
</body>
</html>
I am new to Pure CSS and I am trying to create an elegant menu that is on the side of the page similar to what you will find on the Menu Page on their website: https://purecss.io/menus/
First of all your menu needs to be within the <body></body> tags. See it here:
<body bgcolor="black" text="white">
<div class="pure-menu custom-restricted-width">
<span class="pure-menu-heading">My Site</span>
<ul class="pure-menu-list">
<li class="pure-menu-item">
Home
</li>
<li class="pure-menu-item">
<a href="newuser/register" class="pure-menu-
link">Register</a>
</li>
</ul>
</div>
<div class="container">
<div class="pure-u-24-24">
<img src="/static/images/Logo.png" class="pure-img" />
<h1>Welcome Home</h1>
<br>
<br>
<br>
<p>Please continue to check back for updates!</p>
<br>
<br>
<p>More comming soon...</p>
</div>
</div>
</body>
To create a similar sidebar menu as PureCSS has just add the following:
.custom-restricted-width {
width: 10em;
height: 100vh;
position: fixed;
z-index: 9;
bottom: 0;
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 1000;
background: #191818;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
and for the container you can add:
.container {
padding-left: 15em;
}
Here's the full code:
<head>
<meta charset="utf-8">
<!-- Check Compattibility with Pure CSS -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Check Compattibility with Pure CSS -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Check Compattibility with Pure CSS -->
<link rel="stylesheet" href="https://unpkg.com/purecss#1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> -->
<title>Home</title>
<style>
body {
background-color: black;
color: white;
}
.pure-menu {
width: 10em;
height: 100vh;
position: fixed;
z-index: 9;
bottom: 0;
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 1000;
background: #191818;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.container {
padding-left: 15em;
}
</style>
</head>
<body>
<div class="pure-menu custom-restricted-width">
<!-- Home -->
<span class="pure-menu-heading">My Site</span>
<ul class="pure-menu-list">
<li class="pure-menu-item">Home</li>
<li class="pure-menu-item">Register</li>
</ul>
</div>
<div class="container">
<div class="pure-u-24-24">
<img src="/static/images/Logo.png" class="pure-img" />
<h1>Welcome Home</h1>
<br>
<br>
<br>
<p>Please continue to check back for updates!</p>
<br>
<br>
<p>More comming soon...</p>
</div>
</div>
</body>
</html>
The whole bootstraps thing is killing me. I'm so lost on this subject if there's anyone who can help me out on this, I'll be really thankful.
Sorry that my style sheet can't connect to this website.
My nav-bar looks like
this
but it should look like
this
I truly hope you can help me get out of this mess!
* {
font-family: 'Oxygen', sans-serif;
background-color: maroon;
}
/** Header **/
#header-nav {
background-color: #f6b319;
border-radius: 0;
border: 0;
}
#logo-img {
background: url('../images/flying-cat.png') no-repeat;
width: 150px;
height: 150px;
left: 15px;
background-size: contain;
margin: 10px 10px 10px 10px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Oxygen:300,400,700" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<header>
<nav id="header-nav" class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a href="index.html" class="navbar-brand">
<div id="logo-img"></div>
</a>
</div>
</div>
</nav>
</div>
</div>
</nav>
</header>
</body>
</html>
The image doesn't fit because you've set it to be an absolute size, which is larger than the nav-bar. Your CSS class logo-img contains height: 150px which makes it break out of the nav-bar. Set a lower height property so that it fits within the nav-bar.
You've also used a div inside that navbar-brand div which isn't necessary and is causing problems, even in bootstrap boiler plates the navbar-brand image is an image element within that div. Put an image tag inside that navbar-brand div, specify a width and specify a height of auto so that it scales within its boundaries.
Here is the way it is done in Bootstrap examples, you will need to tweak this when using your own image source though.
Edit your navbar-header HTML so it looks like this:
<div class="navbar-header">
<a href="index.html" class="navbar-brand">
<img src="https://placeholdit.co//i/555x150"></a>
</div>
Add the following rule to your CSS:
.navbar-brand {
padding: 10px;
}
The problem was the unnecessary styling that bootstrap applies.
So
You'll need to set your Header to fixed height, Then set the div with the background to a height within the header's height for a logo it's should be problematic in the long run, In case of making the website responsive.
I made a somewhat close to what you need demo, take it from there to your desired design.
* {
font-family: 'Oxygen', sans-serif;
margin:0;padding:0;
}
header{
height: 100px;
}
#header-nav {
background-color: #f6b319;
border-radius: 0;
}
#header-nav,.container,.navbar-header,.navbar-brand{height: 100%;}
#logo-img {
background: url('4.png') no-repeat;
display:inline-block;
width:80px;
border:1px solid;
height: 80px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Oxygen:300,400,700" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<header>
<nav id="header-nav" class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a href="index.html" class="navbar-brand">
<div id="logo-img"></div>
</a>
</div>
</div>
</nav>
</div>
</div>
</nav>
</header>
</body>
</html>
I am using a fixed sidebar for my page and I am using bootstrap to make it responsive design. However, when I try different screen resolution, my content is going out of the screen rather than going down to the first div. Please see the screenshot for the more easy explanation.
I tried everything possible still nothing worked. Attached is screenshot for problem, and my code.
Expected Output: (1440px works fine)
Error : (1024px does not work)
Works : (954px works)
HTML :
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<header>
<div class="header_wrapper"></div>
</header>
<div class="sidebar">
<div class="container">
<div class="row">
<div style="height: 70px;background: #5bd495;"></div>
</div>
</div>
</div>
<section>
<div class="wrapper">
<div class="container" style="padding-top:50px;">
<div class="row">
<div class="col-md-7">
<div class="form_container" style="height:600px;background:#d69c9c; border:2px solid #000000;"></div>
</div>
<div class="col-md-5">
<div class="form_container" style="height:600px;background:#96e09e;border:2px solid #000000;"></div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
CSS :
html, body {
overflow-x : hidden;
}
.header_wrapper {
height: 70px;
background: #fff;
}
.sidebar {
background-color: #fff;
bottom: 0;
top: 0;
overflow: hidden;
width: 180px;
display: flex;
height: 100%;
position: fixed;
filter: drop-shadow(-5px 0px 10px #B0DFC0);
}
.wrapper {
background: #F1FAF4;
padding-left: 200px;
min-height: 100vh;
width: 100%;
}
.form_container {
background: #ffffff;
border-radius: 5px;
padding: 20px 30px;
filter: drop-shadow(0px 5px 15px #B0DFC0);
margin-bottom: 70px;
}
Any help will be appreciated.
I changed div container with div wrapper and that did it.
https://jsfiddle.net/jee7384b/13/
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<header>
<div class="header_wrapper"></div>
</header>
<div class="sidebar">
<div class="container">
<div class="row">
<div style="height: 70px;background: #5bd495;"></div>
</div>
</div>
</div>
<section>
<div class="container" style="padding-top:50px;">
<div class="wrapper">
<div class="row">
<div class="col-md-7">
<div class="form_container" style="height:600px;background:#d69c9c; border:2px solid #000000;"></div>
</div>
<div class="col-md-5">
<div class="form_container" style="height:600px;background:#96e09e;border:2px solid #000000;"></div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
Also, you should style everything in the css file.
I can't get any pics or links of pics to show. I tried using multiple
links and pics. Nothing works. All files in the same folder, and CSS
connected. I don't know what to do any more.
HTML
<!doctype html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta charset= "utf-8">
<title> portfolio website </title>
<link rel="stylesheet" href="stylesheet.css">
</head>
<html>
<body>
<section class:"main">
<div id="container">
<div class:"header">
<nav>
Home
About
Portfolio
</nav>
</div>
</div>
</section>
</body>
</html>
CSS
Body{
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.main{
height: 100%;
width: 100%;
margin: auto;
background-image: url("rockets.jpg");
background-repeat: none;
background-size: cover;
}
Wrong:
<section class:"main">
<div class:"header">
<nav>
<a href:"index.html">Home</a>
<a href:"About.html">About</a>
<a href:"Portfolio.html">Portfolio</a>
</nav>
</div>
</section>
Answer:
<section class="main">
<div class="header">
<nav>
Home
About
Portfolio
</nav>
</div>
</section>
NOT ":" YOU MUST USE "="
I am learning HTML and CSS and i have problems with positioning.
This is my HTML code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="https://bootswatch.com/simplex/bootstrap.min.css">
<meta charset="utf-8">
<title>My Website</title>
</head>
<body>
<div id="main">
<header>
<h1 id="baslik">Dünyanın en iyi web sitesi!</h1>
</header>
<nav>
<p>Bu sitede bulacaklarınız:</p>
<ul>
<li>Videolar</li>
<li>Blog yazıları</li>
<li>Eğlenceli şeyler...</li>
</ul>
</nav>
<footer>
<p>Bu sitenin copyright hakları tarafımıza aittir.</p>
</footer>
</div>
</body>
</html>
And this is my CSS code:
#main{
text-align: center;
}
I cant align my text, how do i do this with HTML and CSS?
To horizontally center a block element (like div), use margin: auto;
Setting the width of the element will prevent it from stretching out to the edges of its container.
The element will then take up the specified width, and the remaining space will be split equally between the two margins.
.center {
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}
.center {
text-align:center !important
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="https://bootswatch.com/simplex/bootstrap.min.css">
<meta charset="utf-8">
<title>My Website</title>
</head>
<body>
<div id="main" class="center">
<header>
<h1 id="baslik">Dünyanın en iyi web sitesi!</h1>
</header>
<nav>
<p>Bu sitede bulacaklarınız:</p>
<ul>
<li>Videolar</li>
<li>Blog yazıları</li>
<li>Eğlenceli şeyler...</li>
</ul>
</nav>
<footer>
<p>Bu sitenin copyright hakları tarafımıza aittir.</p>
</footer>
</div>
</body>
best to use a class when applying across many divs.