I'm not sure if I am able to achieve this using only CSS and HTML or if I need to use Javascript since after researching for a while I didn't really find much information on how to do this.
I haven't tried anything since I'm not really sure how I would go about this.
CSS:
* {
font-family: Montserrat;
margin: 0;
}
.menu {
text-align: center;
color: white;
width: 100%;
height: 80px;
background-color: white;
padding-top: 1%;
box-shadow: 10px -120px 900px 117px rgba(0,89,255,1);
}
ul {
color: black;
list-style: none;
margin-top: 1%;
font-size: 20px;
}
li {
text-decoration: none;
display: inline;
margin-left: 5%;
border-radius: 55px;
border-color: #005cff;
border-style: solid;
border-width: 3px;
padding: 0.2% 3% 0.2% 3%;
background-size: 200% 100%;
background-image: linear-gradient(to left, #62EF62 50%, white 50%);
-webkit-transition: background-position 2s;
-moz-transition: background-position 2s;
transition: 2s;
}
.first-title:hover {
padding: 0.2% 6% 0.2% 6%;
color: #005cff;
font-size: 25px;
background-position: 444.7 0%;
}
.second-title:hover {
padding: 0.2% 6% 0.2% 6%;
color: #005cff;
font-size: 25px;
background-position: 303 0%;
}
.third-title:hover {
padding: 0.2% 6% 0.2% 6%;
color: #005cff;
font-size: 25px;
background-position: 332 0%;
}
.sticky {
position: fixed;
top: 0;
width: 100%
}
.logo {
float: left;
margin-top: 1%;
margin-left: 20px;
width: 200px;
height: 64px;
transition: 2s;
}
.logo:hover {
width: 260px;
height: 83px;
margin-top: 0.5%;
margin-left: 10px;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
</head>
<body>
<header class="sticky">
<img class="logo" src="images/logo.png">
<div class="menu">
<ul>
<li class="first-title">O que é o Artigo 19?</li>
<li class="second-title">Portfólio</li>
<li class="third-title">Entrevistas</li>
</ul>
<div>
</header>
<div class="box1"></div>
</body>
</html>
My goal is to when hovering over a list element, for it to go down to an anchor point.
The most compatible way you can do this is to have links to anchors on which you simulate a click "on hover" some other elements.
By example:
<div id="somewhere">...</div>
...
<a id="gotoSomewhere" href="#somewhere">...</a>
...
<div onmouseover="document.getElementById('gotoSomewhere').click();">...</div>
https://jsfiddle.net/pgtozf25/
Related
This question already has answers here:
How can I vertically align elements in a div?
(28 answers)
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Flexbox: center horizontally and vertically
(14 answers)
css single or multiple line vertical align
(8 answers)
Closed 10 months ago.
I've included the JSFiddle below.You have to shrink the size to about 670px to see the issue. What I am trying to fix are the flexbox items at the bottom of the page where the footer says "call xxx-xxx-xxxx". It is hard to see because the background image isn't loaded on the JSFiddle, but when the screen shrinks, the text "to schedule a consultation" pushes into the white background. Initially I used the line height trick, making it equal to the container height, so it vertically centers my first line of text but pushes the second line 100px down off the footer. What I am going for is to make both lines of text center vertically together instead of 100px apart.
https://jsfiddle.net/4m7pysqb/
HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name=viewport content="width=device-width, initial-scale=1, maximum-scale=1">
<title>DLGTreecare - Home</title>
<link rel="icon" href="images/favicon-16x16.png">
<link rel="Stylesheet" href="DLGtreecare.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fork-awesome#1.1.7/css/fork-awesome.min.css" integrity="sha256-gsmEoJAws/Kd3CjuOQzLie5Q3yshhvmo7YNtBG7aaEY=" crossorigin="anonymous">
<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+Slab:wght#400;500&display=swap" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="dlg.js"></script>
</head>
<body>
<div class="header">
<div class="heroimagecontainer">
<img class="heroimage" src="images/heroimage.jpg">
</div>
<div class="redbar">
</div>
<div class="orangebar">
</div>
</div>
<div class="wrapper">
<div class="logowrapperdiv">
<div class="logoarea"> <p class="dlg">DLG Tree Care </p> <img class="logo" src="images/logotransparent.png"> </div>
<p class="undertree">Professional Tree Services</p>
</div>
<!-- https://drive.google.com/file/d/1YcJmJO-7mKo1er338P4AQ9Kn6HohaJsy/preview
https://drive.google.com/uc?export=view&id=1YcJmJO-7mKo1er338P4AQ9Kn6HohaJsy
-->
<div class= maincontent>
<p class="intro">PROVIDING THE "518" WITH ALL YOUR TREE CARE NEEDS!</p>
<iframe class="videointro" src="https://drive.google.com/file/d/1YcJmJO-7mKo1er338P4AQ9Kn6HohaJsy/preview" allow="autoplay"></iframe>
<div> </div>
<div class="phonebar"> Call 518-407-9500 for a free estimate!</div>
<div class="messagebuttontext"> Or message us on
<a class="messagebutton" href="https://m.me/DLGTreeCare">
<span style=color:orange>Facebook!</span>
<i class="fa fa-facebook-messenger fa-1x" aria-hidden="true"></i>
</a></div>
<div class="clearfix"></div>
</div>
<h2>Services</h2>
<h6>(Click images to see "before and after")</h6>
<div class="services">
<div class="servicenode"><button class="mybutton" type="button">></button><p class="servicetitle">Tree Removal</p><p class="servicedescription ">Removing dead or unwanted trees is sometimes a must, using the proper skills this can be done safely</p>
<img class="toggleon" src = "images/beforeafter/treeremovalflip_300x400.jpg">
</div>
<div class="servicenode"><button class="mybutton" type="button">></button><p class="servicetitle">Tree Trimming</p><p class="servicedescription ">Having your trees trimmed properly is important and can help maintain healthy future growth</p>
<img class="toggleon" src = "images/beforeafter/treetrimmingflip_300x400.jpg">
</div>
<div class="servicenode"><button class="mybutton" type="button">></button><p class="servicetitle">Stump Grinding</p><p class="servicedescription">By grinding the stump of the tree we are able to totally remove the stump in order to grow grass or replant something new</p>
<img class="toggleon" src = "images/beforeafter/stumpgrindingflip_300x400.jpg">
</div>
<div class="servicenode"><button class="mybutton" type="button">></button><p class="servicetitle">Hedge Trimming</p><p class="servicedescription ">From big to small, we have the tools and expertise for all your needs</p>
<img class="toggleon" src = "images/beforeafter/hedgetrimmingflip300x400.jpg">
</div>
<div class="servicenode"><button class="mybutton" type="button">></button><p class="servicetitle">Fruit Tree Pruning</p><p class="servicedescription">From big to small, we have the tools and expertise for all your needs</p>
<img class="toggleon" src = "images/beforeafter/fruittreeflip_300x400.jpg">
</div>
<div class="servicenode"><button class="mybutton" type="button">></button><p class="servicetitle">Wood & Brush Removal</p><p class="servicedescription">From big to small, we have the tools and expertise for all your needs</p>
<img class="toggleon" src = "images/beforeafter/treeremovalflip300x400.png">
</div>
<div class="servicenode"><button class="mybutton" type="button">></button><p class="servicetitle">Lot Clearing</p><p class="servicedescription">We can turn any wooded lot into an open usable space for the building of Homes, Businesses, etc.</p>
<img class="toggleon" src = "images/beforeafter/lotclearingflip300x400.jpg">
</div>
<div class="servicenode"><button class="mybutton" type="button">></button><p class="servicetitle">Cabling & Bracing</p><p class="servicedescription">Large branches and/or weak crotches sometimes can split under their own weight, cabling can keep this from happening without damaging the tree</p>
<img class="toggleon" src = "images/beforeafter/cablingbracingflip_300x400.jpg">
</div>
<div class="servicenode"><button class="mybutton" type="button">></button><p class="servicetitle">Storm Damage</p><p class="servicedescription">We're available 24/7 for any tree related emergencies</p>
<img class="toggleon" src = "images/beforeafter/stormdamageflip_300x400.jpg">
</div>
</div>
<h2>See more of our work</h2>
<div class="gallery">
<div class="gallerynode"><img class="galleryimg" src="images/GALLERY/Resized95FB95IMG951628801998990.jpg"></div>
<div class="gallerynode"><img class="galleryimg" src="images/GALLERY/FB95IMG951628860144118.jpg"></div>
<div class="gallerynode"><img class="galleryimg" src="images/GALLERY/FB_IMG_1628860108712.jpg"></div>
<div class="gallerynode"><img class="galleryimg" src="images/GALLERY/Resized_20210319_094919.jpg"></div>
<div class="gallerynode"><img class="galleryimg" src="images/GALLERY/Resized_20210325_104241.jpg"></div>
<div class="gallerynode"><img class="galleryimg" src="images/GALLERY/Resized_20210322_131140.jpg"></div>
</div>
<div class="flex-container">
<div class="flex-item">Serving the 518 area</div><div class="flex-item">Call 518-407-9500 to schedule a consultation.</div>
</div>
</div>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root{
/* base red */
--base-red: 10;
/* base yellow */
--base-yellow: 60;
/* base green */
--base-green: 99;
/*base blue*/
--base-blue: 200;
/* colors */
--brown-normal: hsla(17, 42%, 41%, 100%);
--brown-normal: hsla(17, 42%, 41%, 100%);
--red-light: hsla(var(--base-red), 100%, 75%, 100%);
--red-normal: hsla(var(--base-red), 100%, 45%, 100%);
--red-darker: hsla(var(--base-red), 100%, 35%, 100%);
--yellow-light: hsla(var(--base-yellow), 50%, 75%, 100%);
--yellow-normal: hsla(var(--base-yellow), 50%, 50%, 100%);
--yellow-darker: hsla(var(--base-yellow), 50%, 35%, 100%);
--green-light: hsla(var(--base-green), 50%, 75%, 100%);
--green-normal: hsla(var(--base-green), 50%, 50%, 100%);
--green-darker: hsla(var(--base-green), 50%, 35%, 100%);
--blue-light: hsla(var(--base-blue), 50%, 75%, 100%);
--blue-normal: hsla(var(--base-blue), 50%, 50%, 100%);
--blue-darker: hsla(var(--base-blue), 50%, 35%, 100%);
}
#font-face {
font-family: TreeHuggerMedium-lEqZ;
src: url(TreeHuggerMedium-lEqZ.ttf);
}
body {
min-height: 100vh;
max-height: 195.625rem;
background-image: url("images/stump.jpg");
background-color: white;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
margin: auto;
}
div.header {
min-width: 320px;
text-align: center;
height: 300px;
}
div.heroimagecontainer {
height: 210px;
width: inherit;
}
img.heroimage {
height: 100%;
width: 100%;
object-fit: cover;
}
div.redbar {
width: inherit;
background-color: var(--red-normal);
height: 20px;
}
div.orangebar {
width: inherit;
background-color: orange;
height: 70px;
}
div.logowrapperdiv {
min-width: 320px;
max-width: 1000px;
position: relative;
height: auto;
margin: auto;
top: -50px;
}
div.logoarea {
border-bottom-style: solid;
border-color: white;
border-width: 5px;
min-width: 320px;
max-width: 525px;
margin: auto;
height: 92px;
color: white;
position: relative;
}
img.logo {
max-width: 36.5%;
top: -188px;
display: block;
left: 17%;
position: relative;
overflow: visible;
z-index: 105;
object-fit: contain;
}
p.dlg {
font-family: Roboto Slab;
position: relative;
max-width: 525px;
min-width: 320px;
font-size: 3.9em;
font-weight: 500;
text-align: center;
white-space: pre;
top: 20px;
}
.undertree {
font-family: Roboto Slab;
font-weight: 500;
max-width: 525px;
color: white;
text-align: center;
height: 50px;
margin: auto;
margin-top: 0;
padding-bottom: 40px;
letter-spacing: 0.10em;
font-size: 2.16em;
position: relative;
top: 0px;
}
.wrapper {
margin: auto;
min-width: 320px;
max-width: 1000px;
background-image: linear-gradient(var(--brown-normal), orange);
padding-top: 50px;
border-radius: 0px 0px 5px 5px;
}
.maincontent {
min-width: 320px;
text-align: center;
height: auto;
color: white;
position: relative;
margin-bottom: 25px;
padding: 15px;
}
.intro {
font-family: Roboto Slab;
font-weight: 400;
font-size: 1.7em;
color: white;
text-align: center;
padding-bottom: 25px;
min-width: 300px;
max-width: 1000px;
}
.videointro {
min-width: 300px;
min-height: 225px;
position: relative;
display: block;
border-style: solid;
border-width: 2px;
border-color: white;
border-radius: 5px;
margin: auto;
}
.phonebar {
font-family: Roboto Slab;
font-weight: 400;
text-align: center;
position: relative;
float: left;
min-width: 295px;
max-width: 550px;
margin: 25px 0px 0px 20px;
font-size: 1.7em;
border: 1px solid white;
padding: 5px;
border-radius: 15px;
}
.phonebar a {
color: orange;
text-decoration: none;
}
.messagebutton {
display: inline-block;
text-align: center;
color: orange;
position: relative;
margin: auto;
text-decoration: none;
}
.messagebuttontext {
min-width: 295px;
max-width: 550px;
color: white;
position: relative;
font-family: Roboto Slab;
font-weight: 400;
font-size: 1.7em;
display: block;
float: right;
border: 1px solid white;
border-radius: 15px;
margin: 25px 20px 0px 0px;
padding: 5px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
/*code for photo galley */
h2 {
font-family: Roboto Slab;
font-weight: 400;
text-align: center;
font-size: 5em;
color: white;
margin: 50px auto;
position: relative;
}
h6 {
font-size: 2em;
font-family: Roboto Slab;
font-weight: 400;
text-align: center;
color: white;
position: relative;
margin: 10px auto;
}
button {
appearance: button;
background-color: white;
color: red;
cursor: pointer;
font-weight: 500;
border-color: white;
z-index: 101;
top: 30px;
left: 0px;
position: relative;
border-radius: 5px;
height: 25px;
width: 25px;
margin: 0 auto;
border-width: 1px;
transition: transform .3s linear;
}
.buttonrotate {
transform: rotate(90deg);
}
.services {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
width: auto;
height: auto;
margin: auto;
}
.servicenode {
position: relative;
width: 300px;
margin: auto;
margin-bottom: 25px;
}
.servicenode img {
display: block;
margin-left: auto;
margin-right: auto;
width: 300px;
height: 200px;
object-fit: none;
border: 1px solid red;
border-radius: 8px;
transition: 0.1s object-position ease;
position: relative;
}
.servicetitle {
font-family: Roboto Slab;
font-weight: 400;
font-size: 1.4em;
vertical-align:top;
display:inline-block;
color: white;
width: 100%;
position: relative;
text-align: center;
margin-bottom: 10px;
}
.servicedescription {
font-family: Roboto Slab;
font-weight: 400;
font-size: 1.2em;
color: white;
z-index: 100;
transition-property: opacity, border-radius;
transition-duration: .4s;
transition-timing-function: linear;
opacity: 0;
margin: auto;
width: 298px;
position: absolute;
display: block;
background: rgba(0,0,0, 0.6);
left: 0;
right: 0;
border-radius: 8px 8px 8px 8px;
text-align: center;
user-select: none; /* supported by Chrome and Opera */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
pointer-events: none;
}
.servicedescriptionshow {
position: absolute;
display: block;
width: 298px;
left: 0;
right: 0;
border-radius: 8px 8px 0px 0px;
text-align: center;
opacity: 1;
}
.toggleon {
object-position: top;
cursor: pointer;
}
.toggleoff {
object-position: bottom;
cursor: pointer;
}
/* Gallery stuff */
.gallery {
display: grid;
grid-template-columns: repeat(2, minmax(320px, auto));
width: auto;
height: auto;
margin: auto;
}
.gallerynode {
color: white;
text-align: center;
position: relative;
margin: auto;
border-width: 1px;
border-style: solid;
border-color: white;
height: 490px;
}
.galleryimg {
object-fit: cover;
width: 490px;
height: 490px;
}
/* footer stuff */
.footer {
height: 5vh;
width: 100%;
background-color: white;
position: relative;
margin-top: 100px;
bottom: 0;
border-style: solid;
border-color: red;
border-width: 3px;
border-radius: 0px 0px 5px 5px;
}
.flex-container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-top: 10px;
}
.flex-item {
-ms-flex-preferred-size: 33%;
flex-basis: 50%;
background-color: orange;
padding: 5px;
height: 100px;
color: white;
font-weight: bold;
font-size: 1.5em;
text-align: center;
border: 1px solid #333;
box-sizing: border-box;
line-height: 100px;
}
.flex-item a {
color: white;
}
/* media queries */
#media screen and (max-width: 1000px) {
div.maincontent {
height: auto;
}
.messagebuttontext {
float: none;
margin: 20px auto;
}
.phonebar {
float: none;
margin: 20px auto;
}
.gallery {
grid-template-columns: repeat(1, minmax(320px, auto));
}
.flex-item {
font-size: 1em;
}
}
#media screen and (max-width: 545px) {
div.logoarea {
width: 420px;
}
p.dlg {
font-size: 3em;
top: 35px;
}
img.logo {
left: 17%;
top: -130px;
}
.undertree {
font-size: 1.6em;
}
}
#media screen and (max-width: 500px) {
.gallerynode {
height: 320px;
}
.galleryimg {
object-fit: cover;
width: 320px;
height: 320px;
margin: auto;
}
}
#media screen and (max-width: 485px) {
div.logoarea {
width: 320px;
}
img.logo {
top: -86px;
left: 16%
}
p.dlg {
font-size: 2.6em;
top: 42px;
}
}
#media screen and (max-width: 354px) {
p.dlg {
font-size: 2.6em;
top: 42px;
}
.undertree {
font-size: 1.39em;
}
img.logo {
top: -86px;
}
.maincontent {
padding: 8px;
}
}
JS
$(document).ready(function(){
$(".servicenode > img").click(function(){
$(this).toggleClass('toggleon toggleoff');
});
$(".mybutton").click(function() {
$(this)
.siblings(".servicedescription")
.toggleClass('servicedescriptionshow');
$(this).toggleClass('buttonrotate');
});
});
I am trying to build a basic website with CSS and HTML. I have right now adjusted the code in the following file to shrink the images down to displayable size. But let's suppose i tried decreasing the width of my browser(i am using my laptop) the contents get reorganized and the text moves below the picture as expected. But the problem i am unable to scroll down. I have tried various solutions like setting overflow of html to scroll, setting overflow-x property to hidden in html.
<!DOCTYPE html>
<html>
<head>
<script data-ad-client="ca-pub-7652187840778484" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<title>
W3Coders
</title>
<link rel="stylesheet" href="better-style.css">
</head>
<body>
<div class = "topping">
<h1 style="float: left;color: rgb(58, 118, 209);">W3Coders</h1>
<h1 style="float: left;margin-left: 870px;color: rgb(58, 118, 209);">Definitely not world's most visited site</h1>
<img src="images/w3image.png" alt="The Logo" style="float: right; height: 68px;">
</div>
<div class="navbar">
Home
Resources
Skills
Rate
Contact
</div>
<div class="contents">
<img src="images/wwwimage.jpg" alt="Just a picture" style="height: 97%;float: left;">
<h1>Purpose Of Existence</h1>
<h4>W3Coders was created for the sole purpose of <s>helping people </s>showcasing my web development skills</h4>
<h4>It was at this moment i ran out of content to put here. Contact me if you have an idea on what i should do with all the empty space</h4>
<h1>Random stuff cuz i have idea what do with space:</h1>
<h4>"Any programmer can write code a computer can understand. It takes skills to write code a person can understand."</h4>
</div>
</body>
Here is my CSS file:
.topping
background-color: white;
width: 100%;
position: fixed;
top: 0px;
left: 0px;
height: 9%;
color: rgb(92, 84, 84);
padding: 0%;
}
.navbar{
background-color: rgb(92,84,84);
overflow: hidden;
width: 100%;
height: 6%;
position:fixed;
top:68px;
left:0px;
}
.people{
background-color: rgb(58,118,209);
overflow: hidden;
width: 100%;
position: relative;
top: 0px;
left: 0px;
}
.navbar a{
float:left;
color: white;
padding:14px 26px;
text-decoration: none;
text-align: center;
font-size: 17px;
}
.people a{
float:left;
color: white;
padding: 14px 26px;
text-decoration: none;
text-align: center;
font-size: 15px;
}
.navbar a.active{
color: white;
background-color: rgb(58,118,209);
}
.people a.active{
background-color:black;
color: white;
}
.navbar a:hover{
color: white;
background-color: cyan;
}
.people a:hover{
color:white;
background-color: rgb(92, 84, 84);
}
.contents{
background:url("images/background.jpg");
width: 100%;
position: fixed;
left: 0px;
top: 15%;
height: 85%;
}
.card{
background-color: white;
width: fit-content;
color: black;
padding: 20px;
margin: 10px;
border-radius: 5px;
border-width: 10px;
float: left;
border-color: black;
box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.2);
}
h2 .card{
text-align: center;
background-color: rgba(0, 0, 0, 0.5);
}
a img:hover{
border-radius: 10px;
border-width: 3px;
border-color: grey;
border-style: solid;
animation-name: links;
animation-duration: 3s;
animation-fill-mode: forwards;
}
#keyframes links{
0%{
border-color: grey;
}
25%{
border-color: red;
}
50%{
border-color: green;
}
100%{
border-color:blue;
}
}
I am using github pages to host my site: https://godofgames0070.github.io
Also, i am using Google Chrome to view my site.
from the live link I think it will help to amend the below:
//content will be scrollable
.contents {
background: url(images/background.jpg);
width: 100%;
position: fixed;
left: 0px;
top: 15%;
height: 85%;
overflow: scroll;
}
Navbar looks squeezed too, I have updated the top style, so it fixed and not hidden. Try the below:
.navbar {
background-color: rgb(92,84,84);
overflow: hidden;
width: 100%;
height: 6%;
position: fixed;
top: 9%;
left: 0px;
}
You're content has a CSS property position: fixed applied. You'll need to remove that in order to scroll your content.
If you are looking for a fixed background effect, consider background-attachment: fixed instead.
You can put your img in the contents with float: right to start and after reducing the screen using a media query to change the float
something like this :
.contents{
background-image: url("images/background.jpg");
width: 100%;
margin-top: 100px;
height: 85%;
}
.contents>img {
width: 30%;
float: left;
}
#media screen and (max-width:1000px) {
.contents>img {
width: 100%;
float: none;
}
}
I am working on this web page designing. I used visual studio code for this. And used HTML and CSS. Also I'm a beginner to web designing.
Design gets messy when resize the browser window size. Texts,images and other contents moves here and there.
Design changes when browser change (IE,chrome,Firefox). ex:-Border margins change.
What should I do?
*{
margin: 0%;
padding: 0%;
box-sizing: content-box;
}
html{
font-size: 10px;
font-family: 'Amatic SC', cursive;
}
section{
width: 100%;
height: 100%;
color: #fff;
background: linear-gradient(45deg,#770a0a,#a01919,#d3163f,#d3511e,#ee2f16);
background-size: 400% 400%;
position: relative;
animation: change 30s ease-in-out infinite;
}
h1{
font-size: 380%;
letter-spacing: 0.5vh;
text-transform: uppercase;
border: 0.3vh solid white;
border-radius: 7vh;
float: left;
position: absolute;
padding: 1% 5%;
padding-left: 1%;
top: 80%;
left: 50%;
transform: translate(-50%,-50%);
}
.imp:hover{
color:rgb(245, 231, 167);
}
#keyframes change{
0%{
background-position:0 50% ;
}
50%{
background-position:100% 50% ;
}
100%{
background-position:0 50% ;
}
}
.icon{
width: 11%;
position: absolute;
top: 32.5%;
left: 53%;
transform: translate(-50%,-50%);
}
.menu{
font-size: 280%;
border: 0.3vh solid white;
border-radius: 7vh;
float: right;
position: relative;
margin-right: 2%;
margin-top: 2%;
}
.menu ul li{
display: inline-block;
line-height: 150%;
margin: 0 3vh;
padding: 0.009%;
cursor: pointer;
position:relative;
font-weight: bold;
}
.menu ul li:hover{
font-size: 130%;
}
a:link, a:visited {
color: white;
cursor: auto;
}
a:link:active, a:visited:active {
color: white;
}
.Home{
color: rgb(245, 231, 167);
}
.about{
font-size: 300%;
position: absolute;
padding: 2%;
top: 53%;
left: 50%;
text-align: center;
transform: translate(-50%,-50%);
}
.hola{
font-size: 250%;
}
.next{
width: 3%;
position: absolute;
top: 80%;
left: 56%;
transform: translate(-50%,-50%);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">
<title>ImpressMe | Home</title>
<link href="https://fonts.googleapis.com/css2?family=Amatic+SC:wght#700&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<section>
<img class="icon" src="cute.png" alt="Boy" title="Hola....">
<div class="go">
<a href="sendme/sendme.html" class="imp">
<h1>Impress Me</h1>
<img class="next" src="go.png" alt="go"></a>
</div>
<div class="about">
<p class="hola">Hola.....!</p><p>you look familiar<br>I'm pretty sure you got something to impress me<br>Tell me<br>I would love to hear from you</p>
</div>
<div class="menu">
<ul>
<a href="index.html">
<li class="Home">Home</li></a>
<a href="About/about.html">
<li class="#">About</li></a>
<li class="#">Contact</li>
</ul>
</div>
</section>
</body>
</html>
I recommend you to learn about Bootstrap for example here. For your problem you actually only need Container and Grid System Basics, to make your site responsive.
Also for your problem with different browsers use Normalize.css to make it look more consistent. (It's already included in Bootstrap)
I'm having trouble with setting a transition, At the moment it goes from top to bottom (It's a border that shows when you hover). I'd like the transition to start from the middle and to spread to the side or at least to start from any side and to spread to the other...
My navigation menu anchors are using the navigation-link class !
* {
margin: 0px;
font-family: Futura;
font-weight: 100;
-webkit-font-smoothing: antialiased;
color: white;
}
body {
background-image: url("../Media/body-bg.png");
}
/* NOTE: Class */
.navigation-box {
height: 60px;
width: 100%;
background-color: MediumSeaGreen;
position: fixed;
z-index: 1;
min-width: 800px;
}
.navigation-menu {
margin: 6px 15px;
float: left;
color: white;
}
.navigation-link {
padding: 6px 10px;
font-weight: 100 !important;
font-size: 23px;
padding-bottom: 12px;
text-decoration: none;
border-bottom: 0px solid DarkGreen;
transition: left 2s, all ease-in-out 300ms;
}
.navigation-link:hover {
color: Wheat;
border-bottom: 3px solid DarkGreen;
}
.vline {
border-left: 2px solid white;
padding-bottom: 6px;
margin: 0px 0px 0px 10px;
}
<!DOCTYPE html>
<html>
<head>
<title>Cabinet Psychologie | 15ème</title>
<link href="./Data/CSS/styling.css" rel="stylesheet" type="text/css">
</head>
<body noresize="noresize">
<div class="navigation-box">
<h1 class="navigation-menu">
Accueil<a class="vline"></a>
Cours<a class="vline"></a>
Plans<a class="vline"></a>
Plus
</h1>
</div>
</body>
</html>
So if you know a way to make it work it would be very much appreciated
You may consider a pseudo-element to create the border. First you set 50% in left/right property and on hover you switch to 0 both and this will create the effect you want:
* {
margin: 0px;
font-family: Futura;
font-weight: 100;
-webkit-font-smoothing: antialiased;
color: white;
}
body {
background-image: url("../Media/body-bg.png");
}
/* NOTE: Class */
.navigation-box {
height: 60px;
width: 100%;
background-color: MediumSeaGreen;
position: fixed;
z-index: 1;
min-width: 800px;
}
.navigation-menu {
margin: 6px 15px;
float: left;
color: white;
}
.navigation-link {
padding: 6px 10px;
font-weight: 100 !important;
font-size: 23px;
padding-bottom: 12px;
text-decoration: none;
border-bottom: 0px solid DarkGreen;
position: relative;
}
.navigation-link:before {
content: "";
position: absolute;
height: 3px;
bottom: 0;
left: 50%;
right:50%;
background:DarkGreen;
transition: all ease-in-out 300ms;
}
.navigation-link:hover {
color: Wheat;
}
.navigation-link:hover::before,.navigation-link.active:before {
left: 0;
right:0;
}
.vline {
border-left: 2px solid white;
padding-bottom: 6px;
margin: 0px 0px 0px 10px;
}
<!DOCTYPE html>
<html>
<head>
<title>Cabinet Psychologie | 15ème</title>
<link href="./Data/CSS/styling.css" rel="stylesheet" type="text/css">
</head>
<body noresize="noresize">
<div class="navigation-box">
<h1 class="navigation-menu">
<a href="#" class="navigation-link active" >Accueil</a>
<a class="vline"></a>
Cours
<a class="vline"></a>
Plans
<a class="vline"></a>
Plus
</h1>
</div>
</body>
</html>
You can use a pseudoelement instead of border.
To make it start from the middle, set left or right at 50% and give the pseudoelement a width of 0. On transition just increase the width to 50% and it will grow in that direction.
Adjust the left or right setting from 50% to 0, and increase the width to make it span the entire link.
* {
margin: 0px;
font-family: Futura;
font-weight: 100;
-webkit-font-smoothing: antialiased;
color: white;
}
body {
background-image: url("../Media/body-bg.png");
}
/* NOTE: Class */
.navigation-box {
height: 60px;
width: 100%;
background-color: MediumSeaGreen;
position: fixed;
z-index: 1;
min-width: 800px;
}
.navigation-menu {
margin: 6px 15px;
float: left;
color: white;
}
.navigation-link {
padding: 6px 10px;
font-weight: 100 !important;
font-size: 23px;
padding-bottom: 12px;
text-decoration: none;
transition: left 2s, all ease-in-out 300ms;
position: relative;
}
.navigation-link:after {
content: '';
position: absolute;
left: 50%;
width: 0;
bottom: 0;
height: 2px;
background: darkgreen;
transition: width 300ms ease-in-out;
}
.navigation-link:hover {
color: Wheat;
}
.navigation-link:hover:after {
width: 50%;
}
.vline {
border-left: 2px solid white;
padding-bottom: 6px;
margin: 0px 0px 0px 10px;
}
<!DOCTYPE html>
<html>
<head>
<title>Cabinet Psychologie | 15ème</title>
<link href="./Data/CSS/styling.css" rel="stylesheet" type="text/css">
</head>
<body noresize="noresize">
<div class="navigation-box">
<h1 class="navigation-menu">
Accueil
<a class="vline"></a>
Cours
<a class="vline"></a>
Plans
<a class="vline"></a>
Plus
</h1>
</div>
</body>
</html>
You can achieve this by using :after or :before pseudo elements and by adding transform and transition property to it.
.navigation-box{
height: 60px;
width: 100%;
background-color: MediumSeaGreen;
position: fixed;
z-index: 1;
min-width: 800px;
}
a.navigation-link{
position: relative;
color: #000;
text-decoration: none;
}
a.navigation-link:hover {
color: #000;
}
a.navigation-link:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
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;
}
a.navigation-link:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
<div class="navigation-box">
<h1 class="navigation-menu">
Accueil<a class="vline"></a>
Cours<a class="vline"></a>
Plans<a class="vline"></a>
Plus
</h1>
</div>
I am working on a project and I basically copied and pasted some code I had made before that I know worked. The only difference is that now, the index.html and index.css is in a different folder. The CSS is being applied but the ID's at the bottom are not for some reason. Still, if you preview it on this website, it is completely fine.
/*
font-family: 'Dosis', sans-serif;
font-family: 'Chewy', cursive;
HEX: #fff2df
HEX: #d9ad7c
HEX: #a2836e
HEX: #674d3c
*/
body {
font-family: 'Dosis', sans-serif;
background: #fff2df;
}
/* Matan's Website */
h1 {
font-family: 'Chewy', cursive;
font-size: 65px;
text-align: center;
}
/* Line */
hr {
width: 600px;
border-style: solid;
margin-top: -15px;
}
/* All Boxes */
ul {
overflow: hidden;
text-align: center;
}
li {
float: center;
text-align: center;
display: inline-block;
}
a {
background-color: #000;
border-radius: 20px;
z-index: 100;
}
.buttons {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
width: 100%;
}
.links {
font-size: 37.5px;
text-decoration: none;
display: inline-block;
text-align: center;
}
/* Individual Boxes */
#word {
background-image: url('Pictures/word.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
padding: 162.75px 119.25px;
margin: 65px 75px 0px 0px;
color: #fff;
transition: all 0.5s ease-out;
}
#word:hover {
padding: 189.875px 139.125px;
transition: all 0.5s ease-out;
opacity: 0.8;
margin-right: 63.4px;
margin-left: -28.125px;
margin-top: 37.875px;
}
#pwpoint {
background-image: url('Pictures/powerpoint.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
padding: 162.75px 69.75px;
margin: 65px 75px 0px 0px;
color: #fff;
transition: all 0.5s ease-out;
}
#pwpoint:hover {
padding: 189.875px 81.375px;
transition: all 0.5s ease-out;
opacity: 0.8;
margin-right: 63.275px;
margin-left: -11.5px;
margin-top: 37.875px;
}
#ptshop {
background-image: url('../Pictures/photoshop.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
padding: 162.75px 99px;
margin: 65px 0px 0px 0px;
color: #fff;
transition: all 0.5s ease-out;
}
#ptshop:hover {
padding: 189.875px 115.5px;
transition: all 0.5s ease-out;
opacity: 0.8;
margin-right: -28.125px;
margin-left: -4.9px;
margin-top: 37.875px;
}
<!DOCTYPE html>
<html>
<head>
<title>Portfolio</title>
<link rel="stylesheet" type="text/css" href="../index.css">
<link href="https://fonts.googleapis.com/css?family=Chewy|Dosis" rel="stylesheet">
</head>
<body>
<h1>My Portfolio</h1>
<hr>
<div class="allbuttons">
<ul class="buttons">
<li><a class="links" id="word" href="Word/index.html">Word</a></li>
<li><a class="links" id="pwpoint" href="Powerpoint/index.html">Powerpoint</a></li>
<li><a class="links" id="ptshop" href="Photoshop/index.html">Photoshop</a></li>
<li><a class="links" id="other" href="Other/index.html">Other</a></li>
</ul>
</div>
</body>
</html>
None of the IDs work, but the CSS file is linked correctly and displayed correctly. Any ideas why this might be?
"Eliminate all other factors, and the one which remains must be the truth."
As Sherlock Holmes frequently pointed out, when searching for the truth (in this case, a solution) we must first eliminate the clutter.
Relative vs. Absolute URLs are convenient when accurate, but prone to error for a variety of reasons.
A tidy workspace is invaluable; when coding any project, create and maintain a controlled and suitable space to help with avoiding and diagnosing problems that might crop up.
...
Other mildly patronising platitudes are available on request ;-)