I struggle to get my hover to connect with a GIF. Obviously, it does not show when I set display:none on the text, but I thought the #witch:hover ~ text{ display:block} really would work.
#animcontainer {
position: relative;
margin: auto;
overflow-y: hidden;
#witch {
position: absolute;
left: 2950px;
height: 150px;
bottom: 50px;
z-index: 2` #hello {
position: absolute;
display: none;
border: 25px;
padding: 1.5rem;
background-color: orange;
left: 3100px;
font-size: 20px;
border-radius: 20px;
text-align: center;
bottom: 200px;
left: 2900px;
z-index: 1;
}
#witch:target~#hello {
display: block;
}
<html>
<head>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="animcontainer">
<div id="hello"> text</div>
<img id="potato" src="url">
</div>
</body>
</html>
Related
I am working on my laptop in VSCode, after I make my site, I go to stylizing him and after I make this after my pleasure, when I minimize Google, it doesn't keep his resolution.
This is full screen on google chrome.
And this is google chrome minimized.
What could I do for websites keep his style as I put him in full screen?
HTML:
<!--HTML SOURCE--!>
<!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> </title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-
awesome.min.css">
</head>
<header>
<div class="navbar">
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>Proiecte</li>
<li>Staff</li>
<li>Contact</li>
</ul>
<img class="background" src="casey-horner-O0R5XZfKUGQ-unsplash.jpg">
</div>
</header>
<body>
<h1 class="titlu"> Titlu </h1>
<div>
<img class="h" src="Other-html-5-icon.png">
<img class="c" src="CSS.png">
</div>
<div class="cards">
<img class="x" src="pngegg.png">
<img class="y" src="pngegg.png">
<img class="z" src="pngegg.png">
</div>
<div class="faicon">
<i class="fa fa-line-chart" aria-hidden="true"></i>
</div>
<div class="textfaicon">
<h1> Economisire </h1>
<p><b>Economisesti timp si mai ales,<br>
economisesti bani! Cat astepti sa<br>
cauti o echipa care sa iti poata <br>
crea site-ul dorit, noi iti suntem<br>
aproape. Cerem foarte putin pentru<br>
serviciile pe care le oferim!</b>
</p>
</div>
</body>
</html>
CSS:
/* CSS */
#import url('https://fonts.googleapis.com/css2?family=Roboto:wght#100&display=swap');
body{
margin: 0px;
padding: 0px;
font-family: 'Roboto', sans-serif;
}
* {
box-sizing:
border-box;
}
.background {
position: absolute;
width: 100%;
height: 120%;
padding-left: 0%;
padding-bottom: 10%;
-webkit-filter: brightness(50%);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.titlu{
position: relative;
color: white;
padding-left: 45%;
padding-top: 15%;
font-size: 50px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgb(31, 37, 77);
opacity: 100%;
letter-spacing: 2px;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
display: block;
}
li a:hover {
background-color: #111;
}
.active {
background-color: #0c3a55;
}
.h{
position: relative;
height: 300px;
width: 300px;
bottom: -270px;
margin-bottom: 10%;
padding: 0%;
left: 8%;
}
.c{
position: relative;
height: 300px;
width: 220px;
bottom: -100px;
margin-bottom: 0%;
padding: 0%;
left: 50%;
}
.x{
position: relative;
height: 500px;
width: 250px;
left: 10%;
}
.y{
position: relative;
height: 500px;
width: 250px;
left: 10%;
}
.z{
position: relative;
height: 500px;
width: 250px;
left: 10%;
}
.cards{
position: relative;
bottom: -150px;
left: 13%;
padding: 0%;
margin: 0%;
width: 200;
}
.faicon{
position: relative;
text-align: center;
right: 2%;
bottom: 290px;
font-size: 40px;
}
.textfaicon{
text-align: center;
position:relative;
color:#0c3a55;
font-size: 10px;
bottom: 280px;
right: 2%;
letter-spacing: 2px;
}
I suggest you to try bootstrap, it will make your page responsive to all types of devices and you will write less CSS. Good luck.
I am trying to design a website with a background scrolling slower than the foreground. I found a few different ways to go about doing this, and I decided on using CSS parallax. It works, however, it doesn't scroll by itself, and creates a scrollbar under my title bar. I am having trouble getting it to scroll by itself without a scrollbar. Here is a simple example of my code thus far.
index.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Title</title>
<link rel="icon" type="image/png" href="icon.png">
<div id="top">
<img src="icon.png" alt="Icon"
style="width:150px;height:150px;">
<nav>
Home  
<a href="b.html"/>B</a>
</nav>
</div>
</head>
<body>
<div class="parallax">
<div class="parallax__layer parallax__layer--back">
<img src="apt.jpg" alt="Apartment">
</div>
<div class="parallax__layer parallax__layer--base">
<h1>Welcome!</h1>
<p>Sample Text</p>
</div>
</div>
</body>
css/style.css
.parallax
{
-webkit-perspective: 1px;
perspective: 1px;
height: 100vh;
overflow: hidden;
position: relative;
z-index: -1;
}
.parallax__layer
{
position: absolute;
overflow: auto;
right: 0;
left: 0;
}
.parallax__layer--base
{
top: 150px;
-webkit-transform: translateZ(0);
transform: translateZ(0);
margin-left: 15%;
margin-right: 15%;
}
.parallax__layer--back
{
-webkit-transform: translateZ(-1px);
transform: translateZ(-1px) scale(2);
}
nav
{
position: fixed;
top: 0px;
z-index: 3200;
font-size: 40px;
top: 55px;
right: 30px;
}
a
{
text-decoration: none;
color: red;
}
h1
{
color: red;
}
p
{
color: red;
}
div
{
background-color: 2f2f2f;
}
#top
{
position: fixed;
top: 0;
left: 0;
height: 150px;
width: 100%;
background-color: 3c3c3c;
}
Thank you!
So, the solution to my problem isn't too complicated. First, you have to put everything you want this to apply to into a div, and you have to disable overflow in that div. Then in the child divs which you want to be able to scroll, you re-enable overflow, then you set that scrollbar to have a width of 0. You can also use that parent div to solve position problems such as the ones I ran into.
index.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Title</title>
<link rel="icon" type="image/png" href="icon.png">
<div class="navbar">
<img src="icon.png" alt="Red Star" style="width:150px;height:150px;">
<nav>
Home  
<a href=b.html/>B</a>
</nav>
</div>
</head>
<body>
<div class="base">
<div class="parallax">
<div class="parallax-layer parallax-back">
<img src="apt.jpg" alt="Apartment">
</div>
<div class="parallax-layer parallax-base">
<h1>Welcome to the website!</h1>
<p>Sample text!</p>
</div>
</div>
</div>
</body>
.parallax::-webkit-scrollbar {
width: 0;
}
.base
{
position: fixed;
top: 0;
left: 0;
right: 0;
overflow: hidden;
}
.navbar
{
position: fixed;
top: 0;
left: 0;
height: 150px;
width: 100%;
background-color: 3c3c3c;
z-index: 3200;
}
.parallax
{
width: 100%;
-webkit-perspective: 1px;
perspective: 1px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
z-index: -1;
}
.parallax-layer
{
position: absolute;
top: 0;
right: 0;
left: 0;
}
.parallax-base
{
top: 175px;
-webkit-transform: translateZ(0);
transform: translateZ(0);
margin-left: 15%;
margin-right: 15%;
}
.parallax-back
{
width: 100%;
top: 150px;
-webkit-transform: translateZ(-3px);
transform: translateZ(-3px) scale(4);
}
nav
{
position: fixed;
top: 0px;
z-index: 3200;
font-size: 40px;
top: 55px;
right: 30px;
}
a
{
text-decoration: none;
color: red;
}
h1
{
color: red;
}
p
{
color: red;
}
div
{
background-color: 2f2f2f;
}
I've taken up interest in HTML/CSS Coding as of late and have run into a problem very quickly that I cant seem to solve or properly understand based on other answered questions similar to mine.
My positioning is based off pixels when it should be percent?
How to get my elements and pictures to stop rescaling as the browser shrinks, have it simply cut off like in near every website?
How do I choose between Absolute and Relative positioning?
Here's my HTML&CSS:
body {
font-family: "Courier New", Courier, monospace;
background: linear-gradient(to bottom, #1D4350 , #A43931);
background-attachment: scroll;
}
html, body, #wrapper {
min-width: 100%;
min-height: 100%;
}
#content {
height: 1200px;
}
.Octagon {
color: #2aa186;
text-align: center;
line-height: 30%;
margin-top: 25px;
}
.LT {
text-align: center;
color: #3a5454;
line-height: 0%;
font-style: italic;
}
.boi {
cursor: pointer;
margin-right: 30px;
padding: 8px 18px;
border: 1px solid #204156;
border-color: #52AEC9;
color: #52AEC9;
position: absolute;
top: 8px;
right: 16px;
}
.boi:active {
top: 2px;
}
.iob {
cursor: pointer;
margin-left: 30px;
padding: 8px 18px;
border: 1px solid #204156;
border-color: #52AEC9;
color: #52AEC9;
position: absolute;
top: 8px;
}
.boi:active,
.iob:active {
top: 2px;
}
#manyarms {
position: absolute;
margin-top: 30px;
margin-left: 31px;
width: 310px;
height: 250px;
}
#sensible {
position: absolute;
margin-top: 30px;
margin-right: 31px;
width: 310px;
height: 250px;
right: 10px;
}
#verr {
position: absolute;
margin-left: 31px;
margin-top: 285px;
color: #6458b7;
}
#special {
position: absolute;
left: 77.9%;
top: 50%;
color: #6458b7;
}
.boi:hover,
.iob:hover {
text-shadow: 0 0 10px #a193ff;
}
#footer {
padding-left: 95%;
}
<html>
<head>
<title>The Pragmatic Octopus</title>
<meta charset="utf-8"/>
<link rel='stylesheet' href='style.css'/>
<script src='script.js'></script>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1 class="Octagon">The Pragmatic Octopus</h1>
<p class="LT">Lee Townsend</p>
<a href="www.google.com">
<p class="boi">Contact</p>
</a>
<a href="www.google.com">
<p class="iob">Information</p>
</a>
</div>
<div id="content">
<img src="https://s32.postimg.org/406x38nlh/imageedit_1_3827627792 .jpg" alt="mmm~" id="manyarms">
<img src="http://www.wonderslist.com/wp-content/uploads/2014/07/Blue-ringed-octopus.jpg" alt="~mmm" id="sensible">
<p id="verr">Here comes a very special boi!</p>
<p id="special">He loves to pose for photos!</p>
</div>
<div id="footer">
© Hecc
</div>
</div>
</body>
</html>
Either fix my code to what is desired (I'll just see what you did and understand it) or explain what I need do.
Whatever you do, thank you for reading and/or assisting.
You could change min-width: 100%; to min-width: 1000px; in html, body, #wrapper to set the min page width to 1000px. this will make the browser add a scrollbar when the window width is below 1000px.
Only applying min-width: 1000px; to html, body, #wrapper will not work for you since you also used absolute positioning. To fix this add position: relative; to #wrapper.
Why do we need to add position: relative; to #wrapper?
Absolute positioned elements will always position based on the first parent that has position: relative;. If none has this rule, it will just position based on the body. (https://developer.mozilla.org/de/docs/Web/CSS/position)
To learn more about position relative and absolute refer to: https://css-tricks.com/absolute-positioning-inside-relative-positioning/
With those changes being made, your website will stop scaling when the browser window reaces < 1000px in width. Ofc you can change the 1000px to any width you want.
body {
font-family: "Courier New", Courier, monospace;
background: linear-gradient(to bottom, #1D4350 , #A43931);
background-attachment: scroll;
}
html, body, #wrapper {
min-width: 1000px;
min-height: 100%;
}
#wrapper {
position: relative;
/* max-width: 1200px; Edit 1 */
}
#content {
height: 1200px;
}
.Octagon {
color: #2aa186;
text-align: center;
line-height: 30%;
margin-top: 25px;
}
.LT {
text-align: center;
color: #3a5454;
line-height: 0%;
font-style: italic;
}
.boi {
cursor: pointer;
margin-right: 30px;
padding: 8px 18px;
border: 1px solid #204156;
border-color: #52AEC9;
color: #52AEC9;
position: absolute;
top: 8px;
right: 16px;
}
.boi:active {
top: 2px;
}
.iob {
cursor: pointer;
margin-left: 30px;
padding: 8px 18px;
border: 1px solid #204156;
border-color: #52AEC9;
color: #52AEC9;
position: absolute;
top: 8px;
}
.boi:active,
.iob:active {
top: 2px;
}
/* Edit 2 */
#wrapperForTheFirstImage {
position: absolute;
margin-top: 30px;
margin-left: 31px;
width: 310px;
height: 250px;
}
#wrapperForTheSecondImage {
position: absolute;
margin-top: 30px;
margin-right: 31px;
width: 310px;
height: 250px;
right: 10px;
}
/* Removed
#manyarms {
position: absolute;
margin-top: 30px;
margin-left: 31px;
width: 310px;
height: 250px;
}
#sensible {
position: absolute;
margin-top: 30px;
margin-right: 31px;
width: 310px;
height: 250px;
right: 10px;
} */
#verr {
/*position: absolute;
margin-left: 31px;
margin-top: 285px;*/
color: #6458b7;
}
#special {
/*position: absolute;
left: 77.9%;
top: 50%;*/
color: #6458b7;
}
/* Edit 2 END */
.boi:hover,
.iob:hover {
text-shadow: 0 0 10px #a193ff;
}
#footer {
padding-left: 95%;
}
<html>
<head>
<title>The Pragmatic Octopus</title>
<meta charset="utf-8"/>
<link rel='stylesheet' href='style.css'/>
<script src='script.js'></script>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1 class="Octagon">The Pragmatic Octopus</h1>
<p class="LT">Lee Townsend</p>
<a href="www.google.com">
<p class="boi">Contact</p>
</a>
<a href="www.google.com">
<p class="iob">Information</p>
</a>
</div>
<div id="content">
<!-- Edit 2 -->
<div id="wrapperForTheFirstImage">
<img src="https://s32.postimg.org/406x38nlh/imageedit_1_3827627792 .jpg" alt="mmm~">
<p>Here comes a very special boi!</p>
</div>
<div id="wrapperForTheSecondImage">
<img src="http://www.wonderslist.com/wp-content/uploads/2014/07/Blue-ringed-octopus.jpg" alt="~mmm">
<p>He loves to pose for photos!</p>
</div>
<!-- Edit 2 END -->
</div>
<div id="footer">
© Hecc
</div>
</div>
</body>
</html>
Edit 1:
Added max-width to #wrapper to provide an example for (if i understand correctly):
What do I need to do for proper positioning if somebody looks at this
with a higher pixel count screen?
Edit 2:
I think i know what u want now. Consider wrapping your <img> and <p> inside a div and position the div and not the img and the p tag separately.
I just updated the source to provide an example. (and removed the max-width thing)
I am familiar with HTML/CSS but am not advanced by any means.
I am having difficulty styling my form element.
I want to add padding around my form however whenever I do this is only pads the top and the left
The other issue is that when I re-size the window really small the form tag seems to protrude out of the
I would like to know what the proper way to do this is.
Also, if you could look over my simple code and let me know if there is a better/more standard way to do what I am trying to do here.
* {
box-sizing: border-box;
font-size: 15px;
margin: 0;
}
body {
padding: 5%;
}
section {
height: 100%;
float: left;
position: relative;
}
div {} .left-section {
width: 25%;
}
.right-section {
width: 75%;
}
.body-left {
background-color: #000000;
height: 93%;
}
.body-right {
background-color: #DCDCDC;
height: 86%;
}
.header {
background-color: #808080;
height: 7%;
}
.footer {
background-color: #808080;
height: 7%;
width: 100%;
position: absolute;
padding: 5px;
}
form {
position: absolute;
height: 100%;
width: 100%;
display: block;
}
input {
background-color: #808080;
border-style: solid;
border-width: small;
border-color: #555555;
border-radius: 5px;
position: absolute;
padding: 10px;
left: 0;
height: 80%;
width: 90%;
top: 50%;
transform: translateY(-50%);
}
button {
background-color: #808080;
border-style: solid;
border-width: small;
border-color: #555555;
border-radius: 5px;
height: 80%;
width: 10%;
position: absolute;
color: #555555;
top: 50%;
right: 0;
transform: translateY(-50%);
}
<html>
<head>
<title>whisper</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<section id="left" class="left-section">
<div id="header_left" class="header">
</div>
<div id="body_left" class="body-left">
<ol id="users"></ol>
</div>
</section>
<section id="right" class="right-section">
<div id="header_right" class="header">
</div>
<div id="body_right" class="body-right">
<ol id="messages"></ol>
</div>
<div id="footer" class="footer">
<form id="form_id" action="#">
<input id="user_input" />
<button id="btn_id">send</button>
</form>
</div>
</section>
</body>
</html>
P.S. I have checkout this page but I couldn't find a sufficient answer.
I do not know if this helps but I switched the padding of 5 pixels from the footer class to the form styling.
.footer {
background-color: #808080;
height: 7%;
width: 100%;
position: absolute;
}
form {
position: absolute;
height: 100%;
width: 100%;
display: block;
padding: 5px;
}
I can't set the height of the clickeable areas of <a> elements. I've already written display: block; in the CSS sheet, but it doesn't work.
HTML sheet:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<link href='http://fonts.googleapis.com/css?family=Cedarville+Cursive' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="dprenav">
<p id="prenav">Olive</p>
<div>
<a id="fblogo" href="http://www.facebook.com" target="_blank"><img id="imgfblogo" src="f_logo.png"></a>
</div>
<div>
<a id="right-corner" href="http://www.youtube.com" target="_blank"><img src="corner_banner.png"></a>
</div>
<div>
</div>
</div>
</body>
</html>
CSS sheet:
body {
background-color: olive;
}
h1 {
font-family: 'Cedarville Cursive', cursive;
font-size: 230px;
text-align: center;
padding: 0px;
}
a {
display: block;
text-align: center;
font-family: 'Cedarville Cursive', cursive;
color: white;
font-size: 100px;
padding: 0px;
text-decoration: none;
}
#prenav {
font-family: 'Cedarville Cursive', cursive !important;
font-size: 25px !important;
color: white !important;
}
#dprenav {
background-color: #97BB55;
height: 50px;
width: 3000px;
margin: -7px;
padding-left: 5px;
position: relative;
}
#right-corner {
position: fixed;
cursor: pointer;
top: 0px;
right: 0px;
z-index: 99999;
}
#twitter-follow-button {
display: block;
position: absolute;
top: -85px;
left: 80px;
display: block;
height: 0px;
width: 0px;
}
#fblogo {
position: absolute;
top: -80px;
left: 145px;
display: block;
height: 0px;
width: 0px;
}
#imgfblogo {
height: 40px;
}
The width of the clickeable areas o the <a> elements is alright, but i cannot set the height, it's to big and I can set it in a small size.
Since you're setting the images inside the anchors height: 0px; width: 0px;, the anchors need to have defined measurements to compensate for the lack of children providing said measurements.
Something like this should work:
#dprenav a {
height: 50px;
}