I'm pretty much stuck on a site that I'm trying to build in the responsiveness part
And in the position of the text.
The img background -
What I try to do it to make the img background full cover in big screens
and on the small screen, I want that they will see the ball in the img - it only works for me for big screens.
Next to this, I want to put H1 and p, but I want it will be near the ball in the background img
My code:
/* hamburger */
const hamburger = document.querySelector("#hamburger");
const navUL = document.querySelector("#nav-ul");
hamburger.addEventListener('click', () =>{
navUL.classList.toggle('show');
});
html,body{
padding: 0;
margin: 0;
font-family: 'Rubik', sans-serif;
}
*{
box-sizing: border-box;
}
ul{
list-style: none;
}
a{
text-decoration: none;
color: #fff;
}
.container{
max-width: 1100px;
margin: 0 auto;
}
.btn{
background-color: #222f3e;
color: white;
padding: 6px 10px;
border-radius: 20px;
cursor: pointer;
}
.btn:hover{
color: #2e86de;
background-color: #fff;
}
/* Header */
header {
background-image: url(./img/main-img.jpg) ;
background-repeat: no-repeat;
background-position: bottom center ;
background-size: cover;
}
/* Navbar */
#navbar{
padding: 10px;
}
#navbar .container{
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
}
.hamburger{
display: none;
background: transparent;
border: 0;
color: #fff;
font-size: 20px;
cursor: pointer;
}
.hamburger:focus{
outline: none;
}
#navbar ul{
padding-right: 0;
}
#navbar ul li {
display: inline-block;
font-size: 18px;
}
.logo a{
padding: 20px;
color: #fff;
}
/* Showcase Section */
#showcase{
min-height: 700px;
}
#showcase .container{
}
#media screen and (max-width: 767px){
#nav-ul{
display: none;
width: 100%;
}
#nav-ul.show{
display: flex;
justify-content: center;
}
.hamburger{
display: block;
}
}
<!DOCTYPE html>
<html dir="rtl" lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<link href="https://fonts.googleapis.com/css2?family=Rubik:ital,wght#0,400;0,500;0,600;1,400;1,500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./mystyle.css">
<title>Football</title>
</head>
<body>
<header>
<nav id="navbar">
<div dir="ltr" class="container">
<h1 class="logo">
Natan Football
</h1>
<button class="hamburger" id="hamburger">
<i class="fas fa-bars"></i>
</button>
<ul id="nav-ul">
<li><a class="btn"href="#">צור קשר</a></li>
<li><a class="btn"href="#">מה מציעים</a></li>
<li><a class="btn"href="#">קצת עלינו</a></li>
<li><a class="btn" href="./index.html">דף הבית</a> </li>
</ul>
</div>
</nav>
<section id="showcase">
<div class="container grid">
<h1>some text asgfasfgfdfgdg</h1>
<p>dsgsdgdfgdfgdg</p>
</div>
</section>
</header>
<script src="./app.js"></script>
</body>
</html>
here i have provided a very basic code cause i don't have your full code.
I just added few css properties for you needs. If you run this code on big screen the .text will be top and center of the page. and you go in small screen text will be near the ball as you asked. You can even use px for height. It's just an example to show you.
body {
background: url("https://i.stack.imgur.com/08nIZ.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
position: relative;
}
.text {
position: absolute;
color: white;
text-align: center;
left: 50%;
transform: translateX(-50%);
}
#media screen and (max-width: 767px) {
body {
height: 40vh;
}
.text {
top: 50%;
}
}
<div class="wrapper">
<div class="text">
<h1>some text asgfasfgfdfgdg</h1>
<p>dsgsdgdfgdfgdg</p>
</div>
</div>
Let me know if it doesn't work for you.
Related
hello I have been working on the web and the image slider displays on top of the nav bar on a small screen the following is my code
HTML code
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
section{
position: relative ;
width: 100%;
min-height:100vh;
padding: 100px;
display: flex;
justify-content: space-between;
align-items: center;
background: rgb(36, 2, 28);
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
header img {
width: 79px;
height: 79px;
border-radius: 50%;
padding: 5px;
}
header{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 90px;
padding: 20px 100px;
display: flex;
justify-content: space-between;
align-items: center;
background: peachpuff;
}
header .logo{
position: relative;
max-width: 80px;
}
.harmbuger{
display:none;
}
header ul{
position: relative;
display: flex;
}
header ul li{
list-style: none;
}
header ul li a{
display: block;
color: #000000;
font-weight: 400;
margin-left: 40px;
text-decoration: none;
border-radius: 50px;
margin: 0 5px;
transition: 0.2s;
padding: 10px 25px;
}
header ul li a:hover{
color: red;
background: white;
}
header ul li a.active{
color: red;
background: white;
}
#media only screen and (max-width: 1320px){
header{
padding: 0 50px;
}
}
#media only screen and (max-width: 1100px){
header{
padding: 0 30px;
}
}
#media only screen and (max-width: 900px){
.harmbuger{
display: block;
cursor: pointer;
}
.harmbuger .line{
width: 30px;
height: 3px;
background: #000000;
margin: 6px 0;
}
.nav-bar.active{
height: 450px;
}
.nav-bar{
height: 0px;
position: absolute;
top: 80px;
left: 0;
right: 0;
width: 100vw;
background: peachpuff;
transition: 0.5s;
overflow: hidden;
}
.nav-bar ul{
display: block;
width: fit-content;
margin: 80px auto 0 auto;
text-align: center;
transition: 0.5s;
opacity: 0;
}
.nav-bar.active ul{
opacity: 1;
}
.nav-bar ul li a{
margin-bottom: 12px;
}
}
.container{
width: 100%;
height: 60vh;
background: #222;
display: flex;
align-items: center;
justify-content: center;
}
.swiper{
width: 97%;
height: fit-content;
}
.swiper-slide img{
width: 100%;
height: 55vh;
}
<!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" />
<link rel="stylesheet" href="style2.css" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper#8/swiper-bundle.min.css"
/>
<title>Document</title>
</head>
<body>
<section>
<header>
<img src="https://picsum.photos/80/80" />
<div class="harmbuger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<nav class="nav-bar">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Login</li>
</ul>
</nav>
</header>
<div class="container">
<!-- Slider main container -->
<div class="swiper">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide"><img src="https://picsum.photos/400/400" /></div>
<div class="swiper-slide"><img src="https://picsum.photos/400/400" /></div>
<div class="swiper-slide"><img src="https://picsum.photos/400/400" /></div>
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
</section>
<script>
harmbuger = document.querySelector(".harmbuger");
harmbuger.onclick = function () {
navBar = document.querySelector(".nav-bar");
navBar.classList.toggle("active");
};
</script>
<script src="https://cdn.jsdelivr.net/npm/swiper#8/swiper-bundle.min.js"></script>
<script>
const swiper = new Swiper(".swiper", {
autoplay:{
delay: 4000,
disaleOnInteraction: false,
},
loop: true,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
// Navigation arrows
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
</script>
</body>
</html>
output
i want the slider not to show up on toggle menu
I was expecting the menu bar to display on top of the slider on toggle. The output image for this can be shown as above
I have an adminHeader.php as belows,
<div class="main_content">
<div style="width: 100%">
<div class="header" style="align-items: center;font-size: 17px;">
<a style=" text-decoration-line: none;">Dashboard</a>
<div>
<a href="#" name="age" id="age" data-toggle="modal" data-target="#add_data_Modal" > <img src="../assets/images/logo.png" width="35" height="35" style="vertical-align:middle"/> <?php echo htmlspecialchars($_SESSION["username"]); ?></a>
<i class="fa fa-toggle-left"></i> logout
</div>
</div>
I need to use this header on top of my page as follows,
So I implemented as follows,
<?php
// Initialize the session
session_start();
// Check if the user is logged in, if not then redirect him to login page
if(!isset($_SESSION["loggedin"]) || $_SESSION["loggedin"] !== true){
header("location: login.php");
exit;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Anomaly Monitoring Dashboard</title>
<link rel="stylesheet" href="styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
</head>
<div class="wrapper">
<div class="sidebar">
<h2> Dashboard</h2>
<ul>
<li><i class="fa fa-home"></i> Home</li>
</ul>
</div>
<div class="main_content">
<?php
include "./adminHeader.php";
?>
</div>
</div>
</div>
But I can see the rendered HTMl as below,
And I need to scroll to see all the fields. Can someone help me to fit this to the screen? '
update:
Here is my css class.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
font-family: 'Josefin Sans', sans-serif;
}
.wrapper{
display: flex;
position: relative;
}
.wrapper .main_content{
width: 100%;
margin-left: 220px;
}
.wrapper .main_content .header{
padding: 20px;
background: #fff;
color: #717171;
border-bottom: 1px solid #e0e4e8;
display: flex;
justify-content: space-between;
position: relative;
}
.wrapper .main_content .info{
margin: 20px;
color: #717171;
line-height: 25px;
}
.wrapper .main_content .info div{
margin-bottom: 20px;
}
.error {
color: red;
}
.vega-actions {display: none}
h3 { font-family: 'Source Code Pro', sans-serif;
font-weight: 50;
font-size: 10px;
margin-top:0px;
display: block;
color: #404040;
text-align: right;
border-top:3px solid #000;
}
.card {
display: flex;
justify-content: center;
}
.flex {
display: flex;
justify-content: space-between;
}
Can someone show me what should I include in css file to show as I required?
try flexbox or grid layout
https://developer.mozilla.org/de/docs/Web/CSS/CSS_Grid_Layout
for flexbox layouts use the display: flex on the container and add flex-flow-column for a vertical flexible layout. Then set you width and heights to your needs, with flex-shrink: 0 for elements with fixed width or height.
.wrapper {
display: flex;
width: 100%;
height: 100%
}
.sidebar {
width: <sidebar width>;
display: block;
height: 100%;
flex-shrink: 0;
}
.main-content {
width: calc(100% - <sidebar width>);
display: block | <or flex or grid, ...>;
}
I can't see the navigation bar even tho everything is right
Nothing is missing and its really getting frustrating now and I don't know what to do can someone help me please
<html>
<head>
<link href="app.css" rel="stylesheet" />
</head>
<body>
<header>
<div id="topbar">
</div>
<nav id="main">
</nav>
</header>
</body>
</html>
body{
margin: 0;
}
header{
background: url('./images/bg.png') bottom center no-repeat;
background-size: cover;
height: 750px;
}
#topbar {
height: 70px;
}
nav#main {
height: 150px;
color: white;
border-radius: 4px;
}
The problem is in your nav#main you only applied color:white property so the nav is displayed and it is white in color . As also your background-color is not set so it is not visible .
So apply a background-color property . See below snippet
body {
margin: 0;
}
header {
background: url('./images/bg.png') bottom center no-repeat;
background-size: cover;
height: 750px;
}
#topbar {
height: 70px;
text-align: center;
}
nav#main {
color: white;
background-color: red;
display: block;
padding: 10px;
border-radius: 4px;
}
#main a {
padding: 10px;
display: inline-block;
cursor: pointer;
}
#main a:hover {
background-color: green;
}
<html>
<head>
<link href="app.css" rel="stylesheet" />
</head>
<body>
<header>
<div id="topbar">
Hello
</div>
<nav id="main">
<a>View</a>
<a>Help</a>
<a>Data</a>
</nav>
</header>
</body>
</html>
I'm not sure how to add a grid below the current background picture and continue adding info. When I try adding a grid now, it just creates one below the navbar and not below the current background.
/**********BODY GENERAL**********/
body {
margin: 0;
}
/* Fix this one day */
.bg-img {
background: url('https://images.unsplash.com/photo-1508781015212-46d58946bb05?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=39b69f4b9e54ea449f90e3d714bf9215&auto=format&fit=crop&w=1951&q=80') no-repeat center center;
background-size: cover;
height: 100vh;
}
strong {
font-weight: bold;
}
/*********NAVIGATION*********/
nav {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-gap: 1em;
grid-auto-rows: auto;
text-align: center;
align-items: center;
background: /*rgba(255, 51, 0, .95);
*/
z-index: 10;
}
#media screen and (max-width: 900px) {
nav {
grid-template-columns: 100%;
grid-template-rows: auto;
grid-gap: 1em;
}
}
.menu1 {
grid-column: 1;
}
.menu2 {
grid-column: 2;
}
.logo {
grid-column: 3;
font-family: 'Montserrat', sans-serif;
font-weight: lighter;
font-size: 28px;
width: 500px;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
height: 7vh;
margin-bottom: 25px;
color: #000;
text-transform: uppercase;
letter-spacing: 3px;
}
.menu3 {
grid-column: 4;
}
.menu4 {
grid-column: 5;
}
/**************HOVER ANIMATION**************/
div>a {
font-family: 'Raleway';
text-transform: uppercase;
text-decoration: none;
color: #000;
position: relative;
font-size: 0.8rem;
}
div>a:hover {
color: #000;
}
div>a:before {
content: "";
position: absolute;
width: 100%;
height: 1px;
bottom: -4px;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
div>a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
/**********MAIN HEADER***********/
header {
color: white;
justify-content: center;
align-content: center;
top: 0;
bottom: 0;
left: 0;
}
/**********BODY*****************/
.Minfo {
color: red;
width: 100%;
padding-top: 100px;
font-family: 'Montserrat', sans-serif;
font-weight: lighter;
}
.subtitle {
padding-left: 4em;
padding-top: 29em;
font-size: 100%;
color: #fff;
}
.title {
font-size: 3em;
text-align: left;
color: #FFF;
padding-bottom: 0px;
}
.subtext {
padding-top: 0px;
color: #FFF;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Centennial It's Academic</title>
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon">
<link href="main.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400" rel="stylesheet">
</head>
<body>
<div class="bg-img">
<header>
<nav class="container">
<div class="menu1">
<a class="navLinks" href="#home">Home</a>
</div>
<div class="menu2">
<a class="navLinks" href="#upcoming">Tournaments</a>
</div>
<div class="logo">
<p>It's Academic</p>
</div>
<div class="menu3">
<a class="navLinks" href="#history">History</a>
</div>
<div class="menu4">
<a class="navLinks" href="#faq">Contact Info</a>
</div>
</nav>
<!-- This cluster of info -->
<div class="Minfo">
<div class="subtitle">CENTENNIAL
<br>
<div class="title"> It's Academic</div>
<br>
<div class="subtext">Meets every Tuesday in Room 506</div>
</div>
</div>
</header>
<!--Don't even -->
</div>
</body>
</html>
codepen (Please open in full page mode):
An example of how I would want it to look is like on this website, where all the info is under that background.
I'm not sure what you mean. There are 2 options in my mind:
Push the grid below the image. In this case, just move the header tag from .bg-img and put it after. https://codepen.io/moshfeu/pen/ERWVdZ
You want the fixed effect (just like the website you attached). In this case, you need to use position: fixed on the header.
https://codepen.io/moshfeu/pen/aKJvXW
The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial containing block established by the viewport
https://developer.mozilla.org/en-US/docs/Web/CSS/position
When the page is loaded the footer does not appear in the correct location. It seems to load at the bottom of the browser(I want it to go past the bottom of the browser to bottom of page if to much content on page) but then when you scroll to see the rest of the content it stays in the same place on the page which is covering content(doesn't stay on bottom of browser). I've set position: absolute; and bottom: 0; but these don't to seem to work as intended.
HTML:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Projects</title>
<link rel="stylesheet" href="Style/style.css">
</head>
<body>
<header>
<nav class="row">
<a class="mobileNav"></a>
<ul class="col offset-desktop-7 desktop-5 offset-tablet-6 tablet-6 mobile-12">
<li class="col desktop-4 tablet-4">Home</li>
<li class="col desktop-4 tablet-4">Projects</li>
<li class="col desktop-4 tablet-4">Contact</li>
</ul>
</nav>
<section class="col desktop-12 tablet-12 mobile-12">
<h1>Lewis Blundell</h1>
<h2>Junior Web Developer</h2>
<h3>HTML5 | CSS3 | JavaScript | PHP | MYSQL</h3>
</section>
</header>
<section class="wrapper">
<h1 class="col desktop-12 tablet-12 mobile-12">Projects</h1>
<article class="row">
<aside class="col desktop-3">
<img src="Images/placeHolder.png" alt="">
<img src="Images/placeHolder.png" alt="">
<img src="Images/placeHolder.png" alt="">
</aside>
<div class="col desktop-6">
<p>hello</p>
</div>
<aside class="col desktop-3">
<img src="Images/placeHolder.png" alt="">
<img src="Images/placeHolder.png" alt="">
<img src="Images/placeHolder.png" alt="">
</aside>
</article>
</section>
<footer class="row">
<p class="col desktop-12 tablet-12 mobile-12"> Lewis Blundell © 2017</p>
</footer>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="Script/script.js"></script>
</html>
SASS:
/* --- Variables --- */
$columnAmount : 12; /* This is used to set the amount of columns that will be used for a responsive grid layout */
$green : #3E9633; /* Main green background colour used throughout site */
$white : #FFFFFF;
$grey : #444444;
/* --- General Styling --- */
aside{
img{
width: 75%;
margin-botom: 20px;
}
}
html{
height: 100%;
}
.wrapper{
padding-left: 10px;
padding-right: 10px;
padding-bottom:40px;
}
body{
padding-bottom:50px;
position: relative;
background-color: $grey;
color: $white;
text-align: center;
margin: 0;
h1{
text-align: center;
color: $white;
font-size: 3rem;
text-decoration: underline;
}
}
header{
color: $white;
overflow: hidden;
background-color: $green;
nav{
.mobileNav{
display: block;
width: 100%;
height: 40px;
background: url(../Images/burger.png) no-repeat 98% center;
cursor:pointer;
}
overflow:hidden;
ul{
list-style-type: none;
margin: 0;
padding: 0;
li{
display: inline-block;
padding: 14px 16px;
text-align: center;
font-size: 150%;
&:hover{
background-color: $grey;
}
a{
color: $white;
text-decoration: none;
}
}
}
}
h1{
font-size: 5rem;
text-align: center;
margin-bottom: 0px;
text-decoration: none;
}
h2{
font-size: 3rem;
text-align: center;
margin-top: 0px;
}
h3{
font-size: 2rem;
text-align: center;
}
}
footer{
display: inline-block;
position: absolute;
left:0;
bottom: 0;
width:100%;
height: 50px;
background-color: $green;
}
/* --- Media Queries and General Layout--- */
.row{
clear:both;
width:100%;
}
.col{
display:block;
float:left;
box-sizing: border-box;
max-height:auto;
}
#media screen and (max-width:480px){ /* Styling for mobile viewports */
#for $i from 1 through $columnAmount{
.mobile-#{$i}{
width: 100% / $columnAmount * $i;
}
.offset-mobile-#{$i}{
margin-left: 100% / $columnAmount * $i;
}
}
header{
nav{
ul{
background-color: $grey;
height: 0;
li{
float:none;
text-align: left;
width: 100%;
margin: 0;
a{
padding: 10px;
border-bottom: 1px solid $white;
display: block;
margin: 0;
}
}
}
}
}
header nav ul.open{
height: auto;
}
}
#media screen and (min-width:481px) and (max-width:800px){ /* Styling for tablet viewports */
#for $i from 1 through $columnAmount{
.tablet-#{$i}{
width: 100% / $columnAmount * $i;
}
.offset-tablet-#{$i}{
margin-left: 100% / $columnAmount * $i;
}
}
header nav a.mobileNav{
display:none;
}
}
#media screen and (min-width:801px){ /* Styling for desktop viewports */
#for $i from 1 through $columnAmount{
.desktop-#{$i}{
width: 100% / $columnAmount * $i;
}
.offset-desktop-#{$i}{
margin-left: 100% / $columnAmount * $i;
}
}
header nav a.mobileNav{
display:none;
}
}
Images used in site:
try fixed position
position:fixed;
bottom:0;
if you want to be at bottom of browser page if your content height is less than window browser and if is more it be at the bottom of content you can try this
body{
position: relative;
}
footer{
bottom:0;
}
and use this javascript code for that
$(document).resize(function() {
var bh = $("body").height();
browser_height = window.innerHeight;
if(bh<browser_height)
$("footer").css("position","fixed");
else
$("footer").css("position","absloute");
})