I'm kinda begginer in html.
I have this code in html
.header{
height: 200px;
background-image: url(https://cdn.wallpapersafari.com/30/3/T07WKU.png);
background-repeat: no-repeat;
background-size:
}
.header h1{
text-align: center;
padding-top: 75px;
font-family: 'Akaya Telivigala', cursive;
color: #FFF
}
.header h1:hover{
color:lime;
}
.sth{
height: 400px;
background-image: url(https://mcdn.wallpapersafari.com/medium/43/0/KIieEY.jpg);
background-size: cover;
background-repeat: no-repeat;
}
#space{
height: 20px;
background-color: #FDF0D5
}
.sth h2{
margin: 0;
color: white;
text-align: center;
padding-top: 100px;
font-family: 'Akaya Telivigala', cursive;
font-size: 35px;
color: pink;
}
#aa{
padding: 30;
}
<html>
<head>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Akaya+Telivigala&display=swap" rel="stylesheet">
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="header">
<h1> Vous êtes les bienvenues dans notre site web </h1>
</div>
<div id="space"> </div>
<div class="sth">
<h2> Vous pouvez vous enregistrer pour de benificiez de nos services </h2>
<h2 id="aa"> <button><p> Sign up </p></button> </h2>
</div>
</body>
</html>
when i try to change button width with the id aa, it dont stay in the center like the other h2 and go the left, what to do to prevent it from changing position and giving it bigger width
thanks
or even if there is another way to put it in the center please help me
.header{
height: 200px;
background-image: url(https://cdn.wallpapersafari.com/30/3/T07WKU.png);
background-repeat: no-repeat;
background-size:
}
.header h1{
text-align: center;
padding-top: 75px;
font-family: 'Akaya Telivigala', cursive;
color: #FFF
}
.header h1:hover{
color:lime;
}
.sth{
height: 400px;
background-image: url(https://mcdn.wallpapersafari.com/medium/43/0/KIieEY.jpg);
background-size: cover;
background-repeat: no-repeat;
}
#space{
height: 20px;
background-color: #FDF0D5
}
.sth h2{
margin: 0;
color: white;
text-align: center;
padding-top: 100px;
font-family: 'Akaya Telivigala', cursive;
font-size: 35px;
color: pink;
}
#aa{
padding: 30;
}
<html>
<head>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Akaya+Telivigala&display=swap" rel="stylesheet">
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="header">
<h1> Vous êtes les bienvenues dans notre site web </h1>
</div>
<div id="space"> </div>
<div class="sth">
<h2> Vous pouvez vous enregistrer pour de benificiez de nos services </h2>
<h2 id="aa"> <button style="height:200px;width:200px"><p> Sign up </p></button> </h2>
</div>
</body>
</html>
There's two things in css height and width. I just changed height and width of button. You can try also. style="height:200px;width:200px"
Related
Why is the red color on my website appearing inverted when I host it online, while the other images display correctly? I've inspected that a new background-image of base64 is being applied on top of the CSS, but I don't understand why this is happening.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>The Simons Game</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
rel="shortcut icon"
href="Game_Button/Yellow_button.png"
type="image/x-icon" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
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=Rye&display=swap"
rel="stylesheet" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<!-- Body heading -->
<h1 id="header">The Simons Game</h1>
<h2 id="title">Press any key to start</h2>
<!-- font size is added for removing space between buttons -->
<!-- Buttons section -->
<div class="contain" style="font-size: 0">
<div type="button" id="red" class="press butn red"></div>
<div type="button" id="blue" class="press butn blue"></div>
<div type="button" id="green" class="press butn green"></div>
<div type="button" id="yellow" class="press butn yellow"></div>
</div>
<h2 id="highscore">Highscore 0</h2>
<input
type="button"
id="Soundcontroller"
value="music"
onclick="togglePlay(),textchange()" />
<audio id="myAudio" src="neon-gaming-128925.mp3" loop autoplay ></audio>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="index.js"></script>
</body>
</html>
#font-face {
font-family: "carnival";
src: url(Fonts/Carnevalee\ Freakshow.ttf);
}
#font-face {
font-family: "railroad";
src: url(Fonts/IFC\ RAILROAD\ 2.ttf);
}
body {
text-align: center;
background-color: red;
background-image: url(newbg.svg);
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
}
#header {
padding: 1%;
font-size: 6rem;
font-family: "carnival", cursive;
color: #f49d1a;
text-shadow: #9a5d02 6px 4px;
}
h2 {
font-size: 4rem;
font-family: "railroad", cursive;
color: #f49d1a;
text-shadow: #9a5d02 4px 3px;
}
#title {
margin-top: 2%;
margin-bottom: 2%;
}
/* Game over Flash Screen */
.game-over {
opacity: 0.3;
}
/* Button Container Styling */
.press {
outline: none;
width: 230px;
height: 235px;
display: inline-block;
text-align: center;
padding: 2%;
margin: 20px;
}
/* Glow Buttons */
.redglow {
background-image: url(Game_Button/Red_button_glow.png);
background-size: cover;
background-repeat: no-repeat;
}
.blueglow {
background-image: url(Game_Button/Blue_button_glow.png);
background-size: cover;
background-repeat: no-repeat;
}
.greenglow {
background-image: url(Game_Button/Green_button_glow.png);
background-size: cover;
background-repeat: no-repeat;
}
.yellowglow {
background-image: url(Game_Button/Yellow_button_glow.png);
background-size: cover;
background-repeat: no-repeat;
}
/* Normal Buttons */
.red {
background-image: url(Game_Button/Red_button.png);
background-size: cover;
background-repeat: no-repeat;
}
.blue {
background-image: url(Game_Button/Blue_button.png);
background-size: cover;
background-repeat: no-repeat;
}
.green {
background-image: url(Game_Button/Green_button.png);
background-size: cover;
background-repeat: no-repeat;
}
.yellow {
background-image: url(Game_Button/Yellow_button.png);
background-size: cover;
background-repeat: no-repeat;
}
/* audio buttons */
#Soundcontroller {
font-family: "railroad", cursive;
font-size: 2.5rem;
color: #f49d1a;
text-shadow: #9a5d02 3px 2px;
background: none;
border: none;
display: inline-block;
position: absolute;
/* top: 20px; */
/* left: 100px; */
text-align: right;
left: 2%;
top: 2%;
}
It is apperaing like this after hosting it on Github
on my local server as i am expecting]
I was using a dark reader extension of chrome, which made colours look inverted.
After disabling the extension every thing worked fine.
I'm currently following the tutorial on parallax effects on W3Schools. Basically, I have it so where the parallax is scrolling over my background correctly, but it's not scrolling over the text as well.
I tried a lot of things but it still doesn't work. I also saw one other post about this issue, but their code differed a lot from mine so it was hard to understand.
Here is the image of what is happening (the words are scrolling up with the page):
Here's my code:
*{
box-sizing: border-box;
}
body{
margin: 0px;
background-color: #ffffff;
}
ul{
text-align: center;
padding: 0px 20px;
margin: 12px auto;
list-style: none;
position: fixed;
z-index:10;
top: 0;
}
ul, li{
display: inline-table;
}
li{
margin: 10px 30px;
font-size: 15px;
color: #42385d;
font-weight: bold;
font-family: 'Roboto Slab', serif;
}
.navbar{
background-color: #ffcfda;
position: fixed;
width: 100%;
border-bottom: 1px solid #ffcfda;
z-index: 10;
height: 70px;
top: 0;
overflow: hidden;
}
#parallax{
background-image: url("pinkbackground.jpg");
min-height: 100vh;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
position: relative;
}
.transition{
height: 200px;
background-color: #42385d;
width: 100%;
}
.intro-text{
text-align: center;
width: 100%;
color: #42385d;
padding: 37vh;
height: 100vh;
width: 100%;
font-size: 50px;
font-family: 'Roboto Slab', serif;
position: relative;
background-attachment: initial;
}
.question{
font-size: 30px;
font-family: 'Roboto Mono', monospace;
color: #42385d;
font-weight: bolder;
padding-top: 40px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<title>schpiel - Applying, Made Easier</title>
<!--meta data-->
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<meta name = "description" content =
"schpiel, like the name implies, makes applying easier.
no, it doesn't sound like that? :(. Using our new autofill
feature, with one click you can apply instantly!">
<!--styling-->
<link rel="stylesheet" href="style.css">
<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+Mono:ital,wght#1,300&family=Roboto+Slab&display=swap" rel="stylesheet">
<link rel="icon" href="https://i.imgur.com/RoPgdJh.jpg">
</head>
<body>
<div id="navigation">
<nav class="navbar";>
<ul>
<li>
<a>
Home
</a>
</li>
<li>
<a>
About
</a>
</li>
<li>
<a>
Contact
</a>
</li>
</ul>
</nav>
</div>
<div id="parallax">
<div class="intro-text">
text
<br>
here
</div>
</div>
<div class="transition"></div>
<section id="whatIsSchpiel">
<div class="question">
What is schpiel?
</div>
<div class="answer">
sscsdafads
</div>
</section>
</body>
<footer>
</footer>
Wassup guys, I'm trying to do a small website for a school project, and I've encountered a problem with background on a multiple div
So here is my HTML
`
<div class="bloc-1-text">
<h3>
</h3>
<p>
</p>
<div class="bloc-1-img"></div>
</div>
</div>
</div>`
And here my CSS
> .promesses{
font-family: 'Dosis', sans-serif;
font-weight: 500;
}
.bloc-1{
border: 1px solid black;
width: 100%;
height: 400px;
}
.bloc-1 .bloc-1-img{
float: left;
width: 50%;
height: 100%
background-image: url(image1.jpg);
position: relative;
}
.bloc-1-text{
float: right;
width: 50%;
height: 100%;
background: #dbdbdb;
padding-left: 10px;
padding-right: 10px;
text-align: center;
}
.bloc-1-text h3{
text-align: center;
}
This is not the entire code, but just the code where is the problematic. If you have anything to specify, just tell me. I'll add it here
Ok so since yesterday, I've tried to go forward a bit. Here is the code:
HTML
`<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta charset="utf-8">
<title>Parti Nationaliste Québécois</title>
<link rel="stylesheet" type="text/css" href="css/promesse.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="shortcut icon" type="image/x-icon" href="img/Logo.png">
</head>
<body>
<header>
<img src="img/Logo.jpg">
<div class="menu-toggle"></div>
<nav>
<ul>
<li>Accueil</li>
<li>Intention</li>
<li>Chefs</li>
<li>Histoire</li>
<li>Don</li>
</ul>
</nav>
<div class="clearfix"></div>
</header>
<script
src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.menu-toggle').click(function(){
$('.menu-toggle').toggleClass('active')
$('nav').toggleClass('active')
})
});
</script>
<div class="promesses">
<div class="bloc-1">
<div class="bloc-1-text">
<h3>
Emploi Assuré
</h3>
<p>
Nous avons pour toi un emploi assuré. Que ce soit dans l'armée ou dans une de nos grandes entreprises dans chacunes de nos région, tu n'auras pas de quoi te plaindre que le plaisir
</p>
<div class="bloc-1-img"></div>
</div>
</div>
</div>
`
And here is my CSS
#import url('https://fonts.googleapis.com/css2?family=Dosis:wght#200;300;400;500;600;700;800&display=swap');
.promesses{
font-family: 'Dosis', sans-serif;
font-weight: 500;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.bloc-1{
border: 1px solid black;
width: 100%;
height: 400px;
}
.bloc-1-img{
width: 50%;
height: 100vh;
background-image: url("img/image1.jpg");
}
.bloc-1-text{
float: right;
width: 50%;
height: 100%;
background: #dbdbdb;
padding-left: 10px;
padding-right: 10px;
text-align: center;
}
.bloc-1-text h3{
text-align: center;
}
delete bloc-1 which is next to block-1-img
and set bloc-1-text to 100vh not 100%
i`ve checked on my pc and it worked
Answer
.bloc-1 .bloc-1-img{
float: left;
width: 50%;
height: 100%;<<<<<<<----
background-image: url("image1.jpg");
position: relative;
}
lost ";"
CSS Selector
https://www.w3schools.com/cssref/css_selectors.asp
I have a problem in inline-block, i cannot make block over my hyperlink and block are going some other position.
Here the code of Html and CSS.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html{
background-color: #fff;
color: #555;
font-family: 'Lato','Arial', sans-serif;
font-weight: 400;
font-size: 20px;
text-rendering: optimizeLegibility;
}
.row{
max-width: 1140px;
margin: 0 auto;
}
Header{
background-image:linear-gradient(rgba(0, 0, 0, 0.7) , rgba(0, 0, 0, 0.7)), url(img/hero.jpg);
background-size: cover;
background-position: center;
height: 100vh;
}
.hero-text-box{
position: absolute;
width: 1140px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
h1{
margin: 0;
color: #fff;
font-size: 240%;
font-weight: 300;
text-transform: uppercase;
letter-spacing: 1px;
word-spacing: 4px;
}
.btn{
display: inline-block;
padding: 10px 30px;
font-weight: 300 ;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
<link rel="stylesheet" type="text/css" href="vendors/css/grid.css">
<link rel="stylesheet" type="text/css" href="resources/css/style1.css">
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,400i,700" rel="stylesheet" type="text/css">
<title>Thefoodieefreak</title>
</head>
<body>
<header>
<div class="hero-text-box">
<h1>GoodBye junk food.<br> Hello super healthy meals</h1>
<a class="btn btn-full" href="#">I'm hungry</a>
<a class="btn btn-ghost" href="#">Show me more</a>
</div>
</header>
</body>
</html
In the code of Html, i have added a class of btn inside <a> tag and after that in CSS code, i put display:inline-block, but its goes some other position.
This is the website image where block goes some other position:
One more image of website with console
web image with console
Insert the two anchor tag inside of the div element and add css .btn_row{text-align:center;}
<header>
<div class="hero-text-box">
<h1>GoodBye junk food.<br> Hello super healthy meals</h1>
<div class="btn_row">
<a class="btn btn-full" href="#">I'm hungry</a>
<a class="btn btn-ghost" href="#">Show me more</a>
</div>
</div>
</header>
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
<link rel="stylesheet" type="text/css" href="vendors/css/grid.css">
<link rel="stylesheet" type="text/css" href="resources/css/style1.css">
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,400i,700" rel="stylesheet" type="text/css">
<title>Thefoodieefreak</title>
</head>
<body>
<header>
<div class="container">
<div class="hero-text-box">
<h1>GoodBye junk food.<br> Hello super healthy meals</h1>
<a class="btn btn-full" href="#">I'm hungry</a>
<a class="btn btn-ghost" href="#">Show me more</a>
</div>
</div>
</header>
</body>
</html>
and css here:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html{
background-color: #fff;
color: #555;
font-family: 'Lato','Arial', sans-serif;
font-weight: 400;
font-size: 20px;
text-rendering: optimizeLegibility;
}
.row{
max-width: 1140px;
margin: 0 auto;
}
Header{
background-image:linear-gradient(rgba(0, 0, 0, 0.7) , rgba(0, 0, 0, 0.7)), url(img/hero.jpg);
background-size: cover;
background-position: center;
height: 100vh;
}
.container{
width: 1140px;
}
.hero-text-box{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
h1{
margin: 0;
color: #fff;
font-size: 240%;
font-weight: 300;
text-transform: uppercase;
letter-spacing: 1px;
word-spacing: 4px;
}
.btn{
display: inline-block;
padding: 10px 30px;
font-weight: 300 ;
}
I am working on a little project. Until now everything went well, but for one reason or another, when I am making my second page, it will only load a part of the CSS (everything until calendar). I tried to put it in another CSS file and link the two files to the HTML file, and that works, but I would like to have all my CSS in just one file.
Can you help me?
Here is my code:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MyLoveLifeFamily</title>
<link rel="icon" href="./assets/pictures/family.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="header">
<div class="nav">
<div class="navWrapper">
<img src="./assets/pictures/family.ico" alt="Family Icon">
<div class="right">
Thuispagina
Kalender
Foto album
Lijstjes
Gerechten
</div>
</div>
</div>
<div class="headerWrapper">
<h1>Volg ons leven op deze website!</h1>
</div>
</div>
<div class="timeline" id="timeline">
<div class="timelineWrapper">
<h3>Tijdlijn</h3>
<div class="timelinegrid">
<img src="./assets/pictures/family_pic.jpg">
<p>Zeeland - 2018</p>
<p>Welkom Tuur in de familie - 11/01/2018</p>
<img src="./assets/pictures/tuur.jpg">
<img src="./assets/pictures/verjaardag-marie-2017.jpg">
<p>Verjaardag Marie - 2017</p>
<p>Verjaardag Eline - 2016</p>
<img src="./assets/pictures/verjaardag-eline-2016.jpg">
</div>
</div>
</div>
</body>
</html>
calendar.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MyLoveLifeFamily</title>
<link rel="icon" href="./assets/pictures/family.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="nav">
<div class="navWrapper">
<img src="./assets/pictures/family.ico" alt="Family Icon">
<div class="right">
Thuispagina
Kalender
Foto album
Lijstjes
Gerechten
</div>
</div>
</div>
<div class="calendar">
<div class="calendarWrapper">
<h3>Kalender</h3>
<div class="cal">
<!-- CalendarLink -->
</div>
</div>
</div>
style.css
#import url('https://fonts.googleapis.com/css?family=Oswald:400,700');
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
}
html {
font-family: 'Oswald', sans-serif;
}
a {
text-decoration: none;
color: inherit;
}
/* Header */
.header {
background-image: url(assets/pictures/hero_bg.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
height: 90vh;
max-width: 100%;
}
.nav {
width: 100%;
height: 100px;
}
.navWrapper {
width: 85%;
margin: auto;
}
.navWrapper img {
height: 35px;
padding-top: 32.5px;
}
.right {
padding-top: 32.5px;
float: right;
}
#homepage, #calendar, #photoalbum, #lists, #recipes {
color: #000;
font-weight: bold;
font-size: 16px;
margin-right: 35px;
letter-spacing: 0.6px;
}
.headerWrapper {
padding-top: 235px;
}
.headerWrapper h1 {
font-size: 8vw;
font-weight: bold;
color: #4A4A4A;
text-align: center;
letter-spacing: 3.33px;
}
/* Timeline */
.timeline {
width: 100%;
}
.timelineWrapper {
width: 85%;
padding-top: 25px;
margin: auto;
padding-bottom: 75px;
}
.timelineWrapper h3 {
font-size: 40px;
color: #4A4A4A;
letter-spacing: 2px;
font-weight: bold;
}
.timelinegrid {
margin-top: 40px;
display: grid;
grid-template-columns: 500px 500px;
grid-auto-rows: auto auto;
grid-gap: 2%;
align-items: end;
justify-content: center;
}
.timelinegrid img {
width: 100%;
}
.timelinegrid p {
font-size: 30px;
color: #4A4A4A;
}
/* Calendar */
.calendar {
width: 100%;
}
.calendarWrapper {
width: 85%;
padding-top: 25px;
margin: auto;
padding-bottom: 75px;
}
.calendarWrapper h3 {
font-size: 40px;
color: #4A4A4A;
letter-spacing: 2px;
font-weight: bold;
}
Your css has an error. In .timelinegrid(line 98), you have align-items set to end.
If you fix this, the css should fully load.
https://www.w3schools.com/cssref/css3_pr_align-items.asp