the content of the website is displaying over the navigation bar when scrolling
i dont know how to fix it
flksjfjsda lf jjsdfjkldj fkjhdsjk fjkdhfjk lkfjs lkdjflksa fkjhdfjk fd
f jksdfhjksh fakjhjkds hjkh jksdjklhjkf hs
here is the html:
<body>
<header>
<p class="logo">גכשד יחכי</p>
<nav>
<ul class="nav_links">
<li>אודות</li>
<li>שירותים</li>
<li>פרוייקטים</li>
</ul>
</nav>
<a class="cta" href="https://support.microsoft.com/he-il/contactus/"><button>צור קשר</button></a>
</header>
<div class="intro"></div>
<main>
<h1 class="main-text">פסיכולוגית<br /> חינוכית</h1>
<p class="secendery-text">חשדג גשחכי היא פסיכולוגית חינוכית<br /> העוסקת במקצוע זה למעלה מ20 שנה <br /></p>
<img src="images/psychology1.png" alt="" class="side-image" />
</main>
<div class="card">
<img src="images/img_avatar.png" alt="Avatar" >
<div class="container">
<h4><b>b</b></h4>
<p> </p>
</div>
</div>
</body>
</html>
this is the css that refers to the problem:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
li, a, button {
font-family: 'Rubik', sans-serif;
font-weight: 500;
font-size: 16px;
text-decoration: none;
color: #edf0f1;
}
header {
display: flex;
background-color: #24252A;
justify-content: space-between;
align-items: center;
padding: 10px 10%;
position: fixed;
top: 0;
width: 100%;
}
.nav_links {
list-style: none;
display: flex;
}
nav{
order:2;
}
.cta{
order:1;
}
.nav_links li {
display: inline-block;
padding: 0px 20px;
}
.nav_links li a {
transition: all 0.3s ease 0s;
}
.nav_links li a:hover {
color:#ddad34;
}
.main-text {
font-family: 'Rubik', sans-serif;
margin: 0;
padding: 0;
position:absolute;
top: 32%;
right: 25%;
direction: rtl;
font-size: 60px;
color: black;
}
.secendery-text {
font-family: 'Rubik', sans-serif;
margin: 0;
padding: 0;
position: absolute;
top: 48%;
right: 25%;
direction: rtl;
color: darkgray;
}
.side-image {
position: absolute;
top: 20%;
left: 5%;
animation: float 6s ease-in-out infinite;
}
#keyframes float {
0% {
transform: translatey(0px);
}
50% {
transform: translatey(-20px);
}
100% {
transform: translatey(0px);
}
}
.
if anyone know how can i fix this
please help
thanks
In your case you should add a z-index property for the header element. By default if the element z-index is not specified it will layer elements by the order of declaration (last html element with position: absolute/fixed will overflow previous elements with position: absolute/fixed). Try specifying the z-index property for the header
header { z-index: 100;}
in the css file.
And for the next time, try to provide a more specific overview of your problem instead of that gibberish.
Related
I want to separate the text styling from my header and body. How can I achieve this? I also want to keep the text in the heading inside my hero/background. I also need to add the appropriate media queries or flex's I assume? I am new to coding so please be weary that I am unfamiliar with all the terminology and coding elements. I am in coding bootcamp. I appreciate your help and tips.
* {
margin:0;
padding: 0;
}
/* Header Start */
#vanta-canvas {
width: 100vw;
height: 50vh;
}
.inner_header {
width: 100%;
height: 100%;
margin: 0 auto;
text-align: center;
position: relative;
top: 75px;
}
.flex {
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
flex-wrap: nowrap;
align-content: normal;
}
.highlight {
color: blue;
font-family: cursive;
-webkit-font-smoothing: antialiased;
}
body {
color: #fff;
font-family: cursive;
-webkit-font-smoothing: antialiased;
font-size: 25px;
background-color: #b4b4b4;
}
button {
background-color: transparent;
border-radius: 45% 3px;
color: #b4b4b4;
padding: 10px 20px;
text-decoration: none;
display: inline-block;
font-size: 20px;
cursor: pointer;
margin: 0 auto;
text-align: center;
position: relative;
top: 90px;
-webkit-font-smoothing: antialiased;
transition: all 0.3s;
}
button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.3s;
}
button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.3s;
}
button:hover, button:focus{
background-color: grey;
color: blue;
}
button:hover span {
padding-right: 25px;
}
button:hover span:after{
opacity: 1;
right: 0;
}
/* Header End */
<!DOCTYPE html>
<html lang="en_US">
<head>
<meta charset="UTF-8" />
<title>Portfolio</title>
<link rel="stylesheet" href="./assets/css/style.css" >
</head>
<body>
<div id="vanta-canvas">
<header>
<h1 class="inner_header" class="flex">
Hello, I'm
<span class="highlight">Brian Mojica.</span>
<br>
I'm a full-stack web develop.
</h1>
<button class="flex" style="vertical-align:middle"><span>
View My Work
</span></button>
</header>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta#latest/dist/vanta.waves.min.js"></script>
<script>
VANTA.WAVES({
el: "#vanta-canvas",
mouseControls: true,
touchControls: true,
gyroControls: false,
minHeight: 100.00,
minWidth: 100.00,
scale: 1.00,
scaleMobile: 1.00,
color: 0x102
})
</script>
</div>
<nav>
Test
</nav>
</body>
</html>
If what you want is a line divider, you can use the <hr> tag.
There are different style attributes you can add, too.
<hr class="dashed">
<hr class="dotted">
<hr class="solid">
<hr class="rounded">
I hope this helps.
Edit:
Sorry, I didn't read your question close enough.
You can add
header {
(css)
}
Just like you have
body {
(css)
}
This is my code for an auto showroom that's in development:
https://jsfiddle.net/zoh03cdv/
I have two problems.
First problem is getting images and text next to each other despite the fact I set contentbox1 to 2 columns:
* {
width: 890px;
}
a {
text-decoration: none;
}
header{
margin: 0; padding: 2em 5em 4em; color: #efefef;
overflow:hidden;
position: relative;
}
header::after{
content:"";
position:absolute;
top:0;
left:0;
height: 100%;
width:100%;
transform: skewY(-3deg);
background: red;
transform-origin: bottom left;
z-index: -1;
}
div.content {
font-family: sans-serif;
font-size: 16px;
width: 460px;
}
ul.vehicleinfo {
display: flex;
flex: 1 0 15%;
flex-grow: 3;
flex-wrap: wrap;
flex-basis: 100%;
width: 800px;
margin-left: 16px;
list-style: none;
margin: 3px;
justify-content: space-between;
}
ul.vehicleinfo li {
font-family: sans-serif;
font-size: 88%;
color: #333;
background-color: yellow;
margin-bottom: 10px;
width: 400px;
margin-right: 40px;
margin: 0 0 40px 0;
justify-content: flex-end;
}
ul.vehicleinfo li * {
display: block;
}
ul.vehicleinfo li h3 {
font-size: 1.2em;
}
div.autocontent {
width: 760px;
margin-left: 70px;
}
.price {
width: 550px;
text-align: center;
}
.contentbox1 {
column-span: 2;
}
.autoimg img {
width: 340px;
}
.descript1 {
font-size: 14px;
float: left;
}
<div class="autocontent">
<ul class="vehicleinfo">
<li><h3>2019 FORD TRANSIT CONVERSIONS 2.0 ECOBLUE 170 17 SEAT MINIBUS WITH EVERY EXTRA</h3></li>
<li><h3 class="price">£36,500</h3></li>
</ul>
<div class="contentbox1">
<div class="autoimg"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/ff/2015_Ford_Transit_460_Trend_2.2.jpg/1024px-2015_Ford_Transit_460_Trend_2.2.jpg"></div>
<div class="descript1">gold, 24,000 miles</div>
</div>
</div>
The text gets cut off and doesn't go on to another line as I expected: https://i.stack.imgur.com/tQMGN.jpg
I'm trying to get things evenly aligned having done this as a DIV and LI within DIVs.
Any help is appreciated to get this code looking more esthetically pleasing, it's working partially but the div part isn't the easiest, at least for anything contained within the class autocontent.
My problem is getting the columns to work properly.
For more proper UI layout and UX.
Try to update your HTML and CSS with following code
a {
text-decoration: none;
}
header {
margin: 0;
padding: 2em 5em 4em;
color: #efefef;
overflow: hidden;
position: relative;
}
header::after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
transform: skewY(-3deg);
background: red;
transform-origin: bottom left;
z-index: -1;
}
div.content {
font-family: sans-serif;
font-size: 16px;
width: 460px;
}
ul.vehicleinfo {
display: block;
list-style: none;
padding: 0 10px;
}
ul.vehicleinfo li {
font-family: sans-serif;
font-size: 88%;
color: #333;
margin: 0;
padding: 5px 0;
border-radius: 10px;
}
ul.vehicleinfo li * {
display: block;
}
ul.vehicleinfo li h3 {
font-size: 1.2em;
font-weight: 700;
}
div.autocontent {
width: 760px;
margin-left: 70px;
display: flex;
background: #f3f3f3;
border-radius: 10px;
overflow: hidden;
padding: 10px;
margin-bottom: 10px;
}
.price {
font-weight: 700;
}
.contentbox1 {
column-span: 2;
}
.autoimg img {
width: 340px;
border-radius: 8px;
}
.descript1 {
font-size: 14px;
float: left;
}
<header>
<h1>VAN CENTRE</h1>
<h2>1 Anytown Road, Birmingham</h2>
<h3>0121 496 0000</h3>
</header>
<div class="content">
<div class="autocontent">
<div class="contentbox1">
<div class="autoimg"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2b/2019_Vauxhall_Vivaro_2700_Edition_1.5_Front.jpg/1024px-2019_Vauxhall_Vivaro_2700_Edition_1.5_Front.jpg"></div>
</div>
<ul class="vehicleinfo">
<li>
<h3>2019 VAUXHALL VIVARO 1.6 TURBO D</h3>
</li>
<li>
<h3 class="price">£22,500</h3>
</li>
<div class="descript1">white, 20,000 miles</div>
</ul>
</div>
<div class="autocontent">
<div class="contentbox1">
<div class="autoimg"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/ff/2015_Ford_Transit_460_Trend_2.2.jpg/1024px-2015_Ford_Transit_460_Trend_2.2.jpg"></div>
</div>
<ul class="vehicleinfo">
<li>
<h3>2019 FORD TRANSIT CONVERSIONS 2.0 ECOBLUE 170 17 SEAT MINIBUS</h3>
</li>
<li>
<h3 class="price">£36,500</h3>
</li>
<div class="descript1">gold, 24,000 miles</div>
</ul>
</div>
Enjoy!
First, there are many things that can be improved in your code and I'll try to explain a bit but I won't change you code too much so you can understand:
with * you target all the elements so putting a width: 890px it's not a good default, if you want to hard reset the browser default. This is the reason your text gets cut off, you can try:
* {
margin: 0;
padding: 0;
}
use the .content div better, you can style it to align all your autocontent, so a small width doesn't do anything good if his children are larger. To get the content aligned with the header text, we can use the same padding or at least the padding-left:
div.content {
width: 800px;
padding: 2em 5em 4em;
}
use display: flex to align the elements BUT don't overuse it. Too many properties will make your code too complex, if you need some examples just check this reference: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
SIMPLIFY the code as much as you can, it will be easier to understand and debug.
Take a look in the FINAL example:
* {
margin: 0;
padding: 0;
}
body {
font-family: sans-serif;
font-size: 16px;
color: #333;
}
a {
text-decoration: none;
}
header {
margin: 0;
padding: 2em 5em 4em;
color: #efefef;
overflow: hidden;
position: relative;
}
header::after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
transform: skewY(-3deg);
background: red;
transform-origin: bottom left;
z-index: -1;
}
div.content {
width: 800px;
padding: 2em 5em 4em;
}
.autocontent {
border-top: 1px solid #ddd;
padding: 0 1rem;
margin-bottom: 1rem;
}
ul.vehicleinfo {
display: flex;
justify-content: space-between;
list-style: none;
}
ul.vehicleinfo li {
padding: 1rem 0;
}
.price {
text-align: right;
}
.contentbox {
display: flex;
gap: 1rem;
}
.autoimg img {
width: 320px;
}
<header>
<h1>VAN CENTRE</h1>
<h2>1 Anytown Road, Birmingham</h2>
<h3>0121 496 0000</h3>
</header>
<div class="content">
<div class="autocontent">
<ul class="vehicleinfo">
<li>
<h3>2019 VAUXHALL VIVARO 1.6 TURBO D</h3>
</li>
<li>
<h3 class="price">£22,500</h3>
</li>
</ul>
<div class="contentbox">
<div class="autoimg"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2b/2019_Vauxhall_Vivaro_2700_Edition_1.5_Front.jpg/1024px-2019_Vauxhall_Vivaro_2700_Edition_1.5_Front.jpg"></div>
<div class="description">white, 20,000 miles</div>
</div>
</div>
<div class="autocontent">
<ul class="vehicleinfo">
<li>
<h3>2019 FORD TRANSIT CONVERSIONS 2.0 ECOBLUE 170 17 SEAT MINIBUS</h3>
</li>
<li>
<h3 class="price">£36,500</h3>
</li>
</ul>
<div class="contentbox">
<div class="autoimg"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/ff/2015_Ford_Transit_460_Trend_2.2.jpg/1024px-2015_Ford_Transit_460_Trend_2.2.jpg"></div>
<div class="description">gold, 24,000 miles</div>
</div>
</div>
Mainly, You're using <ul> and <li> items in the wrong way. UL tag represents a list, and description of an item isn't a list. UL tag should be used wrapping all vehicles and a vehicle should be list item. Other things are:
Invalid html body/head tags
No need for defining the same defining font-family in each html element separately
Code is messy and a lot of CSS properties are use for no reason
Try to avoid fixed widths/heights
I removed a lot of your code and tried to prepare a good starting point for you to continue working on whatever you want to build here.
body {
font-family: sans-serif !important;
}
a {
text-decoration: none;
}
header {
margin: 0;
padding: 2em 5em 4em;
color: #efefef;
overflow: hidden;
position: relative;
}
header::after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
transform: skewY(-3deg);
background: red;
transform-origin: bottom left;
z-index: -1;
}
.content {
font-size: 16px;
padding: 50px 0;
}
.vehicle-list {
list-style: none;
margin: 0;
padding: 0;
}
.vehicle {
margin-bottom: 70px;
}
.vehicle__title {
display: flex;
justify-content: space-between;
background-color: yellow;
padding: 10px;
margin-bottom: 16px;
}
.vehicle__title h3 {
font-size: 1.2em;
max-width: 500px;
}
.vehicle__price {
text-align: right;
}
.vehicle__info {
display: flex;
}
.vehicle__description {
font-size: 14px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Used vans for sale - Van Centre | No.1 in the Midlands</title>
</head>
<body>
<header>
<h1>VAN CENTRE</h1>
<h2>1 Anytown Road, Birmingham</h2>
<h3>0121 496 0000</h3>
</header>
<div class="content">
<ul class="vehicle-list">
<li class="vehicle">
<div class="vehicle__title">
<h3>2019 VAUXHALL VIVARO 1.6 TURBO D</h3>
<h3 class="vehicle__price">£22,500</h3>
</div>
<div class="vehicle__info">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2b/2019_Vauxhall_Vivaro_2700_Edition_1.5_Front.jpg/1024px-2019_Vauxhall_Vivaro_2700_Edition_1.5_Front.jpg" class="vehicle__img" width="340px" />
<div class="vehicle__description">white, 20,000 miles</div>
</div>
</li>
<li class="vehicle">
<div class="vehicle__title">
<h3>2019 FORD TRANSIT CONVERSIONS 2.0 ECOBLUE 170 17 SEAT MINIBUS</h3>
<h3 class="vehicle__price">£36,500</h3>
</div>
<div class="vehicle__info">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/ff/2015_Ford_Transit_460_Trend_2.2.jpg/1024px-2015_Ford_Transit_460_Trend_2.2.jpg" class="vehicle__img" width="340px" />
<div class="vehicle__description">gold, 24,000 miles</div>
</div>
</li>
</ul>
</div>
</body>
</html>
So far, I have managed to get my footer to always stick to the bottom, however, I have been struggling to get the content or images on my webpage to push the footer down. I have been trying absolute, fixed, relative positions for the footer but to no avail as the content in the class "container2" continues to go under the footer. It also shouldn't be sticky footer similar to the nav bar but like a natural footer where it is pushed down by content.
HTML/CSS: https://jsfiddle.net/jof0hzhc/2/
HTML
<!DOCTYPE html>
<html lang="en" class="app">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ResponsiveNav</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" src="js/script.js"> </script>
</head>
<body class="bg2">
<div class="wrapper">
<header>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo">
ResponsiveNav
</div>
<div class="menu">
<ul>
<li>Home</li> <!--Classifying the button as "activepage" will allow the button to be red when the user is on the page.-->
<li>Current page</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</div>
</nav>
</header>
<section class="content">
<p class="apphead">Heading</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="container2">
<p class="apptext">Sub-heading</p>
<div class="games">
<img src="images/1.png">
<img src="images/2.jpg">
<img src="images/3.jpg">
<img src="images/4.jpg">
<img src="images/5.jpg">
<img src="images/6.jpg">
</div>
<br><br><br><br><br><br><br><br>
</div>
</section>
</div>
<footer>
<p class="foot">
Footer text. <br>
__________________________________________________________________________________________________ <br> <br>
About us
|
Contact us <br>
__________________________________________________________________________________________________
<section>
<p class="foot">Social Media</p>
<span class="social">
<img src="images/mail.png" alt="Mail" width="50px" height="50px"/>
<img src="images/facebook.png" alt="Facebook" width="50px" height="50px"/>
<img src="images/twitter.png" alt="Twitter" width="50px" height="50px"/>
</span>
</section>
<section>
<h3>All rights reserved<br></h3>
</section>
</p>
</footer>
</body>
</html>
CSS
html, body {
margin: 0;
padding: 0;
width: 98%;
background-color: black;
min-height: 100%;
}
body {
font-family: "Helvetica Neue",sans-serif; /*Keep this font or hamburger disappears*/
font-weight: lighter;
}
header {
width: 98%;
height: 13vh;
}
li>a{display:;}
li>a:hover, /*li hover makes the area around the list of text have a block of color around it when you hover over the text*/
li>a:focus{color:red;text-decoration:underline;} /*li focus is when you select the element, the element gets into a focus*/
footer { /*How do I even make the footer always stick at the very bottom no wonder the dimensions of the browser?*/
width:100%;
position:absolute;
height:300px;
font-size: 15px;
margin-left:auto;
margin-right:auto;
text-align:center;
background-color:black;
border-width: 10px;
color: white;
}
p {
color: black;
position: relative;
margin: 5px;
padding: 10px;
}
a { /*General styling for links to other pages or websites*/
text-decoration:none;
position:relative;
font-family: Trebuchet MS, sans-serif;
}
h2 { /*Styling for site title*/
font-size: 50px;
text-align:left;
color:white;
margin: 20px;
font-family: courier;
}
h3 {
font-size:20px;
padding-left:20px;
color: white;
}
.content { /*the main container that consists of most of the existing content*/
margin-top:5px;
width:100%;
height: 1400px;
margin-left: auto;
margin-right: auto;
}
.logo {
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: #fff;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
z-index: 1; /*Allows for the navigation bar to stack on top of content and not appear as it overlaps*/
}
nav ul {
line-height: 60px;
list-style: none;
background: black;
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: orange;
opacity: 10;
}
nav ul li {
display: inline-block;
padding: 16px 40px;;
}
nav ul li a {
text-decoration: none;
color: white;
font-size: 16px;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: orange;
display: none;
}
.activepage {
font-size: 25px;
color: red;
text-decoration: underline;
}
.welcome {
font-family: courier;
}
.inquiry {
font-size: 17px;
color: white;
}
.container2 {
background-color: darkgrey;
padding: 10px;
margin: 0;
width: 97.8%;
height: 1000px;
z-index: 0;
position:absolute;
overflow:hidden;
}
p.heading {
font-size: 25px;
font-weight: bold;
font-family: courier;
}
.foot {
color: white;
}
.bg2 {
background-image:url("hex.jpg");
height: 550px;
width: 102%;
}
.apphead {
color: white;
font-size: 100px;
font-family: courier;
}
.apptext {
color:white;
font-size: 45px;
font-weight: bold;
font-family: courier;
}
.games {
margin:0;
position:relative;
border:solid white;
}
.games img {
width: 640px;
height:250px;
padding: 5px;
transition: 1s;
}
.games img:hover {
transform: scale(1.1);
}
.item img{
display:block;
}
#media(max-width: 786px) {
.logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
}
nav.black ul {
background: #000;
}
.showing {
max-height: 34em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px;
text-align: center;
}
.menu-icon {
display: block;
}
}
First off, I am a bit confused why you are using the <br> tag so much, but it almost looks like you are trying to space the elements with them. You may want to use padding or margin to do that.
Lastly, I think what you are looking for is position: fixed. Try this:
footer {
width:100%;
position: fixed; /* use fixed instead of absolute */
bottom: 0; /* set bottom to 0 */
height:300px;
font-size: 15px;
margin-left:auto;
margin-right:auto;
text-align:center;
background-color:black;
border-width: 10px;
color: white;
}
You have several problems in your css. The main problem for your content not to appear is that you're using overflow: hidden; in container2 and height: 1000px; this causes everything that exceeds 1000px won't be show. Try removing overflow: hidden or overflow: x-scroll.
This is the documentation for the overflow property, I suggest you read it for a better understanding of your problem. https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
There are some things that you should change 1. you are using absolute position outside relative 2. using absolute values for hight is not good practice 3. is always better use padding and margin to make space ect. Keep fixed position only for header nav and comment out all fixed hight values(px)and absolute and relative positioning to start with. Absolute position should be inside relative if there is not special reason not to do that. To get out from main problem start with footer and container2. But there is lot more to fix.
You need set a min-height for html, body {min-height: 100vh;}
Set footer as position: fixed; bottom: 0; left: 0;
Hopefully this will help you.
I'm working on my very own website and I used this codepen
https://codepen.io/nikolamitic/pen/vpNoNq to create an animation on my name.
It works fine until I want to reduce the line-height of my elements without they hide each other (see the "j" and "p" caracters).
You can take a look here :
h1{
display:inline-block;
font-family: sans-serif;
font-size: 110px;
letter-spacing: 3px;
margin:0;
line-height: 90px;
}
h1 p{margin:0;}
/*************************************************/
/************* LETTER ANIMATION HOVER ************/
/* Thanks to https://codepen.io/nikolamitic/pen/vpNoNq */
.letter-anim{
position: relative;
color: #fff;
background-color: #222;
overflow: hidden;
cursor: pointer;
}
.letter-anim .letter-anim-dynamic,
.letter-anim .letter-anim-dynamic p {
display: flex;
justify-content: left;
align-items: center;
position: absolute;
top:0;
left:0;
right:0;
bottom:0;
z-index: 2;
transition: all ease 0.7s;
}
.letter-anim .letter-anim-dynamic{
background-color: #fff;
color: #222;
overflow: hidden;
}
.letter-anim.active .letter-anim-dynamic,
.letter-anim:hover .letter-anim-dynamic {
transform: translateX(100%);
}
.letter-anim.active .letter-anim-dynamic p,
.letter-anim:hover .letter-anim-dynamic p {
transform: translateX(-100%);
}
.letter-anim-static{
font-size: 76px;
}
<h1 class="letter-anim h1-firstname">
<span class="letter-anim-static">
レ・ジェーン<br/>
</span>
<span class="letter-anim-dynamic">
<p>Lejeune</p>
</span>
</h1>
<br/>
<h1 class="letter-anim h1-lastname">
<span class="letter-anim-static">
ジョゼーフ<br/>
</span>
<span class="letter-anim-dynamic">
<p>Joseph</p>
</span>
</h1>
Thank for you help !
Just add margin-top : -10px in css for this css property letter-anim.letter-anim-dynamic p
<h1 class="letter-anim h1-firstname">
<span class="letter-anim-static">
レ・ジェーン<br/>
</span>
<span class="letter-anim-dynamic">
<p>Lejeune</p>
</span>
</h1>
<br/>
<h1 class="letter-anim h1-lastname">
<span class="letter-anim-static">
ジョゼーフ<br/>
</span>
<span class="letter-anim-dynamic">
<p>Joseph</p>
</span>
</h1>
h1{
display:inline-block;
font-family: sans-serif;
font-size: 110px;
letter-spacing: 3px;
margin:0;
line-height: 90px;
}
h1 p{margin:0;}
/*************************************************/
/************* LETTER ANIMATION HOVER ************/
/* Thanks to https://codepen.io/nikolamitic/pen/vpNoNq */
.letter-anim{
position: relative;
color: #fff;
background-color: #222;
overflow: hidden;
cursor: pointer;
}
.letter-anim .letter-anim-dynamic,
.letter-anim .letter-anim-dynamic p {
display: flex;
justify-content: left;
align-items: center;
position: absolute;
top:0;
left:0;
right:0;
bottom:0;
z-index: 2;
transition: all ease 0.7s;
margin-top: -10px;
}
.letter-anim .letter-anim-dynamic{
background-color: #fff;
color: #222;
overflow: hidden;
}
.letter-anim.active .letter-anim-dynamic,
.letter-anim:hover .letter-anim-dynamic {
transform: translateX(100%);
}
.letter-anim.active .letter-anim-dynamic p,
.letter-anim:hover .letter-anim-dynamic p {
transform: translateX(-100%);
}
.letter-anim-static{
font-size: 76px;
}
It looks like the container for the h1 is just bit too small for the characters that are inside.
Try adding a simple padding:10px to h1 and the container should have more space for them.
The problem that i am facing is that text inside the a tag is not adjusting on a single line.
Here's my html.
<html>
<head>
<link rel="stylesheet" href="style5.css" type="text/css">
</head>
<body>
<div id="outer">
<ul>
<li class="current">Home</li>
<li>content</li>
<li>search</li>
<li>more</li>
</ul>
<div id="homepage">
Set as Homepage
</div>
<div id="clear">
</div>
</div>
<div id="wrapper">
<div id="pic">
<img src="logo.png">
<div id="content">
<p> Secure Search </p>
</div>
</div>
<div id="forms">
<form>
<input type="text" name="submit" size="70" style="font-size:20pt;"/>
</form>
<div id="pic_2">
<img src="powerd-by-google.png">
</div>
</div>
<div id="footer">
© 2012 - We Respect your Privacy - About AVG Secure Search
</div>
</div>
</body>
</html>
and here's my css.
body
{
margin: 0;
padding: 0;
background-color: white;
}
h1,h2,h3
{
margin: 0;
padding: 0;
}
p,ul,ol,li
{
margin: 0;
padding: 0;
}
#outer
{
background-color: rgb(67,68,71);
}
#outer ul
{
list-style: none;
margin-left: 5px;
border-left: 1px solid;
}
#outer li
{
float: left;
}
.current
{
background-color: rgb(56,63,137);
}
#outer a
{
width: 90px;
display: block;
text-transform: uppercase;
text-decoration: none;
text-align: center;
font-weight: bold;
color: white;
border-right: 1px solid;
padding: 5px;
}
#outer a:hover
{
color: black;
background-color: white;
}
#outer .current a:hover
{
color: white;
background-color: inherit;
}
#homepage a
{
float: right;
font-weight: none;
color: white;
background-color: rgb(67,68,71);
display: inline;
text-transform: lowercase;
border-right: none;
}
#homepage a:hover
{
color: white;
background-color: inherit;
}
#clear
{
clear: both;
}
#wrapper
{
width: 960px;
margin: 0 auto;
overflow: auto;
}
#pic
{
margin-top: 100px;
margin-left: 389px;
position: relative;
}
#content
{
position: absolute;
top: 60px;
left: 90px;
}
#forms
{
margin-top: 50px;
position: relative;
}
#pic_2
{
position: absolute;
top: 0px;
left: 867px;
}
#footer
{
width: 500px;
margin: 375px auto 0px;
}
#footer a
{
text-decoration: none;
}
now the problem is with the a tag in the homepage div, i have tried very hard but i have no idea why its text is not adjusting on a single line instead it seems to creep up on multiple lines.
Any suggestions in this matter would be really helpful.
thank you.
I'm assuming you're talking about the 'set as homepage' button.
If so, The issue is that your css is writing a fixed with to the element inherited from #outer a which is making that element 90px wide.
You can fix this by simply adding the css style width: inherit; to #homepage a
Example:
http://jsfiddle.net/2jByx/1/
You need to add width to the "set as homepage" element
#homepage a {
.....
width: 120px; //added width
}
Take a look at here, http://jsfiddle.net/VkmHr/
is that you looking for?